/* ============================================================
       DESIGN TOKENS — LOCKED TO THE TOOL'S PALETTE + DM SANS
       ============================================================ */
    :root {
      --purple:          #5d45b2;
      --purple-deep:     #4a3596;
      --purple-light:    #eeebff;
      --purple-lighter:  #f9f8ff;
      --ink:             #121217;
      --text-secondary:  #62626c;
      --text-muted:      #9994b8;
      --border:          #e8e6f0;
      --bg:              #ffffff;

      --coral:           #ef4444;   /* retained for anything outside The Problem */
      /* The Problem reads as stalled, not alarming: grey for the broken states,
         deep purple for the figures that actually cost something. */
      --stall:           #6b6478;   /* 5.65:1 on white, 4.90:1 on its chip */
      --stall-bg:        #f0eef4;
      --green:           #16a34a;   /* success states (kept) */

      --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
      --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

      --text-display: clamp(2.75rem, 7.5vw, 8.5rem);
      --text-heading: clamp(1.8rem, 4vw, 4.5rem);
      --text-body:    1rem;
      --text-label:   0.72rem;

      --tracking-display: -0.045em;
      --tracking-label:   0.16em;
      --leading-display:  0.95;
      --leading-body:     1.6;

      --margin-outer: clamp(20px, 5vw, 80px);
      --section-pad:  clamp(80px, 10vw, 160px);
      --radius:       16px;
      --radius-sm:    10px;

      --grain-opacity: 0.022;
      --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ============================================================
       RESET + BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: var(--text-body);
      line-height: var(--leading-body);
      overflow-x: clip;
    }

    img, video, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    /* a bare <button> is cursor:default in Chrome and Safari, so with the
       native pointer back it has to be told it's clickable */
    button { font-family: inherit; border: none; background: none; cursor: pointer; }
    button:disabled { cursor: default; }

    ::selection { background: var(--purple); color: #fff; }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 300;
      background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
    }
    .skip-link:focus { left: 0; }

    /* ============================================================
       GRAIN
       ============================================================ */
    .grain {
      position: fixed; inset: -50%; width: 200%; height: 200%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      opacity: var(--grain-opacity); pointer-events: none; z-index: 9998;
      animation: grain 0.5s steps(2) infinite;
    }
    @keyframes grain {
      0%,100% { transform: translate(0,0); }
      10% { transform: translate(-2%,-3%); } 20% { transform: translate(3%,2%); }
      30% { transform: translate(-1%,4%); }  40% { transform: translate(4%,-1%); }
      50% { transform: translate(-3%,3%); }  60% { transform: translate(2%,-4%); }
      70% { transform: translate(-4%,2%); }  80% { transform: translate(3%,-2%); }
      90% { transform: translate(-2%,4%); }
    }

    /* ============================================================
       CUSTOM CURSOR
       ============================================================ */
    /* ============================================================
       CURSOR — a focus reticle, not a dot and a ring
       Four corner brackets that tighten and lock, which is what this product
       does: find the signal, frame it. No circles.
       mix-blend-mode difference means one white reticle stays legible on the
       light sections and the dark ones without any JS watching the background.
       Over a purple fill it shifts hue, which on 1.5px hairlines reads as a
       tint rather than a colour.
       ============================================================ */
    /* ============================================================
       POINTER LABEL
       The real OS pointer stays — full precision, and it already says
       "clickable" better than anything we could draw. What it can't say is
       that a hover DOES something: that the walkers pause under the cursor,
       that a table row pins the diagram, that a pricing tier lights what it
       adds. So nothing is drawn unless there is something to say, and then
       it's a word rather than a shape.
       ============================================================ */
    .curlab { position: fixed; top: 0; left: 0; z-index: 10000;
      pointer-events: none; opacity: 0; will-change: transform; }
    .curlab > span { display: block; transform: translate(14px, 14px) scale(.9);
      transform-origin: 0 0;
      padding: 5px 11px 6px; border-radius: 100px;
      background: var(--purple); color: #fff;
      font-size: .62rem; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; white-space: nowrap;
      box-shadow: 0 10px 24px -12px rgba(28,20,60,.65);
      transition: transform .32s var(--ease-expo); }
    .curlab.is-on > span { transform: translate(14px, 14px) scale(1); }

    @media (hover: none) { .curlab { display: none; } }
    @media (prefers-reduced-motion: reduce) { .curlab { display: none; } }



    /* ============================================================
       PRELOADER
       The site signs off with a letter-by-letter wordmark in the footer, so it
       opens with the same idiom — introduction and signature in one voice. The
       hairline carries real progress, then becomes the edge that lifts the
       panel away, so the exit is one movement rather than two.
       ============================================================ */
    .pre { position: fixed; inset: 0; z-index: 200; overflow: hidden;
      background: var(--ink); color: #fff;
      display: grid; place-items: center;
      -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
    /* set in <head> from sessionStorage — a repeat visit never paints it */
    html[data-pre="seen"] .pre { display: none; }
    .pre::before { content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
      width: min(140vw,1100px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.3), transparent 62%); filter: blur(40px); }

    .pre-brand { position: relative; }
    /* the reversed lockup: ink recoloured to white in the asset itself, so the
       purple survives — a brightness(0) invert(1) filter would have flattened
       both halves to the same white */
    .pre-logo { width: clamp(220px, 34vw, 420px); height: auto;
      -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }

    .pre-meta { position: absolute; left: var(--margin-outer); right: var(--margin-outer);
      bottom: clamp(26px,3.4vw,44px);
      display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
    .pre-cap { max-width: 30ch; font-size: clamp(.72rem,.9vw,.82rem); line-height: 1.5;
      color: rgba(255,255,255,.42); }
    .pre-num { display: flex; align-items: baseline; gap: .12em;
      font-family: var(--font-display); font-weight: 800; color: #fff;
      font-variant-numeric: tabular-nums; }   /* so the digits don't jitter */
    .pre-num b { font-size: clamp(2.6rem,7vw,5.6rem); letter-spacing: -.055em; line-height: .86; }
    .pre-num i { font-style: normal; font-size: clamp(.8rem,1.2vw,1rem); color: var(--purple); }

    /* the progress hairline, which becomes the wipe edge on exit */
    .pre-rule { position: absolute; left: 0; right: 0; top: 100%; transform: translateY(-100%);
      height: 2px; background: rgba(255,255,255,.08); }
    .pre-rule i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center;
      background: linear-gradient(90deg, #7a63d6, var(--purple)); }

    @media (max-width: 620px) {
      .pre-cap { display: none; }
      .pre-meta { justify-content: flex-end; }
    }

    /* ============================================================
       ANNOUNCEMENT BAR
       ============================================================ */
    .announce {
      position: relative; z-index: 60;
      background: linear-gradient(90deg, var(--purple-deep), var(--purple));
      color: #fff; text-align: center;
      font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
      padding: 9px 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .announce .pip { width: 6px; height: 6px; border-radius: 50%; background: #b9ffce; box-shadow: 0 0 0 0 rgba(185,255,206,0.7); animation: pulse 2s infinite; }
    @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(185,255,206,0.6);} 70%{box-shadow:0 0 0 7px rgba(185,255,206,0);} 100%{box-shadow:0 0 0 0 rgba(185,255,206,0);} }
    .announce a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700;
      white-space: nowrap; }
    .announce .ann-short { display: none; }

    /* One line on phones. The full sentence plus the link needs 486px, so on a
       390px screen it would have to drop to 8px to fit — unreadable. The bar
       carries a shorter line below 580px instead (where the full one stops
       fitting) and scales with the viewport, so it holds one line from 320px
       up while staying at the desktop size wherever the cap applies. */
    @media (max-width: 580px) {
      .announce { white-space: nowrap; gap: 8px;
        font-size: clamp(0.6rem, 3.17vw, 0.82rem);
        padding-left: 12px; padding-right: 12px; }
      .announce .ann-long { display: none; }
      .announce .ann-short { display: inline; }
    }

    /* ============================================================
       NAV  (Section 01) — floating capsule header
       ============================================================ */
    nav { position: sticky; top: 0; z-index: 50; padding: 14px var(--margin-outer); transition: padding 0.45s var(--ease-expo); }
    nav.scrolled { padding: 10px var(--margin-outer); }

    .nav-shell {
      position: relative;
      display: flex; align-items: center; gap: 20px;
      max-width: 1280px; margin: 0 auto;
      padding: 9px 10px 9px 16px;
      border: 1px solid transparent; border-radius: 60px;
      transition: max-width 0.55s var(--ease-expo), background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, padding 0.45s var(--ease-expo);
    }
    nav.scrolled .nav-shell {
      max-width: 1080px;
      background: rgba(255,255,255,0.7);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      backdrop-filter: saturate(180%) blur(18px);
      border-color: var(--border);
      box-shadow: 0 16px 46px -22px rgba(50,38,98,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
    }

    .nav-brand { display: flex; align-items: center; flex: none; }
    .nav-logo { height: 22px; width: auto; transition: opacity .3s ease; }
@media (hover: hover) {
      .nav-brand:hover .nav-logo { opacity: .78; }
    }
    nav.scrolled .nav-logo { height: 20px; }

    .nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.7vw, 26px); flex: 1; }
    .navlink {
      position: relative;
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 0.92rem; font-weight: 500; color: var(--text-secondary);
    }
    .navlink-roll { display: block; height: 1.3em; line-height: 1.3em; overflow: hidden; }
    .navlink-roll span { display: block; transition: transform 0.45s var(--ease-expo); }
    .navlink-roll span:nth-child(2) { color: var(--purple); }
@media (hover: hover) {
      .navlink:hover .navlink-roll span { transform: translateY(-100%); }
      /* you are already here — the roll has nowhere to go */
      .navlink.is-current:hover .navlink-roll span { transform: none; }
    }

    /* current page. The dot sits in .navlink's existing 7px flex gap, so it
       costs no vertical room inside a 9px-padded capsule. */
    .navlink.is-current { color: var(--purple); font-weight: 600; }
    .navlink.is-current .navlink-roll span { color: var(--purple); }
    .navlink.is-current::before {
      content: ''; flex: none;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--purple);
    }

    .nav-cta { display: flex; align-items: center; gap: 8px; flex: none; }
    .nav-signin { font-size: 0.92rem; font-weight: 600; color: var(--ink); padding: 9px 15px; border-radius: 100px; transition: background 0.25s ease; }
@media (hover: hover) {
      .nav-signin:hover { background: var(--purple-lighter); }
    }

    /* scroll-progress line inside the capsule */
    .nav-progress { position: absolute; left: 26px; right: 26px; bottom: 1px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity 0.4s ease; }
    nav.scrolled .nav-progress { opacity: 1; }
    .nav-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--purple), #8a72e0); }

    /* hamburger */
    .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 13px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--purple-lighter); flex: none; }
    .nav-toggle span { width: 20px; height: 2px; background: var(--purple); border-radius: 2px; transition: transform 0.35s var(--ease-expo), opacity 0.25s; }
    body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    body.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

    /* full-screen mobile overlay */
    .nav-overlay {
      position: fixed; inset: 0; z-index: 49; background: var(--bg);
      display: flex; flex-direction: column; justify-content: center;
      padding: 120px var(--margin-outer) 48px;
      clip-path: inset(0 0 100% 0); pointer-events: none;
      transition: clip-path 0.7s var(--ease-expo);
    }
    body.menu-open .nav-overlay { clip-path: inset(0 0 0% 0); pointer-events: auto; }
    .nav-overlay::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
      background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 26px 26px;
    }
    .ov-links { position: relative; display: flex; flex-direction: column; gap: 2px; }
    .ov-link {
      display: flex; align-items: baseline; gap: 16px;
      font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
      font-size: clamp(2.2rem, 10vw, 3.6rem); color: var(--ink); padding: 6px 0;
      transition: color 0.3s ease, padding-left 0.4s var(--ease-expo);
    }
    .ov-link .ov-idx { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--purple); }
@media (hover: hover) {
      .ov-link:hover { color: var(--purple); padding-left: 14px; }
    }
    .ov-link.is-current { color: var(--purple); }
    .ov-link.is-current .ov-idx {
      color: #fff; background: var(--purple);
      border-radius: 100px; padding: 3px 7px;
      /* the pad is cancelled so the pill costs no layout width and every
         label stays on the same left edge */
      margin-inline: -7px;
    }
    .nav-overlay-foot { position: relative; margin-top: 40px; display: flex; align-items: center; gap: 12px; }
    .nav-overlay-foot .nav-signin { border: 1px solid var(--border); }

    /* ============================================================
       BUTTONS
       ============================================================ */
    /* ============================================================
       CTA SYSTEM
       One button sitewide: a pill whose arrow sits in its own circle and
       rotates 45deg on hover. Everything else is a colour variant of it.
       This replaces three unrelated designs that had grown up across seven
       class names — a 12px rounded rect with a sliding arrow, a gradient
       pill, and this one — with three radii, three sizes, two weights and
       two different hover gestures between them.
       ============================================================ */
    /* CTA hover ------------------------------------------------------------
       Two things, both expo-out (cubic-bezier(.16,1,.3,1)) — the arrival curve:
       a fill wipes across from the left, and the arrow leaves top-right while a
       second one arrives from bottom-left, along the diagonal the glyph itself
       points. The disc inverts as the fill lands under it.
       Each variant sets its own fill and inverted disc through the four custom
       properties below, so the LABEL never changes colour — a label recolouring
       mid-wipe is the usual way this effect goes wrong, since colour cannot be
       applied to half a word while the fill is only half across.
       No magnetic lean: it used to translate up to 35% of the pointer offset,
       which meant the button chased the cursor and never sat still. */
    .cta {
      --cta-fill: linear-gradient(120deg, #7a63d6, var(--purple));
      --cta-disc-hover: #fff;
      --cta-arw-hover: var(--purple);
      position: relative; overflow: hidden; isolation: isolate;
      display: inline-flex; align-items: center; gap: 12px;
      padding: 12px 12px 12px 26px; border-radius: 100px;
      background: var(--ink); color: #fff;
      font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em;
      white-space: nowrap; border: 1px solid transparent;
      box-shadow: 0 18px 34px -22px rgba(18,18,23,0.7);
      transition: transform 0.45s var(--ease-expo), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      will-change: transform;
    }
    /* negative z-index paints above the button's own background and below its
       text, so the label needs no z-index of its own */
    .cta::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      border-radius: inherit; background: var(--cta-fill);
      transform: scaleX(0); transform-origin: left center;
      transition: transform .5s cubic-bezier(.16,1,.3,1);
    }
@media (hover: hover) {
      .cta:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -22px rgba(18,18,23,0.8); }
      .cta:hover::before { transform: scaleX(1); }
    }
    .cta-ic {
      --cta-arw: #fff;
      position: relative; overflow: hidden;
      width: 34px; height: 34px; flex: none; border-radius: 50%;
      display: grid; place-items: center; line-height: 1;
      background: var(--purple); font-size: 0.95rem;
      /* the glyph in the markup only holds the disc's size open; the two that
         animate are the pseudo-elements, so no HTML had to change */
      color: transparent;
      transition: background 0.3s ease;
    }
    .cta-ic::before, .cta-ic::after {
      content: '\2197'; position: absolute; inset: 0;
      display: grid; place-items: center;
      color: var(--cta-arw);
      transition: transform .55s cubic-bezier(.16,1,.3,1), color .3s ease;
    }
    .cta-ic::after { transform: translate(-115%, 115%); }   /* waiting off-stage */
@media (hover: hover) {
      .cta:hover .cta-ic::before { transform: translate(115%, -115%); }
      .cta:hover .cta-ic::after { transform: translate(0, 0); }
      .cta:hover .cta-ic { background: var(--cta-disc-hover); --cta-arw: var(--cta-arw-hover); }
    }

    /* on dark ground — footer, closing band */
    .cta--light { background: #fff; color: var(--ink); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.6);
      --cta-fill: linear-gradient(120deg, #f4f0ff, var(--purple-light));
      --cta-disc-hover: var(--purple); --cta-arw-hover: #fff; }
@media (hover: hover) {
      .cta--light:hover { box-shadow: 0 32px 58px -22px rgba(0,0,0,0.7); }
    }

    /* secondary — same geometry, no fill, so the pair reads as one family */
    .cta--ghost { background: transparent; color: var(--ink); border-color: var(--border); box-shadow: none;
      --cta-fill: var(--purple-light);
      --cta-disc-hover: var(--purple); --cta-arw-hover: #fff; }
@media (hover: hover) {
      .cta--ghost:hover { border-color: var(--purple); box-shadow: none; }
    }
    .cta--ghost .cta-ic { background: var(--purple-light); --cta-arw: var(--purple); }
    .cta--ghost.cta--on-dark { color: #fff; border-color: rgba(255,255,255,0.28);
      --cta-fill: rgba(255,255,255,.14);
      --cta-disc-hover: #fff; --cta-arw-hover: var(--ink); }
@media (hover: hover) {
      .cta--ghost.cta--on-dark:hover { border-color: rgba(255,255,255,0.6); }
    }
    .cta--ghost.cta--on-dark .cta-ic { background: rgba(255,255,255,0.16); --cta-arw: #fff; }

    /* nav — the capsule can't take a 58px button, so the same design steps down */
    .cta--sm { padding: 7px 7px 7px 18px; gap: 10px; font-size: 0.9rem; }
    .cta--sm .cta-ic { width: 30px; height: 30px; font-size: 0.85rem; }

    /* ============================================================
       HERO  (Section 02)
       ============================================================ */
    .hero {
      position: relative; overflow: hidden;
      padding: clamp(40px, 6vw, 80px) var(--margin-outer) clamp(20px, 3vw, 44px);
      background:
        radial-gradient(120% 80% at 80% -10%, var(--purple-lighter) 0%, transparent 55%),
        radial-gradient(90% 60% at 0% 10%, #fbfaff 0%, transparent 50%),
        var(--bg);
    }
    /* dotted grid texture */
    .hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(var(--border) 1px, transparent 1px);
      background-size: 26px 26px;
      -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 75%);
      mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 75%);
      opacity: 0.6;
    }
    /* FLIPPING GRID BACKGROUND */
    .flip-grid {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      display: grid; perspective: 900px;
      grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
      grid-auto-rows: 78px;
      -webkit-mask-image: radial-gradient(95% 80% at 50% 22%, #000 0%, transparent 80%);
      mask-image: radial-gradient(95% 80% at 50% 22%, #000 0%, transparent 80%);
      opacity: 1;
    }
    .flip-cell {
      border-right: 1px solid rgba(93,69,178,0.11);
      border-bottom: 1px solid rgba(93,69,178,0.11);
      transform-style: preserve-3d;
      transition: transform 0.9s cubic-bezier(0.4,0,0.2,1), background-color 0.9s ease;
      background-color: transparent;
    }
    .flip-cell.flip { background-color: rgba(93,69,178,0.11); }
    .flip-cell.flip.fx { transform: rotateX(180deg); }
    .flip-cell.flip.fy { transform: rotateY(180deg); }
    /* quieter variant for .how — sits behind the content and fades from the centre */
    .how-flip { z-index: 0;
      -webkit-mask-image: radial-gradient(78% 66% at 50% 46%, #000 0%, transparent 82%);
      mask-image: radial-gradient(78% 66% at 50% 46%, #000 0%, transparent 82%); }
    .how-flip .flip-cell { border-color: rgba(93,69,178,.075); }
    .how-flip .flip-cell.flip { background-color: rgba(93,69,178,.07); }

    .hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; text-align: center; }

    .badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--purple-light); color: var(--purple);
      font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
      padding: 8px 15px; border-radius: 100px;
    }
    .badge .spark { color: var(--purple); }

    .hero-head {
      margin: 26px auto 0;
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.9rem, 4.6vw, 4.9rem); line-height: 1.32;
      letter-spacing: var(--tracking-display);
      max-width: min(1620px, 98vw);
      text-align: center;
    }
    .hero-line { display: block; white-space: nowrap; text-align: center; }
    .hero-line .word { display: inline-block; will-change: transform; }
    @media (max-width: 820px) {
      .hero-line { white-space: normal; }
    }

    /* SELECTION-BOX TREATMENT on the last word */
    .select-word {
      position: relative; display: inline-flex; align-items: center;
      font-size: 0.96em; line-height: 1;
      margin: 0; padding: 0.14em 0.22em 0.18em;
      vertical-align: baseline;
      background: linear-gradient(100deg, var(--purple) 8%, #8a72e0 55%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .sel-box {
      position: absolute; inset: 0;
      border: 2px solid var(--purple); border-radius: 6px;
      pointer-events: none; -webkit-text-fill-color: initial;
      will-change: transform, opacity;
    }
    .sel-box .h {
      position: absolute; width: 13px; height: 13px; border-radius: 2px;
      background: var(--purple); border: none;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .sel-box .h.tl { top: 0; left: 0; }
    .sel-box .h.tr { top: 0; left: 100%; }
    .sel-box .h.bl { top: 100%; left: 0; }
    .sel-box .h.br { top: 100%; left: 100%; }

    .hero-sub {
      margin: 24px auto 0; font-size: clamp(0.95rem, 1.4vw, 1.18rem); color: var(--text-secondary);
      max-width: none; white-space: nowrap; font-weight: 400;
    }
    @media (max-width: 980px) {
      .hero-sub { white-space: normal; max-width: 44ch; }
    }

    /* PIPELINE RAIL — signature element */
    .pipeline { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; position: relative; }
    .pipeline .stage {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 1px solid var(--border); border-radius: 100px;
      padding: 8px 16px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
      text-transform: capitalize;
      position: relative; will-change: transform, opacity;
      transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }
    .pipeline .stage .num { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
    .pipeline .stage.lit { color: var(--purple); border-color: var(--purple); background: var(--purple-lighter); box-shadow: 0 8px 20px -14px rgba(93,69,178,0.7); }
    .pipeline .connector { width: 26px; height: 2px; background: var(--border); position: relative; overflow: hidden; border-radius: 2px; }
    .pipeline .connector::after { content: ''; position: absolute; inset: 0; background: var(--purple); transform: scaleX(0); transform-origin: left; }
    .pipeline .connector.flow::after { transform: scaleX(1); transition: transform 0.5s var(--ease-expo); }

    .hero-actions { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .badge { margin: 0 auto; }

    /* DASHBOARD MOCKUP */
    .hero-stage { position: relative; margin-top: clamp(48px, 7vw, 90px); perspective: 1700px; }

    /* DEMO SECTION (its own section + animated title) */
    .demo-section { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 64px) clamp(8px, 2vw, 20px) clamp(60px, 8vw, 110px); background: linear-gradient(180deg, #fff 0%, var(--purple-lighter) 42%, #fff 100%); }
    .demo-intro { text-align: center; max-width: 800px; margin: 0 auto clamp(46px, 6vw, 76px); position: relative; z-index: 2; }
    .demo-intro .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple); background: var(--purple-light); padding: 8px 15px; border-radius: 100px; }
    .sec-title { margin-top: 20px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.03; letter-spacing: -0.035em; color: var(--ink); }
    .sec-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
    .sec-title .line > span { display: block; will-change: transform; }

    /* Pricing's heading is written as two lines, but the clamp's 2rem floor is
       wider than a phone column: "every client you onboard." measures 11.1x its
       font-size, so at 375px it wanted 354px of the 335px available and spilled
       onto a third line. Cap the size at what fits — 11.8 is that ratio as it
       rounds up at phone sizes, plus headroom. min() means the clamp still
       governs from ~420px up, so desktop
       is untouched. Re-measure if the heading is reworded. */
    .pr-head .sec-title { font-size: min(clamp(2rem, 5vw, 4.2rem),
      calc((100vw - 2 * clamp(20px,4vw,64px)) / 11.8)); }
    .pr-head .sec-title .line > span { white-space: nowrap; }
    .sec-sub { margin: 18px auto 0; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--text-secondary); max-width: 52ch; }
    .demo-section .hero-stage { margin-top: 0; }

    /* ===== THE PROBLEM SECTION (sticky-stacking, purple + red pain accents) ===== */
    /* tighter side padding than the global --margin-outer so the 5-up grid can breathe */
    .problem { position: relative; overflow: clip; padding: clamp(80px,10vw,150px) clamp(20px,2.2vw,38px) clamp(48px,6vw,90px); background: linear-gradient(180deg, #e9e2fa 0%, #e2d9f7 48%, #e9e2fa 100%); }

    /* aurora background */
    .problem-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .problem-bg .orb { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
    .problem-bg .orb-1 { width: min(50vw,620px); aspect-ratio: 1; top: -14%; left: -9%; background: radial-gradient(circle, #ab97ec, transparent 66%); opacity: .8; animation: orbDrift1 20s ease-in-out infinite; }
    .problem-bg .orb-2 { width: min(44vw,540px); aspect-ratio: 1; bottom: -4%; right: -10%; background: radial-gradient(circle, #c3b5f5, transparent 66%); opacity: .82; animation: orbDrift2 24s ease-in-out infinite; }
    .problem-bg .orb-3 { width: min(32vw,400px); aspect-ratio: 1; top: 38%; left: 42%; background: radial-gradient(circle, rgba(122,99,214,.32), transparent 66%); opacity: .9; animation: orbDrift3 28s ease-in-out infinite; }
    .problem-bg .pgrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(93,69,178,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(93,69,178,.13) 1px, transparent 1px); background-size: 60px 60px; opacity: .9; -webkit-mask-image: radial-gradient(96% 75% at 50% 40%, #000, transparent 84%); mask-image: radial-gradient(96% 75% at 50% 40%, #000, transparent 84%); }
    @keyframes orbDrift1 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(52px,42px) scale(1.08); } }
    @keyframes orbDrift2 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-46px,-32px) scale(1.1); } }
    @keyframes orbDrift3 { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(30px,-42px); } }

    .problem-head { position: relative; z-index: 1; text-align: center; max-width: 1280px; margin: 0 auto; }
    .problem-head .sec-title .line > span { white-space: nowrap; }
    @media (max-width: 900px) {
      .problem-head .sec-title .line > span { white-space: normal; }
    }
    .problem-stack { position: relative; z-index: 1; }
    .problem .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple); background: var(--purple-light); padding: 10px 18px; border-radius: 100px; }
    .txt-red { color: var(--coral); }
    /* The problem headline used coral, which measured 2.78:1 on this lavender
       ground — under the 3:1 floor even at display size. Deep purple keeps the
       turn distinct from the solution's accent purple at 6.92:1. */
    .txt-deep { color: var(--purple-deep); }
    .txt-accent { color: var(--purple); }
    .problem-stack { max-width: 1080px; margin: clamp(44px,6vw,84px) auto 0; }

    /* ===== PROBLEM GRID (bento cards, Awwwards-tier) ===== */
    .prob-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: clamp(12px, 1.05vw, 17px);
      max-width: 1800px;
      width: 100%;
      margin: clamp(44px,6vw,84px) auto 0;
      position: relative; z-index: 1;
      perspective: 1600px;   /* gives the reveal cascade real depth */
    }
    .prob-card {
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: clamp(11px, 1vw, 15px);
      --pc-pad: clamp(13px, 1.2vw, 18px);
      padding: var(--pc-pad);
      border-radius: clamp(20px, 2vw, 26px);
      border: 1px solid rgba(93,69,178,0.16);
      box-shadow: 0 26px 54px -34px rgba(50,38,98,.45);
      overflow: hidden;
      transition: box-shadow .5s ease, border-color .5s ease;   /* transform is GSAP-owned — don't double-drive it */
      will-change: transform, opacity;
      transform-style: preserve-3d;
      min-height: clamp(340px, 38vh, 420px);
    }
    /* ---- Bridge: the pivot between the five broken steps and the one platform.
       A hairline draws down out of the cards, the concession lands, then the
       turn. Deliberately the quietest block on the page — it's a breath. ---- */
    .bridge { position: relative; z-index: 1; text-align: center; margin: clamp(26px,3vw,44px) auto 0; max-width: 1160px; }
    .bridge-rule { display: block; width: 1px; height: clamp(30px,3.2vw,48px); margin: 0 auto clamp(18px,2vw,26px); overflow: hidden; }
    .bridge-rule i { display: block; width: 100%; height: 100%; transform-origin: top center;
      background: linear-gradient(180deg, rgba(93,69,178,0), rgba(93,69,178,.45)); }
    .bridge-lead { margin: 0; font-family: var(--font-display); letter-spacing: -0.032em; line-height: 1.28; }
    .bridge-lead .bl { display: block; overflow: hidden; }
    .bridge-lead .bl > span { display: block; }
    .bridge-lead .bl:not(.turn) > span { font-size: clamp(1.1rem,1.85vw,1.6rem); font-weight: 600; color: var(--text-secondary); }
    .bridge-lead .turn > span { font-size: clamp(1.65rem,3.4vw,3.1rem); font-weight: 800; color: var(--ink); margin-top: .2em; }
    /* marker highlight — background-size is animated, so the text never sits behind it */
    .bridge-lead .hl {
      background-color: transparent; color: var(--ink);
      background-image: linear-gradient(90deg, rgba(93,69,178,.34), rgba(93,69,178,.15));
      background-repeat: no-repeat; background-position: 0 84%;
      background-size: 0% .34em;
      padding: 0 .07em; border-radius: 2px;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;  /* paints on every wrapped line */
    }
    /* the turn reads as one line wherever there's room; below ~560px it has to wrap */
    @media (min-width: 560px) {
      .bridge-lead .turn > span { white-space: nowrap; }
    }

    /* Hover: a quiet lift — shadow and border only, transform is GSAP's */
    .prob-card.is-hover {
      box-shadow: 0 32px 64px -34px rgba(50,38,98,0.42);
      border-color: rgba(93,69,178,0.3);
    }
    /* reduced-motion gets no JS hover listeners — keep a static affordance,
       but still only where a real pointer exists */
    @media (prefers-reduced-motion: reduce) and (hover: hover) {
      .prob-card:hover { box-shadow: 0 32px 64px -34px rgba(50,38,98,0.42); border-color: rgba(93,69,178,0.3); }
    }
    /* One tonal family — a quiet ramp, not five different hues */
    .prob-card.c1 { background: linear-gradient(160deg, #ffffff, #fbfaff); }
    .prob-card.c2 { background: linear-gradient(160deg, #fefdff, #f8f6ff); }
    .prob-card.c3 { background: linear-gradient(160deg, #fdfcff, #f5f2ff); }
    .prob-card.c4 { background: linear-gradient(160deg, #fcfbff, #f2eeff); }
    .prob-card.c5 { background: linear-gradient(160deg, #fbf9ff, #efeaff); }

    /* The stage label is the card's header — filled purple so it reads at a
       glance. Purple at the top (the workflow step), coral at the foot (its
       cost): the card tells you where you are and what it costs you. */
    .prob-head {
      display: flex; align-items: center; justify-content: space-between;
      background: linear-gradient(135deg, #7259cf, var(--purple));
      padding: 10px 12px 10px 18px;
      border-radius: 100px;
      border: 1px solid rgba(74,53,150,0.55);
      box-shadow: 0 12px 26px -14px rgba(93,69,178,0.7);
    }
    .prob-head .prob-eyebrow {
      font-family: var(--font-display); font-weight: 800;
      font-size: .82rem; color: #fff;
      text-transform: uppercase; letter-spacing: 0.1em;
    }
    /* solid white chip — a translucent tint on purple left the icon unreadable */
    .prob-head .prob-ic {
      width: 28px; height: 28px; border-radius: 100px;
      display: grid; place-items: center; flex: none;
      background: #fff;
      color: var(--purple);
      box-shadow: 0 2px 6px -2px rgba(30,18,70,.45);
    }
    .prob-head .prob-ic svg { width: 15px; height: 15px; display: block; }

    .prob-vis-slot {
      position: relative;
      background: #fff;
      border-radius: clamp(16px, 1.6vw, 22px);
      padding: 14px;
      height: clamp(244px, 26.5vh, 268px);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 22px 44px -28px rgba(50,38,98,0.35);
      overflow: visible;
    }
    .prob-vis-slot .pcard-visual-wrap { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
    .prob-vis-slot .pcard-visual {
      width: 100%; height: auto;
      min-height: 0;
      background: transparent;
      border: none;
      border-radius: 0; padding: 0;
      box-shadow: none;
      display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
      overflow: visible;
      position: relative;
    }
    .prob-vis-slot .pcard-visual-wrap .ntf-badge {
      position: absolute; top: -8px; left: 4px; z-index: 6;
      background: var(--stall); color: #fff;
      font-size: .62rem; font-weight: 700;
      padding: 5px 11px; border-radius: 100px;
      box-shadow: 0 10px 18px -6px rgba(58,52,74,.45);
      transform-origin: left center; animation: badgePulse 2.4s ease-out infinite;
    }

    .prob-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 0; }
    .prob-body .prob-title {
      margin: 0;
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.1rem, 1.28vw, 1.36rem);
      line-height: 1.2;
      letter-spacing: -0.028em;
      color: var(--ink);
      min-height: 1.2em;  /* every title is one line — reserve exactly that */
    }
    .prob-body .prob-desc {
      margin: 0;
      font-size: .95rem; line-height: 1.6;
      color: #55555f;
    }
    /* The cost is the whole argument of this section — so it gets a full-bleed
       band at the card's foot rather than a quiet line. Coral is already this
       section's pain signal, so the band reads instantly as "what it costs you". */
    .prob-body .pcard-tag {
      align-self: stretch;
      /* bleed to the card edges — cancels the card padding AND .prob-body's 4px inset */
      margin: auto calc((var(--pc-pad) + 4px) * -1) calc(var(--pc-pad) * -1);
      /* label above, verdict below: inline, the label stole width and pushed the
         longer verdicts onto a third line, so the five bands stopped aligning */
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; gap: 3px;
      padding: 12px calc(var(--pc-pad) + 4px) 14px;
      /* reserve label + the longest verdict (2 lines) so all five bands align */
      min-height: calc(2.4rem + 45px);
      /* Inverted, not tinted. At 6% purple the verdict receded into the card it
         was meant to indict; solid deep purple makes each card end on a hit.
         10.14:1 for the verdict, and the band itself reads 10.14:1 against the
         white card above it. */
      background: linear-gradient(180deg, #4a3596, #3d2b7e);
      border-top: none;
      border-radius: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
      color: #fff;
      font-size: .92rem; font-weight: 700; line-height: 1.4;
      letter-spacing: -0.014em;
    }
    /* a labelled verdict rather than a loose sentence with a dot on it */
    .prob-body .pcard-tag::before {
      content: 'Cost'; flex: none;
      font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.7);    /* 5.85:1 — it is 9.6px type, so it needs the weight */
    }
    /* the pulsing dot was doing the label's job, less clearly */
    .prob-body .pcard-tag .cdot { display: none; }

    /* Compact tweaks for inline visuals inside the smaller card slot */
    /* The slot is only ~199px wide, so every title and subtitle wrapped to two
       lines — four-line rows at 58-67px each. One line apiece with an ellipsis
       reads like a real truncated inbox and takes a third off the height. */
    .prob-vis-slot .vis-inbox { gap: 2px; }
    .prob-vis-slot .vis-inbox .ntf { padding: 5px 8px; }
    .prob-vis-slot .vis-inbox .ntf-tx { min-width: 0; }   /* or the ellipsis never kicks in */
    .prob-vis-slot .vis-inbox .ntf-tx b,
    .prob-vis-slot .vis-inbox .ntf-tx small {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .prob-vis-slot .vis-inbox .ntf-tx b { font-size: .66rem; line-height: 1.25; }
    /* small is inline by default, so its line box inherits the 1.6 body strut and
       adds ~14px of dead space per row — block it out and space it explicitly */
    .prob-vis-slot .vis-inbox .ntf-tx small { font-size: .58rem; line-height: 1.3; display: block; margin-top: 3px; }
    .prob-vis-slot .vis-inbox .ntf-ic { width: 20px; height: 20px; font-size: .5rem; }
    .prob-vis-slot .vis-inbox .ntf-t { font-size: .56rem; }
    .prob-vis-slot .vis-foot { font-size: .6rem; margin-top: 6px; }
    .prob-vis-slot .vis-sheet { gap: 5px; }
    .prob-vis-slot .vis-sheet .srow { padding: 3px 9px; font-size: .63rem; line-height: 1.25; }
    .prob-vis-slot .vis-sheet .srow.head { font-size: .5rem; }
    .prob-vis-slot .vis-sheet .tab { font-size: .53rem; max-width: 82px; padding: 4px 6px; }
    .prob-vis-slot .vis-sheet .timer { font-size: .58rem; padding: 5px; }
    .prob-vis-slot .vis-tools { flex-direction: column; gap: 6px; }
    .prob-vis-slot .vis-tools .sync-break { margin: -4px 0; }
    .prob-vis-slot .vis-tools .spark { width: 27px; height: 27px; font-size: .76rem; }
    .prob-vis-slot .vis-tools .sync-break small { font-size: .5rem; padding: 2px 6px; }
    .prob-vis-slot .vis-tools .tw-body { min-height: 38px; padding: 8px; gap: 6px; }
    .prob-vis-slot .vis-tools .tw-bar { padding: 6px 10px; font-size: .6rem; }
    .prob-vis-slot .vis-tools .tw-body .ln { height: 7px; }
    .prob-vis-slot .vis-mood .mtile { height: 54px; }
    .prob-vis-slot .vis-mood .mtile.q { font-size: 1rem; }
    .prob-vis-slot .vis-mood .mood-note { font-size: .62rem; padding: 5px 10px; }
    .prob-vis-slot .vis-chat { gap: 8px; }
    .prob-vis-slot .vis-chat .bub { font-size: .66rem; padding: 7px 10px 16px; }
    .prob-vis-slot .vis-chat .av { width: 22px; height: 22px; font-size: .55rem; }
    .prob-vis-slot .vis-chat .bub .meta { font-size: .48rem; bottom: 3px; right: 8px; }
    .prob-vis-slot .vis-chat .attach { font-size: .56rem; padding: 1px 6px; }

    /* Card reveal is driven by GSAP (initial state set in JS) */

    @media (max-width: 1280px) {
      .prob-grid { grid-template-columns: repeat(3, 1fr); }
      .prob-card:nth-child(4), .prob-card:nth-child(5) { grid-column: span 1; }
    }
    @media (max-width: 900px) {
      .prob-grid { grid-template-columns: repeat(2, 1fr); }
    }
    /* the rail and its dots are phones-only — base rule first, or it would
       override the media query it belongs to */
    .prob-dots { display: none; }

    /* ---- phones: a swipeable rail, not a 3,400px column ------------------
       Stacked, the five cards ran the section to 3,400px on a 390px screen —
       four and a half screens of scrolling to read one point five times. As a
       rail each card gets the screen to itself, the next one peeks in at 8%
       so it reads as swipeable, and snapping stops it landing between cards.
       The perspective goes: a rotateX reveal inside a scroll container gets
       clipped by the scroll box. ------------------------------------------ */
    @media (max-width: 620px) {
      .prob-grid {
        display: flex; grid-template-columns: none; perspective: none;
        gap: 12px; padding: 6px 4px 16px;
        overflow: auto hidden;
        scroll-snap-type: x mandatory; scroll-padding: 0 4px;
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
        scrollbar-width: none;
      }
      .prob-grid::-webkit-scrollbar { display: none; }
      .prob-card {
        flex: 0 0 min(92%, 380px); min-height: 0;
        scroll-snap-align: center;
      }
      /* the rail's own scroll is the gesture, so the card mustn't swallow it */
      .prob-card { touch-action: pan-x pan-y; }

      .prob-dots { display: flex; justify-content: center; gap: 7px;
        margin-top: 14px; }
      .prob-dots i { width: 6px; height: 6px; border-radius: 50%;
        background: rgba(93,69,178,.24);
        transition: background .3s ease, transform .3s var(--ease-expo); }
      .prob-dots i.is-on { background: var(--purple); transform: scale(1.5); }
    }

    /* ===== STICKY APPLE-STYLE PROBLEM SCROLL (legacy, hidden) ===== */
    .ps-scroll { display: none !important; }
    /* legacy styles preserved below */
    .ps-scroll {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: clamp(40px, 5vw, 88px);
      max-width: 1320px;
      margin: clamp(44px,6vw,84px) auto 0;
    }
    .ps-track { display: flex; flex-direction: column; position: relative; }
    .ps-chapter {
      min-height: 58vh;
      display: flex; flex-direction: column; justify-content: center;
      padding: 20px 0;
      opacity: 0.28;
      transition: opacity .55s ease, transform .55s ease;
      will-change: opacity, transform;
    }
    .ps-chapter.is-active { opacity: 1; }
    .ps-chapter .ps-num {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-display); font-weight: 800;
      font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
      color: var(--purple); margin-bottom: 18px;
    }
    .ps-chapter .ps-num .ps-bar { width: 32px; height: 2px; background: var(--purple); border-radius: 2px; }
    .ps-chapter .pcard-meta { font-size: .7rem; }
    .ps-chapter .pcard-title { margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -.03em; line-height: 1.02; color: var(--ink); }
    .ps-chapter .pcard-body { margin-top: 18px; color: var(--text-secondary); font-size: 1.06rem; line-height: 1.6; max-width: 44ch; }
    .ps-chapter .pcard-tag { margin-top: 24px; }

    /* Stage column: full-height so the sticky stays sticky across ALL chapters */
    .ps-stage-wrap { position: relative; height: 100%; }
    .ps-stage {
      position: sticky; top: 14vh; height: 72vh;
      display: flex; align-items: center; justify-content: center;
      will-change: transform;
    }
    .ps-progress {
      position: absolute; top: 50%; left: -30px; transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 8px;
      z-index: 3;
    }
    .ps-progress .pdot-i {
      width: 4px; height: 28px; border-radius: 2px; background: rgba(93,69,178,.16);
      transition: background .35s ease, transform .35s ease, height .35s ease;
    }
    .ps-progress .pdot-i.is-on { background: var(--purple); height: 40px; }

    .ps-scene {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: scale(0.94) translateY(20px);
      transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1), visibility 0s linear .7s;
    }
    .ps-scene.is-active {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: scale(1) translateY(0);
      transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1), visibility 0s;
    }
    .ps-scene .pcard-visual-wrap { position: relative; width: 100%; max-width: 560px; }
    .ps-scene .pcard-visual {
      width: 100%; min-height: clamp(380px, 55vh, 520px);
      background: linear-gradient(160deg, var(--purple-lighter), #fff);
      border: 1px solid var(--border);
      border-radius: 24px; padding: 26px;
      box-shadow: 0 60px 110px -40px rgba(50,38,98,0.45), 0 24px 60px -32px rgba(18,18,23,0.3);
      display: flex; flex-direction: column; justify-content: center; gap: 12px;
      overflow: hidden;
      position: relative;
    }
    .ps-scene .pcard-visual-wrap .ntf-badge {
      position: absolute; top: -14px; left: 22px; z-index: 6;
      background: var(--stall); color: #fff; font-size: .72rem; font-weight: 700;
      padding: 7px 14px; border-radius: 100px;
      box-shadow: 0 14px 22px -6px rgba(58,52,74,.45);
      transform-origin: left center; animation: badgePulse 2.4s ease-out infinite;
    }
    /* keep the old pcard rules alive for backward-compat but hide the old container */
    .pcard { position: relative; margin: 0; display: none; }
    .pcard-index { display: none; }
    .pcard-text { position: relative; z-index: 1; }
    .pcard-visual-wrap { position: relative; z-index: 1; }
    .pcard-meta { display: flex; align-items: center; gap: 10px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--purple); }
    .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
    .pcard-title { margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,3.2vw,2.6rem); letter-spacing: -.03em; line-height: 1.04; }
    .pcard-body { margin-top: 14px; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; max-width: 44ch; }
    .pcard-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: .82rem; font-weight: 700; color: var(--purple-deep); background: var(--purple-light); padding: 9px 15px; border-radius: 100px; }
    .pcard-tag .cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 0 rgba(93,69,178,.5); animation: pulse 2.2s infinite; }

    .pcard-visual { position: relative; min-height: 214px; border-radius: 16px; background: linear-gradient(160deg, var(--purple-lighter), #fff); border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: hidden; }

    .pcard-visual { min-height: 244px; }
    .vis-foot { margin-top: 12px; font-size: .76rem; color: var(--text-muted); font-weight: 500; }
    .vis-foot b { color: var(--purple-deep); }

    /* 01 — notification pile */
    .vis-inbox { position: relative; gap: 8px; }
    .vis-inbox .ntf { display: flex; align-items: flex-start; gap: 11px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; box-shadow: 0 14px 28px -20px rgba(50,38,98,.6); }
    /* card 01 idle — messy pile float/tilt/scatter — is GSAP-driven in painCard01() */
    .vis-inbox .ntf { will-change: transform; }
    .vis-inbox .ntf.hit { border-color: rgba(107,100,120,.45); }
    .vis-inbox .ntf-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .64rem; font-weight: 800; color: #fff; flex: none; }
    .vis-inbox .wa { background: #25d366; } .vis-inbox .loom { background: #625df5; } .vis-inbox .mail { background: #ea4335; } .vis-inbox .voice { background: var(--ink); }
    .vis-inbox .ntf-tx b { font-size: .8rem; color: var(--ink); display: block; line-height: 1.25; }
    .vis-inbox .ntf-tx small { font-size: .72rem; color: var(--text-muted); }
    .vis-inbox .ntf-t { margin-left: auto; font-size: .64rem; color: var(--text-muted); font-weight: 600; flex: none; }
    .pcard-visual-wrap .ntf-badge { position: absolute; top: -11px; left: -4px; z-index: 6; background: var(--stall); color: #fff; font-size: .64rem; font-weight: 700; padding: 5px 11px; border-radius: 100px; box-shadow: 0 12px 20px -6px rgba(58,52,74,.45); }

    /* 02 — research spreadsheet + timer */
    .vis-sheet { gap: 0; padding: 0; }
    .vis-sheet .sheet-tabs { display: flex; gap: 4px; padding: 8px 10px 0; background: var(--purple-lighter); }
    .vis-sheet .tab { font-size: .62rem; font-weight: 600; color: var(--text-muted); background: #fff; border: 1px solid var(--border); border-bottom: none; border-radius: 7px 7px 0 0; padding: 6px 9px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vis-sheet .tab.active { color: var(--purple); font-weight: 700; }
    .vis-sheet .srow { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 8px; padding: 9px 14px; font-size: .78rem; border-bottom: 1px solid var(--border); align-items: center; color: var(--text-secondary); }
    .vis-sheet .srow.head { background: var(--purple); color: #fff; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
    .vis-sheet .srow .t { color: var(--purple-deep); font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; transform-origin: right center; will-change: transform; }
    .vis-sheet .srow.total { font-weight: 700; color: var(--ink); border-bottom: none; }
    .vis-sheet .srow:not(.head):not(.total) { transition: background-color .3s ease; will-change: background-color; }
    .vis-sheet { position: relative; }
    /* 02 scan beam + row grind + climbing timer — GSAP-driven in painCard02() */
    .vis-sheet .scan-beam { position: absolute; left: 0; right: 0; top: 0; height: 42px; z-index: 2; pointer-events: none; opacity: 0;
      background: linear-gradient(rgba(93,69,178,.14), rgba(93,69,178,0)); border-top: 1px solid rgba(93,69,178,.35); }
    .vis-sheet .timer { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; font-size: .7rem; color: var(--text-muted); font-weight: 600; border-top: 1px solid var(--border); }
    .vis-sheet .timer b { color: var(--purple-deep); font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left center; will-change: transform; }

    /* 03 — disconnected doc vs canvas */
    .vis-tools { flex-direction: row; align-items: center; gap: 0; }
    .vis-tools .twin { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 28px -22px rgba(50,38,98,.55); }
    .vis-tools .tw-bar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: var(--purple-lighter); border-bottom: 1px solid var(--border); font-size: .66rem; font-weight: 700; color: var(--text-secondary); }
    .vis-tools .tw-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d9d4ea; }
    .vis-tools .tw-bar span { margin-left: 6px; }
    .vis-tools .tw-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; min-height: 92px; justify-content: center; }
    .vis-tools .tw-body .ln { height: 8px; border-radius: 4px; background: var(--purple-light); }
    .vis-tools .tw-body .ln.s { width: 65%; }
    .vis-tools .canvas .shape { height: 34px; border-radius: 8px; background: var(--purple-light); }
    .vis-tools .canvas .shape.sm { width: 55%; height: 14px; }
    .vis-tools .twin { will-change: transform, border-color; }
    .vis-tools .tw-body .ln { will-change: background-color; }
    .vis-tools .sync-break { flex: none; z-index: 3; margin: 0 -13px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    /* card 03 idle (spark buzz + rejected sync-pulse) is GSAP-driven in painCard03() */
    .vis-tools .spark { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px dashed var(--stall); color: var(--stall); display: grid; place-items: center; font-size: 1rem; will-change: transform, box-shadow, border-color; }
    .vis-tools .sync-break small { font-size: .58rem; font-weight: 700; color: var(--stall); white-space: nowrap; background: var(--stall-bg); padding: 3px 8px; border-radius: 100px; }
    .vis-tools .sync-pulse { position: absolute; top: 50%; left: 0; margin-top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 12px 2px rgba(93,69,178,.55); opacity: 0; z-index: 4; pointer-events: none; }

    /* 04 — vague moodboard */
    .vis-mood { gap: 12px; }
    .vis-mood .mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .vis-mood .mtile { height: 66px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; will-change: transform, opacity; }
    /* card 04 idle (blurry drift + guessing "?" flicker) is GSAP-driven in painCard04() */
    .vis-mood .mtile.img1 { background: linear-gradient(135deg, #c6b4f0, #a08fe0); filter: blur(2.5px); }
    .vis-mood .mtile.img2 { background: linear-gradient(135deg, #e8e0fb, #c7bbf0); filter: blur(2.5px); }
    .vis-mood .mtile.q { display: grid; place-items: center; background: #fff; color: var(--stall); font-size: 1.35rem; font-weight: 800; }
    .vis-mood .mood-note { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: .74rem; font-weight: 700; color: var(--stall); background: var(--stall-bg); padding: 7px 13px; border-radius: 100px; }

    /* 05 — chat with version chaos */
    .vis-chat { gap: 13px; }
    .vis-chat .cmsg { display: flex; align-items: flex-end; gap: 8px; max-width: 90%; }
    .vis-chat .cmsg.me { margin-left: auto; flex-direction: row-reverse; }
    .vis-chat .av { width: 26px; height: 26px; border-radius: 50%; background: var(--purple-light); color: var(--purple); display: grid; place-items: center; font-size: .64rem; font-weight: 800; flex: none; }
    .vis-chat .av.you { background: var(--purple); color: #fff; }
    .vis-chat .bub { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 9px 13px 20px; font-size: .8rem; color: var(--text-secondary); }
    .vis-chat .cmsg.me .bub { background: var(--purple-light); color: var(--ink); }
    .vis-chat .cmsg, .vis-chat .av, .vis-chat .bub { will-change: transform, opacity; }
    .vis-chat .bub .meta { position: absolute; bottom: 5px; right: 11px; font-size: .58rem; color: var(--text-muted); font-weight: 600; }
    .vis-chat .bub .ver { color: var(--purple-deep); font-weight: 800; margin-left: 3px; display: inline-block; transform-origin: center; will-change: transform; }
    .vis-chat .attach { display: inline-block; margin-top: 5px; font-size: .66rem; color: var(--purple); background: var(--purple-lighter); padding: 2px 8px; border-radius: 6px; }

    /* idle micro-animations for the problem visuals */
    .pcard-visual-wrap .ntf-badge { transform-origin: left center; animation: badgePulse 2.4s ease-out infinite; }
    @keyframes badgePulse { 0%,100%{ box-shadow: 0 12px 20px -6px rgba(58,52,74,.45), 0 0 0 0 rgba(107,100,120,.5); } 60%{ box-shadow: 0 12px 20px -6px rgba(58,52,74,.45), 0 0 0 9px rgba(107,100,120,0); } }
    .vis-inbox .ntf:first-child { animation: unreadGlow 3s ease-in-out infinite; }
    @keyframes unreadGlow { 0%,100%{ box-shadow: 0 14px 28px -20px rgba(50,38,98,.6); } 50%{ box-shadow: 0 16px 30px -16px rgba(93,69,178,.4); } }
    /* card 04/05 idles (guessing "?" flicker, version glitch) are GSAP-driven */
    @keyframes verPulse { 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
    @media (prefers-reduced-motion: reduce) {
      .ntf-badge, .vis-inbox .ntf:first-child, .vis-mood .mtile.q, .vis-chat .ver, .spark { animation: none !important; }
    }

    @media (max-width: 820px) {
      .pcard { grid-template-columns: 1fr; position: relative !important; top: auto !important; }
      .pcard-index { font-size: 3rem; }
      .ps-scroll { grid-template-columns: 1fr; gap: 20px; }
      .ps-stage-wrap { order: 2; }
      .ps-track { order: 1; }
      .ps-chapter { min-height: auto; padding: 22px 0; opacity: 1; }
      .ps-progress { display: none; }
      .ps-stage { position: relative; top: auto; height: auto; padding: 24px 0 40px; }
      .ps-scene { position: relative; opacity: 1; visibility: visible; transform: none; margin-bottom: 20px; }
      .ps-scene:not(.is-active) { display: none; }
    }

    /* ===== THE SOLUTION — elevated bento (light) ===== */
    .solution { position: relative; overflow: clip; padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(84px,9vw,140px); background: linear-gradient(180deg, #ffffff 0%, #f3efff 46%, #faf8ff 100%); }
    .solution .sol-fade { display: none; }
    /* soft mesh-glow background */
    .sol-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .sol-bg .sol-orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
    .sol-bg .so1 { width: min(48vw,600px); aspect-ratio: 1; top: -12%; left: -8%; background: radial-gradient(circle, rgba(150,124,240,.5), transparent 66%); animation: orbDrift1 22s ease-in-out infinite; }
    .sol-bg .so2 { width: min(44vw,560px); aspect-ratio: 1; bottom: -14%; right: -9%; background: radial-gradient(circle, rgba(196,182,248,.55), transparent 66%); animation: orbDrift2 27s ease-in-out infinite; }
    .sol-bg .sol-glow { position: absolute; left: 50%; top: 40%; width: min(92vw,1120px); aspect-ratio: 1.5 / 1; transform: translate(-50%,-50%); background: radial-gradient(closest-side, rgba(122,98,214,.16), rgba(122,98,214,.04) 55%, transparent 72%); animation: solGlow 10s ease-in-out infinite; }
    @keyframes solGlow { 0%,100%{ opacity: .85; transform: translate(-50%,-50%) scale(1); } 50%{ opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }
    .sol-bg .sol-flow { display: none; }
    .sol-bg .sol-grid { position: absolute; inset: -6px; background-image: linear-gradient(rgba(93,69,178,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(93,69,178,.1) 1px, transparent 1px); background-size: 54px 54px; filter: blur(1px); -webkit-mask-image: radial-gradient(90% 80% at 50% 44%, #000 0%, transparent 82%); mask-image: radial-gradient(90% 80% at 50% 44%, #000 0%, transparent 82%); }
    @media (prefers-reduced-motion: reduce) { .sol-bg .so1, .sol-bg .so2, .sol-bg .sol-glow { animation: none !important; } }
    /* 1200px so the longer second line holds on one line at desktop */
    .sol-head { position: relative; z-index: 2; text-align: center; max-width: 1200px; margin: 0 auto clamp(40px,5vw,72px); }
    .solution .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple); background: var(--purple-light); padding: 10px 18px; border-radius: 100px; }

    /* ===== SOLUTION — clean, scannable feature grid ===== */
    .sol-bento { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px,1.8vw,24px); perspective: 1400px; }
    .bento { position: relative; overflow: hidden; flex: 1 1 320px; max-width: 356px; display: flex; flex-direction: column; border-radius: 24px; padding: clamp(28px,3vw,38px); background: linear-gradient(165deg, #ffffff 0%, #f7f4ff 100%); border: 1px solid rgba(93,69,178,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -2px rgba(50,38,98,.08), 0 32px 72px -54px rgba(50,38,98,.4); transition: border-color .55s cubic-bezier(.32,.72,0,1), box-shadow .55s cubic-bezier(.32,.72,0,1); will-change: transform, opacity; }
    /* cursor-following spotlight */
    .bento::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(122,98,214,.16), transparent 62%); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@media (hover: hover) {
      .bento:hover::before { opacity: 1; }
    }
    /* gradient hairline */
    .bento::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(155deg, rgba(138,114,224,.75), transparent 46%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .55s cubic-bezier(.32,.72,0,1); pointer-events: none; z-index: 2; }
@media (hover: hover) {
      .bento:hover { border-color: rgba(93,69,178,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -8px rgba(93,69,178,.2), 0 54px 104px -48px rgba(93,69,178,.5); }
    }
@media (hover: hover) {
      .bento:hover::after { opacity: 1; }
    }
    .bento-head { position: relative; z-index: 1; display: flex; align-items: flex-start; }
    .bento-num { position: absolute; top: clamp(14px,2vw,26px); right: clamp(18px,2.2vw,28px); z-index: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem,3.4vw,3.4rem); line-height: 1; letter-spacing: -.05em; color: var(--purple-light); }
    .sol-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: linear-gradient(150deg, #9a83e6, var(--purple)); color: #fff; font-size: 1.3rem; box-shadow: 0 16px 32px -10px rgba(93,69,178,.6), inset 0 1px 0 rgba(255,255,255,.4); flex: none; transition: transform .55s cubic-bezier(.32,.72,0,1); }
@media (hover: hover) {
      .bento:hover .sol-ic { transform: translateY(-2px) rotate(-4deg) scale(1.06); }
    }
    .bento-meta { position: relative; z-index: 1; margin-top: 24px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--purple); }
    .bento-title { position: relative; z-index: 1; margin-top: 9px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem,2.2vw,2rem); letter-spacing: -.03em; line-height: 1.08; color: var(--ink); }
    .bento-desc { position: relative; z-index: 1; flex: 1; margin-top: 12px; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
    .sol-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; align-self: flex-start; font-size: .78rem; font-weight: 700; color: var(--green); background: #e3f7ea; padding: 8px 15px; border-radius: 100px; }
    .sol-tag .gdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: gdotPulse 2.4s ease-out infinite; }
    @keyframes gdotPulse { 0%{ box-shadow: 0 0 0 0 rgba(22,163,74,.4); } 70%,100%{ box-shadow: 0 0 0 7px rgba(22,163,74,0); } }
    .bento .bento-viz { display: none !important; }
    @media (prefers-reduced-motion: reduce) { .sol-tag .gdot { animation: none; } }

    @media (max-width: 720px) {
      .bento { flex-basis: 100%; max-width: 440px; }
    }

    /* ===== SOLUTION — connected workflow engine ===== */
    .sol-engine { position: relative; z-index: 2; max-width: 1120px; margin: clamp(22px,3vw,46px) auto 0; border: 1.5px solid rgba(93,69,178,.26); border-radius: 30px; padding: clamp(46px,5vw,68px) clamp(22px,3vw,46px); background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); }
    .sol-eng-cap { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); z-index: 3; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #8a72e0, var(--purple)); padding: 9px 20px; border-radius: 100px; box-shadow: 0 14px 30px -10px rgba(93,69,178,.7); white-space: nowrap; }
    .sol-eng-loop { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); z-index: 3; font-size: .8rem; font-weight: 700; color: var(--purple); background: #f6f3fd; border: 1.5px solid rgba(93,69,178,.26); padding: 8px 18px; border-radius: 100px; white-space: nowrap; }
    /* flow arrows straddling the border — nudge in the direction of flow */
    .sol-eng-arw { position: absolute; width: 0; height: 0; border: 8px solid transparent; z-index: 3; }
    /* travel along the edge rather than nudging — the loop reads as a circuit:
       right along the top, left along the bottom */
    .sol-eng-arw.t { top: -8px; border-left: 11px solid var(--purple); border-right-width: 0; animation: arwTravelR 2.8s ease-in-out infinite; }
    .sol-eng-arw.b { bottom: -8px; border-right: 11px solid var(--purple); border-left-width: 0; animation: arwTravelL 2.8s ease-in-out infinite; }
    .sol-eng-arw.t.r, .sol-eng-arw.b.l { animation-delay: .5s; }
    @keyframes arwTravelR { 0% { transform: translateX(-30px); opacity: 0; } 20%,70% { opacity: 1; } 100% { transform: translateX(30px); opacity: 0; } }
    @keyframes arwTravelL { 0% { transform: translateX(30px); opacity: 0; } 20%,70% { opacity: 1; } 100% { transform: translateX(-30px); opacity: 0; } }
    .sol-eng-arw.l { left: 25%; } .sol-eng-arw.r { left: 75%; }
    @keyframes arwFlowR { 0%,100%{ transform: translateX(-3px); opacity: .55; } 50%{ transform: translateX(4px); opacity: 1; } }
    @keyframes arwFlowL { 0%,100%{ transform: translateX(3px); opacity: .55; } 50%{ transform: translateX(-4px); opacity: 1; } }
    .sol-stages { --sol-gap: clamp(20px,2.6vw,42px); position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sol-gap); }
    .sol-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .sol-stage .sol-ic { position: relative; z-index: 1; }   /* sits above the rail */
    .sol-ic svg { width: 25px; height: 25px; display: block; }

    /* ---- The rail: "everything connects" made literal. Runs between the five
       icon centres (10%→90% of a 5-column grid) with a pulse travelling it. ---- */
    /* inset = half a column, i.e. (100% - 4 gaps) / 10 — plain 10% ignores the gap
       and lands the rail ~17px short of the outer icon centres */
    /* 12px tall (not 2px) so overflow:hidden can clip the travelling pulse
       without also clipping the chevrons; the 2px line is centred inside it */
    .sol-rail { position: absolute;
      left: calc((100% - 4 * var(--sol-gap)) / 10);
      right: calc((100% - 4 * var(--sol-gap)) / 10);
      top: 22px; height: 12px; z-index: 0; pointer-events: none; overflow: hidden; }
    .sol-rail .rail-track { position: absolute; top: 5px; left: 0; right: 0; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, rgba(93,69,178,.12), rgba(93,69,178,.30) 50%, rgba(93,69,178,.12)); }
    .sol-rail .rail-flow { position: absolute; top: 5px; left: 0; height: 2px; width: 18%; border-radius: 2px;
      background: linear-gradient(90deg, transparent, var(--purple), transparent);
      animation: railFlow 3.6s cubic-bezier(.55,0,.45,1) infinite; }
    @keyframes railFlow {
      0%   { transform: translateX(-100%); opacity: 0; }
      12%  { opacity: 1; }
      82%  { opacity: 1; }
      100% { transform: translateX(556%); opacity: 0; }
    }
    /* chevrons sit at the midpoints between icons and fire left→right in sequence */
    .sol-rail .rail-chev { position: absolute; top: 6px; width: 0; height: 0;
      border: 5px solid transparent; border-left: 7px solid var(--purple); border-right-width: 0;
      margin: -5px 0 0 -3px; animation: chevPulse 2.4s ease-in-out infinite; }
    .sol-rail .c1 { left: 12.5%; } .sol-rail .c2 { left: 37.5%; animation-delay: .16s; }
    .sol-rail .c3 { left: 62.5%; animation-delay: .32s; } .sol-rail .c4 { left: 87.5%; animation-delay: .48s; }
    @keyframes chevPulse { 0%,100% { opacity: .28; transform: translateX(-3px); } 50% { opacity: 1; transform: translateX(3px); } }
    .sol-stage .sol-ic { transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s; }
@media (hover: hover) {
      .sol-stage:hover .sol-ic { transform: translateY(-3px) rotate(-4deg) scale(1.08); box-shadow: 0 20px 38px -12px rgba(93,69,178,.75), inset 0 1px 0 rgba(255,255,255,.4); }
    }
    /* demoted to a tertiary label — it was competing with the title beneath it */
    .sol-st-meta { margin-top: 30px; font-size: .62rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 700; color: rgba(93,69,178,.62); }
    /* fixed title height so every description starts on the same line */
    .sol-st-title { display: flex; align-items: center; justify-content: center; min-height: 2.4em; margin-top: 13px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem,1.28vw,1.24rem); letter-spacing: -.022em; line-height: 1.2; color: var(--ink); }
    /* wider measure + looser leading: 19ch forced 4 ragged lines per stage */
    .sol-st-desc { margin: 15px auto 0; max-width: 23ch; font-size: .845rem; line-height: 1.62; color: var(--text-secondary); }
    @media (max-width: 900px) {
      .sol-stages { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
      .sol-st-title { min-height: 0; }
      .sol-eng-arw { display: none; }
      .sol-rail { display: none; }   /* the 10%/90% anchors only hold for 5 columns */
    }
    @media (prefers-reduced-motion: reduce) {
      .sol-eng-arw, .sol-rail .rail-flow, .sol-rail .rail-chev { animation: none !important; }
      .sol-rail .rail-flow { opacity: 0; }
      .sol-rail .rail-chev { opacity: .5; transform: none; }
    }
    /* Phones: a vertical timeline, not five centred islands.
       Stacked and centred, each step read as an isolated card and the section
       lost the one thing it is about — that these are stages of a workflow,
       since the horizontal rail can only anchor five columns and is dropped
       below 900px. Here the icon column carries the rail instead: the icon
       spans the text rows and a connector runs from it to the next step.
       Left-aligned as well, because centred text at this measure gives every
       block two ragged edges and nothing to scan down. */
    @media (max-width: 560px) {
      .sol-stages { grid-template-columns: 1fr; gap: 0; }
      .sol-stage { display: grid; grid-template-columns: 46px minmax(0,1fr);
        column-gap: 16px; align-items: start; text-align: left;
        padding-bottom: clamp(24px,6vw,32px); }
      .sol-stage:last-child { padding-bottom: 0; }
      .sol-stage .sol-ic { grid-row: 1 / span 3; grid-column: 1;
        width: 46px; height: 46px; border-radius: 14px; }
      .sol-stage .sol-ic svg { width: 21px; height: 21px; }
      .sol-st-meta, .sol-st-title, .sol-st-desc { grid-column: 2; }
      .sol-st-meta { margin-top: 3px; }
      .sol-st-title { justify-content: flex-start; min-height: 0; margin-top: 5px; }
      .sol-st-desc { margin: 7px 0 0; max-width: none; }
      /* the connector down the icon column, centred on the 46px icon */
      .sol-stage::before { content: ''; position: absolute; z-index: 0;
        left: 23px; margin-left: -1px; top: 54px; bottom: 6px; width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, rgba(93,69,178,.30), rgba(93,69,178,.10)); }
      .sol-stage:last-child::before { display: none; }
      /* stays on one line — it wrapped to four inside a 100px-radius capsule,
         which is a shape that only works for a single line. The sentence had
         to lose its long middle to do it: at 67 characters (ratio 35x the font
         size) one line needed 9.6px type. 24.5 is the shortened string's
         measured 23.75 ratio plus headroom; re-measure if it is reworded. */
      .sol-eng-loop { font-size: min(.72rem,
        calc((100vw - 2 * clamp(20px,5vw,80px)) / 24.5)); }
    }

    /* ===== bento product-window visuals (each card = a real UI fragment) ===== */
    .ui-win { background: #fff; border: 1px solid #ece7f7; border-radius: 14px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 22px 46px -34px rgba(50,38,98,.55); }
    .ui-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: linear-gradient(#fbfaff, #f3f0fb); border-bottom: 1px solid #ece7f7; }
    .ui-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ddd6ef; flex: none; }
    .ui-bar i:nth-child(1){ background: #e8adad; } .ui-bar i:nth-child(2){ background: #edd39c; } .ui-bar i:nth-child(3){ background: #a9d9b6; }
    .ui-bar span { margin-left: 7px; font-size: .68rem; font-weight: 700; color: var(--text-secondary); }
    .ui-bar em { margin-left: auto; font-style: normal; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); background: var(--purple-light); padding: 3px 8px; border-radius: 100px; }
    @keyframes caretBlink { 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }
    @keyframes pulseFade { 0%,100%{ opacity: .45; } 50%{ opacity: 1; } }
    @keyframes barGrow { 0%,100%{ transform: scaleY(.5); } 50%{ transform: scaleY(1); } }

    /* 01 — intake → generated brief */
    .viz-brief { display: flex; align-items: stretch; gap: clamp(12px,1.4vw,18px); }
    .viz-brief .ui-win { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .viz-brief .vb-flow { align-self: center; color: var(--purple); font-weight: 800; font-size: 1.15rem; flex: none; }
    .vb-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
    .vb-q { display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 600; color: var(--ink); background: #faf9ff; border: 1px solid #eee9f8; border-radius: 9px; padding: 8px 10px; }
    .vb-q .vb-check { width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font-size: .58rem; display: grid; place-items: center; flex: none; }
    .vb-q.typing { color: var(--text-muted); }
    .vb-q .vb-caret { display: inline-block; width: 2px; height: 13px; background: var(--purple); border-radius: 1px; animation: caretBlink 1s steps(1) infinite; }
    .vb-progress { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; font-size: .66rem; font-weight: 700; color: var(--text-muted); }
    .vb-progress i { width: 70px; height: 5px; border-radius: 3px; background: var(--purple-light); overflow: hidden; }
    .vb-progress i b { display: block; height: 100%; width: 80%; background: linear-gradient(90deg, var(--purple), #8a72e0); border-radius: 3px; }
    .vb-sec { display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 600; color: var(--ink); padding: 8px 4px; border-bottom: 1px solid #f2effb; }
    .vb-sec b { font-size: .66rem; font-weight: 800; color: var(--purple); font-variant-numeric: tabular-nums; }
    .vb-sec s { margin-left: auto; text-decoration: none; color: var(--green); font-weight: 800; }
    .vb-sec.muted { color: var(--text-muted); border-bottom: none; }
    .vb-sec.muted em { margin-left: auto; font-style: normal; font-size: .62rem; color: var(--purple); animation: pulseFade 1.4s ease-in-out infinite; }
    .vb-more { padding: 8px 4px 2px; font-size: .68rem; font-weight: 700; color: var(--text-muted); }

    /* 02 — competitor research dashboard */
    .bento.b2 .bento-viz { flex: 1; display: flex; margin-top: 20px; }
    .viz-research { width: 100%; display: flex; }
    .viz-research .ui-win { flex: 1; display: flex; flex-direction: column; }
    .cr-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .cr-chart { display: flex; flex-direction: column; flex: 1; justify-content: flex-end; }
    .cr-row { display: flex; align-items: center; gap: 10px; background: #faf9ff; border: 1px solid #eee9f8; border-radius: 10px; padding: 8px 10px; }
    .cr-fav { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(150deg, #9a83e6, var(--purple)); color: #fff; font-weight: 800; font-size: .72rem; display: grid; place-items: center; flex: none; }
    .cr-meta { min-width: 0; } .cr-meta b { display: block; font-size: .76rem; color: var(--ink); font-weight: 700; }
    .cr-meta small { font-size: .66rem; color: var(--text-muted); }
    .cr-badge { margin-left: auto; font-size: .58rem; font-weight: 800; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
    .cr-badge.up { color: var(--green); background: #e3f7ea; }
    .cr-chart-h { display: flex; justify-content: space-between; align-items: baseline; font-size: .64rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
    .cr-chart-h em { font-style: normal; color: var(--text-muted); font-weight: 600; }
    .cr-bars { display: flex; align-items: flex-end; gap: 7px; flex: 1; min-height: 64px; }
    .cr-bars span { flex: 1; height: var(--bh); border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--purple), #b9a8ee); transform-origin: bottom; animation: barGrow 2.8s ease-in-out infinite; }
    .cr-bars span:nth-child(2){ animation-delay:.15s } .cr-bars span:nth-child(3){ animation-delay:.3s } .cr-bars span:nth-child(4){ animation-delay:.45s } .cr-bars span:nth-child(5){ animation-delay:.6s }
    .cr-insight { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: .72rem; font-weight: 600; color: var(--ink); background: var(--purple-lighter); border: 1px dashed rgba(93,69,178,.32); border-radius: 9px; padding: 9px 11px; }
    .cr-insight b { color: var(--purple); font-weight: 800; }
    .cr-insight .cr-i-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex: none; animation: pulseFade 1.6s ease-in-out infinite; }

    /* 03 — copy editor */
    .ed-body { padding: 13px; }
    .ed-toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
    .ed-toolbar span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: #f4f1fc; border: 1px solid #eee9f8; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--text-secondary); }
    .ed-toolbar .ed-ai { color: var(--purple); background: var(--purple-light); border-color: transparent; font-size: .62rem; letter-spacing: .02em; }
    .ed-label { font-size: .56rem; font-weight: 800; letter-spacing: .14em; color: var(--purple); text-transform: uppercase; margin: 9px 0 6px; }
    .ed-line { height: 11px; border-radius: 5px; background: var(--purple-light); }
    .ed-line.lg { width: 84%; background: linear-gradient(90deg, var(--ink), #514a63); opacity: .88; }
    .ed-bullet { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
    .ed-bullet > i { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); flex: none; }
    .ed-fill { position: relative; height: 9px; border-radius: 5px; background: var(--purple-light); flex: 1; }
    .ed-fill.sm { flex: 0 1 58%; }
    .ed-caret { position: absolute; right: -4px; top: -2px; width: 2px; height: 13px; background: var(--purple); animation: caretBlink 1s steps(1) infinite; }

    /* 04 — art direction board */
    .dir-body { padding: 13px; display: flex; flex-direction: column; gap: 10px; }
    .dir-swatches { display: flex; gap: 6px; }
    .dir-swatches i { flex: 1; height: 26px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
    .dir-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .dir-shot { margin: 0; position: relative; height: 54px; border-radius: 9px; display: flex; align-items: flex-end; padding: 7px 9px; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #c6b4f0, #9a83e6); overflow: hidden; }
    .dir-shot.alt { background: linear-gradient(135deg, #ece4fb, #bcaaef); color: var(--purple-deep); }
    .dir-note { display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 600; color: var(--text-secondary); }
    .dir-note .dir-aa { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); line-height: 1; }

    @media (prefers-reduced-motion: reduce) {
      .vb-caret, .ed-caret, .cr-i-dot, .vb-sec.muted em, .cr-bars span { animation: none !important; }
    }
    .viz-approve { flex: 0 1 440px; max-width: 460px; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px; background: linear-gradient(165deg, #faf9ff, #f3f0ff); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 26px 60px -46px rgba(50,38,98,.5); }
    .viz-approve .va-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; font-size: .84rem; font-weight: 600; color: var(--ink); }
    .viz-approve .va-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
    .viz-approve .va-ok { margin-left: auto; color: var(--green); font-weight: 700; }
    .viz-approve .va-rev { margin-left: auto; color: var(--purple); font-weight: 700; }
    /* the pending item resolves on a loop: In review → ✓ Approved */
    .viz-approve .va-pending { color: var(--text-muted); animation: rowApprove 5.4s ease-in-out infinite; }
    .viz-approve .va-pending .va-dot { background: var(--text-muted); animation: dotApprove 5.4s ease-in-out infinite; }
    .viz-approve .va-state { margin-left: auto; position: relative; display: inline-block; min-width: 82px; height: 1.15em; }
    .viz-approve .va-state > span { position: absolute; right: 0; top: 0; white-space: nowrap; font-weight: 700; }
    .viz-approve .va-state .s-rev { color: var(--purple); animation: revFlip 5.4s ease-in-out infinite; }
    .viz-approve .va-state .s-ok { color: var(--green); opacity: 0; transform: scale(.8); transform-origin: right center; animation: okFlip 5.4s ease-in-out infinite; }
    @keyframes rowApprove { 0%,52%{ color: var(--text-muted); } 60%,94%{ color: var(--ink); } 100%{ color: var(--text-muted); } }
    @keyframes dotApprove { 0%,52%{ background: var(--text-muted); } 60%,94%{ background: var(--green); } 100%{ background: var(--text-muted); } }
    @keyframes revFlip { 0%,52%{ opacity: 1; } 58%,100%{ opacity: 0; } }
    @keyframes okFlip { 0%,52%{ opacity: 0; transform: scale(.8); } 60%{ opacity: 1; transform: scale(1.14); } 66%,94%{ opacity: 1; transform: scale(1); } 100%{ opacity: 0; transform: scale(.8); } }
    .viz-approve .va-bar { height: 6px; border-radius: 4px; background: var(--purple-light); overflow: hidden; margin-top: 2px; }
    .viz-approve .va-bar b { display: block; height: 100%; width: 66%; border-radius: 4px; background: linear-gradient(90deg, #16a34a, #4bd07f); animation: barApprove 5.4s ease-in-out infinite; }
    @keyframes barApprove { 0%,52%{ width: 66%; } 62%,94%{ width: 100%; } 100%{ width: 66%; } }
    @media (prefers-reduced-motion: reduce) {
      .viz-approve .va-pending, .viz-approve .va-pending .va-dot, .viz-approve .s-rev, .viz-approve .s-ok, .viz-approve .va-bar b { animation: none !important; }
      .viz-approve .va-state .s-ok { opacity: 0; }
    }

    /* ===== CLOSING CTA BAR (compact, merged into Solution) ===== */
    .cta-bar { position: relative; z-index: 1; overflow: hidden; max-width: 1000px; margin: clamp(52px,6vw,88px) auto 0; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px,3vw,40px); flex-wrap: wrap; background: linear-gradient(120deg, #6f57cc 0%, var(--purple) 55%, #443285 100%); border-radius: 22px; padding: clamp(24px,3vw,36px) clamp(28px,3.4vw,46px); box-shadow: 0 44px 90px -50px rgba(93,69,178,.72); }
    .cta-bar-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 120% at 85% -20%, rgba(255,255,255,.16), transparent 60%); }
    .cta-bar-text { position: relative; z-index: 1; }
    .cta-bar-text h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem,2.3vw,1.9rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
    .cta-bar-text p { margin-top: 7px; color: rgba(255,255,255,.82); font-size: clamp(.9rem,1.1vw,1rem); }
    .cta-bar-actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-shrink: 0; }

    /* ===== MARQUEE TICKER =====================================================
       Two counter-running rows. Speed and skew are driven by scroll velocity and
       the rows flip direction with scroll direction, so it reads as a mechanism
       the page is turning rather than a decorative loop. ======================= */
    /* A dark band, deliberately: on a page of light sections this reads as its own
       object instead of bleeding into the neighbours, and gives the scroll a beat. */
    .ticker { position: relative; overflow: hidden; isolation: isolate;
      padding: clamp(40px,4.4vw,66px) 0;
      background: #171130;
      border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
    .ticker-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(60% 130% at 50% 50%, rgba(122,99,214,.34), transparent 70%); }
    /* solid ground colour so the edge fades match the band exactly */
    .ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(56px,11vw,220px); z-index: 3; pointer-events: none; }
    .ticker::before { left: 0; background: linear-gradient(90deg, #171130 12%, rgba(23,17,48,0)); }
    .ticker::after { right: 0; background: linear-gradient(270deg, #171130 12%, rgba(23,17,48,0)); }
    .mq { position: relative; z-index: 1; display: flex; width: 100%; overflow: hidden; }
    .mq-track { display: flex; flex: none; will-change: transform; }
    .mq-set { display: flex; align-items: center; flex: none; }
    .mq-item { display: inline-flex; align-items: center; gap: .3em;
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.8rem,4.2vw,3.7rem); letter-spacing: -.038em; line-height: 1.16;
      color: #fff; white-space: nowrap; padding: 0 clamp(18px,2vw,34px); }
    /* the icon is the rhythm marker now — it replaced the repeated ✦ separator */
    .mq-ic { display: inline-flex; flex: none; color: #a992f5; }
    .mq-ic svg { width: .58em; height: .58em; display: block; }   /* em, so it tracks the type */
    @media (prefers-reduced-motion: reduce) {
      .mq-track { transform: none !important; }
      .mq { overflow-x: auto; }
    }

    /* ===== PRICING ===========================================================
       Three tiers, the middle one inverted to dark so the recommendation reads
       instantly. The billing toggle drives a real number swap, not two hidden
       price blocks. ========================================================== */
    .pricing { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,146px) clamp(20px,4vw,64px) clamp(90px,10vw,150px);
      background: linear-gradient(180deg, #f7f4ff 0%, #ede7fc 50%, #f7f4ff 100%); }
    .pr-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .pr-orb { position: absolute; top: -22%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1150px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.22), transparent 62%); filter: blur(30px); }
    .pr-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(93,69,178,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(93,69,178,.08) 1px, transparent 1px);
      background-size: 62px 62px;
      -webkit-mask-image: radial-gradient(84% 64% at 50% 38%, #000, transparent 82%);
      mask-image: radial-gradient(84% 64% at 50% 38%, #000, transparent 82%); }

    .pr-head { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto clamp(40px,5vw,64px); }

    /* billing toggle — a real sliding pill, not two buttons */
    .pr-toggle { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: clamp(24px,2.8vw,36px);
      padding: 5px; border-radius: 100px; background: rgba(255,255,255,.8);
      border: 1px solid rgba(93,69,178,.18); box-shadow: 0 14px 30px -22px rgba(50,38,98,.5); }
    /* the pill is measured to the active button, not assumed to be half the
       track — "Annual Save 20%" is far wider than "Monthly", so a 50% pill
       matched neither and the two labels overlapped */
    .pr-toggle-pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
      border-radius: 100px; background: linear-gradient(120deg, #6f57cc, var(--purple));
      will-change: transform, width; }
    .pr-t { position: relative; z-index: 1; padding: 11px 24px; border-radius: 100px; background: none;
      font-size: .88rem; font-weight: 700; color: var(--text-secondary); transition: color .35s ease; }
    .pr-t.is-on { color: #fff; }
    .pr-t em { font-style: normal; font-size: .7rem; opacity: .75; margin-left: 5px; }

    /* ---- the tiers -----------------------------------------------------------
       One continuous panel with hairline dividers, not three floating cards —
       that layout is the default every pricing page ships with. The recommended
       tier is inverted AND stands taller than the panel, so the recommendation
       is structural rather than a badge. ------------------------------------ */
    .pr-grid-cards { position: relative; z-index: 1; max-width: 1080px;
      margin: clamp(46px,5vw,72px) auto 0;
      display: grid; grid-template-columns: repeat(3, 1fr);
      background: #fff; border: 1px solid rgba(93,69,178,.16); border-radius: 22px;
      box-shadow: 0 50px 90px -54px rgba(50,38,98,.5); }

    .pr-card { position: relative; display: flex; flex-direction: column;
      padding: clamp(28px,3vw,38px) clamp(22px,2.4vw,30px) clamp(30px,3.2vw,40px);
      border-left: 1px solid rgba(93,69,178,.13); }
    .pr-card:first-child { border-left: none; }

    /* the recommended column breaks out of the panel, top and bottom */
    .pr-card.is-featured { background: linear-gradient(180deg, #241a4d, #14102a);
      border-left-color: transparent; border-radius: 22px;
      margin: clamp(-26px,-2.4vw,-18px) 0; z-index: 2;
      padding-top: clamp(50px,4.6vw,60px); padding-bottom: clamp(52px,4.8vw,62px);
      box-shadow: 0 46px 80px -40px rgba(36,26,77,.7); }
    .pr-card.is-featured + .pr-card { border-left-color: transparent; }

    .pr-badge { position: absolute; top: clamp(20px,2vw,26px); right: clamp(20px,2.2vw,26px);
      font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
      padding: 5px 10px; border-radius: 100px;
      background: var(--purple-light); color: var(--purple); }
    .pr-card.is-featured .pr-badge { background: rgba(255,255,255,.16); color: #fff; }

    .pr-name { font-family: var(--font-display); font-weight: 800; font-size: .68rem;
      letter-spacing: .19em; text-transform: uppercase; color: var(--text-muted); }
    .pr-card.is-featured .pr-name { color: rgba(255,255,255,.62); }

    /* the number carries the section */
    .pr-price { display: flex; align-items: flex-start; gap: 2px; margin: clamp(14px,1.6vw,20px) 0 0;
      color: var(--ink); font-family: var(--font-display); }
    .pr-cur { font-size: clamp(1.05rem,1.3vw,1.25rem); font-weight: 700; margin-top: .5em;
      color: var(--text-muted); }
    .pr-amt-mask { display: block; overflow: hidden; height: 1.02em;
      font-size: clamp(2.9rem,4.4vw,4.1rem); line-height: 1.02; }
    .pr-amt { display: block; font-weight: 800; letter-spacing: -.055em;
      font-variant-numeric: tabular-nums; }
    .pr-per { align-self: flex-end; margin-bottom: .55em; font-size: .8rem; font-weight: 600;
      color: var(--text-muted); }
    .pr-card.is-featured .pr-price { color: #fff; }
    .pr-card.is-featured .pr-cur, .pr-card.is-featured .pr-per { color: rgba(255,255,255,.55); }

    .pr-blurb { margin: clamp(14px,1.5vw,18px) 0 0; font-size: .88rem; line-height: 1.55;
      color: var(--text-secondary); text-wrap: pretty; }
    .pr-card.is-featured .pr-blurb { color: rgba(255,255,255,.7); }

    .pr-cta { display: inline-flex; align-items: center; justify-content: center;
      margin: clamp(20px,2.2vw,26px) 0 0; padding: 13px 18px; border-radius: 100px;
      background: var(--ink); color: #fff; font-family: var(--font-display);
      font-weight: 700; font-size: .88rem; letter-spacing: -.01em;
      transition: transform .45s var(--ease-expo), background .3s ease; }
@media (hover: hover) {
      .pr-cta:hover { transform: translateY(-3px); }
    }
    .pr-card.is-featured .pr-cta { background: #fff; color: var(--ink); }

    .pr-feats { list-style: none; margin: clamp(22px,2.4vw,28px) 0 0;
      padding: clamp(20px,2.2vw,24px) 0 0;
      border-top: 1px solid rgba(93,69,178,.14);
      display: flex; flex-direction: column; gap: 11px; }
    .pr-card.is-featured .pr-feats { border-top-color: rgba(255,255,255,.16); }
    .pr-feats li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
      font-size: .86rem; line-height: 1.45; color: var(--text-secondary); }
    .pr-card.is-featured .pr-feats li { color: rgba(255,255,255,.78); }
    /* a flat rule rather than a green tick circle in every row */
    .pr-tick { width: 13px; height: 13px; margin-top: .34em; flex: none;
      display: grid; place-items: center; color: var(--purple); }
    .pr-tick svg { width: 13px; height: 13px; display: block; }
    .pr-card.is-featured .pr-tick { color: #b9a5f7; }

    @media (max-width: 900px) {
      .pr-grid-cards { grid-template-columns: 1fr; max-width: 420px; }
      .pr-card { border-left: none; border-top: 1px solid rgba(93,69,178,.13); }
      .pr-card:first-child { border-top: none; }
      .pr-card.is-featured { margin: 0; border-radius: 0; }
    }

    .pr-foot { position: relative; z-index: 1; margin: clamp(28px,3vw,42px) auto 0; max-width: 60ch;
      text-align: center; font-size: .88rem; color: var(--text-secondary); }

    @media (max-width: 900px) { .pr-grid-cards { grid-template-columns: 1fr; max-width: 460px; } }

    /* ===== FOOTER ============================================================
       Dark close, matching the ticker and testimonials. The oversized wordmark
       bleeds off both edges and rises letter-by-letter — the page signs its own
       name on the way out. ==================================================== */
    .ft { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(74px,8vw,124px) clamp(20px,4vw,64px) clamp(24px,2.6vw,36px);
      background: #14102a; color: #fff; }
    .ft-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .ft-orb { position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
      width: min(130vw,1300px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.3), transparent 62%); filter: blur(34px); }
    .ft-grid { position: absolute; inset: 0; opacity: .45;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000, transparent 80%);
      mask-image: radial-gradient(90% 70% at 50% 30%, #000, transparent 80%); }

    .ft-top { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
      display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px,5vw,80px); align-items: start; }
    .ft-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700;
      letter-spacing: var(--tracking-label); text-transform: uppercase; color: #cbbcff;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 9px 17px; border-radius: 100px; }
    .ft-h { margin: clamp(18px,2vw,26px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.9rem,3.6vw,3.4rem); line-height: 1.04; letter-spacing: -.04em; color: #fff; }
    .ft-h .line { display: block; overflow: hidden; }
    .ft-h .line > span { display: block; }
    .ft .txt-accent { color: #b9a5f7; }
    .ft-sub { margin: clamp(14px,1.6vw,20px) 0 0; color: rgba(255,255,255,.62); font-size: clamp(.95rem,1.1vw,1.04rem); }
    .ft-actions { display: flex; align-items: center; gap: clamp(14px,2vw,26px); flex-wrap: wrap; margin-top: clamp(22px,2.6vw,32px); }
    /* same pill + circular arrow badge as .scard-cta, inverted for the dark ground */
    .ft-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.4vw,34px); }
    .ft-col h3 { margin: 0 0 16px; font-size: .68rem; font-weight: 800; letter-spacing: .18em;
      text-transform: uppercase; color: rgba(255,255,255,.4); }
    /* links roll on hover, matching the nav's existing behaviour */
    .ft-col a { display: block; font-size: .95rem; color: rgba(255,255,255,.76); }
    .ft-roll { display: block; position: relative; overflow: hidden; height: 1.9em; }
    .ft-roll > span { display: block; height: 1.9em; line-height: 1.9em;
      transition: transform .45s var(--ease-expo), color .3s ease; }
@media (hover: hover) {
      .ft-col a:hover .ft-roll > span { transform: translateY(-100%); color: #fff; }
    }

    /* the wordmark */
    /* letter-spacing must stay NORMAL here: each letter is its own overflow:hidden
       mask, so negative tracking shrinks the box below the glyph's own width and
       clips its right edge. space-between does the fitting instead. */
    .ft-word { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end;
      margin: clamp(52px,7vw,104px) auto clamp(20px,2.4vw,32px); max-width: 1280px;
      font-family: var(--font-display); font-weight: 800; letter-spacing: normal; line-height: .9;
      font-size: clamp(2.2rem,9.4vw,8.6rem); color: rgba(255,255,255,.1);
      white-space: nowrap; user-select: none; }
    /* flex-shrink:0 is the fix — as flex items the letters were being squeezed
       narrower than their own glyphs, and overflow:hidden then cropped them.
       Size is set so the natural run fits the 1280px track without shrinking. */
    .ft-l { display: inline-block; flex: 0 0 auto; overflow: hidden; letter-spacing: normal; }
    .ft-l > span { display: block; padding-bottom: .06em; will-change: transform; }
    .ft-sp { display: inline-block; flex: 0 0 auto; width: .12em; }

    .ft-base { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
      padding-top: clamp(18px,2vw,26px); border-top: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
      font-size: .82rem; color: rgba(255,255,255,.5); }
    .ft-by { color: rgba(255,255,255,.38); }
    .ft-top-btn { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700;
      color: rgba(255,255,255,.7); background: none; transition: color .3s ease; }
    .ft-top-btn span { transition: transform .45s var(--ease-expo); }
@media (hover: hover) {
      .ft-top-btn:hover { color: #fff; }
    }
@media (hover: hover) {
      .ft-top-btn:hover span { transform: translateY(-4px); }
    }

    @media (max-width: 900px) {
      .ft-top { grid-template-columns: 1fr; }
      .ft-word { justify-content: flex-start; }
    }
    @media (max-width: 560px) { .ft-cols { grid-template-columns: 1fr 1fr; } }

    /* ===== FAQ ===============================================================
       Editorial split: the heading and CTA hold the left column and stay put
       while the questions scroll past. Rows are hairline-divided, not boxed. == */
    .faq { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) clamp(20px,4vw,64px) clamp(90px,10vw,150px);
      background: linear-gradient(180deg, #efeaff 0%, #ffffff 42%, #f7f4ff 100%); }
    .faq-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .faq-grid-bg { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(93,69,178,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(93,69,178,.08) 1px, transparent 1px);
      background-size: 62px 62px;
      -webkit-mask-image: radial-gradient(80% 60% at 30% 30%, #000, transparent 78%);
      mask-image: radial-gradient(80% 60% at 30% 30%, #000, transparent 78%); }
    .faq-wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px,5vw,84px); align-items: start; }
    .faq-aside { position: sticky; top: 132px; }
    .faq-aside .sec-title { font-size: clamp(2rem,3.6vw,3.4rem); }
    .faq-aside-sub { margin: clamp(16px,1.8vw,22px) 0 0; max-width: 34ch;
      font-size: clamp(.96rem,1.1vw,1.06rem); line-height: 1.6; color: var(--text-secondary); }
    /* .faq-cta / .scard-cta survive as spacing + JS hooks; the look is .cta */
    .faq-cta { margin-top: clamp(22px,2.4vw,30px); }

    .faq-list { border-top: 1px solid rgba(93,69,178,.16); }
    .faq-item { position: relative; border-bottom: 1px solid rgba(93,69,178,.16); }
    /* the open row lifts out of the list as a tinted panel with an accent edge —
       an open row should look like a different object, not a taller list item */
    .faq-item::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 16px;
      background: linear-gradient(100deg, rgba(122,98,214,.13), rgba(122,98,214,.04));
      opacity: 0; transform: scaleX(.985); transform-origin: left center;
      transition: opacity .45s ease, transform .55s var(--ease-expo); }
    .faq-item.is-open::before { opacity: 1; transform: scaleX(1); }
    .faq-item::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
      border-radius: 3px; background: linear-gradient(180deg, #8a72e0, var(--purple));
      transform: scaleY(0); transform-origin: top center; z-index: 1;
      transition: transform .5s var(--ease-expo); }
    .faq-item.is-open::after { transform: scaleY(1); }

    .faq-q { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto;
      align-items: start; gap: clamp(14px,1.6vw,24px);
      width: 100%; text-align: left; padding: clamp(22px,2.4vw,30px) clamp(16px,1.8vw,26px); background: none; }
    .faq-n { font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .1em;
      color: rgba(93,69,178,.45); padding-top: .55em; transition: color .35s ease; }
    .faq-text { font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.12rem,1.62vw,1.55rem); line-height: 1.34; letter-spacing: -.028em; color: var(--ink);
      transition: color .35s ease, transform .5s var(--ease-expo); }
@media (hover: hover) {
      .faq-q:hover .faq-text { transform: translateX(5px); }
    }
@media (hover: hover) {
      .faq-q:hover .faq-n, .faq-item.is-open .faq-n { color: var(--purple); }
    }
    .faq-item.is-open .faq-text { color: var(--purple); }

    /* bare crossing strokes — the circled +/- is the single most generic
       element in a FAQ, so the chrome goes and the mark does the work */
    .faq-ic { position: relative; width: 22px; height: 22px; flex: none; margin-top: .5em;
      transition: transform .55s var(--ease-expo); }
    .faq-ic i { position: absolute; left: 50%; top: 50%; background: var(--purple); border-radius: 2px;
      transform: translate(-50%,-50%); }
    .faq-ic i:nth-child(1) { width: 18px; height: 2px; }
    .faq-ic i:nth-child(2) { width: 2px; height: 18px; }
    /* Open turns the cross 135° into an ×. It used to hide the upright stroke
       at the same time, which left one bar rotated 135° — a bare diagonal
       slash that reads as a rendering fault rather than as a control. Both
       strokes stay: a + that turns into an × still avoids the circled +/−
       this section was deliberately built without. */
    .faq-item.is-open .faq-ic { transform: rotate(135deg); }

    /* the collapse: inner wrapper is REQUIRED — a bare text node is an anonymous
       grid item and min-height:0 can't reach it, so the row never closes */
    .faq-a { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; opacity: 0;
      transition: grid-template-rows .5s var(--ease-expo), opacity .4s ease;
      overflow: hidden; }
    .faq-a-in { min-height: 0; overflow: hidden; }
    .faq-a-in p { margin: 0 0 clamp(22px,2.4vw,30px);
      padding-left: calc(.78rem + clamp(30px,3.4vw,50px)); padding-right: clamp(16px,1.8vw,26px);
      max-width: 66ch; font-size: clamp(.95rem,1.08vw,1.04rem); line-height: 1.68; color: var(--text-secondary); }
    .faq-item.is-open .faq-a { grid-template-rows: 1fr; opacity: 1; }

    /* live index — the signature: the big number tracks whichever row is open */


    @media (max-width: 900px) {
      .faq-wrap { grid-template-columns: 1fr; }
      .faq-aside { position: static; }
    }

    /* ===== WHO BUILT IT ======================================================
       Light, to land after the dark testimonial block. This is the credibility
       beat, so the lede carries real measure and the capabilities sit as a
       quiet four-up rather than competing with the story above them. ========= */
    .built { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,146px) clamp(20px,4vw,64px) clamp(40px,4.5vw,70px);
      background: linear-gradient(180deg, #ffffff 0%, #f6f3ff 55%, #efeaff 100%); }
    .built-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .built-orb { position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1100px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.2), transparent 62%); filter: blur(28px); }
    .built-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(93,69,178,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(93,69,178,.09) 1px, transparent 1px);
      background-size: 62px 62px;
      -webkit-mask-image: radial-gradient(88% 66% at 50% 42%, #000, transparent 82%);
      mask-image: radial-gradient(88% 66% at 50% 42%, #000, transparent 82%); }

    .built-head { position: relative; z-index: 1; text-align: center; max-width: 1080px; margin: 0 auto; }
    .built-lede { margin: clamp(22px,2.6vw,34px) auto 0; max-width: 74ch;
      font-size: clamp(1rem,1.2vw,1.14rem); line-height: 1.68; color: var(--text-secondary); }
    .built-lede strong { color: var(--ink); font-weight: 700; }
    .built-lead { position: relative; z-index: 1; margin: clamp(40px,4.6vw,66px) auto clamp(24px,2.6vw,36px);
      max-width: 66ch; text-align: center; font-weight: 700;
      font-size: clamp(.98rem,1.15vw,1.08rem); line-height: 1.6; color: var(--ink); }

    /* The research page's lead is a highlighted single-line statement, so it
       drops the 66ch measure and takes a chip. Scoped with .is-hl — the base
       .built-lead is shared with the home page, whose own lead is longer and
       is meant to wrap.
       One line is held by scaling the type to the width available: the room is
       the viewport less .built's own side padding, capped by the 1080px
       measure, divided by how wide the sentence runs per px of font-size.
       That ratio is per-sentence, and the two pages word this pill
       differently (28.5 on /research, 32.5 on /feedback), so each carries its
       own --bl-ratio inline — the same idiom as .scard's --i. A single shared
       number either overflowed the longer one or needlessly shrank the
       shorter. The headroom in each also absorbs a desktop scrollbar, since
       100vw counts it and the section's width does not. Re-measure if either
       sentence is reworded. */
    .built-lead.is-hl { display: inline-flex; align-items: center; gap: 12px;
      max-width: min(100%, 1080px); width: auto;
      padding: 14px clamp(20px,2vw,28px);
      border-radius: 100px; text-align: left;
      white-space: nowrap;
      font-size: min(clamp(.94rem,1.08vw,1.04rem),
                     calc(min(100vw - 2 * clamp(20px,4vw,64px), 1080px) / var(--bl-ratio, 32.5)));
      line-height: 1.5;
      color: var(--text-secondary); font-weight: 600;
      background: linear-gradient(120deg, rgba(93,69,178,.09), rgba(93,69,178,.045));
      border: 1px solid rgba(93,69,178,.2);
      box-shadow: 0 18px 40px -26px rgba(93,69,178,.5); }
    .built-lead.is-hl b { color: var(--purple); font-weight: 800; }
    .built-lead.is-hl .bl-pip { flex: none; width: 8px; height: 8px; border-radius: 50%;
      background: var(--purple); box-shadow: 0 0 0 4px rgba(93,69,178,.16); }
    /* the chip is inline-flex, so it needs a block parent to centre against */
    .built .stack { clear: both; }
    .built-head + .built-lead.is-hl { display: inline-flex; }
    .built:has(.built-lead.is-hl) { text-align: center; }
    .built:has(.built-lead.is-hl) .built-head,
    .built:has(.built-lead.is-hl) .stack { text-align: left; }
    .built:has(.built-lead.is-hl) .built-head { text-align: center; }

    /* ---- Sticky stacking panels ------------------------------------------
       All panels pin at the SAME top, so each one fully covers the last and the
       only thing left showing is the previous card's tab — which steps right by
       index, landing the tabs in a row like real file folders. (Stepping the
       sticky top instead leaves a sliver of every panel visible.) ------------ */
    /* Trailing travel, so the tab row still holds once the last card lands.
       It MUST be an in-flow spacer: a sticky box is constrained by its
       containing block's CONTENT box, and padding is outside it, so the
       padding-bottom that used to sit here bought nothing. Without real travel
       the fourth card could only graze the row at the instant the content
       ended — sampling the scroll range, the four tabs shared a top only after
       the whole stack had released and was scrolling away. */
    .stack { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
    .stack::after { content: ''; display: block; height: 320px; }
    /* Every card keeps the SAME margin-bottom — including the last. A sticky
       element's bottom clamp is (blockBottom − marginBottom − height), so zeroing
       the last card's margin clamps it 38px lower than the rest and it drops out
       of the tab row at the end of the stack. */
    /* 90px nav + breathing room — at 92px the tabs pinned flush under the bar */
    .scard { position: sticky; top: 128px; margin-bottom: clamp(22px,2.6vw,38px); }

    .scard-tab { display: inline-flex; align-items: baseline; gap: 9px;
      /* fallback step for no-JS; initStackTabs measures and overrides it so the
         tabs actually abut, which a fixed step cannot do at differing widths */
      margin-left: calc(var(--i) * clamp(112px, 15vw, 210px));
      padding: 11px 22px 13px; border-radius: 14px 14px 0 0;
      font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink); background: var(--scard-bg); }
    .scard-tab i { font-style: normal; color: rgba(18,18,23,.45); }
    .scard-tab i::before { content: '/\00a0'; }
    .scard-tab b { font-weight: 800; }

    .scard-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
      gap: clamp(24px,3vw,52px);
      border-radius: 0 26px 26px 26px; background: var(--scard-bg);
      padding: clamp(28px,3.4vw,54px);
      box-shadow: 0 40px 90px -60px rgba(50,38,98,.6); }

    /* our ramp: the stack deepens as you scroll it */
    .scard:nth-child(1) { --scard-bg: #f1ecff; }
    .scard:nth-child(2) { --scard-bg: #e4dbfc; }
    .scard:nth-child(3) { --scard-bg: #d5c8f9; }
    .scard:nth-child(4) { --scard-bg: #c3b1f4; }

    /* nowrap because the chip is three flex items (name, middot, layer): left
       to wrap they each broke independently and the chip became two ragged
       columns instead of one label. */
    .scard-chip { display: inline-flex; align-items: center; gap: 9px;
      padding: 10px 20px; border-radius: 100px;
      /* Filled purple, the same treatment .eph-hl.is-on and .diff-h.amz use.
         No lighter fill can work here: the palest card is already #f1ecff, so
         even pure white only reaches 1.15:1 against it — a white pill is
         invisible on card 01 however opaque it is. A fill has to contrast with
         the ramp rather than lift off it, and one purple reads identically on
         all four cards. White on the gradient is 4.6:1 at its lightest end. */
      background: linear-gradient(120deg, #7a63d6, var(--purple));
      border: 1px solid rgba(178,158,255,.55);
      box-shadow: 0 12px 26px -14px rgba(93,69,178,.75),
                  inset 0 1px 0 rgba(255,255,255,.16);
      white-space: nowrap;
      font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #fff; }
    /* Below 860px the panel is one column, so the chip has the full card width
       less .built's and the panel's own padding. The widest label measures 24x
       its font-size at the design size and 25.3x once hinting rounds it down
       at phone sizes; 26 covers that plus headroom. Only bites under ~380px. */
    @media (max-width: 860px) {
      .scard-chip { font-size: min(.7rem,
        calc((100vw - 2 * clamp(20px,4vw,64px) - 2 * clamp(28px,3.4vw,54px)) / 26)); }
    }
    .scard-chip em { font-style: normal; opacity: .55; }
    .scard-title { margin: clamp(18px,2vw,26px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(2.1rem,4.4vw,4rem); line-height: .98; letter-spacing: -.045em; color: var(--ink); }
    .scard-body { margin: clamp(14px,1.6vw,20px) 0 0; max-width: 44ch;
      font-size: clamp(.95rem,1.1vw,1.05rem); line-height: 1.62; color: rgba(18,18,23,.72); }
    .scard-cta { margin-top: clamp(22px,2.4vw,32px); }

    .scard-vis { aspect-ratio: 4 / 3; border-radius: 18px; display: grid; place-items: center;
      background: rgba(255,255,255,.55);
      border: 1px dashed rgba(18,18,23,.18); }
    .scard-vis-note { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
      color: rgba(18,18,23,.38); }

    @media (max-width: 860px) {
      .scard-panel { grid-template-columns: 1fr; }
      /* The cards pin and stack here too, but they cannot share one sticky
         offset the way the desktop tab row does. Sampling the whole scroll
         range at 375px, the four tabs never reached the same top: three sat at
         122px while the fourth was still at 258px, and then the stack ran out
         and all four unpinned together. At these card heights the aligned row
         is simply unreachable, which is why the last tab always looked
         detached and dropped onto the card behind it.
         So each card pins at its own offset instead. The offset is deliberately
         small: at a tab's height the tabs became a pile of wide slabs with a
         ragged right edge. At 10px each covered card shows only a thin lip of
         its own colour — the ramp reads as a stack of card edges — while the
         card you are on shows its whole tab, label included. 10px also stays
         inside the tab's 11px top padding, so no covered label is clipped. */
      .scard { top: calc(88px + var(--i) * 10px); }
      /* Travel for the last card to hold pinned once the staircase is
         complete. It has to be an in-flow spacer, not padding: a sticky box is
         constrained by its containing block's CONTENT box, so padding-bottom
         buys no travel at all — with it the fourth card could only graze its
         target at the exact instant the content ended, which is why it always
         read as 20-odd px short and then the whole stack let go at once.
         Not blank space: the pinned card fills the viewport while it passes. */
      .stack::after { height: 300px; }
      /* Full column width, so each tab completely covers the one behind it.
         Content-width tabs differ (206px vs 162px), so the wider first tab's
         right end — its "/ 01" — stuck out past the narrower one above it.
         display:flex also makes it block-level, which zeroes the margin-left
         the base rule's staircase step would otherwise apply (and which would
         push these off the side of the column with JS off). */
      .scard-tab { display: flex; justify-content: space-between;
        margin-left: 0; }
    }

    /* ===== VIDEO TESTIMONIALS ================================================
       Dark, because video reads better against it and it gives the page a second
       anchor after the ticker. The player is the hero; the quote sits beside it
       at pull-quote scale so the section still says something before you press
       play. ==================================================================== */
    .tst { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(80px,9vw,140px) clamp(20px,4vw,64px) clamp(84px,9vw,150px);
      background: #14102a; color: #fff; }
    .tst-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .tst-orb { position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1200px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.34), transparent 62%); filter: blur(30px); }
    .tst-grid { position: absolute; inset: 0; opacity: .5;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000, transparent 82%);
      mask-image: radial-gradient(90% 70% at 50% 40%, #000, transparent 82%); }
    .tst-head { position: relative; z-index: 1; text-align: center; max-width: 1000px; margin: 0 auto clamp(40px,5vw,70px); }
    .tst .sec-title { color: #fff; }
    .tst .txt-accent { color: #b9a5f7; }
    .tst-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700;
      letter-spacing: var(--tracking-label); text-transform: uppercase; color: #cbbcff;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 9px 17px; border-radius: 100px; }

    .tst-stage { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
      display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(30px,4vw,68px); align-items: center; }
    .tst-player { margin: 0; }
    .tst-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
      background: linear-gradient(150deg, #2b2150, #1a1436);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 60px 120px -50px rgba(0,0,0,.75); }
    .tst-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .tst-poster { position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 14px;
      background: repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0 14px, transparent 14px 28px); }
    .tst-poster-icon { width: 46px; aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center;
      background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.22); color: rgba(255,255,255,.45); }
    .tst-poster-icon svg { width: 20px; height: 20px; }
    .tst-poster-note { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
      color: rgba(255,255,255,.38); }
    /* the play button only exists once a video is wired — no ghost button over the
       label. Specificity, not order: the base .tst-play rule is declared later. */
    .tst-player:not(.has-video) .tst-play { display: none; }
    .tst-player.has-video .tst-poster { display: none; }
    .tst-player.is-playing .tst-play { opacity: 0; pointer-events: none; }
    .tst-play { transition: opacity .4s ease, transform .5s var(--ease-expo); }
@media (hover: hover) {
      .tst-play:hover { transform: translate(-50%,-50%) scale(1.06); }
    }

    .tst-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: clamp(64px,6vw,88px); aspect-ratio: 1; border-radius: 50%;
      display: grid; place-items: center; background: #fff; color: var(--purple);
      box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); }
    .tst-play svg { width: 26%; height: 26%; margin-left: 8%; }
    .tst-play-ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); }
    .tst-play[disabled] { opacity: .55; cursor: default; }
    .tst-count { position: absolute; right: 16px; bottom: 14px; font-size: .72rem; font-weight: 800;
      letter-spacing: .14em; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }

    .tst-mark { display: block; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(3.4rem,5vw,5.4rem); line-height: .7; color: rgba(185,165,247,.34);
      margin-bottom: clamp(10px,1.4vw,20px); }
    .tst-quote { margin: 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.45rem,2.5vw,2.4rem); line-height: 1.26; letter-spacing: -.032em; color: #fff; }
    .tq-line { display: block; overflow: hidden; }
    .tq-line > span { display: block; }
    .tst-by { margin-top: clamp(22px,2.4vw,32px); padding-top: clamp(18px,2vw,24px);
      border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 4px; }
    .tst-name { font-weight: 800; font-size: 1rem; color: #fff; }
    .tst-role { font-size: .86rem; color: rgba(255,255,255,.6); }

    .tst-rail { position: relative; z-index: 1; max-width: 1240px; margin: clamp(34px,4vw,58px) auto 0;
      display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px,1.2vw,18px); }
    .tst-thumb { display: flex; align-items: center; gap: 13px; text-align: left; padding: 12px 14px;
      border-radius: 15px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045);
      transition: background .35s ease, border-color .35s ease, transform .45s var(--ease-expo); }
@media (hover: hover) {
      .tst-thumb:hover { background: rgba(255,255,255,.09); transform: translateY(-3px); }
    }
    .tst-thumb.is-active { background: rgba(148,124,240,.2); border-color: rgba(185,165,247,.55); }
    .tst-thumb-vis { width: 44px; aspect-ratio: 1; border-radius: 11px; flex: none; display: grid; place-items: center;
      background: linear-gradient(150deg, #6f57cc, #3d2c78); font-family: var(--font-display); font-weight: 800;
      font-size: .82rem; color: rgba(255,255,255,.85); }
    .tst-thumb-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .tst-thumb-tx b { font-size: .88rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tst-thumb-tx small { font-size: .74rem; color: rgba(255,255,255,.55); }

    @media (max-width: 900px) {
      .tst-stage { grid-template-columns: 1fr; }
      .tst-rail { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) { .tst-rail { grid-template-columns: 1fr; } }

    /* ===== HOW IT WORKS (stepper + screenshot preview) ===== */
    .how { position: relative; overflow: clip; padding: clamp(80px,10vw,150px) var(--margin-outer); background: linear-gradient(180deg, #ffffff 0%, var(--purple-lighter) 55%, #ffffff 100%); }
    .how-head { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto clamp(48px,6vw,80px); }
    .how .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple); background: var(--purple-light); padding: 10px 18px; border-radius: 100px; }
    /* while pinned the section owns the viewport, so the preview no longer needs
       to stick — sticky inside a pinned element drifts against the pin */
    /* the preview holds its place while the step column scrolls past it.
       Each row is given its own stretch of scroll — at their natural ~135px the
       rows were shorter than the trigger zone, so two or three qualified at once
       and the panel skipped straight from step 02 to step 05. */
    /* centred with top, NOT translateY(-50%): sticky clamps to its containing
       block, but a transform applied after positioning is not clamped, so the
       device slid up out of the column and over the section heading. --dev-top
       is measured in JS so it stays centred at any viewport height. */
    .how.is-scrolldriven .how-preview { position: sticky; top: var(--dev-top, 14vh); }
    .how.is-scrolldriven .hstep { min-height: 32vh; align-items: center; }
    .how.is-scrolldriven .how-list { padding-bottom: 4vh; }

    .how-wrap { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 0.66fr 1.34fr; gap: clamp(26px,4.2vw,66px); align-items: start; }
    /* ---- the wire ----------------------------------------------------------
       The section claims "5 Connected Steps" and then showed five detached rows
       beside an unrelated window. This draws the actual connection: out of the
       open step, across the gutter, into the device's edge. ----------------- */
    .how-wire { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
      pointer-events: none; overflow: visible; opacity: 0; }
    .how-wire-track { fill: none; stroke: rgba(93,69,178,.32); stroke-width: 1.5;
      vector-effect: non-scaling-stroke; stroke-linecap: round; }
    .how-wire-flow { fill: none; stroke: var(--purple); stroke-width: 2.6; opacity: 0;
      vector-effect: non-scaling-stroke; stroke-linecap: round;
      filter: drop-shadow(0 0 4px rgba(93,69,178,.5)); }
    .how-wire-port { fill: var(--purple); opacity: 0; }
    @media (max-width: 940px) { .how-wire { display: none; } }
    @media (prefers-reduced-motion: reduce) { .how-wire-flow { display: none; } }

    .how-list { display: flex; flex-direction: column; gap: 0; }
    /* ---- the step list: type and hairlines, not five identical cards --------
       Five bordered boxes is what a component library hands you for free; it
       also gave the three "soon" rows the same visual weight as the live ones.
       Hierarchy now comes from numeral size, name size and rules. ----------- */
    .hstep { position: relative; overflow: hidden; display: flex; align-items: flex-start;
      gap: clamp(14px,1.5vw,22px); text-align: left;
      background: transparent; border: none; border-radius: 0;
      border-top: 1px solid rgba(93,69,178,.13);
      padding: clamp(17px,1.9vw,24px) clamp(16px,1.7vw,26px) clamp(17px,1.9vw,24px) clamp(15px,1.5vw,20px);
      transition: background .4s ease, padding .4s var(--ease-expo); }
    .hstep:first-of-type { border-top: none; }
    .how-list { border-bottom: 1px solid rgba(93,69,178,.13); }
@media (hover: hover) {
      .hstep:hover { background: rgba(93,69,178,.032); }
    }

    /* the accent rule is the only chrome the active row gets, and it doubles as
       the dwell timer */
    .hstep::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
      background: rgba(93,69,178,.2);
      transform: scaleY(0); transform-origin: top center;
      transition: transform .5s var(--ease-expo); }
    .hstep.is-active::before { transform: scaleY(1); }
    .hstep-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; transform-origin: top center;
      background: linear-gradient(180deg, #8a72e0, var(--purple)); transform: scaleY(0); }

    .hstep-num { font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.35rem,2.1vw,1.95rem); line-height: 1; letter-spacing: -.04em;
      color: rgba(18,18,23,.2); flex: none; min-width: 2.1ch;
      transition: color .35s ease; }
    .hstep.is-active .hstep-num { color: var(--purple); }
@media (hover: hover) {
      .hstep:not(.is-active):hover .hstep-num { color: rgba(93,69,178,.55); }
    }

    .hstep-mid { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .hstep-top { display: flex; align-items: center; gap: 12px; }
    .hstep-name { font-family: var(--font-display); font-weight: 700;
      font-size: clamp(1.05rem,1.45vw,1.28rem); letter-spacing: -.025em; color: rgba(18,18,23,.62);
      transition: font-size .4s var(--ease-expo), color .35s ease, transform .4s var(--ease-expo); }
@media (hover: hover) {
      .hstep:not(.is-active):hover .hstep-name { transform: translateX(3px); color: var(--ink); }
    }
    /* the open step is the headline of this column */
    .hstep.is-active .hstep-name { font-size: clamp(1.3rem,2vw,1.75rem); font-weight: 800;
      letter-spacing: -.038em; color: var(--ink); }

    .hstep-badge { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
      font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em;
      padding: 5px 11px; border-radius: 100px; flex: none; }
    .hstep-badge .bdot { width: 6px; height: 6px; border-radius: 50%; }
    .hstep-badge.live { color: var(--green); background: #e3f7ea; }
    .hstep-badge.live .bdot { background: var(--green); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: pulse 2.2s infinite; }
    .hstep-badge.active { color: var(--purple); background: var(--purple-light); }
    .hstep-badge.active .bdot { background: var(--purple); }
    /* unbuilt steps recede instead of competing — no pill, just quiet type */
    .hstep-badge.soon { color: rgba(18,18,23,.3); background: none; padding: 5px 0; }

    .hstep-desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease-expo), opacity .4s ease, margin .45s ease; overflow: hidden; color: var(--text-secondary); font-size: .96rem; line-height: 1.55; min-height: 0; }
    .hstep.is-active .hstep-desc { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
    .hstep-desc > * { min-height: 0; }
    .hstep .hflow { display: none; }
    .hstep.is-active .hflow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
    .hflow-item { display: inline-flex; align-items: center; gap: 8px; background: var(--purple-lighter); border: 1px solid var(--border); border-radius: 100px; padding: 8px 14px; font-size: .82rem; font-weight: 600; color: var(--ink); }
    .hflow-item b { width: 18px; height: 18px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: .62rem; }
    /* lit by the screen panel, so the two columns read as one mechanism */
    .hflow-item { transition: background .4s ease, border-color .4s ease, color .4s ease, transform .45s var(--ease-expo); }
    .hflow-item.is-live { background: #fff; border-color: rgba(93,69,178,.5); transform: translateY(-2px);
      box-shadow: 0 14px 26px -18px rgba(50,38,98,.55); }
    .hflow-item.is-live b { box-shadow: 0 0 0 4px rgba(93,69,178,.16); }
    .hflow-sep { color: var(--purple); font-weight: 700; }

    /* screenshot preview */
    .how-preview { position: sticky; top: 110px; }
    .how-preview .device { max-width: none; margin: 0; }
    .how-screen { position: relative; min-height: 340px; padding: 0; }
    .hshot { position: absolute; inset: 0; padding: 26px; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
    .hshot.is-active { position: relative; opacity: 1; visibility: visible; }
    .hshot-head { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
    .hshot-chip { font-size: .72rem; font-weight: 700; color: var(--purple); background: var(--purple-light); padding: 6px 12px; border-radius: 100px; }
    .hshot-chip.ok { color: var(--green); background: #e3f7ea; }
    .hshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .hshot-field { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
    .hshot-field.wide { grid-column: 1 / -1; }
    .hshot-field span { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
    .hshot-field b { font-size: .9rem; font-weight: 600; color: var(--ink); }
    .hshot-bars { display: flex; gap: 5px; } .hshot-bars i { flex: 1; height: 8px; border-radius: 4px; background: var(--purple-light); }
    .hshot-rows { display: flex; flex-direction: column; gap: 10px; }
    .hshot-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; font-size: .9rem; color: var(--text-secondary); }
    .hshot-row b { font-size: 1.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
    .hshot-row b.pos { color: var(--green); } .hshot-row b.op { font-size: .92rem; color: var(--purple); }
    /* ---- 01 Onboarding: real product screens, walked in order --------------
       The stage is 2.30:1, which is the captures' own median ratio, so at most
       9% of any frame is continued page rather than real pixels — a taller
       stage meant inventing up to 27%, and that band read as a glitch. The
       caption and dots moved out of the image into their own strip, which also
       stops them covering the screen they are describing. -------------------- */
    /* Panel 01 stays in flow even when hidden, so the device keeps one height
       across all five steps instead of collapsing to min-height and resizing
       every time the step list advances. Every other panel — the second shots
       panel included — overlays it; letting two into the flow stacks them and
       the device doubles in height. */
    .hshot--shots { padding: 0; }
    .hshot[data-i="0"] { position: relative; opacity: 0; visibility: hidden; }
    .hshot[data-i="0"].is-active { opacity: 1; visibility: visible; }
    .hshot:not([data-i="0"]).is-active { position: absolute; }
    .onbs { position: relative; border-radius: 0 0 16px 16px; overflow: hidden; isolation: isolate; }
    .onbs-stage { position: relative; width: 100%; aspect-ratio: 2.3 / 1;
      overflow: hidden; background: #efeafd; }
    .onbs-img { position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: top left; opacity: 0;
      transform-origin: 50% 100%; will-change: transform, opacity; }
    .onbs-img.is-on { opacity: 1; }

    /* the strip: caption left, controls right, dwell meter along its top edge */
    .onbs-foot { position: relative; display: flex; align-items: center; justify-content: space-between;
      gap: 14px; padding: 13px 16px; background: #fff;
      border-top: 1px solid rgba(93,69,178,.14); }
    .onbs-bar { position: absolute; top: -1px; left: 0; right: 0; height: 2px;
      background: rgba(93,69,178,.14); }
    .onbs-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0);
      transform-origin: left center; background: linear-gradient(90deg, #8a72e0, var(--purple)); }

    .onbs-cap { display: inline-flex; align-items: center; gap: 10px; min-width: 0;
      font-family: var(--font-display); font-weight: 700; font-size: .82rem;
      letter-spacing: -.014em; color: var(--ink); }
    /* "04 / 09", not "04" — a bare number here read as step 04 beside a step
       list numbered 01-05 */
    .onbs-n { flex: none; padding: 3px 9px; border-radius: 100px;
      background: var(--purple-light); color: var(--purple);
      font-size: .6rem; font-weight: 800; letter-spacing: .06em;
      font-variant-numeric: tabular-nums; }
    .onbs-roll { display: block; overflow: hidden; height: 1.3em; }
    .onbs-roll > span { display: block; height: 1.3em; line-height: 1.3em; white-space: nowrap; }

    .onbs-dots { display: flex; gap: 4px; flex: none; }
    .onbs-dot { position: relative; width: 12px; height: 3px; padding: 0; border: none;
      border-radius: 100px; background: rgba(93,69,178,.28);
      transition: width .45s var(--ease-expo), background .3s ease; }
    .onbs-dot::after { content: ''; position: absolute; inset: -13px -4px; }
@media (hover: hover) {
      .onbs-dot:hover { background: rgba(93,69,178,.55); }
    }
    .onbs-dot.is-on { width: 20px; background: var(--purple); }
    .onbs-dot:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
    .onbs.is-held .onbs-bar i { opacity: .35; }

    @media (max-width: 620px) {
      .onbs-cap { font-size: .72rem; }
      .onbs-dots { display: none; }
    }

    .hshot.soon { display: grid; place-items: center; }
    .hshot.soon.is-active { display: grid; }
    .hshot-ghost { position: absolute; inset: 26px; display: flex; flex-direction: column; gap: 12px; opacity: .5; }
    .hshot-ghost i { height: 12px; border-radius: 6px; background: var(--purple-light); }
    .hshot-ghost.grid4 { display: grid; grid-template-columns: 1fr 1fr; }
    .hshot-ghost.grid4 i { height: 60px; }
    /* ---- unbuilt steps ------------------------------------------------------
       A small pill read as a caption on a loading screen. These are the only
       panels a visitor can't try, so they say so plainly: the skeleton dims
       behind a scrim and the plate states what it is and that it isn't here. */
    .hshot.soon::before { content: ''; position: absolute; inset: 0; z-index: 1;
      background: rgba(249,248,255,.62); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
    .hshot.soon .hshot-ghost { opacity: .38; }
    .hshot-soon { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 9px; max-width: 30ch;
      padding: clamp(20px,2.2vw,26px) clamp(22px,2.4vw,30px) clamp(22px,2.4vw,28px);
      border-radius: 18px; background: #fff; border: 1px solid rgba(93,69,178,.16);
      box-shadow: 0 30px 60px -32px rgba(50,38,98,.55); }
    .hshot-soon-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
      background: var(--purple-light); color: var(--purple); }
    .hshot-soon-ic svg { width: 20px; height: 20px; }
    .hshot-soon-n { font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.05rem,1.4vw,1.28rem); letter-spacing: -.03em; color: var(--ink); }
    .hshot-soon-tag { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
      color: #fff; padding: 6px 13px; border-radius: 100px;
      background: linear-gradient(120deg, #6f57cc, var(--purple)); }
    .hshot-soon-p { margin: 2px 0 0; font-size: .82rem; line-height: 1.55; color: var(--text-secondary); }

    @media (max-width: 860px) {
      /* minmax(0,1fr): a 1fr track takes the step list's min-content as its
         floor, which is wider than a 320px phone */
      .how-wrap { grid-template-columns: minmax(0, 1fr); }
      .how-list, .hstep { min-width: 0; }
      .how-preview { position: static; order: -1; margin-bottom: 8px; }
      .hstep-badge { margin-left: auto; }
    }

    @media (max-width: 820px) {
      .sol-bento { grid-template-columns: 1fr; }
      .bento.b1, .bento.b2, .bento.b3, .bento.b4, .bento.b5 { grid-area: auto; }
      .bento.b5 { flex-direction: column; align-items: stretch; }
      .bento.b5 .b5-text, .bento.b5 .viz-approve { flex-basis: auto; max-width: none; }
      .cta-bar { justify-content: center; text-align: center; }
      .cta-bar-actions { width: 100%; }
      .cta-bar-actions .cta { flex: 1; justify-content: center; }
    }
    .device {
      position: relative; z-index: 2; margin: 0 auto; max-width: min(1600px, 96vw); width: 100%;
      background: #fff; border: 1px solid var(--border); border-radius: 18px;
      box-shadow: 0 70px 150px -40px rgba(50,38,98,0.55), 0 36px 80px -50px rgba(18,18,23,0.4);
      overflow: hidden; will-change: transform; transform-origin: center center;
    }
    .device-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--purple-lighter); }
    .how-preview .device-bar { padding: 9px 14px; }
    .how-preview .device-bar .url { font-size: .72rem; padding: 5px 14px; transition: opacity .3s ease; }
    .device-bar .dots { display: flex; gap: 6px; }
    .device-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
    .device-bar .dots i:nth-child(1){ background:#ff5f57; } .device-bar .dots i:nth-child(2){ background:#febc2e; } .device-bar .dots i:nth-child(3){ background:#28c840; }
    .device-bar .url { flex: 1; max-width: 360px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 0.78rem; color: var(--text-muted); padding: 6px 14px; text-align: center; }

    /* demo stepper */
    .demo-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
    .demo-steps { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 5px; box-shadow: 0 12px 34px -22px rgba(50,38,98,0.55); }
    .dstep { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); padding: 8px 15px; border-radius: 100px; transition: color .3s, background .3s; }
    .dstep .dnum { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); }
    .dstep.is-active { background: var(--purple); color: #fff; }
    .dstep.is-active .dnum { color: #d4c6fb; }
    .demo-live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
    .demo-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: pulse 2s infinite; }

    /* app shell */
    /* ============================================================
       DEMO APP MOCK — a small UI kit rather than ad-hoc boxes.
       Rebuilt against the real product: same sidebar, same table
       columns, same modal, same research tabs.
       ============================================================ */
    .app { display: grid; grid-template-columns: 228px 1fr; min-height: 620px; }

    /* ---- sidebar ---- */
    .app-side { border-right: 1px solid var(--border); padding: 14px 12px; background: #fcfbff; }
    .app-org { display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 10px 12px; border-radius: 11px; background: var(--purple-light);
      font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--ink); }
    .app-navs { position: relative; display: grid; gap: 2px; margin-top: 14px; }
    /* the active pill slides between items instead of blinking on and off */
    .app-nav-ind { position: absolute; left: 0; right: 0; top: 0; height: 0;
      border-radius: 9px; background: var(--purple-light); z-index: 0; opacity: 0; }
    .app-nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px;
      font-size: .84rem; font-weight: 500; color: var(--text-secondary);
      transition: background .35s, color .35s; }
    .app-nav > span { flex: 1; }
    .ui-ic { width: 17px; height: 17px; flex: none; opacity: .75; }
    .ui-chev { width: 13px; height: 13px; flex: none; opacity: .4; }
    .app-nav.is-active { color: var(--purple); font-weight: 700; }
    .app-nav.is-active .ui-ic { opacity: 1; }

    /* ---- top bar ---- */
    .app-main { display: flex; flex-direction: column; min-width: 0; }
    .app-top { display: flex; align-items: center; justify-content: space-between;
      padding: 12px 20px; border-bottom: 1px solid var(--border); }
    .app-crumb { display: block; overflow: hidden; height: 1.35em; }
    .app-crumb-r { display: block; height: 1.35em; line-height: 1.35em;
      font-size: .84rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
    .app-user { display: flex; align-items: center; gap: 9px; }
    .app-user .av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
      background: var(--purple); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .72rem; }
    .app-user .u { display: grid; line-height: 1.2; }
    .app-user .u b { font-size: .78rem; font-weight: 700; color: var(--ink); }
    .app-user .u small { font-size: .64rem; color: var(--text-muted); }

    .screens { position: relative; flex: 1; }
    .screen { position: absolute; inset: 0; padding: 20px; opacity: 0; visibility: hidden; }
    .screen.is-active { opacity: 1; visibility: visible; }

    /* ---- kit: heading, buttons, filters ---- */
    .ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
    .ui-head-side { display: inline-flex; align-items: center; gap: 9px; flex: none; }
    .ui-h { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em; color: var(--ink); }
    .ui-sub { font-size: .76rem; color: var(--text-muted); margin-top: 3px; }
    .ui-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
      font-size: .74rem; font-weight: 600; border-radius: 9px; padding: 8px 13px; }
    .ui-btn--primary { color: #fff; background: linear-gradient(120deg, #6f57cc, var(--purple));
      box-shadow: 0 12px 24px -14px rgba(93,69,178,.8); font-weight: 700; }
    .ui-btn--ghost { color: var(--purple); background: #fff; border: 1px solid rgba(93,69,178,.28); }
    .ui-btn--ghost.is-off { color: var(--text-muted); border-color: var(--border); background: #fbfaff; }

    .ui-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
    .ui-search { flex: 1; display: inline-flex; align-items: center; gap: 8px; min-width: 0;
      padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px;
      font-size: .76rem; color: var(--text-muted); background: #fff; }
    .ui-ic-s { width: 14px; height: 14px; flex: none; opacity: .55; }
    .ui-select { display: inline-flex; align-items: center; gap: 7px; flex: none;
      padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
      font-size: .74rem; font-weight: 600; color: var(--text-secondary); background: #fff; }

    /* ---- kit: table ---- */
    .ui-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
    .ui-tr { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center;
      padding: 11px 15px; font-size: .78rem; color: var(--text-secondary); }
    .ui-tr--head { background: #f7f5ff; font-size: .56rem; letter-spacing: .11em; font-weight: 800;
      color: var(--text-muted); padding: 10px 15px; }
    .ui-tr:not(.ui-tr--head) { border-top: 1px solid var(--border); }
    .ui-tr > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ui-b { font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.25;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-tr small { font-size: .64rem; color: var(--text-muted); }
    .ui-ok { font-style: normal; color: var(--green); font-weight: 600; }
    .ui-muted { font-style: normal; color: var(--text-muted); }
    .ui-actions { flex-direction: row !important; align-items: center; gap: 7px; }

    .ui-pill { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700;
      padding: 6px 12px; border-radius: 100px; }
    .ui-pill--ok { color: var(--green); background: #e3f7ea; }

    /* ---- kit: tabs ---- */
    .ui-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
    .ui-tab { text-align: center; padding: 10px 6px; border-radius: 10px; font-size: .74rem; font-weight: 600;
      color: var(--text-secondary); border: 1px solid var(--border); background: #fff; }
    .ui-tab.is-on { color: #fff; font-weight: 700; border-color: transparent;
      background: linear-gradient(120deg, #4a3596, var(--purple)); }

    /* ---- kit: suggestion rows with a real donut ---- */
    .ui-sec-h { font-family: var(--font-display); font-weight: 800; font-size: .88rem;
      letter-spacing: -.02em; color: var(--ink); margin-bottom: 11px; }
    .ui-sug { display: flex; align-items: flex-start; gap: 13px; padding: 13px 15px; margin-bottom: 9px;
      border: 1px solid var(--border); border-radius: 12px; background: #fbfaff; }
    .ui-sug-b b { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
    .ui-sug-b p { margin: 5px 0 0; font-size: .72rem; line-height: 1.5; color: var(--text-muted); }
    .ui-ring { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
    .ui-ring svg { width: 42px; height: 42px; transform: rotate(-90deg); }
    .ui-ring circle { fill: none; stroke-width: 3.4; }
    .ui-ring-t { stroke: var(--purple-light); }
    .ui-ring-v { stroke: var(--purple); stroke-linecap: round; }
    .ui-ring b { position: absolute; font-family: var(--font-display); font-weight: 800;
      font-size: .58rem; color: var(--purple); }

    /* ---- modal: single step, matching the real one ---- */
    .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(360px, 84%);
      background: #fff; border: 1px solid var(--border); border-radius: 16px;
      box-shadow: 0 44px 90px -34px rgba(50,38,98,.6); padding: 22px; z-index: 4; }
    .modal-x { position: absolute; top: 14px; right: 15px; width: 24px; height: 24px; border-radius: 50%;
      display: grid; place-items: center; color: var(--text-muted); background: #f4f2fb; font-size: .9rem; }
    .modal-h { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; letter-spacing: -.03em; }
    .modal-p { font-size: .74rem; color: var(--text-muted); margin: 6px 0 16px; line-height: 1.5; }
    .modal-label { font-size: .7rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 7px; }
    .modal-label i { color: #e0567a; font-style: normal; }
    .modal-input { border: 1.5px solid var(--purple); border-radius: 10px; padding: 11px 13px;
      font-size: .86rem; font-weight: 500; color: var(--ink); min-height: 42px; display: flex; align-items: center;
      box-shadow: 0 0 0 3px rgba(93,69,178,.1); }
    .modal-input .caret { width: 1.5px; height: 16px; background: var(--purple); margin-left: 1px;
      animation: caret 1s steps(2) infinite; }
    .modal-btn { width: 100%; margin-top: 16px; color: #fff; font-size: .84rem; font-weight: 700;
      padding: 12px; border-radius: 10px;
      background: linear-gradient(120deg, #4a3596, var(--purple));
      transition: transform .15s ease, filter .3s; }
    .modal-btn.press { transform: scale(.96); filter: brightness(.9); }

    /* FLOATING STAT CARDS */
    .stat-card {
      position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px;
      background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
      border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px;
      box-shadow: 0 24px 50px -26px rgba(50,38,98,0.5); will-change: transform, opacity;
    }
    .stat-card .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
    .stat-card .ic.p { background: var(--purple-light); color: var(--purple); }
    .stat-card .ic.g { background: #e3f7ea; color: var(--green); }
    .stat-card .ic.a { background: #fff0e0; color: #d98324; }
    .stat-card .lab { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
    .stat-card .big { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
    .stat-card.s1 { top: 6%; left: -2%; }
    .stat-card.s2 { top: 2%; right: 1%; }
    .stat-card.s3 { bottom: 8%; left: -3%; }
    .stat-card.s4 { bottom: 4%; right: -2%; }

    /* ============================================================
       SCROLL REVEAL
       ============================================================ */
    [data-reveal] { opacity: 0; }
    [data-reveal="up"] { transform: translateY(40px); }
    [data-reveal="scale"] { transform: scale(0.96); }

    /* Set only while lockStepList measures the step column, so transitioned
       properties report their settled size instead of their starting one. */
    .is-measuring, .is-measuring *, .is-measuring *::before, .is-measuring *::after {
      transition: none !important; animation: none !important; }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-cta .nav-signin, .nav-cta .cta { display: none; }
      .nav-toggle { display: flex; }
      .nav-cta { flex: 1; justify-content: flex-end; }
      .stat-card.s1, .stat-card.s3 { left: 2%; }
      .stat-card.s2, .stat-card.s4 { right: 2%; }
      /* .device-body / .device-side were never classes in the markup, so this
         rule did nothing and the 228px sidebar stayed on phones, squeezing the
         app pane to ~146px. Handled properly in the MOBILE MOCK block. */
    }
    @media (max-width: 600px) {
      .stat-card { padding: 9px 12px; transform: scale(0.85); }
      .stat-card.s1 { top: -3%; left: -4%; } .stat-card.s2 { top: -4%; right: -4%; }
      .stat-card.s3 { bottom: 2%; left: -4%; } .stat-card.s4 { bottom: -2%; right: -4%; }
      .dm-fields { grid-template-columns: 1fr; }
      .hero-actions .cta { flex: 1; justify-content: center; }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .grain { animation: none; }
      [data-reveal] { opacity: 1 !important; transform: none !important; }
      .hero-line .word { opacity: 1 !important; clip-path: none !important; }
    }

    /* ===== THE DIFFERENCE (comparison) ===== */
    .diff { position: relative; overflow: clip; padding: clamp(84px,10vw,150px) var(--margin-outer); background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%); }
    .diff-head { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto clamp(44px,6vw,80px); }
    .diff .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple); background: var(--purple-light); padding: 10px 18px; border-radius: 100px; }
    .diff-wrap { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; }
    .diff-grid { position: relative; display: grid; grid-template-columns: minmax(150px,0.85fr) 1.15fr 1.15fr; align-items: stretch; }
    /* The winning column's edge, drawn top-down as the rows land. Absolutely
       positioned and measured in JS rather than placed as a grid item: with no
       explicit rows, grid-row: 1 / -1 resolves against the explicit grid and
       would collapse to a single row. */
    .diff-spine { position: absolute; z-index: 2; width: 2px; border-radius: 2px;
      background: linear-gradient(180deg, rgba(93,69,178,.9), rgba(93,69,178,.22));
      transform: scaleY(0); transform-origin: top center;
      pointer-events: none; }
    /* the row under the reading line, or under the pointer */
    .diff-aspect.diff-row-hl { font-weight: 800; }
    .diff-h { padding: 26px 22px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
    .diff-h.amz { background: linear-gradient(180deg, #6d59c6, var(--purple)); border-radius: 20px 20px 0 0;
      border: 1px solid rgba(93,69,178,.5); border-bottom: none;
      box-shadow: 0 -18px 50px -30px rgba(93,69,178,.5); }
    .diff-h-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.12rem,1.6vw,1.45rem); letter-spacing: -.02em; line-height: 1.15; }
    .diff-h.amz .diff-h-name { color: #fff; }
    .diff-h.other .diff-h-name { color: var(--text-secondary); }
    /* row label */
    .diff-aspect { display: flex; align-items: flex-start; padding: 24px 20px 24px 4px; font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var(--ink); border-top: 1px solid var(--border); }
    /* left-aligned and top-aligned: the copy is now 2–3 lines, not a chip */
    .diff-cell { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px;
      text-align: left; padding: 24px 22px; font-size: 1.02rem; line-height: 1.55; border-top: 1px solid var(--border); }
    .diff-cell.amz { background: rgba(122,98,214,.055); border-top-color: rgba(93,69,178,.13);
      border-left: 1px solid rgba(93,69,178,.16); border-right: 1px solid rgba(93,69,178,.16);
      color: var(--ink); font-weight: 600; }
    .diff-cell.amz.diff-last { border-radius: 0 0 20px 20px; border-bottom: 1px solid rgba(93,69,178,.16);
      box-shadow: 0 46px 80px -54px rgba(93,69,178,.75); }
    .diff-cell.other { color: var(--text-secondary); font-weight: 400; }
    /* whole row lights up together, so the eye reads across the comparison */
    .diff-row-hl { background: rgba(122,98,214,.12) !important; }
    .diff-aspect.diff-row-hl { background: transparent !important; color: var(--purple); }
    .diff-cell.other.diff-row-hl { background: rgba(93,69,178,.04) !important; color: var(--text-secondary); }
    .diff-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
    .diff-ic svg { width: 15px; height: 15px; display: block; }
    /* solid fill, not a tint — the tick is the point of the winning column */
    .diff-ic.yes { background: #12833f; color: #fff; box-shadow: 0 0 0 4px rgba(18,131,63,.15); }
    .diff-ic.no { background: #eae7f2; color: #5f5c72; }   /* stays quiet by contrast */
    /* Phones scroll it sideways rather than flattening it. Stacked, each row
       became an AMZ block and a generic line one under the other, which is a
       list of claims, not a comparison — and it needed the column name
       repeated on all ten cells to stay legible. Kept as a table you swipe,
       the two answers sit side by side where the eye can weigh them, the real
       headers do the labelling once, and the row-label column stays pinned at
       the left edge so you always know which row you are reading. */
    @media (max-width: 720px) {
      .diff-wrap { overflow-x: auto; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch; }
      /* 100 + 2 x 205. The width is bounded, not chosen for comfort: with a
         pinned label column of L, the answers only ever have (viewport - L) to
         play in, so any column wider than that slides under the pinned column
         at full scroll — at 262px the second header arrived reading "eric AI
         tools". 205 keeps each answer clear of it and still leaves ~30px of
         the next column showing at rest, which is what says it scrolls. */
      .diff-grid { min-width: 510px;
        grid-template-columns: 100px minmax(0,1fr) minmax(0,1fr); }

      .diff-corner, .diff-aspect { position: sticky; left: 0; z-index: 2;
        background: #fbf9ff; }
      .diff-aspect { padding: 18px 10px 18px 2px; font-size: .74rem;
        line-height: 1.35; color: var(--purple);
        text-transform: uppercase; letter-spacing: .08em;
        box-shadow: 8px 0 12px -8px rgba(50,38,98,.16); }

      .diff-h { padding: 14px 13px; }
      .diff-h.amz { box-shadow: none; }
      .diff-h-name { font-size: .76rem; }

      .diff-cell { padding: 15px 13px; font-size: .88rem; gap: 9px; }
      /* the name is on the header now, not on every cell */
      .diff-cell::before { display: none; }
      .diff-cell.amz.diff-last { box-shadow: none; }
      .diff-ic { width: 22px; height: 22px; }
      .diff-ic svg { width: 13px; height: 13px; }
    }

    /* ===== COMING SOON PAGE (/copy, /visual) ==================================
       One centred column on the same light-purple ground the pricing and
       onboarding sections use, so a layer that has not shipped still looks like
       part of the product rather than a placeholder. Everything here reuses
       existing tokens; the only new pieces are the layout and the status tag.
       Named .cs, not .soon: the home page's unbuilt workflow panels are
       class="hshot soon", so a bare .soon rule landed on them too — same
       specificity, declared later, so it won — and gave each a min-height of
       78vh plus 140px of padding. That put two 741px panels into a flow meant
       to hold one, and the device grew from 408px to 1890px. */
    .cs { position: relative; overflow: clip; isolation: isolate;
      min-height: 78vh; display: grid; place-items: center;
      padding: clamp(140px,15vw,210px) clamp(20px,4vw,64px) clamp(96px,10vw,150px);
      background: linear-gradient(180deg, #f7f4ff 0%, #ece6fc 54%, #f7f4ff 100%); }
    .cs-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .cs-orb { position: absolute; top: -24%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1100px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.20), transparent 62%);
      filter: blur(26px); }
    .cs-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(93,69,178,.07) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(93,69,178,.07) 1px, transparent 1px);
      background-size: 78px 78px;
      mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 72%);
      -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 72%); }

    .cs-inner { position: relative; z-index: 1; text-align: center;
      max-width: 720px; margin: 0 auto; }
    .cs-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
      font-size: clamp(2.6rem,7vw,5rem); color: var(--ink); }
    .cs-h .line { display: block; overflow: hidden; padding-bottom: .06em; }
    .cs-h .line > span { display: block; }

    .cs-tag { display: inline-flex; align-items: center; gap: 9px;
      margin-top: clamp(18px,2vw,24px);
      padding: 9px 17px; border-radius: 100px; white-space: nowrap;
      font-size: .68rem; font-weight: 800; letter-spacing: .15em;
      text-transform: uppercase; color: #fff;
      background: linear-gradient(120deg, #7a63d6, var(--purple));
      border: 1px solid rgba(178,158,255,.55);
      box-shadow: 0 16px 34px -16px rgba(93,69,178,.8); }
    .cs-pip { width: 7px; height: 7px; border-radius: 50%; background: #fff;
      box-shadow: 0 0 0 3px rgba(255,255,255,.28); }

    .cs-lede { margin: clamp(20px,2.2vw,28px) auto 0; max-width: 54ch;
      font-size: clamp(1rem,1.2vw,1.12rem); line-height: 1.66; color: var(--text-secondary); }
    .cs-note { margin: clamp(12px,1.4vw,16px) auto 0; max-width: 46ch;
      font-size: .82rem; font-weight: 600; color: rgba(18,18,23,.5); }
    .cs-actions { margin-top: clamp(28px,3vw,40px);
      display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

    /* ===== ONBOARDING PAGE — HERO ============================================
       Reuses the site tokens, nav, cursor and footer. The four proof cards use
       the same divided-plate + fill-on-hover mechanic as the capabilities row on
       the home page, so the two pages read as one product. ==================== */
    .onb-hero { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(120px,12vw,190px) clamp(20px,4vw,64px) clamp(84px,9vw,140px);
      background: linear-gradient(180deg, #f7f4ff 0%, #ece6fc 52%, #f7f4ff 100%); }
    .onb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .onb-orb { position: absolute; top: -26%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1200px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.26), transparent 62%); filter: blur(32px); }

    .onb-head { position: relative; z-index: 1; text-align: center; max-width: 1000px; margin: 0 auto; }
    .onb-title { margin: clamp(18px,2vw,26px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(2.1rem,4.6vw,4.2rem); line-height: 1.02; letter-spacing: -.045em; color: var(--ink); }
    .onb-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
    .onb-title .line > span { display: block; }
    .onb-kicker { margin: clamp(16px,1.8vw,22px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.02rem,1.35vw,1.28rem); letter-spacing: -.02em; color: var(--purple); }
    .onb-lede { margin: clamp(14px,1.6vw,20px) auto 0; max-width: 72ch;
      font-size: clamp(1rem,1.18vw,1.12rem); line-height: 1.66; color: var(--text-secondary); }
    .onb-lede strong { color: var(--ink); font-weight: 700; }

    /* four proof cards — one plate, hairline dividers, fill from the bottom */
    .onb-cards { position: relative; z-index: 1; max-width: 1140px;
      margin: clamp(44px,5vw,72px) auto 0;
      display: grid; grid-template-columns: repeat(4, 1fr);
      border: 1px solid rgba(93,69,178,.16); border-radius: 20px; overflow: hidden;
      background: rgba(255,255,255,.78); backdrop-filter: blur(4px);
      box-shadow: 0 36px 74px -52px rgba(50,38,98,.55); }
    .onb-card { position: relative; overflow: hidden; isolation: isolate; text-align: left;
      display: flex; flex-direction: column; gap: 12px;
      padding: clamp(24px,2.5vw,32px) clamp(18px,1.9vw,26px) clamp(30px,3vw,38px);
      border-left: 1px solid rgba(93,69,178,.13); }
    .onb-card:first-child { border-left: none; }
    .onb-card::before { content: ''; position: absolute; inset: 0; z-index: 0;
      background: linear-gradient(180deg, #7259cf, var(--purple));
      transform: scaleY(0); transform-origin: bottom center;
      transition: transform .62s var(--ease-expo); }
@media (hover: hover) {
      .onb-card:hover::before { transform: scaleY(1); }
    }
    .onb-card > * { position: relative; z-index: 1; }
    .onb-card h3 { margin: 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1rem,1.16vw,1.12rem); line-height: 1.3; letter-spacing: -.022em; color: var(--ink);
      min-height: 2.6em; transition: color .4s ease; }
    .onb-card p { margin: 0; font-size: .92rem; line-height: 1.58; color: var(--text-secondary);
      transition: color .4s ease; }
@media (hover: hover) {
      .onb-card:hover h3 { color: #fff; }
    }
@media (hover: hover) {
      .onb-card:hover p { color: rgba(255,255,255,.82); }
    }
    .onb-card-n { position: absolute; right: clamp(16px,1.7vw,22px); bottom: clamp(13px,1.4vw,17px);
      font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .12em;
      color: rgba(93,69,178,.38); transition: color .4s ease; }
@media (hover: hover) {
      .onb-card:hover .onb-card-n { color: rgba(255,255,255,.7); }
    }

    .onb-cta-row { position: relative; z-index: 1; display: flex; justify-content: center;
      margin-top: clamp(34px,4vw,54px); }

    @media (max-width: 900px) {
      .onb-cards { grid-template-columns: repeat(2, 1fr); }
      .onb-card:nth-child(odd) { border-left: none; }
      .onb-card:nth-child(n+3) { border-top: 1px solid rgba(93,69,178,.13); }
    }
    @media (max-width: 560px) {
      .onb-cards { grid-template-columns: 1fr; }
      .onb-card { border-left: none; border-top: 1px solid rgba(93,69,178,.13); }
      .onb-card:first-child { border-top: none; }
      .onb-card h3 { min-height: 0; }
    }

    /* ---- Onboarding proof cards: a bespoke micro-visual per card -----------
       Text-only cards read flat however the container is styled. Each card now
       shows the thing it claims. All CSS/DOM — no image assets. ------------- */
    .onb-card { padding-top: clamp(20px,2.1vw,26px); }
    .onb-vis { position: relative; display: block; height: 108px; margin-bottom: 4px;
      border-radius: 13px; background: linear-gradient(160deg, #fbfaff, #f2eeff);
      border: 1px solid rgba(93,69,178,.12); overflow: hidden;
      transition: background .45s ease, border-color .45s ease; }
@media (hover: hover) {
      .onb-card:hover .onb-vis { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
    }
    .onb-vis i, .onb-vis b, .onb-vis em, .onb-vis s { font-style: normal; text-decoration: none; }
    .onb-vis b, .onb-vis s { font-size: .5rem; font-weight: 800; letter-spacing: .04em; }

    /* 01 — one source fanning into four deliverables */
    .ov1 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 12px 12px; }
    .ov1-src { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
      background: linear-gradient(150deg, #8a72e0, var(--purple)); color: #fff;
      font-size: .5rem; font-weight: 800; letter-spacing: .06em; flex: none; }
    .ov1-rail { height: 1px; background: linear-gradient(90deg, rgba(93,69,178,.5), rgba(93,69,178,.16)); }
    .ov1-out { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .ov1-out b { padding: 3px 7px; border-radius: 100px; background: #fff; color: var(--purple);
      border: 1px solid rgba(93,69,178,.2); text-align: center; }
@media (hover: hover) {
      .onb-card:hover .ov1-out b { background: rgba(255,255,255,.9); }
    }

    /* 02 — their brand in the chrome, nothing else */
    .ov2 { padding: 10px; display: grid; gap: 6px; align-content: start; }
    .ov2-chrome { display: flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 7px;
      background: #fff; border: 1px solid rgba(93,69,178,.14); }
    .ov2-chrome em { width: 5px; height: 5px; border-radius: 50%; background: #d9d4ea; }
    .ov2-chrome s { margin-left: 6px; color: var(--text-muted); }
    .ov2-logo { display: grid; place-items: center; height: 27px; border-radius: 7px;
      background: linear-gradient(120deg, #6f57cc, var(--purple)); color: #fff;
      font-size: .5rem; font-weight: 800; letter-spacing: .14em; }
    .ov2-strip { height: 6px; border-radius: 3px; background: rgba(93,69,178,.16); }
    .ov2-strip.short { width: 58%; }
@media (hover: hover) {
      .onb-card:hover .ov2-strip { background: rgba(255,255,255,.34); }
    }

    /* 03 — the time claim, drawn */
    .ov3 { display: grid; align-content: center; gap: 12px; padding: 0 13px; }
    .ov3-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
    .ov3-row .l { font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
    .ov3-row .bar { height: 8px; border-radius: 4px; }
    .ov3-row .bar.long { background: repeating-linear-gradient(90deg, rgba(93,69,178,.26) 0 7px, transparent 7px 12px); }
    .ov3-row .bar.short { width: 26%; background: linear-gradient(90deg, #8a72e0, var(--purple)); }
    .ov3-row .t { font-size: .56rem; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .ov3-row.now .t { color: var(--purple); }
@media (hover: hover) {
      .onb-card:hover .ov3-row .l, .onb-card:hover .ov3-row .t { color: rgba(255,255,255,.72); }
    }
@media (hover: hover) {
      .onb-card:hover .ov3-row.now .t { color: #fff; }
    }
@media (hover: hover) {
      .onb-card:hover .ov3-row .bar.short { background: #fff; }
    }

    /* 04 — three links in, a finished brief out */
    .ov4 { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 12px; }
    .ov4-in { display: grid; gap: 4px; }
    .ov4-in b { padding: 3px 7px; border-radius: 5px; background: #fff; color: var(--text-secondary);
      border: 1px dashed rgba(93,69,178,.28); }
    .ov4-arrow { color: var(--purple); font-size: .8rem; font-weight: 800; }
    .ov4-doc { display: grid; align-content: center; gap: 4px; width: 46px; height: 58px; padding: 7px 6px;
      border-radius: 7px; background: linear-gradient(160deg, #8a72e0, var(--purple)); }
    .ov4-doc em { height: 3px; border-radius: 2px; background: rgba(255,255,255,.75); }
    .ov4-doc em:nth-child(3) { width: 68%; }
@media (hover: hover) {
      .onb-card:hover .ov4-in b { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.5); }
    }
@media (hover: hover) {
      .onb-card:hover .ov4-arrow { color: #fff; }
    }
@media (hover: hover) {
      .onb-card:hover .ov4-doc { background: #fff; }
    }
@media (hover: hover) {
      .onb-card:hover .ov4-doc em { background: var(--purple); }
    }

    /* ===== ONBOARDING — THE REAL COST ========================================
       The pain beat, so it borrows the home page's rule: purple carries the
       product, coral is reserved for what it costs you. Closing couplet mirrors
       the home page bridge — a concession, then the turn. ==================== */
    .cost { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) clamp(20px,4vw,64px) clamp(90px,10vw,150px);
      background: linear-gradient(180deg, #f7f4ff 0%, #efe9fc 46%, #f7f4ff 100%); }
    .cost-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .cost-orb { position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
      width: min(110vw,1000px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(239,68,68,.13), transparent 62%); filter: blur(34px); }
    .cost-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(93,69,178,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(93,69,178,.08) 1px, transparent 1px);
      background-size: 62px 62px;
      -webkit-mask-image: radial-gradient(82% 62% at 50% 40%, #000, transparent 82%);
      mask-image: radial-gradient(82% 62% at 50% 40%, #000, transparent 82%); }

    .cost-head { position: relative; z-index: 1; text-align: center; max-width: 1040px; margin: 0 auto clamp(40px,5vw,66px); }
    .cost-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700;
      letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--coral);
      background: #fdeaea; padding: 10px 18px; border-radius: 100px; }

    /* ---- Intake failures, each one shown -----------------------------------
       Every row pairs the claim with a small built mock of the thing going
       wrong. Alternating sides so the page reads as a sequence, not a table.
       All CSS/DOM — no image assets. --------------------------------------- */
    .im-list { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto;
      display: flex; flex-direction: column; gap: clamp(16px,2vw,30px); }
    .im-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
      gap: clamp(22px,3.2vw,58px);
      padding: clamp(24px,2.8vw,38px);
      border-radius: 20px; background: rgba(255,255,255,.62);
      border: 1px solid rgba(93,69,178,.13);
      box-shadow: 0 30px 64px -50px rgba(50,38,98,.45);
      transition: border-color .4s ease, box-shadow .45s ease; }
@media (hover: hover) {
      .im-row:hover { border-color: rgba(239,68,68,.26); box-shadow: 0 40px 76px -46px rgba(50,38,98,.5); }
    }
    /* alternate which side the mock sits on */
    .im-row:nth-child(even) .im-txt { order: 2; }
    .im-row:nth-child(even) .im-vis { order: 1; }

    .im-idx { display: block; font-family: var(--font-display); font-weight: 800;
      font-size: .74rem; letter-spacing: .2em; color: var(--coral); margin-bottom: 12px; }
    .im-txt h3 { margin: 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.22rem,1.85vw,1.7rem); line-height: 1.18; letter-spacing: -.032em; color: var(--ink); }
    .im-txt p { margin: 12px 0 0; max-width: 46ch; font-size: clamp(.93rem,1.06vw,1rem);
      line-height: 1.62; color: #55555f; }

    /* ---- shared mock chrome ---- */
    .im-vis { min-width: 0; }
    .im { display: grid; gap: 7px; padding: 14px; border-radius: 14px;
      background: #fff; border: 1px solid var(--border);
      box-shadow: 0 18px 38px -26px rgba(50,38,98,.5); font-size: .72rem; }
    .im b, .im s, .im em, .im i, .im span { font-style: normal; text-decoration: none; }
    .im-foot { display: flex; align-items: center; gap: 7px; margin-top: 3px; padding-top: 9px;
      border-top: 1px dashed rgba(93,69,178,.22);
      font-size: .66rem; font-weight: 600; color: var(--text-muted); }
    .im-foot b { color: var(--coral); font-weight: 800; }
    .im-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none;
      box-shadow: 0 0 0 0 rgba(239,68,68,.5); animation: pulse 2.4s infinite; }

    /* 01 — the thread that never lands */
    .im-bar { display: flex; align-items: center; gap: 5px; padding-bottom: 9px;
      border-bottom: 1px solid var(--border); font-size: .62rem; font-weight: 700; color: var(--text-muted); }
    .im-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9d4ea; }
    .im-bar b { margin-left: 5px; font-weight: 700; }
    .im-msg { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
    .im-msg em { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
      background: var(--purple-light); color: var(--purple); font-size: .55rem; font-weight: 800; flex: none; }
    .im-msg span { color: var(--text-secondary); }
    .im-msg s { font-size: .6rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

    /* 02 — versions colliding */
    .im-ver { position: relative; }
    .im-ver-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 7px 9px; border-radius: 8px; background: var(--purple-lighter);
      border: 1px solid var(--border); }
    .im-ver-row b { font-weight: 700; color: var(--ink); font-size: .68rem; }
    .im-ver-row s { font-size: .6rem; color: var(--text-muted); }
    .im-ver-row s.warn { color: var(--coral); font-weight: 800; }
    .im-ver-row.is-hit { border-color: rgba(239,68,68,.45); background: #fdeaea; }
    .im-strike { position: absolute; left: 14px; right: 14px; top: 34%; height: 1px;
      background: repeating-linear-gradient(90deg, rgba(239,68,68,.55) 0 6px, transparent 6px 11px); }

    /* 03 — four PMs, four intakes */
    .im-pm-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
    .im-pm-row em { width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
      background: var(--purple); color: #fff; font-size: .55rem; font-weight: 800; flex: none; }
    .im-pm-row .bar { height: 7px; border-radius: 4px; background: rgba(93,69,178,.2); }
    .im-pm-row .bar.w1 { width: 18%; } .im-pm-row .bar.w2 { width: 38%; }
    .im-pm-row .bar.w4 { width: 82%; } .im-pm-row .bar.w5 { width: 58%; background: rgba(239,68,68,.28); }
    .im-pm-row s { font-size: .6rem; color: var(--text-muted); white-space: nowrap; }

    /* 04 — the dig for context */
    .im-file { padding: 7px 10px; border-radius: 7px; background: var(--purple-lighter);
      border: 1px dashed rgba(93,69,178,.3); color: var(--text-secondary); font-size: .68rem; }
    .im-file.muted { border-color: rgba(239,68,68,.4); color: var(--coral); font-weight: 700; }

    @media (max-width: 860px) {
      .im-row { grid-template-columns: 1fr; gap: 22px; }
      .im-row:nth-child(even) .im-txt { order: 1; }
      .im-row:nth-child(even) .im-vis { order: 2; }
      .im-txt p { max-width: none; }
    }

    /* the turn */
    .cost-close { position: relative; z-index: 1; text-align: center; margin: clamp(44px,5vw,72px) auto 0; max-width: 1000px; }
    .cost-rule { display: block; width: 1px; height: clamp(30px,3.2vw,46px); margin: 0 auto clamp(18px,2vw,26px); overflow: hidden; }
    .cost-rule i { display: block; width: 100%; height: 100%; transform-origin: top center;
      background: linear-gradient(180deg, rgba(239,68,68,0), rgba(239,68,68,.5)); }
    .cost-couplet { margin: 0; font-family: var(--font-display); letter-spacing: -.032em; line-height: 1.28; }
    .cost-couplet .cl { display: block; overflow: hidden; }
    .cost-couplet .cl > span { display: block; }
    .cost-couplet .cl:not(.turn) > span { font-size: clamp(1.1rem,1.85vw,1.6rem); font-weight: 600; color: var(--text-secondary); }
    .cost-couplet .turn > span { font-size: clamp(1.5rem,3vw,2.7rem); font-weight: 800; color: var(--ink); margin-top: .2em; }
    .cost-hl { background-color: transparent; color: var(--ink);
      background-image: linear-gradient(90deg, rgba(239,68,68,.3), rgba(239,68,68,.13));
      background-repeat: no-repeat; background-position: 0 84%; background-size: 0% .34em;
      padding: 0 .07em; border-radius: 2px;
      -webkit-box-decoration-break: clone; box-decoration-break: clone; }

    .c2card h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800;
      letter-spacing: -.022em; line-height: 1.22; font-size: clamp(1rem,1.15vw,1.12rem);
      color: #fff; }
    .c2card p { margin: 0; font-size: clamp(.84rem,.92vw,.9rem); line-height: 1.62;
      color: rgba(255,255,255,.66); }

    /* the turn */
    .cost2-close { position: relative; z-index: 1; text-align: center;
      margin: clamp(40px,4.2vw,62px) auto 0; max-width: 940px; }
    .cost2-couplet { margin: 0; font-family: var(--font-display); letter-spacing: -.032em;
      line-height: 1.24; }
    .cost2-couplet .cl { display: block; overflow: hidden; }
    .cost2-couplet .cl > span { display: block; text-wrap: balance;
      font-size: clamp(1.34rem,2.6vw,2.3rem); font-weight: 800; color: #fff; }
    /* same fill mechanic as the sells/sits pair — a real element wiping from
       the left, so descenders stay clean at display sizes */
    .cost2-couplet .c2-hl { position: relative; display: inline-block; padding: 0 .16em; }
    .cost2-couplet .c2-hl > i { position: absolute; inset: -.04em 0 -.02em; border-radius: 8px;
      transform: scaleX(0); transform-origin: left center;
      background: linear-gradient(115deg, #f2564f, var(--coral)); }
    .cost2-couplet .c2-hl > em { position: relative; font-style: normal; color: #ff8f8f; }
    .cost2-sub { margin: clamp(20px,2.2vw,28px) auto 0; max-width: 74ch;
      font-size: clamp(.92rem,1.02vw,1.02rem); line-height: 1.66;
      color: rgba(255,255,255,.62); }


    @media (min-width: 560px) { .cost-couplet .turn > span { white-space: nowrap; } }

    @media (max-width: 780px) { .cost-grid-cards { grid-template-columns: 1fr; } }

    /* leading "No." / "Yes." carries the verdict — emphasise it */
    .faq-a-in p strong { color: var(--ink); font-weight: 800; }

    /* typing bubble that never resolves — the point of mock 01 */
    .im-typing { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
    .im-typing em { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
      background: var(--purple-light); color: var(--purple); font-size: .55rem; font-weight: 800; }
    .im-typing > span { display: inline-flex; align-items: center; gap: 4px; width: max-content;
      padding: 7px 11px; border-radius: 100px; background: var(--purple-lighter); border: 1px solid var(--border); }
    .im-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); }

    /* ===== ONBOARDING — WHY THE BRIEF DECIDES IT =============================
       A breath after the cost section: statement only, no cards. The five things
       a brief shapes are already a list in the sentence, so they light in
       sequence — the copy does the visual work. ============================== */
    .brief { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(96px,11vw,176px) clamp(20px,4vw,64px);
      background: linear-gradient(180deg, #f7f4ff 0%, #ffffff 50%, #f4f0ff 100%); }
    .brief-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .brief-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: min(120vw,1100px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.16), transparent 64%); filter: blur(30px); }
    .brief-inner { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; text-align: center; }
    .brief-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700;
      letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple);
      background: var(--purple-light); padding: 10px 18px; border-radius: 100px; }

    .brief-h { margin: clamp(22px,2.6vw,34px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.95rem,4vw,3.5rem); line-height: 1.06; letter-spacing: -.042em; color: var(--ink);
      text-wrap: balance; }
    .brief-h .line { display: block; overflow: hidden; padding-bottom: .06em; }
    .brief-h .line > span { display: block; }

    .brief-lede { margin: clamp(22px,2.6vw,34px) auto 0; max-width: 66ch;
      font-size: clamp(1.02rem,1.3vw,1.24rem); line-height: 1.68; color: var(--text-secondary); text-wrap: pretty; }
    /* each term is marked, then lit in turn */
    /* a real marker band: ~72% of the line height sitting behind the word.
       At .32em it was 25% of the line and read as a thin grey underline. */
    .bt { font-style: normal; font-weight: 700; color: var(--ink);
      background-image: linear-gradient(90deg, rgba(122,99,214,.26), rgba(122,99,214,.16));
      background-repeat: no-repeat; background-position: 0 62%; background-size: 0% .74em;
      padding: .04em .02em; border-radius: 2px;
      -webkit-box-decoration-break: clone; box-decoration-break: clone; }

    /* 46ch was breaking "creatives." onto its own line and stranding "the" at
       the end of line 1 — wider measure plus balanced wrapping fixes both */
    .brief-thesis { margin: clamp(34px,4vw,58px) auto 0; max-width: 68ch;   /* 2 lines, not 3 */
      font-family: var(--font-display); letter-spacing: -.03em; line-height: 1.26; }
    .brief-thesis .bl { display: block; overflow: hidden; }
    .brief-thesis .bl > span { display: block; text-wrap: balance; }
    .brief-thesis .bl:not(.turn) > span { font-size: clamp(1.02rem,1.36vw,1.24rem); font-weight: 600;
      color: var(--text-secondary); }   /* was --text-muted at ~2.9:1 */
    .brief-thesis .turn > span { margin-top: .38em; font-size: clamp(1.34rem,2.5vw,2.25rem);
      font-weight: 800; color: var(--ink); }

    /* ============================================================
       BRIEF — the document treatment (/onboarding only)
       Earlier passes stated the claim in text and then in a list of five
       nouns, and both read as filler because neither showed anything. This
       one leads with the artefact: the brief itself fills in section by
       section, then branches to the five things it decides. The five section
       names are the product's own, and the trunk leaves the sheet as a whole
       — pairing each section with one outcome would assert a correspondence
       the product never claims.
       Scoped to .brief--doc so /feedback's centred version is untouched.
       ============================================================ */
    .brief--doc .brief-inner { max-width: 760px; }
    .brief--doc .brief-lede { max-width: 46ch; }

    /* Centred as one object: the two halves size to their content and the
       pair is centred in the section, rather than each half filling a
       fractional track and drifting to opposite edges. */
    .bdoc { position: relative; z-index: 1;
      max-width: 1060px; margin: clamp(40px,5vw,72px) auto 0;
      display: grid; grid-template-columns: auto auto;
      gap: clamp(76px, 11vw, 170px);
      justify-content: center; align-items: center; }
    .bdoc-sheet { width: clamp(280px, 38vw, 430px); }
    .bdoc-outwrap { justify-self: start; }

    /* ---- the sheet ---- */
    .bdoc-sheet { position: relative; border-radius: 18px; padding: clamp(16px,1.8vw,22px);
      background: linear-gradient(180deg, #fff, #fcfbff);
      border: 1px solid rgba(93,69,178,.16);
      box-shadow: 0 40px 80px -50px rgba(50,38,98,.5), inset 0 1px 0 #fff; }
    .bdoc-tab { display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-display); font-weight: 800; font-size: .63rem;
      letter-spacing: .17em; text-transform: uppercase; color: var(--purple); }
    .bdoc-tab i { width: 13px; height: 15px; border-radius: 2px; flex: none;
      background: var(--purple-light); box-shadow: inset 0 0 0 1px rgba(93,69,178,.32); }

    .bdoc-rows { list-style: none; margin: clamp(12px,1.4vw,16px) 0 0; padding: 0;
      display: grid; gap: clamp(9px,1vw,12px); }
    .bdoc-rows li { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0,1fr);
      align-items: center; gap: clamp(10px,1.2vw,16px); }
    .bdoc-k { font-style: normal; font-size: clamp(.76rem,.86vw,.84rem); font-weight: 600;
      color: var(--text-secondary); }
    /* the track, and the fill that draws across it */
    .bdoc-bar { display: block; height: 8px; border-radius: 5px; text-decoration: none;
      background: rgba(93,69,178,.09); overflow: hidden; }
    .bdoc-bar b { display: block; height: 100%; width: 100%; border-radius: 5px;
      transform: scaleX(0); transform-origin: left center;
      background: linear-gradient(90deg, #8a72e0, var(--purple)); }

    .bdoc-foot { display: flex; align-items: center; gap: 8px;
      margin-top: clamp(14px,1.6vw,18px); padding-top: clamp(12px,1.4vw,15px);
      border-top: 1px solid rgba(93,69,178,.12);
      font-size: clamp(.68rem,.76vw,.74rem); color: var(--text-muted); }
    .bdoc-tick { width: 15px; height: 15px; border-radius: 50%; flex: none;
      background: var(--purple-light);
      box-shadow: inset 0 0 0 1px rgba(93,69,178,.3); position: relative; }
    .bdoc-tick::after { content: ''; position: absolute; left: 4px; top: 4.5px;
      width: 6px; height: 3px; border-left: 1.5px solid var(--purple);
      border-bottom: 1.5px solid var(--purple); transform: rotate(-45deg); }

    /* ---- the branch ----
       Overlaid on the whole block and drawn in real pixels, so a path can run
       from the sheet's actual edge to each dot's actual centre. The old
       version lived in its own column with a 100x260 viewBox and
       preserveAspectRatio="none": squeezed into ~80px of width against ~300px
       of height, the curves rendered as hooks that touched nothing. */
    .bdoc-links { position: absolute; inset: 0; width: 100%; height: 100%;
      overflow: visible; pointer-events: none; z-index: 0; }
    .bdoc-links path { fill: none; stroke: rgba(93,69,178,.55); stroke-width: 1.3;
      stroke-linecap: round; }
    .bdoc-sheet, .bdoc-outwrap { position: relative; z-index: 1; }

    /* mirrors the sheet's own tab, so the two halves read as a pair */
    .bdoc-cap { display: block; margin-bottom: clamp(12px,1.4vw,16px);
      font-family: var(--font-display); font-weight: 800; font-size: .63rem;
      letter-spacing: .17em; text-transform: uppercase; color: var(--text-muted); }

    /* ---- what it decides ---- */
    .bdoc-out { list-style: none; margin: 0; padding: 0;
      display: grid; gap: clamp(15px,1.9vw,25px); align-items: center; }
    .bdoc-out li { display: flex; align-items: center; gap: 11px;
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(.95rem,1.35vw,1.22rem); letter-spacing: -.025em;
      color: var(--ink); }
    .bdoc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
      background: #fff; box-shadow: inset 0 0 0 2px rgba(93,69,178,.45);
      transition: box-shadow .45s ease, background .45s ease; }
    .bdoc-out li.is-on .bdoc-dot { background: var(--purple);
      box-shadow: inset 0 0 0 2px var(--purple), 0 0 0 5px rgba(93,69,178,.1); }

    /* the turn: a rule and a statement, no second box — the sheet is the
       section's one heavy object and two large plates fight each other */
    /* The measure has to scale with the type or the line count changes with
       the window. 62ch here resolved against the <p>'s inherited 16px, so it
       was pinned at ~680px while the turn grew to 2.5vw — at 1440 that was
       36px type in a 680px measure, which is three lines. Each line now
       carries its own measure in ch of its OWN size, so the characters per
       line stay put and the turn holds two lines at every width. */
    .brief--doc .brief-thesis { position: relative; z-index: 1;
      max-width: 1060px; margin: clamp(52px,6vw,92px) auto 0; text-align: center;
      padding-top: clamp(26px,3vw,38px); }
    .brief--doc .brief-thesis .bl > span { margin-inline: auto; }
    .brief--doc .brief-thesis .turn > span { max-width: min(40ch, 100%); }
    .brief--doc .brief-thesis .bl:not(.turn) > span { max-width: min(52ch, 100%); }
    .brief--doc .brief-thesis::before { content: ''; position: absolute;
      top: 0; left: 50%; width: clamp(90px,15vw,180px); height: 2px;
      transform: translateX(-50%) scaleX(0); transform-origin: center;
      background: linear-gradient(90deg, transparent, var(--purple), transparent); }
    .brief--doc.is-turned .brief-thesis::before {
      transform: translateX(-50%) scaleX(1);
      transition: transform 1.1s var(--ease-expo); }

    /* The turn ran to three lines below ~520px: the shared clamp floors at
       1.34rem, and 85 characters will not fit two lines of that in a 350px
       column — measured, it needs 16.5px or less. Sized from the viewport
       here so it holds two lines from 320px up and hands back to the shared
       clamp at 540px, where 1.34rem already fits. */
    @media (max-width: 540px) {
      .brief--doc .brief-thesis .turn > span {
        font-size: clamp(.92rem, 4.1vw, 1.34rem); }
    }

    @media (max-width: 900px) {
      .bdoc { grid-template-columns: minmax(0,1fr); gap: clamp(20px,3vw,28px);
        justify-items: center; }
      .bdoc-sheet { width: 100%; }
      .bdoc-outwrap { justify-self: stretch; }
      /* the branch only means anything across a gap; stacked, the sheet sits
         directly above what it decides and the curves would point sideways */
      .bdoc-links { display: none; }
      .bdoc-out { grid-template-rows: none; gap: clamp(10px,2vw,14px); }
      .bdoc-out li { font-size: clamp(.95rem,3.6vw,1.1rem); }
    }

    /* flipping grid for the brief section — quieter than the hero's, and masked
       from the centre so it never competes with the statement it sits behind */
    .brief-flip { z-index: 0;
      -webkit-mask-image: radial-gradient(72% 62% at 50% 46%, transparent 22%, #000 68%, transparent 94%);
      mask-image: radial-gradient(72% 62% at 50% 46%, transparent 22%, #000 68%, transparent 94%); }
    .brief-flip .flip-cell { border-color: rgba(93,69,178,.07); }
    .brief-flip .flip-cell.flip { background-color: rgba(93,69,178,.06); }

    /* ===== ONBOARDING — THE ENGINE ===========================================
       Dark, deliberately: this is the pivot from problem to product on this page,
       so it gets the tonal shift the home page reserves for its anchors. ====== */
    .engine { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) clamp(20px,4vw,64px) clamp(90px,10vw,150px);
      background: #14102a; color: #fff; }
    .eng-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .eng-orb { position: absolute; top: -24%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1250px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.32), transparent 62%); filter: blur(32px); }
    .eng-grid { position: absolute; inset: 0; opacity: .5;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(88% 66% at 50% 34%, #000, transparent 82%);
      mask-image: radial-gradient(88% 66% at 50% 34%, #000, transparent 82%); }

    .eng-head { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; text-align: center; }
    .eng-kicker { display: inline-block; font-family: var(--font-display); font-weight: 800;
      font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #b9a5f7; }
    .eng-h { margin: clamp(16px,1.9vw,24px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.95rem,4.1vw,3.6rem); line-height: 1.05; letter-spacing: -.042em; color: #fff;
      text-wrap: balance; }
    .eng-h .line { display: block; overflow: hidden; padding-bottom: .06em; }
    .eng-h .line > span { display: block; }
    .engine .txt-accent { color: #b9a5f7; }
    .eng-sub { margin: clamp(16px,1.8vw,22px) 0 0; font-family: var(--font-display); font-weight: 700;
      font-size: clamp(1rem,1.3vw,1.2rem); letter-spacing: -.02em; color: #fff; }
    .eng-lede { margin: clamp(14px,1.6vw,20px) auto 0; max-width: 68ch;
      font-size: clamp(.98rem,1.16vw,1.08rem); line-height: 1.68; color: rgba(255,255,255,.66);
      text-wrap: pretty; }

    /* the hand-off into the steps */
    /* was 164px of empty space with a 1px rule nobody could see */
    .eng-steps-head { position: relative; z-index: 1; text-align: center; margin: clamp(34px,3.6vw,52px) auto clamp(26px,2.8vw,38px); }
    .eng-rule { display: block; width: 2px; height: clamp(22px,2.2vw,32px); margin: 0 auto clamp(16px,1.8vw,22px);
      overflow: hidden; border-radius: 2px; }
    .eng-rule i { display: block; width: 100%; height: 100%; transform-origin: top center;
      background: linear-gradient(180deg, rgba(185,165,247,.15), rgba(185,165,247,.95)); }
    .eng-steps-h { margin: 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.4rem,2.5vw,2.2rem); letter-spacing: -.032em; color: #fff; }
    .eng-steps-h .line { display: block; overflow: hidden; padding-bottom: .06em; }
    .eng-steps-h .line > span { display: block; }

    /* steps: one connected rail, not four detached boxes ---------------------
       The rail and its nodes sit ON the cards' top edge. Dropped 43px inside
       the card, the line read as a stray horizontal rule cutting across them
       rather than a wire threading through. --------------------------------- */
    /* The rail used to sit at top: 0 — exactly the y of every card's top
       border, which paints over it. So the line survived only in the three
       gaps between cards and the nodes read as four bullets stuck to card
       edges rather than as a timeline. It now has a band of its own above the
       cards, unbroken from the first node to the last, and each node reaches
       down to its card on a short stem. */
    .eng-steps { --eng-gap: clamp(12px,1.5vw,22px); --rail: 30px;
      position: relative; z-index: 1; max-width: 1160px; margin: 0 auto;
      padding-top: var(--rail);
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--eng-gap); }
    .eng-steps::before { content: ''; position: absolute; z-index: 0; top: 7px;
      left: calc((100% - 3 * var(--eng-gap)) / 8);
      right: calc((100% - 3 * var(--eng-gap)) / 8);
      height: 1px; background: linear-gradient(90deg, rgba(185,165,247,.14), rgba(185,165,247,.55), rgba(185,165,247,.14)); }

    /* no overflow:hidden — the node sits at top:-4px and was being sliced in
       half by it, which is what made the rail look broken at every card */
    .eng-step { position: relative;
      padding: clamp(26px,2.8vw,34px) clamp(18px,2vw,24px) clamp(22px,2.4vw,28px);
      border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
      transition: background .4s ease, border-color .4s ease, transform .5s var(--ease-expo); }
@media (hover: hover) {
      .eng-step:hover { background: rgba(255,255,255,.09); border-color: rgba(185,165,247,.45); transform: translateY(-4px); }
    }

    /* ---- the hover ---------------------------------------------------------
       These are four steps on a rail, so the hover says where you are in the
       sequence rather than just lighting a box: the rail fills up to this
       step's node, a hairline draws around the card's own edge, and a light
       tracks the cursor across it. Content sits above the light explicitly —
       a blanket `> *` rule would make the overlays participate in layout.
       --------------------------------------------------------------------- */
    .eng-step { isolation: isolate; --mx: 50%; --my: 0%; }
    .eng-step > h3, .eng-step > p { position: relative; z-index: 2; }

    .eng-glow { position: absolute; inset: 0; z-index: 0; border-radius: inherit;
      pointer-events: none; opacity: 0;
      background: radial-gradient(220px circle at var(--mx) var(--my),
                  rgba(185,165,247,.20), transparent 68%);
      transition: opacity .45s ease; }
@media (hover: hover) {
      .eng-step:hover .eng-glow { opacity: 1; }
    }

    /* an SVG rect rather than pseudo-element edges, so the line follows the
       16px radius exactly */
    .eng-trace { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
      overflow: visible; pointer-events: none; }
    .eng-trace rect { x: .75px; y: .75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px);
      rx: 15.5px; ry: 15.5px; fill: none; stroke: #cbbcff; stroke-width: 1.3; opacity: 0; }

    /* A light that slides along the rail to sit under the hovered step's node,
       rather than a bar filling from the left — the rail starts AT step 01's
       node, so a fill left that card with nothing to show while the other
       three lit up, which reads as a bug rather than as "you are at the
       start". Feathered at both ends so it melts into the rail. */
    .eng-fill { position: absolute; z-index: 0; top: 6px; height: 3px;
      border-radius: 2px; opacity: 0; pointer-events: none;
      background: linear-gradient(90deg, transparent, #cbbcff 45%, #cbbcff 55%, transparent);
      box-shadow: 0 0 14px rgba(185,165,247,.6); }

@media (hover: hover) {
      .eng-step:hover > h3 { transform: translateX(3px); }
    }
@media (hover: hover) {
      .eng-step:hover p { color: rgba(255,255,255,.85); }
    }
    .eng-step p { transition: color .4s ease; }

    @media (prefers-reduced-motion: reduce) {
      .eng-glow, .eng-trace, .eng-fill { display: none; }
      .eng-step, .eng-step > h3, .eng-step::after { transition: none; }
      .eng-step:hover { transform: none; }
      .eng-step:hover > h3 { transform: none; }
    }
    /* the last card is where the sequence resolves, so it carries the accent */
    .eng-step:last-child { background: linear-gradient(180deg, rgba(185,165,247,.14), rgba(185,165,247,.05));
      border-color: rgba(185,165,247,.32); }

    /* the node, centred on the rail in its own band */
    /* centred with a translate rather than by offsetting half the box: the
       node has a border and a halo, so its outer size depends on the box
       model — translate(-50%,-50%) lands its centre on the rail whatever
       that size turns out to be */
    .eng-step::after { content: ''; position: absolute;
      top: calc(var(--rail) * -1 + 7.5px); left: 50%;
      transform: translate(-50%, -50%);
      width: 10px; height: 10px; border-radius: 50%;
      /* a ring, not a blob: an open node reads as "a step on the way", and
         the one that closes the sequence is the one that gets filled in */
      background: #191338; border: 2px solid #b9a5f7;
      box-shadow: 0 0 0 3px rgba(20,16,42,1), 0 0 12px rgba(185,165,247,.45);
      transition: transform .45s var(--ease-expo), background .4s ease,
                  box-shadow .4s ease; }
    /* the sequence resolves at step 04 — the same reason that card carries the
       accent background */
    .eng-step:last-child::after { background: #cbbcff;
      box-shadow: 0 0 0 3px rgba(20,16,42,1), 0 0 16px rgba(185,165,247,.85); }
@media (hover: hover) {
      .eng-step:hover::after { transform: translate(-50%, -50%) scale(1.35);
        background: #cbbcff;
        box-shadow: 0 0 0 3px rgba(20,16,42,1), 0 0 18px rgba(203,188,255,.95); }
    }

    /* the stem that hangs the card off its node, so the two are visibly one
       thing rather than a dot floating above a box */
    /* runs from the rail's centre to the card's top edge; the node paints
       after ::before, so its fill and halo mask the overlap */
    .eng-step::before { content: ''; position: absolute;
      top: calc(var(--rail) * -1 + 7.5px); left: 50%;
      width: 1px; height: calc(var(--rail) - 7.5px); margin-left: -.5px;
      background: linear-gradient(180deg, rgba(185,165,247,.65), rgba(185,165,247,.08));
      transition: background .4s ease; }
@media (hover: hover) {
      .eng-step:hover::before { background: linear-gradient(180deg, #cbbcff, rgba(203,188,255,.12)); }
    }

    /* Two lines are reserved whether or not the title uses them. With one line
       the longest title had 24px of headroom before wrapping, so at some widths
       one card wrapped and its body dropped out of line with the other three. */
    .eng-step h3 { margin: 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.02rem,1.2vw,1.16rem); line-height: 1.25; letter-spacing: -.025em; color: #fff;
      /* the 1.9em gutter was holding the numeral out of the title's way */
      padding-right: .4em; min-height: 2.5em; text-wrap: balance;
      transition: transform .5s var(--ease-expo); }
    .eng-step p { margin: 11px 0 0; font-size: .92rem; line-height: 1.62;
      color: rgba(255,255,255,.72); text-wrap: pretty; hyphens: none; }

    @media (max-width: 900px) {
      .eng-steps { grid-template-columns: repeat(2, 1fr); padding-top: 0; }
      .eng-steps::before { display: none; }
      .eng-step::after, .eng-step::before { display: none; }
      /* the rail and its nodes are gone below this, so the light on it has to
         go too — a narrow desktop window still reports hover: hover */
      .eng-fill { display: none; }
      .eng-step { padding-top: clamp(22px,2.4vw,28px); }
      .eng-step:last-child { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14); }
      .eng-step h3 { min-height: 0; }
    }
    @media (max-width: 520px) { .eng-steps { grid-template-columns: 1fr; } }

    /* ===== ONBOARDING — ONE BRIEF, FOUR OUTPUTS ===============================
       The reference was dark; this is the light translation. One node fanning
       into four deliverables over real SVG curves that draw themselves in. ==== */
    .fanout { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(80px,9vw,136px) clamp(20px,4vw,64px) clamp(88px,9.5vw,146px);
      background: linear-gradient(180deg, #f4f0ff 0%, #e9e2fb 52%, #f4f0ff 100%); }
    .fan-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .fan-orb { position: absolute; top: 46%; left: 26%; transform: translate(-50%,-50%);
      width: min(90vw,760px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.24), transparent 64%); filter: blur(34px); }

    .fan-head { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto clamp(38px,4.4vw,60px); }
    .fan-kicker { display: inline-block; font-family: var(--font-display); font-weight: 800;
      font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--purple); }
    .fan-h { margin: clamp(14px,1.7vw,22px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.5rem,2.9vw,2.5rem); line-height: 1.16; letter-spacing: -.035em; color: var(--ink);
      text-wrap: balance; }
    .fan-h .line { display: block; overflow: hidden; padding-bottom: .08em; }
    .fan-h .line > span { display: block; }

    .fan-panel { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
      padding: clamp(28px,3.4vw,50px) clamp(22px,3vw,44px) clamp(22px,2.6vw,34px);
      border-radius: 24px; background: rgba(255,255,255,.66); backdrop-filter: blur(6px);
      border: 1px solid rgba(93,69,178,.15);
      box-shadow: 0 44px 90px -60px rgba(50,38,98,.5); }

    /* two columns; the wires overlay the whole thing so they can start exactly
       at the node's edge instead of at some arbitrary column boundary */
    .fan { position: relative; display: grid;
      grid-template-columns: minmax(190px,290px) minmax(210px,300px);
      justify-content: space-between; align-items: center; gap: clamp(40px,7vw,120px); }

    /* the source */
    .fan-node { position: relative; z-index: 1; justify-self: start; padding: clamp(20px,2.2vw,28px) clamp(18px,2vw,26px);
      border-radius: 16px; background: #fff; border: 1.5px solid rgba(93,69,178,.42);
      box-shadow: 0 24px 50px -34px rgba(93,69,178,.6); text-align: left; }
    .fan-node-glow { position: absolute; inset: -46% -34%; z-index: -1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.26), transparent 66%); filter: blur(18px); }
    .fan-node b { display: block; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1rem,1.32vw,1.24rem); line-height: 1.24; letter-spacing: -.028em; color: var(--ink); }
    .fan-node small { display: block; margin-top: 7px; font-size: .74rem; color: var(--text-muted); }
    .fan-node::after { content: ''; position: absolute; right: -5px; top: 50%; margin-top: -4.5px;
      width: 9px; height: 9px; border-radius: 50%; background: var(--purple);
      box-shadow: 0 0 0 4px rgba(255,255,255,.9); }

    /* the wires */
    .fan-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
      pointer-events: none; overflow: visible; }
    .fan-wire { fill: none; stroke: rgba(93,69,178,.5); stroke-width: 1.6;
      vector-effect: non-scaling-stroke; stroke-linecap: round; }
    /* the travelling charge — same geometry as its wire, drawn as one short dash */
    .fan-flow { fill: none; stroke: var(--purple); stroke-width: 2.6; opacity: 0;
      vector-effect: non-scaling-stroke; stroke-linecap: round;
      filter: drop-shadow(0 0 4px rgba(93,69,178,.55)); }
    /* the emitter at the node's port, fired once per cycle */
    .fan-ping { position: absolute; right: -5px; top: 50%; margin-top: -4.5px;
      width: 9px; height: 9px; border-radius: 50%; background: var(--purple);
      opacity: 0; pointer-events: none; }

    /* the outputs */
    .fan-outs { position: relative; z-index: 1; display: grid; gap: clamp(10px,1.2vw,16px); justify-items: stretch; }
    .fan-out { display: flex; align-items: center; gap: 11px;
      padding: 13px 16px; border-radius: 11px; background: #fff;
      border: 1px solid rgba(93,69,178,.2); box-shadow: 0 16px 34px -28px rgba(50,38,98,.5);
      font-family: var(--font-display); font-weight: 700; font-size: clamp(.9rem,1.06vw,1rem);
      letter-spacing: -.018em; color: var(--ink);
      transition: transform .45s var(--ease-expo), border-color .35s ease, box-shadow .4s ease; }
@media (hover: hover) {
      .fan-out:hover { transform: translateX(4px); border-color: rgba(93,69,178,.45);
        box-shadow: 0 22px 40px -26px rgba(50,38,98,.55); }
    }
    .fan-out i { width: 8px; height: 8px; border-radius: 50%; flex: none;
      background: linear-gradient(150deg, #8a72e0, var(--purple));
      transition: transform .35s var(--ease-expo), box-shadow .35s ease; }
    /* what "arrival" looks like — held ~.7s, then released */
    .fan-out.is-lit { border-color: rgba(93,69,178,.55);
      box-shadow: 0 20px 38px -26px rgba(50,38,98,.55), 0 0 0 3px rgba(93,69,178,.07); }
    .fan-out.is-lit i { transform: scale(1.45); box-shadow: 0 0 0 4px rgba(93,69,178,.14); }

    .fan-foot { margin: clamp(24px,2.8vw,36px) 0 0; padding-top: clamp(18px,2vw,24px);
      border-top: 1px dashed rgba(93,69,178,.22);
      text-align: center; font-size: .92rem; color: var(--text-secondary); }

    @media (prefers-reduced-motion: reduce) {
      .fan-flow, .fan-ping { display: none; }
    }

    @media (max-width: 820px) {
      .fan { grid-template-columns: 1fr; gap: 20px; justify-items: stretch; }
      .fan-node { justify-self: stretch; text-align: center; }
      .fan-wires { display: none; }   /* curves only make sense side-by-side */
    }

    /* ===== ONBOARDING — WHITE LABEL ==========================================
       White, between the lavender fan-out and the dark footer, so the mock
       reads as a real product surface rather than another tinted panel.
       Left-aligned on purpose: brief / engine / fan-out are all centred, and a
       fourth centred column before the footer flattens the page's rhythm. ==== */
    .wl { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(80px,9vw,140px) clamp(20px,4vw,64px) clamp(88px,9.5vw,148px);
      background: #fff; }
    .wl-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .wl-orb { position: absolute; top: 50%; right: -8%; transform: translateY(-50%);
      width: min(88vw,860px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.16), transparent 64%); filter: blur(36px); }

    /* .95/1.05, not .86/1.14: at the old split "Deliver This Experience" was
       476px in a 476px column and broke to three lines with a ragged short/
       short/long shape. The display size came down 0.05rem for the same reason. */
    .wl-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
      display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
      align-items: center; gap: clamp(36px,4.6vw,78px); }

    .wl-kicker { display: inline-block; font-family: var(--font-display); font-weight: 800;
      font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--purple); }
    .wl-h { margin: clamp(14px,1.7vw,22px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.9rem,3.4vw,3.05rem); line-height: 1.06; letter-spacing: -.042em; color: var(--ink);
      text-wrap: balance; }
    .wl-h .line { display: block; overflow: hidden; padding-bottom: .08em; }
    .wl-h .line > span { display: block; }
    .wl-lede { margin: clamp(18px,2vw,26px) 0 0; max-width: 46ch;
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(1rem,1.25vw,1.15rem); line-height: 1.5; letter-spacing: -.022em; color: var(--ink); }
    .wl-body { margin: clamp(12px,1.4vw,18px) 0 0; max-width: 50ch;
      font-size: clamp(.96rem,1.12vw,1.05rem); line-height: 1.68; color: var(--text-secondary);
      text-wrap: pretty; }
    .wl-actions { margin-top: clamp(24px,2.8vw,36px); }

    /* ---- the mock ---- */
    .wl-stage { position: relative; }
    .wl-win {
      position: relative; border-radius: 18px; overflow: hidden; background: #fff;
      border: 1px solid rgba(93,69,178,.16);
      box-shadow: 0 54px 100px -58px rgba(50,38,98,.55), 0 2px 6px -2px rgba(50,38,98,.14); }

    .wl-chrome { display: flex; align-items: center; gap: 14px;
      padding: 11px 16px; border-bottom: 1px solid rgba(93,69,178,.12);
      background: #faf9ff; }
    .wl-dots { display: inline-flex; gap: 6px; flex: none; }
    .wl-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(93,69,178,.2); }
    .wl-url { font-size: .74rem; letter-spacing: -.01em; color: var(--text-muted);
      padding: 4px 12px; border-radius: 100px; background: #fff;
      border: 1px solid rgba(93,69,178,.12); }
    .wl-url b { font-weight: 700; color: var(--purple); }

    /* ---- the screen itself ---------------------------------------------------
       A real capture, with one overlay: the agency name. Its box is expressed in
       percentages measured off the file (the org pill occupies 0.5–16.1% across
       and 1–8.5% down), so it stays locked to the image at any size. Text scales
       in cqw for the same reason. ------------------------------------------- */
    .wl-shot { position: relative; container-type: inline-size; line-height: 0; }
    .wl-shot img { display: block; width: 100%; height: auto; }
    .wl-org { position: absolute; left: .2%; top: .6%; width: 16%; height: 8.2%;
      display: flex; align-items: center; padding: 0 .6%;
      background: #fafafe;                 /* the sidebar ground around the pill */
      line-height: normal; }
    .wl-org-pill { flex: 1; display: flex; align-items: center; gap: .9cqw;
      height: 82%; padding: 0 .8cqw; border-radius: 1.1cqw;
      background: #fcf8ff; min-width: 0; }
    .wl-mark { width: 2cqw; height: 2cqw; flex: none; border-radius: .5cqw; display: grid; place-items: center;
      background: var(--purple); color: #fff;
      font-family: var(--font-display); font-weight: 800; font-size: 1.1cqw; }
    .wl-org-pill b { font-family: var(--font-display); font-weight: 700; font-size: 1.55cqw;
      letter-spacing: -.02em; color: #4a3f6b; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
    .wl-org-chev { width: 1.5cqw; height: 1.5cqw; flex: none; margin-left: auto; color: #8b83a8; }

    .wl-swap { display: flex; align-items: center; gap: 12px;
      margin-top: clamp(16px,1.8vw,22px); padding-left: 2px; }
    .wl-swap-dots { display: inline-flex; gap: 5px; flex: none; }
    .wl-swap-dots i { width: 16px; height: 3px; border-radius: 100px; background: rgba(93,69,178,.18);
      transition: background .35s ease, width .45s var(--ease-expo); }
    .wl-swap-dots i.is-on { width: 26px; background: var(--purple); }
    .wl-cap { margin: 0; font-size: .8rem; color: var(--text-secondary); }

    @media (max-width: 940px) {
      .wl-inner { grid-template-columns: 1fr; gap: clamp(30px,5vw,44px); }
      .wl-lede, .wl-body { max-width: 60ch; }
    }
    @media (max-width: 560px) {
      /* the overlay's text would be unreadably small over a shrunken capture */
      .wl-org { display: none; }
    }

    /* ============================================================
       CONTACT PAGE
       Light ground, single centred column. No side rail — the form is the
       whole page, so nothing competes with it.
       ============================================================ */
    .ct { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(80px,8.5vw,132px) clamp(20px,4vw,64px) clamp(88px,9vw,146px);
      background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 48%, #ffffff 100%); }
    .ct-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .ct-orb { position: absolute; top: -26%; left: 50%; transform: translateX(-50%);
      width: min(130vw,1120px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle, rgba(122,99,214,.2), transparent 62%); filter: blur(34px); }
    .ct-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(93,69,178,.07) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(93,69,178,.07) 1px, transparent 1px);
      background-size: 62px 62px;
      -webkit-mask-image: radial-gradient(86% 60% at 50% 32%, #000, transparent 84%);
      mask-image: radial-gradient(86% 60% at 50% 32%, #000, transparent 84%); }

    .ct-head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; }
    .ct-h { margin: clamp(18px,2vw,26px) 0 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(2.7rem,6.6vw,5.4rem); line-height: .96; letter-spacing: -.052em; color: var(--ink); }
    .ct-h .line { display: block; overflow: hidden; padding-bottom: .07em; }
    .ct-h .line > span { display: block; }
    .ct-sub { margin: clamp(14px,1.7vw,20px) auto 0; max-width: 44ch;
      font-size: clamp(.98rem,1.2vw,1.12rem); line-height: 1.6; color: var(--text-secondary); }

    /* one column, centred — the form is the page */
    .ct-wrap { position: relative; z-index: 1; max-width: 720px;
      margin: clamp(40px,4.6vw,64px) auto 0; }

    .ct-card { padding: clamp(26px,3vw,42px);
      border-radius: 22px; background: #fff;
      border: 1px solid rgba(93,69,178,.16);
      box-shadow: 0 46px 90px -50px rgba(50,38,98,.5); }
    .ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2vw,26px); }
    .ct-f { display: flex; flex-direction: column; min-width: 0; }
    .ct-f.wide { grid-column: 1 / -1; }
    .ct-f label { margin-bottom: 9px; font-size: .8rem; font-weight: 700; letter-spacing: -.005em;
      color: var(--purple); }
    .ct-f input, .ct-f select, .ct-f textarea {
      width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
      padding: 14px 16px; border-radius: 13px;
      background: #fbfaff; border: 1px solid rgba(93,69,178,.18);
      outline: none; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
    .ct-f textarea { min-height: 138px; resize: vertical; line-height: 1.6; }
    .ct-f select { cursor: pointer; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d45b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
      padding-right: 40px; }
    .ct-f input::placeholder, .ct-f textarea::placeholder { color: var(--text-muted); }
    .ct-f input:focus, .ct-f select:focus, .ct-f textarea:focus {
      border-color: var(--purple); background: #fff;
      box-shadow: 0 0 0 4px rgba(93,69,178,.12); }
    .ct-f.is-bad input, .ct-f.is-bad select, .ct-f.is-bad textarea { border-color: #d4557a; }
    .ct-err { margin-top: 7px; font-size: .74rem; font-weight: 600; color: #b3335a;
      opacity: 0; height: 0; transition: opacity .3s ease; }
    .ct-f.is-bad .ct-err { opacity: 1; height: auto; }

    .ct-send { width: 100%; margin-top: clamp(22px,2.5vw,32px);
      display: inline-flex; align-items: center; justify-content: center; gap: 11px;
      padding: 17px 24px; border-radius: 100px;
      font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
      background: linear-gradient(120deg, #6f57cc, var(--purple));
      box-shadow: 0 22px 44px -22px rgba(93,69,178,.8);
      transition: transform .45s var(--ease-expo), box-shadow .35s ease; }
@media (hover: hover) {
      .ct-send:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -22px rgba(93,69,178,.95); }
    }
    .ct-send svg { width: 17px; height: 17px; }
    .ct-status { margin-top: 14px; text-align: center; font-size: .84rem;
      color: var(--text-muted); min-height: 1.3em; }

    @media (max-width: 560px) { .ct-fields { grid-template-columns: 1fr; } }

    /* ============================================================
       RESEARCH — THE RESEARCH GAP
       The argument left, the proof right. Centred stacks read flat, so this
       one is deliberately asymmetric and resolves into a full-width turn.
       Colour rule: --stall grey carries sameness (generic, undifferentiated),
       coral stays reserved for cost, and purple only returns on the turn.
       ============================================================ */
    .rgap { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: linear-gradient(180deg, #faf8ff 0%, #f3effd 52%, #f8f6ff 100%); }
    .rgap-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .rgap-orb { position: absolute; top: 8%; right: -8%; width: min(70vw,760px); aspect-ratio: 1;
      border-radius: 50%; background: radial-gradient(circle, rgba(93,69,178,.14), transparent 64%);
      filter: blur(30px); }
    .rgap-flip { z-index: 0; opacity: .5; }

    .rgap-wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
      display: grid; grid-template-columns: minmax(0,5.6fr) minmax(0,6.4fr);
      gap: clamp(30px,4.4vw,74px); align-items: start; }

    .rgap-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem;
      font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
      color: var(--purple); }
    .rgap-h { margin: clamp(18px,2.2vw,28px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.042em; line-height: 1.03;
      font-size: clamp(1.92rem,3.5vw,3.3rem); }
    .rgap-h .line { display: block; overflow: hidden; padding-bottom: .045em; }
    .rgap-h .line > span { display: block; }
    .rgap-lede { margin: clamp(20px,2.3vw,30px) 0 0; max-width: 52ch;
      font-size: clamp(.97rem,1.08vw,1.06rem); line-height: 1.68; color: var(--text-secondary); }

    /* ---- the proof: three brands, byte-for-byte identical copy ---- */
    .rgap-vis { margin: 0; padding-top: clamp(6px,1.4vw,34px); }
    .serp { border-radius: var(--radius); background: #fff; overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 34px 70px -40px rgba(28,20,60,.3), 0 2px 5px -2px rgba(28,20,60,.07); }
    .serp-bar { display: flex; align-items: center; justify-content: space-between;
      padding: 12px clamp(14px,1.5vw,20px); border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg,#fcfbff,#f7f5ff); }
    .serp-bar span { font-size: .68rem; font-weight: 800; letter-spacing: .15em;
      text-transform: uppercase; color: var(--text-muted); }
    .serp-bar em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--text-muted);
      font-variant-numeric: tabular-nums; }

    .serp-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(11px,1.2vw,16px);
      align-items: center; padding: clamp(13px,1.5vw,18px) clamp(14px,1.5vw,20px);
      border-bottom: 1px solid var(--border); }
    /* The thumb was an empty grey square. It now carries the brand's own
       initial, so the three rows are visibly three different brands — which
       is what makes the identical copy underneath land as a problem rather
       than as filler. Grey, not purple: in this section grey carries
       sameness and purple is held back for the turn. */
    .serp-thumb { width: clamp(38px,4vw,50px); aspect-ratio: 1; border-radius: 9px; flex: none;
      display: grid; place-items: center;
      background: linear-gradient(160deg, #f6f4fb, #eceaf4);
      border: 1px solid rgba(107,100,120,.13);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
    .serp-thumb i { font-style: normal; font-family: var(--font-display);
      font-weight: 800; font-size: clamp(.86rem,1.1vw,1.05rem);
      letter-spacing: -.02em; color: rgba(107,100,120,.5); }


    .serp-body { position: relative; display: grid; gap: 7px; min-width: 0; }

    /* The stage the three rows slide across. Fixed height, so when they land
       in register the merged row sits in the middle of the block instead of
       leaving a hole where rows two and three used to be. */
    .serp-rows { position: relative; }
    .serp-row { position: relative; background: inherit; }
    /* the thumbs overlap into a stack as the rows converge, so three brands
       are still countable once their copy has become one row */
    .serp-thumb { position: relative; z-index: 1; }
    .serp-row:nth-child(2) .serp-thumb { z-index: 2; }
    .serp-row:nth-child(3) .serp-thumb { z-index: 3; }

    /* the loading state the rows resolve out of — a real interface populating,
       so the payoff is that all three populate with the same three chips */
    .serp-skel { position: absolute; inset: 0; display: grid; gap: 10px;
      align-content: center; pointer-events: none; }
    .serp-skel i { height: 11px; border-radius: 6px;
      background: linear-gradient(90deg, #efedf5 0%, #f8f7fb 42%, #efedf5 84%);
      background-size: 260% 100%; animation: serp-shimmer 1.15s linear infinite; }
    .serp-skel i:first-child { width: 34%; }
    .serp-skel i:last-child { width: 76%; }
    @keyframes serp-shimmer {
      from { background-position: 130% 0; }
      to   { background-position: -130% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .serp-skel { display: none; }
      .serp-skel i { animation: none; }
    }

    .serp-bar em b { font-weight: 700; font-variant-numeric: tabular-nums; }
    /* the only thing that differs between the three rows */
    /* justify-self so the box hugs the name: as a stretched grid item its
       width was the whole column, and the merge fans the names apart by
       their measured widths — which sent them ~490px off the panel */
    .serp-brand { justify-self: start;
      font-family: var(--font-display); font-size: clamp(.9rem,1.05vw,1rem);
      font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
    .serp-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
      font-size: clamp(.76rem,.87vw,.83rem); line-height: 1.5; }
    /* Grey, not coral: the claim is sameness, not danger, and grey IS generic.
       Coral stays reserved for cost. Chips rather than a highlighter band — a
       background sized in em sits low in the line box, clips descenders and
       gives every phrase a differently-ragged slab. */
    .serp-copy .dup { display: inline-block; font-style: normal; font-weight: 600;
      padding: 3px 8px; border-radius: 5px; color: var(--stall);
      background: rgba(107,100,120,.085); border: 1px solid rgba(107,100,120,.15); }

    .serp-note { display: flex; align-items: center; gap: 9px;
      padding: clamp(12px,1.3vw,15px) clamp(14px,1.5vw,20px);
      font-size: .78rem; font-weight: 600; color: var(--text-secondary);
      background: #fbfaff; }
    .serp-flag { padding: 3px 8px; border-radius: 100px; background: var(--stall-bg);
      color: var(--stall); font-size: .62rem; font-weight: 800; letter-spacing: .12em;
      text-transform: uppercase; flex: none; }

    /* ---- the turn: full width, and where purple comes back ---- */
    .rgap-turn { position: relative; z-index: 1; text-align: center;
      margin: clamp(56px,6.4vw,100px) auto 0; max-width: 1000px; }
    .rgap-couplet { margin: 0; font-family: var(--font-display); letter-spacing: -.032em; line-height: 1.26; }
    .rgap-couplet .cl { display: block; overflow: hidden; }
    .rgap-couplet .cl > span { display: block; text-wrap: balance; }
    .rgap-couplet .cl:not(.turn) > span { font-size: clamp(1.02rem,1.42vw,1.3rem);
      font-weight: 600; color: var(--text-secondary); }
    .rgap-couplet .turn > span { margin-top: .3em; font-size: clamp(1.42rem,2.9vw,2.6rem);
      font-weight: 800; color: var(--ink); }
    /* The two outcomes, each on its own marker fill — one lit, one dead. The
       fill is a real element rather than a background-size band so it can wipe
       from the left at display sizes without clipping descenders, and so the
       word's colour can cross over as the fill passes under it. */
    .rgap-couplet .hl { position: relative; display: inline-block; padding: 0 .16em;
      font-weight: 800; }
    .rgap-couplet .hl > i { position: absolute; inset: -.04em 0 -.02em; border-radius: 8px;
      transform: scaleX(0); transform-origin: left center; }
    .rgap-couplet .hl > em { position: relative; font-style: normal; }
    .rgap-couplet .hl-sells > i { background: linear-gradient(115deg, #6f57cc, var(--purple)); }
    .rgap-couplet .hl-sells > em { color: var(--purple); }
    .rgap-couplet .hl-sits > i { background: #e7e4ee; }
    .rgap-couplet .hl-sits > em { color: var(--stall); }

    /* a little light behind the turn, so it reads as the section's ending */
    .rgap-turn::before { content: ""; position: absolute; z-index: -1;
      left: 50%; top: 42%; transform: translate(-50%,-50%);
      width: min(90%,760px); aspect-ratio: 2.2; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(93,69,178,.11), transparent 68%);
      filter: blur(24px); pointer-events: none; }

    @media (max-width: 940px) {
      .rgap-wrap { grid-template-columns: 1fr; gap: clamp(30px,5vw,44px); }
      .rgap-lede { max-width: 62ch; }
    }

    /* ============================================================
       RESEARCH — THE REALITY CHECK (the cost beat, inverted)
       Two light sections ran back to back with no rhythm break, and this is
       the page's heaviest claim, so it takes the dark ground — same family as
       the ticker (#171130) and footer (#14102a). Coral is the site's cost
       colour and carries the indices and the turn; purple stays with product.
       ============================================================ */
    .cost2 { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: #151029; color: #fff;
      border-top: 1px solid rgba(255,255,255,.07); }
    .cost2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .cost2-orb { position: absolute; top: -6%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1100px); aspect-ratio: 1.5; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(239,68,68,.14), transparent 66%);
      filter: blur(40px); }
    .cost2-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 78px 78px;
      /* carried further down the section than the head, so the cards have real
         texture behind them for backdrop-filter to work on */
      mask-image: radial-gradient(ellipse at 50% 42%, #000 52%, transparent 92%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 52%, transparent 92%); }
    .cost2-orb2 { position: absolute; top: 32%; left: 12%; width: min(72vw,660px);
      aspect-ratio: 1.3; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(122,99,214,.22), transparent 68%);
      filter: blur(38px); }

    .cost2-head { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto;
      text-align: center; }
    .cost2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem;
      font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
      color: #ff8f8f; background: rgba(239,68,68,.12); padding: 10px 18px; border-radius: 100px;
      border: 1px solid rgba(239,68,68,.22); }
    .cost2-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.04em; line-height: 1.08;
      font-size: clamp(1.72rem,3.05vw,2.85rem); }
    .cost2-h .line { display: block; overflow: hidden; padding-bottom: .05em; }
    .cost2-h .line > span { display: block; }
    .cost2-h .c2-red { color: #ff8f8f; }

    /* four consequences, equal weight — none of them is the headline */
    .cost2-grid-cards { position: relative; z-index: 1; max-width: 1240px;
      margin: clamp(42px,5vw,72px) auto 0;
      display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
      gap: clamp(14px,1.5vw,20px); }
    /* Glass: translucent over the section's own orb and grid, so the blur has
       something to actually work on. -webkit- prefix for Safari. */
    .c2card { position: relative; isolation: isolate; overflow: hidden;
      padding: clamp(24px,2.5vw,32px) clamp(20px,2vw,26px) clamp(26px,2.6vw,34px);
      border-radius: var(--radius);
      background: rgba(255,255,255,.045);
      -webkit-backdrop-filter: blur(16px) saturate(135%);
      backdrop-filter: blur(16px) saturate(135%);
      border: 1px solid rgba(255,255,255,.1);
      /* pointer position, written by initCost2Cards; parked until hovered */
      --mx: 50%; --my: 0%;
      transition: background .5s var(--ease-expo), border-color .5s ease,
                  transform .55s var(--ease-expo); }
    /* the three overlay layers must stay out of the card's grid flow — as
       grid items they take a track each and stretch the card */
    .c2card > *:not(.c2-glow):not(.c2-sheen):not(.c2-trace) {
      position: relative; z-index: 1; }
@media (hover: hover) {
      .c2card:hover { background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.16); transform: translateY(-6px); }
    }

    /* A light that tracks the cursor rather than switching on. Two layers read
       the same point: a wash inside the card, and the 1px border lit from it. */
    .c2-glow { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
      background: radial-gradient(240px circle at var(--mx) var(--my),
                  rgba(239,68,68,.15), transparent 70%);
      transition: opacity .5s ease; }
@media (hover: hover) {
      .c2card:hover .c2-glow { opacity: 1; }
    }
    /* ---- the trace: a line drawn round the card's own perimeter -----------
       An SVG rect rather than four pseudo-element edges, so it follows the
       16px corner radius instead of leaving gaps at the corners. Dash values
       come from getTotalLength() in px — GSAP rounds strokeDashoffset to whole
       pixels, which is invisible over a ~1000px perimeter but would have
       quantised a pathLength="1" range into two frames. */
    .c2-trace { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
      overflow: visible; pointer-events: none; }
    .c2-trace rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
      rx: 15px; ry: 15px; fill: none; stroke: #ff8f8f; stroke-width: 1.4; opacity: 0; }

    /* ---- the sweep: one pass of light across the card on entry ---- */
    .c2-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: 0;
      opacity: 0; pointer-events: none; transform: translateX(-160%);
      background: linear-gradient(100deg, transparent, rgba(255,190,190,.14), transparent); }

    .c2-top { display: flex; margin-bottom: clamp(18px,1.9vw,24px); }
    .c2-ic { display: grid; place-items: center; width: 58px; height: 58px; flex: none;
      border-radius: 16px; color: #ff8f8f;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      transition: background .5s var(--ease-expo), border-color .5s ease,
                  color .5s ease, transform .55s var(--ease-expo); }
    .c2-ic svg { width: 30px; height: 30px; overflow: visible; }
@media (hover: hover) {
      .c2card:hover .c2-ic { background: rgba(239,68,68,.13);
        border-color: rgba(239,68,68,.34); color: #ffb0b0; transform: translateY(-3px); }
    }

    /* A shallow parallax inside the card — mark, then title, each lifting a
       little less on a small delay. Reads as depth, not as a bounce. */
    .c2card h3 { transition: transform .55s var(--ease-expo) .04s, color .4s ease; }
@media (hover: hover) {
      .c2card:hover h3 { transform: translateY(-2px); }
    }

    /* ---- the marks -------------------------------------------------------
       Every hover move is small and precise. The earlier pass rotated and
       scaled these by 150% and 150deg, which read as a glitch rather than a
       gesture; restraint is the whole point at this size. */
    .ic01 .sig, .ic01 .pick, .ic02 .pl, .ic03 .fwd, .ic03 .back,
    .ic04 .cone, .ic04 .span {
      transition: transform .5s var(--ease-expo), opacity .45s ease; }

    /* 01 — three of five signals are never picked up; on hover they drift off */
    .ic01 .off { opacity: .3; }
    .ic01 .pick { opacity: .85; }
@media (hover: hover) {
      .c2card:hover .ic01 .off { opacity: .13; transform: translateX(2.5px); }
    }
@media (hover: hover) {
      .c2card:hover .ic01 .pick { opacity: 1; }
    }

    /* 02 — the soundings re-take at different depths, one after another */
    .ic02 .datum { opacity: .5; }
    .ic02 .pl { transform-box: fill-box; transform-origin: top; }
@media (hover: hover) {
      .c2card:hover .ic02 .p1 { transform: scaleY(.84); transition-delay: 0s; }
    }
@media (hover: hover) {
      .c2card:hover .ic02 .p2 { transform: scaleY(1.34); transition-delay: .05s; }
    }
@media (hover: hover) {
      .c2card:hover .ic02 .p3 { transform: scaleY(.88); transition-delay: .1s; }
    }
@media (hover: hover) {
      .c2card:hover .ic02 .p4 { transform: scaleY(1.22); transition-delay: .15s; }
    }

    /* 03 — the return run asserts itself and the forward one recedes */
    .ic03 .back { opacity: .38; }
@media (hover: hover) {
      .c2card:hover .ic03 .fwd { opacity: .4; }
    }
@media (hover: hover) {
      .c2card:hover .ic03 .back { opacity: 1; transform: translateX(-2.5px); }
    }

    /* 04 — the unused span fades and the cone tightens further */
    .ic04 .span { opacity: .26; }
    .ic04 .cone { transform-box: view-box; transform-origin: 5px 12px; }
@media (hover: hover) {
      .c2card:hover .ic04 .span { opacity: .1; }
    }
@media (hover: hover) {
      .c2card:hover .ic04 .cone { transform: scaleY(.72); }
    }

    @media (prefers-reduced-motion: reduce) {
      .c2card, .c2-ic, .c2card h3, .c2card::after, .c2-glow,
      .ic01 .sig, .ic01 .pick, .ic02 .pl, .ic03 .fwd, .ic03 .back,
      .ic04 .cone, .ic04 .span { transition: none; }
      .c2card:hover, .c2card:hover h3, .c2card:hover .c2-ic,
      .c2card:hover .ic01 .off, .c2card:hover .ic02 .pl,
      .c2card:hover .ic03 .back, .c2card:hover .ic04 .cone { transform: none; }
    }

    /* the turn */
    .cost-close { position: relative; z-index: 1; text-align: center; margin: clamp(44px,5vw,72px) auto 0; max-width: 1000px; }
    .cost-rule { display: block; width: 1px; height: clamp(30px,3.2vw,46px); margin: 0 auto clamp(18px,2vw,26px); overflow: hidden; }
    .cost-rule i { display: block; width: 100%; height: 100%; transform-origin: top center;
      background: linear-gradient(180deg, rgba(239,68,68,0), rgba(239,68,68,.5)); }
    .cost-couplet { margin: 0; font-family: var(--font-display); letter-spacing: -.032em; line-height: 1.28; }
    .cost-couplet .cl { display: block; overflow: hidden; }
    .cost-couplet .cl > span { display: block; }
    .cost-couplet .cl:not(.turn) > span { font-size: clamp(1.1rem,1.85vw,1.6rem); font-weight: 600; color: var(--text-secondary); }
    .cost-couplet .turn > span { font-size: clamp(1.5rem,3vw,2.7rem); font-weight: 800; color: var(--ink); margin-top: .2em; }
    .cost-hl { background-color: transparent; color: var(--ink);
      background-image: linear-gradient(90deg, rgba(239,68,68,.3), rgba(239,68,68,.13));
      background-repeat: no-repeat; background-position: 0 84%; background-size: 0% .34em;
      padding: 0 .07em; border-radius: 2px;
      -webkit-box-decoration-break: clone; box-decoration-break: clone; }

    /* ============================================================
       RESEARCH — INTRODUCING THE RESEARCH ENGINE
       Light again after the dark cost beat, and the first place purple returns
       on this page — this is the product. In the comparison panel the "without"
       column stays muted and the "with" column carries the brand colour, so the
       two sides read differently even out of context.
       (Prefixed .rengine/.swap — .eng-* is already the onboarding engine.)
       ============================================================ */
    .rengine { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: linear-gradient(180deg, #ffffff 0%, #f5f1ff 52%, #fbf9ff 100%); }
    .rengine-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .rengine-orb { position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
      width: min(110vw,980px); aspect-ratio: 1.4; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(93,69,178,.16), transparent 66%);
      filter: blur(36px); }
    .rengine-flip { z-index: 0; opacity: .55; }

    .rengine-head { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
      text-align: center; }
    .rengine-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem;
      font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
      color: var(--purple); background: var(--purple-light); padding: 10px 18px;
      border-radius: 100px; }
    .rengine-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.042em; line-height: 1.05;
      font-size: clamp(1.85rem,3.4vw,3.15rem); }
    .rengine-h .line { display: block; overflow: hidden; padding-bottom: .05em; }
    .rengine-h .line > span { display: block; }
    .rengine-lede { margin: clamp(18px,2vw,26px) auto 0; max-width: 60ch;
      font-size: clamp(.98rem,1.1vw,1.08rem); line-height: 1.65; color: var(--text-secondary); }

    /* ---- the swap panel: dark, so it reads as the product surface --------- */
    .swap { position: relative; z-index: 1; max-width: 1120px;
      margin: clamp(40px,4.6vw,68px) auto 0;
      padding: clamp(14px,1.5vw,20px);
      border-radius: calc(var(--radius) + 4px);
      background: #16112c;
      box-shadow: 0 44px 90px -46px rgba(28,20,60,.62), 0 2px 6px -2px rgba(28,20,60,.2); }

    /* Rows share one vertical spine through the arrow column, built per-row from
       pseudo-elements so it self-aligns with the grid instead of being absolutely
       positioned. The node sits on that spine: a transformation has an axis. */
    .swap-heads, .swap-row { display: grid;
      grid-template-columns: minmax(0,1fr) clamp(40px,4vw,60px) minmax(0,1fr);
      gap: clamp(10px,1.2vw,16px); }
    /* The two column heads carry the whole comparison, so they're chips rather
       than micro-caps: the old way dashed and inert, the new way filled with the
       brand and lifted off the panel. Told apart by weight, fill and mark. */
    .swap-heads { align-items: center; padding: 2px 0 clamp(16px,1.7vw,22px); }
    .swap-lbl { display: inline-flex; align-items: center; gap: 9px; justify-self: start;
      padding: 10px 16px 10px 12px; border-radius: 100px;
      font-size: clamp(.7rem,.78vw,.76rem); font-weight: 800; letter-spacing: .13em;
      text-transform: uppercase; white-space: nowrap;
      background: rgba(255,255,255,.045); color: rgba(255,255,255,.44);
      border: 1px dashed rgba(255,255,255,.15); }
    .swap-lbl.is-on { color: #fff;
      background: linear-gradient(120deg, #7a63d6, var(--purple));
      border: 1px solid rgba(178,158,255,.55);
      box-shadow: 0 16px 34px -14px rgba(93,69,178,.85),
                  inset 0 1px 0 rgba(255,255,255,.16); }
    .swap-mk { display: grid; place-items: center; width: 19px; height: 19px; flex: none;
      border-radius: 50%; background: rgba(255,255,255,.07); }
    .swap-mk svg { width: 11px; height: 11px; }
    .swap-lbl.is-on .swap-mk { background: rgba(255,255,255,.2); }

    @media (max-width: 900px) {
      .swap-lbl { letter-spacing: .1em; padding: 9px 13px 9px 10px; white-space: normal; }
    }

    /* stretch, so the two cells in a row always match height */
    .swap-row { align-items: stretch; }
    .swap-row + .swap-row { margin-top: clamp(8px,.9vw,12px); }
    .swap-was, .swap-now { display: flex; align-items: center; margin: 0;
      border-radius: 12px; padding: clamp(13px,1.4vw,17px) clamp(14px,1.5vw,19px);
      font-size: clamp(.83rem,.94vw,.91rem); line-height: 1.5;
      transition: opacity .5s var(--ease-expo), background .5s var(--ease-expo),
                  border-color .5s ease, transform .5s var(--ease-expo); }
    /* the old way: dashed, because it's provisional and never repeats */
    .swap-was { background: rgba(255,255,255,.04); color: rgba(255,255,255,.52);
      border: 1px dashed rgba(255,255,255,.13); }
    /* the new way: solid, and the brand carries it */
    .swap-now { position: relative; overflow: hidden;
      background: linear-gradient(120deg, rgba(93,69,178,.3), rgba(93,69,178,.18));
      color: #fff; font-weight: 600; border: 1px solid rgba(149,124,255,.3); }
    /* an edge that fills as the row becomes the active one */
    .swap-now::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
      width: 2px; background: linear-gradient(180deg, #a892ff, var(--purple));
      transform: scaleY(.28); transform-origin: center; opacity: .45;
      transition: transform .6s var(--ease-expo), opacity .5s ease; }

    .swap-arw { position: relative; display: grid; place-items: center; }
    /* the spine: a hairline above and below the node, meeting the next row's */
    .swap-arw::before, .swap-arw::after { content: ""; position: absolute; left: 50%;
      width: 1px; transform: translateX(-50%); background: rgba(255,255,255,.085); }
    .swap-arw::before { top: -12px; bottom: calc(50% + 15px); }
    .swap-arw::after { top: calc(50% + 15px); bottom: -12px; }
    /* .swap-heads is the first div sibling, so :first-of-type matches no row —
       address the first row through the heads instead */
    .swap-heads + .swap-row .swap-arw::before,
    .swap-row:last-child .swap-arw::after { background: transparent; }
    /* the short run from the node into the resolved cell */
    .swap-arw i { position: absolute; left: calc(50% + 15px); right: -8px; height: 1px;
      background: linear-gradient(90deg, rgba(149,124,255,.5), rgba(149,124,255,.1));
      transform: scaleX(0); transform-origin: left center;
      transition: transform .5s var(--ease-expo); }
    .swap-arw b { position: relative; display: grid; place-items: center;
      width: 30px; height: 30px; border-radius: 50%; font-size: .74rem; font-weight: 800;
      color: #b9a6ff; background: #1d1738; border: 1px solid rgba(149,124,255,.28);
      transition: background .5s var(--ease-expo), border-color .5s ease,
                  color .5s ease, box-shadow .5s ease, transform .5s var(--ease-expo); }

    /* ---- the active row ---- */
    .swap-row.is-active .swap-was { opacity: .5; }
    .swap-row.is-active .swap-now {
      background: linear-gradient(120deg, rgba(112,86,214,.52), rgba(93,69,178,.3));
      border-color: rgba(169,146,255,.55); transform: translateX(3px); }
    .swap-row.is-active .swap-now::before { transform: scaleY(1); opacity: 1; }
    .swap-row.is-active .swap-arw i { transform: scaleX(1); }
    .swap-row.is-active .swap-arw b { color: #fff; border-color: #8f76ff;
      background: linear-gradient(140deg, #7a63d6, var(--purple));
      box-shadow: 0 0 0 6px rgba(143,118,255,.13); transform: scale(1.1); }

    /* Stacked, this panel loses the two things that made it readable: the
       column heads only work side by side, and once they are hidden the page
       is an unlabelled run of grey box, arrow, purple box, with 6px inside a
       pair and 8px between pairs — so which purple belongs to which grey is
       a guess. Each box now carries its own tag, and a pair is held together
       by being much closer to itself than to the next pair. */
    @media (max-width: 720px) {
      .swap-heads { display: none; }
      /* the arrow sits in the middle cell, so the distance inside a pair can
         never be zero — it is made as small as the arrow allows and the
         separation between pairs set to roughly twice it, which is what makes
         a pair read as one thing */
      .swap-row { grid-template-columns: 1fr; gap: 2px; }
      .swap-row + .swap-row { margin-top: clamp(58px, 12vw, 68px); }

      /* grid + order:-1 rather than ::before — .swap-now::before is already
         the accent rail down its left edge, and a pseudo-element can only be
         used once */
      .swap-was, .swap-now { display: grid; align-content: center; }
      .swap-was::after, .swap-now::after {
        order: -1; margin-bottom: 7px; font-family: var(--font-display);
        font-weight: 800; font-size: .58rem; letter-spacing: .16em;
        text-transform: uppercase; }
      .swap-was::after { content: "Without a system"; color: rgba(255,255,255,.42); }
      .swap-now::after { content: "With the Research Engine"; color: #cbbcff; }

      /* auto, not a fixed height: the cell was 18px with a 26px disc in it, so
         the disc overflowed 4px each way into boxes sitting 2px apart. Sized
         by its own content it can never overlap, whatever the disc becomes. */
      .swap-arw { height: auto; padding: 2px 0; }
      .swap-arw::before, .swap-arw::after, .swap-arw i { display: none; }
      .swap-arw b { transform: rotate(90deg); width: 26px; height: 26px; }
      .swap-row.is-active .swap-arw b { transform: rotate(90deg) scale(1.1); }
      .swap-row.is-active .swap-now { transform: none; }
    }

    /* ---- the automatic pass ----------------------------------------------
       The engine visibly works the rows: a charge runs down the spine, the node
       it reaches rings out, and light crosses the cell that just resolved.
       Positions are measured per step in initSwap, so this survives reflow. */
    .swap-pulse { position: absolute; top: 0; left: 0; z-index: 3; width: 7px; height: 7px;
      border-radius: 50%; opacity: 0; pointer-events: none; background: #cbbcff;
      box-shadow: 0 0 10px 3px rgba(149,124,255,.75), 0 0 22px 8px rgba(149,124,255,.3); }
    .swap-ring { position: absolute; width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid #a892ff; opacity: 0; pointer-events: none; }
    .swap-sheen { position: absolute; top: 0; bottom: 0; width: 42%; pointer-events: none;
      left: 0; opacity: 0; transform: translateX(-140%); mix-blend-mode: screen;
      background: linear-gradient(100deg, transparent, rgba(203,188,255,.32), transparent); }

    @media (max-width: 720px) {
      /* no spine to travel on once the rows stack */
      .swap-pulse { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .swap-was, .swap-now, .swap-now::before, .swap-arw i, .swap-arw b { transition: none; }
      .swap-pulse, .swap-ring, .swap-sheen { display: none; }
    }

    /* ============================================================
       RESEARCH — INSIDE THE ENGINE (the six layers)
       The section is the dashboard it describes: a rail of layers on the left,
       the real captured screen for the selected tab on the right. Light, but
       cooler than the section above it, so two light sections don't read as one.
       ============================================================ */
    .layers { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: linear-gradient(180deg, #fbf9ff 0%, #f1ecfb 54%, #f7f4ff 100%); }
    .layers-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .layers-orb { position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
      width: min(110vw,1000px); aspect-ratio: 1.5; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(93,69,178,.13), transparent 66%);
      filter: blur(34px); }

    .layers-head { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
      text-align: center; }
    .layers-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem;
      font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
      color: var(--purple); background: var(--purple-light); padding: 10px 18px;
      border-radius: 100px; }
    .layers-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.042em; line-height: 1.06;
      font-size: clamp(1.8rem,3.3vw,3.05rem); }
    .layers-h .line { display: block; overflow: hidden; padding-bottom: .05em; }
    .layers-h .line > span { display: block; }
    .layers-lede { margin: clamp(18px,2vw,26px) auto 0; max-width: 58ch;
      font-size: clamp(.98rem,1.1vw,1.08rem); line-height: 1.65; color: var(--text-secondary); }

    /* This section borrows .how-wrap / .hstep / .device / .onbs-stage wholesale,
       so only the differences live here. The shared foot sits under the screen
       rather than inside a per-panel .onbs, so the stage mustn't round its own
       bottom corners or a hairline of panel shows through. */
    .layers .how-wrap { margin-top: clamp(38px,4.4vw,64px); }
    .lay-onbs { border-radius: 0; }
    .lay-onbs .onbs-stage { background: #efeafd; }
    .layers .how-screen { min-height: 0; }
    /* every panel overlays the first, which stays in flow to hold the height */
    .layers .hshot[data-i="0"] { position: relative; opacity: 0; visibility: hidden; }
    .layers .hshot[data-i="0"].is-active { opacity: 1; visibility: visible; }
    .layers .hshot:not([data-i="0"]).is-active { position: absolute; }
    .lay-foot { border-radius: 0 0 16px 16px; }


    /* ============================================================
       RESEARCH — THE ELEPHANT IN THE ROOM
       Dark, so the objection lands with weight and the page breaks rhythm after
       two light sections. Column order matches the swap panel: old way left,
       product right. The two content columns differ in colour and weight, not
       just position, so a row still reads correctly on its own.
       ============================================================ */
    .elephant { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: #151029; color: #fff;
      border-top: 1px solid rgba(255,255,255,.07); }
    .eph-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .eph-orb { position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1080px); aspect-ratio: 1.6; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(122,99,214,.24), transparent 66%);
      filter: blur(40px); }
    .eph-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 78px 78px;
      mask-image: radial-gradient(ellipse at 50% 26%, #000 34%, transparent 82%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 26%, #000 34%, transparent 82%); }

    .eph-head { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto;
      text-align: center; }
    .eph-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem;
      font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
      color: #b9a6ff; background: rgba(122,99,214,.16); padding: 10px 18px;
      border-radius: 100px; border: 1px solid rgba(149,124,255,.24); }
    /* one line at every width — sized off the viewport so it fills the measure
       without wrapping */
    .eph-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.042em; line-height: 1.06;
      font-size: clamp(1.72rem,4.4vw,4.4rem); }
    .eph-h .line > span { white-space: nowrap; }
    /* On phones the clamp's floor is wider than the column: the quote measures
       13.4x its font-size at phone sizes, so at 397px it wanted 27.5px where
       only 27.1px fits and it broke onto two lines. Cap the size at the width
       that does fit. 13.8 is that measured ratio plus ~3% headroom; 40px is the
       section's own side margins. Re-measure if the quote is ever reworded. */
    @media (max-width: 719px) {
      .eph-h { font-size: min(clamp(1.72rem, 4.4vw, 4.4rem), calc((100vw - 40px) / 13.8)); }
    }
    .eph-h .line { display: block; overflow: hidden; padding-bottom: .05em; }
    .eph-h .line > span { display: block; }
    .eph-lede { margin: clamp(18px,2vw,26px) auto 0; max-width: 62ch;
      font-size: clamp(.98rem,1.1vw,1.08rem); line-height: 1.66;
      color: rgba(255,255,255,.66); }
    .eph-lede b { color: #fff; font-weight: 700; }
    .eph-cue { display: inline-flex; align-items: center; gap: 10px;
      margin: clamp(22px,2.5vw,34px) 0 0; font-size: .82rem; font-weight: 700;
      letter-spacing: .04em; color: rgba(255,255,255,.5); }
    .eph-cue i { display: grid; place-items: center; width: 22px; height: 22px;
      border-radius: 50%; font-style: normal; font-size: .82rem; color: #b9a6ff;
      background: rgba(149,124,255,.14); border: 1px solid rgba(149,124,255,.3); }

    /* ---- the table ---- */
    .eph-table { position: relative; z-index: 1; max-width: 1140px;
      margin: clamp(40px,4.6vw,66px) auto 0;
      /* clip, not hidden: both clip the children to the rounded corners, but
         hidden creates a scroll container, which would become the scrollport
         for the sticky mobile legend below and stop it sticking at all. */
      border-radius: calc(var(--radius) + 4px); overflow: clip;
      background: #1a1436; border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 44px 90px -46px rgba(0,0,0,.6); }
    .eph-heads, .eph-row { display: grid;
      grid-template-columns: minmax(0,.72fr) minmax(0,1fr) minmax(0,1.12fr);
      gap: clamp(12px,1.6vw,26px); }
    .eph-heads { align-items: center;
      padding-block: clamp(16px,1.8vw,22px);
      padding-inline: clamp(16px,1.9vw,26px);
      background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.08); }
    /* "Layer" names the rows, it isn't one of the two answers — so it stays a
       quiet label and the comparison happens between the two chips beside it.
       Same chips, marks and colour logic as the swap panel heads. */
    .eph-hl { font-size: .68rem; font-weight: 800; letter-spacing: .15em;
      text-transform: uppercase; color: rgba(255,255,255,.3); }
    .eph-hl.chip { display: inline-flex; align-items: center; gap: 9px; justify-self: start;
      padding: 9px 15px 9px 11px; border-radius: 100px; white-space: nowrap;
      font-size: clamp(.66rem,.74vw,.72rem); letter-spacing: .13em;
      background: rgba(255,255,255,.045); color: rgba(255,255,255,.46);
      border: 1px dashed rgba(255,255,255,.15); }
    .eph-hl.is-on { color: #fff;
      background: linear-gradient(120deg, #7a63d6, var(--purple));
      border: 1px solid rgba(178,158,255,.55);
      box-shadow: 0 16px 34px -14px rgba(93,69,178,.9),
                  inset 0 1px 0 rgba(255,255,255,.16); }
    .eph-hl.is-on .swap-mk { background: rgba(255,255,255,.2); }

    @media (max-width: 980px) {
      .eph-hl.chip { letter-spacing: .09em; padding: 8px 12px 8px 9px; }
    }

    /* ---- rows -------------------------------------------------------------
       Ten uniform rows read as a wall, so the table has a focus: the row at the
       reading line is lit and the rest recede. Real typographic hierarchy across
       the three columns does the rest — the layer anchors, the generic answer
       sits back, the product answer carries the weight. */
    .eph-body { position: relative; }
    .eph-row { position: relative;
      padding: clamp(16px,1.8vw,22px) clamp(16px,1.9vw,26px);
      border-bottom: 1px solid rgba(255,255,255,.05);
      transition: background .55s var(--ease-expo); }
    .eph-row:last-child { border-bottom: none; }
    /* the lit row */
    .eph-row.is-lit { background: linear-gradient(90deg,
      rgba(122,99,214,.09), rgba(122,99,214,.03) 62%, transparent); }

    .eph-layer { display: flex; align-items: baseline; gap: 10px; }
    .eph-idx { flex: none; font-family: var(--font-display); font-size: .6rem;
      font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,.22); transition: color .45s ease; }
    .eph-row.is-lit .eph-idx { color: #b9a6ff; }
    .eph-layer-t { font-family: var(--font-display); font-weight: 800;
      font-size: clamp(.92rem,1.02vw,1.02rem); letter-spacing: -.02em; line-height: 1.34;
      color: rgba(255,255,255,.82); transition: color .45s ease; }
    .eph-row.is-lit .eph-layer-t { color: #fff; }

    .eph-cell { transition: color .55s ease, opacity .55s ease; }
    /* the generic answer: readable, and visibly the lesser one */
    .eph-generic { font-size: clamp(.81rem,.89vw,.87rem); line-height: 1.56;
      color: rgba(255,255,255,.4); }
    .eph-row.is-lit .eph-generic { color: rgba(255,255,255,.5); }
    /* the product answer: larger, heavier, full white */
    .eph-amz { padding-left: clamp(12px,1.2vw,16px);
      font-size: clamp(.85rem,.95vw,.93rem); line-height: 1.56;
      font-weight: 500; color: rgba(255,255,255,.78); }
    .eph-row.is-lit .eph-amz { color: #fff; }

    /* ---- the rail: one continuous spine down the product column, with a glow
       that tracks the lit row. Positioned from a measured column edge in
       initElephant, since the grid decides where that column starts. ------- */
    .eph-rail { position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 2px;
      background: linear-gradient(180deg, rgba(168,146,255,.05), rgba(168,146,255,.22) 12%,
                  rgba(168,146,255,.22) 88%, rgba(168,146,255,.05));
      opacity: 0; pointer-events: none; }
    .eph-rail-glow { position: absolute; left: -3px; right: -3px; height: 84px;
      border-radius: 100px; opacity: 0;
      background: linear-gradient(180deg, transparent, #a892ff 42%, #a892ff 58%, transparent);
      box-shadow: 0 0 16px 4px rgba(168,146,255,.4); }

    /* Stacked: a 3-column table can't hold 10 rows of prose on a phone, so each
       row becomes a block.
       The two column names used to repeat inside every row, which meant 16
       uppercase micro-labels down the page — that was the clutter. The key now
       appears once, as the same two chips the desktop head uses, and stays put
       while the rows scroll under it. Each cell echoes its chip rather than
       naming it: dashed muted edge for the generic answer, solid purple for
       the product one, in the page's usual grey-is-sameness/purple-is-product
       logic and always in that order. */
    @media (max-width: 860px) {
      .eph-heads { display: flex; gap: 7px;
        position: sticky; top: 76px; z-index: 3;
        background: #1a1436; }
      /* the pair measured 362px in a 333px head and clipped, so the chips
         tighten rather than the legend scrolling or wrapping */
      .eph-hl.chip { font-size: .56rem; letter-spacing: .05em; gap: 6px;
        padding: 7px 10px 7px 7px; }
      .eph-hl.chip .swap-mk { width: 15px; height: 15px; }
      .eph-heads .eph-hl:not(.chip) { display: none; }   /* "Layer" */
      .eph-row { grid-template-columns: 1fr; gap: 10px;
        padding: clamp(17px,2.2vw,22px) clamp(16px,2.2vw,20px); }
      .eph-layer { font-size: 1rem; }
      .eph-cell::before { display: none; }
      /* no rail once the rows stack — the cells carry their own edges */
      .eph-rail { display: none; }
      .eph-generic { padding-left: 12px;
        border-left: 1px dashed rgba(255,255,255,.16); }
      .eph-amz { padding-left: 12px;
        border-left: 2px solid rgba(168,146,255,.5); }
      .eph-row.is-lit { background: rgba(122,99,214,.07); }
    }

    /* kept after the base .cost2-grid-cards rule: equal specificity, so source
       order decides, and these were previously landing before it */
    @media (max-width: 1080px) { .cost2-grid-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 620px)  { .cost2-grid-cards { grid-template-columns: 1fr; } }

    /* The desktop nav row was sized for three links; it is now seven, and each
       pair costs about 134px of row. At 1020px the seventh pushed "Book a Call"
       past the edge and gave the document a 46px horizontal scroll, so the fold
       point moves with the link count: measured, the row fits at 1120 and
       overflows at 1024, and 1140 leaves headroom for font-loading variance.
       Below it the toggle carries all seven. Kept as its own block so the 900px
       breakpoint's unrelated rules (stat cards, device grid) stay put. */
    @media (max-width: 1140px) {
      .nav-links { display: none; }
      .nav-cta .nav-signin, .nav-cta .cta { display: none; }
      .nav-toggle { display: flex; }
      .nav-cta { flex: 1; justify-content: flex-end; }
    }

    /* ============================================================
       FEEDBACK — HERO CARDS
       Three of the four claims are figures, so those cards put the numeral in
       the visual slot with a small diagram behind it. The white-label card gets
       a frame instead. Keeps the row consistent without reusing /research's
       four visuals a third time.
       ============================================================ */
    .fb-cards { position: relative; z-index: 2; max-width: 1240px;
      margin: clamp(34px,4vw,58px) auto 0;
      display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
      gap: clamp(14px,1.6vw,22px); }
    .fbc { position: relative; padding: clamp(20px,2.1vw,26px) clamp(18px,1.9vw,24px)
      clamp(22px,2.3vw,28px);
      border-radius: var(--radius); background: #fff; border: 1px solid var(--border);
      box-shadow: 0 24px 50px -34px rgba(28,20,60,.2);
      transition: transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo),
                  border-color .4s ease; }
@media (hover: hover) {
      .fbc:hover { transform: translateY(-5px); border-color: rgba(93,69,178,.24);
        box-shadow: 0 34px 64px -32px rgba(28,20,60,.3); }
    }
    .fbc h3 { margin: clamp(14px,1.5vw,18px) 0 0; font-family: var(--font-display);
      font-weight: 800; font-size: clamp(.94rem,1.05vw,1.02rem); letter-spacing: -.022em;
      line-height: 1.32; color: var(--ink); }

    /* Every tile has the same two zones — a figure and a diagram beneath it —
       so the white-label card reads as one of the set instead of a mockup that
       wandered in. Each diagram is the arithmetic of its own figure: five
       rounds with one left is exactly 80% fewer; a bar at a third of another is
       exactly 3x; a flag at halfway is exactly 50%. */
    .fbc-vis { position: relative; display: grid; grid-template-rows: 46px 18px;
      align-content: center; justify-items: center; align-items: center;
      gap: clamp(13px,1.4vw,17px); height: 118px; padding: 0 clamp(14px,1.5vw,18px);
      border-radius: 13px; overflow: hidden;
      background: linear-gradient(160deg, #fbfaff, #f2eeff);
      border: 1px solid rgba(93,69,178,.12); }
    .fbc-vis i, .fbc-vis b, .fbc-vis em, .fbc-vis s { font-style: normal; text-decoration: none; }

    /* the figure zone — a numeral, or the wordmark at the same optical weight */
    .fbv-num { display: inline-flex; align-items: baseline; gap: 1px; align-self: center;
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em;
      font-size: clamp(2rem,2.8vw,2.7rem); line-height: 1; color: var(--purple);
      font-variant-numeric: tabular-nums; }
    .fbv-num s { font-size: .46em; font-weight: 800; letter-spacing: -.02em; }
    .fbv-brand { display: grid; place-items: center; align-self: center;
      padding: 9px 18px; border-radius: 9px;
      background: linear-gradient(120deg, #6f57cc, var(--purple)); color: #fff;
      font-family: var(--font-display); font-weight: 800; font-size: clamp(.82rem,.95vw,.92rem);
      letter-spacing: .1em; text-transform: uppercase; line-height: 1;
      box-shadow: 0 12px 26px -14px rgba(93,69,178,.8); }

    /* the diagram zone — one fixed height, so all four figures sit on a line */
    .fbv-dia { display: flex; align-items: center; justify-content: center;
      width: 100%; height: 18px; }

    /* 01 — the review space, on the agency's own domain */
    .fbv-url { gap: 4px; padding: 4px 8px; border-radius: 100px; height: auto;
      background: #fff; border: 1px solid rgba(93,69,178,.14); width: auto; max-width: 100%; }
    .fbv-url em { width: 4px; height: 4px; border-radius: 50%; background: #d9d4ea; flex: none; }
    .fbv-url s { margin-left: 4px; font-size: .5rem; font-weight: 700; letter-spacing: .02em;
      color: var(--text-muted); white-space: nowrap; }

    /* 02 — five rounds, one left: the 80% drawn */
    .fbv-rounds { gap: 5px; }
    .fbv-rounds i { flex: 1; height: 8px; border-radius: 4px;
      background: rgba(93,69,178,.14); transform-origin: center; }
    .fbv-rounds i.on { background: linear-gradient(90deg, #8a72e0, var(--purple)); }

    /* 03 — one bar at a third of the other: the 3x drawn */
    .fbv-pace { flex-direction: column; gap: 5px; align-items: stretch; }
    .fbv-pace i { height: 6px; border-radius: 3px; transform-origin: left center; }
    .fbv-pace .was { background: repeating-linear-gradient(90deg, rgba(93,69,178,.2) 0 6px, transparent 6px 11px); }
    .fbv-pace .now { width: 33.3%; background: linear-gradient(90deg, #8a72e0, var(--purple)); }

    /* 04 — the flag at halfway: the 50% drawn */
    .fbv-close { position: relative; }
    .fbv-close .rail { position: absolute; left: 0; right: 0; top: 50%; height: 4px;
      margin-top: -2px; border-radius: 3px; background: rgba(93,69,178,.14); }
    .fbv-close .fill { position: absolute; left: 0; top: 50%; width: 50%; height: 4px;
      margin-top: -2px; border-radius: 3px; transform-origin: left center;
      background: linear-gradient(90deg, #8a72e0, var(--purple)); }
    .fbv-close .flag { position: absolute; left: 50%; top: 2px; width: 2px; height: 14px;
      border-radius: 2px; background: var(--purple); }

    /* the four titles occupied 1/2/1/2 lines and the row went ragged */
    .fbc h3 { min-height: 2.64em; text-wrap: balance; }

    /* the diagram advances a step under the cursor */
    .fbc .fbv-rounds i, .fbc .fbv-pace .now, .fbc .fbv-close .fill, .fbc .fbv-brand {
      transition: transform .5s var(--ease-expo), background .4s ease; }
@media (hover: hover) {
      .fbc:hover .fbv-rounds i.on { transform: scaleX(1.06); }
    }
@media (hover: hover) {
      .fbc:hover .fbv-pace .now { transform: scaleX(.82); }
    }
@media (hover: hover) {
      .fbc:hover .fbv-close .fill { transform: scaleX(.9); }
    }
@media (hover: hover) {
      .fbc:hover .fbv-brand { transform: translateY(-2px); }
    }

    @media (max-width: 1000px) { .fb-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 540px)  { .fb-cards { grid-template-columns: 1fr; } }
    @media (prefers-reduced-motion: reduce) {
      .fbc { transition: none; } .fbc:hover { transform: none; }
    }

    /* ---- .cost2 variant: four tall cards, each with a live UI --------------
       The icon tile is replaced by a stage running a small mock of the thing
       the card describes. Loops live in initCostFx. */
    .cost2--stages .c2-top { display: block; margin-bottom: clamp(18px,1.9vw,24px); }
    .c2-stage { position: relative; display: block; width: 100%; height: 104px;
      border-radius: 12px; overflow: hidden;
      background: rgba(255,255,255,.035);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
    .c2-stage i, .c2-stage b, .c2-stage s, .c2-stage em {
      font-style: normal; text-decoration: none; }

    /* 01 — the same note landing in four different places, never together */
    .fx-scatter .sc { position: absolute; display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 7px; border-radius: 6px; opacity: 0;
      background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
    .fx-scatter .sc b { font-size: .5rem; font-weight: 800; letter-spacing: .06em;
      text-transform: uppercase; color: rgba(255,255,255,.62); }
    .fx-scatter .sc em { width: 16px; height: 2px; border-radius: 2px;
      background: rgba(255,143,143,.6); }
    .fx-scatter .s1 { top: 12px; left: 11px; }
    .fx-scatter .s2 { top: 40px; right: 13px; }
    .fx-scatter .s3 { bottom: 13px; left: 22px; }
    .fx-scatter .s4 { top: 15px; right: 16px; }

    /* 02 — a comment that starts specific and ends up dashes */
    .fx-vague .vg-bub { position: absolute; left: 12px; right: 30px; top: 16px;
      display: grid; gap: 6px; padding: 10px 11px; border-radius: 9px 9px 9px 3px;
      background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
    .fx-vague .vg-l { display: block; height: 5px; border-radius: 3px;
      background: rgba(255,255,255,.5); transform-origin: left center; }
    .fx-vague .l2 { width: 78%; } .fx-vague .l3 { width: 52%; }
    .fx-vague .vg-q { position: absolute; right: 14px; bottom: 12px;
      font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
      line-height: 1; color: #ff8f8f; opacity: 0; }

    /* 03 — each round adds to the bar */
    .fx-rounds { display: grid; align-content: center; gap: 13px; padding: 0 14px; }
    .fx-rounds .rd-row { display: flex; gap: 6px; }
    .fx-rounds .rd { padding: 3px 8px; border-radius: 5px; opacity: .22;
      font-size: .55rem; font-weight: 800; letter-spacing: .06em;
      color: rgba(255,255,255,.8); background: rgba(255,255,255,.09); }
    .fx-rounds .rd-bar { display: block; height: 5px; border-radius: 3px;
      background: rgba(255,255,255,.09); overflow: hidden; }
    .fx-rounds .rd-bar b { display: block; width: 100%; height: 100%; border-radius: 3px;
      transform: scaleX(0); transform-origin: left center;
      background: linear-gradient(90deg, #f2564f, var(--coral)); }

    /* 04 — confidence, drawn as it falls */
    .fx-drop svg { position: absolute; inset: 14px 8px; width: calc(100% - 16px);
      height: calc(100% - 28px); overflow: visible; }
    .fx-drop .dp-base { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1.4;
      stroke-dasharray: 3 4; }
    .fx-drop .dp-line { fill: none; stroke: #ff8f8f; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .fx-drop .dp-end { position: absolute; right: 10px; bottom: 14px; width: 7px; height: 7px;
      border-radius: 50%; background: #ff8f8f; opacity: 0; }
    .cost2-lede { position: relative; z-index: 1; margin: clamp(18px,2vw,26px) auto 0;
      max-width: 70ch; text-align: center;
      font-size: clamp(.96rem,1.08vw,1.06rem); line-height: 1.66;
      color: rgba(255,255,255,.64); }
    .cost2-lede strong { color: #fff; font-weight: 700; }

    @media (max-width: 1080px) {
      .cost2--stages .cost2-grid-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 620px) {
      .cost2--stages .cost2-grid-cards { grid-template-columns: 1fr; }
    }

    /* ============================================================
       SECTION LABELS
       A capsule again — but a two-part one, not a tinted pill with a dingbat.
       The mark sits in its own well at the left, so the badge reads as a
       component with a head rather than an icon dropped into a chip; the label
       sits in the wider half. Everything is drawn in currentColor at different
       strengths, so one rule serves the coral sections, the purple ones, the
       footer lilac and the ink heroes without a second set.
       Every variant is listed because the per-section rules that set the old
       pill (.problem .eyebrow, .cost2-eyebrow, …) outrank a bare .eyebrow.
       ============================================================ */
    .eyebrow,
    .prob-eyebrow,
    .problem .eyebrow, .solution .eyebrow, .how .eyebrow, .diff .eyebrow,
    .demo-intro .eyebrow, .prob-head .prob-eyebrow,
    .ft-eyebrow, .tst-eyebrow, .cost-eyebrow, .brief-eyebrow, .rgap-eyebrow,
    .cost2-eyebrow, .rengine-eyebrow, .layers-eyebrow, .eph-eyebrow,
    .deliv-eyebrow, .faq-aside .eyebrow {
      display: inline-flex; align-items: center; gap: 0;
      padding: 3px 16px 3px 3px; border-radius: 100px;
      background: color-mix(in srgb, currentColor 7%, transparent);
      border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
      box-shadow: none;
      font-family: var(--font-display);
      font-size: clamp(.69rem,.76vw,.75rem); font-weight: 800;
      letter-spacing: .15em; text-transform: uppercase;
      transition: background .4s ease, border-color .4s ease;
    }
    /* the well: a rounded compartment holding the mark */
    .eb-mk { flex: none; display: grid; place-items: center;
      width: 26px; height: 26px; margin-right: 11px; border-radius: 100px;
      background: color-mix(in srgb, currentColor 15%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
    .eb-mk svg { width: 15px; height: 15px; }
    .eb-t { display: block; }

    /* The three section kickers that carry no mark — same capsule, but padded
       evenly: the list above reserves 3px on the left for the 26px .eb-mk
       well, which on a text-only label reads as lopsided. The tint comes from
       currentColor, so these work on the dark engine section and the light
       white-label and fanout ones without a second variant. */
    .eng-kicker, .wl-kicker, .fan-kicker {
      display: inline-flex; align-items: center;
      padding: 6px 16px; border-radius: 100px;
      background: color-mix(in srgb, currentColor 7%, transparent);
      border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
      font-size: clamp(.69rem,.76vw,.75rem);
      letter-spacing: .15em;
      transition: background .4s ease, border-color .4s ease;
    }

    /* the old text-glyph route is gone; nothing should render ::before now */
    .eyebrow::before, .prob-eyebrow::before, .ft-eyebrow::before,
    .tst-eyebrow::before, .cost-eyebrow::before, .brief-eyebrow::before,
    .rgap-eyebrow::before, .cost2-eyebrow::before, .rengine-eyebrow::before,
    .layers-eyebrow::before, .eph-eyebrow::before, .deliv-eyebrow::before {
      content: none; }

    /* Safari < 16.4 and older Chrome have no color-mix() — fall back to a flat
       tint so the capsule never renders as a bare transparent box. */
    @supports not (background: color-mix(in srgb, red 10%, transparent)) {
      .eyebrow, .prob-eyebrow, .ft-eyebrow, .tst-eyebrow, .cost-eyebrow,
      .brief-eyebrow, .rgap-eyebrow, .cost2-eyebrow, .rengine-eyebrow,
      .layers-eyebrow, .eph-eyebrow, .deliv-eyebrow,
      .eng-kicker, .wl-kicker, .fan-kicker {
        background: rgba(127,127,127,.1); border-color: rgba(127,127,127,.24); }
      .eb-mk { background: rgba(127,127,127,.16); box-shadow: none; }
    }

    /* /feedback's .brief carries a second paragraph — same measure as the lede
       but stepped back a shade, so the two read as a statement then its proof */
    .brief-p2 { margin: clamp(16px,1.8vw,24px) auto 0; max-width: 66ch;
      font-size: clamp(.96rem,1.06vw,1.04rem); line-height: 1.72;
      color: var(--text-muted); }
    .brief-p2 .bt { color: var(--ink); font-weight: 600; }

    /* ============================================================
       FEEDBACK — THE FIX
       The solution beat, so purple returns here. Section 03 above it is a
       centred statement block; this one differentiates by resolving into a
       single outcome plate split into three, which is also what the copy is —
       three sentences, not a paragraph.
       ============================================================ */
    .fix { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: linear-gradient(180deg, #ffffff 0%, #f4f0fd 54%, #fbf9ff 100%); }
    .fix-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .fix-orb { position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
      width: min(110vw,980px); aspect-ratio: 1.5; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(93,69,178,.15), transparent 66%);
      filter: blur(34px); }

    .fix-head { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
      text-align: center; }
    .fix-eyebrow { color: var(--purple); }
    .fix-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.042em; line-height: 1.06;
      font-size: clamp(1.8rem,3.3vw,3.05rem); }
    .fix-h .line { display: block; overflow: hidden; padding-bottom: .05em; }
    .fix-h .line > span { display: block; }
    .fix-lede { margin: clamp(18px,2vw,26px) auto 0; max-width: 68ch;
      font-size: clamp(.98rem,1.1vw,1.08rem); line-height: 1.7; color: var(--text-secondary); }
    .fix-lede strong { color: var(--ink); font-weight: 700; }

    /* The three statements are a chain — context causes clarity causes speed —
       so they're set as a progression with a charge running through them, not
       three parallel chips. The plate takes the brand gradient: this is the one
       place on the page where the product claims the outcome. */
    .fix-flow { position: relative; z-index: 1; max-width: 1060px;
      margin: clamp(40px,4.6vw,66px) auto 0;
      padding: clamp(34px,3.6vw,46px) clamp(24px,2.6vw,38px) clamp(30px,3.2vw,40px);
      border-radius: calc(var(--radius) + 4px); overflow: hidden; isolation: isolate;
      background: linear-gradient(118deg, #6f57cc 0%, var(--purple) 58%, #4c3a96 100%);
      box-shadow: 0 40px 84px -40px rgba(93,69,178,.85),
                  inset 0 1px 0 rgba(255,255,255,.14); }
    /* a faint grid, so the plate has some tooth under the gradient */
    .fix-flow::before { content: ""; position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 62px 62px;
      mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%); }

    /* The connectors sit only in the gaps between nodes — geometry is measured
       in initFix and written as px, because a single rail spanning node centres
       ran straight under the tiles. Each one is a dotted route that fills as the
       handoff happens, with a chevron at the arrival end: the link is made, not
       just drawn. */
    .ff-links { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .ff-link { position: absolute; height: 6px; opacity: 0; }
    .ff-link::before { content: ""; position: absolute; inset: 2px 0;
      border-radius: 2px;
      background-image: repeating-linear-gradient(90deg,
        rgba(255,255,255,.34) 0 3px, transparent 3px 8px); }
    .ff-fill { position: absolute; inset: 2px 0; border-radius: 2px;
      transform: scaleX(0); transform-origin: left center;
      background: linear-gradient(90deg, rgba(255,255,255,.5), #fff); }
    /* a chevron drawn from two borders, so there's no extra glyph to load */
    .ff-arrow { position: absolute; right: -1px; top: 50%; width: 6px; height: 6px;
      margin-top: -3px; opacity: 0;
      border-top: 1.6px solid #fff; border-right: 1.6px solid #fff;
      transform: rotate(45deg); transform-origin: center; }
    .ff-charge { position: absolute; width: 9px; height: 9px; border-radius: 50%;
      background: #fff; opacity: 0;
      box-shadow: 0 0 14px 5px rgba(255,255,255,.55); }

    .ff-steps { position: relative; z-index: 2; display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2vw,30px); }
    .ff-step { display: grid; justify-items: center; gap: clamp(16px,1.8vw,22px);
      text-align: center; }
    /* the node IS the mark — no separate icon tile stacked beside a label */
    .ff-node { display: grid; place-items: center; width: 52px; height: 52px;
      border-radius: 15px; color: #fff;
      background: rgba(255,255,255,.12);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
      transition: background .5s var(--ease-expo), box-shadow .5s ease; }
    .ff-node svg { width: 25px; height: 25px; }
    .ff-step.is-lit .ff-node { background: rgba(255,255,255,.96); color: var(--purple);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 7px rgba(255,255,255,.12); }
    .ff-step p { margin: 0; font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1rem,1.24vw,1.22rem); letter-spacing: -.026em; line-height: 1.3;
      color: rgba(255,255,255,.78); transition: color .5s ease; text-wrap: balance; }
    .ff-step.is-lit p { color: #fff; }

    @media (max-width: 880px) {
      .ff-links { display: none; }
      .ff-steps { grid-template-columns: 1fr; gap: clamp(22px,4vw,30px); }
      .ff-step { grid-template-columns: auto 1fr; justify-items: start;
        align-items: center; text-align: left; }
    }

    /* ============================================================
       FEEDBACK — INTRODUCING FEEDBACK FLOW
       Dark ground: the three captures are light app UI and carry far better
       against it than they would on another white section. The device frame and
       shot walker are the shared components.
       ============================================================ */
    .fbflow { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: #14102a; color: #fff;
      border-top: 1px solid rgba(255,255,255,.07); }
    .fbflow-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .fbflow-orb { position: absolute; top: -12%; left: 50%; transform: translateX(-50%);
      width: min(120vw,1100px); aspect-ratio: 1.5; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(122,99,214,.3), transparent 66%);
      filter: blur(44px); }
    .fbflow-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 74px 74px;
      mask-image: radial-gradient(ellipse at 50% 12%, #000 26%, transparent 76%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 12%, #000 26%, transparent 76%); }

    .fbflow-head { position: relative; z-index: 1; max-width: 940px; margin: 0 auto;
      text-align: center; }
    .fbflow-eyebrow { color: #b9a6ff; }
    .fbflow-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.046em; line-height: 1.02;
      font-size: clamp(2.3rem,5vw,4.6rem); }
    .fbflow-h .line { display: block; overflow: hidden; padding-bottom: .06em; }
    .fbflow-h .line > span { display: block; }
    .fbflow-h .txt-accent { color: #b9a6ff; }
    /* The byline is the highlighted capsule. No measure cap and no nowrap: with
       the cap gone it forms one line wherever there's room and breaks
       gracefully where there isn't, rather than overflowing a fixed pill. */
    .fbflow-lede { display: inline-flex; align-items: center; gap: 13px;
      max-width: min(100%, 1040px); width: auto;
      margin: clamp(18px,2vw,26px) auto 0;
      padding: 13px clamp(20px,2vw,28px);
      border-radius: 100px; text-align: left;
      font-size: clamp(.94rem,1.06vw,1.02rem); line-height: 1.5; font-weight: 600;
      color: rgba(255,255,255,.74);
      background: linear-gradient(120deg, rgba(122,99,214,.34), rgba(122,99,214,.14));
      border: 1px solid rgba(169,146,255,.34);
      box-shadow: 0 20px 46px -24px rgba(93,69,178,.9),
                  inset 0 1px 0 rgba(255,255,255,.12); }
    .fbflow-lede b { color: #fff; font-weight: 800; }
    /* Same one-line fit as .built-lead.is-hl, and for the same reason: this is
       an inline-flex row, so left to wrap the sentence and its <b> broke into
       two ragged columns rather than filling the pill. Room here is the
       viewport less --margin-outer on each side. Re-measure if reworded. */
    .fbflow-lede { white-space: nowrap; }
    .fbflow-lede {
      font-size: min(clamp(.94rem,1.06vw,1.02rem),
                     calc(min(100vw - 2 * clamp(20px,5vw,80px), 1040px) / 28.5)); }
    .fbflow-lede .fl-pip { flex: none; width: 8px; height: 8px; border-radius: 50%;
      background: #cbbcff; box-shadow: 0 0 0 4px rgba(203,188,255,.18); }

    /* the caption stays a plain line — a second capsule stacked under the first
       would read as two competing badges */
    .fbflow-cap { margin: clamp(22px,2.4vw,32px) auto 0; max-width: 60ch;
      font-size: clamp(.86rem,.95vw,.92rem); line-height: 1.6; font-weight: 600;
      color: rgba(255,255,255,.52); }

    .fbflow-stage { position: relative; z-index: 1; max-width: 1000px;
      margin: clamp(34px,3.8vw,54px) auto 0; }
    .fbflow-stage .device { max-width: none; margin: 0;
      box-shadow: 0 60px 120px -50px rgba(0,0,0,.75); }
    .fbflow-stage .onbs { border-radius: 0 0 16px 16px; }

    /* ============================================================
       FEEDBACK — HOW IT WORKS
       Same language as the home page's step list: oversized muted numerals, a
       hairline between rows, and an accent bar that fills on the row you're
       reading. Laid out wide (numeral / name / description) rather than as a
       narrow column, because there's no device beside it.
       ============================================================ */
    .fbsteps { position: relative; overflow: clip; isolation: isolate;
      padding: clamp(84px,9vw,140px) var(--margin-outer) clamp(88px,9.5vw,146px);
      background: linear-gradient(180deg, #ffffff 0%, #f6f3ff 56%, #fbf9ff 100%); }
    .fbsteps-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .fbsteps-orb { position: absolute; top: 2%; left: 50%; transform: translateX(-50%);
      width: min(110vw,980px); aspect-ratio: 1.6; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(93,69,178,.12), transparent 66%);
      filter: blur(34px); }

    .fbsteps-head { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto;
      text-align: center; }
    .fbsteps-eyebrow { color: var(--purple); }
    .fbsteps-h { margin: clamp(20px,2.4vw,30px) 0 0; font-family: var(--font-display);
      font-weight: 800; letter-spacing: -.044em; line-height: 1.06;
      font-size: clamp(1.72rem,3.9vw,3.5rem); }
    .fbsteps-h .line { display: block; overflow: hidden; padding-bottom: .05em; }
    .fbsteps-h .line > span { display: block; }

    /* Borrows .how-wrap / .hstep / .device wholesale, so only the differences
       live here. The shared foot sits under the screen rather than inside a
       per-panel .onbs, so the stage must not round its own bottom corners. */
    .fbsteps .how-wrap { margin-top: clamp(38px,4.4vw,64px); }
    .fb-onbs { border-radius: 0; }
    .fb-onbs .onbs-stage { background: #efeafd; }
    .fbsteps .how-screen { min-height: 0; }
    /* every panel overlays the first, which stays in flow to hold the height */
    .fbsteps .hshot[data-i="0"] { position: relative; opacity: 0; visibility: hidden; }
    .fbsteps .hshot[data-i="0"].is-active { opacity: 1; visibility: visible; }
    .fbsteps .hshot:not([data-i="0"]).is-active { position: absolute; }
    .fb-foot { border-radius: 0 0 16px 16px; }


    /* ============================================================
       PAGE OPENING — /onboarding, /research, /feedback
       All three heroes are .onb-hero and had no entrance at all: type simply
       appeared. One shared opening now runs them, with a scan line passing down
       the hero as the lines rise — the same measurement idiom as the reticle
       cursor and the section marks, rather than a generic fade-up.
       Both elements are injected by initPageOpen, so the three pages' markup
       stays clean.
       ============================================================ */
    .onb-hero { position: relative; }
    .po-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px;
      z-index: 4; pointer-events: none; opacity: 0;
      background: linear-gradient(90deg, transparent,
        rgba(93,69,178,.5) 16%, rgba(93,69,178,.95) 50%, rgba(93,69,178,.5) 84%, transparent);
      box-shadow: 0 0 22px 3px rgba(93,69,178,.3); }
    /* a soft bloom trailing the scan, so the pass has weight */
    .po-glow { position: absolute; left: 0; right: 0; top: 0; height: 180px;
      z-index: 3; pointer-events: none; opacity: 0;
      background: linear-gradient(180deg, rgba(93,69,178,.14), transparent);
      mask-image: linear-gradient(180deg, #000, transparent);
      -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
    @media (prefers-reduced-motion: reduce) { .po-scan, .po-glow { display: none; } }

    /* ============================================================
       PAGE INTRO — the title card
       A per-page card carrying the page's own name, which lifts away and hands
       off into the hero opening. Injected by initPageIntro so the three pages'
       markup stays clean. Skipped on the pageview where the preloader ran, or
       you'd sit through two panels back to back.
       ============================================================ */
    .pintro { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
      background: #14102a; color: #fff; overflow: hidden;
      -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
    .pintro-bg { position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 70% 55% at 50% 46%, rgba(122,99,214,.4), transparent 70%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/74px 74px,
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/74px 74px; }
    .pintro-in { position: relative; display: grid; justify-items: center;
      gap: clamp(14px,1.8vw,22px); padding: 0 24px; text-align: center; }
    /* the index reads as a step in the product, not a page number */
    .pintro-idx { display: inline-flex; align-items: center; gap: 12px;
      font-family: var(--font-display); font-size: clamp(.68rem,.76vw,.74rem);
      font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
      color: rgba(203,188,255,.85); }
    .pintro-idx::before { content: ""; width: 30px; height: 2px; border-radius: 1px;
      background: linear-gradient(90deg,
        currentColor 0 19px, transparent 19px 24px, currentColor 24px 30px); }
    .pintro-t { display: block; overflow: hidden; padding-bottom: .06em; }
    .pintro-t > span { display: block; font-family: var(--font-display); font-weight: 800;
      letter-spacing: -.05em; line-height: .98;
      font-size: clamp(3rem,10vw,9rem); }
    .pintro-rule { display: block; width: min(74vw, 520px); height: 1px;
      background: linear-gradient(90deg, transparent, rgba(203,188,255,.8), transparent);
      transform: scaleX(0); }
    @media (prefers-reduced-motion: reduce) { .pintro { display: none; } }

    /* ============================================================
       PRICING — elevated
       Three cards with tick lists is the default SaaS layout, so the lift here
       is mechanism rather than restyling: the price rolls digit by digit, the
       cards carry a cursor-tracked light and a drawn perimeter, the ticks draw
       themselves in, and pointing at a tier lights the features it adds over
       the tier to its left.
       ============================================================ */

    /* ---- the odometer ------------------------------------------------------
       One masked column per digit, each holding 0-9, rolled to position.
       Needs tabular numerals or the columns change width as digits change. */
    /* The outer .pr-amt-mask existed for the old text swap. Each column now
       masks itself, so leaving that second crop in place shaves the glyph tops
       off — the display face overshoots its em box. Block flex, not inline
       flex: an inline-level flex box aligns on its first item's baseline and
       rides up out of the mask. */
    .pr-amt-mask.is-odo-host { height: auto; overflow: visible; }
    /* proportional figures, not tabular: at this size a tabular 1 leaves a hole
       beside itself. Each column is instead set to its own digit's advance and
       tweens that width as it rolls. */
    .pr-amt.is-odo { display: flex; align-items: flex-start; line-height: 1;
      font-variant-numeric: normal; }
    /* The column is set to the advance of the digit ON SHOW, but all ten live
       in the strip and a 0 is 30% wider than a 1. So the clip is vertical only:
       clip-path trims top and bottom at the box edge and leaves horizontal
       slack, and each digit centres itself in the column. */
    .pr-dig { display: block; height: 1.06em; overflow: visible;
      clip-path: inset(0 -.24em); font-style: normal;
      letter-spacing: normal; margin-right: -.055em; }
    .pr-amt.is-odo .pr-dig:last-child { margin-right: 0; }
    .pr-dig-track { display: block; font-style: normal; will-change: transform; }
    .pr-dig b { display: block; height: 1.06em; line-height: 1.06;
      font-weight: inherit; font-style: normal; text-align: center; }

    /* ---- card presence ---- */
    .pr-card { position: relative; isolation: isolate; overflow: hidden;
      --mx: 50%; --my: 0%; }
    /* content must be positioned to paint above the z-index:0 glow — but never
       the badge, which owns its own absolute placement */
    .pr-card > *:not(.pr-glow):not(.pr-trace):not(.pr-badge) { position: relative; z-index: 1; }
    .pr-card > .pr-badge { z-index: 3; }
    .pr-glow { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
      background: radial-gradient(260px circle at var(--mx) var(--my),
                  rgba(93,69,178,.16), transparent 70%);
      transition: opacity .5s ease; }
    .pr-card.is-featured .pr-glow {
      background: radial-gradient(280px circle at var(--mx) var(--my),
                  rgba(185,166,255,.2), transparent 70%); }
@media (hover: hover) {
      .pr-card:hover .pr-glow { opacity: 1; }
    }
    /* an SVG rect rather than pseudo-element edges, so it follows the radius */
    .pr-trace { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
      overflow: visible; pointer-events: none; }
    .pr-trace rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
      rx: 21px; ry: 21px; fill: none; stroke: var(--purple); stroke-width: 1.4; opacity: 0; }
    .pr-card.is-featured .pr-trace rect { stroke: #b9a6ff; }

    /* ---- the tier diff ----
       Pointing at a tier dims what it shares with the tier to its left and
       lights what it adds. Set difference on the plans' own copy — nothing is
       inferred about inclusion. */
    .pr-feats li { transition: opacity .45s var(--ease-expo), transform .45s var(--ease-expo); }
    .pr-card.is-diff .pr-feats li.is-same { opacity: .38; }
    .pr-card.is-diff .pr-feats li.is-new { transform: translateX(3px); }
    .pr-card.is-diff .pr-feats li.is-new .pr-tick {
      background: var(--purple); color: #fff; border-color: var(--purple); }
    .pr-card.is-featured.is-diff .pr-feats li.is-new .pr-tick {
      background: #fff; color: var(--purple); border-color: #fff; }
    .pr-tick { transition: background .4s ease, color .4s ease, border-color .4s ease; }

    @media (prefers-reduced-motion: reduce) {
      .pr-glow, .pr-trace, .pr-feats li, .pr-tick { transition: none; }
      .pr-card.is-diff .pr-feats li.is-same { opacity: 1; }
      .pr-card.is-diff .pr-feats li.is-new { transform: none; }
    }

    /* ---- CTA bar: two full-width buttons rather than two cut-off ones ---- */
    @media (max-width: 560px) {
      .cta-bar { padding-left: clamp(20px,5vw,28px); padding-right: clamp(20px,5vw,28px); }
      .cta-bar-actions { flex-direction: column; width: 100%; }
      .cta-bar-actions .cta { width: 100%; flex: 0 0 auto; }
    }

    /* ============================================================
       MOBILE — THE PRODUCT MOCK
       The demo section is a real interface built in DOM, not a screenshot, so
       it can genuinely reflow. On phones the sidebar goes, the screens stop
       being absolutely positioned (so the stack is as tall as its tallest
       screen instead of clipping), and the wide tables break into rows.
       ============================================================ */
    @media (max-width: 900px) {
      /* minmax(0,1fr), not 1fr: a 1fr track's automatic minimum is
         min-content, which the tables inside blow straight past */
      .app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
      .app-side { display: none; }
      /* one grid cell holds all three screens: they still overlay for the
         crossfade, but the container now takes its height from them.
         minmax(0,1fr) matters — a bare auto track sizes to the widest
         screen's max-content and pushes straight back out of the frame. */
      .screens { display: grid; grid-template-columns: minmax(0, 1fr); }
      .screen { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; }
      /* the swap is a 0.13s hard cut anyway, so keeping the inactive screens
         out of the box means the frame is as tall as what's on show rather
         than as tall as the tallest screen */
      .screen:not(.is-active) { display: none; }
    }
    @media (max-width: 700px) {
      .screen { padding: 13px; }
      .app-top { padding: 10px 14px; gap: 10px; }
      .device-bar { padding-top: 10px; padding-bottom: 10px; }
      .app-user .u { display: none; }
      .ui-head { flex-direction: column; align-items: stretch; gap: 10px;
        margin-bottom: 10px; }
      .ui-head-side { justify-content: flex-start; }
      /* the second screen carries four filter chips, which wrap to three rows
         and cost 70px of the one-screen budget. Two chips read as a filter bar
         just as well. */
      .ui-filters { flex-wrap: wrap; margin-bottom: 9px; }
      .ui-filters > *:nth-child(n+3) { display: none; }
      /* five columns can't be five columns in 350px. The first cell takes the
         whole row as the row's title, the middle cells pair up under it, and
         the action gets its own full-width line. */
      .ui-tr--head { display: none; }
      .ui-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 11px;
        padding-top: 13px; padding-bottom: 13px; }
      .ui-tr > span:first-child,
      .ui-tr > span:last-child { grid-column: 1 / -1; }
      .ui-tr > span:last-child { align-items: flex-start; }
      .ui-btn { white-space: normal; }
      /* five tabs across 340px would be 60px each and the labels don't fit.
         Three columns is the widest that still holds "Demographics", and it
         costs two rows rather than three. */
      .ui-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
        margin-bottom: 12px; }
      .ui-tab { padding: 8px 6px; font-size: .7rem; }
      /* A stacked row is ~5x the height of a table row, so the full list turns
         the mock into a page of its own. The frame has to read in one screen:
         at 390x844 the chrome takes 113px, which leaves ~490px of screen, so
         two rows — plus tighter padding below — lands the whole device around
         610px with the section heading still above it. */
      .ui-table > .ui-tr:nth-child(n+4) { display: none; }
      .ui-tr { padding-top: 9px; padding-bottom: 9px; }
      /* the suggestion screen is the tallest of the three: two cards make the
         same point as four */
      .ui-sug ~ .ui-sug ~ .ui-sug { display: none; }
    }

    /* ---- remaining narrow-width fixes ------------------------------------ */
    /* The stepper stays one row. At full length the three pills need 492px, so
       below 540px — where that stops fitting — they carry short labels, which
       fit at the desktop type size with room to spare and read the same way as
       the hero's pipeline chips. The size only tapers on the narrowest phones. */
    .dshort { display: none; }
    @media (max-width: 540px) {
      .demo-steps { flex-wrap: nowrap; justify-content: center; }
      .dstep { white-space: nowrap; padding-left: 13px; padding-right: 13px;
        font-size: clamp(0.69rem, 3.45vw, 0.84rem); }
      /* em, so the numeral tapers with the label instead of staying 10.88px */
      .dstep .dnum { font-size: .81em; }
      .dlong { display: none; }
      .dshort { display: inline; }
    }
    /* at the very narrowest widths the suggestion copy wraps one line further
       per card, which was the last 23px between the mock and one screen */
    @media (max-width: 345px) {
      .ui-sug { padding: 10px 12px; gap: 11px; }
      .ui-sug-b p { font-size: .68rem; line-height: 1.45; margin-top: 4px; }
    }
    @media (max-width: 420px) {
      /* the fake address bar was pushing the browser chrome wider than itself */
      .device-bar .url { min-width: 0; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; font-size: .68rem; padding-left: 8px; padding-right: 8px; }
      .device-bar { gap: 6px; padding-left: 11px; padding-right: 11px; }
    }

    /* the 340px floor keeps the desktop frame steady between shots of
       different heights; on a phone the shots are ~200px and it just leaves
       a band of empty white under them */
    @media (max-width: 700px) {
      .how-screen { min-height: 0; }
    }

    /* ---- eyebrows: one line on phones -----------------------------------
       Three labels run to 37-39 characters ("The research engine for Amazon
       agencies", "The Feedback Flow for Amazon Agencies", "Let's address the
       elephant in the room") and wrapped inside their capsule below ~560px.
       The capsule's own chrome is fixed (26px mark + 11px gutter + padding),
       so only the text can give: it scales with the viewport and gives up a
       third of its tracking, which measured as the best trade between keeping
       the label's letter-spaced character and keeping it on one line. */
    @media (max-width: 560px) {
      .eyebrow .eb-t, .brief-eyebrow .eb-t, .prob-eyebrow .eb-t {
        white-space: nowrap;
        font-size: clamp(.52rem, 2.6vw, .75rem);
        letter-spacing: .10em; }
    }
    /* Below ~360px the type is at its floor and the capsule still ran ~6px
       past its column, so the fixed chrome gives up the difference instead:
       the mark's well and its gutter, not the label. */
    @media (max-width: 365px) {
      .eyebrow, .brief-eyebrow, .prob-eyebrow { padding-right: 12px; }
      .eb-mk { width: 22px; height: 22px; margin-right: 8px; }
      .eb-mk svg { width: 13px; height: 13px; }
    }

    /* ---- hero eyebrow: one line on phones -------------------------------
       "White-labeled OS for Amazon Agencies" is 36 uppercase characters with
       label tracking — it needs 362px and wraps below a 402px viewport. The
       size tracks the viewport instead of breaking, and nowrap keeps it a
       single capsule. Above 402px the clamp is already at its desktop cap. */
    @media (max-width: 420px) {
      .hero .badge { white-space: nowrap;
        font-size: clamp(0.5rem, 2.6vw, var(--text-label));
        padding-left: 13px; padding-right: 13px; gap: 6px; }
    }