:root{
        --ink:#0E0A07;
        --paper:#FEFEFE;
        --blue:#18498B;
        --blue-2:#2352DE;
        --blue-3:#3372D9;
        --violet:#8669B9;
        --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);
        /* Google type system. --font-sans = Google Sans (headings + brand),
           --font-body = Roboto (body copy), --font-mono = Google Sans Code
           (numerals/stats). Noto Sans backs every Latin stack as the universal
           fallback. --font-serif keeps the original Instrument Serif italic for
           the accent phrases. */
        --font-sans:'Google Sans','Noto Sans',ui-sans-serif,system-ui,sans-serif;
        --font-body:'Roboto','Noto Sans',ui-sans-serif,system-ui,sans-serif;
        --font-serif:'Instrument Serif','Test Söhne Mono',ui-serif,serif;
        --font-mono:'Google Sans Code',ui-monospace,'SF Mono',monospace;
      }
      *{box-sizing:border-box}
      html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
      /* Headings + brand wordmark in Google Sans; body copy stays Roboto.
         Accent phrases (.it) override to Instrument Serif italic below. */
      h1,h2,h3,h4,h5,h6,.brand-name{font-family:var(--font-sans)}
      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{
        position:fixed;left:50%;top:clamp(18px,2.4vw,28px);transform:translateX(-50%);
        width:clamp(680px,65vw,985px);max-width:calc(100vw - 40px);height:clamp(46px,3.9vw,56px);
        border-radius:999px;
        border:1px solid transparent;
        display:flex;align-items:center;justify-content:space-between;
        padding:0 10px 0 24px;
        z-index:200;
        transition:background-color .4s ease, box-shadow .4s ease, color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
      }
      /* Nav-level border-beam belonged to the old glass bar — gone now the
         bar is transparent over the hero and a clean capsule on scroll. */
      .nav > .bb-wrap{display:none}
      .nav .brand{display:flex;align-items:center;gap:8px;color:#fff}
      .nav .brand .brand-name{font-size:17px;font-weight:600;letter-spacing:-0.04em;color:currentColor;transition:color .4s ease}
      .nav .nav__burger{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;
        display:inline-flex;align-items:center;justify-content:center;gap:6px;
        height:clamp(34px,2.8vw,40px);padding:0 clamp(14px,1.2vw,18px);border-radius:999px;
        background:#1A73E8;border:1px solid rgba(255,255,255,.22);
        color:#fff;font-size:clamp(12px,0.95vw,14px);font-weight:500;letter-spacing:-0.02em;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
                   0 2px 6px rgba(26,115,232,.28),0 10px 22px rgba(26,115,232,.22);
        transition:background-color .25s ease, box-shadow .25s ease;
      }
      .nav .cta:hover{background:#1666d0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(26,115,232,.36),0 16px 28px rgba(26,115,232,.26)}

      /* Shared Google-blue trust-CTA arrow (matches the onboarding pill): a
         right-pointing arrow that glides forward on hover. */
      .cta-arrow{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform .36s cubic-bezier(.22,.61,.36,1)}
      .cta-arrow svg{width:16px;height:16px}
      .nav .cta:hover .cta-arrow,
      .hero .ctas .btn.primary:hover .cta-arrow,
      .btn-final:hover .cta-arrow,
      .price-cta:hover .cta-arrow{transform:translateX(5px)}
      /* Scrolled past the hero: floating frosted-white capsule, dark text. */
      .nav.dark{
        background:rgba(255,255,255,.72);
        backdrop-filter:blur(18px) saturate(1.6);
        -webkit-backdrop-filter:blur(18px) saturate(1.6);
        border-color:rgba(14,10,7,.06);
        box-shadow:0 10px 30px rgba(8,23,79,.10), inset 0 1px 0 rgba(255,255,255,.7);
      }
      .nav.dark .brand .brand-name,
      .nav.dark .links a,
      .nav.dark .nav__burger,
      .nav.dark .signin{color:var(--ink)}
      .nav.dark .links a{color:rgba(14,10,7,.65)}
      .nav.dark .links a:hover{color:var(--ink)}
      /* Over the hero photo: fully transparent — logo + links float on the
         scrim, no bar. A soft shadow keeps the white text legible over any
         bright patch of the photo (sky, snow). */
      .nav.glass{
        background:transparent;
        box-shadow:none;
        border-color:transparent;
      }
      .nav.glass .brand-name,
      .nav.glass .links a,
      .nav.glass .signin{text-shadow:0 1px 12px rgba(4,11,28,.5)}
      .nav.glass .nav__burger span{box-shadow:0 1px 6px rgba(4,11,28,.5)}

      .curtain-spacer{display:none}

      #fullpage .section{height:100vh;overflow:hidden;position:relative}
      #fullpage .section.fp-curtain{background:transparent}
      #fullpage .section > .sect{height:100%}

      .curtain{
        position:fixed;left:0;top:0;
        width:100%;height:100vh;
        overflow:hidden;color:#fff;perspective:2000px;
        z-index:50;
        will-change:transform;
        background-color:#040b1c;
        box-shadow:0 24px 60px rgba(8,23,79,.35);
      }
      /* Cosmic Pulsium-sphere hero photo (full-bleed, covers the fixed curtain). */
      .curtain__photo{
        position:absolute;inset:0;width:100%;height:100%;
        object-fit:cover;object-position:center 47%;
        pointer-events:none;
        z-index:1;
        filter:saturate(1.04) contrast(1.02);
      }
      /* Dark scrim so the white headline + transparent nav read on the bright
         photo: heavier at top (nav) and bottom (edge), plus a deep central
         radial that sits over the glowing sphere core (dead-centre, right
         under the headline) while the cyan energy streams keep glowing at the
         edges. */
      .curtain__overlay{
        position:absolute;inset:0;z-index:3;pointer-events:none;
        background:
          radial-gradient(78% 60% at 50% 47%,
            rgba(4,11,28,.74) 0%,
            rgba(4,11,28,.52) 38%,
            rgba(4,11,28,.14) 66%,
            rgba(4,11,28,0) 82%),
          linear-gradient(180deg,
            rgba(4,11,28,.82) 0%,
            rgba(4,11,28,.58) 9%,
            rgba(4,11,28,.44) 22%,
            rgba(4,11,28,.36) 44%,
            rgba(4,11,28,.42) 60%,
            rgba(4,11,28,.58) 80%,
            rgba(4,11,28,.85) 100%);
      }

      .curtain__edge{
        position:absolute;left:0;right:0;bottom:-2px;height:18px;
        background:linear-gradient(180deg, rgba(4,11,28,0) 0%, rgba(4,11,28,.6) 100%);
        pointer-events:none;
        z-index:4;
      }

      .hero{
        position:absolute;inset:0;
        display:flex;flex-direction:column;align-items:center;justify-content:center;
        text-align:center;
        padding:104px 24px 72px;
        color:#fff;
        z-index:6;
      }
      .hero .pill{
        display:inline-flex;align-items:center;gap:clamp(4px,0.4vw,6px);
        padding:clamp(4px,0.4vw,6px) clamp(10px,1vw,14px) clamp(4px,0.4vw,6px) clamp(4px,0.4vw,6px);border-radius:100px;
        background:rgba(255,255,255,.01);
        border:1px solid rgba(255,255,255,.15);
        box-shadow:inset 0 0 11.9px rgba(255,255,255,.3);
        position:relative;overflow:hidden;
      }
      .hero .pill::before,
      .hero .pill::after{
        content:'';
        position:absolute;pointer-events:none;
        background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
        height:1px;width:10%;
        filter:blur(0.5px);opacity:0;
      }
      .hero .pill::before{top:0;left:-10%}
      .hero .pill::after{bottom:0;right:-10%}
      .hero .pill.intro-pill-in{
        animation:introBounceIn .55s cubic-bezier(.22,.61,.36,1) forwards;
      }
      .hero .pill .new{
        display:flex;justify-content:center;align-items:center;gap:clamp(6px,0.7vw,10px);
        padding:clamp(4px,0.4vw,6px) clamp(6px,0.55vw,8px);border-radius:100px;background:#2352DE;
        color:rgba(254,254,254,.9);font-size:clamp(8px,0.7vw,10px);letter-spacing:.2em;font-weight:700;
      }
      .hero .pill .label{font-size:clamp(11px,0.95vw,14px);letter-spacing:-0.03em;color:rgba(255,255,255,.8);font-weight:500}
      .hero h1{
        margin:clamp(-30px,-2.8vw,-40px) auto 0;
        text-align:center;
        font-size:clamp(48px,5.8vw,82px);
        letter-spacing:-0.055em;line-height:1.05;font-weight:500;
        color:#fff;
        text-align:center;
        width:fit-content;
        text-shadow:0 2px 30px rgba(4,11,28,.45);
      }
      .hero .tagline,
      .hero p.sub{text-shadow:0 1px 18px rgba(4,11,28,.45)}
      .hero h1 .line{display:block;white-space:nowrap;text-align:center}
      .hero h1 .it{
        font-family:var(--font-serif);font-style:italic;font-weight:400;
        letter-spacing:-0.02em;
      }
      .hero p.sub{
        margin:clamp(-35px,-3.2vw,-47px) auto 0;
        width:min(576px,88vw);max-width:min(576px,88vw);
        color:rgba(255,255,255,.90);
        text-align:center;
        font-family:var(--font-body);
        font-size:clamp(13px,1.2vw,17px);
        font-style:normal;
        font-weight:500;
        line-height:135%;
        letter-spacing:-0.03em;
        color:rgba(255,255,255,.9);
      }
      .hero .ctas{display:flex;gap:clamp(12px,1.4vw,20px);margin-top:clamp(24px,3.4vh,40px);justify-content:center;align-items:center}
      .hero .ctas .btn{
        height:clamp(44px,3.4vw,50px);padding:0 clamp(20px,1.6vw,26px);border-radius:999px;font-size:clamp(14px,1.1vw,16px);font-weight:500;letter-spacing:-0.03em;
        display:inline-flex;align-items:center;justify-content:center;gap:9px;
        color:#fff;
        cursor:pointer;
        transform:scale(0);
        transform-origin:center center;
        will-change:transform;
        transition:background-color .25s ease, box-shadow .25s ease;
      }
      .hero .ctas .btn.primary{
        background:#1A73E8;border:1px solid rgba(255,255,255,.26);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
                   0 3px 10px rgba(26,115,232,.32),0 16px 34px rgba(26,115,232,.26);
      }
      .hero .ctas .btn.primary:hover{background:#1666d0;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 6px 16px rgba(26,115,232,.40),0 20px 40px rgba(26,115,232,.3)}


      main.below{position:relative;z-index:1;background:var(--paper)}

      .sect{
        position:relative;width:100%;
        background:var(--paper);
        overflow:hidden;
      }
      .sect-inner{
        max-width:1264px;margin:0 auto;padding:160px 64px 100px;
        position:relative;
      }
      .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)}

      .s2{padding:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--paper)}
      .s2-inner{
        max-width:1100px;margin:0 auto;width:100%;height:100%;
        padding:clamp(80px,12vh,140px) clamp(24px,5vw,64px) clamp(40px,6vh,80px);
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5vh,56px);
      }
      .s2-head{text-align:center;max-width:780px}
      .s2-head .eyebrow{justify-content:center;margin-bottom:clamp(12px,2vh,20px)}
      .s2-head h2{
        font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1.02;font-weight:500;margin:0;color:var(--ink);
      }
      .s2-head h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      /* Figures sit in badge boxes with the exact same treatment as the
         .cap-card grid ("Everything Your AI Workforce…"): a neutral hairline
         + faint tint at rest, and the shared blue hairline + lift on hover. */
      .s2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);width:100%;max-width:960px;margin:0 auto;text-align:center}
      .s2-stats .stat{
        border:1px solid var(--line);border-radius:16px;background:rgba(14,10,7,.02);
        padding:clamp(22px,2.4vw,30px) clamp(12px,1.4vw,18px);
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.2vh,14px);
        transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
      }
      .s2-stats .stat:hover{border-color:rgba(35,82,222,.3);box-shadow:0 12px 28px rgba(8,23,79,.08);transform:translateY(-3px)}
      .s2-stats .v{font-family:var(--font-body);font-size:clamp(40px,4.4vw,62px);letter-spacing:-0.06em;line-height:1;color:var(--ink)}
      .s2-stats .l{font-size:clamp(9px,.75vw,11px);letter-spacing:.14em;font-weight:700;line-height:1.45;color:var(--ink)}

      .logo-marquee{
        width:100%;max-width:1100px;overflow:hidden;position:relative;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
                mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
      }
      /* Gap rides on each image as margin-right (not flex gap) so the trailing
         gap after the last logo of each set is included — that makes the two
         identical halves repeat seamlessly under translateX(-50%). Flex `gap`
         leaves a half-gap discontinuity that reads as a visible jump on loop. */
      /* The marquee scroll is gated on `.s2-in` (see reveal block) so it only
         runs once the section is in view; it starts immediately on reveal, with
         the logos rising up onto the already-moving band. */
      .logo-track{display:flex;align-items:center;width:max-content}
      .logo-track img{height:clamp(28px,3vw,40px);width:auto;opacity:.9;flex-shrink:0;margin-right:clamp(44px,5.5vw,84px)}
      @keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
      @keyframes logoRise{from{opacity:0;transform:translateY(22px)}to{opacity:.9;transform:translateY(0)}}

      /* S2 reveal */
      .s2 .s2-head .eyebrow{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s2 .s2-head h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s2-in .s2-head h2{opacity:1 !important;filter:none !important;transform:none !important}
      .s2 .s2-head h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s2 .s2-head h2 .ch.sp{width:.28em}
      .s2-in .s2-head .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s2-in .s2-head h2 .ch{animation:introLetterUp .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.1s + var(--i,0)*20ms)}
      .s2 .s2-stats .stat{opacity:0;transform:translateY(20px);will-change:transform,opacity}
      .s2-in .s2-stats .stat:nth-child(1){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .45s forwards}
      .s2-in .s2-stats .stat:nth-child(2){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .57s forwards}
      .s2-in .s2-stats .stat:nth-child(3){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .69s forwards}
      .s2-in .s2-stats .stat:nth-child(4){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .81s forwards}
      /* All logos lift up together (no left-to-right stagger), and the marquee
         is already scrolling as they appear — the entrance reads as the logos
         fading up onto a band that's already in motion. The vertical rise is on
         the imgs and the horizontal scroll is on the track, so they compose
         cleanly; the slow scroll barely drifts during the brief rise. */
      .s2 .logo-track img{opacity:0;transform:translateY(22px);will-change:transform,opacity}
      .s2-in .logo-track img{animation:logoRise .6s cubic-bezier(.22,.61,.36,1) .7s both}
      .s2-in .logo-track{animation:logoScroll 34s linear 0s infinite}
      @keyframes s2FadeUp{
        0%  {opacity:0;transform:translateY(22px)}
        100%{opacity:1;transform:translateY(0)}
      }
      /* Opacity-only entrance for the mobile integration-logo tiles (they pin
         transform:none, so a translate keyframe wouldn't move them anyway). */
      @keyframes ilogoIn{
        0%  {opacity:0}
        100%{opacity:1}
      }
      @keyframes s2BtnPop{
        0%  {opacity:0;transform:scale(0)}
        40% {opacity:1}
        60% {transform:scale(1.2)}
        100%{opacity:1;transform:scale(1)}
      }
      @keyframes s2MeetPop{
        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)}
      }

      .stripes{
        position:relative;width:100%;height:80px;overflow:hidden;
        background:linear-gradient(90deg,#5B36C8 0%, #3D24D3 40%, #2352DE 75%, #18498B 100%);
      }
      .stripes::before{
        content:"";position:absolute;inset:0;
        background:repeating-linear-gradient(90deg,
          rgba(0,0,0,0) 0,
          rgba(0,0,0,0) 12px,
          rgba(0,0,0,.32) 14px,
          rgba(0,0,0,.32) 18px,
          rgba(255,255,255,.18) 19px,
          rgba(255,255,255,.18) 20px,
          rgba(0,0,0,0) 22px,
          rgba(0,0,0,0) 28px
        );
      }

      .s3{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible}
      /* Lift the "how" panel above the next (identically-white) section so the
         cards' floating drop-shadow fades onto it instead of being covered at
         the section seam — that hard cut was the visible "separation line". */
      #fullpage .section[data-anchor="how"]{z-index:1}
      .s3-inner{max-width:1500px;margin:0 auto;padding:clamp(96px,16.8vh,176px) clamp(20px,3vw,40px) 0;position:relative}
      .s3-head{text-align:center;max-width:626px;margin:0 auto clamp(12px,1.8vh,20px);position:relative}
      .s3-head .eyebrow{justify-content:center;margin-bottom:clamp(10px,2.3vh,24px)}
      .s3-head h2{
        font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1;font-weight:500;margin:0 0 clamp(8px,1.5vh,16px);color:var(--ink);text-wrap:pretty;
      }
      .s3-head h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .s3-head p{font-size:clamp(13px,1.05vw,15px);line-height:1.4;letter-spacing:-0.02em;color:rgba(14,10,7,.65);margin:0 auto;max-width:448px}

      .s3 .s3-head h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s3 .s3-head p .sub-line{display:block;opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s3-in .s3-head h2{opacity:1 !important;filter:none !important;transform:none !important;animation:none !important}
      .s3 .s3-head h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s3 .s3-head h2 .ch.sp{width:.28em}
      .s3-in .s3-head h2 .ch{
        animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(.05s + var(--i, 0) * 19ms);
      }
      .s3-in .s3-head p .sub-line.in{animation:introSubLine .35s cubic-bezier(.22,.61,.36,1) forwards}

      .card3{
        opacity:0;
        transform:translateY(60px);
        will-change:transform,opacity;
      }
      @keyframes s3CardUp{
        0%  {opacity:0;transform:translateY(60px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .s3-cards-in .card3.a{animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) 0s forwards}
      .s3-cards-in .card3.b{animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) .25s forwards}
      @keyframes s3CardUpPop{
        0%  {opacity:0;transform:translateY(60px) scale(.95)}
        70% {opacity:1;transform:translateY(0) scale(1.1)}
        100%{opacity:1;transform:translateY(0) scale(1)}
      }
      .s3-cards-in .card3.c{animation:s3CardUpPop 1s cubic-bezier(.22,.61,.36,1) .5s forwards}

      .s3 .card3.a .conn{
        opacity:0;transform:scale(0);border-radius:50%;
        will-change:transform,opacity,border-radius;
      }

      .s3 .card3.a .stamp,
      .s3 .card3.b .stamp{
        opacity:0;transform:translateY(20px);
        will-change:transform,opacity;
      }

      .s3 #insightCard{
        opacity:0;transform:scale(0);border-radius:50%;
        will-change:transform,opacity,border-radius;
      }

      .s3 .card3.b .saving{
        opacity:0;transform:translateY(20px);
        will-change:transform,opacity;
      }
      @keyframes s3ConnReveal{
        0%  {opacity:0;transform:scale(0);border-radius:50%}
        40% {opacity:1}
        65% {opacity:1;transform:scale(1.1);border-radius:24px}
        85% {opacity:1;transform:scale(0.9);border-radius:24px}
        100%{opacity:1;transform:scale(1);border-radius:24px}
      }
      @keyframes s3StampUp{
        0%  {opacity:0;transform:translateY(20px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes s3SavingUp{
        0%  {opacity:0;transform:translateY(20px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .conn.s3-reveal{animation:s3ConnReveal .8s cubic-bezier(.22,.61,.36,1) forwards}
      .stamp.s3-reveal{animation:s3StampUp .5s cubic-bezier(.22,.61,.36,1) forwards}
      #insightCard.s3-reveal{animation:s3ConnReveal .85s cubic-bezier(.22,.61,.36,1) forwards}
      .saving.s3-reveal{animation:s3SavingUp .5s cubic-bezier(.22,.61,.36,1) forwards}

      .s3 .card3.c .runway{
        opacity:0;transform:scale(0);border-radius:50%;
        transform-origin:center center;
        will-change:transform,opacity,border-radius;
      }
      .s3 .card3.c .runway.s3-reveal{animation:s3ConnReveal .85s cubic-bezier(.22,.61,.36,1) forwards}

      .s3 .card3.c .stamp{
        opacity:0;transform:translateY(20px);
        will-change:transform,opacity;
      }

      .s3 .chart .badge{opacity:0;transform:translateX(-50%)}
      .s3 .chart-dot{
        position:absolute;
        width:10px;height:10px;
        border-radius:50%;
        background:#fff;
        box-shadow:0 0 6px rgba(255,255,255,.5);
        opacity:0;
        z-index:2;
        transform:translate(-50%,-50%);
        pointer-events:none;
      }

      .cards3{
        display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(10px,1.5vh,16px);
        zoom:1;position:relative;z-index:0;
      }
      .cards3::before{
        content:'';position:absolute;inset:-6% -7% -4%;z-index:0;pointer-events:none;
        background:
          radial-gradient(46% 44% at 20% 52%, rgba(35,82,222,.38), transparent 70%),
          radial-gradient(48% 46% at 82% 50%, rgba(134,105,185,.40), transparent 70%),
          radial-gradient(60% 40% at 50% 60%, rgba(51,114,217,.22), transparent 72%);
        filter:blur(64px);
        -webkit-mask:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
                mask:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
      }
      .card3{
        position:relative;z-index:1;height:552px;border-radius:28px;overflow:hidden;color:var(--ink);
        display:flex;flex-direction:column;justify-content:flex-start;
        padding:44px 40px;
        background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 30%),linear-gradient(158deg, rgba(255,255,255,.58), rgba(228,238,255,.5));
        border:1px solid rgba(255,255,255,.92);
        box-shadow:0 54px 100px -44px rgba(8,23,79,.50),0 26px 54px -30px rgba(8,23,79,.30),0 4px 10px -4px rgba(14,10,7,.10),inset 0 1.5px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(35,82,222,.05),inset 0 -40px 70px -50px rgba(35,82,222,.06);
        -webkit-backdrop-filter:blur(34px) saturate(1.6);
        backdrop-filter:blur(34px) saturate(1.6);
      }
      /* Step caption sits at the TOP of the card (see .step-cap below); the
         illustration centres in the space beneath it so all three stage labels
         line up across the row. */
      .card3 > :not(.step-cap){margin-block:auto}
      .card3.a{background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 30%),linear-gradient(158deg, rgba(255,255,255,.58), rgba(226,237,255,.5))}
      .card3.b{background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 30%),linear-gradient(158deg, rgba(255,255,255,.58), rgba(240,235,255,.54))}
      .card3.c{background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 30%),linear-gradient(158deg, rgba(255,255,255,.58), rgba(226,237,255,.5))}

      .conn-list{display:flex;flex-direction:column;gap:10px}
      .conn{
        border-radius:24px;background:rgba(97,147,221,0.2);
        height:88px;padding:10px 20px 10px 10px;
        display:flex;align-items:center;gap:16px;
        position:relative;
        isolation:isolate;
      }
      .conn .badge{
        width:68px;height:68px;border-radius:16px;flex-shrink:0;
        display:grid;place-items:center;overflow:hidden;
      }
      .conn .meta{flex:1;min-width:0}
      .conn .kicker{font-size:13px;letter-spacing:-0.02em;color:rgba(255,255,255,.85);margin-bottom:4px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .conn .name{font-size:20px;letter-spacing:-0.04em;font-weight:500;line-height:1.1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .conn .live-pill{font-size:11px;letter-spacing:.1em;font-weight:700;padding:6px 8px;border-radius:100px;background:rgb(35,82,222);color:rgba(254,254,254,.95);white-space:nowrap;flex-shrink:0}

      .insight-card{
        border-radius:24px;background:rgba(97,147,221,.2);
        padding:12px;display:flex;flex-direction:column;gap:12px;
        flex:0 0 378px;
        position:relative;
        isolation:isolate;
      }

      .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}

      .conn .bb-beam{opacity:.5}
      .conn-list .conn:nth-child(1) .bb-beam-1{animation-delay:-0.5s}
      .conn-list .conn:nth-child(1) .bb-beam-2{animation-delay:-3.5s}
      .conn-list .conn:nth-child(2) .bb-beam-1{animation-delay:-2.5s}
      .conn-list .conn:nth-child(2) .bb-beam-2{animation-delay:-5.5s}
      .conn-list .conn:nth-child(3) .bb-beam-1{animation-delay:-4.5s}
      .conn-list .conn:nth-child(3) .bb-beam-2{animation-delay:-1.5s}
      :where(.insight-card, .conn, .runway, .nav, .nav .cta, .hero .ctas .btn, .hero .pill) > *:not(.bb-wrap){position:relative;z-index:1}

      .nav .cta       { --bb-radius: 999px; --bb-size: 60px;  --bb-ring: 1px; isolation:isolate; }
      .hero .ctas .btn{ --bb-radius: 999px; --bb-size: 80px;  --bb-ring: 1px; isolation:isolate; position:relative; overflow:hidden; }
      .hero .pill     { --bb-radius: 100px; --bb-size: 80px;  --bb-ring: 1px; isolation:isolate; }
      .insight-card   { --bb-size: 300px; }
      .runway         { --bb-size: 300px; }
      .conn           { --bb-size: 200px; }
      @keyframes bb-travel{
        to{offset-distance:100%}
      }
      .insight-head{display:flex;align-items:center;gap:10px}
      .insight-head .ic{width:42px;height:42px;border-radius:10px;background:#fff;display:grid;place-items:center;color:#2352DE}
      .insight-head .ic svg{width:24px;height:24px}
      .insight-head .k{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.75)}
      .insight-head .t{font-size:17px;letter-spacing:-0.04em;font-weight:500;color:#fff;margin-top:4px}
      .insight-msg{font-size:24px;letter-spacing:-0.05em;line-height:1.1;font-weight:500;color:rgba(255,255,255,.95);text-wrap:pretty;padding:6px 4px 0}
      .anomaly{
        align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
        padding:6px 14px 6px 6px;border-radius:100px;background:#E62A2A;color:#fff;
      }
      .anomaly i{width:22px;height:22px;border-radius:50%;background:#fff;color:#E62A2A;display:grid;place-items:center}
      .anomaly i svg{width:12px;height:12px}
      .anomaly span{font-size:14px;letter-spacing:-0.03em;font-weight:500}
      .anomaly.ok{background:#0F8A5F}
      .anomaly.ok i{color:#0F8A5F}
      .saving{
        border-radius:24px;background:rgba(255,255,255,.2);
        padding:14px;
      }
      .saving .lbl{font-size:14px;color:rgba(255,255,255,.85);letter-spacing:-0.02em;font-weight:500}
      .saving .v{font-family:var(--font-body);font-size:32px;letter-spacing:-0.06em;color:#fff;line-height:1;margin-top:6px}
      .saving .v em{font-family:var(--font-body);font-style:normal;font-weight:500;color:#fff}

      .runway{
        border-radius:24px;background:rgba(97,147,221,.2);
        padding:12px;display:flex;flex-direction:column;gap:12px;
        flex:0 0 378px;
        position:relative;
        isolation:isolate;
      }
      .runway-head{display:flex;align-items:center;gap:10px}
      .runway-head .ic{width:42px;height:42px;border-radius:10px;background:#fff;display:grid;place-items:center}
      .runway-head .ic svg{width:24px;height:24px;color:#2352DE}
      .chart{position:relative;height:148px;margin:6px 0 0}
      .chart svg{width:100%;height:100%;display:block}
      .chart .badge{
        position:absolute;left:30%;top:0;background:#fff;color:rgba(14,10,7,.75);
        border-radius:32px;padding:6px 12px;font-size:9px;font-weight:700;letter-spacing:.06em;
        box-shadow:0 4px 12px rgba(0,0,0,.18);
        white-space:nowrap;
      }
      .chart .badge::after{
        display:none;
      }
      .chart .axis{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.75);margin-top:6px}
      .runway-foot{border-radius:24px;background:rgba(35,82,222,.07);border:1px solid rgba(35,82,222,.10);padding:14px}
      .runway-foot .v{font-size:28px;letter-spacing:-0.05em;font-weight:500;color:var(--ink)}
      .runway-foot .d{font-size:14px;letter-spacing:-0.02em;color:var(--muted-2);margin-top:4px}

      /* ---------- S3 step cards: frosted-glass light theme ---------- */
      .s3 .bb-wrap{display:none}
      .s3 .conn{background:rgba(255,255,255,.66);border:1px solid rgba(35,82,222,.12);box-shadow:0 14px 30px -22px rgba(8,23,79,.34),inset 0 1px 0 rgba(255,255,255,.85)}
      .s3 .conn .kicker{color:var(--muted-2)}
      .s3 .conn .name{color:var(--ink)}
      .s3 .conn .live-pill{background:rgba(35,82,222,.10);color:#185FA5}
      .s3 .insight-card{background:rgba(255,255,255,.66);border:1px solid rgba(35,82,222,.12);box-shadow:0 14px 30px -22px rgba(8,23,79,.34),inset 0 1px 0 rgba(255,255,255,.85)}
      .s3 .insight-head .ic{background:rgba(35,82,222,.12)}
      .s3 .insight-head .k{color:var(--muted)}
      .s3 .insight-head .t{color:var(--ink)}
      .s3 .insight-msg{color:var(--ink)}
      .s3 .anomaly.ok{background:rgba(15,138,95,.12)}
      .s3 .anomaly.ok span{color:#0F6E56}
      .s3 .anomaly.ok i{background:#0F8A5F;color:#fff}
      .s3 .saving{background:rgba(35,82,222,.07);border:1px solid rgba(35,82,222,.10)}
      .s3 .saving .lbl{color:var(--muted)}
      .s3 .saving .v{color:#2352DE;font-weight:500}
      .s3 .saving .v em{color:#2352DE}
      .s3 .runway{background:rgba(255,255,255,.66);border:1px solid rgba(35,82,222,.12);box-shadow:0 14px 30px -22px rgba(8,23,79,.34),inset 0 1px 0 rgba(255,255,255,.85)}
      .s3 .runway-head .ic{background:rgba(35,82,222,.12)}
      .s3 .chart .badge{color:#185FA5}
      .s3 .chart .axis{color:var(--muted)}
      .s3 .chart-dot{background:#2352DE;box-shadow:0 0 0 4px rgba(35,82,222,.18)}

      /* ---------- S3 "live" loops: keeps the section feeling alive ---------- */
      /* "Knowledge growing daily" badge — blink + gentle float (always loops). */
      .s3 .chart .badge.live{animation:badgeLive 2.8s ease-in-out infinite}
      @keyframes badgeLive{
        0%  {transform:translateX(-50%) translateY(0);   opacity:1;  box-shadow:0 4px 12px rgba(0,0,0,.16)}
        25% {opacity:.58}
        50% {transform:translateX(-50%) translateY(-5px); opacity:1;  box-shadow:0 12px 26px rgba(35,82,222,.32)}
        75% {opacity:.72}
        100%{transform:translateX(-50%) translateY(0);   opacity:1;  box-shadow:0 4px 12px rgba(0,0,0,.16)}
      }
      /* Chart end-dot — soft core pulse + expanding "data arriving" ping ring. */
      .s3 .chart-dot.live{animation:dotCore 2.4s ease-in-out infinite}
      @keyframes dotCore{
        0%,100%{transform:translate(-50%,-50%) scale(1)}
        50%    {transform:translate(-50%,-50%) scale(1.22)}
      }
      .s3 .chart-dot.live::after{
        content:'';position:absolute;inset:0;border-radius:50%;
        box-shadow:0 0 0 2px rgba(35,82,222,.5);
        animation:dotPing 2.4s ease-out infinite;
      }
      @keyframes dotPing{
        0%      {transform:scale(1);   opacity:.7}
        70%,100%{transform:scale(3.4); opacity:0}
      }
      /* Status pills (Ready / Learning / Live) — soft staggered glow. */
      .s3 .conn:nth-child(1) .live-pill{animation:pillGlow 2.6s ease-in-out 0s   infinite}
      .s3 .conn:nth-child(2) .live-pill{animation:pillGlow 2.6s ease-in-out .55s infinite}
      .s3 .conn:nth-child(3) .live-pill{animation:pillGlow 2.6s ease-in-out 1.1s infinite}
      @keyframes pillGlow{
        0%,100%{box-shadow:0 0 0 0 rgba(35,82,222,0);   background:rgba(35,82,222,.10)}
        50%    {box-shadow:0 0 0 4px rgba(35,82,222,.10);background:rgba(35,82,222,.17)}
      }
      /* "Booking intent detected" chip — gentle breathing glow + ticking dot. */
      .s3 .anomaly.ok{animation:okBreath 3s ease-in-out infinite}
      @keyframes okBreath{
        0%,100%{box-shadow:0 0 0 0 rgba(15,138,95,0)}
        50%    {box-shadow:0 0 0 5px rgba(15,138,95,.12)}
      }
      .s3 .anomaly.ok i{animation:okTick 3s ease-in-out infinite}
      @keyframes okTick{
        0%,100%{transform:scale(1)}
        50%    {transform:scale(1.14)}
      }
      @media (prefers-reduced-motion: reduce){
        .s3 .chart .badge.live,
        .s3 .chart-dot.live,
        .s3 .chart-dot.live::after,
        .s3 .conn .live-pill,
        .s3 .anomaly.ok,
        .s3 .anomaly.ok i{animation:none !important}
      }

      .s4 .s4-bottom .eyebrow{opacity:0;transform:translateY(20px);will-change:opacity,transform}
      .s4 .s4-bottom h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s4 .s4-bottom h2 .ch.sp{width:.28em}

      .s4{position:relative;background:var(--paper);overflow:hidden;min-height:100vh}
      .s4-inner{max-width:1440px;margin:0 auto;padding:clamp(90px,13vh,140px) clamp(24px,3vw,40px) clamp(36px,5.5vh,80px);position:relative;height:100%;min-height:min(980px,calc(100vh - 10px))}
      .orbit{
        position:relative;
        width:min(620px, 80vw, calc(100vh - 300px));
        aspect-ratio:1/1;height:auto;margin:clamp(8px,2vh,24px) auto 0;
        --logo: clamp(60px, min(12.5vw, calc((100vh - 300px) * 0.185), 116px), 116px);
      }
      .orbit-ring{position:absolute;inset:0}
      .ilogo{
        position:absolute;top:50%;left:50%;
        width:var(--logo);height:var(--logo);
        margin:calc(var(--logo) / -2) 0 0 calc(var(--logo) / -2);
        display:grid;place-items:center;
        transform-origin:50% 50%;will-change:transform;
      }
      .ilogo img{
        max-width:82%;max-height:82%;width:auto;height:auto;object-fit:contain;
        filter:drop-shadow(0 10px 22px rgba(14,10,7,.12));
      }
      .orbit-core{
        position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
        display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1vw,12px);
        z-index:3;pointer-events:none;
      }
      .orbit-orb{width:clamp(92px,13vw,150px);aspect-ratio:1;display:grid;place-items:center}
      .orbit-orb img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 44px rgba(8,23,79,.28))}
      .orbit-cap{font-size:clamp(8px,0.7vw,10px);letter-spacing:.1em;font-weight:700;color:rgba(14,10,7,.42)}

      .s4-bottom{
        position:absolute;left:clamp(24px,3vw,40px);bottom:clamp(28px,5vh,60px);max-width:587px;
      }
      .s4-bottom .eyebrow{margin-bottom:clamp(14px,1.8vw,24px)}
      .s4-bottom h2{
        font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.05em;line-height:1;font-weight:500;margin:0;color:var(--ink);text-wrap:pretty;
      }
      .s4-bottom h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}

      /* Integrations (desktop ≥901px): two columns — heading on the left,
         vertically centered; the Pulsium orb + orbiting logos on the right.
         (Below 901px the mobile block stacks the heading over a logo grid.)
         Uses `.s4 .x` specificity so it beats the bare-class section-spacing
         overrides further down regardless of source order. */
      @media (min-width:901px){
        .s4 .s4-inner{
          display:flex;flex-direction:row;align-items:center;justify-content:center;
          gap:clamp(32px,5vw,90px);min-height:0;height:auto;
        }
        .s4 .s4-bottom{
          position:static;left:auto;bottom:auto;
          flex:1 1 0;max-width:560px;margin:0;text-align:left;
        }
        .s4 .orbit{
          flex:0 0 auto;margin:0;
          width:min(520px,42vw,calc(100vh - 300px));
        }
      }

      footer{
        background:var(--ink);color:#fff;padding:80px 40px 32px;
        position:relative;overflow:hidden;
      }
      footer .inner{max-width:1264px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:60px}
      footer h3{font-size:clamp(28px,2.8vw,42px);letter-spacing:-0.05em;font-weight:500;line-height:1.05;margin:0;max-width:560px}
      footer h3 .it{font-family:var(--font-serif);font-style:italic;font-weight:400}
      footer .columns{display:grid;grid-template-columns:repeat(3,minmax(120px,auto));gap:48px}
      footer .columns h6{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.4);margin:0 0 16px}
      footer .columns a{display:block;padding:6px 0;color:rgba(255,255,255,.8);font-size:14px;letter-spacing:-0.02em}
      footer .bottom{
        margin-top:80px;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);
      }

      #nav{opacity:0;transform:translateX(-50%) translateY(-14px)}
      .hero .pill{opacity:0}
      .hero h1{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .hero p.sub{opacity:1}
      .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)}

      /* Nav enters as one cohesive unit — the whole bar fades + eases down together. */
      .intro-nav-in{animation:introNavDrop .6s cubic-bezier(.22,.61,.36,1) forwards}
      .intro-pill-in{animation:introBounceIn .55s cubic-bezier(.22,.61,.36,1) forwards}

      .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}
      /* Per-word wrapper emitted by splitChars(): each word's letter
         inline-blocks stay on one line (so the per-letter reveal transform/
         blur applies at EVERY width), while lines break only at the real
         spaces between words. This is what lets the desktop heading animation
         run identically on phones — atomic per-letter inline-blocks alone
         would break words mid-line on narrow screens. */
      .word{display:inline-block;white-space:nowrap}
      /* Reduced-motion: show every split heading instantly — no per-letter
         stagger, blur or transform. Scoped to headings + their .ch/.word
         (which only exist inside split headings), so the section fade-ins are
         untouched and no content is ever left hidden. */
      @media (prefers-reduced-motion: reduce){
        .hero h1,
        .s2 .s2-head h2, .s3 .s3-head h2, .s4 .s4-bottom h2,
        .s5 .s5-head h2, .s6 .s3-head h2, .s7 .s7-cta h2,
        .s-cap .cap-head h2, .s-aicap .cap-head h2, .s-cta h2, .s-sec .sec-head h2,
        .ch, .word{
          opacity:1 !important;filter:none !important;transform:none !important;animation:none !important;
        }
        /* Mobile logo tiles start hidden for their staggered fade — keep them
           visible (and motionless) when motion is reduced. */
        .s4 .ilogo{opacity:1 !important;animation:none !important}
      }
      .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)}
      }

      @keyframes introNavDrop{
        0%  {opacity:0;transform:translateX(-50%) translateY(-14px)}
        100%{opacity:1;transform:translateX(-50%) translateY(0)}
      }

      #nav.intro-done{opacity:1;transform:translateX(-50%) translateY(0)}

      .hero h1{font-size:clamp(40px,4.3vw,72px)}
      .hero p.sub{width:min(576px,88vw);max-width:min(576px,88vw)}

      /* ---------- S5: AI agents ---------- */
      .s5{position:relative;background:var(--paper);overflow:hidden;height:100%;display:flex}
      .s5-inner{width:100%;max-width:1264px;margin:auto;padding:clamp(60px,8vh,100px) clamp(24px,3vw,40px) clamp(20px,3vh,40px);position:relative}
      .s5-head{max-width:680px;margin:0 auto clamp(14px,2.2vh,28px);text-align:center}
      .s5-head .eyebrow{margin-bottom:14px}
      .s5-head h2{
        font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1;font-weight:500;
        margin:0;color:var(--ink);text-wrap:pretty;
      }
      .s5-head h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .s5-head p{font-size:clamp(13px,1.05vw,15px);line-height:1.4;letter-spacing:-0.02em;color:rgba(14,10,7,.65);margin:0 auto;max-width:520px}
      /* Second heading line beneath "Inside the Pulsium Platform" — styled
         identically to the italic accent (.it) lines in every other section:
         same heading font size, ink colour and Instrument Serif italic. */
      .s5-head .s5-sub{
        margin:0 auto clamp(14px,2.2vh,20px);
        font-family:var(--font-serif);font-style:italic;font-weight:400;
        font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.02em;line-height:1;
        color:var(--ink);text-wrap:balance;max-width:680px;
      }
      .agents-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
      .agent-card{
        background:transparent;
        padding:14px 12px 13px;text-align:center;
      }
      .agent-card .av{width:58px;height:58px;border-radius:50%;margin:0 auto 9px;object-fit:cover}
      .agent-card .nm{font-size:16px;font-weight:500;letter-spacing:-0.04em;color:var(--ink)}
      .agent-card .rl{margin-top:6px;font-size:8.5px;letter-spacing:.1em;font-weight:700;color:var(--muted)}
      .s5-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,3vw,48px);margin-top:clamp(14px,2.2vh,26px);align-items:start}
      .brain-card{
        position:relative;isolation:isolate;border-radius:24px;
        background:#1A73E8;
        color:#fff;padding:20px 24px;
        --bb-radius:24px;--bb-size:240px;--bb-ring:1px;
        box-shadow:0 24px 60px rgba(8,23,79,.25);
      }
      .brain-card .k{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.65)}
      .brain-card .t{margin-top:12px;font-size:clamp(16px,1.4vw,20px);letter-spacing:-0.04em;line-height:1.25;font-weight:500;color:rgba(255,255,255,.95)}
      .ph-stamp{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--muted);margin-bottom:10px}
      .ph-bubble{
        background:rgba(35,82,222,.05);border:1px solid rgba(35,82,222,.16);
        border-radius:16px 16px 16px 4px;padding:10px 14px;
        font-size:13px;letter-spacing:-0.02em;line-height:1.3;color:rgba(14,10,7,.8);
        margin-bottom:8px;max-width:480px;
      }
      :where(.brain-card, .price-card.featured, .btn-final) > *:not(.bb-wrap){position:relative;z-index:1}

      /* S5 reveal states. The heading reads strictly top-to-bottom: the
         headline builds letter-by-letter, then the italic .s5-sub continues the
         same cascade (its per-letter delays are set inline by triggerAgents).
         `--cascade` is the moment that italic line settles — the paragraph,
         agent cards and Brain/Phoebe feed all reveal off it (fallback 1.7s). */
      .s5 .s5-head .eyebrow,
      .s5 .s5-head p{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s5 .s5-head h2,
      .s5 .s5-head .s5-sub{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s5.s5-in .s5-head h2,
      .s5.s5-in .s5-head .s5-sub{opacity:1 !important;filter:none !important;transform:none !important}
      .s5 .s5-head h2 .ch,
      .s5 .s5-head .s5-sub .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s5 .s5-head h2 .ch.sp,
      .s5 .s5-head .s5-sub .ch.sp{width:.28em}
      .s5.s5-in .s5-head h2 .ch{
        animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(.1s + var(--i, 0) * 19ms);
      }
      .s5.s5-in .s5-head .s5-sub .ch{animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both}
      .s5.s5-in .s5-head .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s5.s5-in .s5-head p{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) var(--cascade,1.7s) forwards}
      .s5 .agent-card{opacity:0;transform:translateY(22px);will-change:transform,opacity}
      .s5.s5-in .agent-card{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) forwards}
      .s5.s5-in .agent-card:nth-child(1){animation-delay:calc(var(--cascade,1.7s) + .2s)}
      .s5.s5-in .agent-card:nth-child(2){animation-delay:calc(var(--cascade,1.7s) + .28s)}
      .s5.s5-in .agent-card:nth-child(3){animation-delay:calc(var(--cascade,1.7s) + .36s)}
      .s5.s5-in .agent-card:nth-child(4){animation-delay:calc(var(--cascade,1.7s) + .44s)}
      .s5.s5-in .agent-card:nth-child(5){animation-delay:calc(var(--cascade,1.7s) + .52s)}
      .s5.s5-in .agent-card:nth-child(6){animation-delay:calc(var(--cascade,1.7s) + .6s)}
      /* Bottom row (Brain / AI Voices / Phoebe) appears together once the agent
         cards have landed, then the Phoebe feed fills in. The .ph-bubble entrance
         delays live in the s5-bottom block further down (nth-of-type 3/4/5 — the
         stamp + intro are also <div>s, so the bubbles start at position 3). */
      .s5 .brain-card{opacity:0;transform:translateY(22px);will-change:transform,opacity}
      .s5.s5-in .brain-card{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + .7s) forwards}
      .s5 .ph-stamp,
      .s5 .ph-bubble{opacity:0;transform:translateY(14px);will-change:transform,opacity}
      .s5.s5-in .ph-stamp{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + .7s) forwards}
      /* Live-feed handoff: once the bubbles have landed, JS adds .ph-live and
         perpetually reorders them (FLIP). This drops the entrance animation's
         forwards-fill so the inline transforms aren't overridden, and pins the
         settled visual state so there's no jump at handoff. */
      .s5.s5-in .phoebe-stack.ph-live .ph-bubble{animation:none;opacity:1;transform:none;will-change:transform,opacity}
      /* One-shot fade applied to the recycled lead bubble so it's invisible while
         it travels past the others to the bottom of the feed. */
      @keyframes phRecycle{0%,100%{opacity:1}30%,70%{opacity:0}}

      /* ---------- S6: pricing ---------- */
      .s6{position:relative;background:var(--paper);overflow:hidden;height:100%;display:flex}
      .s6-inner{width:100%;max-width:1180px;margin:auto;padding:clamp(70px,9vh,110px) clamp(24px,3vw,40px) clamp(20px,3vh,40px);position:relative}
      .s6-inner .s3-head{margin-bottom:clamp(18px,3vh,32px)}
      .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
      .price-card{
        position:relative;isolation:isolate;border:1px solid var(--line);border-radius:24px;background:#fff;
        padding:26px 24px;display:flex;flex-direction:column;
      }
      .price-card .tier{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--muted)}
      .price-card .amount{font-family:var(--font-mono);font-size:clamp(30px,2.8vw,40px);letter-spacing:-0.06em;margin-top:12px;line-height:1;color:var(--ink)}
      .price-card .amount .per{font-family:var(--font-sans);font-size:14px;letter-spacing:-0.02em;color:var(--muted)}
      .price-card .amount .talk{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .price-card .tag{margin-top:10px;font-size:13px;line-height:1.35;letter-spacing:-0.02em;color:rgba(14,10,7,.55);min-height:35px}
      .price-card .feats{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;flex:1}
      .price-card .feats li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;letter-spacing:-0.02em;color:rgba(14,10,7,.75)}
      .price-card .ck{width:13px;height:13px;flex-shrink:0;margin-top:2px;color:#2352DE}
      .price-cta{
        margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:999px;
        background:#1A73E8;border:1px solid rgba(255,255,255,.18);color:#fff;
        font-size:14px;font-weight:500;letter-spacing:-0.03em;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 8px rgba(26,115,232,.24),0 10px 22px rgba(26,115,232,.18);
        transition:background .25s ease, box-shadow .25s ease;
      }
      .price-cta:hover{background:#1666d0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(26,115,232,.3),0 14px 28px rgba(26,115,232,.22)}
      .price-card.featured{
        background:#072049;border-color:rgba(255,255,255,.12);
        box-shadow:0 24px 60px rgba(8,23,79,.28);
        --bb-radius:24px;--bb-size:220px;--bb-ring:1px;
      }
      .price-card.featured .tier{color:rgba(255,255,255,.6)}
      .price-card.featured .amount{color:#fff}
      .price-card.featured .amount .per{color:rgba(255,255,255,.6)}
      .price-card.featured .tag{color:rgba(255,255,255,.75)}
      .price-card.featured .feats{border-top-color:rgba(255,255,255,.12)}
      .price-card.featured .feats li{color:rgba(255,255,255,.88)}
      .price-card.featured .ck{color:#8CB4EB}
      .price-card.featured .price-cta{border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 16px rgba(26,115,232,.5)}
      .price-card.featured .price-cta:hover{background:#2b7df0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 20px rgba(26,115,232,.6)}
      .pop-badge{
        position:absolute;top:20px;right:20px;font-size:10px;letter-spacing:.1em;font-weight:700;
        padding:6px 10px;border-radius:100px;background:#2352DE;color:rgba(254,254,254,.95);z-index:2;
      }
      .s6-stamp{text-align:center;margin-top:clamp(14px,2.5vh,24px);font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(14,10,7,.35)}

      /* S6 reveal states */
      .s6 .s3-head .eyebrow,
      .s6 .s3-head p{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s6 .s3-head h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s6.s6-in .s3-head h2{opacity:1 !important;filter:none !important;transform:none !important}
      .s6 .s3-head h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s6 .s3-head h2 .ch.sp{width:.28em}
      .s6.s6-in .s3-head h2 .ch{
        animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(.1s + var(--i, 0) * 19ms);
      }
      .s6.s6-in .s3-head .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s6.s6-in .s3-head p{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .3s forwards}
      .s6 .price-card{opacity:0;transform:translateY(60px);will-change:transform,opacity}
      .s6.s6-in .price-card:nth-child(1){animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) .35s forwards}
      .s6.s6-in .price-card:nth-child(2){animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) .5s forwards}
      .s6.s6-in .price-card:nth-child(3){animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) .65s forwards}
      .s6 .s6-stamp{opacity:0;transform:translateY(14px);will-change:transform,opacity}
      .s6.s6-in .s6-stamp{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) 1.25s forwards}

      /* ---------- S7: security + CTA + footer ---------- */
      .s7{position:relative;background:var(--paper);overflow:hidden;height:100%;display:flex;flex-direction:column}
      .s7-main{
        flex:1;width:100%;max-width:1264px;margin:0 auto;
        padding:clamp(64px,9vh,100px) clamp(24px,3vw,40px) 0;
        display:flex;flex-direction:column;justify-content:center;
      }
      .sec-head{text-align:center;margin-bottom:clamp(16px,2.5vh,28px)}
      .sec-head .eyebrow{justify-content:center;margin-bottom:14px}
      .sec-head h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.05em;line-height:1.1;font-weight:500;margin:0;color:var(--ink)}
      .sec-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
      .sec-badge{border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
      .sec-badge.blue{background:rgba(37,91,243,.02);border:1px solid rgba(37,91,243,.2);box-shadow:inset 0 0 11.2px 5px rgba(37,91,243,.04)}
      .sec-badge.violet{background:rgba(134,105,185,.02);border:1px solid rgba(134,105,185,.2);box-shadow:inset 0 0 11.2px 5px rgba(134,105,185,.04)}
      .sec-badge svg{width:18px;height:18px;fill:none;stroke-width:1.6}
      .sec-badge.blue svg{stroke:#2552DE}
      .sec-badge.violet svg{stroke:#8669B9}
      .sec-badge .t{font-size:14px;font-weight:500;letter-spacing:-0.03em;color:var(--ink)}
      .sec-badge .d{font-size:11px;letter-spacing:-0.01em;line-height:1.3;color:var(--muted)}
      .s7-cta{text-align:center;margin-top:clamp(24px,4.5vh,48px)}
      .s7-cta h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1;font-weight:500;margin:0;color:var(--ink)}
      .s7-cta h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .s7-cta p{font-size:14px;letter-spacing:-0.02em;color:rgba(14,10,7,.6);margin:14px auto 0;max-width:440px}
      .btn-final{
        position:relative;overflow:hidden;isolation:isolate;
        display:inline-flex;align-items:center;justify-content:center;gap:9px;
        margin-top:20px;height:50px;padding:0 28px;border-radius:999px;
        background:#1A73E8;border:1px solid rgba(255,255,255,.26);color:#fff;
        font-size:15px;font-weight:500;letter-spacing:-0.03em;
        --bb-radius:999px;--bb-size:90px;--bb-ring:1px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
                   0 3px 10px rgba(26,115,232,.30),0 16px 34px rgba(26,115,232,.24);
        transition:background-color .25s ease, box-shadow .25s ease;
      }
      .btn-final:hover{background:#1666d0;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 6px 16px rgba(26,115,232,.4),0 20px 40px rgba(26,115,232,.28)}
      .s7 footer{padding:40px 40px 22px}
      .s7 footer .bottom{margin-top:28px;padding-top:16px}
      .s7 footer h3{font-size:clamp(22px,2.1vw,32px)}
      .s7 footer .columns{gap:40px}
      .s7 footer .columns a{padding:4px 0;font-size:13px}
      .s7 footer .columns a:hover{color:#fff}

      /* S7 reveal states */
      .s7 .sec-head .eyebrow,
      .s7 .sec-head h2{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s7.s7-in .sec-head .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s7.s7-in .sec-head h2{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .15s forwards}
      .s7 .sec-badge{opacity:0;transform:translateY(22px);will-change:transform,opacity}
      .s7.s7-in .sec-badge:nth-child(1){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .3s forwards}
      .s7.s7-in .sec-badge:nth-child(2){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .4s forwards}
      .s7.s7-in .sec-badge:nth-child(3){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .5s forwards}
      .s7.s7-in .sec-badge:nth-child(4){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .6s forwards}
      .s7 .s7-cta h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s7.s7-in .s7-cta h2{opacity:1 !important;filter:none !important;transform:none !important}
      .s7 .s7-cta h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s7 .s7-cta h2 .ch.sp{width:.28em}
      .s7.s7-in .s7-cta h2 .ch{
        animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(.55s + var(--i, 0) * 16ms);
      }
      .s7 .s7-cta p{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s7.s7-in .s7-cta p{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) 1.15s forwards}
      .s7 .btn-final{transform:scale(0);transform-origin:center center;opacity:0}
      .s7.s7-in .btn-final{animation:s2MeetPop 1.1s cubic-bezier(.22,.61,.36,1) 1.35s forwards}
      .s7 footer{opacity:0;transform:translateY(26px);will-change:transform,opacity}
      .s7.s7-in footer{animation:s2FadeUp .8s cubic-bezier(.22,.61,.36,1) .9s forwards}

      .nav__burger{display:none}
      .nav__drawer{display:none}

      @media (max-width:1200px){
        .s2-inner{padding:clamp(40px,6vh,80px) clamp(24px,4vw,48px) clamp(30px,4vh,60px)}
        .s4-bottom{position:static;margin-top:40px}
        .filter-list{display:none}
      }

      /* Width and height ladders set independent vars so the effective zoom
         is min() of both — a single zoom property per rule would let the
         later height ladder silently override the width one. */
      .cards3{ --zw: 1; --zh: 1; zoom: min(var(--zw), var(--zh)) }
      @media (max-width: 1400px) and (min-width: 901px) { .cards3{ --zw: 0.92 } }
      @media (max-width: 1200px) and (min-width: 901px) { .cards3{ --zw: 0.82 } }
      @media (max-width: 1100px) and (min-width: 901px) { .cards3{ --zw: 0.76 } }

      @media (max-height: 800px) and (min-width: 901px) {
        .s3-inner{ padding-top: clamp(90px, 12.5vh, 100px) }
      }

      /* Short desktop viewports (wide + short laptops): the width-driven heading
         is too tall for the available height once the dashboard mockup rises, so
         shrink the heading and tighten the top padding to keep the heading clear
         of the nav AND the Free Trial clear of the dashboard. */
      @media (max-height: 820px) and (min-width: 901px) {
        .hero{ padding-top: clamp(96px, 13vh, 108px) }
        .hero h1{ font-size: clamp(38px, 3.7vw, 52px) }
      }

      @media (max-height: 1000px) and (min-width: 901px) { .cards3{ --zh: 0.95 } }
      @media (max-height: 940px) and (min-width: 901px)  { .cards3{ --zh: 0.9 } }
      @media (max-height: 860px) and (min-width: 901px)  { .cards3{ --zh: 0.85 } }
      @media (max-height: 800px) and (min-width: 901px)  { .cards3{ --zh: 0.78 } }
      @media (max-height: 760px) and (min-width: 901px)  { .cards3{ --zh: 0.72 } }
      @media (max-height: 720px) and (min-width: 901px)  { .cards3{ --zh: 0.65 } }
      @media (max-height: 680px) and (min-width: 901px)  { .cards3{ --zh: 0.59 } }
      @media (max-height: 640px) and (min-width: 901px)  { .cards3{ --zh: 0.54 } }

      /* ---------- Document-flow scrolling (all widths): native scroll, stacked sections ---------- */
      html.mobile-flow, html.mobile-flow body{height:auto;overflow:auto;overflow-x:hidden}
      html.mobile-flow #fullpage .section{height:auto;min-height:0;overflow:visible}
      html.mobile-flow #fullpage .section > .sect{height:auto}
      html.mobile-flow .section.fp-curtain{display:none}
      html.mobile-flow .curtain{position:relative;height:100svh;min-height:560px}

      /* Desktop (>900px): native scroll, but each panel still fills the viewport
         so the full-height composition is preserved (content centers as before;
         taller content grows past 100vh and scrolls rather than clipping). */
      @media (min-width: 901px){
        html.mobile-flow #fullpage .section{min-height:100vh}
        html.mobile-flow #fullpage .section > .sect{min-height:100vh}
      }

      @media (max-width: 900px){
        /* The per-letter heading reveal now runs on mobile too: splitChars()
           wraps each word so letters can keep their transform/blur while words
           stay intact, and the IntersectionObserver fires reliably on tall
           panels. (The old "force every heading visible, no animation" block
           lived here — it's gone. A prefers-reduced-motion fallback below still
           shows every heading instantly for users who opt out of motion.) */

        /* …but the DESKTOP reveal (introLetterUp) animates filter:blur(14px) +
           a 3D rotateX(-70deg) "tuck" on every letter. Both are cheap on a
           laptop GPU yet stutter on phones/tablets, and the heavy blur leaves a
           heading briefly unreadable as it arrives (the s7 "Start with / One AI
           Agent" CTA vanishes mid-reveal). On this breakpoint we keep the exact
           same staggered letter cascade — every .ch keeps its --i delay and the
           per-section timing is untouched — but reduce the motion to a
           compositor-only opacity + translateY rise: no blur to repaint, no 3D
           flip to "tuck". Redefining the keyframe inside this @media overrides
           the base one only while it matches (desktop keeps its richer reveal);
           filter:none !important also clears the .ch base-state blur so letters
           stay razor-sharp the whole way in. */
        /* …and on mobile filter is never animated, so drop it from the
           will-change hint — only transform/opacity move here. (script.js then
           releases the hint entirely on animationend so revealed headings don't
           leave hundreds of promoted layers alive to stutter later scrolling.) */
        .ch{filter:none !important;will-change:transform,opacity !important}
        @keyframes introLetterUp{
          0%  {opacity:0;transform:translateY(.5em)}
          60% {opacity:1}
          100%{opacity:1;transform:translateY(0)}
        }

        /* Wrapped headings need leading on phones. The section headings are set
           to line-height:1 for the punchy 1–2 line desktop composition, but on a
           phone they wrap to 3–4 lines and that tight leading lets the italic
           serif accent line's ascenders/descenders touch the line above — it
           reads as the text being "cut off". Give every split heading a little
           breathing room here; desktop keeps its tight setting. */
        .s2 .s2-head h2, .s3 .s3-head h2, .s4 .s4-bottom h2,
        .s5 .s5-head h2, .s5 .s5-head .s5-sub, .s6 .s3-head h2, .s7 .s7-cta h2,
        .s-cap .cap-head h2, .s-aicap .cap-head h2, .s-cta h2, .s-sec .sec-head h2{
          line-height:1.13;
        }

        .nav{padding:0 8px 0 14px}
        .nav .links, .nav .signin{display:none}
        .nav__burger{
          display:flex;flex-direction:column;justify-content:center;gap:4px;
          width:38px;height:38px;border-radius:10px;align-items:center;
        }
        .nav__burger span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
        .nav__drawer{
          display:flex;position:fixed;inset:0;z-index:400;
          background:rgba(7,18,41,.97);color:#fff;
          flex-direction:column;align-items:center;justify-content:center;gap:26px;
          opacity:0;pointer-events:none;transition:opacity .3s ease;
        }
        .nav__drawer.open{opacity:1;pointer-events:auto}
        .nav__drawer a{font-size:26px;font-weight:500;letter-spacing:-0.04em;color:#fff}
        .nav__drawer .drawer-close{
          position:absolute;top:22px;right:22px;font-size:22px;color:rgba(255,255,255,.8);
          width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);
        }

        /* hero */
        .hero{padding-top:clamp(90px,16vh,130px);padding-left:18px;padding-right:18px}
        .hero h1{font-size:clamp(32px,9.5vw,44px) !important;letter-spacing:-0.04em}
        .hero h1 .line{white-space:normal}
        .hero p.sub{width:min(440px,90vw);max-width:min(440px,90vw);font-size:14px}
        /* The sub-paragraphs use forced <span class="sub-line"> breaks tuned for
           the desktop column; on a phone those breaks strand short fragments
           ("…automate" alone, centred). Let them flow as one natural paragraph
           that wraps to the available width. A trailing space keeps adjoining
           sub-lines from butting together (the markup has none between them). */
        .hero p.sub .sub-line,
        .s3 .s3-head p .sub-line{display:inline}
        .hero p.sub .sub-line:not(:last-child)::after,
        .s3 .s3-head p .sub-line:not(:last-child)::after{content:" "}
        .hero .ctas{flex-direction:column;gap:12px;width:auto;align-items:center}
        /* Button hugs its label rather than stretching the full column. */
        .hero .ctas .btn{width:auto !important;align-self:center;padding:0 28px}

        /* s2 — balanced 2×2 boxes instead of a 3+1 wrap. */
        .s2{padding-top:0}
        .s2-inner{height:auto;padding:84px 22px 56px}
        .s2-stats{grid-template-columns:repeat(2,1fr);gap:12px;max-width:440px}

        /* s5 agents */
        .s5{display:block}
        .s5-inner{padding:64px 22px 48px}
        .agents-grid{grid-template-columns:repeat(2,1fr);gap:10px}
        .s5-bottom{grid-template-columns:1fr;gap:22px}

        /* s3 cards — auto-height stacks with the step caption in normal flow.
           The desktop card pins the caption to the bottom (fixed 552px height);
           on mobile the content is taller than any fixed height, so the absolute
           caption would overlap it. Flow it instead. */
        .s3-inner{padding:64px 18px 48px}
        .cards3{grid-template-columns:1fr;gap:14px;zoom:1}
        .card3{height:auto;min-height:0;padding:26px 22px 26px;gap:18px;justify-content:flex-start}
        .card3.b,.card3.c{padding-top:26px}
        /* (.step-cap is flowed static in the later mobile block, after the
           base absolute rule, so it actually wins on source order.) */
        /* Let the connector rows breathe and show full labels (no ellipsis). */
        .s3 .conn{height:auto;min-height:78px}
        .s3 .conn .kicker,
        .s3 .conn .name{white-space:normal;overflow:visible;text-overflow:clip}

        /* s4 orbit -> static grid */
        .s4{min-height:0}
        .s4-inner{min-height:0;height:auto;padding:64px 18px 48px}
        .orbit{width:auto;aspect-ratio:auto;margin:18px 0 0}
        .orbit-core{position:static;transform:none !important;margin:0 auto 18px}
        .orbit-orb{width:76px}
        /* Tidy, uniform logo grid: clean 5×2 of equal-size tiles, every logo
           normalised to the same visual weight (a single max-height) and
           centred so wide wordmarks and square icons read as one organised set. */
        .orbit-ring{position:static;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;justify-items:stretch;align-items:stretch}
        .ilogo{
          position:static;margin:0;width:100%;height:52px;
          display:flex;align-items:center;justify-content:center;
          background:rgba(14,10,7,.035);border:1px solid rgba(14,10,7,.07);border-radius:12px;
          transform:none !important;
        }
        .ilogo img{max-width:74%;max-height:24px;width:auto;height:auto;object-fit:contain}
        /* The desktop orbit pops each logo out of the orb in turn; on mobile the
           ring is a static grid, so give the tiles their own staggered fade so
           the section still arrives with life. Opacity-only (the tiles keep
           transform:none) → no flicker, no layout shift. */
        .s4 .ilogo{opacity:0}
        .s4.s4-in .ilogo{animation:ilogoIn .5s cubic-bezier(.22,.61,.36,1) both}
        .s4.s4-in .ilogo:nth-child(1){animation-delay:.30s}
        .s4.s4-in .ilogo:nth-child(2){animation-delay:.36s}
        .s4.s4-in .ilogo:nth-child(3){animation-delay:.42s}
        .s4.s4-in .ilogo:nth-child(4){animation-delay:.48s}
        .s4.s4-in .ilogo:nth-child(5){animation-delay:.54s}
        .s4.s4-in .ilogo:nth-child(6){animation-delay:.60s}
        .s4.s4-in .ilogo:nth-child(7){animation-delay:.66s}
        .s4.s4-in .ilogo:nth-child(8){animation-delay:.72s}
        .s4.s4-in .ilogo:nth-child(9){animation-delay:.78s}
        .s4.s4-in .ilogo:nth-child(10){animation-delay:.84s}
        .s4-bottom{position:static;margin-top:28px;max-width:none}

        /* s6 pricing */
        .s6{display:block}
        .s6-inner{padding:64px 18px 48px}
        .price-grid{grid-template-columns:1fr;gap:14px}
        .price-card .tag{min-height:0}

        /* s7 security + footer — bottom padding gives the CTA breathing room
           above the dark footer (it sat flush before). */
        .s7-main{padding:64px 18px 56px}
        .sec-row{grid-template-columns:repeat(2,1fr);gap:10px}
        .s7 footer{padding:36px 22px 18px}
        footer .inner{grid-template-columns:1fr;gap:32px}
        footer .columns{grid-template-columns:1fr 1fr;gap:24px}
        footer .bottom{flex-direction:column;gap:8px;align-items:flex-start}
      }

      /* in mobile flow the entrance states must not depend on fullpage triggers having run */
      html.mobile-flow .curtain{box-shadow:none}

      /* ---------- Hero: tagline + feature pills ---------- */
      /* New element order (h1 → tagline → sub → pills → cta) drops the old
         negative-margin tuck that assumed a pill above the headline. */
      .hero h1{margin-top:0}
      .hero p.sub{margin-top:clamp(14px,1.8vw,22px)}
      .hero .tagline{
        margin-top:clamp(8px,1.2vw,16px);
        font-family:var(--font-serif);font-style:italic;font-weight:400;
        font-size:clamp(18px,2vw,28px);letter-spacing:-0.02em;color:rgba(255,255,255,.92);
        opacity:0;transform:translateY(14px);
      }
      .hero .tagline.in{animation:introSubLine .5s cubic-bezier(.22,.61,.36,1) forwards}

      /* ---------- S-CAP / S-AICAP: capability grids ---------- */
      .s-cap,.s-aicap{position:relative;background:var(--paper);overflow:hidden;height:100%;display:flex}
      .s-cap-inner{
        width:100%;max-width:1180px;margin:auto;
        padding:clamp(80px,11vh,130px) clamp(24px,3vw,40px) clamp(28px,4vh,56px);
        display:flex;flex-direction:column;align-items:center;
      }
      .cap-head{text-align:center;max-width:700px;margin-bottom:clamp(24px,4vh,44px)}
      .cap-head .eyebrow{justify-content:center;margin-bottom:clamp(12px,2vh,18px)}
      .cap-head h2{
        font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1;font-weight:500;margin:0;color:var(--ink);text-wrap:pretty;
      }
      .cap-head h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .cap-lede{font-size:clamp(13px,1.05vw,15px);line-height:1.4;letter-spacing:-0.02em;color:rgba(14,10,7,.6);margin:clamp(12px,1.6vh,18px) auto 0;max-width:520px}
      .cap-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;width:100%}
      .cap-grid:not(.cap-grid-5) > .cap-card{grid-column:span 3}
      .cap-grid:not(.cap-grid-5) > .cap-card:nth-child(5){grid-column:2 / span 3}
      .cap-grid:not(.cap-grid-5) > .cap-card:nth-child(6){grid-column:5 / span 3}
      .cap-grid:not(.cap-grid-5) > .cap-card:nth-child(7){grid-column:8 / span 3}
      .cap-grid-5{grid-template-columns:repeat(5,1fr);max-width:1080px;margin:0 auto}
      .cap-card{
        border:1px solid var(--line);border-radius:16px;background:rgba(14,10,7,.02);
        padding:clamp(16px,1.6vw,22px);display:flex;flex-direction:column;gap:10px;min-width:0;
        transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
      }
      .cap-card:hover{border-color:rgba(35,82,222,.3);box-shadow:0 12px 28px rgba(8,23,79,.08);transform:translateY(-3px)}
      .cap-ico{
        width:38px;height:38px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
        background:rgba(35,82,222,.08);border:1px solid rgba(35,82,222,.16);
      }
      .cap-ico svg{width:19px;height:19px;fill:none;stroke:#2552DE;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
      .cap-card .ct{font-size:15px;font-weight:500;letter-spacing:-0.03em;color:var(--ink);line-height:1.2}
      .cap-card .cd{font-size:12.5px;line-height:1.4;letter-spacing:-0.01em;color:var(--muted)}

      /* S-CAP / S-AICAP reveal */
      .s-cap .cap-head .eyebrow,.s-aicap .cap-head .eyebrow,
      .s-aicap .cap-lede{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s-cap .cap-head h2,.s-aicap .cap-head h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s-cap.s-cap-in .cap-head h2,.s-aicap.s-aicap-in .cap-head h2{opacity:1 !important;filter:none !important;transform:none !important}
      .s-cap .cap-head h2 .ch,.s-aicap .cap-head h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s-cap .cap-head h2 .ch.sp,.s-aicap .cap-head h2 .ch.sp{width:.28em}
      .s-cap.s-cap-in .cap-head h2 .ch,.s-aicap.s-aicap-in .cap-head h2 .ch{animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.1s + var(--i,0)*19ms)}
      .s-cap.s-cap-in .cap-head .eyebrow,.s-aicap.s-aicap-in .cap-head .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s-aicap.s-aicap-in .cap-lede{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .35s forwards}
      .s-cap .cap-card,.s-aicap .cap-card{opacity:0;transform:translateY(20px);will-change:transform,opacity}
      .s-cap.s-cap-in .cap-card,.s-aicap.s-aicap-in .cap-card{animation:s2FadeUp .55s cubic-bezier(.22,.61,.36,1) forwards}
      .s-cap.s-cap-in .cap-card:nth-child(1),.s-aicap.s-aicap-in .cap-card:nth-child(1){animation-delay:.45s}
      .s-cap.s-cap-in .cap-card:nth-child(2),.s-aicap.s-aicap-in .cap-card:nth-child(2){animation-delay:.53s}
      .s-cap.s-cap-in .cap-card:nth-child(3),.s-aicap.s-aicap-in .cap-card:nth-child(3){animation-delay:.61s}
      .s-cap.s-cap-in .cap-card:nth-child(4),.s-aicap.s-aicap-in .cap-card:nth-child(4){animation-delay:.69s}
      .s-cap.s-cap-in .cap-card:nth-child(5),.s-aicap.s-aicap-in .cap-card:nth-child(5){animation-delay:.77s}
      .s-cap.s-cap-in .cap-card:nth-child(6){animation-delay:.85s}
      .s-cap.s-cap-in .cap-card:nth-child(7){animation-delay:.93s}

      /* ---------- S-CTA: "A smarter way" panels ---------- */
      .s-cta{position:relative;background:var(--paper);overflow:hidden;height:100%;display:flex}
      .s-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 50% at 50% 44%, rgba(37,91,243,.06), transparent 70%);pointer-events:none}
      .s-cta-inner{
        width:100%;max-width:780px;margin:auto;text-align:center;position:relative;
        padding:clamp(60px,10vh,120px) clamp(24px,3vw,40px);
        display:flex;flex-direction:column;align-items:center;
      }
      .s-cta .eyebrow{justify-content:center;margin-bottom:clamp(14px,2vh,22px)}
      .s-cta h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1;font-weight:500;margin:0;color:var(--ink)}
      .s-cta h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .s-cta .btn-final{margin-top:clamp(22px,3vh,32px)}
      .s-cta .eyebrow{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s-cta h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s-cta.s-cta-in h2{opacity:1 !important;filter:none !important;transform:none !important}
      .s-cta h2 .ch{opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter}
      .s-cta h2 .ch.sp{width:.28em}
      .s-cta.s-cta-in h2 .ch{animation:introLetterUp .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.1s + var(--i,0)*20ms)}
      .s-cta.s-cta-in .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s-cta .btn-final{opacity:0;transform:scale(0);transform-origin:center center}
      .s-cta.s-cta-in .btn-final{animation:s2MeetPop 1.1s cubic-bezier(.22,.61,.36,1) .85s forwards}

      /* The CTA is a centered brand-blue "liquid glass" slab (Apple-style):
         a translucent blue gradient with a real backdrop blur, a bright
         specular rim on the edges, inner depth top-to-bottom, a soft glossy
         top sheen, and two slow-drifting radial light blobs that read as
         caustics under the surface. Radial blobs (always feathered to
         transparent) replace the old diagonal bands, so there's no hard
         seam/line. The button inverts to a white pill (the shared blue
         .btn-final would vanish on blue). */
      .s-cta-card{
        position:relative;isolation:isolate;overflow:hidden;
        width:100%;max-width:560px;margin:0 auto;
        padding:clamp(40px,6vh,64px) clamp(28px,5vw,52px);
        border-radius:36px;
        background:
          linear-gradient(157deg,
            rgba(96,140,255,.94) 0%,
            rgba(45,99,243,.93) 52%,
            rgba(28,80,224,.95) 100%);
        box-shadow:
          inset 0 1.5px 0 rgba(255,255,255,.55),
          inset 0 0 0 1px rgba(255,255,255,.16),
          inset 0 26px 60px rgba(255,255,255,.14),
          inset 0 -30px 70px rgba(8,34,108,.34),
          0 30px 70px -24px rgba(26,115,232,.5),
          0 4px 14px rgba(26,115,232,.18);
        -webkit-backdrop-filter:blur(10px) saturate(1.4);
        backdrop-filter:blur(10px) saturate(1.4);
      }
      /* Glossy top sheen — the bright "lit glass" highlight, fades out before
         it reaches the middle so it never draws a line across the card. */
      .s-cta-card::before{
        content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
        border-radius:inherit;
        background:linear-gradient(180deg,
          rgba(255,255,255,.26) 0%,
          rgba(255,255,255,.14) 16%,
          rgba(255,255,255,.05) 38%,
          rgba(255,255,255,0) 70%);
        mix-blend-mode:screen;
      }
      .s-cta-card-in{position:relative;z-index:2}
      /* Light blobs: a gradual multi-stop falloff all the way to 100% (no single
         steep edge => no perceptible ring) + heavy blur. Normal blend, not
         `screen`, which would re-sharpen the edge against the blue. */
      .cta-fold{position:absolute;inset:-55%;z-index:0;pointer-events:none;filter:blur(60px);will-change:transform}
      .cta-fold-a{background:radial-gradient(circle at 32% 26%,
        rgba(255,255,255,.30) 0%,rgba(255,255,255,.18) 28%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 100%);
        animation:ctaSwayA 18s ease-in-out infinite alternate}
      .cta-fold-b{background:radial-gradient(circle at 70% 74%,
        rgba(150,190,255,.30) 0%,rgba(150,190,255,.16) 30%,rgba(150,190,255,.05) 60%,rgba(150,190,255,0) 100%);
        animation:ctaSwayB 24s ease-in-out infinite alternate}
      @keyframes ctaSwayA{from{transform:translate3d(-7%,-5%,0) scale(1)}to{transform:translate3d(9%,7%,0) scale(1.18)}}
      @keyframes ctaSwayB{from{transform:translate3d(8%,6%,0) scale(1.12)}to{transform:translate3d(-9%,-7%,0) scale(1)}}
      .s-cta-card h2{color:#fff;font-size:clamp(30px,3.6vw,46px)}
      .s-cta .cta-sub{margin:16px auto 0;max-width:420px;font-size:clamp(15px,1.15vw,17px);line-height:1.5;letter-spacing:-0.02em;color:rgba(255,255,255,.85)}
      .s-cta .btn-final{background:#fff;color:#1257c4;border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 18px rgba(8,38,90,.22),0 18px 40px rgba(8,38,90,.18)}
      .s-cta .btn-final:hover{background:#eef3ff;color:#0f49ad;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 24px rgba(8,38,90,.3),0 22px 48px rgba(8,38,90,.22)}
      /* Reveal: the card fades+rises first, then the existing per-letter +
         button-pop choreography plays inside it. */
      .s-cta .s-cta-card{opacity:0;transform:translateY(24px);will-change:transform,opacity}
      .s-cta.s-cta-in .s-cta-card{animation:s2FadeUp .8s cubic-bezier(.22,.61,.36,1) both}
      .s-cta .cta-sub{opacity:0;transform:translateY(16px);will-change:transform,opacity}
      .s-cta.s-cta-in .cta-sub{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .7s forwards}
      @media (max-width:900px){
        .s-cta-card{border-radius:24px;padding:clamp(34px,5vh,46px) 22px}
      }
      @media (prefers-reduced-motion:reduce){.cta-fold{animation:none}}

      /* ---------- S-SEC: security ---------- */
      .s-sec{position:relative;background:var(--paper);overflow:hidden;height:100%;display:flex}
      .s-sec-inner{
        width:100%;max-width:1180px;margin:auto;
        padding:clamp(80px,11vh,130px) clamp(24px,3vw,40px) clamp(28px,4vh,56px);
        display:flex;flex-direction:column;align-items:center;
      }
      .s-sec .sec-head{margin-bottom:clamp(24px,4vh,44px)}
      .s-sec .sec-head h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-0.06em;line-height:1;font-weight:500}
      .s-sec .sec-head h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .sec-sub{font-size:clamp(13px,1.05vw,15px);line-height:1.4;letter-spacing:-0.02em;color:rgba(14,10,7,.6);margin:clamp(12px,1.6vh,18px) auto 0;max-width:560px}
      .s-sec .sec-row{width:100%}
      .s-sec .sec-head .eyebrow,.s-sec .sec-head .sec-sub{opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s-sec .sec-head h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s-sec.s-sec-in .sec-head h2{opacity:1 !important;filter:none !important;transform:none !important}
      .s-sec .sec-head h2 .ch{opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter}
      .s-sec .sec-head h2 .ch.sp{width:.28em}
      .s-sec.s-sec-in .sec-head h2 .ch{animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.1s + var(--i,0)*19ms)}
      .s-sec.s-sec-in .sec-head .eyebrow{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .05s forwards}
      .s-sec.s-sec-in .sec-head .sec-sub{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .3s forwards}
      .s-sec .sec-badge{opacity:0;transform:translateY(22px);will-change:transform,opacity}
      .s-sec.s-sec-in .sec-badge:nth-child(1){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .4s forwards}
      .s-sec.s-sec-in .sec-badge:nth-child(2){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .5s forwards}
      .s-sec.s-sec-in .sec-badge:nth-child(3){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .6s forwards}
      .s-sec.s-sec-in .sec-badge:nth-child(4){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) .7s forwards}

      /* ---------- S5 bottom: 3 columns (Company Brain / AI Voices / Phoebe) ---------- */
      .s5-bottom{grid-template-columns:repeat(3,1fr) !important}
      .voice-card{
        border-radius:24px;border:1px solid var(--line);background:rgba(14,10,7,.02);
        padding:26px 24px;display:flex;flex-direction:column;gap:12px;
      }
      .voice-card .k{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--muted)}
      .voice-card .t{font-size:clamp(15px,1.3vw,18px);letter-spacing:-0.03em;line-height:1.3;font-weight:500;color:var(--ink)}
      .ph-intro{font-size:12.5px;line-height:1.35;letter-spacing:-0.02em;color:rgba(14,10,7,.6);margin-bottom:10px}
      /* Bottom-row reveals continue the top-to-bottom cascade off --cascade
         (the moment the heading settles): AI Voices alongside Brain + Phoebe
         stamp, then the Phoebe intro and its bubbles fill in last. */
      .s5 .voice-card{opacity:0;transform:translateY(22px);will-change:transform,opacity}
      .s5.s5-in .voice-card{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + .7s) forwards}
      .s5 .ph-intro{opacity:0;transform:translateY(14px);will-change:transform,opacity}
      .s5.s5-in .ph-intro{animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + .85s) forwards}
      .s5.s5-in .ph-bubble:nth-of-type(3){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + 1s) forwards}
      .s5.s5-in .ph-bubble:nth-of-type(4){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + 1.15s) forwards}
      .s5.s5-in .ph-bubble:nth-of-type(5){animation:s2FadeUp .6s cubic-bezier(.22,.61,.36,1) calc(var(--cascade,1.7s) + 1.3s) forwards}

      /* ---------- S3 step cards: title + description caption ---------- */
      .card3 .step-cap{position:static;order:-1;margin:0;padding:0;text-align:center}
      .card3 .step-cap .stamp{position:static;font-size:13px;letter-spacing:.06em;font-weight:700;color:var(--ink);margin:0 0 7px}
      .card3 .step-d{font-size:13px;line-height:1.45;font-weight:500;letter-spacing:-0.01em;color:rgba(14,10,7,.80)}

      /* ---------- Mobile (≤900px) for the new sections ---------- */
      @media (max-width:900px){
        .hero .tagline{font-size:18px}
        .s-cap,.s-aicap,.s-cta,.s-sec{display:block}
        .s-cap-inner,.s-sec-inner{padding:64px 18px 48px}
        .cap-grid,.cap-grid-5{grid-template-columns:1fr 1fr !important;gap:10px}
        .cap-grid > .cap-card{grid-column:auto !important}
        .s-cta-inner{padding:80px 18px}
        .s5-bottom{grid-template-columns:1fr !important}
        /* (Step caption sits above the illustration at every width — see the
           base .card3 .step-cap rules; mobile just inherits them.) */
        /* The blue CTA card's soft drop-shadow was clipped by the section's
           overflow:hidden, leaving a hard horizontal line at the section seam.
           Let it feather out naturally. */
        .s-cta{overflow:visible}
      }

      /* ============================================================
         SECTION SPACING — tighten the whole page after the hero.
         Each section used to fill the viewport (min-height:100vh on
         desktop) with 80–176px of inner top/bottom padding, leaving a
         lot of dead space. Now every section collapses to its content
         height with ~40px top & bottom, so blocks read as separate
         panels without the gaps. The hero (.curtain, 100svh) is left
         alone. Kept as one block at the end so it overrides both the
         desktop and the mobile section padding above.
         ============================================================ */
      @media (min-width:901px){
        html.mobile-flow #fullpage .section{min-height:0}
        html.mobile-flow #fullpage .section > .sect{min-height:0}
      }
      /* The integrations orbit pins its own min-height and floats its
         heading absolutely at the bottom of a viewport-tall panel. Collapse
         it and flow the heading below the orbit so the compact section can't
         overlap. */
      .s4-inner{min-height:0;height:auto}
      .s4-bottom{position:static;left:auto;bottom:auto;max-width:none;margin:clamp(18px,2.6vh,32px) auto 0;text-align:center}
      /* ~40px top & bottom on every section's inner wrapper; the existing
         horizontal padding (the clamp() side values) is kept because only the
         top/bottom longhands are overridden here. */
      .s2-inner,
      .s3-inner,
      .s4-inner,
      .s5-inner,
      .s6-inner,
      .s7-main,
      .s-cap-inner,
      .s-cta-inner,
      .s-sec-inner{
        padding-top:40px;
        padding-bottom:40px;
      }
      /* Footer is the closing panel — trim its oversized top gap too. */
      footer{padding-top:40px}
      footer .bottom{margin-top:40px}

      /* ============================================================
         Footer legal quick-links + cookie-preferences (every page)
         ============================================================ */
      .foot-legal-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
      .foot-legal-links a,
      .cookie-prefs{color:rgba(255,255,255,.5);font-size:12px;letter-spacing:-0.02em;transition:color .2s ease}
      .foot-legal-links a:hover,
      .cookie-prefs:hover{color:rgba(255,255,255,.85)}
      .cookie-prefs{background:none;border:0;padding:0;font:inherit;cursor:pointer}

      /* ============================================================
         Legal pages — privacy / terms / cookie / AI policy.
         Reuse the site nav + footer; a clean reading column in between.
         ============================================================ */
      /* No hero/intro animation runs on a legal page, so pin the fixed nav
         visible (it starts at opacity:0 for the homepage entrance) and frosted. */
      body.legal-page #nav{opacity:1;transform:translateX(-50%)}
      .legal{max-width:840px;margin:0 auto;padding:clamp(118px,13vw,172px) 22px 88px}
      .legal-back{
        display:inline-flex;align-items:center;gap:7px;
        font-size:13px;font-weight:500;letter-spacing:-0.02em;color:var(--muted-2);
        margin-bottom:30px;transition:color .2s ease;
      }
      .legal-back:hover{color:var(--ink)}
      .legal-back svg{width:15px;height:15px}
      .legal-head h1{
        font-family:var(--font-sans);font-size:clamp(34px,5vw,52px);
        letter-spacing:-0.05em;line-height:1.04;font-weight:500;margin:0;color:var(--ink);
      }
      /* Roboto (site body font) — matches the rest of the site's running text;
         mono is reserved for the homepage's big stat numerals, not sentences. */
      .legal-meta{
        margin-top:18px;font-family:var(--font-body);font-size:14px;
        letter-spacing:-0.01em;color:var(--muted);
      }
      .legal-body{
        margin-top:8px;font-size:16px;line-height:1.72;color:rgba(14,10,7,.78);
        text-wrap:pretty;
      }
      .legal-body h2{
        font-family:var(--font-sans);font-size:clamp(20px,2.4vw,26px);
        letter-spacing:-0.03em;font-weight:600;color:var(--ink);margin:46px 0 12px;
      }
      .legal-body h2:first-child{margin-top:8px}
      .legal-body h3{
        font-family:var(--font-sans);font-size:16px;letter-spacing:-0.02em;
        font-weight:600;color:var(--ink);margin:28px 0 8px;
      }
      .legal-body p{margin:0 0 16px}
      .legal-body a{color:var(--blue-2);font-weight:500;text-decoration:underline;text-underline-offset:2px}
      .legal-body a:hover{color:var(--blue-3)}
      .legal-body strong{font-weight:600;color:var(--ink)}
      .legal-body ul{list-style:none;margin:2px 0 20px;padding:0}
      .legal-body li{position:relative;padding-left:22px;margin:0 0 9px}
      .legal-body li::before{
        content:"";position:absolute;left:3px;top:11px;width:6px;height:6px;
        border-radius:50%;background:var(--blue-2);opacity:.65;
      }
      .legal-contact{
        margin-top:8px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;
        background:rgba(14,10,7,.02);font-size:15px;line-height:1.7;color:var(--muted-2);
      }
      .legal-contact strong{color:var(--ink)}
      @media (max-width:680px){
        .legal{padding-top:108px}
        .legal-body{font-size:15px}
      }

      /* ============================================================
         Cookie consent banner — injected by /website/cookie.js,
         shown on every page until a choice is stored. Brand look:
         frosted capsule, travelling border-beam, Google-blue primary.
         ============================================================ */
      .cookie-bar{
        position:fixed;left:50%;bottom:clamp(14px,2.2vw,26px);
        transform:translateX(-50%) translateY(22px);
        z-index:300;width:min(640px,calc(100vw - 26px));
        opacity:0;pointer-events:none;
        transition:opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1);
      }
      .cookie-bar.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
      .cookie-card{
        position:relative;overflow:hidden;
        display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
        background:rgba(255,255,255,.82);
        backdrop-filter:blur(20px) saturate(1.6);
        -webkit-backdrop-filter:blur(20px) saturate(1.6);
        border:1px solid rgba(14,10,7,.08);border-radius:22px;padding:18px 20px;
        box-shadow:0 18px 50px rgba(8,23,79,.16), inset 0 1px 0 rgba(255,255,255,.7);
      }
      .cookie-copy{flex:1 1 280px;min-width:230px}
      .cookie-title{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
      .cookie-copy p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--muted-2)}
      .cookie-copy a{color:var(--blue-2);font-weight:500;text-decoration:none}
      .cookie-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
      .cookie-btn{
        height:40px;padding:0 18px;border-radius:999px;
        font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:-0.02em;
        cursor:pointer;white-space:nowrap;
        transition:background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
      }
      .cookie-btn.ghost{background:transparent;border:1px solid rgba(14,10,7,.16);color:var(--ink)}
      .cookie-btn.ghost:hover{border-color:rgba(14,10,7,.34);background:rgba(14,10,7,.03)}
      .cookie-btn.primary{
        position:relative;overflow:hidden;
        background:#1A73E8;border:1px solid rgba(255,255,255,.22);color:#fff;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(26,115,232,.28),0 10px 22px rgba(26,115,232,.2);
      }
      .cookie-btn.primary:hover{background:#1666d0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(26,115,232,.36),0 16px 28px rgba(26,115,232,.26)}
      .cookie-btn.primary span{position:relative;z-index:1}
      @media (max-width:560px){
        .cookie-card{padding:16px;gap:14px}
        .cookie-actions{width:100%}
        .cookie-btn{flex:1}
      }