/* ============================================================
   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: "Lab Grotesque Mono";
        src: url(cdn/67820650b769.woff2) format("woff2");
        font-weight: 100 900;
        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", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        /* brand display */
        --sans: "Lab Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        /* brand body */
        --mono: "Lab Grotesque Mono", ui-monospace, "SF Mono", Menlo, monospace;
        --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);
      }

      /* 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.
   Generated in CSS via inline SVG feTurbulence, fixed to the viewport, behind all content. */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* faint large-scale mottle (very low contrast, keeps it bright) */
        background:
          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%);
      }

      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* fine even noise = paper tooth; multiply so it darkens the bright base ever so slightly */
        mix-blend-mode: multiply;
        opacity: .035;
        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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
      }

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

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

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

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

      /* ---------- 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: 50%;
        transform: translateX(-50%) 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: translateX(-50%) 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.png');
        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;
      }

      /* 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;
      }

      .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.jpg');
        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(--mono);
        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.jpg');
        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.jpg');
        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(--mono);
        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(--mono);
        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.jpg);
        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.jpg);
        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;
        }
      }

      /* ---------- 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%);
        }
      }