:root{
        --ink:#0E0A07;
        --paper:#FEFEFE;
        --blue:#18498B;
        --blue-2:#2352DE;
        --sage:#1f2b18;
        --sage-2:#8faa78;
        --line:rgba(14,10,7,.07);
        --line-2:rgba(14,10,7,.05);
        --muted:rgba(14,10,7,.45);
        --muted-2:rgba(14,10,7,.55);
        --muted-3:rgba(14,10,7,.35);
        --font-sans:'Geist','Aktiv Grotesk Corp','Inter',ui-sans-serif,system-ui,sans-serif;
        --font-serif:'Instrument Serif','Test Söhne Mono',ui-serif,serif;
        --font-mono:'Geist Mono','Test Söhne Mono',ui-monospace,monospace;
      }
      *{box-sizing:border-box}
      html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
      body{overflow-x:hidden}
      a{color:inherit;text-decoration:none}
      button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
      img{display:block;max-width:100%}


      /* ───────────────────────── nav (liquid glass, kept from v1) ───────────────────────── */
      .nav{
        position:fixed;left:50%;top:clamp(20px,2.5vw,32px);transform:translateX(-50%);
        width:clamp(680px,65vw,985px);max-width:calc(100vw - 48px);height:clamp(44px,3.8vw,55px);
        border-radius:12px;
        display:flex;align-items:center;justify-content:space-between;
        padding:0 8px 0 20px;
        z-index:200;
        transition:background-color .4s ease, box-shadow .4s ease, color .4s ease;
      }
      .nav .brand{display:flex;align-items:center;gap:8px;color:#fff}
      .nav .links{display:flex;gap:clamp(20px,2.8vw,42px);align-items:center}
      .nav .links a{font-size:clamp(12px,0.95vw,14px);letter-spacing:-0.02em;font-weight:500;color:rgba(254,254,254,.75);transition:color .4s ease}
      .nav .right{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
      .nav .signin{font-size:clamp(12px,0.95vw,14px);letter-spacing:-0.02em;font-weight:500;color:rgba(254,254,254,.85);transition:color .4s ease}
      .nav .cta{
        position:relative;overflow:hidden;
        height:clamp(32px,2.7vw,39px);padding:0 clamp(10px,1.1vw,16px);border-radius:clamp(8px,0.7vw,10px);
        background:#18498B;border:1px solid rgba(255,255,255,.2);
        color:#FEFEFE;font-size:clamp(12px,0.95vw,14px);font-weight:500;letter-spacing:-0.02em;
        box-shadow:inset 0 0 14.1px 2px rgba(255,255,255,.2),
                   0 2px 5px rgba(61,98,147,.2),0 9px 9px rgba(61,98,147,.17),0 19px 12px rgba(61,98,147,.1);
      }
      .nav.dark{
        background:rgba(0,0,0,.04);
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
      }
      .nav.dark .links a,
      .nav.dark .signin{color:rgba(14,10,7,.65)}
      .nav.dark .signin{color:var(--ink)}
      .nav.glass{
        position:fixed;
        background:rgba(0,0,0,.25);
        box-shadow:inset 0 -4px 22.3px rgba(255,255,255,.15);
        border:1px solid rgba(255,255,255,.08);
        overflow:hidden;
      }
      .nav.glass::before,
      .nav.glass::after{
        content:'';
        position:absolute;
        pointer-events:none;
        z-index:10;
        background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
        width:10%;height:1px;
        filter:blur(0.6px);
        opacity:0;
      }
      .nav.glass::before{top:0;left:-10%}
      .nav.glass::after{bottom:0;right:-10%}
      @keyframes navLineTop{
        0%  {left:-10%;opacity:0}
        5%  {opacity:1}
        90% {opacity:.5}
        98% {opacity:0}
        100%{left:110%;opacity:0}
      }
      @keyframes navLineBottom{
        0%  {right:-10%;opacity:0}
        5%  {opacity:1}
        90% {opacity:.5}
        98% {opacity:0}
        100%{right:110%;opacity:0}
      }


      /* ───────────────────────── hero (light honeycomb glass video) ─────────────────────────
         The footage is near-white, so the hero runs ink-on-light: dark smoked-glass nav
         floating over bright glass, ink headline, bottom fading into the paper sections. */
      .curtain{
        position:relative;
        width:100%;height:100vh;
        overflow:hidden;color:var(--ink);perspective:2000px;
        background-color:#E7E8E4;
      }
      .curtain__bg{
        position:absolute;inset:0;z-index:0;
        background-image:
          radial-gradient(60% 80% at 50% 30%, #FFFFFF 0%, #E3E4E0 70%);
      }
      .curtain__video{
        position:absolute;inset:0;width:100%;height:100%;
        object-fit:cover;object-position:center;
        pointer-events:none;
        z-index:1;
      }
      .curtain__tint{
        position:absolute;inset:0;z-index:2;pointer-events:none;
        background:radial-gradient(80% 60% at 50% 22%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
      }
      .curtain__overlay{
        position:absolute;inset:0;z-index:3;
        background:linear-gradient(180deg, rgba(254,254,254,0) 76%, #FEFEFE 100%);
        pointer-events:none;
      }
      .curtain__edge{
        position:absolute;left:0;right:0;bottom:-2px;height:14px;
        background:none;
        pointer-events:none;
      }

      .hero{
        position:absolute;left:0;right:0;top:0;
        display:flex;flex-direction:column;align-items:center;
        text-align:center;
        padding-top:clamp(100px,13vh,160px);
        color:var(--ink);
        z-index:6;
      }
      .hero h1{
        margin:0 auto;
        text-align:center;
        font-size:clamp(42px,5.5vw,82px);
        letter-spacing:-0.055em;line-height:1.05;font-weight:500;
        color:var(--ink);
        width:fit-content;
      }
      .hero h1 .line{display:block;white-space:nowrap;text-align:center}
      .hero p.sub{
        margin:clamp(-35px,-3.2vw,-47px) auto 0;
        width:min(576px,88vw);max-width:min(576px,88vw);
        text-align:center;
        font-family:"Aktiv Grotesk Corp","Geist",ui-sans-serif,sans-serif;
        font-size:clamp(13px,1.2vw,17px);
        font-style:normal;
        font-weight:500;
        line-height:135%;
        letter-spacing:-0.03em;
        color:rgba(14,10,7,.72);
      }
      .hero .ctas{display:flex;gap:clamp(12px,1.4vw,20px);margin-top:clamp(12px,1.4vw,20px);justify-content:center;align-items:center}
      .hero .ctas .btn{
        height:clamp(36px,3.2vw,46px);padding:0 clamp(10px,1.1vw,16px);border-radius:clamp(10px,1vw,14px);font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:-0.04em;
        display:inline-flex;align-items:center;justify-content:center;gap:10px;
        color:rgb(254,254,254);
        cursor:pointer;
        transform:scale(0);
        transform-origin:center center;
        will-change:transform;
      }
      .hero .ctas .btn.primary{
        width:clamp(170px,15.5vw,223px);
        background:rgb(24,73,139);border:1px solid rgba(255,255,255,.3);
        box-shadow:inset 0 0 8px 6px rgba(255,255,255,.2),
                   0 2px 5px rgba(61,98,147,.2),0 9px 9px rgba(61,98,147,.17),0 19px 12px rgba(61,98,147,.1);
      }
      .hero .ctas .btn.ghost{
        width:clamp(118px,10.5vw,152px);
        background:rgba(14,10,7,.05);
        border:1px solid rgba(14,10,7,.16);
        color:var(--ink);
      }


      /* ───────────────────────── hero dashboard mock (kept from v1) ───────────────────────── */
      .browser{
        position:absolute;left:50%;bottom:-200px;transform:translateX(-50%);
        width:min(1224px, calc(100vw - 96px));height:534px;
        border-radius:24px;
        background:rgba(255,255,255,.22);
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
        overflow:hidden;
        z-index:4;
        box-shadow:0 30px 60px rgba(15,28,9,.35), inset 0 0 0 1px rgba(255,255,255,.22);
      }
      .browser__chrome{
        height:54px;padding:0 18px;
        display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.9);
      }
      .browser__nav{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.65)}
      .browser__url{
        flex:1;height:26px;border-radius:6px;background:rgba(255,255,255,.15);
        position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
        font-size:12px;color:#fff;letter-spacing:-0.01em;
      }
      .browser__icons{display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.7)}

      .dashboard{
        position:absolute;left:7px;right:7px;top:54px;bottom:0;
        background:#fff;border-radius:18px;display:flex;overflow:hidden;
        box-shadow:0 4px 10px rgba(117,117,117,.1),0 39px 23px rgba(117,117,117,.05);
      }
      .sidebar{
        width:290px;background:rgba(14,10,7,.03);border-right:1px solid rgba(14,10,7,.06);
        padding:16px;
      }
      .agency{
        background:rgba(14,10,7,.04);border-radius:16px;padding:10px;
        display:flex;align-items:center;gap:10px;
      }
      .agency__meta .k{font-size:9px;letter-spacing:.1em;font-weight:700;color:rgba(14,10,7,.4)}
      .agency__meta .n{font-size:16px;font-weight:500;letter-spacing:-0.04em;color:var(--ink);margin-top:3px}
      .agency__unfold{margin-left:auto;color:rgba(14,10,7,.35);font-size:18px;line-height:1}
      .sidebar h6{font-size:9px;letter-spacing:.1em;font-weight:700;color:rgba(14,10,7,.75);margin:28px 0 12px}
      .menu{display:flex;flex-direction:column;gap:6px}
      .menu a{
        display:flex;align-items:center;gap:10px;
        padding:9px 10px;border-radius:10px;
        font-size:14px;letter-spacing:-0.02em;color:rgba(14,10,7,.65);
      }
      .menu a.active{background:rgba(14,10,7,.05);color:var(--ink);font-weight:500}
      .main{flex:1;display:flex;flex-direction:column}
      .breadcrumbs{
        display:flex;align-items:center;gap:6px;
        padding:16px 24px;border-bottom:1px solid rgba(14,10,7,.07);
        font-size:13px;letter-spacing:-0.02em;
      }
      .breadcrumbs span{color:rgba(14,10,7,.35)}
      .breadcrumbs strong{font-weight:500;color:var(--ink)}
      .welcome{padding:22px 24px 0;font-size:28px;letter-spacing:-0.04em;color:rgba(14,10,7,.85);font-weight:500}
      .kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:18px 24px 24px}
      .kpi{
        border:1px solid var(--line);border-radius:14px;padding:4px 4px 10px 4px;background:rgba(14,10,7,.03);
        display:flex;flex-direction:column;gap:0;
      }
      .kpi .inner{
        background:#fff;border-radius:12px;padding:12px 16px;
        display:flex;justify-content:space-between;align-items:flex-start;
      }
      .kpi .val{font-family:var(--font-mono);font-size:28px;letter-spacing:-0.05em;color:var(--ink);line-height:1}
      .kpi .label{font-size:11px;letter-spacing:.1em;font-weight:700;color:rgba(14,10,7,.4)}
      .kpi .desc{font-size:13px;color:rgba(14,10,7,.35);letter-spacing:-0.02em;margin-top:4px}
      .kpi .mom{font-size:12px;letter-spacing:-0.03em;font-weight:500}
      .kpi .mom .val{color:#4BA884;font-family:"Aktiv Grotesk Corp",var(--font-sans);font-size:12px;font-style:normal;font-weight:500;line-height:110%;letter-spacing:-0.36px}
      .kpi .mom .lbl{color:#0E0A0773}
      .kpi .foot{display:flex;justify-content:space-between;align-items:center;padding:0 6px;margin-top:8px}
      .kpi .qmark{width:14px;height:14px;display:inline-block;vertical-align:middle}


      /* ───────────────────────── beams (nav + hero only) ───────────────────────── */
      .bb-wrap{
        pointer-events:none;
        position:absolute;inset:0;
        border-radius:inherit;
        padding:var(--bb-ring, 2px);
        box-sizing:border-box;
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
                mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite:xor;
                mask-composite:exclude;
        z-index:0;
      }
      .bb-beam{
        position:absolute;
        aspect-ratio:1;
        width:var(--bb-size, 140px);
        background:radial-gradient(circle at center,
          rgba(255,255,255,1)  0%,
          rgba(255,255,255,.7) 6%,
          rgba(255,255,255,.3) 18%,
          rgba(255,255,255,.1) 32%,
          rgba(255,255,255,0)  50%);
        filter:blur(0.6px);
        offset-path:rect(0 auto auto 0 round var(--bb-radius, 24px));
        offset-distance:0%;
        offset-rotate:0deg;
        animation:bb-travel 6s linear infinite;
      }
      .bb-beam-2{animation-delay:-3s}
      :where(.nav, .nav .cta, .hero .ctas .btn) > *:not(.bb-wrap){position:relative;z-index:1}
      .browser > .bb-wrap{position:absolute;inset:0;z-index:0}
      .browser > .browser__chrome{position:relative;z-index:2}
      .browser > .dashboard{z-index:1}
      .nav            { --bb-radius: 12px;  --bb-size: 100px; --bb-ring: 1px; isolation:isolate; }
      .nav .cta       { --bb-radius: 10px;  --bb-size: 60px;  --bb-ring: 1px; isolation:isolate; }
      .hero .ctas .btn{ --bb-radius: 14px;  --bb-size: 80px;  --bb-ring: 1px; isolation:isolate; position:relative; overflow:hidden; }
      .browser        { --bb-radius: 24px;  --bb-size: 300px; --bb-ring: 1px; isolation:isolate; }
      @keyframes bb-travel{
        to{offset-distance:100%}
      }


      /* ───────────────────────── intro choreography (hero only) ─────────────────────────
         The header itself loads normally: one quiet fade, all contents together. */
      #nav{opacity:0}
      .intro-nav-simple{animation:navFadeIn .55s cubic-bezier(.25,.8,.25,1) forwards}
      @keyframes navFadeIn{
        0%  {opacity:0;transform:translateX(-50%) translateY(-10px)}
        100%{opacity:1;transform:translateX(-50%) translateY(0)}
      }
      .hero h1{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .hero p.sub .sub-line{display:block;opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .hero p.sub .sub-line.in{animation:introSubLine .25s cubic-bezier(.22,.61,.36,1) forwards}
      .hero .ctas{opacity:0;transform:translateY(12px)}
      .browser{opacity:0;transform:translateX(-50%) translateY(-150px) rotateX(85deg);transform-origin:bottom center;}

      .browser__chrome,
      .sidebar,
      .breadcrumbs,
      .welcome,
      .kpis > .kpi{
        opacity:0;
        transform:translateY(8px);
        filter:blur(4px);
        will-change:opacity,transform,filter;
      }
      .browser.intro-browser-in .browser__chrome{animation:browserChildIn .7s cubic-bezier(.25,.8,.25,1) 0.45s forwards}
      .browser.intro-browser-in .sidebar       {animation:browserChildIn .7s cubic-bezier(.25,.8,.25,1) 0.75s forwards}
      .browser.intro-browser-in .breadcrumbs   {animation:browserChildIn .6s cubic-bezier(.25,.8,.25,1) 1.05s forwards}
      .browser.intro-browser-in .welcome       {animation:browserChildIn .6s cubic-bezier(.25,.8,.25,1) 1.20s forwards}
      .browser.intro-browser-in .kpis > .kpi:nth-child(1){animation:browserChildIn .65s cubic-bezier(.25,.8,.25,1) 1.40s forwards}
      .browser.intro-browser-in .kpis > .kpi:nth-child(2){animation:browserChildIn .65s cubic-bezier(.25,.8,.25,1) 1.55s forwards}
      .browser.intro-browser-in .kpis > .kpi:nth-child(3){animation:browserChildIn .65s cubic-bezier(.25,.8,.25,1) 1.70s forwards}
      @keyframes browserChildIn{
        0%  {opacity:0;transform:translateY(8px);filter:blur(4px)}
        100%{opacity:1;transform:translateY(0);   filter:blur(0)}
      }

      .hero h1 .ch{
        display:inline-block;
        opacity:0;
        transform:translateY(.9em) rotateX(-70deg) scale(.9);
        transform-origin:50% 100%;
        filter:blur(14px);
        will-change:transform,opacity,filter;
      }
      .hero h1 .ch.sp{width:.28em}
      .intro-h1-in{opacity:1 !important;filter:none !important;transform:none !important;animation:none !important}
      .intro-h1-in .ch{
        animation:introLetterUp .3s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(var(--i, 0) * 11ms);
      }
      @keyframes introLetterUp{
        0%  {opacity:0;filter:blur(14px);transform:translateY(.9em) rotateX(-70deg) scale(.9)}
        55% {opacity:1;filter:blur(3px);transform:translateY(.08em) rotateX(-8deg) scale(1)}
        100%{opacity:1;filter:blur(0);transform:translateY(0) rotateX(0) scale(1)}
      }
      @keyframes introSubLine{
        0%  {opacity:0;transform:translateY(18px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .intro-btns-in{opacity:1 !important;transform:none !important}
      .intro-btns-in .btn.primary{
        animation:introBtnPop .35s cubic-bezier(.22,.61,.36,1) forwards;
      }
      .intro-btns-in .btn.ghost{
        animation:introBounceIn .55s cubic-bezier(.22,.61,.36,1) .08s forwards;
      }
      @keyframes introBounceIn{
        0%  {opacity:0;transform:scale(0)}
        40% {opacity:1}
        65% {transform:scale(1.1)}
        85% {transform:scale(0.95)}
        100%{opacity:1;transform:scale(1)}
      }
      @keyframes introBtnPop{
        0%  {transform:scale(0)}
        60% {transform:scale(1.2)}
        100%{transform:scale(1)}
      }
      .intro-browser-in{animation:introBrowser 2.2s cubic-bezier(.50,1,.3,1) forwards}
      @keyframes introBrowser{
        0%  {opacity:0;transform:translateX(-50%) translateY(-150px) rotateX(85deg)}
        15% {opacity:1}
        100%{opacity:1;transform:translateX(-50%) translateY(0) rotateX(0deg)}
      }
      #nav.intro-done{opacity:1}

      /* burger + drawer: hidden on desktop, the nav on mobile */
      .nav__burger{
        display:none;
        flex-direction:column;align-items:center;justify-content:center;gap:4px;
        width:40px;height:40px;border-radius:10px;
      }
      .nav__burger span{width:18px;height:2px;border-radius:2px;background:#fff;transition:background .4s ease}
      .nav.dark .nav__burger span{background:var(--ink)}
      .nav__drawer{
        position:fixed;inset:0;z-index:300;
        display:flex;flex-direction:column;justify-content:center;gap:6px;
        padding:0 36px;
        background:rgba(10,8,6,.97);
        -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
        transform:translateX(100%);
        transition:transform .34s cubic-bezier(.2,.7,.2,1);
        visibility:hidden;
      }
      .nav__drawer.open{transform:none;visibility:visible}
      .nav__drawer a{
        color:rgba(255,255,255,.92);font-size:30px;font-weight:500;letter-spacing:-0.04em;
        padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);
      }
      .nav__drawer .drawer-close{
        position:absolute;top:22px;right:22px;
        width:44px;height:44px;border-radius:12px;
        background:rgba(255,255,255,.08);color:#fff;font-size:18px;
      }
      @media (min-width:761px){
        .nav__drawer{display:none}
      }


      /* ───────────────────────── wordmark ───────────────────────── */
      .wordmark{
        font-family:var(--font-sans);font-weight:600;font-size:21px;
        letter-spacing:-0.05em;line-height:1;color:#fff;
        display:inline-flex;align-items:baseline;white-space:nowrap;
        transition:color .4s ease;
      }
      .wordmark em{
        font-style:normal;font-weight:400;
        letter-spacing:-0.03em;margin-left:.18em;
      }
      .nav .brand .wordmark{font-size:20px}
      .nav.dark .brand .wordmark{color:var(--ink)}
      .curtain__hero-logo .wordmark{font-size:30px}
      .nav a.cta{display:inline-flex;align-items:center;justify-content:center;text-align:center}


      /* ═════════════════════════ below the fold — calm, editorial ═════════════════════════
         Native scroll. No section snapping, no letter splits, no orbits.
         The only motion is one slow fade-up per section, once. */

      main.below{position:relative;z-index:1;background:var(--paper)}
      .sect{position:relative;width:100%;background:var(--paper);scroll-margin-top:96px}
      .sect-inner{
        max-width:1160px;margin:0 auto;
        padding:clamp(88px,12vh,140px) clamp(32px,5vw,64px);
        position:relative;
      }
      .sect + .sect .sect-inner{border-top:1px solid var(--line)}

      .eyebrow{
        display:inline-flex;align-items:center;gap:8px;
        font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(14,10,7,.55);
      }
      .eyebrow .sq{width:8px;height:8px;border-radius:2px;background:rgba(14,10,7,.55)}

      .sect-head{max-width:640px;margin-bottom:clamp(40px,6vh,64px)}
      .sect-head .eyebrow{margin-bottom:20px}
      .sect-head h2{
        font-size:clamp(34px,3.4vw,52px);letter-spacing:-0.05em;line-height:1.02;font-weight:500;
        margin:0;color:var(--ink);
      }
      .sect-lede{
        font-size:clamp(14px,1.15vw,16px);line-height:1.5;letter-spacing:-0.02em;
        color:rgba(14,10,7,.6);margin:18px 0 0;max-width:520px;
      }

      /* boxes + bento (asymmetric boxing shared by all lower sections) */
      .box{
        border:1px solid rgba(14,10,7,.12);border-radius:18px;
        background:rgba(14,10,7,.015);
        padding:26px 28px;
        transition:transform .25s ease, box-shadow .25s ease;
      }
      .box:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(14,10,7,.07)}
      .micro-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;font-weight:500;color:rgba(14,10,7,.35)}

      .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
      .bento .span7{grid-column:span 7}
      .bento .span5{grid-column:span 5}

      /* services */
      .box-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
      .svc-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:rgba(14,10,7,.35)}
      .svc h3{
        font-size:clamp(19px,1.6vw,23px);letter-spacing:-0.04em;font-weight:500;margin:0 0 12px;color:var(--ink);
      }
      .svc p{font-size:14px;line-height:1.55;letter-spacing:-0.015em;color:rgba(14,10,7,.62);margin:0}
      .svc .done{
        margin-top:18px;padding-top:14px;border-top:1px dashed rgba(14,10,7,.14);
        font-size:13px;color:rgba(14,10,7,.5);
      }
      .svc .done em{font-style:normal;font-weight:600;color:rgba(14,10,7,.72)}
      .flow-line{
        margin-top:16px;padding:10px 14px;border-radius:10px;
        background:rgba(37,91,243,.04);border:1px solid rgba(37,91,243,.14);
        font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:rgba(14,10,7,.55);
        white-space:nowrap;overflow:hidden;
      }
      .mini-chart{position:relative;margin-top:18px;height:96px;border-radius:12px;overflow:hidden;
        border:1px solid rgba(37,91,243,.12);background:rgba(37,91,243,.025)}
      .mini-chart svg{position:absolute;inset:0;width:100%;height:100%}
      .mini-chart .spark-fill{fill:rgba(37,82,222,.08)}
      .mini-chart .spark{
        fill:none;stroke:#2552DE;stroke-width:2;
        stroke-dasharray:1;stroke-dashoffset:1;
        transition:stroke-dashoffset 1.5s ease .35s;
      }
      .reveal-on-scroll.in .spark{stroke-dashoffset:0}
      .mini-chart .micro-tag{position:absolute;left:12px;top:10px}

      /* the dark agent card — the one liquid-glass surface below the fold */
      .box--dark{
        position:relative;isolation:isolate;overflow:hidden;
        background:var(--ink);color:#fff;border-color:rgba(255,255,255,.1);
        --bb-radius:18px; --bb-size:240px; --bb-ring:1px;
      }
      .box--dark > *:not(.bb-wrap), .foot-cta > *:not(.bb-wrap){position:relative;z-index:1}
      .agent{display:flex;flex-direction:column;gap:18px;justify-content:space-between}
      .agent-head{display:flex;align-items:center;gap:12px}
      .agent-ic{
        width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);
        display:grid;place-items:center;color:#8faa78;
      }
      .agent-ic svg{width:20px;height:20px}
      .agent-head .k{font-size:9px;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.55)}
      .agent-head .t{font-size:16px;letter-spacing:-0.03em;font-weight:500;margin-top:3px}
      .live-chip{
        margin-left:auto;font-size:10px;letter-spacing:.1em;font-weight:700;
        padding:5px 9px;border-radius:100px;background:rgb(35,82,222);color:rgba(254,254,254,.95);
      }
      .agent-msg{
        font-size:clamp(18px,1.6vw,22px);letter-spacing:-0.04em;line-height:1.25;font-weight:500;
        color:rgba(255,255,255,.95);margin:0;max-width:30ch;text-wrap:pretty;
      }
      .agent-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
      .exc-pill{
        display:inline-flex;align-items:center;gap:7px;
        padding:6px 13px 6px 6px;border-radius:100px;background:#E62A2A;color:#fff;
        font-size:13px;letter-spacing:-0.02em;font-weight:500;
      }
      .exc-pill i{
        width:20px;height:20px;border-radius:50%;background:#fff;color:#E62A2A;
        display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;
      }
      .agent-saving{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
      .agent-saving .lbl{font-size:11px;letter-spacing:-0.01em;color:rgba(255,255,255,.55)}
      .agent-saving .v{font-family:var(--font-mono);font-size:24px;letter-spacing:-0.05em;color:#fff;line-height:1}
      .agent-saving .v em{font-family:var(--font-sans);font-style:normal;font-weight:500;font-size:13px;color:rgba(255,255,255,.7)}

      /* how it works — stepped cascade over dotted grid lines */
      .how{position:relative}
      .grid-lines{
        position:absolute;left:50%;top:0;transform:translateX(-50%);
        width:1064px;max-width:92vw;height:100%;display:flex;justify-content:space-between;pointer-events:none;
      }
      .grid-lines i{width:1px;background:repeating-linear-gradient(180deg, rgba(14,10,7,.1) 0 4px, transparent 4px 8px);height:100%}
      .corner-stamp{
        position:absolute;top:clamp(40px,6vh,64px);
        font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;font-weight:500;color:rgba(14,10,7,.28);
      }
      .corner-stamp.l{left:clamp(32px,5vw,64px)}
      .corner-stamp.r{right:clamp(32px,5vw,64px);text-align:right}
      .how-steps{display:flex;flex-direction:column;gap:14px}
      .how-row{
        display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:start;
        width:min(720px,82%);
        background:var(--paper);
      }
      .how-row:nth-child(2){margin-left:9%}
      .how-row:nth-child(3){margin-left:18%}
      .how-num{font-family:var(--font-mono);font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.04em;color:rgba(14,10,7,.22);line-height:1}
      .how-body h3{font-size:clamp(19px,1.7vw,24px);letter-spacing:-0.04em;font-weight:500;margin:0 0 10px;color:var(--ink)}
      .how-body p{font-size:14.5px;line-height:1.6;letter-spacing:-0.015em;color:rgba(14,10,7,.62);margin:0;max-width:560px}
      .audit-note{
        margin:30px 0 0 18%;width:min(720px,82%);
        padding:20px 24px;border:1px solid rgba(37,91,243,.22);border-radius:14px;
        background:rgba(37,91,243,.025);
        box-shadow:inset 0 0 11.2px 5px rgba(37,91,243,.04);
        font-size:14px;line-height:1.55;letter-spacing:-0.015em;color:rgba(14,10,7,.7);
      }
      .audit-note strong{font-weight:600;color:var(--ink)}

      /* proof — staggered stat tiles over faint ovals */
      .proof .sect-inner{position:relative}
      .ovals{
        position:absolute;right:0;top:clamp(60px,10vh,120px);width:60%;height:300px;
        pointer-events:none;display:flex;justify-content:flex-end;
      }
      .ovals .o{
        width:clamp(220px,26vw,380px);height:clamp(130px,15vw,220px);border-radius:300px;
        border:1.5px solid rgba(14,10,7,.05);margin-left:clamp(-160px,-12vw,-90px);
      }
      .proof-stats{
        position:relative;
        display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;
      }
      .pstat{padding:30px 28px 26px}
      .pstat:nth-child(2){margin-top:36px}
      .pstat:nth-child(3){margin-top:72px}
      .pstat.violet{border-color:rgba(134,105,185,.28);box-shadow:inset 0 0 11.2px 5px rgba(134,105,185,.04)}
      .pstat.violet .v{color:#8669B9}
      .pstat.blue{border-color:rgba(37,91,243,.28);box-shadow:inset 0 0 11.2px 5px rgba(37,91,243,.04)}
      .pstat.blue .v{color:#2552DE}
      .pstat .v{font-family:var(--font-mono);font-size:clamp(38px,3.6vw,54px);letter-spacing:-0.06em;color:var(--ink);line-height:1}
      .pstat .l{font-size:13px;letter-spacing:-0.01em;color:rgba(14,10,7,.5);margin-top:12px;max-width:200px;line-height:1.4}

      /* stack — offset cluster with a slow drift on a few tiles */
      .stack .sect-inner{
        position:relative;
        background-image:repeating-linear-gradient(90deg, rgba(14,10,7,.05) 0 1px, transparent 1px 145px);
      }
      .stack-band{
        position:absolute;left:0;right:0;top:62%;height:1px;
        background:repeating-linear-gradient(90deg, rgba(14,10,7,.12) 0 6px, transparent 6px 10px);
        pointer-events:none;
      }
      .stack-grid{position:relative;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;padding-bottom:40px}
      .stack-grid .tile{
        width:112px;height:130px;
        border-radius:34px;
        display:grid;place-items:center;color:#fff;font-weight:700;letter-spacing:-0.04em;
        box-shadow:0 18px 38px rgba(0,0,0,.10), inset 0 -10px 30px rgba(0,0,0,.08);
        border:1px solid rgba(14,10,7,.13);
      }
      .stack-grid .tile--logo{
        background:#fff;border:1px solid rgba(14,10,7,.08);
        box-shadow:0 6px 14px rgba(14,10,7,.06);
      }
      .stack-grid .tile--logo img{width:52%;height:auto;max-height:54%;object-fit:contain}
      .stack-grid .tile:nth-child(2){margin-top:26px}
      .stack-grid .tile:nth-child(3){margin-top:-8px}
      .stack-grid .tile:nth-child(4){margin-top:38px}
      .stack-grid .tile:nth-child(5){margin-top:10px}
      .stack-grid .tile:nth-child(6){margin-top:44px}
      .stack-grid .tile:nth-child(7){margin-top:-4px}
      .stack-grid .tile:nth-child(8){margin-top:30px}
      .drift{animation:drift 9s ease-in-out infinite alternate}
      .stack-grid .tile:nth-child(5).drift{animation-delay:-3s}
      .stack-grid .tile:nth-child(7).drift{animation-delay:-6s}
      @keyframes drift{
        from{transform:translateY(-4px)}
        to{transform:translateY(5px)}
      }
      .stack-stamp{position:absolute;right:clamp(32px,5vw,64px);bottom:clamp(28px,4vh,44px)}

      /* footer */
      footer{
        background:var(--ink);color:#fff;padding:clamp(72px,10vh,110px) clamp(32px,5vw,64px) 32px;
        position:relative;overflow:hidden;
      }
      footer .inner{
        max-width:1160px;margin:0 auto;
        display:grid;grid-template-columns:1fr auto;gap:60px;align-items:start;
      }
      footer h3{
        font-size:clamp(30px,3vw,46px);letter-spacing:-0.05em;font-weight:500;line-height:1.05;
        margin:0 0 32px;max-width:560px;
      }
      .foot-cta{
        position:relative;overflow:hidden;isolation:isolate;
        --bb-radius:14px; --bb-size:90px; --bb-ring:1px;
        display:inline-flex;align-items:center;justify-content:center;gap:10px;
        height:46px;padding:0 22px;border-radius:14px;
        background:rgb(24,73,139);border:1px solid rgba(255,255,255,.3);
        color:#FEFEFE;font-size:15px;font-weight:500;letter-spacing:-0.03em;
        box-shadow:inset 0 0 8px 6px rgba(255,255,255,.18);
        transition:transform .18s ease, filter .18s ease;
      }
      .foot-cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
      .foot-right h6{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.4);margin:6px 0 16px;text-transform:uppercase}
      .foot-right a{display:block;padding:6px 0;color:rgba(255,255,255,.8);font-size:14px;letter-spacing:-0.02em}
      .foot-right a:hover{color:#fff}
      footer .bottom{
        max-width:1160px;margin:72px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
        display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.5);
      }
      .wordmark--foot{font-size:15px;color:rgba(255,255,255,.85)}

      /* sanctioned motion below the fold:
         (1) one fade-up per section, with a small stagger across its boxes
         (2) the slow ambient beams on dark glass surfaces
         (3) the 9s drift on a few stack tiles
         everything else is still. */
      .reveal-on-scroll{
        opacity:0;transform:translateY(14px);
        transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
      }
      .reveal-on-scroll.in{opacity:1;transform:none}
      .reveal-on-scroll .stagger{
        opacity:0;transform:translateY(16px);
        transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
      }
      .reveal-on-scroll.in .stagger{opacity:1;transform:none}
      .reveal-on-scroll.in .stagger:nth-child(2){transition-delay:.09s}
      .reveal-on-scroll.in .stagger:nth-child(3){transition-delay:.18s}
      .reveal-on-scroll.in .stagger:nth-child(4){transition-delay:.27s}
      .reveal-on-scroll.in .stagger:nth-child(5){transition-delay:.34s}
      .reveal-on-scroll.in .stagger:nth-child(6){transition-delay:.4s}
      .reveal-on-scroll.in .stagger:nth-child(7){transition-delay:.46s}
      .reveal-on-scroll.in .stagger:nth-child(8){transition-delay:.52s}
      /* drift must not fight the stagger's transform transition */
      .reveal-on-scroll .drift{animation-play-state:paused}
      .reveal-on-scroll.in .drift{animation-play-state:running;animation-delay:.8s}
      .reveal-on-scroll.in .stack-grid .tile:nth-child(5).drift{animation-delay:-3s}
      .reveal-on-scroll.in .stack-grid .tile:nth-child(7).drift{animation-delay:-6s}
      /* beams below the fold run at half speed — ambient, not busy */
      main.below .bb-beam{animation-duration:12s}
      main.below .bb-beam-2{animation-delay:-6s}


      /* ───────────────────────── responsive + reduced motion ───────────────────────── */
      @media (max-width:1400px){
        .browser{width:min(1000px,calc(100vw - 64px));bottom:-160px}
        .sidebar{width:230px}
      }
      @media (max-width:1200px){
        .browser{width:min(900px,calc(100vw - 48px));bottom:-140px}
      }
      @media (max-height: 940px)  { .browser{ zoom: 0.9 } }
      @media (max-height: 860px)  { .browser{ zoom: 0.8 } }
      @media (max-height: 800px)  { .browser{ zoom: 0.72 } }
      @media (max-height: 740px)  { .browser{ zoom: 0.64 } }
      @media (max-height: 680px)  { .browser{ zoom: 0.56 } }


      /* ═════════════════════════ mobile (≤760px) ═════════════════════════
         True responsive layer: device-width viewport, burger nav, single-column
         bento, flattened cascade, no dashboard mock. Desktop is untouched. */
      html{-webkit-text-size-adjust:100%}
      @media (max-width:760px){

        /* nav: brand + Book a Call + burger */
        .nav{
          width:calc(100vw - 24px);max-width:none;height:52px;
          padding:0 8px 0 16px;top:14px;
        }
        .nav .links,.nav .right .signin{display:none}
        .nav__burger{display:flex}
        .nav .right{gap:8px}

        /* hero: type scales to the glass, no dashboard mock */
        .curtain{height:100svh;min-height:560px}
        .hero{padding-top:max(110px,17svh)}
        .hero h1{
          font-size:clamp(23px,7.6vw,42px) !important;
        }
        .hero h1 .line2{width:auto !important}
        .hero p.sub{margin:14px auto 0;width:88vw}
        .hero p.sub .sub-line{display:inline}
        .hero p.sub .sub-line::after{content:" "}
        .hero .ctas{margin-top:22px;flex-wrap:wrap;padding:0 16px}
        .hero .ctas .btn.primary,.hero .ctas .btn.ghost{width:auto;padding:0 18px}

        /* dashboard mock: a mobile-native version — real size, readable,
           sidebar dropped, KPIs stacked, docked into the hero's bottom edge */
        .browser{
          display:block;
          zoom:1;
          width:min(380px, calc(100vw - 32px)) !important;
          height:auto;
          bottom:-285px;
          opacity:1 !important;
          animation:none !important;
          transform:translateX(-50%) !important;
          border-radius:20px;
        }
        .browser__chrome{height:46px;padding:0 14px;gap:12px}
        .browser__nav img{height:11px !important}
        .browser__url{font-size:10.5px;height:24px}
        .browser__icons img{height:13px !important}
        .dashboard{
          position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;
          margin:0 6px 6px;border-radius:14px;
          display:block;height:auto;
        }
        .sidebar,.breadcrumbs{display:none}
        .welcome{padding:16px 18px 0;font-size:19px}
        .kpis{grid-template-columns:1fr;gap:10px;padding:14px 16px 18px}
        .kpi .val{font-size:24px}

        /* sections: tighter frame */
        .sect-inner{padding:64px 20px}
        .sect-head{margin-bottom:36px}
        .sect-head h2{font-size:clamp(28px,8vw,34px)}
        .sect{scroll-margin-top:76px}

        /* bento → single column */
        .bento{grid-template-columns:1fr;gap:12px}
        .bento .span7,.bento .span5{grid-column:auto}
        .box{padding:22px 20px}
        .agent-msg{max-width:none}

        /* how: flatten the cascade */
        .corner-stamp{display:none}
        .how-row{width:100%;grid-template-columns:52px 1fr;gap:16px}
        .how-row:nth-child(2),.how-row:nth-child(3){margin-left:0}
        .how-num{font-size:22px}
        .audit-note{margin:18px 0 0;width:100%}

        /* proof: stack the tiles, drop the diagonal */
        .ovals{display:none}
        .proof-stats{grid-template-columns:1fr;gap:12px}
        .pstat:nth-child(2),.pstat:nth-child(3){margin-top:0}
        .pstat{padding:24px 22px 22px}

        /* stack: smaller tiles, even rows, keep the drift */
        .stack-grid{gap:14px;padding-bottom:28px;justify-content:center}
        .stack-grid .tile{width:84px;height:98px;border-radius:26px}
        .stack-grid .tile:nth-child(n){margin-top:0}
        .stack-grid .tile:nth-child(even){margin-top:18px}
        .stack-band{top:55%}
        .stack-stamp{position:static;display:block;text-align:center;margin-top:10px}

        /* footer */
        footer{padding:64px 20px 28px}
        footer .inner{grid-template-columns:1fr;gap:36px}
        footer h3{margin-bottom:24px}
        footer .bottom{margin-top:48px;flex-direction:column;gap:10px;text-align:center}
      }

      /* phones too short to fit the docked mock under the hero copy
         (note: real iPhone Safari viewports are ~620–700px tall after browser chrome) */
      @media (max-width:760px) and (max-height:599px){
        .browser{display:none}
      }

      @media (prefers-reduced-motion: reduce){
        html,body{scroll-behavior:auto}
        *,*::before,*::after{animation:none !important;transition:none !important}
        #nav,
        .hero h1,.hero h1 .ch,.hero p.sub .sub-line,.hero .ctas,.hero .ctas .btn,
        .browser,.browser__chrome,.sidebar,.breadcrumbs,.welcome,.kpis > .kpi,
        .reveal-on-scroll,.reveal-on-scroll .stagger{
          opacity:1 !important;transform:none !important;filter:none !important;
        }
        .mini-chart .spark{stroke-dashoffset:0 !important}
        #nav{transform:translateX(-50%) !important}
        .browser{transform:translateX(-50%) !important}
        .bb-beam{display:none}
      }


      /* ═════════════════════════ "I need a dashboard for…" demo section ═════════════════════════
         Picker chips + a floating liquid-glass browser frame (hero recipe, demo- namespaced —
         .browser itself is entangled with the intro choreography) on a static sage mat.
         Mocks load lazily into a same-origin iframe; each renders its own mobile layout
         because media queries inside an iframe key off the IFRAME's width. */

      /* the fill-in-the-blank selector — the headline IS the picker */
      .demo .sect-head{max-width:none;margin-bottom:clamp(28px,4.5vh,44px)}
      .demo .sect-head h2{font-size:clamp(27px,2.9vw,38px);line-height:1.22;letter-spacing:-0.045em}
      .fill{position:relative;display:inline-block;white-space:nowrap}
      .fill .fill-menu{white-space:normal}
      .fill-btn{display:inline-flex;align-items:center;gap:.2em;white-space:nowrap;
        font:inherit;letter-spacing:inherit;color:var(--ink);cursor:pointer;
        padding:0 .1em 2px;border-bottom:3px dashed rgba(14,10,7,.3);border-radius:0;
        transition:border-color .18s ease, background .18s ease}
      .fill-btn:hover{border-bottom-color:var(--ink);border-bottom-style:solid;background:rgba(14,10,7,.03)}
      .fill-btn:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}
      .fill-chev{width:.5em;height:.5em;flex:0 0 auto;color:rgba(14,10,7,.4);margin-top:.12em;
        transition:transform .18s ease, color .18s ease}
      .fill-btn:hover .fill-chev{color:var(--ink)}
      .fill-btn[aria-expanded="true"] .fill-chev{transform:rotate(180deg)}
      .fill-menu{position:absolute;left:-6px;top:calc(100% + 12px);z-index:60;
        min-width:330px;max-width:min(92vw,430px);max-height:min(54vh,400px);overflow-y:auto;
        overscroll-behavior:contain;
        background:#fff;border:1px solid rgba(14,10,7,.1);border-radius:16px;padding:6px;
        box-shadow:0 24px 48px rgba(14,10,7,.14), 0 4px 12px rgba(14,10,7,.06)}
      .fill-menu[hidden]{display:none}
      .fill-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
        padding:10px 14px;border-radius:11px;cursor:pointer;text-align:left;line-height:1.3;
        transition:background .14s ease}
      .fill-opt:hover{background:rgba(14,10,7,.045)}
      .fill-opt:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px}
      .fill-opt .l{font-size:15px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);
        display:flex;align-items:center;width:100%}
      .fill-opt .l svg{width:13px;height:13px;margin-left:auto;padding-left:10px;box-sizing:content-box;
        color:var(--ink);opacity:0;flex:0 0 auto}
      .fill-opt[aria-selected="true"]{background:rgba(14,10,7,.05)}
      .fill-opt[aria-selected="true"] .l svg{opacity:1}
      .fill-opt .c{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:rgba(14,10,7,.4)}

      /* stage + mat */
      .demo-stage{position:relative;padding:clamp(18px,2.4vw,30px)}
      .demo-mat{position:absolute;inset:0;border-radius:32px;pointer-events:none;
        background:
          radial-gradient(70% 90% at 22% 8%, rgba(255,255,255,.35), transparent 60%),
          radial-gradient(55% 65% at 82% 96%, rgba(35,82,222,.16), transparent 65%),
          linear-gradient(160deg, #8E9C7C 0%, #5C6B4F 58%, #424F38 100%);
        border:1px solid rgba(14,10,7,.06)}

      /* the glass browser */
      .demo-browser{position:relative;margin:0;display:flex;flex-direction:column;
        height:clamp(540px,70vh,700px);border-radius:24px;overflow:hidden;
        background:rgba(255,255,255,.22);
        backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
        box-shadow:0 24px 48px rgba(15,28,9,.18), inset 0 0 0 1px rgba(255,255,255,.3);
        --bb-radius:24px;--bb-size:300px;--bb-ring:1px;isolation:isolate}
      .demo-browser > .bb-wrap{position:absolute;inset:0;z-index:0}
      .demo-browser > *:not(.bb-wrap){position:relative;z-index:1}

      .demo-chrome{height:54px;padding:0 18px;display:flex;align-items:center;gap:18px;
        color:rgba(255,255,255,.9);flex:0 0 auto}
      .demo-chrome__nav{display:flex;align-items:center;color:rgba(255,255,255,.65)}
      .demo-chrome__url{flex:1;height:26px;border-radius:6px;background:rgba(255,255,255,.15);
        position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
        font-size:12px;color:#fff;letter-spacing:-0.01em;min-width:0}
      .demo-chrome__url span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .demo-chrome__icons{display:flex;align-items:center;color:rgba(255,255,255,.7)}

      .demo-pane{flex:1;margin:0 7px 7px;border-radius:18px;overflow:hidden;
        background:var(--paper);position:relative;
        box-shadow:0 4px 10px rgba(117,117,117,.1)}
      .demo-pane iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
        background:var(--paper);transition:opacity .18s ease}
      .demo-pane iframe.switching{opacity:.25}

      /* legend — the three offers' new home */
      .demo-legend{display:flex;justify-content:center;align-items:center;gap:14px;margin:22px 0 0;
        font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted-2)}
      .demo-legend i{font-style:normal;color:rgba(14,10,7,.25)}

      @media (max-width:760px){
        /* fill selector: smaller sentence so blank + closing quote hold one line,
           lighter underline, menu hugs the section column */
        .demo .sect-head h2{font-size:clamp(21px,6vw,28px)}
        .fill-btn{border-bottom-width:2px}
        .fill-menu{min-width:0;width:min(86vw,360px);max-height:46vh}

        /* frame → near-full-bleed (12px gutters: sect padding 20px, -8px margin) */
        .demo-stage{margin:0 -8px;padding:10px}
        .demo-mat{border-radius:24px}
        .demo-browser{height:clamp(420px,62svh,560px);border-radius:20px}
        .demo-chrome{height:46px;padding:0 14px;gap:12px}
        .demo-chrome__nav img{height:11px !important}
        .demo-chrome__url{font-size:10.5px;height:24px}
        .demo-chrome__icons img{height:13px !important}
        .demo-pane{margin:0 5px 5px;border-radius:14px}

        .demo-legend{flex-wrap:wrap;gap:8px 12px;font-size:10px}
      }