:root{
    --navy:#1c2740;
    --navy-2:#26395e;
    --navy-soft:#4a5b7d;
    --green:#8dc938;
    --green-deep:#6ea828;
    --red:#d96a6a;
    --red-deep:#c14b4b;
    --paper:#faf9f6;
    --paper-2:#f1efe9;
    --ink:#171717;
    --line:#dcd9d1;
    --max:1280px;
    --r-sm:8px;
    --r-md:14px;
    --r-lg:22px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  .mono{font-family:'JetBrains Mono',monospace;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 48px;position:relative;}
  @media (max-width:900px){.wrap{padding:0 24px;}}

  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  body{position:relative;}

  .index-rail{
    position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:60;
    display:flex;flex-direction:column;gap:14px;
  }
  @media (max-width:1100px){.index-rail{display:none;}}
  .index-rail button{
    width:9px;height:9px;border-radius:50%;border:1.5px solid var(--navy-soft);
    background:transparent;cursor:pointer;padding:0;transition:all .3s;
  }
  .index-rail button.active{background:var(--green);border-color:var(--green);transform:scale(1.3);}

  /* ==========================================================
     HEADER – liquid glass in three independent layers:
       1. base     blur + saturate + brightness over a translucent
                   fill, plus inset edge lights          → everywhere
       2. refract  SVG displacement map fed through
                   backdrop-filter:url()                 → Chromium
       3. gloss    diagonal sheen on mix-blend-mode:screen
                   → deliberately NOT used here: screen blending
                     adds nothing over a light page, so layer 1's
                     top edge light carries the shine instead.
     Layer 2 replaces layer 1's look where it is supported. Layer 1
     must stay OUTSIDE @supports – Safari and Firefox ignore
     backdrop-filter:url() silently, and without a plain blur()
     underneath the bar would degrade to a flat translucent strip.

     A note on the shape. Edge-to-edge, this bar was invisible: white
     glass over a near-white page is just a white strip – nothing behind
     it to bend or saturate. So the glass moved onto .nav-inner, which
     floats as an inset capsule. Now the page runs past it on both sides
     and underneath it, which is what actually makes glass read.
     ========================================================== */
  header.site{
    position:fixed;top:0;left:0;right:0;z-index:80;
    background:none;border:none;box-shadow:none;
    padding:14px 26px 0;
    pointer-events:none;                 /* the gap must not eat clicks */
    transition:padding .45s cubic-bezier(.22,1,.36,1);
  }
  header.site.scrolled{padding-top:9px;}
  @media (max-width:900px){header.site{padding:10px 14px 0;}}

  .nav-inner{
    pointer-events:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 26px;max-width:var(--max);margin:0 auto;
    border-radius:20px;
    background:rgba(255,255,255,.52);
    -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.08);
    backdrop-filter:blur(22px) saturate(190%) brightness(1.08);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:
      inset 0  1px 0 rgba(255,255,255,.95),      /* top edge – main highlight */
      inset 0 -10px 16px -12px rgba(28,39,64,.2),/* underside – glass thickness */
      0 12px 34px -10px rgba(28,39,64,.22),
      0 2px 6px rgba(28,39,64,.05);
    transition:background .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
  }
  header.site.scrolled .nav-inner{
    background:rgba(255,255,255,.74);
    border-color:rgba(141,201,56,.35);
    box-shadow:
      inset 0  1px 0 rgba(255,255,255,1),
      inset 0 -10px 16px -12px rgba(28,39,64,.22),
      0 16px 40px -10px rgba(28,39,64,.26),
      0 2px 6px rgba(28,39,64,.06);
  }
  /* layer 2 – real refraction. The blur stays low here on purpose: a
     heavy blur washes the displacement out, and the glass should read
     from light bending at the rim, not from murk. Some blur is kept
     because this page is light with dark text – pure refraction would
     let dark sections scroll through and eat the nav labels. */
  @supports (backdrop-filter: url(#glass-bar-nav)) or (-webkit-backdrop-filter: url(#glass-bar-nav)){
    /* Where the lens works the bar stops leaning on blur to look like glass
       and leans on refraction instead – the same trade the cursor makes.
       Blur drops to almost nothing and the fill thins right out, so what is
       underneath stays sharp and simply bends at the rim. */
    html:not(.no-lens) .nav-inner{
      background:rgba(255,255,255,.34);
      -webkit-backdrop-filter:url(#glass-bar-nav) blur(1.5px) saturate(210%) brightness(1.07);
      backdrop-filter:url(#glass-bar-nav) blur(1.5px) saturate(210%) brightness(1.07);
      box-shadow:
        inset 0  1px 0 rgba(255,255,255,.9),
        inset 0 -8px 14px -12px rgba(28,39,64,.22),
        0 12px 34px -12px rgba(28,39,64,.24),
        0 2px 6px rgba(28,39,64,.05);
    }
    html:not(.no-lens) header.site.scrolled .nav-inner{
      background:rgba(255,255,255,.56);
      -webkit-backdrop-filter:url(#glass-bar-nav) blur(3px) saturate(200%) brightness(1.05);
      backdrop-filter:url(#glass-bar-nav) blur(3px) saturate(200%) brightness(1.05);
    }
    /* the copy now sits on much thinner glass, so give it a whisper of a
       halo – invisible on the light page, but it keeps the labels crisp
       when a dark section scrolls through underneath */
    html:not(.no-lens) .nav-inner .logo, html:not(.no-lens) .nav-inner nav.links a{
      text-shadow:0 1px 2px rgba(255,255,255,.7), 0 0 8px rgba(255,255,255,.55);
    }
  }
  /* Safari (iOS + macOS) — no SVG lens available, so the bar cannot bend the
     colour underneath it. It leans on a heavy frost and a hard saturation lift
     instead, which pulls the colour through rather than refracting it, and a
     two-ended gradient rim stands in for the chromatic edge the displacement
     map would otherwise have drawn. */
  html.no-lens .nav-inner{
    position:relative;
    /* The blur stays low on purpose. A heavy frost here reads as an opaque
       band — the page behind disappears and only its average colour bleeds
       through, which is the opposite of glass. Keeping the blur soft and
       pushing saturation instead lets the content stay legible underneath
       while the bar still picks up whatever colour is passing below it. */
    background:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(3px) saturate(250%) brightness(1.05);
    backdrop-filter:blur(3px) saturate(250%) brightness(1.05);
  }
  html.no-lens header.site.scrolled .nav-inner{
    background:rgba(255,255,255,.30);
    -webkit-backdrop-filter:blur(6px) saturate(225%) brightness(1.04);
    backdrop-filter:blur(6px) saturate(225%) brightness(1.04);
  }
  html.no-lens .nav-inner::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;z-index:0;
    background:
      linear-gradient(115deg, rgba(141,201,56,.10), rgba(255,255,255,0) 20%),
      linear-gradient(295deg, rgba(90,150,255,.09), rgba(255,255,255,0) 20%);
  }
  html.no-lens .nav-inner > *{position:relative;z-index:1;}
  /* thin glass means page content shows through behind the labels, so they
     get the same whisper of a halo the refracting bar uses */
  html.no-lens .nav-inner .logo, html.no-lens .nav-inner nav.links a{
    text-shadow:0 1px 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.85),
                0 0 14px rgba(255,255,255,.7);
  }
  /* the wordmark is an image, so text-shadow does nothing for it — it needs a
     drop-shadow of its own to stay readable when a dark section passes under */
  html.no-lens .nav-inner .logo img{
    filter:drop-shadow(0 0 5px rgba(255,255,255,.75)) drop-shadow(0 0 12px rgba(255,255,255,.5));
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .nav-inner{background:rgba(250,249,246,.97);}
  }
  @media (max-width:900px){.nav-inner{padding:11px 16px;border-radius:16px;}}
  .logo{display:flex;align-items:center;gap:0;}
  .logo img{display:block;height:38px;width:auto;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
  .logo:hover img{transform:scale(1.05);}
  nav.links{display:flex;gap:34px;font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:500;color:var(--navy);}
  @media (max-width:900px){nav.links{display:none;}}
  nav.links a{position:relative;padding-bottom:4px;transition:color .3s ease;}
  nav.links a:hover{color:var(--green-deep);}
  nav.links a::after{
    content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
    background:linear-gradient(90deg, var(--green), var(--green-deep));
    transform:scaleX(0);transform-origin:right;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  nav.links a:hover::after{transform:scaleX(1);transform-origin:left;}
  .cta-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--navy);color:#fff;padding:13px 24px;border-radius:11px;
    font-size:13px;letter-spacing:.03em;text-transform:uppercase;font-weight:600;
    border:1px solid transparent;cursor:pointer;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s;
    box-shadow:0 1px 2px rgba(28,39,64,.08), 0 12px 24px -14px rgba(28,39,64,.55);
    position:relative;overflow:hidden;
  }
  .cta-btn:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 2px 4px rgba(28,39,64,.1), 0 18px 30px -14px rgba(110,168,40,.5);}
  .cta-btn.ghost{background:transparent;color:var(--navy);border-color:var(--line);box-shadow:none;}
  .cta-btn.ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 12px 24px -14px rgba(28,39,64,.4);}

  section{position:relative;padding:96px 0 78px;}
  section.tight{padding:70px 0;}
  @media (max-width:900px){section{padding:70px 0 52px;}}

  .eyebrow{
    display:flex;align-items:center;gap:9px;
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--navy-soft);margin-bottom:26px;
  }
  .eyebrow .num{color:var(--green-deep);font-weight:600;}

  h1{
    font-size:clamp(36px,5.6vw,74px);line-height:1.06;font-weight:700;letter-spacing:-.01em;
    color:var(--navy);margin:0 0 28px;
  }
  h1 br.lb{display:block;content:"";}
  @media (max-width:700px){h1 br.lb{display:none;}}
  h2{
    font-size:clamp(30px,4.2vw,52px);line-height:1.08;font-weight:700;color:var(--navy);
    margin:0 0 20px;max-width:18ch;letter-spacing:-.01em;
  }
  h3{font-size:20px;font-weight:600;color:var(--navy);margin:0 0 10px;}
  p{font-size:16.5px;line-height:1.7;color:#3d3d3d;margin:0 0 16px;}
  .lede{font-size:19px;line-height:1.6;color:#3d3d3d;max-width:52ch;}

  /* HERO */
  .hero{padding-top:170px;padding-bottom:66px;overflow:visible;}
  .hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:60px;align-items:end;}
  @media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:36px;}}
  .hero-cta-row{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
  .hero-side{border-left:1px solid var(--line);padding-left:32px;position:relative;}
  @media (max-width:960px){.hero-side{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:24px;}}
  .hero-side p{font-size:15px;}
  .partner-line{margin-top:22px;font-size:13px;color:var(--navy-soft);font-family:'JetBrains Mono',monospace;letter-spacing:.02em;}

  /* MARQUEE – JS ensures no gaps at any screen width */
  .marquee{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:16px 0;overflow:hidden;white-space:nowrap;background:var(--paper-2);
  }
  .marquee-track{display:flex;width:max-content;animation:scroll 60s linear infinite;}
  .marquee-group{display:flex;flex:0 0 auto;}
  .marquee span{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-soft);margin-right:60px;white-space:nowrap;}
  .marquee span.sep{color:var(--green-deep);}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ==========================================================
     NECESSITY – an essay, so the job is to break a wall of text
     into beats a reader can move through. Five of them, each with
     its own visual logic rather than five identical prose blocks.
     ========================================================== */

  /* beat 1 – the epigraph */
  .nec-epigraph{max-width:900px;margin:0 auto;text-align:center;padding:16px 0 76px;}
  .nec-epigraph .rule{width:1px;height:56px;margin:0 auto 30px;background:linear-gradient(180deg, transparent, var(--green));}
  .nec-quote{
    font-size:clamp(26px,3.4vw,42px);line-height:1.32;font-weight:600;
    letter-spacing:-.01em;color:var(--navy);margin:0 0 24px;
  }
  .nec-quote em{font-style:normal;color:var(--green-deep);position:relative;white-space:nowrap;}
  .nec-quote em::after{
    content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;
    background:rgba(141,201,56,.28);border-radius:2px;z-index:-1;
    transform:scaleX(0);transform-origin:left;
    transition:transform .9s cubic-bezier(.22,1,.36,1) .35s;
  }
  .nec-epigraph.in .nec-quote em::after{transform:scaleX(1);}
  .nec-epigraph p{font-size:17px;line-height:1.7;color:#3d3d3d;max-width:62ch;margin:0 auto;}

  /* beat 2 – the inversion. The whole argument in one picture:
     which way the arrow points, and therefore who does the bending. */
  .nec-flip{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 30px;}
  @media (max-width:900px){.nec-flip{grid-template-columns:1fr;}}
  .flip-card{
    position:relative;overflow:hidden;border-radius:var(--r-md);
    padding:30px 30px 34px;border:1px solid var(--line);background:rgba(255,255,255,.6);
  }
  .flip-card.them{background:rgba(217,106,106,.05);border-color:rgba(217,106,106,.24);}
  .flip-card.us{background:rgba(141,201,56,.07);border-color:rgba(141,201,56,.32);}
  .flip-tag{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  }
  .flip-card.them .flip-tag{color:var(--red-deep);}
  .flip-card.us .flip-tag{color:var(--green-deep);}
  .flip-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
  .flip-card h3{font-size:17px;margin:0 0 22px;}

  /* the little stage: two chips and an arrow between them */
  .flip-stage{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
  .flip-chip{
    flex:1;min-width:0;text-align:center;padding:13px 8px;border-radius:10px;
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:transform 1s cubic-bezier(.6,0,.3,1) .5s, border-radius 1s cubic-bezier(.6,0,.3,1) .5s, background 1s ease .5s;
  }
  .chip-biz{background:#fff;border-color:var(--line);color:var(--navy);}
  .chip-plat{background:var(--navy);border-color:var(--navy);color:#fff;}
  .flip-arrow{flex:0 0 46px;height:22px;position:relative;}
  .flip-arrow svg{width:100%;height:100%;overflow:visible;}
  .flip-arrow path{
    stroke-dasharray:52;stroke-dashoffset:52;
    transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) .25s;
  }
  .nec-flip.in .flip-arrow path{stroke-dashoffset:0;}
  /* their way: the business chip gets squeezed into the platform's shape */
  .nec-flip.in .them .chip-biz{transform:scaleX(.72);border-radius:2px;background:rgba(217,106,106,.1);}
  /* limora: the platform chip relaxes into the business's shape */
  .nec-flip.in .us .chip-plat{border-radius:22px;background:var(--green-deep);border-color:var(--green-deep);}
  .flip-verdict{font-size:14.5px;line-height:1.6;color:#3d3d3d;margin:0;}
  .flip-verdict strong{color:var(--navy);font-weight:600;}
  .flip-card.us .flip-verdict strong{color:var(--green-deep);}
  /* narrow screens: the chips were losing their labels to the ellipsis */
  @media (max-width:900px){
    .flip-card{padding:26px 20px 28px;}
    .flip-stage{gap:8px;}
    .flip-chip{font-size:9px;letter-spacing:.03em;padding:12px 5px;}
    .flip-arrow{flex:0 0 34px;}
  }

  /* beat 3 – the friction ledger: what the gap actually cost, struck out */
  .nec-origin{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:96px 0 0;}
  @media (max-width:900px){.nec-origin{grid-template-columns:1fr;gap:34px;}}
  .ledger{border-left:2px solid var(--line);padding-left:26px;}
  .ledger-item{
    font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.55;color:var(--navy-soft);
    padding:11px 0;position:relative;
  }
  /* struck through with text-decoration rather than an absolutely
     positioned bar: the bar only ever covers the first line box, so it
     broke as soon as an item wrapped on a narrow screen. */
  .ledger-item span{
    text-decoration:line-through;
    text-decoration-color:transparent;
    text-decoration-thickness:1.5px;
    transition:text-decoration-color .5s ease, color .5s ease;
  }
  .ledger-item{opacity:0;transform:translateX(-8px);transition:opacity .5s ease, transform .5s ease;}
  .nec-origin.in .ledger-item{opacity:1;transform:translateX(0);}
  .nec-origin.in .ledger-item:nth-child(1){transition-delay:.15s;}
  .nec-origin.in .ledger-item:nth-child(2){transition-delay:.3s;}
  .nec-origin.in .ledger-item:nth-child(3){transition-delay:.45s;}
  .nec-origin.in .ledger-item:nth-child(1) span{text-decoration-color:var(--red);transition-delay:.45s;}
  .nec-origin.in .ledger-item:nth-child(2) span{text-decoration-color:var(--red);transition-delay:.6s;}
  .nec-origin.in .ledger-item:nth-child(3) span{text-decoration-color:var(--red);transition-delay:.75s;}
  .ledger-sum{
    margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);
    font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;
    color:var(--green-deep);font-weight:500;
    opacity:0;transform:translateY(8px);
    transition:opacity .6s ease .95s, transform .6s ease .95s;
  }
  .nec-origin.in .ledger-sum{opacity:1;transform:translateY(0);}

  /* beat 4 – three pillars */
  .nec-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
  @media (max-width:900px){.nec-pillars{grid-template-columns:1fr;}}
  .pillar{
    position:relative;padding:30px 26px 28px;border-radius:var(--r-md);
    border:1px solid var(--line);background:rgba(255,255,255,.6);overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  }
  .pillar:hover{transform:translateY(-4px);border-color:rgba(141,201,56,.4);box-shadow:0 18px 36px -20px rgba(28,39,64,.4);}
  .pillar .pnum{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
    color:var(--green-deep);display:block;margin-bottom:16px;
  }
  .pillar h3{font-size:17px;line-height:1.35;margin:0 0 12px;}
  .pillar p{margin:0;font-size:14.5px;line-height:1.65;color:#3d3d3d;}

  /* beat 5 – the loop: necessity feeding back in with every deployment */
  .nec-loop{
    margin-top:96px;padding:52px 44px;border-radius:var(--r-lg);
    background:var(--navy);color:#fff;position:relative;overflow:hidden;
    display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
  }
  @media (max-width:900px){.nec-loop{grid-template-columns:1fr;gap:32px;padding:38px 26px;text-align:center;}}
  .loop-ring{width:132px;height:132px;flex:0 0 auto;margin:0 auto;}
  @media (max-width:900px){.loop-ring{width:104px;height:104px;}}
  .loop-ring circle.track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;}
  .loop-ring circle.spin{
    fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;
    stroke-dasharray:34 260;transform-origin:50% 50%;
    animation:loopSpin 5.5s linear infinite;
  }
  @keyframes loopSpin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){.loop-ring circle.spin{animation:none;}}
  .loop-ring circle.dot{fill:var(--green);}
  .nec-loop h3{color:#fff;font-size:22px;line-height:1.35;margin:0 0 14px;}
  .nec-loop p{margin:0;font-size:15.5px;line-height:1.7;color:#c7cede;max-width:72ch;}
  @media (max-width:900px){.nec-loop p{margin-inline:auto;}}
  /* the cycle spelled out flat – a curved textPath at this size was
     unreadable and clipped its own last word */
  .loop-cycle{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;
    font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  }
  @media (max-width:900px){.loop-cycle{justify-content:center;}}
  .loop-cycle b{
    font-weight:500;color:#fff;background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 15px;
  }
  .loop-cycle i{font-style:normal;color:var(--green);}

  /* reveal */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
  .stagger.in > *{opacity:1;transform:translateY(0);}
  .stagger.in > *:nth-child(1){transition-delay:.05s;}
  .stagger.in > *:nth-child(2){transition-delay:.14s;}
  .stagger.in > *:nth-child(3){transition-delay:.23s;}
  .stagger.in > *:nth-child(4){transition-delay:.32s;}
  .stagger.in > *:nth-child(5){transition-delay:.41s;}

  /* ADVANTAGE – comparison table: shared category column outside two colored panels */
  .compare-table{display:grid;grid-template-columns:172px 1fr 1fr;column-gap:20px;row-gap:0;margin-top:48px;opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
  .compare-table.in{opacity:1;transform:translateY(0);}

  .cc-legend{display:none;}

  @media (max-width:900px){
    .compare-table{grid-template-columns:1fr;row-gap:0;}
    /* two big duplicate header cards don't work stacked full-width – replace with a slim legend */
    .cc-headcell{display:none;}
    .cc-legend{display:flex;gap:22px;grid-column:1/-1;margin-bottom:22px;}
    .cc-legend span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--navy);}
    .cc-legend .cc-badge{width:22px;height:22px;}
    /* each category's bad+good rows fuse into one rounded card instead of two full-width blocks */
    .cc-cell{border-radius:0 !important;border-left:1px solid;border-right:1px solid;}
    .cc-cell.bad{border-top:1px solid;border-bottom:none !important;}
    .cc-cell.good{border-top:none;border-bottom:1px solid !important;}
    .cc-label.data + .cc-cell.bad{border-top-left-radius:var(--r-md) !important;border-top-right-radius:var(--r-md) !important;}
    .cc-cell.good{border-bottom-left-radius:var(--r-md) !important;border-bottom-right-radius:var(--r-md) !important;}
  }

  .cc-label{display:flex;align-items:flex-end;padding:0 2px 20px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;color:var(--navy-soft);text-transform:uppercase;}
  .cc-label.data{align-items:center;padding:16px 2px;}
  @media (max-width:900px){.cc-label.head{display:none;}.cc-label.data{padding:0 2px 10px;margin-top:26px;}.cc-label.data:first-of-type{margin-top:0;}}

  .cc-headcell{padding:26px 26px 20px;border-bottom:1px solid rgba(255,255,255,.14);}
  .cc-headcell.bad{background:#3d2e42;border:1px solid rgba(217,106,106,.3);border-bottom-color:rgba(217,106,106,.3);border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md);border-bottom-width:1px;}
  .cc-headcell.good{background:#2c413b;border:1px solid rgba(141,201,56,.35);border-bottom-color:rgba(141,201,56,.35);border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md);}
  .cc-head{display:flex;align-items:center;gap:12px;}
  /* --- Liquid Glass (iOS 26) check/cross badges: pre-built glass-sphere
     icons (radial color fill + glass highlight overlay), reused everywhere
     via <use> so the gradient defs live in one place. .cc-badge is just
     the sizing box. --- */
  .cc-badge{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;}
  .cc-badge.row{width:22px;height:22px;margin-top:1px;}
  .cc-badge-icon{width:100%;height:100%;display:block;}
  .cc-badge-icon{position:relative;z-index:1;}
  /* A single glint sweeping across the ball on hover – a narrow bright
     band with soft shoulders, which is what light does on curved glass.
     Inset 8.34% because the ball fills only the central ~83% of the
     icon's viewBox, so the light stays on the glass, not the corners. */
  .cc-badge::after{
    content:"";position:absolute;inset:8.34%;border-radius:50%;z-index:2;
    pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:linear-gradient(115deg,
      transparent 36%,
      rgba(255,255,255,.12) 43%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,.12) 57%,
      transparent 64%);
    background-size:260% 100%;
    background-position:-40% 0;
  }
  @keyframes ccGlint{
    0%{background-position:-40% 0;opacity:0;}
    22%{opacity:1;}
    72%{opacity:1;}
    100%{background-position:120% 0;opacity:0;}
  }
  .cc-head h3{color:#fff;margin:0;font-size:18px;}

  .cc-cell{padding:16px 26px;border-left:1px solid;border-right:1px solid;border-bottom:1px dashed;}
  .cc-cell.bad{background:#3d2e42;border-color:rgba(217,106,106,.3) rgba(217,106,106,.3) rgba(217,106,106,.18);}
  .cc-cell.good{background:#2c413b;border-color:rgba(141,201,56,.35) rgba(141,201,56,.35) rgba(141,201,56,.2);}
  .cc-cell.last{border-bottom:1px solid;}
  .cc-cell.bad.last{border-radius:0 0 var(--r-md) var(--r-md);border-bottom-color:rgba(217,106,106,.3);}
  .cc-cell.good.last{border-radius:0 0 var(--r-md) var(--r-md);border-bottom-color:rgba(141,201,56,.35);}

  /* hover a specific row (or column header) → only that icon comes alive */
  .cc-cell:hover .cc-badge::after,
  .cc-headcell:hover .cc-badge::after{animation:ccGlint .9s ease-out;}

  .cc-cat{display:none;}

  .cc-row{display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateX(-14px);transition:opacity .5s ease, transform .5s ease;}
  .compare-table.in .cc-row{opacity:1;transform:translateX(0);}
  .cc-row p{margin:0;font-size:14.5px;line-height:1.6;color:#c7cede;}
  .cc-row strong{color:#fff;font-weight:600;}
  .cc-cell.good .cc-row p{color:#dbe7c9;}
  .cc-cell.good .cc-row strong{color:#fff;}

  /* WHO IT'S FOR – rounded gapped cards */
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px;}
  @media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.grid-4{grid-template-columns:1fr;}}
  .cell-box{background:var(--paper);padding:32px 26px;border:1px solid var(--line);border-radius:var(--r-md);transition:background .35s, border-color .35s, transform .25s ease;transform-style:preserve-3d;will-change:transform;}
  .cell-box:hover{background:var(--paper-2);border-color:var(--green);}
  .cell-box .icon{margin-bottom:22px;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
  .cell-box:hover .icon{transform:translateY(-4px) rotate(-4deg);}
  .cell-box p{font-size:14.5px;}

  /* CHALLENGE / SOLUTION split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
  @media (max-width:900px){.split{grid-template-columns:1fr;}}
  .split > div{padding:56px 48px;}
  @media (max-width:900px){.split > div{padding:40px 28px;}}
  .split .challenge{background:var(--navy);color:#fff;position:relative;}
  .split .challenge h2{color:#fff;}
  .split .solution{background:var(--paper);position:relative;}
  @media (max-width:900px){.split .solution{border-top:1px solid var(--line);}}
  ul.plain{list-style:none;padding:0;margin:22px 0 0;}
  .cs-row{display:flex;gap:12px;margin:0 -14px 16px;padding:9px 14px;border-radius:10px;opacity:0;transform:translateX(-16px);transition:opacity .55s ease, transform .55s ease, background .3s ease, box-shadow .3s ease;}
  .split.in .cs-row{opacity:1;transform:translateX(0);}
  .split.in .challenge .cs-row:nth-child(2){transition-delay:.1s;}
  .split.in .challenge .cs-row:nth-child(3){transition-delay:.22s;}
  .split.in .solution .cs-row:nth-child(2){transition-delay:.34s;}
  .split.in .solution .cs-row:nth-child(3){transition-delay:.46s;}
  .split.in .solution .cs-row:nth-child(4){transition-delay:.58s;}
  .split.in .challenge .cs-row:hover{transform:translateX(6px);background:rgba(217,106,106,.1);box-shadow:inset 3px 0 0 var(--red);}
  .split.in .solution .cs-row:hover{transform:translateX(6px);background:rgba(141,201,56,.12);box-shadow:inset 3px 0 0 var(--green);}
  .cs-row p{margin:0;font-size:15px;line-height:1.6;}
  .split .challenge .cs-row p{color:#c7cede;}
  /* glass-sphere icons: pop in with the section, spring on row hover */
  .cs-row .cc-badge{width:23px;height:23px;margin-top:2px;opacity:0;transform:scale(.4);
    transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;}
  .split.in .cs-row .cc-badge{opacity:1;transform:scale(1);}
  .split.in .cs-row:hover .cc-badge{transform:scale(1.18) rotate(-6deg);}
  /* hover a specific point → that icon's colored core starts to swirl */
  .split.in .cs-row:hover .cc-badge::after{animation:ccGlint .9s ease-out;}

  /* --- The supplied icons fade to translucent white on their lower-right,
     which vanishes against the pale .solution panel. So inside this section
     each badge gets a real glass body underneath: a tinted marble with a
     specular top, a dark underside and a contact shadow. The icon's own
     translucent half then reads as highlight on that body instead of as
     nothing – more glass, and legible on light and dark alike. --- */
  .split .cs-row .cc-badge::before{
    content:"";position:absolute;inset:5%;border-radius:50%;z-index:0;pointer-events:none;
  }
  .split .cs-row .cc-badge.good::before{
    background:radial-gradient(circle at 34% 26%, rgba(226,248,178,.98), rgba(141,201,56,.95) 46%, rgba(84,132,24,.98) 100%);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.85),
      inset 0 -3px 5px rgba(38,62,8,.55),
      0 2px 6px rgba(28,39,64,.3);
  }
  .split .cs-row .cc-badge.bad::before{
    background:radial-gradient(circle at 34% 26%, rgba(255,214,214,.98), rgba(226,92,92,.95) 46%, rgba(146,28,28,.98) 100%);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.8),
      inset 0 -3px 5px rgba(70,6,6,.55),
      0 2px 6px rgba(0,0,0,.35);
  }
  .split .cs-row .cc-badge-icon{filter:drop-shadow(0 1px 1.5px rgba(28,39,64,.3));}

  /* --- Challenge / Solution: full liquid glass. Each half paints its own
     field of colored ambient blobs (::before), then a glass pane (::after)
     frosts and refracts that field; the copy rides above both at z-index 2.
     Doing it per-half rather than on .split keeps it correct when the grid
     collapses to one column on mobile. --- */
  .split .challenge, .split .solution{overflow:hidden;}
  .split .challenge > *, .split .solution > *{position:relative;z-index:2;}
  .split .challenge::before, .split .solution::before{
    content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  }
  .split .challenge::before{
    background:
      radial-gradient(42% 38% at 24% 16%, rgba(74,91,125,.95), transparent 68%),
      radial-gradient(34% 32% at 80% 28%, rgba(217,106,106,.5), transparent 70%),
      radial-gradient(46% 42% at 60% 86%, rgba(38,57,94,1), transparent 70%),
      radial-gradient(28% 26% at 10% 78%, rgba(141,201,56,.28), transparent 70%);
  }
  .split .solution::before{
    background:
      radial-gradient(40% 36% at 20% 20%, rgba(141,201,56,.6), transparent 68%),
      radial-gradient(36% 32% at 84% 26%, rgba(110,168,40,.4), transparent 70%),
      radial-gradient(44% 40% at 64% 88%, rgba(28,39,64,.22), transparent 70%),
      radial-gradient(28% 26% at 6% 84%, rgba(217,106,106,.18), transparent 70%);
  }
  .split .challenge::after, .split .solution::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .split .challenge::after{
      -webkit-backdrop-filter:blur(26px) saturate(1.5);
      backdrop-filter:blur(26px) saturate(1.5);
      background:rgba(28,39,64,.66);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -70px 100px -70px rgba(0,0,0,.55);
    }
    .split .solution::after{
      -webkit-backdrop-filter:blur(26px) saturate(1.4);
      backdrop-filter:blur(26px) saturate(1.4);
      background:rgba(250,249,246,.76);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -70px 100px -70px rgba(28,39,64,.16);
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .split .challenge::after{background:rgba(28,39,64,.92);}
    .split .solution::after{background:rgba(250,249,246,.95);}
  }
  /* real light refraction where the browser supports SVG backdrop filters */
  @supports (backdrop-filter: url(#glass-bar)) or (-webkit-backdrop-filter: url(#glass-bar)){
    .split .challenge::after{
      -webkit-backdrop-filter:url(#glass-bar) blur(26px) saturate(1.5);
      backdrop-filter:url(#glass-bar) blur(26px) saturate(1.5);
    }
    .split .solution::after{
      -webkit-backdrop-filter:url(#glass-bar) blur(26px) saturate(1.4);
      backdrop-filter:url(#glass-bar) blur(26px) saturate(1.4);
    }
  }

  @media (prefers-reduced-motion:reduce){
    .cc-badge::after{animation:none !important;}
  }

  /* HOW IT WORKS – unified 4-column flow (one structure, not two) */
  .deck-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:88px;position:relative;}
  @media (max-width:960px){.deck-grid{grid-template-columns:1fr;gap:22px;margin-top:48px;}}
  .deck-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 22px 22px;position:relative;box-shadow:0 10px 26px rgba(28,39,64,.1);transition:transform 1.05s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;will-change:transform;}
  .deck-card:nth-child(1){transform:translate(0,0) rotate(-1.5deg) scale(1);z-index:5;}
  .deck-card:nth-child(2){transform:translate(calc(-100% - 20px),5%) rotate(-6deg) scale(.96);z-index:4;}
  .deck-card:nth-child(3){transform:translate(calc(-200% - 40px),-6%) rotate(5deg) scale(.93);z-index:3;}
  .deck-card:nth-child(4){transform:translate(calc(-300% - 60px),4%) rotate(-4deg) scale(.9);z-index:2;}
  .deck-grid.active .deck-card{box-shadow:0 4px 16px rgba(28,39,64,.07);}
  .deck-grid.active .deck-card:nth-child(1){transition-delay:.02s;transform:translate(0,0) rotate(0deg) scale(1);}
  .deck-grid.active .deck-card:nth-child(2){transition-delay:.13s;transform:translate(0,0) rotate(0deg) scale(1);}
  .deck-grid.active .deck-card:nth-child(3){transition-delay:.24s;transform:translate(0,0) rotate(0deg) scale(1);}
  .deck-grid.active .deck-card:nth-child(4){transition-delay:.35s;transform:translate(0,0) rotate(0deg) scale(1);}
  .deck-grid.active .deck-card:hover{transform:translateY(-6px) !important;box-shadow:0 16px 30px rgba(28,39,64,.14);}
  @media (max-width:960px){
    .deck-card, .deck-grid.active .deck-card{transform:translateY(18px) !important;opacity:0;transition:transform .7s ease, opacity .7s ease, box-shadow .6s ease;}
    .deck-grid.active .deck-card{opacity:1;transform:translateY(0) !important;}
    .deck-grid.active .deck-card:nth-child(1){transition-delay:.02s;}
    .deck-grid.active .deck-card:nth-child(2){transition-delay:.1s;}
    .deck-grid.active .deck-card:nth-child(3){transition-delay:.18s;}
    .deck-grid.active .deck-card:nth-child(4){transition-delay:.26s;}
  }
  .deck-card .deck-num{width:26px;height:26px;border-radius:50%;background:var(--paper);border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--navy);margin-bottom:16px;transition:background .4s,border-color .4s,color .4s;}
  .deck-grid.active .deck-card:nth-child(1) .deck-num{background:var(--green);border-color:var(--green);color:#fff;}
  .deck-card h3{font-size:17px;margin-bottom:6px;}
  .deck-card .deck-desc{font-size:13.5px;color:var(--navy-soft);margin-bottom:16px;}
  .deck-card ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px dashed var(--line);}
  .deck-card li{font-size:13.5px;line-height:1.65;padding:6px 0;color:#444;}

  /* MODULES – copy + larger screenshot carousel, alternating */
  .module-row{
    display:grid;grid-template-columns:.7fr 1.3fr;gap:44px;
    padding:64px 0;border-bottom:1px solid var(--line);align-items:center;
  }
  /* On even rows the shot is moved to the first slot. The column template has
     to be mirrored with it, otherwise every left-hand screenshot renders in
     the narrow column and comes out visibly smaller than the right-hand ones. */
  .module-row:nth-child(even){grid-template-columns:1.3fr .7fr;}
  .module-row:nth-child(even) .module-shot{order:-1;}
  @media (max-width:900px){
    .module-row,
    .module-row:nth-child(even){grid-template-columns:1fr;gap:28px;padding:44px 0;}
    .module-row:nth-child(even) .module-shot{order:0;}
  }
  /* let the row breathe past the 1280 wrap once there is room for it – no
     transform, because .browser-frame renders a backdrop-filter inside */
  @media (min-width:1400px){#modulesList{margin-inline:-56px;}}
  .module-copy .m-num{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--navy-soft);margin-bottom:6px;display:block;}
  .module-copy .m-name{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin-bottom:8px;display:block;}
  .module-copy h3{font-size:26px;margin-bottom:16px;}
  .module-copy .m-lead{margin:0 0 18px;font-size:15px;line-height:1.65;color:#3d3d3d;}
  .module-copy li strong{color:var(--navy);font-weight:600;}
  .module-copy ul{list-style:none;padding:0;margin:0;}
  .module-copy li{position:relative;padding-left:20px;margin-bottom:10px;font-size:14.5px;line-height:1.6;color:#3d3d3d;}
  .module-copy li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1.5px;background:var(--green);}

  .module-shot{position:relative;}
  .browser-frame{
    background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(28,39,64,.25);
    position:relative;border-radius:var(--r-md);overflow:hidden;
  }
  .browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper-2);}
  /* the traffic lights only – this used to catch .bar-label as well, which
     turned the address into a fourth grey dot with the text spilling out */
  .browser-bar span:not(.bar-label){width:8px;height:8px;border-radius:50%;background:var(--line);flex:0 0 auto;}
  .browser-bar span:first-child{background:#e2a1a1;}
  .browser-bar .bar-label{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--navy-soft);letter-spacing:.03em;}
  .shot-viewport{position:relative;aspect-ratio:16/10;overflow:hidden;}
  /* real product screenshots: ~1.9:1, so the frame matches their shape and
     the image runs edge to edge instead of sitting in the placeholder inset */
  /* contain, not cover: these shots run 1.79-2.02 and cropping to a single
     ratio was slicing the left sidebar off the Assets screenshot. The frame
     sits at 1.95 so the letterbox never exceeds ~5%, on a dark mat that
     reads as window chrome behind both the dark and the light UIs. */
  /* each set declares its own ratio (--shot-ar) so no set gets letterboxed;
     the frame width stays identical across every module either way */
  .shot-viewport.shots-real{aspect-ratio:var(--shot-ar, 1.85) / 1;background:#16151f;}
  /* hover holds the carousel (JS clears the timer) and brings the frame
     forward, so the detail in a screenshot is actually readable */
  /* module 06 has no product screenshot yet, so it runs as two equal
     content columns instead of copy + frame — and opts out of the even-row
     mirroring, having no .module-shot to mirror. */
  .module-row.mod-wide,
  .module-row.mod-wide:nth-child(even){grid-template-columns:1fr 1fr;align-items:stretch;gap:40px;}
  @media (max-width:900px){
    .module-row.mod-wide,
    .module-row.mod-wide:nth-child(even){grid-template-columns:1fr;gap:26px;}
  }

  /* ==========================================================
     LIMORA INTELLIGENCE demo — a scripted mock of the drawer
     inside the studio workspace. Animated in the page rather
     than shipped as video: a few KB instead of a few MB, stays
     sharp at any size, and replays when the module scrolls in.
     ========================================================== */
  .intel-demo{
    position:relative;display:flex;height:100%;min-height:400px;
    background:#12172a;font-size:11px;line-height:1.4;overflow:hidden;
    --st-cap:#3987e5; --st-ret:#199e70; --st-rev:#c98500;
    --bar-ok:#8ea3c7; --bar-warn:#fab219;
  }
  /* left rail */
  .id-rail{width:44px;flex:0 0 44px;background:#2a2160;display:flex;flex-direction:column;
    align-items:center;padding:10px 0;gap:14px;}
  .id-rail i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.22);display:block;}
  .id-rail i:first-child{background:var(--green);}
  /* main pane */
  .id-main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .id-top{display:flex;align-items:center;gap:14px;padding:9px 14px;background:#171d33;
    border-bottom:1px solid rgba(255,255,255,.07);}
  .id-brand{font-weight:700;color:#fff;letter-spacing:.04em;font-size:11px;}
  .id-top span{color:#8ea3c7;font-size:10px;}
  .id-top span.on{color:#fff;background:rgba(141,201,56,.22);padding:3px 8px;border-radius:5px;}
  .id-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:11px 14px;}
  .id-tile{background:#1b2238;border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:8px 9px;}
  .id-tile b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;}
  .id-tile em{display:block;font-style:normal;color:#7d8fb3;font-size:8.5px;
    text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;}
  .id-rows{padding:0 14px 12px;display:flex;flex-direction:column;gap:5px;}
  .id-row{display:grid;grid-template-columns:74px 1fr 52px;gap:8px;align-items:center;
    background:#1b2238;border-radius:5px;padding:6px 9px;}
  .id-pill{font-size:8px;padding:2px 6px;border-radius:20px;text-align:center;font-weight:600;white-space:nowrap;}
  .p-prod{background:rgba(250,178,25,.2);color:#fab219;}
  .p-done{background:rgba(12,163,12,.22);color:#5fd35f;}
  .p-recv{background:rgba(57,135,229,.22);color:#7db4f2;}
  .id-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;}
  .id-bar span{display:block;height:100%;border-radius:3px;background:#4a5b8f;}
  .id-sku{color:#7d8fb3;font-size:9px;font-family:'JetBrains Mono',monospace;}

  /* the drawer */
  .id-drawer{width:44%;flex:0 0 44%;background:#0e1324;border-left:1px solid rgba(255,255,255,.1);
    display:flex;flex-direction:column;}
  .id-dhead{display:flex;align-items:center;gap:7px;padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);}
  .id-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto;}
  .id-dhead b{color:#fff;font-size:10.5px;letter-spacing:.02em;}
  .id-body{flex:1;padding:11px 12px;display:flex;flex-direction:column;gap:9px;overflow:hidden;}
  .id-msg{opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;}
  .id-msg.show{opacity:1;transform:none;}
  .id-q{align-self:flex-end;max-width:92%;background:rgba(141,201,56,.16);
    border:1px solid rgba(141,201,56,.3);border-radius:10px 10px 3px 10px;
    padding:7px 10px;color:#e6f2d4;font-size:10.5px;}
  .id-a{max-width:100%;color:#c7cede;font-size:10.5px;}
  .id-a strong{color:#fff;font-weight:600;}
  .id-think{display:flex;gap:4px;padding:3px 0;}
  .id-think i{width:5px;height:5px;border-radius:50%;background:#5d6f96;animation:idPulse 1s infinite;}
  .id-think i:nth-child(2){animation-delay:.15s;}
  .id-think i:nth-child(3){animation-delay:.3s;}
  @keyframes idPulse{0%,100%{opacity:.3;}50%{opacity:1;}}
  .id-hero{color:#fff;font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.1;}
  .id-hero small{font-size:10px;font-weight:500;color:#8dc938;display:inline-block;margin-left:6px;}

  /* stacked composition bar — 2px gaps so segments never merge */
  .id-stack{display:flex;gap:2px;margin:7px 0 5px;}
  .id-stack span{height:9px;border-radius:2px;}
  .id-stack span:first-child{border-radius:4px 2px 2px 4px;}
  .id-stack span:last-child{border-radius:2px 4px 4px 2px;}
  .id-key{display:flex;flex-wrap:wrap;gap:9px;font-size:8.5px;color:#8ea3c7;}
  .id-key b{display:inline-flex;align-items:center;gap:4px;font-weight:500;}
  .id-key i{width:7px;height:7px;border-radius:2px;}
  .id-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
  .id-chip{font-family:'JetBrains Mono',monospace;font-size:9px;color:#9fd4ff;
    background:rgba(57,135,229,.16);border:1px solid rgba(57,135,229,.4);
    border-radius:5px;padding:2px 7px;text-decoration:underline;text-underline-offset:2px;}

  /* client comparison — neutral bars, amber only where SLA breaks */
  .id-chart{margin-top:7px;display:flex;flex-direction:column;gap:7px;position:relative;}
  .id-cb{display:grid;grid-template-columns:76px 1fr 32px;gap:6px;align-items:center;}
  .id-cb u{text-decoration:none;color:#c7cede;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .id-cb div{height:11px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
  .id-cb div span{display:block;height:100%;width:0;border-radius:3px;background:var(--bar-ok);
    transition:width .7s cubic-bezier(.3,1,.4,1);}
  .id-cb.warn div span{background:var(--bar-warn);}
  .id-cb b{color:#fff;font-size:9.5px;text-align:right;font-weight:600;}
  .id-cb.warn b{color:var(--bar-warn);}
  .id-flag{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:var(--bar-warn);margin-top:2px;}
  .id-note{color:#8ea3c7;font-size:9.5px;line-height:1.5;margin-top:7px;}
  /* the 7-day mark sits at 70% of the track (scale runs to 10d); the track
     starts after the 76px label + 6px gap and ends before the 32px value */
  .id-chart{padding-top:11px;}
  .id-sla{position:absolute;top:0;bottom:2px;width:0;
    left:calc(82px + (100% - 82px - 38px) * 0.7);
    border-left:1px dashed rgba(255,255,255,.4);}
  .id-sla em{position:absolute;top:-11px;left:3px;font-style:normal;font-size:7.5px;
    color:#8ea3c7;letter-spacing:.05em;white-space:nowrap;}
  .id-caret{display:inline-block;width:5px;height:11px;background:var(--green);
    vertical-align:-2px;margin-left:1px;animation:idBlink .8s step-end infinite;}
  @keyframes idBlink{50%{opacity:0;}}
  @media (max-width:900px){
    .intel-demo{font-size:10px;min-height:340px;}
    .id-drawer{width:50%;flex:0 0 50%;}
    .id-tiles{grid-template-columns:repeat(2,1fr);}
    .id-row{grid-template-columns:66px 1fr;}
    .id-row .id-sku{display:none;}
  }
  /* below this the dashboard pane cannot compress without overflowing, and
     the conversation is the point — so the drawer takes the whole frame */
  @media (max-width:760px){
    .id-main{display:none;}
    .id-rail{width:34px;flex:0 0 34px;}
    .id-drawer{width:auto;flex:1 1 auto;border-left:none;}
    .intel-demo{min-height:390px;}
  }
  @media (prefers-reduced-motion:reduce){
    .id-msg{opacity:1;transform:none;transition:none;}
    .id-caret{animation:none;}
    .id-cb div span{transition:none;}
  }

  /* ==========================================================
     LIMORA TOUCH — the retouch compare, redrawn as live markup.
     The real UI already offers Side-by-side / Split / Toggle, so
     "Split" here is a genuine product mode, not an invention: the
     before frame is clipped against the after one and the divider
     is draggable. The two source frames are pixel-aligned (the
     subject sits at the same coordinates in both), which is what
     makes a wipe read as a retouch rather than a jump cut.
     ========================================================== */
  .rt-demo{position:relative;display:flex;aspect-ratio:1.62/1;background:#0f1424;
    font-size:11px;line-height:1.4;overflow:hidden;
    /* the unprefixed property alone leaves Safari highlighting the whole mock
       the moment the divider is dragged — the prefixed one is what WebKit reads */
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  .rt-demo img{-webkit-user-drag:none;user-drag:none;}
  .rt-rail{width:40px;flex:0 0 40px;background:#2a2160;display:flex;flex-direction:column;
    align-items:center;padding:9px 0;gap:13px;}
  .rt-rail i{width:15px;height:15px;border-radius:4px;background:rgba(255,255,255,.22);}
  .rt-rail i:first-child{background:var(--green);}
  .rt-main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .rt-top{display:flex;align-items:center;gap:13px;padding:8px 13px;background:#151a2e;
    border-bottom:1px solid rgba(255,255,255,.07);}
  .rt-top b{color:#fff;font-size:11px;letter-spacing:.04em;font-weight:700;}
  .rt-top span{color:#8ea3c7;font-size:10px;}
  .rt-top span.on{color:#fff;background:rgba(141,201,56,.22);padding:3px 8px;border-radius:5px;}
  .rt-body{flex:1;display:flex;min-height:0;}
  .rt-queue{width:92px;flex:0 0 92px;border-right:1px solid rgba(255,255,255,.07);
    background:#151a2e;padding:7px 6px;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
  .rt-card{padding:0;border:1px solid transparent;background:none;border-radius:5px;
    cursor:pointer;display:block;overflow:hidden;transition:border-color .2s ease, opacity .2s ease;}
  .rt-card img{width:100%;display:block;border-radius:4px;}
  .rt-card:hover{border-color:rgba(255,255,255,.3);}
  .rt-card.on{border-color:var(--green);}
  .rt-card.off{opacity:.4;cursor:default;}
  .rt-card:focus-visible{outline:2px solid var(--green);outline-offset:1px;}
  .rt-pair{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s ease;}
  .rt-pair.on{opacity:1;}
  .rt-work{flex:1;min-width:0;display:flex;flex-direction:column;padding:9px 12px 10px;}
  .rt-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px;}
  .rt-head b{color:#fff;font-size:13px;font-weight:600;}
  .rt-head code{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#8ea3c7;}
  .rt-head em{font-style:normal;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d6f96;}
  .rt-head em s{text-decoration:none;color:#c7cede;margin-left:4px;}
  .rt-tabs{display:flex;align-items:center;gap:6px;margin-bottom:9px;}
  .rt-tabs span{font-size:9.5px;color:#8ea3c7;padding:4px 9px;border-radius:5px;white-space:nowrap;}
  .rt-tabs span.on{background:rgba(141,201,56,.2);color:#fff;}
  .rt-tabs .rt-meta{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#5d6f96;}

  /* the compare stage */
  .rt-stagewrap{flex:1;min-height:0;display:flex;justify-content:center;}
  .rt-stage{position:relative;height:100%;aspect-ratio:658/677;
    --pos:50%;cursor:ew-resize;touch-action:none;background:#fff;border-radius:3px;overflow:hidden;}
  .rt-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  /* clip-path keeps the before frame at full stage size and simply hides the
     right of it — sizing the wrapper instead would squash the image */
  .rt-beforelayer{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
  .rt-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
    background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(28,39,64,.25);
    transform:translateX(-1px);cursor:ew-resize;}
  .rt-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.96);
    box-shadow:0 2px 10px rgba(28,39,64,.4);display:flex;align-items:center;justify-content:center;
    color:#1c2740;}
  .rt-divider:focus-visible{outline:none;}
  .rt-divider:focus-visible .rt-grip{box-shadow:0 0 0 3px var(--green), 0 2px 10px rgba(28,39,64,.4);}
  .rt-lab{position:absolute;top:9px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
    letter-spacing:.1em;padding:3px 7px;border-radius:4px;pointer-events:none;
    background:rgba(15,20,36,.82);color:#fff;}
  .rt-lab-b{left:9px;} .rt-lab-a{right:9px;}
  .rt-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
    background:rgba(15,20,36,.82);color:#fff;font-size:9px;padding:4px 10px;border-radius:20px;
    pointer-events:none;transition:opacity .4s ease;white-space:nowrap;}
  .rt-demo.touched .rt-hint{opacity:0;}
  @media (max-width:900px){
    .rt-demo{font-size:10px;}
    .rt-body{flex-direction:column;}
    .rt-queue{width:auto;flex:0 0 auto;flex-direction:row;border-right:none;
      border-bottom:1px solid rgba(255,255,255,.07);padding:6px 8px;}
    .rt-card{flex:0 0 46px;}
    .rt-card.off{display:none;}
    .rt-top span:nth-child(n+4){display:none;}
    .rt-tabs .rt-meta{display:none;}
  }
  /* narrow: the stage stops being height-driven (there is no height to fill
     once the frame is short) and is sized by width instead, with the mock's
     own height following its content */
  @media (max-width:760px){
    .rt-demo{aspect-ratio:auto;}
    .rt-stagewrap{flex:none;}
    .rt-stage{height:auto;width:100%;max-width:340px;}
    .rt-head em:nth-of-type(n+2){display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .rt-hint{transition:none;}
  }

  .module-shot{position:relative;z-index:1;}
  .module-shot .browser-frame{
    transform-origin:center center;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
    will-change:transform;
  }
  .module-shot:hover{z-index:6;}
  .module-shot:not(.no-zoom):hover .browser-frame{
    transform:scale(1.08);
    box-shadow:0 50px 100px -34px rgba(28,39,64,.45), 0 8px 20px -10px rgba(28,39,64,.2);
  }
  @media (max-width:900px){.module-shot:hover .browser-frame{transform:none;}}
  @media (prefers-reduced-motion:reduce){.module-shot .browser-frame{transition:none;}
    .module-shot:hover .browser-frame{transform:none;}}
  /* the stock .5s crossfade overlaps badly at a 1s cadence — with near
     identical screens two frames ghost through each other. Snap the fade
     short so roughly 0.8s of every second shows one settled image. */
  .shots-real .shot-slide{padding:0;transition:opacity .22s ease;transform:none;}
  .shots-real .shot-slide.active{transform:none;}
  .shots-real img{width:100%;height:100%;object-fit:contain;display:block;}
  .shots-real .shot-caption{left:12px;bottom:12px;}
  .shot-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease, transform .5s ease;transform:scale(1.02);padding:14px;}
  .shot-slide.active{opacity:1;transform:scale(1);}
  .shot-caption{position:absolute;left:14px;bottom:12px;background:rgba(28,39,64,.92);color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.03em;padding:6px 10px;border-radius:6px;}
  .placeholder-tag{position:absolute;top:12px;right:14px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--navy-soft);text-transform:uppercase;background:var(--paper-2);padding:3px 8px;border:1px solid var(--line);border-radius:5px;}
  .shot-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);}
  .shot-nav button{background:none;border:1px solid var(--line);width:28px;height:28px;cursor:pointer;color:var(--navy);font-size:14px;transition:border-color .25s, color .25s;border-radius:50%;}
  .shot-nav button:hover{border-color:var(--green);color:var(--green-deep);}
  .shot-dots{display:flex;gap:8px;}
  .shot-dots span{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .25s,transform .25s;}
  .shot-dots span.active{background:var(--green);transform:scale(1.3);}

  /* IMPACT */
  .impact-wrap{border-radius:var(--r-md);overflow:hidden;margin-top:50px;border:1px solid var(--line);}
  .impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);}
  @media (max-width:900px){.impact-grid{grid-template-columns:repeat(2,1fr);}}
  .impact-cell{background:var(--navy);color:#fff;padding:42px 30px;transition:background .3s;}
  .impact-cell:nth-child(4n+2), .impact-cell:nth-child(4n+3){background:var(--navy-2);}
  .impact-cell:hover{background:var(--green-deep);}
  .impact-num{font-size:44px;font-weight:700;color:var(--green);letter-spacing:-.01em;font-family:'JetBrains Mono',monospace;transition:color .3s;}
  .impact-cell:hover .impact-num{color:#fff;}
  .impact-cell p{color:#c7cede;font-size:14px;margin-top:10px;margin-bottom:0;}

  /* CTA band + demo form */
  .cta-band{background:var(--navy);color:#fff;padding:74px 0;position:relative;overflow:hidden;}
  .cta-band h2{color:#fff;max-width:20ch;}
  .cta-band p{color:#c7cede;max-width:46ch;}
  .cta-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
  @media (max-width:900px){.cta-layout{grid-template-columns:1fr;gap:36px;}}
  .demo-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:28px;}
  .demo-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  @media (max-width:520px){.demo-form .frow{grid-template-columns:1fr;}}
  .demo-form label{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#c7cede;margin-bottom:6px;}
  .demo-form input, .demo-form textarea{
    width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);
    padding:11px 13px;color:#fff;font-family:'Poppins',sans-serif;font-size:14px;
  }
  .demo-form input::placeholder, .demo-form textarea::placeholder{color:rgba(255,255,255,.35);}
  .demo-form input:focus, .demo-form textarea:focus{outline:none;border-color:var(--green);}
  .demo-form .field{margin-bottom:14px;}
  .demo-form textarea{resize:vertical;min-height:80px;}
  .demo-note{font-size:12px;color:#8ea0c2;margin-top:10px;}
  .form-submit{width:100%;justify-content:center;background:var(--green);border-color:var(--green);color:var(--navy);}
  .form-submit:hover{background:#fff;border-color:#fff;color:var(--navy);}
  .form-ok{display:none;font-size:13.5px;color:var(--green);margin-top:10px;font-family:'JetBrains Mono',monospace;}
  .form-error{display:none;font-size:13.5px;color:#e2a1a1;margin-top:10px;font-family:'JetBrains Mono',monospace;}

  footer{padding:70px 0 40px;border-top:1px solid var(--line);}
  .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .foot-col h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-soft);margin-bottom:16px;}
  .foot-col a{display:block;font-size:14px;color:var(--navy);margin-bottom:10px;}
  .foot-col a:hover{color:var(--green-deep);}
  .foot-bottom{margin-top:60px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--navy-soft);flex-wrap:wrap;gap:10px;font-family:'JetBrains Mono',monospace;}

  .btn-arrow{transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .cta-btn:hover .btn-arrow{transform:translateX(4px);}

/* ================================================================
   LIQUID GLASS (iOS 26-style) – additive layer, loaded after the
   base styles above. Nothing above this line was modified; this
   block only adds new rules and upgrades a curated set of existing
   selectors. Scope decisions:
   - Applied to: header.site (real SVG-refraction), .cell-box,
     .deck-card, .impact-cell, .browser-frame, .demo-form
   - Deliberately EXCLUDED: .cc-headcell/.cc-cell/.cc-label (Advantage
     table) – its semantic red/green coding and mobile cell-fusion
     trick are tuned precisely enough that a glass rim risks a double
     border or muddying the color signal.
   - Optional custom glass cursor (Part 5 of the brief): SKIPPED –
     enterprise B2B tone doesn't need it and it's the highest-risk,
     lowest-payoff piece of the technique.
   - Pointer-tracked sheen was simplified to a CSS-only hover sweep
     (no JS position tracking) to keep this single-file build robust.
   ================================================================ */
:root{
  --glass-fill: rgba(255,255,255,.5);
  --glass-fill-strong: rgba(255,255,255,.66);
  --glass-fill-navy: rgba(255,255,255,.08);
  --glass-rim: rgba(255,255,255,.9);
  --glass-rim-dark: rgba(28,39,64,.16);
  --glass-shadow: 0 10px 30px rgba(28,39,64,.12), 0 1px 0 rgba(255,255,255,.6) inset;
  --glass-shadow-navy: 0 10px 30px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.08) inset;
  --glass-glow-a: rgba(141,201,56,.16);
  --glass-glow-b: rgba(38,57,94,.14);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){

  /* --- three-layer glass recipe, light cards --- */
  .cell-box, .deck-card{
    background:var(--glass-fill);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:var(--glass-shadow);
    position:relative;
    isolation:isolate;
    overflow:hidden;
  }
  .cell-box{ border-color:transparent; }
  .cell-box:hover{ background:var(--glass-fill-strong); }
  .deck-card{ border-color:transparent; }
  .browser-frame{ background:#fff; }

  .cell-box::before, .deck-card::before, .impact-cell::before, .demo-form::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
    background:
      radial-gradient(120px 90px at 0% 0%, var(--glass-glow-a), transparent 70%),
      radial-gradient(140px 100px at 100% 100%, var(--glass-glow-b), transparent 70%);
    opacity:.55;
    transition:opacity .4s ease;
  }
  .cell-box:hover::before, .deck-card:hover::before, .impact-cell:hover::before, .demo-form:hover::before{
    opacity:.85;
  }

  .cell-box::after, .deck-card::after, .impact-cell::after, .browser-frame::after, .demo-form::after{
    content:"";
    position:absolute; inset:0; z-index:1; pointer-events:none;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, var(--glass-rim), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, var(--glass-rim-dark));
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  /* dark-panel variants (Business Impact stats, demo form on navy) */
  .impact-wrap{ background:var(--navy); }
  .impact-grid{ background:var(--navy); }
  .impact-grid .impact-cell, .demo-form{
    background:var(--glass-fill-navy);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    backdrop-filter:blur(16px) saturate(1.3);
    box-shadow:var(--glass-shadow-navy);
    position:relative;
    overflow:hidden;
  }
  .impact-grid .impact-cell:nth-child(4n+2), .impact-grid .impact-cell:nth-child(4n+3){
    background:rgba(255,255,255,.13);
  }
  .impact-cell:hover{ background:rgba(141,201,56,.22) !important; }
  .impact-cell::after, .demo-form::after{
    background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(0,0,0,.35));
  }

  /* content stays above the glow/rim pseudo-elements */
  .cell-box > *, .deck-card > *, .impact-cell > *, .browser-frame > *, .demo-form > *{ position:relative; z-index:2; }

}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  /* fallback: solid panels, no glass effect */
  .cell-box, .deck-card, .browser-frame{ background:var(--paper); }
  .impact-cell{ background:var(--navy); }
  .demo-form{ background:rgba(255,255,255,.05); }
}

@media (prefers-reduced-motion:reduce){
  .cell-box::before, .deck-card::before, .impact-cell::before, .demo-form::before{ transition:none !important; }
}

/* --- Advantage table: solid, flat panels – no glass/blur effects here.
   Colors come straight from the base .cc-headcell/.cc-cell rules above. --- */

/* --- Buttons: pointer-tracked sheen (single element, so it stays
   cohesive – unlike the Advantage table above). --- */
.cta-btn{ position:relative; overflow:hidden; }
.cta-btn::after{
  content:"";
  position:absolute; top:-60%; left:0; z-index:1; pointer-events:none;
  width:42%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:translateX(calc(var(--sheen, .5) * 190%)) rotate(8deg);
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .35s ease;
}
.cta-btn:hover::after{ opacity:1; }
.cta-btn.ghost::after{ background:linear-gradient(100deg, transparent, rgba(28,39,64,.14), transparent); mix-blend-mode:normal; }
@media (prefers-reduced-motion:reduce){
  .cta-btn::after{ transition:none; }
}

/* --- Custom glass cursor: a small lens that refracts what's beneath it.
   Desktop/mouse only (pointer:fine); off entirely for touch devices and
   for prefers-reduced-motion, per the fallback rules used elsewhere on
   this page. Native cursor is hidden only while this is active, never
   globally, so touch/keyboard users are unaffected. --- */
.glass-cursor{
  position:fixed; top:0; left:0; width:30px; height:30px; border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.65);
  box-shadow:0 4px 14px rgba(28,39,64,.35), inset 0 1px 1px rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(1px) saturate(1.8);
  backdrop-filter:blur(1px) saturate(1.8);
  opacity:0;
  transition:opacity .2s ease, width .2s ease, height .2s ease, background .2s ease;
  will-change:transform;
}
@supports (backdrop-filter: url(#glass-lens)) or (-webkit-backdrop-filter: url(#glass-lens)){
  .glass-cursor{
    -webkit-backdrop-filter:url(#glass-lens) blur(1px) saturate(1.8);
    backdrop-filter:url(#glass-lens) blur(1px) saturate(1.8);
  }
}
.glass-cursor.is-active{ opacity:1; }
.glass-cursor.is-hover{ width:46px; height:46px; background:rgba(255,255,255,.16); }
.glass-cursor::after{
  content:"";
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  background:var(--navy);
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.35);
  transition:width .2s ease, height .2s ease, background .2s ease;
}
.glass-cursor.is-hover::after{ width:11px; height:11px; background:var(--green); }
@media (pointer:fine){
  body.glass-cursor-on, body.glass-cursor-on a, body.glass-cursor-on button,
  body.glass-cursor-on input, body.glass-cursor-on textarea, body.glass-cursor-on [role="button"]{
    cursor:none;
  }
}
@media (pointer:coarse){ .glass-cursor{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .glass-cursor{ display:none !important; } }

  /* ==========================================================
     MULTI-PAGE CHROME – active nav state, mobile menu, footer
     ========================================================== */
  nav.links a.on{color:var(--green-deep);}
  nav.links a.on::after{transform:scaleX(1);}
  .nav-toggle{display:none;}
  .nav-sheet{display:none;}
  .foot-plain{display:block;font-size:14px;color:var(--navy);margin-bottom:10px;}
  @media (max-width:900px){
    .nav-inner .nav-cta{display:none;}
    .nav-toggle{
      display:flex;flex-direction:column;justify-content:center;gap:6px;
      width:40px;height:40px;border-radius:12px;border:1px solid rgba(28,39,64,.12);
      background:rgba(255,255,255,.5);cursor:pointer;padding:0 11px;
    }
    .nav-toggle span{display:block;height:1.6px;background:var(--navy);border-radius:2px;
      transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;}
    header.site.menu-open .nav-toggle span:first-child{transform:translateY(3.8px) rotate(45deg);}
    header.site.menu-open .nav-toggle span:last-child{transform:translateY(-3.8px) rotate(-45deg);}
    .nav-sheet{
      display:flex;flex-direction:column;gap:2px;pointer-events:auto;
      margin:8px auto 0;max-width:var(--max);padding:10px;border-radius:18px;
      background:#fff;
      border:1px solid rgba(255,255,255,.8);
      box-shadow:0 18px 40px -14px rgba(28,39,64,.3);
      opacity:0;transform:translateY(-6px);visibility:hidden;
      transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s;
    }
    header.site.menu-open .nav-sheet{opacity:1;transform:none;visibility:visible;transition-delay:0s;}
    .nav-sheet a{padding:12px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--navy);}
    .nav-sheet a.on{background:rgba(141,201,56,.14);color:var(--green-deep);}
    .nav-sheet .cta-btn{margin-top:6px;justify-content:center;color:#fff;}
  }


  /* ==========================================================
     LIVE MODULE MOCKUPS – Planning, Inventory, Connect, Assets
     Schematic versions of the real Limora screens, built as
     markup instead of screenshots: they run on their own when
     scrolled into view, and a visitor can grab and change them.
     All four share one app shell (.lx) that mirrors the product
     chrome used by the Touch and Intelligence demos.
     ========================================================== */
  .lx{
    position:relative;display:flex;aspect-ratio:1.62/1;background:#12172a;
    font-size:11px;line-height:1.4;overflow:hidden;color:#c7d0e4;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
    --lx-panel:#171d33; --lx-card:#1b2238; --lx-line:rgba(255,255,255,.07);
    --lx-mute:#7d8fb3; --lx-dim:#5d6f96; --lx-acc:#7b6cf0;
    --s-blue:#7db4f2;  --s-blue-bg:rgba(57,135,229,.2);
    --s-amber:#fab219; --s-amber-bg:rgba(250,178,25,.18);
    --s-green:#5fd35f; --s-green-bg:rgba(12,163,12,.22);
    --s-grey:#8ea3c7;  --s-grey-bg:rgba(142,163,199,.14);
    --s-purple:#a89df7;--s-purple-bg:rgba(123,108,240,.22);
  }
  .lx img{-webkit-user-drag:none;user-drag:none;display:block;}
  :where(.lx) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
  .lx-rail{width:40px;flex:0 0 40px;background:#2a2160;display:flex;flex-direction:column;
    align-items:center;padding:9px 0;gap:13px;}
  .lx-rail i{width:15px;height:15px;border-radius:4px;background:rgba(255,255,255,.22);display:block;}
  .lx-rail i.on{background:var(--green);}
  .lx-main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .lx-top{display:flex;align-items:center;gap:13px;padding:8px 13px;background:#151a2e;
    border-bottom:1px solid var(--lx-line);flex:0 0 auto;}
  .lx-top b{color:#fff;font-size:11px;letter-spacing:.04em;font-weight:700;}
  .lx-top span{color:#8ea3c7;font-size:10px;}
  .lx-top span.on{color:#fff;background:rgba(141,201,56,.22);padding:3px 8px;border-radius:5px;}
  .lx-top .lx-live{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--lx-mute);font-size:9.5px;}
  .lx-top .lx-live i{width:6px;height:6px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 0 rgba(141,201,56,.6);animation:lxPulse 2s ease-out infinite;}
  @keyframes lxPulse{0%{box-shadow:0 0 0 0 rgba(141,201,56,.55);}100%{box-shadow:0 0 0 7px rgba(141,201,56,0);}}
  .lx-body{flex:1;min-height:0;display:flex;position:relative;}
  .lx-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:8.5px;font-weight:600;
    padding:2px 7px;border-radius:20px;white-space:nowrap;letter-spacing:.01em;}
  .lx-pill.blue{background:var(--s-blue-bg);color:var(--s-blue);}
  .lx-pill.amber{background:var(--s-amber-bg);color:var(--s-amber);}
  .lx-pill.green{background:var(--s-green-bg);color:var(--s-green);}
  .lx-pill.grey{background:var(--s-grey-bg);color:var(--s-grey);}
  .lx-pill.purple{background:var(--s-purple-bg);color:var(--s-purple);}
  .lx-mono{font-family:'JetBrains Mono',monospace;}
  /* toast used by every mock to narrate what just happened */
  .lx-toast{position:absolute;right:12px;bottom:12px;z-index:30;max-width:62%;
    background:rgba(20,26,46,.96);border:1px solid rgba(141,201,56,.35);color:#e6ebf5;
    padding:7px 10px;border-radius:8px;font-size:9.5px;line-height:1.35;
    box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
    opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
    pointer-events:none;display:flex;gap:7px;align-items:flex-start;}
  .lx-toast.show{opacity:1;transform:none;}
  .lx-toast::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--green);margin-top:3px;}
  /* the "try it" hint, same language as the Touch demo */
  .lx-hint{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:25;
    background:rgba(15,20,36,.86);color:#fff;font-size:9px;padding:4px 10px;border-radius:20px;
    pointer-events:none;transition:opacity .4s ease;white-space:nowrap;border:1px solid rgba(255,255,255,.08);}
  .lx.touched .lx-hint{opacity:0;}
  /* a synthetic pointer used while the demo drives itself */
  .lx-ghost{position:absolute;z-index:40;width:18px;height:18px;left:0;top:0;pointer-events:none;
    opacity:0;transition:opacity .2s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
  .lx-ghost.show{opacity:1;}
  .lx-ghost svg{display:block;}
  .lx-ghost.press svg{transform:scale(.86);}

  /* ---------------- 01 PLANNING CALENDAR ---------------- */
  .pc-tray{width:132px;flex:0 0 132px;background:var(--lx-panel);border-right:1px solid var(--lx-line);
    padding:9px 8px;display:flex;flex-direction:column;gap:7px;overflow:hidden;}
  .pc-tray h5{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lx-mute);font-weight:600;
    display:flex;justify-content:space-between;margin:0 0 2px;}
  .pc-tray h5 b{color:#fff;font-weight:700;}
  .pc-card{background:var(--lx-card);border:1px solid var(--lx-line);border-left:3px solid var(--t,#7b6cf0);
    border-radius:6px;padding:6px 6px 6px 7px;cursor:grab;touch-action:none;display:grid;
    grid-template-columns:28px 1fr;gap:3px 7px;align-items:center;transition:opacity .2s ease, transform .2s ease;}
  .pc-card:active{cursor:grabbing;}
  .pc-card img{grid-row:span 2;width:28px;height:28px;border-radius:4px;object-fit:cover;background:#fff;}
  .pc-card b{color:#fff;font-size:9px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pc-card em{font-style:normal;color:var(--lx-mute);font-size:8.5px;}
  .pc-card.lifted{opacity:.25;}
  .pc-empty{border:1px dashed rgba(255,255,255,.12);border-radius:6px;padding:10px 6px;text-align:center;
    color:var(--lx-dim);font-size:8.5px;}
  .pc-legend{margin-top:auto;display:grid;gap:4px;}
  .pc-legend span{display:flex;align-items:center;gap:6px;color:var(--lx-mute);font-size:8.5px;}
  .pc-legend i{width:8px;height:8px;border-radius:2px;background:var(--t);}
  .pc-cal{flex:1;min-width:0;display:flex;flex-direction:column;}
  .pc-bar{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid var(--lx-line);}
  .pc-bar b{color:#fff;font-size:12px;font-weight:700;letter-spacing:-.01em;}
  .pc-seg{margin-left:auto;display:flex;background:#0e1325;border-radius:6px;padding:2px;}
  .pc-seg span{font-size:8.5px;padding:3px 8px;border-radius:5px;color:var(--lx-mute);}
  .pc-seg span.on{background:#262e4a;color:#fff;}
  .pc-grid{flex:1;min-height:0;display:grid;grid-template-columns:28px repeat(5,1fr);}
  .pc-hours{border-right:1px solid var(--lx-line);display:flex;flex-direction:column;}
  .pc-hours .pc-dh{visibility:hidden;}
  .pc-hours .pc-slots{position:relative;}
  .pc-hours span{position:absolute;right:5px;transform:translateY(-50%);font-size:7.5px;color:var(--lx-dim);font-family:'JetBrains Mono',monospace;}
  .pc-day{border-right:1px solid var(--lx-line);display:flex;flex-direction:column;min-width:0;
    transition:background .2s ease;}
  .pc-day:last-child{border-right:0;}
  .pc-day.drop{background:rgba(141,201,56,.08);box-shadow:inset 0 0 0 1px rgba(141,201,56,.45);}
  .pc-dh{padding:7px 8px 6px;border-bottom:1px solid var(--lx-line);display:flex;align-items:baseline;gap:5px;}
  .pc-dh b{color:#fff;font-size:14px;font-weight:700;}
  .pc-dh em{font-style:normal;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--lx-mute);}
  .pc-dh u{margin-left:auto;text-decoration:none;font-size:8px;color:var(--lx-dim);}
  /* the day is a real time axis, 7:00–19:00; sets sit at their hours */
  .pc-slots{flex:1;position:relative;overflow:hidden;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px calc(100%/6));}
  .pc-blk{position:absolute;left:4px;right:4px;background:color-mix(in srgb, var(--t) 20%, #1b2238);
    border:1px solid color-mix(in srgb, var(--t) 40%, transparent);border-left:3px solid var(--t);
    border-radius:6px;padding:6px 7px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;}
  .pc-blk .ready-row{margin-top:auto;display:flex;flex-direction:column;gap:3px;}
  .pc-blk.pop{animation:pcPop .45s cubic-bezier(.34,1.56,.64,1);}
  @keyframes pcPop{0%{transform:scale(.7);opacity:0;}100%{transform:none;opacity:1;}}
  .pc-blk .t{display:flex;align-items:center;gap:5px;min-width:0;}
  .pc-blk img{width:24px;height:24px;border-radius:4px;object-fit:cover;background:#fff;flex:0 0 auto;}
  .pc-blk b{color:#fff;font-size:8.6px;font-weight:600;line-height:1.2;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .pc-blk .m{display:flex;justify-content:space-between;color:#aab6d1;font-size:7.8px;gap:4px;}
  .pc-blk .m i{font-style:normal;color:var(--lx-mute);}
  .pc-ready{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;}
  .pc-ready span{display:block;height:100%;background:var(--t);transition:width .6s ease;}
  .pc-blk.is-ready .pc-ready span{background:var(--green);}
  .pc-blk .ok{display:none;color:var(--green);font-weight:700;}
  .pc-blk.is-ready .ok{display:inline;}
  .pc-float{position:absolute;z-index:35;pointer-events:none;width:120px;
    box-shadow:0 16px 30px -10px rgba(0,0,0,.6);transform:rotate(-2deg);opacity:.96;cursor:grabbing;}

  /* ---------------- 02 INVENTORY ---------------- */
  .inv-wrap{flex:1;min-width:0;display:flex;flex-direction:column;padding:9px 11px 0;gap:8px;}
  .inv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
  .inv-tile{background:var(--lx-card);border:1px solid var(--lx-line);border-radius:7px;padding:7px 9px;}
  .inv-tile em{display:block;font-style:normal;font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--lx-mute);}
  .inv-tile b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;margin-top:1px;transition:color .3s ease;}
  .inv-tile b.bump{color:var(--green);}
  .inv-tile.t-recv em{color:var(--s-blue);} .inv-tile.t-set em{color:var(--s-amber);} .inv-tile.t-shot em{color:var(--s-green);}
  .inv-tools{display:flex;gap:7px;align-items:center;}
  .inv-scan{flex:1;display:flex;align-items:center;gap:7px;background:#0e1325;border:1px solid var(--lx-line);
    border-radius:6px;padding:5px 8px;color:var(--lx-mute);font-size:9.5px;position:relative;overflow:hidden;}
  .inv-scan svg{flex:0 0 auto;}
  .inv-scan .q{color:#fff;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;}
  .inv-scan .q:empty::before{content:attr(data-ph);color:var(--lx-dim);font-family:'Poppins',sans-serif;letter-spacing:0;}
  .inv-scan.beam::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;
    background:linear-gradient(90deg,transparent,rgba(141,201,56,.35),transparent);animation:invBeam .7s ease-out;}
  @keyframes invBeam{to{left:100%;}}
  .inv-bulk{display:flex;align-items:center;gap:6px;font-size:9px;color:#fff;background:rgba(123,108,240,.2);
    border:1px solid rgba(123,108,240,.45);border-radius:6px;padding:4px 8px;opacity:0;pointer-events:none;
    transform:translateY(-2px);transition:opacity .2s ease, transform .2s ease;white-space:nowrap;}
  .inv-bulk.show{opacity:1;pointer-events:auto;transform:none;}
  .inv-bulk button{background:var(--lx-acc);color:#fff;border-radius:4px;padding:2px 7px;font-size:8.5px;font-weight:600;}
  .inv-table{flex:1;min-height:0;border:1px solid var(--lx-line);border-radius:7px 7px 0 0;border-bottom:0;overflow:hidden;
    display:flex;flex-direction:column;}
  .inv-row{display:grid;grid-template-columns:22px 30px 62px 1fr 96px 84px;align-items:center;gap:8px;
    padding:0 9px;border-bottom:1px solid var(--lx-line);flex:1;min-height:0;transition:background .3s ease;}
  .inv-row.head{flex:0 0 26px;background:#151b30;font-size:7.8px;letter-spacing:.08em;text-transform:uppercase;color:var(--lx-mute);font-weight:600;}
  .inv-row.hit{background:rgba(141,201,56,.1);}
  .inv-row.sel{background:rgba(123,108,240,.1);}
  .inv-row img{width:26px;height:26px;border-radius:4px;object-fit:cover;background:#fff;}
  .inv-row .bc{font-family:'JetBrains Mono',monospace;color:#dbe2f0;font-size:9px;}
  .inv-row .nm{color:#fff;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .inv-row .nm small{display:block;color:var(--lx-dim);font-size:8px;}
  .inv-row .loc{color:#aab6d1;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .inv-row .loc small{display:block;color:var(--lx-dim);font-size:7.8px;}
  .inv-row .lx-pill{justify-self:start;cursor:pointer;transition:transform .15s ease, background .3s ease, color .3s ease;}
  .inv-row .lx-pill:hover{transform:scale(1.06);}
  .inv-row .lx-pill::after{content:"▸";font-size:7px;opacity:.6;}
  .inv-cb{width:12px;height:12px;border-radius:3px;border:1.4px solid #4a5678;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .inv-row.sel .inv-cb{background:var(--lx-acc);border-color:var(--lx-acc);}
  .inv-row.sel .inv-cb::after{content:"";width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(0,-1px);}

  /* ---------------- 03 CONNECT ---------------- */
  .cx-c1{width:40%;flex:0 0 40%;background:#1c1c1f;border-right:1px solid #000;display:flex;flex-direction:column;}
  .cx-c1h{display:flex;align-items:center;gap:7px;padding:7px 9px;background:#2a2a2e;border-bottom:1px solid #000;}
  .cx-c1h b{color:#e8e8ea;font-size:8.5px;letter-spacing:.14em;}
  .cx-c1h em{font-style:normal;color:#8b8b90;font-size:8.5px;margin-left:auto;}
  .cx-view{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:8px;background:#141416;}
  .cx-view img{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;background:#fff;transition:opacity .2s ease;}
  .cx-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}
  .cx-flash.go{animation:cxFlash .45s ease-out;}
  @keyframes cxFlash{0%{opacity:.85;}100%{opacity:0;}}
  .cx-raw{position:absolute;left:8px;bottom:8px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#ddd;
    background:rgba(0,0,0,.6);padding:2px 6px;border-radius:3px;}
  .cx-strip{display:flex;gap:4px;padding:6px 8px;background:#232326;border-top:1px solid #000;align-items:center;}
  .cx-strip span{width:26px;height:26px;border-radius:2px;background:#333 center/cover no-repeat;flex:0 0 auto;
    outline:1px solid #111;transition:transform .3s ease;}
  .cx-strip span.new{animation:pcPop .4s cubic-bezier(.34,1.56,.64,1);outline:1.5px solid #e4b53d;}
  .cx-shoot{margin-left:auto;display:flex;align-items:center;gap:6px;background:#e5e5e7;color:#1c1c1f;
    border-radius:20px;padding:4px 10px 4px 5px;font-size:8.5px;font-weight:700;letter-spacing:.04em;flex:0 0 auto;}
  .cx-shoot i{width:13px;height:13px;border-radius:50%;background:#d33c3c;box-shadow:inset 0 0 0 2px #e5e5e7, 0 0 0 1.5px #d33c3c;}
  .cx-shoot:active{transform:scale(.95);}
  .cx-bridge{width:112px;flex:0 0 112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    padding:8px 6px;background:linear-gradient(180deg,#141a2f,#12172a);border-right:1px solid var(--lx-line);text-align:center;}
  .cx-node{width:34px;height:34px;border-radius:10px;background:rgba(141,201,56,.14);border:1px solid rgba(141,201,56,.45);
    display:flex;align-items:center;justify-content:center;position:relative;}
  .cx-node.busy::after{content:"";position:absolute;inset:-5px;border-radius:13px;border:1.5px solid rgba(141,201,56,.6);
    animation:cxRing .8s ease-out;}
  @keyframes cxRing{0%{opacity:1;transform:scale(.85);}100%{opacity:0;transform:scale(1.25);}}
  .cx-bridge b{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);}
  .cx-names{width:100%;display:flex;flex-direction:column;gap:3px;font-family:'JetBrains Mono',monospace;font-size:7.6px;}
  .cx-names span{display:block;padding:3px 4px;border-radius:3px;word-break:break-all;line-height:1.3;}
  .cx-names .from{background:#1f1f24;color:#9a9aa2;}
  .cx-names .arw{color:var(--lx-dim);font-size:9px;padding:0;}
  .cx-names .to{background:rgba(141,201,56,.12);color:#d9f2b8;min-height:2.6em;}
  .cx-bk{font-size:7.8px;color:var(--lx-mute);display:flex;align-items:center;gap:4px;}
  .cx-bk i{width:6px;height:6px;border-radius:50%;background:var(--lx-dim);}
  .cx-bk.on i{background:var(--green);}
  .cx-list{flex:1;min-width:0;display:flex;flex-direction:column;padding:8px 10px 0;gap:6px;}
  .cx-lh{display:flex;align-items:center;gap:6px;}
  .cx-lh b{color:#fff;font-size:10.5px;font-weight:700;}
  .cx-mode{margin-left:auto;display:flex;background:#0e1325;border-radius:6px;padding:2px;}
  .cx-mode button{font-size:8px;padding:3px 7px;border-radius:5px;color:var(--lx-mute);white-space:nowrap;}
  .cx-mode button.on{background:#262e4a;color:#fff;}
  .cx-set{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--lx-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cx-prog{display:flex;align-items:center;gap:7px;font-size:8.5px;color:var(--lx-mute);}
  .cx-prog div{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;}
  .cx-prog div span{display:block;height:100%;width:0;background:var(--green);transition:width .5s ease;}
  .cx-net{font-size:8px;padding:2px 7px;border-radius:20px;background:var(--s-green-bg);color:var(--s-green);white-space:nowrap;}
  .cx-net.off{background:var(--s-amber-bg);color:var(--s-amber);}
  .cx-rows{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;overflow:hidden;}
  .cx-row{display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center;background:var(--lx-card);
    border:1px solid var(--lx-line);border-radius:6px;padding:4px 6px;flex:1;min-height:0;max-height:34px;transition:border-color .3s ease;}
  .cx-row .th{width:22px;height:22px;border-radius:3px;background:#262d45 center/cover no-repeat;}
  .cx-row b{display:block;color:#fff;font-size:8.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace;letter-spacing:-.01em;}
  .cx-row em{display:block;font-style:normal;color:var(--lx-dim);font-size:7.8px;}
  .cx-row.done{border-color:rgba(95,211,95,.3);}
  .cx-row.q{border-color:rgba(250,178,25,.35);}

  /* ---------------- 04 ASSETS ---------------- */
  .as-grid{width:43%;flex:0 0 43%;background:var(--lx-panel);border-right:1px solid var(--lx-line);
    display:flex;flex-direction:column;padding:8px;gap:7px;min-width:0;}
  .as-job{display:flex;align-items:center;justify-content:space-between;gap:6px;}
  .as-job b{color:#fff;font-size:9px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .as-job span{font-size:8px;color:var(--lx-mute);white-space:nowrap;}
  .as-tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;}
  .as-tile{position:relative;border-radius:6px;overflow:hidden;background:#fff;cursor:pointer;display:flex;flex-direction:column;
    outline:2px solid transparent;outline-offset:1px;transition:outline-color .2s ease, transform .2s ease;min-height:0;}
  .as-tile:hover{transform:translateY(-1px);}
  .as-tile.on{outline-color:var(--lx-acc);}
  .as-band{display:flex;align-items:center;gap:4px;padding:3px 5px;font-size:7.6px;font-weight:600;color:#1a1a1a;flex:0 0 auto;transition:background .3s ease;}
  .as-band i{font-style:normal;background:rgba(0,0,0,.14);border-radius:10px;padding:0 4px;font-size:7px;}
  .as-band.green{background:#6fce3c;} .as-band.amber{background:#f0c64a;} .as-band.purple{background:#9d8cf5;color:#fff;} .as-band.purple i{background:rgba(255,255,255,.22);}
  .as-tile img{flex:1;min-height:0;width:100%;object-fit:contain;padding:4px;}
  .as-tile u{text-decoration:none;display:block;background:#1b2238;color:#c7d0e4;font-size:7.4px;padding:2px 5px;
    font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;}
  .as-view{flex:1;min-width:0;display:flex;flex-direction:column;}
  .as-vh{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--lx-line);flex-wrap:wrap;row-gap:3px;}
  .as-vh b{color:#fff;font-size:11px;}
  .as-vh code{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--lx-mute);}
  .as-vh em{font-style:normal;font-size:7.8px;letter-spacing:.08em;text-transform:uppercase;color:var(--lx-dim);}
  .as-vh em s{text-decoration:none;color:#c7cede;margin-left:4px;}
  .as-stage{flex:1;min-height:0;position:relative;margin:8px 10px 0;border-radius:4px;background:#f2f2f2;
    display:flex;align-items:center;justify-content:center;cursor:crosshair;overflow:hidden;}
  .as-stage img{max-width:92%;max-height:92%;object-fit:contain;transition:filter .4s ease, opacity .25s ease;}
  .as-stage img.v1{filter:brightness(.93) saturate(.86) sepia(.14);}
  .as-stage img.v2{filter:brightness(.98) saturate(.95);}
  .as-pin{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;}
  .as-pin i{display:flex;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--lx-acc);
    box-shadow:0 3px 8px rgba(0,0,0,.35);align-items:center;justify-content:center;animation:pcPop .35s cubic-bezier(.34,1.56,.64,1);}
  .as-pin i b{transform:rotate(45deg);color:#fff;font-size:8.5px;font-style:normal;}
  .as-note{position:absolute;left:14px;top:-6px;white-space:nowrap;background:#1b2238;color:#fff;font-size:8.5px;
    padding:4px 7px;border-radius:5px;border:1px solid rgba(123,108,240,.5);box-shadow:0 6px 16px -6px rgba(0,0,0,.5);}
  .as-note:empty{display:none;}
  .as-ctrl{display:flex;align-items:center;gap:6px;padding:7px 10px 9px;flex-wrap:wrap;row-gap:5px;}
  .as-vers{display:flex;gap:3px;background:#0e1325;border-radius:6px;padding:2px;}
  .as-vers button{font-size:8.5px;padding:3px 7px;border-radius:5px;color:var(--lx-mute);font-family:'JetBrains Mono',monospace;}
  .as-vers button.on{background:#262e4a;color:#fff;}
  .as-vers button[hidden]{display:none;}
  .as-ctrl .sp{flex:1;}
  .as-btn{font-size:8.5px;font-weight:600;padding:4px 9px;border-radius:5px;white-space:nowrap;}
  .as-btn.ghost{border:1px solid rgba(255,255,255,.14);color:#c7d0e4;}
  .as-btn.go{background:var(--green);color:#16210a;}
  .as-btn.go.done{background:rgba(95,211,95,.2);color:var(--s-green);}
  .as-dam{display:flex;align-items:center;gap:5px;font-size:8px;color:var(--lx-mute);white-space:nowrap;}
  .as-dam i{width:6px;height:6px;border-radius:50%;background:var(--lx-dim);transition:background .3s ease;}
  .as-dam.on{color:#d9f2b8;} .as-dam.on i{background:var(--green);}

  /* ---------------- responsive ---------------- */
  @media (max-width:1100px){
    .lx{font-size:10px;}
    .pc-tray{width:112px;flex-basis:112px;}
    .inv-row{grid-template-columns:20px 26px 56px 1fr 84px 76px;gap:6px;}
    .cx-bridge{width:96px;flex-basis:96px;}
  }
  @media (max-width:760px){
    .lx{aspect-ratio:auto;}
    .lx-rail{display:none;}
    .lx-top span:not(.on){display:none;}
    /* planning: tray becomes a strip above a 3-day view */
    .pc-body{flex-direction:column;}
    .pc-tray{width:auto;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--lx-line);}
    .pc-tray h5{width:100%;}
    .pc-tray .pc-card{flex:1 1 40%;}
    .pc-legend{display:none;}
    .pc-grid{grid-template-columns:24px repeat(3,1fr);min-height:300px;}
    .pc-day:nth-child(n+5){display:none;}
    /* inventory: tighter table, no location column */
    .inv-tiles{grid-template-columns:repeat(2,1fr);}
    .inv-row{grid-template-columns:18px 26px 1fr 78px;min-height:38px;}
    .inv-row .bc,.inv-row .loc{display:none;}
    .inv-row.head span:nth-child(3),.inv-row.head span:nth-child(5){display:none;}
    /* on a phone the hint would sit on top of the app bar – the first tap
       teaches the interaction anyway */
    .lx-hint{display:none;}
    .inv-bulk{position:absolute;right:10px;top:120px;z-index:5;}
    /* connect: stack the three panes */
    .cx-body{flex-direction:column;}
    .cx-c1{width:auto;flex:0 0 190px;border-right:0;}
    .cx-bridge{width:auto;flex:0 0 auto;flex-direction:row;padding:8px 10px;}
    .cx-names{flex-direction:row;align-items:center;}
    .cx-names span{flex:1;}
    .cx-names .arw{flex:0 0 auto;}
    .cx-list{min-height:220px;padding-bottom:8px;}
    /* assets: grid over viewer */
    .as-body{flex-direction:column;}
    .as-grid{width:auto;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--lx-line);}
    .as-tiles{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;}
    .as-tile{height:92px;}
    .as-stage{min-height:220px;}
  }
  @media (prefers-reduced-motion:reduce){
    .lx *{animation:none !important;transition:none !important;}
  }

  /* per-demo hint placement – keep it off the busiest part of each screen */
  #cxDemo .lx-hint{top:auto;bottom:10px;left:auto;right:12px;transform:none;}
  #asDemo .lx-hint{left:auto;right:12px;transform:none;top:44px;}


  /* ==========================================================
     PAGE-LEVEL ADDITIONS – optional badge, inline links, the
     home → necessity teaser, and the Touch / About / Necessity
     page layouts.
     ========================================================== */
  .m-opt{display:inline-block;vertical-align:2px;margin-left:8px;font-family:'Poppins',sans-serif;font-size:10px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:#8a5a00;background:rgba(250,178,25,.16);
    border:1px solid rgba(201,133,0,.35);padding:2px 9px;border-radius:20px;}
  .m-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--navy);border-bottom:1.5px solid var(--green);padding-bottom:3px;transition:gap .25s ease,color .25s ease;}
  .m-link:hover{gap:12px;color:var(--green-deep);}
  .inline-link{color:var(--navy);border-bottom:1.5px solid var(--green);font-weight:500;}
  .inline-link:hover{color:var(--green-deep);}

  .teaser-band{padding:24px 0 8px;}
  .teaser-card{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:34px 40px;
    border-radius:var(--r-md);background:var(--navy);color:#fff;position:relative;overflow:hidden;
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;}
  .teaser-card::before{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;
    border:1px solid rgba(141,201,56,.25);box-shadow:0 0 0 40px rgba(141,201,56,.05), 0 0 0 80px rgba(141,201,56,.03);}
  .teaser-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -24px rgba(28,39,64,.55);}
  .teaser-card .eyebrow{color:#aebbd6;margin-bottom:12px;}
  .teaser-card h3{color:#fff;font-size:24px;margin-bottom:8px;max-width:620px;}
  .teaser-card p{color:#c7cede;font-size:15px;margin:0;max-width:600px;}
  .teaser-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:#fff;background:rgba(141,201,56,.18);border:1px solid rgba(141,201,56,.5);
    padding:12px 18px;border-radius:40px;position:relative;transition:gap .25s ease, background .25s ease;}
  .teaser-card:hover .teaser-go{gap:14px;background:rgba(141,201,56,.3);}
  @media (max-width:760px){.teaser-card{flex-direction:column;align-items:flex-start;padding:28px 24px;}}

  /* ---------- sub-page hero + closing "where next" cards ---------- */
  .page-hero{padding:180px 0 40px;}
  .page-hero h1{font-size:clamp(40px,5.4vw,72px);max-width:17ch;}
  .page-hero .lede{max-width:60ch;margin-top:22px;}
  section.after-hero{padding-top:40px;}
  @media (max-width:900px){.page-hero{padding:130px 0 20px;}}
  .next-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media (max-width:760px){.next-grid{grid-template-columns:1fr;}}
  .next-card{display:flex;flex-direction:column;gap:8px;padding:30px 30px 26px;border-radius:var(--r-md);
    background:#fff;border:1px solid var(--line);transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease;}
  .next-card:hover{transform:translateY(-3px);border-color:rgba(141,201,56,.6);box-shadow:0 24px 44px -26px rgba(28,39,64,.4);}
  .next-k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);}
  .next-card h3{font-size:22px;margin:2px 0 2px;}
  .next-card p{color:#4a4a4a;font-size:15px;line-height:1.6;margin:0 0 8px;}
  .next-go{margin-top:auto;display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:var(--navy);transition:gap .25s ease;}
  .next-card:hover .next-go{gap:12px;color:var(--green-deep);}

  /* ---------- Limora Touch page ---------- */
  .touch-hero .eyebrow .m-opt{margin-left:10px;}
  .touch-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:end;}
  .touch-hero-grid h1{max-width:12ch;}
  .touch-hero-grid .lede{margin-top:0;font-size:18px;}
  .touch-hero-grid .hero-cta-row{margin-top:28px;}
  @media (max-width:980px){.touch-hero-grid{grid-template-columns:1fr;gap:18px;}}
  .touch-stage{margin-top:64px;max-width:1080px;margin-inline:auto;}
  .touch-stage .rt-demo{font-size:12px;}
  @media (max-width:760px){.touch-stage{margin-top:40px;}}

  .split-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
  .split-2.align-start{align-items:start;}
  @media (max-width:900px){.split-2{grid-template-columns:1fr;gap:28px;}}
  .split-2 h2{margin-bottom:0;}
  .body-p{font-size:16px;line-height:1.7;color:#3d3d3d;max-width:58ch;margin-top:18px;}
  .chip-row{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
  .chip-row li{font-size:13px;font-weight:500;color:var(--navy);background:#fff;border:1px solid var(--line);
    padding:7px 14px;border-radius:30px;}

  /* illustrative "where the hours go" bars – two categories, direct-labelled,
     palette validated (blue #4d7fd6 / green #5f9a1f pass CVD + contrast) */
  .hours-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 26px 22px;}
  .hours-fig figcaption b{display:block;font-size:16px;color:var(--navy);font-weight:600;}
  .hours-fig figcaption span{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--navy-soft);margin-top:4px;}
  .hours-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 20px;font-size:12.5px;color:#4a4a4a;}
  .hours-legend span{display:flex;align-items:center;gap:7px;}
  .sw{width:12px;height:12px;border-radius:3px;display:inline-block;}
  .sw.routine{background:#4d7fd6;}
  .sw.craft{background:#5f9a1f;}
  .hours-row{margin-bottom:16px;}
  .hours-row em{display:block;font-style:normal;font-size:12.5px;color:var(--navy-soft);margin-bottom:7px;font-weight:500;}
  .hours-bar{display:flex;gap:2px;height:34px;}
  .hours-bar .seg{width:0;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:600;color:#fff;
    white-space:nowrap;overflow:hidden;transition:width 1.1s cubic-bezier(.22,1,.36,1);cursor:default;}
  .hours-bar .seg:first-child{border-radius:4px 0 0 4px;}
  .hours-bar .seg:last-child{border-radius:0 4px 4px 0;}
  .hours-bar .seg.routine{background:#4d7fd6;}
  .hours-bar .seg.craft{background:#5f9a1f;}
  /* AI-assisted share carries a hatch as well as its label – never colour alone */
  .hours-bar .seg.routine.ai{background:repeating-linear-gradient(135deg,#4d7fd6 0 6px,#6f98e0 6px 9px);}
  .hours-fig.in .hours-bar .seg{width:var(--w);}
  .hours-fig.in .hours-row:nth-of-type(2) .seg{transition-delay:.35s;}
  .hours-note{margin:6px 0 0;font-size:13.5px;color:#4a4a4a;line-height:1.55;}

  .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px;}
  @media (max-width:760px){.opt-grid{grid-template-columns:1fr;}}
  .opt-card{padding:30px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);}
  .opt-card.on{background:var(--navy);border-color:var(--navy);}
  .opt-card.on h3{color:#fff;} .opt-card.on p{color:#c7cede;}
  .opt-k{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--navy-soft);margin-bottom:12px;}
  .opt-card.on .opt-k{color:var(--green);}
  .opt-card h3{font-size:22px;}
  .opt-card p{font-size:15px;line-height:1.65;color:#4a4a4a;margin:0;}
  .opt-feats{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  @media (max-width:900px){.opt-feats{grid-template-columns:1fr;}}
  .opt-feats li{font-size:14.5px;line-height:1.6;color:#3d3d3d;padding-top:16px;border-top:2px solid var(--green);}
  .opt-feats b{color:var(--navy);font-weight:600;}
  .split-2 h2 + .lede{margin-top:20px;}

  /* ---------- About page ---------- */
  .about-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:56px 0 0;border-top:1px solid var(--line);}
  .about-facts div{padding:18px 20px 0 0;}
  .about-facts dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-soft);}
  .about-facts dd{margin:6px 0 0;font-size:16px;font-weight:600;color:var(--navy);}
  @media (max-width:900px){.about-facts{grid-template-columns:1fr 1fr;row-gap:14px;}}

  .founder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
  @media (max-width:900px){.founder-grid{grid-template-columns:1fr;max-width:460px;}}
  .founder .f-open{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer;
    border-radius:var(--r-md);background:#fff;border:1px solid var(--line);overflow:hidden;
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease;}
  .founder .f-open:hover{transform:translateY(-4px);border-color:rgba(141,201,56,.6);box-shadow:0 26px 48px -26px rgba(28,39,64,.45);}
  .founder .f-open:focus-visible{outline:2px solid var(--green);outline-offset:3px;}
  /* portrait slot: shows the initials on the brand gradient until a photo is
     dropped in – an <img> inside simply covers it */
  .f-photo{position:relative;display:block;aspect-ratio:4/4.3;overflow:hidden;
    background:radial-gradient(120% 90% at 20% 10%, #33496f 0%, #1c2740 60%, #141c30 100%);}
  .f-photo::before{content:attr(data-initials);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:64px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.9);}
  .f-photo::after{content:"";position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;border-radius:50%;
    border:1px solid rgba(141,201,56,.35);box-shadow:0 0 0 26px rgba(141,201,56,.05);}
  .f-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
  .f-meta{display:flex;flex-direction:column;gap:6px;padding:22px 24px 24px;flex:1;}
  .f-name{font-size:21px;font-weight:700;color:var(--navy);}
  .f-role{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);}
  .f-sum{font-size:14.5px;line-height:1.6;color:#4a4a4a;margin-top:4px;}
  .f-more{margin-top:auto;padding-top:12px;display:inline-flex;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--navy);transition:gap .25s ease;}
  .founder .f-open:hover .f-more{gap:12px;color:var(--green-deep);}
  /* placeholders for details we don't have yet – deliberately loud so they
     can't slip into production unnoticed */
  .tbc{display:inline-block;font-size:.72em;font-weight:600;letter-spacing:.04em;color:#8a5a00;background:rgba(250,178,25,.18);
    border:1px dashed rgba(201,133,0,.6);border-radius:6px;padding:1px 7px;vertical-align:.12em;font-family:'JetBrains Mono',monospace;text-transform:none;}
  .tbc-block{display:block;color:#8a5a00 !important;background:rgba(250,178,25,.1);border:1px dashed rgba(201,133,0,.5);border-radius:8px;padding:10px 12px;font-size:13.5px;}
  .founder.is-tbc .f-photo::before{color:rgba(255,255,255,.55);}

  .f-dialog{border:0;padding:0;border-radius:var(--r-lg);max-width:980px;width:calc(100% - 40px);max-height:calc(100vh - 60px);
    background:var(--paper);color:var(--ink);box-shadow:0 40px 90px -30px rgba(10,15,30,.6);overflow:auto;}
  .f-dialog::backdrop{background:rgba(18,23,42,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
  .f-dialog[open]{animation:fdIn .35s cubic-bezier(.22,1,.36,1);}
  @keyframes fdIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
  .f-close{position:absolute;top:14px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    background:#fff;font-size:22px;line-height:1;color:var(--navy);cursor:pointer;}
  .f-close:hover{background:var(--navy);color:#fff;}
  .fd-grid{display:grid;grid-template-columns:300px 1fr;}
  .fd-side{background:#fff;border-right:1px solid var(--line);padding:0 0 26px;display:flex;flex-direction:column;gap:6px;}
  .fd-side .f-photo{margin-bottom:16px;}
  .fd-side h3,.fd-side .f-role,.fd-side a,.fd-side .fd-loc{margin-inline:24px;}
  .fd-side h3{font-size:24px;margin-bottom:2px;}
  .fd-mail{font-size:14px;color:var(--navy);border-bottom:1px solid var(--green);align-self:flex-start;margin-top:10px;}
  .fd-loc{font-size:13.5px;color:var(--navy-soft);}
  .fd-body{padding:40px 44px 40px;}
  .fd-body p{font-size:15.5px;line-height:1.72;color:#333;margin:0 0 14px;}
  .fd-body .fd-lead{font-size:18px;line-height:1.6;color:var(--navy);}
  .fd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 24px;}
  .fd-stats div{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 14px 12px;}
  .fd-stats b{display:block;font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.01em;}
  .fd-stats span{display:block;font-size:11.5px;line-height:1.4;color:var(--navy-soft);margin-top:4px;}
  .fd-limora{padding-top:16px;border-top:1px solid var(--line);}
  @media (max-width:820px){
    .fd-grid{grid-template-columns:1fr;}
    .fd-side{border-right:0;border-bottom:1px solid var(--line);}
    .fd-side .f-photo{aspect-ratio:16/9;}
    .fd-body{padding:26px 22px;}
    .fd-stats{grid-template-columns:1fr 1fr;}
  }
  .fd-body{padding-right:70px;}
  @media (max-width:820px){.fd-body{padding-right:22px;} .fd-side{padding-top:0;}}
  /* the glass cursor lives under the dialog's top layer, so while a profile is
     open it steps aside and the native cursor comes back */
  body.dialog-open .glass-cursor{opacity:0 !important;}
  @media (pointer:fine){
    body.glass-cursor-on.dialog-open, body.glass-cursor-on.dialog-open *{cursor:auto;}
    body.glass-cursor-on.dialog-open a, body.glass-cursor-on.dialog-open button{cursor:pointer;}
  }
  @media (max-width:900px){.founder-grid .f-photo{aspect-ratio:16/11;}}

/* ============================================================
   LIMORA 'touch — dedicated dark theme + logo swap
   Scoped entirely to body.page-touch so no other page is touched.
   ============================================================ */

/* logo: lives in .brandmark (outside the header), 2.5x the old 38px size.
   Specificity beats site.css's ".logo img" rule. */
.brandmark{position:absolute;top:108px;left:0;right:0;z-index:5;pointer-events:none;}
.brandmark .logo{display:inline-flex;pointer-events:auto;}
.brandmark .logo img{height:95px;width:auto;}
.brandmark .logo .logo-mark--touch{display:none;}
.brandmark .logo .logo-mark--default{display:block;}
body.page-touch .brandmark .logo .logo-mark--default{display:none;}
body.page-touch .brandmark .logo .logo-mark--touch{display:block;height:80px;}
.hero{padding-top:245px !important;}
.page-hero{padding-top:255px;}
header.site .nav-inner{justify-content:space-between;}
@media (max-width:900px){
  .brandmark{top:88px;}
  .brandmark .logo img{height:60px;}
  body.page-touch .brandmark .logo .logo-mark--touch{height:52px;}
  .hero{padding-top:180px !important;}
  .page-hero{padding-top:180px;}
}

body.page-touch{
  --paper:#0c1220;
  --paper-2:#131b2c;
  --line:#2a3550;
  --ink:#e9ecf5;
  --navy-soft:#8b96b8;
  background:var(--paper);
}

/* headings + body copy: --navy stays untouched (it still backs the primary
   CTA buttons), so these get explicit light colors instead */
body.page-touch h1,
body.page-touch h2,
body.page-touch h3{color:#f5f4ee;}
body.page-touch p,
body.page-touch .lede{color:#c3cade;}
body.page-touch .eyebrow{color:var(--navy-soft);}

/* nav glass bar → dark glass. site.css renders three variants of this bar
   (plain, the SVG-lens refraction variant under @supports, and the Safari
   "no-lens" frost fallback) each with their own selector chain — every
   override below repeats that exact chain with "body.page-touch" spliced
   in right after "html"/"header" so it's a strict superset (guaranteed to
   win) rather than relying on source order or hoping specificity matches. */
body.page-touch .nav-inner{
  background:rgba(12,18,32,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 34px -10px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.3);
}
body.page-touch header.site.scrolled .nav-inner{
  background:rgba(12,18,32,.82);
  border-color:rgba(141,201,56,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 40px -10px rgba(0,0,0,.65),
    0 2px 6px rgba(0,0,0,.35);
}
html:not(.no-lens) body.page-touch .nav-inner{
  background:rgba(12,18,32,.4);
  -webkit-backdrop-filter:url(#glass-bar-nav) blur(1.5px) saturate(160%) brightness(.9);
  backdrop-filter:url(#glass-bar-nav) blur(1.5px) saturate(160%) brightness(.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 34px -12px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.3);
}
html:not(.no-lens) body.page-touch header.site.scrolled .nav-inner{
  background:rgba(12,18,32,.68);
  -webkit-backdrop-filter:url(#glass-bar-nav) blur(3px) saturate(160%) brightness(.9);
  backdrop-filter:url(#glass-bar-nav) blur(3px) saturate(160%) brightness(.9);
}
html:not(.no-lens) body.page-touch .nav-inner .logo,
html:not(.no-lens) body.page-touch .nav-inner nav.links a{
  text-shadow:none;
}
html.no-lens body.page-touch .nav-inner{
  background:rgba(12,18,32,.5);
  -webkit-backdrop-filter:blur(3px) saturate(160%) brightness(.9);
  backdrop-filter:blur(3px) saturate(160%) brightness(.9);
}
html.no-lens body.page-touch header.site.scrolled .nav-inner{
  background:rgba(12,18,32,.78);
  -webkit-backdrop-filter:blur(6px) saturate(160%) brightness(.9);
  backdrop-filter:blur(6px) saturate(160%) brightness(.9);
}
body.page-touch .nav-inner .logo,
body.page-touch .nav-inner nav.links a{
  color:#f5f4ee;
}
body.page-touch .nav-sheet{
  background:var(--paper-2);
  border-color:rgba(255,255,255,.08);
}
body.page-touch .nav-sheet a{color:#e9ecf5;}

/* ghost buttons use var(--navy) for text/border on the light theme —
   override explicitly here so they stay legible on dark */
body.page-touch .cta-btn.ghost{color:#f5f4ee;border-color:var(--line);}
body.page-touch .cta-btn.ghost:hover{background:#f5f4ee;color:var(--navy);border-color:#f5f4ee;}

/* footer */
body.page-touch footer{border-top-color:var(--line);}
body.page-touch .foot-col a,
body.page-touch .foot-plain{color:#e9ecf5;}
body.page-touch .foot-col a:hover{color:var(--green);}
body.page-touch .foot-col h4,
body.page-touch .foot-bottom{color:var(--navy-soft);}

/* comparison table legend / labels that use var(--ink) via inheritance are
   covered automatically; product screenshots inside the module mockups are
   left as-is by design — they're meant to read as real app UI, not page chrome */

/* brand casing: "'touch" in "LIMORA 'touch" is always lowercase, like the
   wordmark — this keeps it that way regardless of an ancestor's
   text-transform (nav links, eyebrows, .m-name etc. are all uppercase) */
.lc{text-transform:lowercase;}

/* module mockup top menus: seven tabs now — keep them on one line */
.lx-top,.rt-top,.id-top{gap:9px;white-space:nowrap;overflow:hidden;}
.lx-top span,.rt-top span,.id-top span{flex:0 0 auto;}
.lx-top .lx-live{margin-left:auto;}

/* /touch: light cards get dark surfaces so the light body copy stays readable */
body.page-touch .opt-card{background:var(--paper-2);border-color:var(--line);}
body.page-touch .opt-card p{color:#c3cade;}
body.page-touch .opt-card.on{background:#1c2a4a;border-color:rgba(141,201,56,.4);}
body.page-touch .opt-k{color:var(--navy-soft);}
body.page-touch .opt-feats li{color:#c3cade;}
body.page-touch .opt-feats b{color:#f5f4ee;}
body.page-touch .hours-fig{background:var(--paper-2);border-color:var(--line);}
body.page-touch .hours-fig figcaption b{color:#f5f4ee;}
body.page-touch .hours-legend,body.page-touch .hours-note{color:#c3cade;}
body.page-touch .chip-row li{background:var(--paper-2);border-color:var(--line);color:#e9ecf5;}
body.page-touch .body-p{color:#c3cade;}
body.page-touch .m-opt{color:#fab219;}

/* ---- logo travels from the page top into the header on scroll ---- */
.nav-inner .nav-logo{opacity:0;pointer-events:none;transition:none;}
.nav-inner .nav-logo.docked{opacity:1;pointer-events:auto;}
.nav-inner .nav-logo img{height:34px;width:auto;}
.nav-inner .nav-logo .logo-mark--touch{display:none;}
body.page-touch .nav-inner .nav-logo .logo-mark--default{display:none;}
body.page-touch .nav-inner .nav-logo .logo-mark--touch{display:block;height:28px;}
.brandmark .logo{transform-origin:0 0;will-change:transform;}
.brandmark.fly{position:fixed;top:0;z-index:90;}
.brandmark.docked .logo{visibility:hidden;pointer-events:none;}
@media (max-width:900px){
  .nav-inner .nav-logo img{height:30px;}
  body.page-touch .nav-inner .nav-logo .logo-mark--touch{height:25px;}
}