/* ============================================================
   uplane.com  /  Version 2, lassie.ai-style layout
   Warm paper, rounded soft components, lassie-style motion.
   Typography uses the real brand faces from the Uplane brand doc:
   Afical Neue (display) and Lab Grotesque (body / UI / data).
   Keeps Altitude Blue and the brand punctuation rules
   (no interpunct glyph, no em dashes).
   ============================================================ */
      /* Brand faces (from the Uplane brand doc), bundled in ../fonts */
      @font-face {
        font-family: "Afical Neue";
        src: url("fonts/aficalneue-medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: block;
      }

      @font-face {
        font-family: "Lab Grotesque";
        src: url("fonts/LabGrotesque-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: block;
      }

      @font-face {
        font-family: "Lab Grotesque";
        src: url("fonts/LabGrotesque-Medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: block;
      }
@font-face {
        font-family: "Daniel";
        src: url(cdn/53bcfb3b08d4.ttf) format("truetype");
        font-weight: 100 900;
        font-style: normal;
        font-display: block;
      }

      :root {
        --blue: #1A44FF;
        /* Altitude Blue, primary brand color */
        --blue-700: #1536CC;
        /* brand-blue tint, hover/press */
        --signal: #39BBFF;
        /* Signal Blue, accent only */
        --ink: #0A0A0A;
        /* Core Black */
        --text: #232323;
        /* neutral ramp */
        --muted: #5C5C5C;
        /* neutral ramp */
        --paper: #FFFFFF;
        /* Base White working surface */
        --cream: #F5F5F5;
        /* neutral light surface */
        --cream-2: #ECECEC;
        --card: #FFFFFF;
        --line: #E5E7EB;
        /* shared structural hairline */
        --serif: "Afical Neue", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        /* brand display */
        --sans: "Lab Grotesque", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        /* brand body */
        --r: 2px;
        /* essentially square per brand */
        --r-lg: 3px;
        --r-xl: 4px;
        --pill: 4px;
        /* square corners, no pills */
        --maxw: 1232px;
        /* outer frame cap: every full-bleed edge sits on this line.
           Raised on very wide displays (see the >=1600px query below). */
        --frame-max: 1400px;
        /* hero stage height; mirrors index.html. Every hero on the site --
           home, careers, and the dark subpage heroes -- stands on this one
           line, so the fold is at the same place on every page. */
        --hero-h: 720px;
        /* vertical rhythm; mirrors index.html */
        --section-pad: 72px;
        --sp-1: 8px;
        --sp-2: 16px;
        --sp-3: 24px;
        --sp-4: 32px;
        --sp-5: 40px;
        --sp-6: 56px;
        --sp-7: 72px;
        --sp-8: 96px;
        --shadow: 0 1px 0 rgba(10, 10, 10, .04);
        --shadow-lg: 0 4px 16px rgba(10, 10, 10, .12);
        /* the lift under a white content card on the page surface. One value,
           taken from #solutions .solution-card, which is the reference card. */
        --shadow-card: 0 19px 42px rgba(7, 16, 48, .085);

        /* THE TYPE LADDER (mirrors index.html :root, DESIGN-BOOK §17) --
           one value per ROLE, so a role cannot drift between pages. These lived
           only in index.html, which is why every subpage hard-coded its own
           numbers and a role drifted the moment a section was added. Use the
           token, never a literal px.

           One documented deviation: a long-form reading column sets its running
           copy larger than --fs-body, because --fs-body is sized for marketing
           copy in a 440px measure, not for 760px of prose. That is the ONLY
           place a role may leave the ladder, and it is declared as its own
           token (--fs-read) rather than as a loose literal. */
        --fs-display: clamp(38px, 6vw, 80px);        /* hero h1 */
        --fs-display-word: clamp(38px, 4.3vw, 62px); /* giant word, big stat numeral */
        --fs-h2: clamp(32px, 4.2vw, 56px);           /* section headline */
        --fs-h3: clamp(21px, 2vw, 26px);             /* card headline */
        --fs-quote: clamp(22px, 2.4vw, 29px);        /* pull quote, display paragraph */
        --fs-card-ttl: 18px;                         /* title inside a card */
        --fs-lead: clamp(17px, 1.4vw, 20px);         /* section lead */
        --fs-read: clamp(16px, 1.25vw, 18px);        /* long-form reading column */
        --fs-body: 15px;                             /* all other running copy */
        --fs-cta: 15px;                              /* text-link CTA */
        --fs-label: 14px;                            /* inline bold label */
        --fs-eyebrow: 13px;                          /* eyebrow / kicker / tag */
        --fs-meta: 13px;                             /* caption, attribution, note */
        --fs-stamp: 11px;                            /* MONO stamp, uppercase */
        --fs-index: 13px;                            /* MONO index numeral */
        /* motion system: slow, subtle, classy, firm (lassie + monaco) */
        --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
        /* entrances, long settle */
        --ease-in-out-quart: cubic-bezier(0.65, 0, 0.35, 1);
        /* scene morphs */
        --ease-micro: cubic-bezier(0.33, 0, 0.2, 1);
        /* hover, press */
        /* one loading indicator for the whole site; mirrors index.html */
        --load-size: 13px;
        --load-stroke: 1.5px;
        --load-track: rgba(47, 44, 43, .16);
        --load-arc: rgba(47, 44, 43, .55);
        --load-spin: .99s;
        --agent-spin: var(--load-spin);
      }

      /* PHONE TYPE LADDER (<=640px).
         Second pass, on the brief "make text much smaller, everywhere". The
         first pass took 4-8% off each role; this one takes a further 10-18%,
         so against the DESKTOP ladder a phone now reads roughly:

           display 38 -> 29   h2 32 -> 24   h3 21 -> 17   quote 22 -> 16.5
           lead 17 -> 14      read 16 -> 14  body 15 -> 13  label 14 -> 12
           eyebrow 13 -> 10.5 meta 13 -> 11  stamp 11 -> 9.5

         Floors held deliberately: running copy stops at 13px and the smallest
         mono label at 9.5px, which is uppercase and tracked, so it still sets
         cleanly. Below those the page stops being readable rather than dense.
         The three display roles keep their clamps and drop only the floor,
         since above it they are already viewport-scaled.
         Set here, on the ladder, so a role changes in one place (17). */
      @media (max-width: 640px) {
        :root {
          --fs-display: clamp(29px, 6vw, 80px);
          --fs-display-word: clamp(28px, 4.3vw, 62px);
          --fs-h2: clamp(24px, 4.2vw, 56px);
          --fs-h3: 17px;
          --fs-quote: 16.5px;
          --fs-card-ttl: 15px;
          --fs-lead: 14px;
          --fs-read: 14px;
          --fs-body: 13px;
          --fs-cta: 13px;
          --fs-label: 12px;
          --fs-eyebrow: 10.5px;
          --fs-meta: 11px;
          --fs-stamp: 9.5px;
          --fs-index: 10.5px;
        }
      }

      /* Wide-screen relief; mirrors index.html. Both curves start at their old
         values at 1600px so resizing across the breakpoint produces no jump. */
      /* Outer rails are capped at 1400px, full stop.
         An earlier two-stage ramp widened the frame to 2040px on large displays
         to reduce side gutters; reverted on review -- 1400px is the intended
         maximum for the outer lines, and the gutters simply grow beyond that. */

      /* Touch targets; mirrors index.html. Arrow CTAs render as ~21px text
         lines; the hit area is expanded with an overlay rather than padding so
         no surrounding spacing moves. */
      @media (max-width: 760px) {
        .hw-link,
        .more,
        .wc-link,
        .pc-link,
        .playbook-link {
          position: relative;
        }

        .hw-link::after,
        .more::after,
        .wc-link::after,
        .pc-link::after,
        .playbook-link::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          height: 44px;
          transform: translateY(-50%);
        }
      }

      /* Vertical rhythm steps; mirrors index.html. */
      @media (max-width: 900px) {
        :root {
          --section-pad: 56px;
        }
      }

      @media (max-width: 600px) {
        :root {
          --section-pad: 44px;
        }
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        overscroll-behavior-y: none;
      }

      html {
        background: var(--paper);
      }

      body {
        font-family: var(--sans);
        color: var(--text);
        /* transparent so the negative-z layout rails paint between the page
           canvas and every container/text block */
        background: transparent;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        line-height: 1.55;
      }

      /* ---- Brand font usage rules ---- */
      h1,
      h2,
      h3,
      .h1,
      .h2,
      .h3 {
        font-family: "Afical Neue", sans-serif;
        font-weight: 500;
      }

      body,
      p,
      li,
      span,
      input,
      button {
        font-family: "Lab Grotesque", sans-serif;
        font-weight: 400;
      }

      h4,
      h5,
      h6,
      strong,
      b,
      .btn,
      nav a {
        font-family: "Lab Grotesque", sans-serif;
        font-weight: 500;
      }

      /* Bright matte paper texture: fine even grain (paper tooth) + faint
         large-scale mottle, drawn as the body's own background.
         This used to be two `position: fixed` pseudo-elements at z-index 0
         under every `body > *`. A composited layer BELOW the page content
         forces WebKit to promote the whole document into its own layer above
         it, and iOS Safari paints that layer's tiles far less eagerly than the
         root page tiles: a fast fling went blank white for a second or more
         until the tiles caught up. As a plain background there is no layer at
         all, and the content lives in the root tiles again. The grain now
         scrolls with the page, which reads more like paper anyway; at 1% and
         3.5% alpha nothing else is visible. */
      body {
        background-color: transparent;
        background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
          radial-gradient(120% 90% at 18% 8%, rgba(10, 30, 60, .010), transparent 60%),
          radial-gradient(110% 95% at 88% 92%, rgba(10, 30, 60, .008), transparent 62%);
        background-size: 220px 220px, auto, auto;
        background-repeat: repeat, no-repeat, no-repeat;
      }

      /* keep page content above the texture layers */
      body>* {
        position: relative;
        z-index: 1;
      }

      /* Narrow layouts do not render the negative-z page rails, so the long
         page wrapper does not need to be a stacking context. Keeping it as one
         caused iOS Safari to discard and slowly re-raster its tiles during a
         fast fling. Paint into the root layer here, and omit the filtered SVG
         grain whose subtle texture is not visible at phone scale. */
      @media (max-width: 1184px) {
        body {
          background-color: var(--paper);
          background-image: none;
        }

        body > .site-width-shell {
          z-index: auto;
        }
      }

      img {
        max-width: 100%;
        display: block;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* Every tap target: no double-tap-to-zoom, so iOS dispatches the tap at
         once instead of waiting to see whether a second one follows. Panning
         and pinch-zoom are untouched. The accordion bands get role="button"
         from their scripts, which is what the attribute selector is for. */
      a,
      button,
      [role="button"],
      summary,
      label,
      input,
      select,
      textarea {
        touch-action: manipulation;
      }

      .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        /* 72px side padding = 48px to the inner line + 24px text inset */
        padding: 0 72px;
      }

      .wrap.section-inner-lines {
        padding-left: 0;
        padding-right: 0;
      }

      .section {
        padding: var(--section-pad) 0;
      }

      .wrap.section-inner-lines {
        padding-top: calc(var(--section-pad) + 24px);
        padding-bottom: calc(var(--section-pad) + 24px);
      }

      @media (max-width: 760px) {
        .section {
          padding: var(--section-pad) 0;
        }
      }

      .bg-cream {
        /* transparent over the white canvas so the layout rails run through */
        background: transparent;
        position: relative;
      }

      /* layered background wash: subtle brand-tinted depth on cream sections */
      .bg-cream::before {
        content: "";
        display: none;
      }

      .bg-cream>* {
        position: relative;
        z-index: 1;
      }

      .bg-ink {
        background: var(--ink);
        color: #fff;
      }

      /* Monaco-style dark editorial moment */
      .bg-night {
        background: #ffffff;
        color: var(--ink);
        position: relative;
      }

      .bg-night .eyebrow {
        color: var(--blue);
      }

      .bg-night .eyebrow .d {
        background: var(--blue);
      }

      .bg-night h2,
      .bg-night h3 {
        color: var(--ink);
      }

      .bg-night .lead {
        color: var(--muted);
      }

      /* ---------- Type ---------- */
      h1,
      h2,
      h3 {
        font-family: var(--serif);
        font-weight: 400;
        color: var(--ink);
        letter-spacing: -.01em;
        line-height: 1.02;
      }

      .bg-ink h1,
      .bg-ink h2,
      .bg-ink h3 {
        color: #fff;
      }

      .serif-i {
        font-style: inherit;
        font-family: inherit;
        font-weight: inherit;
        color: inherit;
      }

      .display {
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(44px, 6.6vw, 86px);
        line-height: 1.0;
        letter-spacing: -.015em;
      }

      .h2 {
        font-size: clamp(34px, 4.6vw, 60px);
        line-height: 1.02;
      }

      .h3 {
        font-size: clamp(22px, 2.4vw, 30px);
      }

      .lead {
        font-family: var(--sans);
        font-size: clamp(17px, 1.4vw, 20px);
        color: var(--muted);
        line-height: 1.55;
      }

      .bg-ink .lead {
        color: rgba(255, 255, 255, .72);
      }

      .eyebrow {
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--blue);
        display: inline-flex;
        align-items: center;
        gap: 9px;
      }

      .eyebrow .d {
        display: none;
      }

      .section-head {
        max-width: 720px;
        margin-bottom: 56px;
      }

      .section-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .section-head .h2 {
        margin-top: 16px;
      }

      .section-head .lead {
        margin-top: 18px;
      }

      .accent {
        color: var(--blue);
      }

      /* ---------- Buttons ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        /* .btn is a flex container, so text-align can't centre the label -- the
           label is an anonymous flex item sized to its own content, and without
           this it sits at flex-start. Invisible on content-sized buttons, but
           any button with a min-width (e.g. .nav-cta .btn-blue at 124px) pushed
           all its slack to the right and read as off-centre. */
        justify-content: center;
        gap: 9px;
        font-family: var(--sans);
        font-weight: 500;
        font-size: 15px;
        padding: 14px 24px;
        /* 8px is the brand button radius (DESIGN-BOOK 5.x). The base was
           var(--pill) = 4px, so every real button had to override it inline;
           any button that forgot rendered 4px next to an 8px sibling. */
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: transform .4s var(--ease-micro), box-shadow .4s var(--ease-micro), background .4s var(--ease-micro), color .4s var(--ease-micro), border-color .4s var(--ease-micro);
        white-space: nowrap;
      }

      .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
      }

      .btn:active {
        transform: translateY(0) scale(0.99);
        transition-duration: .14s;
      }

      .btn-primary {
        background: var(--ink);
        color: #fff;
      }

      .btn-primary:hover {
        background: #000;
      }

      .btn-blue {
        background: var(--blue);
        color: #fff;
      }

      .btn-blue:hover {
        background: var(--blue-700);
      }

      .btn-ghost {
        background: var(--card);
        color: var(--ink);
        border-color: var(--line);
      }

      .btn-ghost:hover {
        background: #F5F5F5;
        border-color: var(--line);
      }

      /* ---- secondary action: text only ----
         White label, no fill, no frame -- for use beside a primary CTA on the
         dark hero / photographic CTA panels. It keeps .btn's padding so the tap
         target stays full size (>=44px tall) even though nothing is drawn, and
         it opts out of .btn's lift + shadow, which only read correctly on a
         button that actually has a surface. */
      .btn-secondary {
        background: transparent;
        border-color: transparent;
        color: rgba(255, 255, 255, .82);
        box-shadow: none;
        /* subordinate to the primary: lighter weight, no surface */
        font-weight: 500;
      }

      .btn-secondary:hover {
        color: #fff;
        background: transparent;
        transform: none;
        box-shadow: none;
      }

      .btn-secondary:active {
        color: #fff;
        transform: translateY(0) scale(.99);
      }

      .btn-secondary:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        color: #fff;
      }

      .btn-secondary[disabled],
      .btn-secondary[aria-disabled="true"] {
        color: rgba(255, 255, 255, .38);
        pointer-events: none;
        cursor: default;
      }

      /* on light surfaces the same secondary uses ink instead of white */
      .btn-secondary.on-light {
        color: rgba(10, 10, 10, .66);
      }

      .btn-secondary.on-light:hover,
      .btn-secondary.on-light:active {
        color: var(--ink);
      }

      .btn-secondary.on-light:focus-visible {
        outline-color: var(--blue);
        color: var(--ink);
      }

      .btn-secondary.on-light[disabled],
      .btn-secondary.on-light[aria-disabled="true"] {
        color: rgba(10, 10, 10, .34);
      }

      .btn-lg {
        padding: 16px 28px;
        font-size: 16px;
      }

      .btn .arrow {
        transition: transform .16s ease;
      }

      .btn:hover .arrow {
        transform: translateX(3px);
      }

      /* ---------- PHONE: swipe rows with dots -------------------------------
         One pattern, marked up with `data-m-swipe` on the container, for the
         card rows that stack into a 600-900px column on a phone: the perks on
         careers, the founder cards on about, the shift cards on enterprise.
         Reviewed as "make these slidable with dots underneath that show they
         are slideable. Apply this to all segments like this one".

         Everything here is inside a 640px query, so the desktop grid those rows
         normally form is untouched. The dots are built by assets/site.js from
         the child count, because the number of cards is a property of the page,
         not of this stylesheet.

         88%, not 100%: the sliver of the next card is the second affordance.
         The dots say a row can be swiped; the peek says which way. */
      @media (max-width: 640px) {
        [data-m-swipe] {
          /* Declared as a variable because the trailing spacer below has to
             subtract it: the gap sits between the last card and the spacer, so
             it is part of the trailing space, not extra to it. A row that
             overrides `gap` in a later sheet sets this to the same value so the
             spacer keeps its arithmetic (mg.css does, for the compare row). */
          --m-swipe-gap: 12px;
          display: flex !important;
          gap: var(--m-swipe-gap);
          overflow-x: auto;
          overscroll-behavior-x: contain;
          scroll-snap-type: x mandatory;
          scroll-padding-left: 0;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        [data-m-swipe]::-webkit-scrollbar { display: none; }

        /* The scroller is exactly as tall as its cards, and it has to clip
           horizontally, which means it clips vertically too: every card's
           `0 16px 32px` shadow was cut off square at the row's bottom edge.
           The padding gives the shadow somewhere to fall.

           64px, not 30. Reviewed three times over as "the shadow is cut off by
           the white space underneath": 30px was measured against nothing in
           particular, and the two shadows that ride these rows reach further
           than that -- `.perk` is `0 16px 32px`, so 48px, and `.vis-card` is
           `0 19px 42px`, so 61px. Both were still being sliced flat, which on a
           white section reads as a grey band under the card rather than as a
           shadow. The negative margin hands the extra 34px back to the layout,
           so the dots and everything below them stay exactly where they were. */
        [data-m-swipe] {
          padding-bottom: 64px;
          margin-bottom: -34px;
          /* The row outdents to the screen edge so it can scroll edge to edge,
             which left the first card flush against the glass: reviewed as
             "this looks buggy, leave some space on the left". The inset is
             padding, not margin, so the track still runs the full width and
             only the cards start on the text rail. scroll-padding keeps the
             snap point on that same line. */
          padding-left: 24px;
          padding-right: 24px;
          scroll-padding-left: 24px;
          /* The right inset matters once the last card centres (below): a snap
             port inset on one side only has its centre 12px off the track's,
             which parked that card 24px right of the middle -- measured 56.9px
             of gap on its left against 32.1 on its right. Symmetric now. */
          scroll-padding-right: 24px;
        }

        [data-m-swipe] > * {
          flex: 0 0 88%;
          scroll-snap-align: start;
          min-width: 0;
        }

        /* THE LAST CARD RESTS IN THE MIDDLE.
           Reviewed as "anyone who is scrolling to the last card in all sliders,
           please lock that one in centered and not to the left". Every card
           snaps to the left rail, which is right for all of them but the last:
           there is nothing after it, so a card locked left leaves the 12% peek
           slot empty on its right and the row ends looking like it failed to
           scroll. Centred, that space is split either side of it and reads as
           the end of the set. The trailing spacer below is what gives the
           scroll range this needs; it is unchanged. */
        [data-m-swipe] > *:last-child {
          scroll-snap-align: center;
        }

        /* Reviewed as "make sure that these are all in the same position, they
           start and end at the same height, so that when I swipe through they
           look exactly aligned". Every card in these rows carries `.reveal`,
           which parks it 28px down at opacity 0 until an IntersectionObserver
           adds `.in`. In a horizontal scroller only the first two cards are
           ever in the viewport, so cards three onward kept the parked
           transform for good: measured on #team, cards 1-2 sat at y=104 and
           cards 3-6 at y=132, a permanent 28px step you only see once you
           swipe. The row still reveals as a whole; its children do not animate
           in on their own. */
        [data-m-swipe] > .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }

        /* THE TRAILING SPACER, so every card can reach the same rail.
           Reviewed as "when switching between them, this should scroll" and
           "there should still be a lock-in on the positions": tapping a pager
           step does scroll, but the LAST card could not land where the others
           do. A card is 88% of the track, so the scroll range ran out 54px
           before its left edge reached the 24px rail -- measured on #security,
           cards one and two rested at x=24.0 and x=23.6 and the third at x=78.2.
           The spacer adds the missing range: 12% was exactly the width a card
           leaves over, so the last card could reach the same line as the first.
           It is not a snap target itself, and mandatory snapping means the
           track cannot rest on it.

           6%, not 12%, since the last card started snapping to the CENTRE.
           Centred needs only half that leftover, and the other half was pure
           overscroll past the final snap point -- a place the track can be left
           sitting whenever the browser does not spring back off the end of the
           range (a fling that lands exactly on the boundary is the usual way
           in). Reviewed as "I want the second card to lock in centered and not
           left bound", and that is what the extra 6% looked like: on the
           managed-growth comparison at 568px the run-out parked the second card
           9.6px off the left rail with 100px of nothing to its right, which is
           the same empty-slot failure the centring rule above was written to
           kill. At 6% the range ENDS on the centred position, so the card
           cannot come to rest anywhere else -- the geometry does it, with the
           snap as agreement rather than as the only thing holding it.
           Minus the gap because the gap sits between the last card and this
           spacer: it is part of that 6%, not extra to it. */
        [data-m-swipe]::after {
          content: "";
          flex: 0 0 calc(6% - var(--m-swipe-gap, 12px));
          min-width: 0;
          align-self: stretch;
        }

        /* the row draws its own edges again: a stacked column collapses the
           borders between cards, and side by side they are separate objects */
        [data-m-swipe] > * + * {
          border-top: 1px solid var(--line);
          border-left: 1px solid var(--line);
        }

        /* THE PAGER: grey dots, the current one a step darker.
           Reviewed as "please use the dot system across all mobile designs",
           after a round that had made this the home page's pill-in-a-bar. One
           layer, not two: a position indicator is chrome, so it is a mark on
           the page rather than a control with a track behind it. Light grey for
           the set, a step darker for where you are; blue is reserved for the
           one live mark in a graphic, so a blue dot here would be the loudest
           thing in a quiet row.

           The home page draws the same dot inline for its three carousels
           (#results, #security, #resources), because it does not load this
           file. The two blocks are one component and have to move together.

           The row was landing exactly on the bottom rule of whatever box it
           closes -- on about-us it straddled .leadership-shell's border, half
           above and half below, which is what "placed here at random" was. It
           keeps clear of it. */
        .m-dots {
          position: relative;
          display: flex;
          justify-content: center;
          /* max-content, so the rail's own box starts at the first dot: the
             travelling mark below is positioned from that edge, and a
             full-width row would put left:0 somewhere off in the margin */
          width: max-content;
          margin: 4px auto 20px;
          gap: 7px;
        }

        .m-dots button {
          position: relative;
          width: 7px;
          height: 7px;
          padding: 0;
          border: 0;
          border-radius: 999px;
          background: rgba(10, 10, 10, .16);
          cursor: pointer;
        }

        /* the hit area is 32px around a 7px dot, per the touch-target rule */
        .m-dots button::after {
          content: "";
          position: absolute;
          inset: -12px;
        }

        /* THE MARK TRAVELS.
           Reviewed as "make the button glide from left to right and not jump".
           Position used to be a repaint: the dot you landed on went dark and
           the one you left went light, both in .2s and both in place, so the
           mark had no path between them -- it was simply somewhere else.

           It is one element now. The dots are the track (all of them the light
           tone, at rest), and the rail draws a single dark dot over them that
           translates to the live index. --m-dot is set by assets/site.js on
           every scroll frame, so the mark follows a swipe continuously rather
           than only landing when the snap does; 14px is the pitch, a 7px dot
           and a 7px gap.

           The home page's three carousels carry the same mark inline, because
           that page does not load this file. */
        .m-dots::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 7px;
          height: 7px;
          border-radius: 999px;
          background: rgba(10, 10, 10, .46);
          transform: translateX(calc(var(--m-dot, 0) * 14px));
          transition: transform .38s var(--ease-out-quint, cubic-bezier(.22, 1, .36, 1));
          pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
          .m-dots::after { transition: none; }
        }
      }

      /* above the phone query the dots are not part of the design */
      @media (min-width: 641px) {
        .m-dots { display: none; }
      }

      /* ---------- The docked header ----------------------------------------
         The hero owns a normal document-positioned header that leaves with it.
         A separate fixed copy appears only after the hero is fully offscreen,
         using ink on a light sheet because everything below a hero is paper.

         This was the home page's own block until 2026-08-31, when the behaviour
         was asked for on every page. The state machine that drives it is in
         components/SiteHeader.tsx -- the component that renders the element,
         and the only owner that is created and destroyed with the route.

         The state lives in an ATTRIBUTE, not a class. SiteHeader is a React
         component and renders `className` itself, so it rewrites that property
         on every re-render -- including the one the burger fires. A class added
         imperatively was gone on the first tap of the menu, taking the docked
         bar with it mid-scroll. React does not touch attributes it never
         rendered.
           (absent)  -- part of the hero, scrolls away with it
           "init"    -- pinned off-screen with the transition suppressed, for the
                        single frame that establishes the entrance's start value
           "out"     -- off-screen, transitioning into the docked position
           "in"      -- docked */
      /* Two real headers: the hero copy belongs to the document and scrolls
         away with its section; this second copy is fixed, absent from hit
         testing and the accessibility tree until the hero has fully passed. */
      .nav.nav--dock-copy {
        position: fixed;
        visibility: hidden;
        transform: translateY(-100%);
      }

      /* The persistent copy is mobile navigation only. */
      @media (min-width: 961px) {
        .nav.nav--dock-copy {
          display: none;
        }
      }

      .nav.nav--dock-copy[data-nav-dock] {
        visibility: visible;
        background: #fff;
        border-bottom: 1px solid var(--line);
        transition: transform .38s var(--ease-out-quint);
      }

      .nav.nav--dock-copy[data-nav-dock="init"],
      .nav.nav--dock-copy[data-nav-dock="out"] {
        transform: translateY(-100%);
      }

      .nav.nav--dock-copy[data-nav-dock="init"] {
        transition: none;
      }

      .nav.nav--dock-copy[data-nav-dock="in"] {
        transform: none;
      }

      .nav.nav--dock-copy[data-nav-dock] .nav-logo,
      .nav.nav--dock-copy[data-nav-dock] .nav-links a {
        color: var(--ink);
      }

      .nav.nav--dock-copy[data-nav-dock] .nav-logo .logo-w {
        filter: brightness(0) saturate(100%);
      }

      @media (max-width: 960px) {

        .nav[data-nav-dock] {
          top: 0;
          transition: transform .38s var(--ease-out-quint);
          /* Opaque instead of backdrop-filtered: sampling and blurring the
             moving page under a fixed layer is a costly iOS scroll path. */
          background: #fff;
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
          border-bottom: 1px solid var(--line);
        }

        .nav[data-nav-dock="init"],
        .nav[data-nav-dock="out"] {
          transform: translateY(-100%);
        }

        /* without this the bar animates ITSELF off-screen on the way in */
        .nav[data-nav-dock="init"] {
          transition: none;
        }

        .nav[data-nav-dock="in"] {
          transform: none;
        }

        .nav[data-nav-dock] .nav-pill {
          /* 12px against the hero header's 16px: a bar that follows the reader
             down the whole page gives back the height a one-off opening can
             afford to spend. */
          padding-top: 12px;
          padding-bottom: 12px;
        }

        /* The wordmark ships as a white PNG and is inked rather than swapped,
           the same way .nav--onlight does it below. One asset, so the two tones
           cannot fall out of sync. */
        .nav[data-nav-dock] .nav-logo {
          color: var(--ink);
        }

        .nav[data-nav-dock] .nav-logo .logo-w {
          filter: brightness(0) saturate(100%);
        }

        /* white bars on a translucent white plate: invisible on paper */
        .nav[data-nav-dock] .nav-burger {
          background: var(--card);
          border-color: var(--line);
          margin-left: 0;
        }

        .nav[data-nav-dock] .nav-burger i {
          background: var(--ink);
        }

        /* The docked bar is the one piece of chrome that follows the reader past
           the hero's own form, so it carries the CTA that hero already spent. It
           appears only in this state -- at the top of the page the hero's own
           Book Demo is right there -- and sits between the wordmark and the
           burger. The white-on-artwork .nav-cta recipe is for the hero header;
           on paper it inverts back to the button system's blue. */
        /* Both selectors repeat [data-shared-header] to outrank subpage.css's
           `.nav[data-shared-header] .nav-cta { display: none }`, which is the
           rule that takes the CTA out of the hero header below 960px. It sits at
           the same specificity as a plain .nav[data-nav-dock] rule and loads
           after this sheet, so it won by order and the docked bar came back
           without its button. */
        .nav[data-shared-header][data-nav-dock] .nav-cta {
          display: flex;
          margin-left: auto;
        }

        .nav[data-shared-header][data-nav-dock] .nav-cta .btn-blue {
          min-width: 0;
          height: 40px;
          padding: 8px 15px;
          font-size: 14px;
          background: var(--blue);
          color: #fff;
          box-shadow: none;
        }

        /* Any in-page anchor landing under the bar would put the target's first
           line behind it. */
        html {
          scroll-padding-top: 78px;
        }
      }

      @media (max-width: 640px) {
        /* flush under the pill, on the frame the button that opens it sits on */
        .nav .nav-menu {
          left: 24px;
          right: 24px;
          top: 100%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .nav[data-nav-dock] {
          transition: none;
        }
      }

      /* ---------- Transparent full-width nav ---------- */
      .nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: block;
        pointer-events: none;
        /* The global header is a stable piece of chrome across page loads. */
        transition: none;
      }

      .nav-pill {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 22px 32px;
        transition: none;
        justify-content: flex-start;
      }

      .nav.scrolled {
        transform: none;
        opacity: 1;
        pointer-events: auto;
      }

      @media (max-width: 760px) {
        .nav-pill {
          padding: 16px 20px;
        }
      }

      .nav-logo {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        color: #fff;
      }

      .nav-logo .nav-mark {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        background: transparent;
        border-radius: 0;
        width: 89px;
        height: 22px;
        overflow: visible;
      }

      .nav-logo .nav-mark img {
        display: block;
        height: 22px;
        width: 89px;
        object-fit: contain;
        object-position: left center;
        max-width: none;
        transition: none;
      }

      .nav-logo .nav-word {
        font-family: var(--sans);
        font-weight: 600;
        font-size: 24px;
        letter-spacing: -.02em;
        color: #fff;
      }

      .nav-sep {
        display: none;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 6px;
        /* The 28px header gutter lives before the logo so the complete
           wordmark starts on the inner rail. Keeping it out of this gap
           leaves the menu and its dropdown in their established position. */
        margin-left: 12px;
      }

      .nav-links a {
        /* index.html: var(--fs-body). This copy kept 16px (DESIGN-BOOK §13) */
        font-size: var(--fs-body);
        font-weight: 500;
        color: rgba(255, 255, 255, .92);
        padding: 8px 14px;
        border-radius: var(--pill);
        transition: background .15s ease, color .15s ease;
      }

      .nav-links a:hover {
        background: rgba(255, 255, 255, .14);
        color: #fff;
      }

      .caret {
        width: 13px;
        height: 13px;
        opacity: .6;
      }

      .nav-item {
        position: relative;
      }

      .nav-item>a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .dropdown::before {
        /* invisible hover bridge across the gap to the trigger */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -22px;
        height: 22px;
      }

      .dropdown {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        transform: translateY(8px);
        width: 440px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, transform .18s ease;
        box-shadow: var(--shadow-lg);
      }

      .nav-item:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown a {
        display: flex;
        gap: 13px;
        padding: 14px;
        border-radius: var(--r);
      }

      .dropdown a:hover {
        background: var(--cream);
      }

      .dd-ico {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid rgba(10, 10, 10, .12);
        color: var(--ink);
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }

      .dd-title {
        display: block;
        font-weight: 500;
        font-size: 14.5px;
        color: var(--ink);
        margin-bottom: 3px;
      }

      .dd-desc {
        display: block;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.45;
      }

      .nav-cta {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
      }

      .nav-cta .btn-blue {
        background: #fff;
        color: var(--ink);
        /* was radius 4px + padding 8px 28px !important, which overrode the
           button system and made the nav CTA the one button on the page with a
           different corner. DESIGN-BOOK 6.1 specifies 8px / 9px 18px. */
        border-radius: 8px;
        padding: 9px 18px;
        min-width: 124px;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.2;
        text-align: center;
        box-shadow: 0 4px 16px rgba(10, 10, 10, .12);
      }

      .nav-cta .btn-blue:hover {
        background: #f1f1f1;
      }

      /* ---------- Hero (full-bleed cinematic) ---------- */
      /* Scroll-scrubbed video hero: tall track pins the hero and scrubs the clip */
      .hero-scroll {
        position: relative;
      }

      .hero {
        position: relative;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        overflow: hidden;
        color: #fff;
        padding: 0;
        background: #1b46cf;
      }

      .hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 72% center;
        z-index: 0;
        pointer-events: none;
      }

      .hero .hero-inner,
      .hero .capture {
        transition: opacity .25s ease;
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url('assets/cdn/MDs82AjUGckgg5ktxZY4oQXd7Vxb3BZsawupeCdHwkQ8QPtEsOS2InEwjlyFftoN.webp');
        background-size: cover;
        background-position: center;
        transform: scale(1.05);
      }

      .hero-bg::after {
        display: none !important;
        content: none !important;
      }

      .hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 1200px;
        /* content left edge sits exactly on the global text-margin rail */
        padding: 0 32px;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
        margin-right: auto;
      }

      @media (max-width: 760px) {
        .hero-inner {
          padding: 0 16px;
          margin-left: 0;
        }
      }

      /* ---------- hero motif: white continuations of the page rails over the
         image, horizontals JS-pinned to touch the text/components ---------- */
      .hero-motif {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
      }

      .hero-motif i {
        position: absolute;
        display: block;
      }

      .hero-motif .mf-v {
        top: 0;
        bottom: 0;
        width: 1px;
      }

      /* hero sits 24px in from the viewport, so the global text-margin rail
         is the measured rail position minus 24px here */
      .hero-motif .mf-vl {
        left: calc(var(--rail-il, max(32px, 50vw - 568px)) - var(--rail-o, 24px));
        background: rgba(255, 255, 255, .13);
      }

      .hero-motif .mf-vr {
        right: calc(var(--rail-ir, max(32px, 50vw - 568px)) - var(--rail-o, 24px));
        background: rgba(255, 255, 255, .10);
      }

      .hero-motif .mf-h {
        left: 0;
        right: 0;
        height: 1px;
        transition: none;
        animation: none;
      }

      /* small lines above and below the header row */
      .hero-motif .mf-nt {
        top: var(--mf-nt, 24px);
        background: rgba(255, 255, 255, .10);
      }

      .hero-motif .mf-nb {
        top: var(--mf-nb, 96px);
        background: rgba(255, 255, 255, .10);
      }

      /* touches the top of the logo ticker */
      .hero-motif .mf-hb {
        top: var(--mf-hb, auto);
        background: rgba(255, 255, 255, .10);
      }

      /* touch the headline block top and the capture bottom */
      .hero-motif .mf-hc1 {
        top: var(--mf-c1, 278px);
        background: rgba(255, 255, 255, .07);
      }

      .hero-motif .mf-hc2 {
        top: var(--mf-c2, 561px);
        background: rgba(255, 255, 255, .07);
      }

      .mf-stamp {
        position: absolute;
        left: 0;
        width: calc(var(--rail-il, max(32px, 50vw - 568px)) - var(--rail-o, 24px));
        display: flex;
        align-items: center;
        justify-content: center;
        height: 62px;
        font-family: var(--sans);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .14em;
        line-height: 1;
        white-space: nowrap;
      }

      .mf-stamp-tl {
        top: 40px;
        color: rgba(255, 255, 255, .72);
      }

      .mf-stamp-br {
        left: auto;
        right: 0;
        bottom: 40px;
        color: rgba(255, 255, 255, .9);
      }

      @media (max-width: 900px) {
        .hero-motif {
          display: none;
        }
      }

      /* continuous page rails: two verticals left, two right, full page height.
         z-index -1 paints them under every container, so the inner lines are
         hidden wherever a visible container would be cut through. */
      .page-rails {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
      }

      .page-rails i {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        display: block;
        background: rgba(10, 16, 60, .07);
      }

      /* outer pair: the very edge every container/image sits on */
      .page-rails .pr-l {
        left: var(--rail-o, 24px);
      }

      .page-rails .pr-r {
        right: var(--rail-o, 24px);
      }

      /* inner pair: the text margin (logo, headings, copy). Positions come
         from --rail-il/--rail-ir, measured off the real rendered layout by JS
         (scrollbar-proof); the 50vw formula is only a no-JS fallback. */
      .page-rails .pr-il {
        left: var(--rail-il, max(32px, calc(50vw - 568px)));
        background: rgba(10, 16, 60, .06);
      }

      .page-rails .pr-ir {
        right: var(--rail-ir, max(32px, calc(50vw - 568px)));
        background: rgba(10, 16, 60, .06);
      }

      @media (max-width: 1100px) {
        .page-rails {
          display: none;
        }
      }

      .hero .label {
        font-family: var(--sans);
        font-size: clamp(18px, 1.9vw, 26px);
        font-weight: 400;
        letter-spacing: -.01em;
        color: rgba(255, 255, 255, .96);
        margin-bottom: 8px;
      }

      .hero h1 {
        color: #fff;
        font-family: var(--sans);
        font-weight: 400;
        font-size: clamp(38px, 6vw, 80px);
        line-height: 1.04;
        letter-spacing: -.02em;
        text-shadow: 0 2px 24px rgba(8, 28, 67, .30);
        max-width: 14ch;
      }

      .hero h1 .serif-i {
        display: block;
        font-style: normal;
      }

      /* ---------- Hero activity card deal (lassie-style) ---------- */
      /* Lassie-style subtle status ticker */
      .deal-stack {
        position: relative;
        width: auto;
        max-width: 90vw;
        height: 26px;
        margin: 26px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .deal-card {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        color: rgba(255, 255, 255, .78);
        text-align: left;
        white-space: nowrap;
        will-change: transform, opacity;
        opacity: 0;
      }

      .deal-card .dc-ico {
        width: 15px;
        height: 15px;
        border-radius: 0;
        background: none;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        opacity: .7;
      }

      .deal-card .dc-ico svg {
        width: 15px;
        height: 15px;
      }

      .deal-card .dc-ico svg [stroke] {
        stroke: rgba(255, 255, 255, .78);
      }

      .deal-card .dc-ico svg [fill]:not([fill="none"]) {
        fill: rgba(255, 255, 255, .78);
      }

      .deal-card .dc-body {
        flex: none;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .deal-card .dc-text {
        display: inline;
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1;
        color: rgba(255, 255, 255, .82);
        letter-spacing: .005em;
      }

      .deal-card .dc-time {
        display: none;
      }

      .deal-card .dc-check {
        display: none;
      }

      @keyframes dealIn {
        0% {
          opacity: 0;
          transform: translate(-50%, calc(-50% + 10px));
          filter: blur(2px);
        }

        100% {
          opacity: 1;
          transform: translate(-50%, -50%);
          filter: blur(0);
        }
      }

      @keyframes dealOut {
        0% {
          opacity: 1;
          transform: translate(-50%, -50%);
          filter: blur(0);
        }

        100% {
          opacity: 0;
          transform: translate(-50%, calc(-50% - 10px));
          filter: blur(2px);
        }
      }

      .deal-card.dealing {
        animation: dealIn .7s var(--ease-out-quint) forwards;
      }

      .deal-card.leaving {
        animation: dealOut .6s var(--ease-in-out-quart) forwards;
      }

      .deal-card.landed {
        opacity: 1;
      }

      /* moving client-logo marquee (left to right) */
      .logo-marquee {
        margin-top: 32px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      }

      .logo-row {
        display: flex;
        align-items: center;
        gap: 84px;
        width: max-content;
        animation: logoflow 48s linear infinite;
      }

      .logo-marquee:hover .logo-row {
        animation-play-state: paused;
      }

      .logo-row img {
        height: 30px;
        width: auto;
        opacity: .55;
        filter: grayscale(1);
        transition: opacity .4s var(--ease-micro), filter .4s var(--ease-micro);
      }

      .logo-row img:hover {
        opacity: 1;
        filter: grayscale(0);
      }

      @keyframes logoflow {
        from {
          transform: translateX(-50%);
        }

        to {
          transform: translateX(0);
        }
      }

      /* inline email capture pill */
      .capture {
        position: relative;
        margin-top: 34px;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 4px;
        /* steel-blue glass: a brand-blue tint under a soft white lift keeps the
           pill periwinkle even where the photo behind is bright cyan */
        /* Figma glass spec: fill FFFFFF 20% over frost; light blue tint keeps
           the hue steel even where the photo brightens */
        background:
          linear-gradient(rgba(255, 255, 255, .20), rgba(255, 255, 255, .20)),
          linear-gradient(rgba(42, 68, 210, .26), rgba(42, 68, 210, .26));
        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 16px;
        padding: 5px 5px 5px 18px;
        overflow: hidden;
        isolation: isolate;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -1px 0 rgba(255, 255, 255, .16), 0 12px 34px rgba(8, 12, 40, .18);
      }

      /* Apple-style frosted material: blur extends past the box so nearby
         content bleeds into the glass */
      .capture::before {
        content: "";
        position: absolute;
        inset: -28px;
        z-index: -1;
        -webkit-backdrop-filter: blur(26px) saturate(112%) brightness(1.02);
        backdrop-filter: blur(26px) saturate(112%) brightness(1.02);
        pointer-events: none;
      }

      /* Keep the hero field in the hero's normal paint layer on phones. The
         gradient surface remains; only WebKit's fragile isolated blur layer is
         removed. */
      @media (max-width: 640px) {
        #heroScroll .hero .capture {
          isolation: auto;
          transition: none;
        }

        #heroScroll .hero .capture::before {
          content: none;
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }
      }

      .capture .btn {
        border-radius: 10px;
      }

      .capture input {
        border: none;
        background: transparent;
        outline: none;
        font-family: var(--sans);
        font-size: 16px;
        color: #fff;
        padding: 12px 4px 12px 16px;
        width: 190px;
      }

      .capture input::placeholder {
        color: rgba(255, 255, 255, .82);
      }

      .capture .btn-blue {
        background: #fff;
        color: var(--ink);
        border-radius: 10px;
        padding: 12px 22px;
        font-weight: 600;
        box-shadow: 0 2px 10px rgba(8, 12, 40, .16);
      }

      .capture .btn-blue:hover {
        background: #f1f1f1;
      }

      /* ---------- Logo proof ---------- */
      .proof {
        padding: 50px 0;
      }

      .proof p {
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .04em;
        color: var(--muted);
      }

      .proof-row {
        margin-top: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 54px;
        flex-wrap: wrap;
      }

      .proof-row img {
        height: 27px;
        width: auto;
        opacity: .55;
        filter: grayscale(1);
        transition: opacity .2s, filter .2s;
      }

      .proof-row img:hover {
        opacity: 1;
        filter: grayscale(0);
      }

      /* ---------- Feature rows ---------- */
      .feature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;
      }

      .feature+.feature {
        margin-top: 140px;
      }

      /* ===== Self-optimizing: personalization morph ===== */
      .morph {
        position: relative;
        background: var(--cream);
        border: 1px solid var(--line);
        border-radius: var(--r-xl);
        padding: 30px 28px;
        aspect-ratio: 1.16;
        overflow: hidden;
      }

      .morph .morph-cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 16px;
        text-align: center;
        font-size: 12.5px;
        color: var(--muted);
        font-weight: 500;
        transition: opacity .8s var(--ease-out-quint);
      }

      .morph .m-rows {
        position: absolute;
        inset: 30px 28px 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
      }

      .m-row {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .m-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(22, 21, 15, .14);
      }

      .m-tile {
        flex: 1;
        height: 38px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink);
        background: #fff;
        border: 1px solid var(--line);
      }

      .m-link {
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: var(--line);
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
      }

      .m-link::after {
        content: "";
        position: absolute;
        top: -1px;
        left: -6px;
        width: 6px;
        height: 4px;
        border-radius: 2px;
        background: var(--accent-c, var(--blue));
        opacity: .9;
        animation: mflow 4.2s cubic-bezier(.45, 0, .2, 1) infinite;
      }

      @keyframes mflow {
        from {
          left: -6px;
        }

        to {
          left: 22px;
        }
      }

      /* avatar accent colors */
      .m-a-a {
        background: #C2723A;
      }

      .m-a-b {
        background: #3F8F5E;
      }

      .m-a-c {
        background: #5B5BD6;
      }

      .m-a-d {
        background: #C2456E;
      }

      /* State A: crammed cluster, desaturated, jittering */
      .morph .m-cluster {
        position: absolute;
        left: 26px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
      }

      .morph .m-cluster .m-avatar {
        margin-left: -17px;
        animation: mjitter 9s ease-in-out infinite;
        filter: saturate(.5);
      }

      .morph .m-cluster .m-avatar:first-child {
        margin-left: 0;
      }

      .morph .m-cluster .m-avatar:nth-child(1) {
        transform: rotate(-6deg) translateY(-3px);
      }

      .morph .m-cluster .m-avatar:nth-child(2) {
        animation-delay: -1.1s;
        transform: rotate(4deg) translateY(4px);
      }

      .morph .m-cluster .m-avatar:nth-child(3) {
        animation-delay: -2.6s;
        transform: rotate(-3deg) translateY(-5px);
      }

      .morph .m-cluster .m-avatar:nth-child(4) {
        animation-delay: -4.2s;
        transform: rotate(7deg) translateY(2px);
      }

      @keyframes mjitter {

        0%,
        100% {
          margin-top: 0;
        }

        25% {
          margin-top: -1px;
        }

        50% {
          margin-top: .8px;
        }

        75% {
          margin-top: -.5px;
        }
      }

      /* the shared single funnel (state A): one messy, misaligned journey for all */
      .morph .m-shared {
        position: absolute;
        left: 92px;
        right: 28px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 9px;
        filter: saturate(.45);
        transition: opacity .9s var(--ease-in-out-quart);
      }

      .morph .m-shared .m-tile {
        background: #f1efe9;
        color: var(--muted);
      }

      .morph .m-shared .m-tile:nth-child(1) {
        transform: translateY(-15px) rotate(-5deg);
      }

      .morph .m-shared .m-tile:nth-child(3) {
        transform: translateY(11px) rotate(4deg);
      }

      .morph .m-shared .m-tile:nth-child(5) {
        transform: translateY(-7px) rotate(-3deg);
      }

      .morph .m-shared .m-link {
        background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
      }

      .morph .m-shared .m-link::after {
        display: none;
      }

      /* scan line sweep */
      .morph .m-scan {
        position: absolute;
        left: 0;
        right: 0;
        top: -10%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--signal), transparent);
        box-shadow: 0 0 18px 3px rgba(57, 187, 255, .5);
        opacity: 0;
      }

      .morph.run .m-scan {
        animation: mscan 13s var(--ease-in-out-quart) infinite;
      }

      @keyframes mscan {

        0%,
        32% {
          opacity: 0;
          top: -10%;
        }

        36% {
          opacity: 1;
        }

        47% {
          top: 110%;
          opacity: 1;
        }

        51%,
        100% {
          opacity: 0;
          top: 110%;
        }
      }

      /* state cross-fade driven by .run cycle */
      .morph .state-a {
        opacity: 1;
      }

      .morph .state-b {
        opacity: 0;
      }

      .morph.run .state-a {
        animation: stateA 13s var(--ease-in-out-quart) infinite;
      }

      .morph.run .state-b {
        animation: stateB 13s var(--ease-in-out-quart) infinite;
      }

      @keyframes stateA {

        0%,
        36% {
          opacity: 1;
        }

        50%,
        93% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      @keyframes stateB {

        0%,
        44% {
          opacity: 0;
        }

        56%,
        91% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }

      /* State B: scattered pieces resolve into a tailored, aligned funnel per client */
      .morph .m-rows.state-b .m-row:nth-child(1) {
        transform: translate(-12px, -5px) rotate(-2deg);
      }

      .morph .m-rows.state-b .m-row:nth-child(2) {
        transform: translate(10px, 3px) rotate(1.5deg);
      }

      .morph .m-rows.state-b .m-row:nth-child(3) {
        transform: translate(-8px, 5px) rotate(-1.4deg);
      }

      .morph .m-rows.state-b .m-row:nth-child(4) {
        transform: translate(11px, -4px) rotate(2deg);
      }

      .morph.run .m-rows.state-b .m-row {
        animation: mrowIn 1.8s var(--ease-out-quint) forwards;
      }

      .morph.run .m-rows.state-b .m-row:nth-child(1) {
        animation-delay: 0s;
      }

      .morph.run .m-rows.state-b .m-row:nth-child(2) {
        animation-delay: .22s;
      }

      .morph.run .m-rows.state-b .m-row:nth-child(3) {
        animation-delay: .44s;
      }

      .morph.run .m-rows.state-b .m-row:nth-child(4) {
        animation-delay: .66s;
      }

      @keyframes mrowIn {
        to {
          transform: translate(0, 0) rotate(0);
        }
      }

      /* every stage is uniquely branded to the client: ad, page and checkout all change */
      .morph .state-b .m-row .m-tile {
        position: relative;
        padding-left: 14px;
        justify-content: flex-start;
      }

      .morph .state-b .m-row .m-tile::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 3px;
        background: var(--accent-c, var(--blue));
      }

      @media (prefers-reduced-motion: reduce) {

        .morph .m-scan,
        .morph .m-cluster .m-avatar,
        .m-link::after {
          animation: none !important;
        }

        .morph .state-a {
          opacity: 0 !important;
        }

        .morph .state-b {
          opacity: 1 !important;
        }
      }

      .feature.flip .feature-media {
        order: 2;
      }

      .feature h2 {
        margin: 16px 0 18px;
      }

      .feature p {
        color: var(--muted);
        font-size: 17px;
        line-height: 1.6;
        max-width: 460px;
      }

      .feature .stat-callout {
        margin-top: 16px;
        font-family: var(--serif);
        font-size: clamp(22px, 2.4vw, 30px);
        color: var(--blue);
        line-height: 1;
        max-width: none;
      }

      .feature .stat-callout .countup {
        font-variant-numeric: tabular-nums;
      }

      .feature .mini {
        margin-top: 26px;
        display: grid;
        gap: 12px;
      }

      .feature .mini li {
        list-style: none;
        display: flex;
        gap: 11px;
        align-items: flex-start;
        font-size: 15.5px;
        color: var(--text);
      }

      .feature-media {
        position: relative;
      }

      .media-card {
        border-radius: var(--r-xl);
        overflow: hidden;
        background: var(--card);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 22px;
      }

      .media-card.cream {
        background: var(--cream);
      }

      .aud-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .aud-row {
        display: flex;
        align-items: center;
        gap: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-left: 4px solid var(--accent-c, var(--blue));
        border-radius: 14px;
        padding: 14px 16px;
      }

      .aud-av {
        width: 38px;
        height: 38px;
        flex: none;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: var(--sans);
        font-weight: 700;
        font-size: 15px;
        color: #fff;
        background: var(--accent-c, var(--blue));
      }

      .aud-meta {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
      }

      .aud-meta b {
        font-size: 15px;
      }

      .aud-meta span {
        font-size: 13px;
        color: var(--muted);
      }

      .aud-cap {
        margin-top: 16px;
        font-family: var(--sans);
        font-size: 13px;
        color: var(--muted);
        text-align: center;
      }

      .media-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .media-grid img {
        border-radius: 14px;
        border: 1px solid var(--line);
      }

      .media-pad {
        padding: 30px;
      }

      .float-chip {
        position: absolute;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--pill);
        padding: 11px 16px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
        box-shadow: var(--shadow-lg);
        display: inline-flex;
        align-items: center;
        gap: 9px;
      }

      .float-chip .k {
        color: var(--blue);
        font-weight: 700;
      }

      .float-chip .live {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #18B86B;
      }

      /* ===== Steering: deliver across channels graphic ===== */
      .deliver {
        position: relative;
        aspect-ratio: 1.14;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 18px;
      }

      .deliver-src {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(22, 21, 15, .05);
      }

      .deliver-src .thumb {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: linear-gradient(135deg, var(--blue), #6f8cff);
        flex-shrink: 0;
      }

      .deliver-src .src-stack {
        position: relative;
        width: 56px;
        height: 46px;
        flex-shrink: 0;
      }

      .deliver-src .src-stack span {
        position: absolute;
        border-radius: 7px;
        border: 1px solid var(--line);
        box-shadow: 0 4px 12px rgba(22, 21, 15, .1);
        overflow: hidden;
      }

      /* landing page peeking behind */
      .deliver-src .src-lp {
        width: 30px;
        height: 40px;
        right: 0;
        top: 3px;
        background: #fff;
        transform: rotate(8deg);
      }

      .deliver-src .src-lp::before {
        content: "";
        position: absolute;
        inset: 4px 4px auto 4px;
        height: 9px;
        border-radius: 2px;
        background: linear-gradient(135deg, #C9A7E8, #9b7fd0);
      }

      .deliver-src .src-lp::after {
        content: "";
        position: absolute;
        left: 4px;
        right: 8px;
        top: 17px;
        height: 2.5px;
        border-radius: 2px;
        background: var(--line);
        box-shadow: 0 5px 0 var(--line), 0 10px 0 var(--line);
      }

      /* the real ad creative in front */
      .deliver-src .src-ad {
        width: 34px;
        height: 44px;
        left: 0;
        top: 1px;
        background: #fff;
        transform: rotate(-6deg);
        display: flex;
        flex-direction: column;
      }

      .deliver-src .src-ad .ad-photo {
        flex: 1;
        background-color: #001;
        background-image: url('backgrounds/21.webp');
        background-size: cover;
        background-position: center;
        position: relative;
      }

      .deliver-src .src-ad .ad-mark {
        position: absolute;
        left: 3px;
        top: 3px;
        width: 12px;
        height: 12px;
        border-radius: 3px;
        background: var(--blue);
        display: grid;
        place-items: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
      }

      .deliver-src .src-ad .ad-mark svg {
        width: 8px;
        height: 8px;
        display: block;
      }

      .deliver-src .src-ad .ad-cta {
        height: 7px;
        margin: 2px;
        border-radius: 2px;
        background: var(--blue);
      }

      .deliver-src .meta {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .deliver-src .meta b {
        font-size: 13px;
        color: var(--ink);
        font-weight: 650;
      }

      .deliver-src .meta span {
        font-size: 11.5px;
        color: var(--muted);
      }

      .deliver-src .pulse {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        color: #18B86B;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .deliver-src .pulse i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #18B86B;
        animation: dpulse 3.6s ease-in-out infinite;
      }

      @keyframes dpulse {

        0%,
        100% {
          opacity: .35;
        }

        50% {
          opacity: 1;
        }
      }

      .deliver-flow {
        position: relative;
      }

      .deliver-flow>svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
      }

      .deliver-flow .wire {
        fill: none;
        stroke: var(--line);
        stroke-width: 1.5;
      }

      .deliver-flow .spark {
        fill: none;
        stroke: var(--blue);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 20 360;
        stroke-dashoffset: 380;
        opacity: .85;
      }

      .deliver.run .deliver-flow .spark {
        animation: dspark 7.2s cubic-bezier(.45, 0, .2, 1) infinite;
      }

      .deliver.run .deliver-flow .spark.s2 {
        animation-delay: 1.8s;
      }

      .deliver.run .deliver-flow .spark.s3 {
        animation-delay: 3.6s;
      }

      .deliver.run .deliver-flow .spark.s4 {
        animation-delay: 5.4s;
      }

      @keyframes dspark {
        0% {
          stroke-dashoffset: 380;
        }

        70%,
        100% {
          stroke-dashoffset: 0;
        }
      }

      /* left rail (balken): a slow stream of ads waiting to deploy */
      .deliver-rail {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 58px;
        z-index: 2;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(22, 21, 15, .05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .deliver-rail .rail-label {
        font-family: var(--sans);
        font-size: 8.5px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: center;
        padding: 7px 0 5px;
        border-bottom: 1px solid var(--line);
        background: var(--cream);
      }

      .deliver-rail .rail-track {
        position: relative;
        flex: 1;
        overflow: hidden;
      }

      .deliver-rail .rail-track::before,
      .deliver-rail .rail-track::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 22px;
        z-index: 2;
        pointer-events: none;
      }

      .deliver-rail .rail-track::before {
        top: 0;
        background: linear-gradient(#fff, transparent);
      }

      .deliver-rail .rail-track::after {
        bottom: 0;
        background: linear-gradient(transparent, #fff);
      }

      .deliver-rail .rail-flow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        will-change: transform;
      }

      .deliver.run .deliver-rail .rail-flow {
        animation: railflow 24s linear infinite;
      }

      @keyframes railflow {
        from {
          transform: translateY(0);
        }

        to {
          transform: translateY(-50%);
        }
      }

      .deliver-rail .rail-ad {
        width: 38px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 5px;
        border: 1px solid var(--line);
        background: #fff;
        overflow: hidden;
        box-shadow: 0 3px 9px rgba(22, 21, 15, .08);
        display: flex;
        flex-direction: column;
      }

      .deliver-rail .rail-ad .r-img {
        flex: 1;
        background-image: url('backgrounds/21.webp');
        background-size: cover;
        background-position: center;
      }

      .deliver-rail .rail-ad .r-cta {
        height: 7px;
        margin: 2px;
        border-radius: 2px;
        background: var(--blue);
      }

      .deliver-rail .rail-ad.v2 .r-img,
      .deliver-rail .rail-ad.v4 .r-img {
        filter: brightness(.12) saturate(.65);
      }

      .deliver-channels {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 10px;
      }

      .dchan {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 13px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        min-width: 168px;
        box-shadow: 0 6px 18px rgba(22, 21, 15, .05);
        opacity: 0;
        transform: translateX(16px);
      }

      .deliver.run .dchan {
        animation: dchanIn 1.5s var(--ease-out-quint) forwards;
      }

      .deliver.run .dchan:nth-child(1) {
        animation-delay: .25s;
      }

      .deliver.run .dchan:nth-child(2) {
        animation-delay: .7s;
      }

      .deliver.run .dchan:nth-child(3) {
        animation-delay: 1.15s;
      }

      .deliver.run .dchan:nth-child(4) {
        animation-delay: 1.6s;
      }

      @keyframes dchanIn {
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .dchan .dch-ic {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 3px 9px rgba(22, 21, 15, .07);
        font-size: 15px;
        font-weight: 800;
        font-family: var(--sans);
      }

      .dchan .dch-ic svg {
        position: static;
        width: 18px;
        height: 18px;
        display: block;
      }

      .dchan .dch-ic b {
        line-height: 1;
      }

      .dchan .dch-ad {
        width: 22px;
        height: 28px;
        border-radius: 4px;
        flex-shrink: 0;
        border: 1px solid var(--line);
        background: #fff;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(22, 21, 15, .08);
        display: flex;
        flex-direction: column;
      }

      .dchan .dch-ad .a-img {
        flex: 1;
        background-image: url('backgrounds/21.webp');
        background-size: cover;
        background-position: center;
      }

      .dchan .dch-ad .a-cta {
        height: 5px;
        margin: 1.5px;
        border-radius: 1.5px;
        background: var(--blue);
      }

      .dchan .dch-ad.v2 .a-img,
      .dchan .dch-ad.v4 .a-img {
        filter: brightness(.12) saturate(.65);
      }

      .dchan .dch-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.2;
      }

      .dchan .dch-meta b {
        font-size: 12.5px;
        color: var(--ink);
        font-weight: 650;
      }

      .dchan .dch-meta span {
        font-size: 11px;
        color: var(--muted);
      }

      .dchan .dch-bar {
        margin-left: auto;
        width: 4px;
        align-self: stretch;
        border-radius: 4px;
        background: var(--line);
        position: relative;
        overflow: hidden;
      }

      .dchan .dch-bar i {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #18B86B;
        height: 0;
      }

      .deliver.run .dchan .dch-bar i {
        animation: dbar 2.2s var(--ease-out-quint) forwards;
      }

      .deliver.run .dchan:nth-child(1) .dch-bar i {
        animation-delay: 1.2s;
      }

      .deliver.run .dchan:nth-child(2) .dch-bar i {
        animation-delay: 1.65s;
      }

      .deliver.run .dchan:nth-child(3) .dch-bar i {
        animation-delay: 2.1s;
      }

      .deliver.run .dchan:nth-child(4) .dch-bar i {
        animation-delay: 2.55s;
      }

      .dchan.win {
        border-color: rgba(24, 184, 107, .5);
      }

      @keyframes dbar {
        to {
          height: var(--h, 60%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .deliver .dchan {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
        }

        .deliver .spark,
        .deliver-src .pulse i,
        .dchan .dch-bar i,
        .deliver-rail .rail-flow {
          animation: none !important;
        }

        .deliver .spark {
          opacity: .85;
          stroke-dashoffset: 0;
        }

        .dchan .dch-bar i {
          height: var(--h, 60%);
        }
      }

      @media (max-width: 560px) {
        .dchan {
          min-width: 0;
        }
      }

      /* dashboard-ish mock */
      .dash {
        background: var(--ink);
        border-radius: var(--r-xl);
        padding: 26px;
        color: #fff;
      }

      .dash-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
      }

      .dash-top .t {
        font-family: var(--sans);
        font-size: 14px;
        color: rgba(255, 255, 255, .6);
      }

      .dash-top .t.accent {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

      .dash-top .t.accent::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--signal);
        box-shadow: 0 0 0 0 rgba(57, 187, 255, .5);
        animation: dashlive 3.6s ease-in-out infinite;
      }

      @keyframes dashlive {

        0%,
        100% {
          opacity: .5;
          box-shadow: 0 0 0 0 rgba(57, 187, 255, .45);
        }

        50% {
          opacity: 1;
          box-shadow: 0 0 0 5px rgba(57, 187, 255, 0);
        }
      }

      .dash-bars {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        height: 150px;
      }

      .dash-bars span {
        flex: 1;
        background: rgba(255, 255, 255, .14);
        border-radius: 8px 8px 0 0;
        transition: background .6s var(--ease-micro);
      }

      .dash-bars span.hot {
        background: linear-gradient(180deg, var(--signal), rgba(57, 187, 255, .7));
        box-shadow: 0 0 22px rgba(57, 187, 255, .35);
      }

      .dash-row {
        display: flex;
        gap: 10px;
        margin-top: 22px;
      }

      .dash-stat {
        flex: 1;
        background: rgba(255, 255, 255, .06);
        border-radius: 14px;
        padding: 16px;
      }

      .dash-stat .n {
        font-family: var(--serif);
        font-size: 28px;
        font-variant-numeric: tabular-nums;
      }

      .dash-stat .l {
        font-size: 12px;
        color: rgba(255, 255, 255, .55);
        margin-top: 4px;
      }

      /* ---------- Loop cards ---------- */
      .loop {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }

      .loop-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 30px;
        position: relative;
        overflow: hidden;
        transition: transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint), border-color .5s var(--ease-out-quint);
      }

      .loop-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--blue), var(--signal));
        opacity: .8;
      }

      .loop-card:nth-child(1) {
        background: linear-gradient(165deg, #F4F1FF, var(--card) 55%);
      }

      .loop-card:nth-child(2) {
        background: linear-gradient(165deg, #EEF6FF, var(--card) 55%);
      }

      .loop-card:nth-child(3) {
        background: linear-gradient(165deg, #FFF6EC, var(--card) 55%);
      }

      .loop-card:nth-child(4) {
        background: linear-gradient(165deg, #ECFBF3, var(--card) 55%);
      }

      .loop-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(26, 68, 255, .2);
      }

      .loop-card .n {
        font-size: 13px;
        font-weight: 700;
        color: var(--blue);
        letter-spacing: .04em;
      }

      .loop-card h3 {
        font-size: 20px;
        margin: 18px 0 10px;
      }

      .loop-card p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.55;
      }

      .loop-foot {
        text-align: center;
        margin-top: 40px;
        font-size: 15px;
        color: var(--muted);
      }

      /* ---------- Work gallery ---------- */
      .gallery {
        columns: 4;
        column-gap: 18px;
      }

      .gallery .tile {
        break-inside: avoid;
        margin-bottom: 18px;
        border-radius: var(--r);
        overflow: hidden;
        border: 1px solid var(--line);
        background: #fff;
        box-shadow: var(--shadow);
        position: relative;
        transition: transform .25s ease;
      }

      .gallery .tile:hover {
        transform: translateY(-4px);
      }

      .gallery .tile img {
        width: 100%;
      }

      .tile-tag {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 11px;
        font-weight: 600;
        background: rgba(22, 21, 15, .74);
        color: #fff;
        padding: 5px 10px;
        border-radius: var(--pill);
        backdrop-filter: blur(4px);
      }

      .tile-tag.lp {
        background: var(--blue);
      }

      .gallery-wrap {
        position: relative;
      }

      .gallery-quote {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(640px, 86%);
        z-index: 3;
        background: rgba(255, 255, 255, .62);
        backdrop-filter: saturate(180%) blur(22px);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: var(--r-lg);
        box-shadow: 0 40px 100px rgba(22, 21, 15, .22);
        padding: 54px 58px;
        text-align: center;
        pointer-events: none;
      }

      .gallery-quote p {
        font-family: var(--serif);
        font-size: clamp(22px, 2.5vw, 30px);
        line-height: 1.32;
        color: var(--ink);
        letter-spacing: -.01em;
      }

      .gallery-quote .gq-by {
        margin-top: 22px;
        font-family: var(--sans);
        font-size: 14.5px;
        color: var(--muted);
      }

      .gallery-quote .gq-by strong {
        color: var(--ink);
        font-weight: 600;
      }

      @media (max-width: 760px) {
        .gallery-quote {
          position: static;
          transform: none;
          width: 100%;
          margin-top: 24px;
          padding: 36px 28px;
        }
      }

      .gallery-foot {
        text-align: center;
        margin-top: 44px;
      }

      /* ===== Pinned ad wall with scrolling testimonial cards ===== */
      .work-pin-track {
        position: relative;
        height: 300vh;
      }

      .work-pin {
        position: sticky;
        top: 72px;
        height: calc(100vh - 104px);
        min-height: 520px;
        border-radius: 0;
        overflow: hidden;
        background: var(--cream);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        display: grid;
        place-items: center;
      }

      .work-ads {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

      .work-ads .gallery {
        columns: 5;
        column-gap: 14px;
        padding: 14px;
        transform: translateY(-3%);
      }

      .work-ads .gallery .tile {
        box-shadow: none;
        transition: none;
        border-radius: 8px;
      }

      .work-ads .gallery .tile:hover {
        transform: none;
      }

      .work-ads-fade {
        position: absolute;
        inset: 0;
        background: radial-gradient(125% 85% at 50% 50%, rgba(251, 250, 246, .9), rgba(251, 250, 246, .55) 58%, rgba(251, 250, 246, .78));
      }

      .work-cards {
        position: relative;
        z-index: 3;
        width: min(860px, 92%);
      }

      .work-card {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        opacity: 0;
        transform: translateY(calc(-50% + 38px));
        transition: opacity .55s var(--ease-out-quint), transform .7s var(--ease-out-quint);
        pointer-events: none;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 40px 100px rgba(22, 21, 15, .22);
        padding: 44px 48px;
      }

      .work-card.is-active {
        opacity: 1;
        transform: translateY(-50%);
      }

      .work-card p {
        font-family: var(--serif);
        font-size: clamp(21px, 2.3vw, 29px);
        line-height: 1.3;
        color: var(--ink);
        letter-spacing: -.01em;
      }

      .work-card .wc-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 30px;
      }

      .work-card .wc-who {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .work-card .wc-av {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--cream-2);
        box-shadow: 0 3px 9px rgba(22, 21, 15, .12);
      }

      .work-card .wc-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .work-card .wc-id {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
        min-width: 0;
      }

      .work-card .wc-id strong {
        color: var(--ink);
        font-weight: 600;
        font-size: 14.5px;
      }

      .work-card .wc-id span {
        font-size: 12.5px;
        color: var(--muted);
      }

      .work-card .wc-co {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .01em;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }

      .work-card .wc-co-mark {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: var(--blue);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .01em;
      }

      @media (max-width: 760px) {
        .work-pin-track {
          height: auto;
        }

        .work-pin {
          position: static;
          height: auto;
          min-height: 0;
          padding: 16px;
          display: block;
        }

        .work-ads-fade {
          display: none;
        }

        .work-cards {
          position: relative;
          width: 100%;
        }

        .work-card {
          position: relative;
          top: auto;
          opacity: 1;
          transform: none;
          margin-top: 16px;
          padding: 30px 26px;
        }
      }

      /* ---------- Results ---------- */
      .results {
        display: grid;
        grid-template-columns: 1fr;
        gap: 44px 24px;
      }

      @media (min-width: 760px) {
        .results {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      .rcard {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 36px 30px 30px;
        text-align: center;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(22, 21, 15, .05);
        transition: transform .5s var(--ease-out-quint), border-color .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint);
      }

      .rcard:hover {
        transform: translateY(-4px);
        border-color: rgba(26, 68, 255, .28);
        box-shadow: 0 18px 44px rgba(22, 21, 15, .09);
      }

      .rcard .big {
        font-family: var(--serif);
        font-size: clamp(52px, 6vw, 78px);
        color: var(--ink);
        line-height: .95;
        font-variant-numeric: tabular-nums;
        font-weight: 400;
      }

      .rcard .lbl {
        margin-top: 16px;
        font-size: 14.5px;
        color: var(--ink);
        font-weight: 600;
      }

      .rcard .sub {
        margin-top: 8px;
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.5;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
      }

      .rcard .rmini {
        margin-top: auto;
        padding-top: 22px;
      }

      .rcard .rmini::before {
        content: "";
        display: block;
        width: 28px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(26, 68, 255, .4), transparent);
        margin: 0 auto 16px;
      }

      .rcard .rmini p {
        font-family: var(--serif);
        font-size: 15px;
        line-height: 1.5;
        color: var(--text);
        letter-spacing: -.005em;
      }

      .rcard .rmini .rmini-by {
        margin-top: 14px;
        font-family: var(--sans);
        font-size: 12px;
        color: var(--muted);
        letter-spacing: .01em;
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
      }

      .rcard .rmini .rmini-by strong {
        color: var(--ink);
        font-weight: 600;
        display: block;
        font-size: 12.5px;
      }

      .rmini-av {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        letter-spacing: .02em;
        background: linear-gradient(140deg, var(--c1), var(--c2));
        box-shadow: 0 3px 9px rgba(22, 21, 15, .14);
      }

      .rmini-id {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        min-width: 0;
      }

      .rmini-id span {
        font-size: 11px;
        color: var(--muted);
      }

      .rmini-logo {
        margin-left: auto;
        font-family: var(--serif);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
      }

      /* full-width dark quote card */
      .rcard-feat {
        grid-column: 1 / -1;
        background: var(--ink);
        border: none;
        border-radius: var(--r-xl);
        padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px);
        margin-top: 20px;
        text-align: left;
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: center;
        color: #fff;
      }

      @media (min-width: 760px) {
        .rcard-feat {
          grid-template-columns: minmax(0, .9fr) minmax(0, 2fr);
          gap: 48px;
        }
      }

      .rcard-feat .big {
        color: #fff;
        font-size: clamp(15px, 1.4vw, 17px);
        font-family: var(--sans);
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
      }

      .rcard-feat .lbl {
        margin-top: 8px;
        font-size: 14px;
        color: rgba(255, 255, 255, .62);
        font-weight: 400;
        text-align: center;
      }

      .rcard-feat .rquote {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .6s var(--ease-out-quint), transform .6s var(--ease-out-quint);
      }

      .rcard-feat.quote-in .rquote {
        opacity: 1;
        transform: none;
      }

      .rcard-feat .rquote p {
        font-family: var(--serif);
        font-size: clamp(22px, 2.5vw, 32px);
        line-height: 1.3;
        color: #fff;
        letter-spacing: -.01em;
      }

      .rcard-feat .rq-by {
        margin-top: 24px;
        font-size: 13.5px;
        color: rgba(255, 255, 255, .55);
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .rcard-feat .rq-av {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
        border: 2px solid rgba(255, 255, 255, .18);
      }

      .rcard-feat .rq-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .rcard-feat .rq-id {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
      }

      .rcard-feat .rq-id strong {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
      }

      .rcard-feat .rq-id span {
        font-size: 12px;
        color: rgba(255, 255, 255, .5);
      }

      .rcard-feat .rq-logo {
        margin-left: auto;
        font-family: var(--serif);
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .rcard-feat .rq-logo-mark {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(140deg, var(--signal), var(--blue));
        box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
      }

      .rcard-feat .rq-logo-mark svg {
        width: 15px;
        height: 15px;
      }

      .bg-night .rcard-feat {
        background: var(--ink);
        border: none;
      }

      /* ---------- Solutions split ---------- */
      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }

      .path {
        border-radius: var(--r-xl);
        padding: 44px;
        border: 1px solid var(--line);
        background: linear-gradient(165deg, #F6F4EE, var(--card) 60%);
        position: relative;
        overflow: hidden;
        transition: transform .22s var(--ease-micro), box-shadow .22s var(--ease-micro);
      }

      .split:hover .path:not(:hover) {
        transform: translateY(2px);
      }

      .path:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
      }

      .path.feature-card {
        background: linear-gradient(155deg, #0a3bff 0%, var(--blue) 45%, #0018a8 100%);
        color: #fff;
        border: none;
      }

      .path.feature-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(70% 60% at 85% 12%, rgba(57, 187, 255, .35), transparent 60%);
      }

      .path>* {
        position: relative;
        z-index: 1;
      }

      .path .tag {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--blue);
      }

      .path.feature-card .tag {
        color: rgba(255, 255, 255, .85);
      }

      .path h3 {
        font-size: 27px;
        margin: 14px 0 12px;
      }

      .path p {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.55;
        max-width: 410px;
      }

      .path.feature-card p {
        color: rgba(255, 255, 255, .82);
      }

      .path ul {
        list-style: none;
        margin-top: 24px;
        display: grid;
        gap: 11px;
      }

      .path li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 15px;
      }

      .path.feature-card li {
        color: rgba(255, 255, 255, .92);
      }

      .path li .ck {
        color: var(--blue);
        flex-shrink: 0;
        margin-top: 3px;
      }

      .path.feature-card li .ck {
        color: #fff;
      }

      .path .more {
        margin-top: 28px;
        display: inline-flex;
        gap: 8px;
        align-items: center;
        font-weight: 600;
        color: var(--blue);
      }

      .path .more svg {
        transition: transform .2s var(--ease-micro);
      }

      .path:hover .more svg {
        transform: translateX(4px);
      }

      .path.feature-card .more {
        color: #fff;
      }

      /* flagship guide with book cover */
      .path.has-book {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: center;
      }

      @media (min-width: 600px) {
        .path.has-book {
          grid-template-columns: 1.25fr .85fr;
          gap: 26px;
        }
      }

      .path.has-book .pb-copy {
        min-width: 0;
      }

      .path.has-book .pb-book {
        perspective: 900px;
        display: flex;
        justify-content: center;
      }

      .path.has-book .pb-cover {
        position: relative;
        width: 100%;
        max-width: 188px;
        aspect-ratio: .72;
        border-radius: 4px 9px 9px 4px;
        background-image: linear-gradient(145deg, #08198a, #0024c4 55%, #0a1a6e);
        box-shadow: 0 22px 44px rgba(8, 12, 40, .42), inset 7px 0 14px rgba(255, 255, 255, .14), inset -2px 0 6px rgba(0, 0, 0, .3);
        transform: rotateY(-16deg) rotateX(3deg);
        transform-style: preserve-3d;
        padding: 22px 18px 18px 24px;
        display: flex;
        flex-direction: column;
        transition: transform .6s var(--ease-out-quint);
      }

      .path.has-book:hover .pb-cover {
        transform: rotateY(-7deg) rotateX(2deg) translateY(-4px);
      }

      .path.has-book .pb-cover::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(255, 255, 255, .22);
        border-radius: 2px;
      }

      .path.has-book .pb-kick {
        font-family: var(--sans);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .22em;
        color: rgba(255, 255, 255, .7);
      }

      .path.has-book .pb-title {
        font-family: var(--serif);
        font-size: 18px;
        line-height: 1.18;
        color: #fff;
        margin-top: 12px;
        letter-spacing: -.01em;
      }

      .path.has-book .pb-mark {
        margin-top: auto;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        display: grid;
        place-items: center;
      }

      .path.has-book .pb-mark svg {
        width: 16px;
        height: 16px;
      }

      .path.has-book .pb-foot {
        margin-top: 12px;
        font-family: var(--sans);
        font-size: 10px;
        letter-spacing: .12em;
        color: rgba(255, 255, 255, .55);
        text-transform: uppercase;
      }

      /* blog note thumbnail */
      .path.has-note .note-thumb {
        position: relative;
        height: 150px;
        margin: -8px 0 22px;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(150deg, #EEE9DC 0%, #F6F2E8 50%, #E4DDCC 100%);
        border: 1px solid var(--line);
      }

      .path.has-note .note-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 90% at 85% 10%, rgba(26, 68, 255, .1), transparent 55%);
      }

      .path.has-note .note-thumb svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .path.has-note .nt-loop {
        fill: none;
        stroke: var(--blue);
        stroke-width: 6;
        stroke-linecap: round;
        stroke-dasharray: 520;
        stroke-dashoffset: 520;
      }

      .path.has-note .nt-dot {
        fill: var(--signal);
        opacity: 0;
      }

      .path.has-note.reveal-active .nt-loop,
      .reveal.in .path.has-note .nt-loop {
        animation: ntDraw 2.4s var(--ease-out-quint) forwards;
      }

      .path.has-note.reveal-active .nt-dot,
      .reveal.in .path.has-note .nt-dot {
        animation: ntDot .5s 2.2s var(--ease-out-quint) forwards;
      }

      @keyframes ntDraw {
        to {
          stroke-dashoffset: 0;
        }
      }

      @keyframes ntDot {
        to {
          opacity: 1;
        }
      }

      .path.has-note .nt-issue {
        position: absolute;
        left: 14px;
        bottom: 12px;
        font-family: var(--sans);
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        background: rgba(255, 255, 255, .7);
        border: 1px solid var(--line);
        padding: 4px 9px;
        border-radius: 999px;
        backdrop-filter: blur(4px);
      }

      @media (prefers-reduced-motion: reduce) {
        .path.has-note .nt-loop {
          stroke-dashoffset: 0;
          animation: none;
        }

        .path.has-note .nt-dot {
          opacity: 1;
          animation: none;
        }
      }

      /* ---------- Assistant / transparency card ---------- */
      .assistant {
        background: var(--ink);
        border-radius: var(--r-xl);
        padding: 56px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
        color: #fff;
      }

      .assistant h2 {
        color: #fff;
      }

      .assistant p {
        color: rgba(255, 255, 255, .72);
        font-size: 17px;
        line-height: 1.6;
        margin-top: 16px;
        max-width: 420px;
      }

      .chatbox {
        display: grid;
        gap: 12px;
      }

      .bubble {
        border-radius: 18px;
        padding: 15px 18px;
        font-size: 14.5px;
        line-height: 1.5;
        max-width: 86%;
      }

      .bubble.you {
        background: rgba(255, 255, 255, .10);
        justify-self: end;
        border-bottom-right-radius: 6px;
      }

      .bubble.up {
        background: #fff;
        color: var(--ink);
        border-bottom-left-radius: 6px;
      }

      .bubble.up .who {
        font-size: 11px;
        font-weight: 700;
        color: var(--blue);
        letter-spacing: .04em;
        margin-bottom: 5px;
      }

      /* ---------- Testimonials ---------- */
      .quotes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }

      .quote {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 38px;
        display: flex;
        flex-direction: column;
      }

      @media (max-width: 720px) {
        .quotes {
          display: flex;
          grid-template-columns: none;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          gap: 14px;
          padding-bottom: 6px;
          margin-inline: -32px;
          padding-inline: 32px;
          scrollbar-width: none;
        }

        .quotes::-webkit-scrollbar {
          display: none;
        }

        .quotes .quote {
          flex: 0 0 84%;
          scroll-snap-align: center;
          padding: 30px;
        }
      }

      .quote p {
        font-family: var(--serif);
        font-size: 23px;
        line-height: 1.3;
        color: var(--ink);
        margin-bottom: 24px;
      }

      .quote .who {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: auto;
      }

      .quote .who .av {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--cream-2);
        flex-shrink: 0;
        overflow: hidden;
      }

      .quote .who .av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .quote .who-id {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.3;
      }

      .quote .nm {
        font-weight: 600;
        font-size: 14.5px;
        color: var(--ink);
      }

      .quote .rl {
        font-size: 12.5px;
        color: var(--muted);
      }

      .quote .who-logo {
        margin-left: auto;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        color: var(--blue);
      }

      .quote .who-logo svg {
        width: 26px;
        height: 26px;
        display: block;
      }

      .quote .who-logo-mark {
        width: 38px;
        height: 26px;
        border-radius: 5px;
        background: var(--blue);
        color: #fff;
        font-family: var(--sans);
        font-weight: 800;
        font-size: 13px;
        letter-spacing: .02em;
        display: grid;
        place-items: center;
      }

      /* ---------- Closing CTA ---------- */
      .closing {
        position: relative;
        padding: 96px 40px;
        text-align: center;
        color: #fff;
      }

      .closing-aurora {
        position: absolute;
        inset: -40%;
        z-index: 0;
        pointer-events: none;
        opacity: .5;
        background: radial-gradient(40% 50% at 30% 30%, rgba(57, 187, 255, .5), transparent 60%), radial-gradient(45% 55% at 75% 65%, rgba(26, 68, 255, .5), transparent 60%);
        filter: blur(30px);
        animation: auroraDrift 34s ease-in-out infinite alternate;
      }

      @keyframes auroraDrift {
        0% {
          transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1.05);
        }

        100% {
          transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.15);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .closing-aurora {
          animation: none;
        }
      }

      .closing-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url(backgrounds/20.webp);
        background-size: cover;
        background-position: center;
      }

      .closing-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(2, 10, 40, .42), rgba(2, 8, 34, .58));
      }

      .closing-inner {
        position: relative;
        z-index: 1;
        max-width: 720px;
        margin: 0 auto;
      }

      .closing h2 {
        color: #fff;
      }

      .closing .lead {
        color: rgba(255, 255, 255, .82);
        margin: 16px auto 32px;
        max-width: 520px;
      }

      .closing .capture {
        position: relative;
        transform: none;
        margin: 0 auto;
        display: inline-flex;
      }

      /* ---- quiet closing: type on cream, no photograph ----
         The closing CTA used to be a full-bleed band-art photograph, and the
         footer opens with another full-bleed photograph directly beneath it.
         Two broad horizontal images of the same blue, separated by a 24px gap,
         read as one long smear: neither image got to land and the CTA in the
         middle of the first one lost its authority. The page foot now goes
         white section -> calm cream CTA -> the footer photograph, so exactly
         one image closes the page. The panel keeps the closing's footprint
         (outer rails, radius 0) so the rail system is untouched. */
      .closing--quiet {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 420px;
        padding: clamp(64px, 8vw, 104px) 40px;
        overflow: hidden;
        /* no cream panel: an opaque surface here paints over the rails, which
           render at z-index -1, and breaks the hairlines mid-page. Transparent
           keeps the section on the page canvas and lets both margin lines run
           straight through it. */
        background: transparent;
        color: var(--ink);
        text-align: center;
      }

      .closing--quiet .closing-inner {
        max-width: 640px;
      }

      .closing--quiet .eyebrow {
        justify-content: center;
      }

      .closing--quiet h2 {
        color: var(--ink);
      }

      .closing--quiet .lead {
        margin: 16px auto 0;
        max-width: 500px;
        color: var(--muted);
      }

      /* `.closing .capture` zeroes the margin for the photographic variant, and
         it out-specifies the single-class component below, so the gap under the
         lead has to be restored here. */
      .closing--quiet .capture {
        margin: 34px auto 0;
      }

      /* the capture pill on an opaque light surface: same geometry as the glass
         (16px outer, 10px button, 5px inset), re-toned. No backdrop blur -- there
         is nothing behind cream to frost. */
      .capture--light {
        margin-top: 34px;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 10px 28px rgba(8, 12, 40, .07);
      }

      .capture--light::before {
        display: none;
      }

      .capture--light input {
        color: var(--ink);
      }

      .capture--light input::placeholder {
        color: rgba(10, 10, 10, .44);
      }

      .capture--light .btn-blue {
        background: var(--blue);
        border: 1px solid var(--blue);
        color: #fff;
        box-shadow: none;
      }

      .capture--light .btn-blue:hover {
        background: var(--blue-700);
        border-color: var(--blue-700);
        color: #fff;
      }

      @media (max-width: 560px) {
        .closing--quiet {
          min-height: 0;
          padding: 56px 24px;
        }

        .capture--light {
          width: 100%;
        }

        .capture--light input {
          width: 100%;
          min-width: 0;
        }
      }

      /* ---------- Footer ---------- */
      .footer {
        background: var(--ink);
        color: #fff;
        padding: 36px 0 28px;
      }

      .footer .footer-card {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        padding: clamp(36px, 5vw, 64px);
        background: linear-gradient(105deg, #041a33 0%, #072d57 42%, #0a3a73 70%, #123a8a 100%);
      }

      .footer .footer-card::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 14%;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(120, 40, 160, 0) 0%, rgba(150, 45, 140, .45) 45%, rgba(210, 50, 90, .85) 100%);
      }

      .footer-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: 40px;
      }

      .footer-logo img {
        height: 26px;
        margin-bottom: 18px;
        filter: brightness(0) invert(1);
      }

      .footer-blurb {
        color: rgba(255, 255, 255, .72);
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 320px;
      }

      .footer-soc {
        display: flex;
        gap: 12px;
        margin-top: 28px;
      }

      .footer-soc a {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        display: grid;
        place-items: center;
        background: #fff;
        color: var(--ink);
        transition: transform .2s ease, background .2s ease;
      }

      .footer-soc a:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .88);
      }

      .footer-soc svg {
        width: 18px;
        height: 18px;
      }

      .footer h4 {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 18px;
      }

      .footer ul {
        list-style: none;
        display: grid;
        gap: 12px;
      }

      .footer ul a {
        color: rgba(255, 255, 255, .72);
        font-size: 14.5px;
      }

      .footer ul a:hover {
        color: #fff;
      }

      .footer-bottom {
        position: relative;
        z-index: 1;
        margin-top: 34px;
        padding-top: 0;
        border-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13.5px;
        color: rgba(255, 255, 255, .5);
      }

      /* ---------- Solutions page hero ---------- */
      .page-hero {
        padding: 160px 0 70px;
        text-align: center;
      }

      .page-hero .eyebrow {
        justify-content: center;
      }

      .page-hero h1 {
        font-size: clamp(40px, 6vw, 76px);
        margin: 18px 0 0;
      }

      .page-hero .lead {
        max-width: 580px;
        margin: 22px auto 0;
      }

      .page-hero .hero-cta {
        margin-top: 32px;
        display: flex;
        gap: 12px;
        justify-content: center;
      }

      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }

      .step {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 34px;
      }

      .step .n {
        font-size: 13px;
        font-weight: 700;
        color: var(--blue);
      }

      .step h3 {
        font-size: 20px;
        margin: 14px 0 10px;
      }

      .step p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.55;
      }

      .feat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }

      .feat {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 32px;
        display: flex;
        gap: 18px;
        align-items: flex-start;
        transition: transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint), border-color .5s var(--ease-out-quint);
      }

      .feat:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(26, 68, 255, .2);
      }

      .feat .fi {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(140deg, var(--blue), var(--signal));
        color: #fff;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        box-shadow: 0 6px 16px rgba(26, 68, 255, .28);
      }

      .feat h3 {
        font-size: 18px;
        margin-bottom: 7px;
      }

      .feat p {
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.5;
      }

      /* ---------- Scroll story (sticky, scroll-driven feature sequence) ---------- */
      .story {
        position: relative;
      }

      .story-track {
        position: relative;
      }

      /* tall, drives scroll progress */
      .story-sticky {
        position: sticky;
        top: 92px;
        height: calc(100vh - 132px);
        min-height: 560px;
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        gap: 56px;
        align-items: center;
      }

      /* left, the stepper */
      .story-steps {
        display: grid;
        gap: 6px;
        align-content: center;
      }

      .sstep {
        position: relative;
        padding: 18px 0 18px 26px;
        border-left: 2px solid var(--line);
        transition: border-color .6s var(--ease-out-quint);
        cursor: pointer;
      }

      .sstep::before {
        content: "";
        position: absolute;
        left: -7px;
        top: 24px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--line);
        transition: background .3s ease, transform .3s ease;
      }

      .sstep .sn {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--muted);
        transition: color .3s ease;
      }

      .sstep h3 {
        font-family: var(--serif);
        font-size: clamp(22px, 2.3vw, 30px);
        line-height: 1.05;
        color: var(--ink);
        opacity: .38;
        transition: opacity .6s var(--ease-out-quint);
        margin-top: 4px;
      }

      .sstep p {
        font-size: 15px;
        color: var(--muted);
        line-height: 1.5;
        max-width: 380px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .65s var(--ease-out-quint), opacity .55s var(--ease-out-quint), margin .65s var(--ease-out-quint);
      }

      .sstep.active {
        border-color: var(--blue);
      }

      .sstep.active::before {
        background: var(--blue);
        transform: scale(1.15);
        box-shadow: 0 0 0 5px rgba(26, 68, 255, .14);
      }

      .sstep.active .sn {
        color: var(--blue);
      }

      .sstep.active h3 {
        opacity: 1;
      }

      .sstep.active p {
        max-height: 120px;
        opacity: 1;
        margin-top: 10px;
      }

      .sstep-logos {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .65s var(--ease-out-quint), opacity .55s var(--ease-out-quint), margin .65s var(--ease-out-quint);
      }

      .sstep-logos span {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 11px;
        background: var(--cream);
      }

      .sstep.active .sstep-logos {
        max-height: 80px;
        opacity: 1;
        margin-top: 12px;
      }

      /* right, the stage */
      .story-stage {
        position: relative;
        height: 100%;
        min-height: 420px;
        border-radius: var(--r-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
      }

      .stage-bg {
        position: absolute;
        inset: 0;
        background-image: url(backgrounds/20.webp);
        background-size: cover;
        background-position: center;
        transform: scale(1.08);
        transition: transform 6s ease;
      }

      .story-stage.is-on .stage-bg {
        transform: scale(1.16);
      }

      .stage-bg::after {
        content: none;
      }

      .stage-label {
        position: absolute;
        top: 22px;
        left: 24px;
        z-index: 2;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .06em;
        color: rgba(255, 255, 255, .86);
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .stage-label .live {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--signal);
        box-shadow: 0 0 0 4px rgba(57, 187, 255, .28);
      }

      /* progress rail under the stepper on mobile */
      .story-progress {
        display: none;
      }

      @media (max-width: 1000px) {
        .story-track {
          height: auto !important;
        }

        .story-sticky {
          position: static;
          height: auto;
          grid-template-columns: 1fr;
          gap: 32px;
          min-height: 0;
        }

        .sstep {
          padding: 14px 0 14px 22px;
        }

        .sstep h3 {
          opacity: 1;
        }

        .sstep p {
          max-height: 200px;
          opacity: 1;
          margin-top: 8px;
        }

        .sstep .sstep-logos {
          max-height: 80px;
          opacity: 1;
          margin-top: 12px;
        }

        .sstep:not(.active) {
          opacity: .85;
        }

        .story-stage {
          min-height: 440px;
        }
      }

      /* ---------- Motion: hero, slow ken-burns + mask-wipe headline ---------- */
      .hero-bg,
      .closing-bg {
        animation: kenburns 40s ease-in-out infinite alternate;
      }

      @keyframes kenburns {
        from {
          transform: scale(1.05);
        }

        to {
          transform: scale(1.14) translateY(-2%);
        }
      }

      /* mask wipe: each line rises into view from behind its own clip */
      .hero h1 .ln {
        display: block;
        width: 100%;
        opacity: 1;
      }

      .hero .label {
        opacity: 1;
      }

      .hero .capture {
        opacity: 1;
      }

      @keyframes lnup {
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes lnWipe {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ---------- Marquee of creatives (continuous motion = volume) ---------- */
      .mq-pin {
        position: relative;
        height: 260vh;
      }

      .marquee-band {
        padding: 70px 0;
        overflow: hidden;
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      @media (max-width: 760px) {
        .mq-pin {
          height: 220vh;
        }
      }

      /* scroll-scrubbed ambient video */
      .mq-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
      }

      .mq-bg video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover;
        opacity: .72;
        filter: saturate(1.15) contrast(1.06) brightness(.98);
      }

      /* keep the video crisp, no blurred border treatment */
      .mq-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, transparent 100%);
      }

      .marquee-band .marquee-head,
      .marquee-band .marquee {
        position: relative;
        z-index: 1;
      }

      .marquee-head {
        text-align: center;
        margin-bottom: 36px;
      }

      .marquee-head .eyebrow {
        justify-content: center;
      }

      .marquee-head h2 {
        margin-top: 14px;
      }

      .marquee {
        position: relative;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      }

      .marquee-row {
        display: flex;
        gap: 16px;
        width: max-content;
        animation: scrollx 60s linear infinite;
      }

      .marquee-row.rev {
        animation-direction: reverse;
      }

      .marquee-row+.marquee-row {
        margin-top: 16px;
      }

      .marquee:hover .marquee-row {
        animation-play-state: paused;
      }

      .marquee img {
        height: 184px;
        width: auto;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: #fff;
      }

      @keyframes scrollx {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }

      /* ---------- Dashboard bars grow on view ---------- */
      .dash-bars span {
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 1.9s var(--ease-out-quint);
        will-change: transform;
      }

      .dash.grow .dash-bars span {
        transform: scaleY(1);
      }

      .dash.grow .dash-bars span:nth-child(1) {
        transition-delay: .15s
      }

      .dash.grow .dash-bars span:nth-child(2) {
        transition-delay: .32s
      }

      .dash.grow .dash-bars span:nth-child(3) {
        transition-delay: .49s
      }

      .dash.grow .dash-bars span:nth-child(4) {
        transition-delay: .66s
      }

      .dash.grow .dash-bars span:nth-child(5) {
        transition-delay: .83s
      }

      .dash.grow .dash-bars span:nth-child(6) {
        transition-delay: 1s
      }

      .dash.grow .dash-bars span:nth-child(7) {
        transition-delay: 1.17s
      }

      /* ---------- Story scenes (each step enacts what it describes) ---------- */
      .scenes {
        position: absolute;
        inset: 0;
        z-index: 2;
      }

      .scene {
        position: absolute;
        inset: 0;
        padding: 58px 26px 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .7s var(--ease-out-quint), transform .7s var(--ease-out-quint);
        pointer-events: none;
      }

      .scene.active {
        opacity: 1;
        transform: none;
      }

      .sc-inner {
        width: 100%;
        max-width: 430px;
      }

      /* scene 1, research to hypothesis */
      .src-rows {
        display: grid;
        gap: 9px;
      }

      .src {
        display: flex;
        align-items: center;
        gap: 11px;
        background: rgba(251, 250, 246, .97);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        color: var(--ink);
        font-weight: 500;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateX(-16px);
      }

      .scene-research.play .src {
        animation: srcin .5s var(--d) cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .src .si {
        color: var(--blue);
        display: flex;
        flex-shrink: 0;
      }

      .src::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(26, 68, 255, .16), transparent);
        transform: translateX(-100%);
      }

      .scene-research.play .src::after {
        animation: scan 1.1s var(--d) ease forwards;
      }

      @keyframes srcin {
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes scan {
        0% {
          transform: translateX(-100%);
        }

        100% {
          transform: translateX(120%);
        }
      }

      .hyp {
        margin-top: 14px;
        background: var(--blue);
        color: #fff;
        border-radius: 14px;
        padding: 15px 16px 14px;
        opacity: 0;
        transform: translateY(16px);
      }

      .scene-research.play .hyp {
        animation: srcin .55s .92s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .hyp-k {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        opacity: .82;
      }

      .hyp-t {
        font-family: var(--serif);
        font-size: 18px;
        margin-top: 5px;
        line-height: 1.15;
      }

      .ab {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 13px;
      }

      .abv {
        width: 27px;
        height: 27px;
        border-radius: 7px;
        background: rgba(255, 255, 255, .18);
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 700;
        opacity: 0;
        transform: scale(.5);
      }

      .scene-research.play .abv.a {
        animation: pop .42s 1.35s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .scene-research.play .abv.b {
        animation: pop .42s 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .vs {
        font-size: 11px;
        opacity: .7;
      }

      .ab-l {
        font-size: 12px;
        margin-left: 4px;
        opacity: .9;
      }

      @keyframes pop {
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* scene 2, create content */
      .make-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }

      .make-card {
        opacity: 0;
        transform: translateY(16px) scale(.97);
      }

      .scene-create.play .make-card {
        animation: srcin .5s var(--d) cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .mc-cap {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .86);
        margin-bottom: 7px;
      }

      .mc-art {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, .1);
        aspect-ratio: .66;
        border: 1px solid rgba(255, 255, 255, .2);
      }

      .mc-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .mc-art .wipe {
        position: absolute;
        inset: 0;
        background: var(--blue);
        transform-origin: bottom;
        transform: scaleY(1);
      }

      .scene-create.play .mc-art .wipe {
        animation: wipe .75s calc(var(--d) + .18s) cubic-bezier(.7, 0, .3, 1) forwards;
      }

      @keyframes wipe {
        to {
          transform: scaleY(0);
        }
      }

      .mc-art.checkout {
        background: #0E1330;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding: 14px;
      }

      .co-line {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: rgba(255, 255, 255, .78);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding-bottom: 6px;
      }

      .co-line.tot {
        border: none;
        color: #fff;
        font-weight: 700;
      }

      .co-pay {
        margin-top: 6px;
        background: var(--signal);
        color: #08122e;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        padding: 8px;
        border-radius: 8px;
      }

      /* scene 3, steer across channels */
      .steer {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .steer-ad {
        width: 92px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .24);
        position: relative;
        z-index: 2;
        opacity: 0;
        transform: scale(.85);
      }

      .scene-steer.play .steer-ad {
        animation: pop .5s .12s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .steer-ad img {
        width: 100%;
        display: block;
      }

      .steer-lines {
        width: 100%;
        height: 64px;
        display: block;
      }

      .steer-lines path {
        stroke: rgba(255, 255, 255, .55);
        stroke-width: 1.5;
        fill: none;
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
      }

      .scene-steer.play .steer-lines path {
        animation: draw .7s .4s ease forwards;
      }

      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }

      .chan-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        width: 100%;
      }

      .chan {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
        position: relative;
      }

      .chan-n {
        font-size: 12.5px;
        font-weight: 600;
        color: #fff;
      }

      .bar {
        width: 100%;
        height: 92px;
        background: rgba(255, 255, 255, .1);
        border-radius: 9px;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
      }

      .bar i {
        display: block;
        width: 100%;
        height: 0;
        background: rgba(255, 255, 255, .42);
        border-radius: 9px 9px 0 0;
      }

      .scene-steer.play .bar i {
        animation: bargrow .9s 1s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      @keyframes bargrow {
        to {
          height: var(--h);
        }
      }

      .chan.win .bar i {
        background: var(--signal);
      }

      .chan .tag {
        position: absolute;
        top: 44px;
        z-index: 3;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        color: #08122e;
        background: var(--signal);
        padding: 3px 7px;
        border-radius: 999px;
        opacity: 0;
        transform: translateY(6px);
        box-shadow: 0 4px 12px rgba(8, 18, 46, .3);
      }

      .scene-steer.play .chan.win .tag {
        animation: pop .4s 1.7s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .steer-cap {
        margin-top: 16px;
        text-align: center;
        font-size: 12.5px;
        color: rgba(255, 255, 255, .82);
      }

      /* scene 4, keep you in the loop */
      .rep {
        background: rgba(251, 250, 246, .98);
        border-radius: 16px;
        padding: 16px;
        box-shadow: var(--shadow-lg);
      }

      .rep-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: var(--muted);
        font-weight: 600;
      }

      .rep-head .live {
        color: var(--blue);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .rep-head .live::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #18B86B;
      }

      .rep-chart {
        width: 100%;
        height: 64px;
        margin: 12px 0;
        display: block;
      }

      .rep-chart path.line {
        fill: none;
        stroke: var(--blue);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 420;
        stroke-dashoffset: 420;
      }

      .scene-loop.play .rep-chart path.line {
        animation: draw2 1.1s .2s ease forwards;
      }

      @keyframes draw2 {
        to {
          stroke-dashoffset: 0;
        }
      }

      .rep-chart path.fill {
        fill: rgba(26, 68, 255, .08);
        opacity: 0;
      }

      .scene-loop.play .rep-chart path.fill {
        animation: pop .6s .8s ease forwards;
      }

      .rep-kpis {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .kpi {
        background: var(--cream);
        border-radius: 10px;
        padding: 11px;
      }

      .kpi .kn {
        font-family: var(--serif);
        font-size: 23px;
        color: var(--ink);
        line-height: 1;
      }

      .kpi .kl {
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px;
      }

      .feed {
        margin-top: 12px;
        display: grid;
        gap: 7px;
      }

      .toast {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12.5px;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 9px;
        opacity: 0;
        transform: translateX(14px);
      }

      .scene-loop.play .toast {
        animation: srcin .45s var(--d) cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .toast .tdot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #18B86B;
        flex-shrink: 0;
      }

      @media (max-width: 1000px) {
        .scene {
          position: relative;
          padding: 16px 0 0;
        }

        .story-stage {
          min-height: 0;
          padding-bottom: 24px;
        }
      }

      @media (prefers-reduced-motion: reduce) {

        .scene .src,
        .scene .hyp,
        .scene .abv,
        .make-card,
        .steer-ad,
        .chan .tag,
        .toast {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
        }

        .mc-art .wipe {
          transform: scaleY(0) !important;
          animation: none !important;
        }

        .bar i {
          height: var(--h) !important;
          animation: none !important;
        }

        .steer-lines path,
        .rep-chart path.line {
          stroke-dashoffset: 0 !important;
          animation: none !important;
        }

        .rep-chart path.fill {
          opacity: 1 !important;
        }
      }

      /* ===== Scene 1, scan one source at a time into a hypothesis ===== */
      .research {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 440px;
      }

      .rcats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
      }

      .rcats span {
        font-size: 11.5px;
        color: rgba(255, 255, 255, .45);
        padding: 5px 11px;
        border-radius: 999px;
        transition: color .4s ease, background .4s ease;
      }

      .scene-research.play .rcats span {
        animation: catcycle 17.5s linear infinite;
      }

      .scene-research.play .rcats span:nth-child(1) {
        animation-delay: 0s;
      }

      .scene-research.play .rcats span:nth-child(2) {
        animation-delay: 3.5s;
      }

      .scene-research.play .rcats span:nth-child(3) {
        animation-delay: 7s;
      }

      .scene-research.play .rcats span:nth-child(4) {
        animation-delay: 10.5s;
      }

      .scene-research.play .rcats span:nth-child(5) {
        animation-delay: 14s;
      }

      @keyframes catcycle {
        0% {
          color: var(--ink);
          background: #fff;
        }

        18% {
          color: var(--ink);
          background: #fff;
        }

        22% {
          color: rgba(255, 255, 255, .45);
          background: transparent;
        }

        100% {
          color: rgba(255, 255, 255, .45);
          background: transparent;
        }
      }

      /* scanner frame holds one source card at a time */
      .scan-frame {
        position: relative;
        width: 148px;
        aspect-ratio: .8;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .06);
        box-shadow: var(--shadow-lg);
      }

      .scan-deck {
        position: absolute;
        inset: 0;
      }

      .scan-card {
        position: absolute;
        inset: 0;
        opacity: 0;
      }

      .scan-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .scan-tag {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 4;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .03em;
        background: #fff;
        color: var(--ink);
        padding: 3px 8px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(8, 18, 46, .3);
      }

      .scan-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 34%;
        top: -34%;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(rgba(57, 187, 255, .6), transparent);
        box-shadow: 0 2px 16px rgba(57, 187, 255, .5);
      }

      .scene-research.play .scan-line {
        animation: scanrun 3.5s linear infinite;
      }

      @keyframes scanrun {
        0% {
          top: -34%;
          opacity: 0;
        }

        8% {
          opacity: 1;
        }

        52% {
          top: 100%;
          opacity: 1;
        }

        60% {
          opacity: 0;
          top: 100%;
        }

        100% {
          opacity: 0;
          top: 100%;
        }
      }

      .scene-research.play .scan-card {
        animation: scancard 17.5s linear infinite;
      }

      .scene-research.play .scan-card:nth-child(1) {
        animation-delay: 0s;
      }

      .scene-research.play .scan-card:nth-child(2) {
        animation-delay: 3.5s;
      }

      .scene-research.play .scan-card:nth-child(3) {
        animation-delay: 7s;
      }

      .scene-research.play .scan-card:nth-child(4) {
        animation-delay: 10.5s;
      }

      .scene-research.play .scan-card:nth-child(5) {
        animation-delay: 14s;
      }

      @keyframes scancard {
        0% {
          opacity: 0;
          transform: translateX(48px) scale(.92);
        }

        3% {
          opacity: 1;
          transform: translateX(0) scale(1);
        }

        18% {
          opacity: 1;
          transform: translateX(0) scale(1);
        }

        20% {
          opacity: 0;
          transform: translateX(-48px) scale(.92);
        }

        100% {
          opacity: 0;
          transform: translateX(-48px) scale(.92);
        }
      }

      .scan-arrow {
        width: 2px;
        height: 16px;
        background: rgba(255, 255, 255, .4);
        position: relative;
      }

      .scan-arrow::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(255, 255, 255, .55);
      }

      /* distilled hypotheses, one per scanned source */
      .distill {
        position: relative;
        width: 100%;
        max-width: 320px;
        height: 70px;
      }

      .dchip {
        position: absolute;
        inset: 0;
        background: var(--blue);
        color: #fff;
        border-radius: 13px;
        padding: 12px 15px;
        opacity: 0;
        box-shadow: 0 8px 24px rgba(26, 68, 255, .28);
      }

      .dchip .dk {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        opacity: .8;
      }

      .dchip .dt {
        font-family: var(--serif);
        font-size: 15.5px;
        line-height: 1.18;
        margin-top: 4px;
      }

      .scene-research.play .dchip {
        animation: distillc 17.5s linear infinite;
      }

      .scene-research.play .dchip:nth-child(1) {
        animation-delay: 0s;
      }

      .scene-research.play .dchip:nth-child(2) {
        animation-delay: 3.5s;
      }

      .scene-research.play .dchip:nth-child(3) {
        animation-delay: 7s;
      }

      .scene-research.play .dchip:nth-child(4) {
        animation-delay: 10.5s;
      }

      .scene-research.play .dchip:nth-child(5) {
        animation-delay: 14s;
      }

      @keyframes distillc {
        0% {
          opacity: 0;
          transform: translateY(12px);
        }

        9% {
          opacity: 0;
          transform: translateY(12px);
        }

        13% {
          opacity: 1;
          transform: translateY(0);
        }

        18% {
          opacity: 1;
          transform: translateY(0);
        }

        20% {
          opacity: 0;
          transform: translateY(-6px);
        }

        100% {
          opacity: 0;
          transform: translateY(-6px);
        }
      }

      /* ===== Scene 2, hypotheses rise and become ad + matching landing page pairs ===== */
      .pairs {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
      }

      .hyp-rise {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }

      .hyp-rise .hr {
        background: var(--blue);
        color: #fff;
        border-radius: 11px;
        padding: 9px 12px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.25;
        box-shadow: 0 8px 22px rgba(26, 68, 255, .28);
        opacity: 0;
        transform: translateY(20px);
      }

      .scene-create.play .hyp-rise .hr {
        animation: hrrise 1.7s var(--d) cubic-bezier(.16, 1, .3, 1) forwards;
      }

      @keyframes hrrise {
        0% {
          opacity: 0;
          transform: translateY(26px);
        }

        14% {
          opacity: 1;
          transform: translateY(0);
        }

        64% {
          opacity: 1;
          transform: translateY(0);
        }

        100% {
          opacity: 0;
          transform: translateY(-16px);
        }
      }

      .pairs .pair-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }

      .deploy-badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-top: 20px;
        opacity: 0;
        transform: translateY(8px);
      }

      .scene-create.play .deploy-badges {
        animation: srcin .7s 2.1s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .deploy-badges .db-item {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .03em;
        color: rgba(255, 255, 255, .82);
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 999px;
        padding: 5px 12px;
        background: rgba(255, 255, 255, .06);
      }

      @media (prefers-reduced-motion: reduce) {
        .deploy-badges {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
        }
      }

      .pair {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        opacity: 0;
        transform: translateY(16px);
      }

      .scene-create.play .pair {
        animation: srcin .55s var(--d) cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .pcap {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .72);
        margin-bottom: 5px;
      }

      .pcard {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .2);
        position: relative;
        background: rgba(255, 255, 255, .1);
      }

      .pcard.ad {
        aspect-ratio: 1;
      }

      .pcard.lp {
        aspect-ratio: .6;
      }

      .pcard img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        display: block;
      }

      .pcard .wipe {
        position: absolute;
        inset: 0;
        background: var(--blue);
        transform-origin: bottom;
        transform: scaleY(1);
      }

      .scene-create.play .pcard .wipe {
        animation: wipe .7s calc(var(--d) + .2s) cubic-bezier(.7, 0, .3, 1) forwards;
      }

      .plink {
        width: 2px;
        height: 16px;
        background: rgba(255, 255, 255, .4);
        margin: 8px auto;
        position: relative;
      }

      .plink::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--signal);
      }

      /* ===== Scene 3, a cart of many small creatives distributed across channels ===== */
      .steer2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 470px;
      }

      .scene-steer .steer-ad {
        display: none;
      }

      .cart {
        position: relative;
        width: 168px;
        padding: 12px 12px 26px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .24);
        background: rgba(255, 255, 255, .07);
        box-shadow: var(--shadow-lg);
        z-index: 2;
        opacity: 0;
        transform: scale(.9);
      }

      .scene-steer.play .cart {
        animation: pop .55s .1s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .cart-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
      }

      .cart-grid i {
        display: block;
        aspect-ratio: .72;
        border-radius: 3px;
        background: linear-gradient(150deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5));
        opacity: 0;
        transform: translateY(6px) scale(.7);
      }

      .cart-grid i:nth-child(3n) {
        background: linear-gradient(150deg, var(--signal), #7fd8ff);
      }

      .cart-grid i:nth-child(4n) {
        background: linear-gradient(150deg, #ffd27f, #ffba4d);
      }

      .scene-steer.play .cart-grid i {
        animation: cartpop .4s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .scene-steer.play .cart-grid i:nth-child(1) {
        animation-delay: .3s;
      }

      .scene-steer.play .cart-grid i:nth-child(2) {
        animation-delay: .35s;
      }

      .scene-steer.play .cart-grid i:nth-child(3) {
        animation-delay: .4s;
      }

      .scene-steer.play .cart-grid i:nth-child(4) {
        animation-delay: .45s;
      }

      .scene-steer.play .cart-grid i:nth-child(5) {
        animation-delay: .5s;
      }

      .scene-steer.play .cart-grid i:nth-child(6) {
        animation-delay: .55s;
      }

      .scene-steer.play .cart-grid i:nth-child(7) {
        animation-delay: .6s;
      }

      .scene-steer.play .cart-grid i:nth-child(8) {
        animation-delay: .65s;
      }

      .scene-steer.play .cart-grid i:nth-child(9) {
        animation-delay: .7s;
      }

      .scene-steer.play .cart-grid i:nth-child(10) {
        animation-delay: .75s;
      }

      .scene-steer.play .cart-grid i:nth-child(11) {
        animation-delay: .8s;
      }

      .scene-steer.play .cart-grid i:nth-child(12) {
        animation-delay: .85s;
      }

      @keyframes cartpop {
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .cart-tag {
        position: absolute;
        left: 50%;
        bottom: -11px;
        transform: translateX(-50%);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #08122e;
        background: #fff;
        padding: 3px 10px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(8, 18, 46, .25);
        white-space: nowrap;
      }

      .fan {
        width: 100%;
        height: 50px;
        display: block;
      }

      .fan path {
        stroke: rgba(255, 255, 255, .5);
        stroke-width: 1.4;
        fill: none;
        stroke-dasharray: 240;
        stroke-dashoffset: 240;
      }

      .scene-steer.play .fan path {
        animation: draw .7s 1s ease forwards;
      }

      .chan6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        width: 100%;
      }

      .ch {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 11px;
      }

      .cap {
        width: 17px;
        height: 88px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .15);
        display: flex;
        align-items: flex-end;
        overflow: hidden;
      }

      .cap i {
        display: block;
        width: 100%;
        height: 0;
        background: var(--c);
        border-radius: 999px;
      }

      .scene-steer.play .cap i {
        animation: capgrow .9s 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      @keyframes capgrow {
        to {
          height: var(--h);
        }
      }

      .chlogo {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 4px 12px rgba(8, 18, 46, .25);
      }

      .chlogo b {
        font-family: var(--sans);
        font-weight: 800;
        font-size: 16px;
      }

      .chlogo svg {
        width: 19px;
        height: 19px;
      }

      .steer-cap {
        margin-top: 18px;
        text-align: center;
        font-size: 13px;
        color: rgba(255, 255, 255, .82);
        max-width: 380px;
      }

      /* ===== Scene 4, reporting dashboard ===== */
      .dash2 {
        background: rgba(251, 250, 246, .98);
        border-radius: 18px;
        padding: 18px;
        box-shadow: var(--shadow-lg);
        width: 100%;
      }

      .d2-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 14px;
      }

      .d2-title {
        font-family: var(--serif);
        font-size: 18px;
        color: var(--ink);
      }

      .d2-sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
      }

      .d2-live {
        font-size: 11px;
        font-weight: 700;
        color: var(--blue);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .d2-live::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #18B86B;
      }

      .d2-kpis {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 14px;
      }

      .d2-kpi {
        background: var(--cream);
        border-radius: 10px;
        padding: 10px;
      }

      .d2-kpi .kn {
        font-family: var(--serif);
        font-size: 20px;
        color: var(--ink);
        line-height: 1;
      }

      .d2-kpi .kl {
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 4px;
      }

      .d2-top {
        border-top: 1px solid var(--line);
        padding-top: 12px;
      }

      .d2-th {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 11px;
      }

      .d2-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 9px;
        opacity: 0;
        transform: translateX(12px);
      }

      .scene-loop.play .d2-row {
        animation: srcin .45s var(--d) cubic-bezier(.16, 1, .3, 1) forwards;
      }

      .d2-row img {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        object-fit: cover;
        flex-shrink: 0;
      }

      .d2-nm {
        font-size: 13px;
        color: var(--ink);
        font-weight: 500;
        width: 92px;
        flex-shrink: 0;
      }

      .d2-bar {
        flex: 1;
        height: 7px;
        border-radius: 999px;
        background: var(--cream-2);
        overflow: hidden;
      }

      .d2-bar i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--blue);
        border-radius: 999px;
      }

      .scene-loop.play .d2-bar i {
        animation: barw 1s .6s cubic-bezier(.16, 1, .3, 1) forwards;
      }

      @keyframes barw {
        to {
          width: var(--w);
        }
      }

      .d2-m {
        font-size: 13px;
        font-weight: 700;
        color: var(--blue);
        width: 34px;
        text-align: right;
        flex-shrink: 0;
      }

      @media (prefers-reduced-motion: reduce) {

        .scan-card,
        .pair,
        .d2-row,
        .dchip {
          animation: none !important;
        }

        .scan-card:nth-child(3),
        .dchip:nth-child(3) {
          opacity: 1 !important;
          transform: none !important;
        }

        .scan-line {
          display: none;
        }

        .pcard .wipe {
          transform: scaleY(0) !important;
          animation: none !important;
        }

        .cap i {
          height: var(--h) !important;
          animation: none !important;
        }

        .d2-bar i {
          width: var(--w) !important;
          animation: none !important;
        }

        .fan path {
          stroke-dashoffset: 0 !important;
          animation: none !important;
        }
      }

      /* ---------- Chat bubbles, premium reveal ---------- */
      .chatbox .bubble {
        opacity: 0;
        transform: translateY(14px) scale(.96);
        transform-origin: bottom;
        will-change: opacity, transform;
      }

      .chatbox .bubble.you {
        transform-origin: bottom right;
      }

      .chatbox .bubble.up {
        transform-origin: bottom left;
      }

      .chatbox.play .bubble {
        animation: bubblein .62s var(--ease-out-quint) forwards;
      }

      .chatbox.play .bubble:nth-child(1) {
        animation-delay: .15s
      }

      .chatbox.play .bubble:nth-child(2) {
        animation-delay: .95s
      }

      .chatbox.play .bubble:nth-child(3) {
        animation-delay: 2.5s
      }

      .chatbox.play .bubble:nth-child(4) {
        animation-delay: 3.7s
      }

      @keyframes bubblein {
        0% {
          opacity: 0;
          transform: translateY(14px) scale(.96);
        }

        60% {
          opacity: 1;
        }

        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      /* typing indicator inside assistant bubbles */
      .bubble.up {
        position: relative;
      }

      .bubble.up .typing {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 18px;
      }

      .bubble.up .typing i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
        opacity: .35;
        animation: typedot 1.2s ease-in-out infinite;
      }

      .bubble.up .typing i:nth-child(2) {
        animation-delay: .18s;
      }

      .bubble.up .typing i:nth-child(3) {
        animation-delay: .36s;
      }

      @keyframes typedot {

        0%,
        60%,
        100% {
          transform: translateY(0);
          opacity: .3;
        }

        30% {
          transform: translateY(-4px);
          opacity: .9;
        }
      }

      .bubble.up .msg {
        display: none;
      }

      /* once revealed, swap typing dots for the message */
      .bubble.up.revealed .typing {
        display: none;
      }

      .bubble.up.revealed .msg {
        display: block;
        animation: msgfade .45s var(--ease-out-quint) forwards;
      }

      @keyframes msgfade {
        from {
          opacity: 0;
          transform: translateY(4px);
        }

        to {
          opacity: 1;
          transform: none;
        }
      }

      /* ---------- Reveal: slow, firm, classy ---------- */
      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 1.05s var(--ease-out-quint), transform 1.05s var(--ease-out-quint);
      }

      .reveal.in {
        opacity: 1;
        transform: none;
      }

      .reveal.in [data-stagger] {
        opacity: 0;
        transform: translateY(28px);
        animation: revealUp 1.05s var(--ease-out-quint) forwards;
      }

      @keyframes revealUp {
        to {
          opacity: 1;
          transform: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
          transition: opacity .12s linear;
        }

        .reveal.in [data-stagger] {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .hero-bg,
        .closing-bg {
          animation: none;
        }

        .hero h1 .ln,
        .hero .label,
        .deal-stack,
        .chatbox .bubble {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .hero .capture {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .logo-row {
          animation: none;
        }

        .marquee-row {
          animation: none;
        }

        .dash-bars span {
          transform: scaleY(1);
          transition: none;
        }

        html {
          scroll-behavior: auto;
        }
      }

      /* On a touch viewport a fast fling may land multiple screens beyond the
         observer's previous frame. Do not turn already-present content into a
         one-second blank placeholder while its reveal transition catches up. */
      @media (max-width: 900px) {
        .reveal,
        .reveal.in {
          opacity: 1;
          transform: none;
          transition: none;
        }

        .reveal.in [data-stagger] {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .closing-kb,
        .closing-aurora {
          animation: none;
          will-change: auto;
        }
      }

      /* ---------- Responsive ---------- */
      @media (max-width: 1000px) {
        .gallery {
          columns: 3;
        }

        .feature,
        .assistant {
          grid-template-columns: 1fr;
          gap: 36px;
        }

        .feature.flip .feature-media {
          order: 0;
        }

        .loop,
        .results,
        .split,
        .quotes,
        .steps,
        .feat-grid,
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media (max-width: 960px) {
        /* nav breakpoint raised from 720px to 960px; mirrors index.html */
        .nav-links {
          display: none;
        }

        .section {
          padding: var(--section-pad) 0;
        }

        .loop,
        .results,
        .split,
        .quotes,
        .steps,
        .feat-grid,
        .footer-grid {
          grid-template-columns: 1fr;
        }

        .gallery {
          columns: 2;
        }
      }

      @media (max-width: 520px) {
        .gallery {
          columns: 1;
        }

        .capture input {
          width: 140px;
        }
      }

      #heroLogosWhite {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 120px;
        z-index: 2;
        width: 820px;
        max-width: 90vw;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      }

      #heroLogosWhite .logo-row {
        gap: 72px;
        animation: heroLogoRTL 48s linear infinite;
      }

      #heroLogosWhite:hover .logo-row {
        animation-play-state: paused;
      }

      #heroLogosWhite img {
        height: 26px;
        opacity: .55 !important;
        filter: brightness(0) invert(1) !important;
        transition: opacity .4s var(--ease-micro);
      }

      #heroLogosWhite img:hover {
        opacity: 1 !important;
      }

      @keyframes heroLogoRTL {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }

      .fx-footer .fx-legal .fx-brand {
        display: inline-flex;
        align-items: center;
      }

      /* The Parship source is pure black, while the other dark trust-strip
         wordmarks use #161615 at .7 opacity. On white, .64 black composites to
         the same visible gray as .7 of #161615. This keeps both regional
         variants at one optical tone without changing either source asset. */
      [data-regional-trust-logo][data-brand="parship"] {
        filter: grayscale(1) !important;
        opacity: .64 !important;
      }