/* =========================================================================
   TTM SITE NEXT — LAB · Home v2 assembly stylesheet

   This file ONLY consolidates the <style> blocks of the approved
   components, verbatim, one banner per source file. No redesigns.
   Class-collision audit: hero-* / stmt-* / uc-* / tt-* / cta-* prefixes do
   not collide. Shared generic rules ([data-reveal], html/body overflow-x)
   repeat identically across sources and are kept as-is. The two SVG symbol
   id collisions (statement's g-bulb / g-people vs the hero's variants) are
   resolved in home.html's merged defs as s-bulb / s-people.
   ========================================================================= */


/* ================================================================
   HEADER v4 (from header.html)
   ================================================================ */

  /* =========================================================================
     COMPONENT: site header v4 (the shippable part)

     Chris on v3: "looks good" — pill, bulb-as-Home and the three links are
     approved. His one instruction: strip the alternative-preview link and Book a Working
     Session from the header entirely, at every breakpoint. Those CTAs will
     live in page content (hero, closing sections) when pages are built.

     What the header is now, in full:

       1. A floating bar, detached from the viewport edges and
          pointer-transparent except where real controls sit.
       2. The bulb mark IS home: a circular glass button, aria-label Home.
       3. Exactly three destinations in a rounded glass pill: Product,
          Company, Learn. A sliding indicator glides behind the hovered or
          focused item with a soft brand glow, and labels roll to a brighter
          copy of themselves. The indicator parks behind the active page.
       4. The theme toggle, always visible. That is the whole bar.
       5. Mobile collapses the pill to a compact bar (bulb, theme,
          hamburger). The three links open as a dropdown card below the bar,
          not a full-screen overlay. The dropdown holds only the three page
          links.

     Scroll behavior (unchanged from v3): past 8px the pill compacts
     slightly (shorter, tighter, denser glass). Purely vertical, so the
     indicator geometry never has to re-measure.
     ========================================================================= */

  html[data-theme="dark"] {
    --ind-glow-1: rgba(0, 151, 207, .38);
    --ind-glow-2: rgba(0, 151, 207, .16);
  }
  html[data-theme="light"] {
    --ind-glow-1: rgba(0, 151, 207, .22);
    --ind-glow-2: rgba(0, 151, 207, .10);
  }

  .site-head {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    pointer-events: none;              /* page stays clickable around the pill */
  }
  .site-head .head-bar, .site-head .nav-drop { pointer-events: auto; }

  .head-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s4);
    max-width: calc(100vw - 2 * var(--s3));
    transition: transform var(--dur) var(--ease);
  }
  .site-head.is-compact .head-bar { transform: translateY(-4px); }

  /* shared glass for the floating pieces */
  .glass {
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-1);
  }

  /* ---- the bulb: circular home button ---- */
  .home-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }
  .home-btn img { display: block; width: 30px; height: auto; }
  .home-btn:hover {
    transform: translateY(-1px);
    border-color: var(--cyan);
    box-shadow: var(--inner-hi), var(--sh-1), 0 0 18px 0 var(--ind-glow-2);
  }

  /* ---- the pill: three destinations + sliding indicator ---- */
  .pill-nav {
    position: relative;
    border-radius: var(--r-pill);
    padding: var(--s1);
    transition: padding var(--dur) var(--ease);
  }
  .site-head.is-compact .pill-nav { padding: 3px; }
  .pill-nav ul {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pill-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--s4);
    border-radius: var(--r-pill);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 560;
    letter-spacing: .005em;
    color: var(--muted);
    transition: color var(--dur) var(--ease);
  }
  .pill-nav a.is-active { color: var(--ink); font-weight: 640; }

  /* rolling label: quiet copy on top, bright copy rolls up on hover */
  .roll { position: relative; display: block; overflow: hidden; height: 1.3em; line-height: 1.3; }
  .roll > span { display: block; transition: transform var(--dur) var(--ease); }
  .roll .r-bright { position: absolute; inset: 100% 0 auto 0; color: var(--ink); font-weight: 620; }
  .pill-nav a:hover .roll > span,
  .pill-nav a:focus-visible .roll > span { transform: translateY(-100%); }

  /* the indicator: the only signature. soft tint disc, soft brand glow */
  .pill-ind {
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 0;
    z-index: 0;
    height: 44px;
    width: 0;
    border-radius: var(--r-pill);
    background: var(--e2);
    box-shadow: var(--inner-hi),
      0 0 18px 0 var(--ind-glow-1),
      0 0 44px 4px var(--ind-glow-2);
    opacity: 0;
    transform: translateY(-50%);
    transition: transform var(--dur) var(--ease), width var(--dur) var(--ease),
      opacity 240ms var(--ease);
  }
  .pill-nav.has-ind .pill-ind { opacity: 1; }

  /* ---- bar actions: theme toggle, hamburger ---- */
  .head-actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hair);
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--inner-hi);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .icon-btn:hover { border-color: var(--cyan); transform: translateY(-1px); }
  .icon-btn svg { width: 19px; height: 19px; }
  .icon-btn .icon-moon { display: none; }
  html[data-theme="light"] .icon-btn .icon-sun { display: none; }
  html[data-theme="light"] .icon-btn .icon-moon { display: block; }

  .menu-btn { display: none; }
  .menu-btn svg { width: 20px; height: 20px; }
  /* shared site.css sets `svg { display: block }`, and an author rule beats
     the UA's `[hidden] { display: none }` whatever its specificity — so the
     menu button was painting the hamburger AND the close cross at the same
     time on phones, right beside the hero title gap under review. Restore
     the attribute's meaning for the header icons only; the root cause is in
     the frozen shared stylesheet and is left for that file's owner. */
  .site-head svg[hidden] { display: none; }

  /* ---- mobile dropdown card (reactbits style, not an overlay) ---- */
  .nav-drop {
    position: absolute;
    top: calc(100% + var(--s2));
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(320px, calc(100vw - 2 * var(--s4)));
    border-radius: var(--r3);
    padding: var(--s2);
    opacity: 0;
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  }
  .nav-drop[hidden] { display: none; }
  .nav-drop.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
  .nav-drop ul { list-style: none; margin: 0; padding: 0; }
  .nav-drop a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--s4);
    border-radius: var(--r2);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .nav-drop a:hover { color: var(--ink); background: var(--e1); }
  .nav-drop a.is-active {
    color: var(--ink);
    background: var(--e2);
    box-shadow: var(--inner-hi), 0 0 16px 0 var(--ind-glow-2);
  }

  /* ---- breakpoints ---- */
  @media (max-width: 880px) {
    .pill-nav { display: none; }
    .menu-btn { display: inline-flex; }
  }
  @media (max-width: 560px) {
    .head-bar { gap: var(--s1); margin-top: var(--s3); }
    .home-btn { width: 44px; height: 44px; }
    .home-btn img { width: 27px; }
  }

  /* =========================================================================
     LAB FRAME (preview-only presentation, not part of the component)
     ========================================================================= */
  .skip-link {
    position: fixed;
    top: var(--s3); left: var(--s3);
    z-index: 80;
    padding: var(--s3) var(--s4);
    border-radius: var(--r1);
    background: var(--e3);
    color: var(--ink);
    font-weight: 640;
    font-size: .9rem;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 200ms var(--ease);
  }
  .skip-link:focus-visible { transform: none; }

  main { padding-top: 96px; }
  .intro { padding-top: clamp(64px, 11vh, 120px); }
  .intro .lede { max-width: 44ch; margin-top: var(--s5); }

  .lab-panel {
    position: fixed;
    left: var(--gutter);
    bottom: var(--s5);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
    max-width: min(92vw, 760px);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-pill);
    border: 1px solid var(--hair);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--sh-2);
  }
  .lab-panel .seg { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-pill); overflow: hidden; }
  .lab-panel .seg button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 640;
    letter-spacing: .03em;
    min-height: 36px;
    padding: 0 var(--s3);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .lab-panel .seg button[aria-pressed="true"] { background: var(--e3); color: var(--ink); }
  .lab-panel .mini { min-height: 36px; padding: 0 var(--s4); font-size: var(--t-caption); }
  .lab-panel .hint { font-size: var(--t-caption); color: var(--faint); }

  .band-note {
    border-top: 1px dashed var(--hair-strong);
    min-height: 58vh;
    display: flex;
    align-items: center;
    gap: var(--s4);
  }
  .band-note .tag { flex: none; }

  .lab-foot {
    border-top: 1px solid var(--hair);
    padding: var(--s5) 0 calc(var(--s9) + 40px);
    display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  }

  @media (max-width: 759px) {
    main { padding-top: 84px; }
    .lab-panel { right: var(--gutter); border-radius: var(--r3); }
    .band-note { min-height: 46vh; }
  }



/* ================================================================
   HERO v4 · prompt reveal (from hero-v4.html)
   ================================================================ */

  html, body { overflow-x: clip; }
  body { background: var(--bg); }

  /* ---------- tokens: staged light product UI ---------- */
  .hero-scroll {
    --ui-bg: #FFFFFF;
    --ui-side: #F2F4F8;
    --ui-panel: #F5F7FA;
    --ui-ink: #0D1420;
    --ui-muted: #5B6675;
    --ui-faint: #8B96A6;
    --ui-line: rgba(13, 20, 32, .09);
    --ui-blue: #2E6BF0;
    --ui-run: #1FA855;
  }

  /* ---------- region + stage ---------- */
  .hero-scroll { position: relative; height: 575svh; }
  .hero-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }

  /* Composed page only: the site header is FIXED here (the standalone
     hero-v4 page lets its header scroll away), so the title needs real
     air beneath it rather than the 8svh that used to leave it touching
     the header pill. Measured at 1440x900 this opens the gap from 2px
     to ~110px; hero-v4.js only ever translates this element, so the
     rest position is ours to set. */
  .hero-title {
    position: absolute; top: var(--hero-title-top); left: 50%; transform: translateX(-50%);
    z-index: 6; text-align: center; width: min(92vw, 980px);
    will-change: transform, opacity; pointer-events: none;
  }
  .hero-scroll { --hero-title-top: clamp(150px, 20svh, 236px); }
  .hero-title h1 { font-size: clamp(2.4rem, 4.8vw, 3.9rem); }

  .scroll-cue {
    position: absolute; left: 50%; bottom: 4.5svh; transform: translateX(-50%);
    z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 9px;
    font: 500 11px/1 var(--f-sans); letter-spacing: .17em; text-transform: uppercase;
    color: var(--muted); will-change: opacity; pointer-events: none;
  }
  .scroll-cue i {
    width: 1px; height: 34px; overflow: hidden;
    background: color-mix(in srgb, var(--muted) 32%, transparent); display: block;
  }
  .scroll-cue i::after {
    content: ""; display: block; width: 1px; height: 12px; background: var(--cyan);
    animation: cue-drop 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
  }
  @keyframes cue-drop { 0% { transform: translateY(-12px); } 70%, 100% { transform: translateY(36px); } }

  /* ---------- the frame ---------- */
  .frame {
    position: absolute; z-index: 3; overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 50px 140px -40px rgba(2, 6, 12, .8);
    background: var(--ui-bg);
    will-change: left, top, width, height, border-radius;
  }
  [data-theme="light"] .frame { box-shadow: 0 40px 110px -42px rgba(30, 50, 80, .38); }
  .frame-media { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; will-change: transform; }

  /* ---------- collaborators (grouped rotoscope still) ---------- */
  .person-group {
    position: absolute; z-index: 5; margin: 0; right: max(1.5vw, 8px); bottom: 0;
    opacity: 0; pointer-events: none; will-change: transform, opacity;
    filter: drop-shadow(0 22px 44px rgba(2, 6, 12, .55));
  }
  .person-group img { display: block; height: 100%; width: auto; }
  .person-group.is-left { right: auto; left: max(1.5vw, 8px); }

  /* ---------- quote bubbles: type-on, one at a time ---------- */
  .quote-bubble {
    position: absolute; z-index: 8; max-width: min(300px, 72vw);
    background: #fff; color: #101725;
    font: 550 14.5px/1.45 var(--f-sans); letter-spacing: -.01em;
    padding: 12px 16px; border-radius: 16px;
    box-shadow: 0 18px 44px -14px rgba(2, 6, 12, .55);
    opacity: 0; transform: scale(.85) translateY(10px);
    transition: opacity .3s ease, transform .3s var(--ease);
    pointer-events: none;
  }
  .quote-bubble.show { opacity: 1; transform: scale(1) translateY(0); }
  .quote-bubble::after {
    content: ""; position: absolute; bottom: -8px; width: 18px; height: 12px;
    background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .quote-bubble.is-right::after { right: 38px; }
  .quote-bubble.is-left::after { left: 38px; }
  .q-cursor {
    display: inline-block; width: 2px; height: 1em; margin-left: 2px;
    background: #2575FC; vertical-align: -.12em;
    animation: q-blink .85s steps(1) infinite;
  }
  @keyframes q-blink { 50% { opacity: 0; } }

  /* ================================================================
     SCENE — staged light-mode Duet home · desktop 1600×1000
     ================================================================ */
  .scene-inner {
    position: absolute; top: 0; left: 0; width: 1600px; height: 1000px;
    background: var(--ui-bg); color: var(--ui-ink);
    font-family: var(--f-sans); display: flex;
  }
  .scene-inner.is-mobile { display: none; width: 500px; height: 1400px; flex-direction: column; }

  /* sidebar */
  .ui-side {
    width: 248px; flex: 0 0 248px; background: var(--ui-side);
    border-right: 1px solid var(--ui-line); padding: 16px 12px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .ui-switcher {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: #fff; border: 1px solid var(--ui-line); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(13, 20, 32, .05);
  }
  .ui-switcher .ws-tile, .ui-topbar .ws-tile {
    width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    display: grid; place-items: center;
  }
  .ui-switcher b, .ui-topbar b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
  .ui-switcher .chev { margin-left: auto; color: var(--ui-faint); }
  .ui-seg {
    display: flex; background: #E3E8EF; border-radius: 10px; padding: 3px; gap: 2px;
  }
  .ui-seg span {
    flex: 1; text-align: center; font-size: 13px; font-weight: 550; color: var(--ui-muted);
    padding: 6px 0; border-radius: 8px;
  }
  .ui-seg span.on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 3px rgba(13, 20, 32, .12); }
  .ui-navitem {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 9px; font-size: 14px; font-weight: 550;
  }
  .ui-navitem.on { background: #fff; color: var(--ui-blue); box-shadow: 0 1px 3px rgba(13, 20, 32, .1); }
  .ui-sidelabel {
    font-size: 11px; font-weight: 650; letter-spacing: .13em; color: var(--ui-faint);
    padding: 8px 10px 2px;
  }
  .ui-chat {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px;
    font-size: 13.5px; color: var(--ui-muted); border-radius: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ui-chat i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin: 0 5px; }
  .ui-chat .dot-a { background: var(--ui-blue); }
  .ui-chat .dot-b { background: #9AA7B8; }
  .ui-chat .dot-c { background: #1FA855; }
  .ui-chat .dot-d { background: #C3CDDA; }
  .ui-dock { display: flex; gap: 8px; padding: 4px 10px; }
  .ui-dock i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
  .ui-user {
    margin-top: auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 2px; border-top: 1px solid var(--ui-line);
  }
  .ui-user .av {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
    background: linear-gradient(135deg, #2E3A50, #141B28);
    color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
  }
  .ui-user b { font-size: 13px; font-weight: 600; display: block; }
  .ui-user small { font-size: 11.5px; color: var(--ui-faint); }
  .ui-user .chev { margin-left: auto; color: var(--ui-faint); }

  /* main column */
  .ui-main { flex: 1; padding: 0 48px; display: flex; flex-direction: column; align-items: center; }
  .ui-col { width: 780px; max-width: 100%; }
  .ui-date {
    margin-top: 40px; font-size: 12px; font-weight: 600; letter-spacing: .16em;
    color: var(--ui-faint);
  }
  .ui-hello {
    margin-top: 10px; font-size: 42px; font-weight: 350; letter-spacing: -.03em;
    color: var(--ui-ink); line-height: 1.08;
  }
  .ui-hello b { font-weight: 600; }

  /* prompt card — matches real Duet: blue quality bar, scope tabs, ask, composer */
  .ui-prompt {
    margin-top: 52px; background: #fff; border: 1px solid var(--ui-line);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 70px -30px rgba(10, 22, 44, .28);
  }
  .ui-qbar {
    display: flex; align-items: center; height: 40px; padding: 0 14px 0 16px;
    background: var(--ui-blue); color: #fff;
  }
  .ui-qbar .ui-q { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
  .ui-qbar .ui-q b { font-weight: 700; }
  .ui-qbar .ui-qicons { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #fff; }
  .ui-qbar .ui-qicons svg { display: block; opacity: .95; }
  .ui-qbar .dotsep { width: 3px; height: 12px; border-left: 2px dotted rgba(255,255,255,.65); }
  .ui-qbar .dollar { font-size: 13.5px; font-weight: 700; line-height: 1; }
  .ui-cardbody { padding: 14px 16px 14px; }
  .ui-scopes { display: flex; gap: 6px; align-items: center; }
  .ui-scope {
    font-size: 12.5px; font-weight: 550; color: var(--ui-muted);
    padding: 7px 13px; border-radius: 999px;
  }
  .ui-scope.on { color: #fff; background: #101725; }
  .ui-ask {
    margin: 16px 4px 16px; font-size: 17.5px; color: var(--ui-faint); letter-spacing: -.01em;
  }
  .ui-composer { display: flex; align-items: center; gap: 10px; }
  .ui-attach {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ui-line);
    display: grid; place-items: center; color: var(--ui-muted);
  }
  .ui-composer .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .ui-agentchip {
    display: flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px;
    border: 1px solid var(--ui-line); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--ui-ink);
  }
  .ui-agentchip .av {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    display: grid; place-items: center;
  }
  .ui-send {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ui-blue); display: grid; place-items: center;
    box-shadow: 0 6px 16px -6px rgba(46, 107, 240, .7);
  }

  /* suggestion chips */
  .ui-chips { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
  .ui-chip {
    font-size: 13px; color: var(--ui-muted); background: #fff;
    border: 1px solid var(--ui-line); border-radius: 999px; padding: 8px 14px;
  }

  /* apps */
  .ui-appslabel {
    margin-top: 48px; font-size: 11px; font-weight: 650; letter-spacing: .15em;
    color: var(--ui-faint); display: flex; align-items: center; gap: 10px;
  }
  .ui-appslabel::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
  .ui-apps { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .ui-app {
    background: #fff; border: 1px solid var(--ui-line); border-radius: 16px; padding: 18px;
  }
  .ui-app .tile {
    width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  }
  .ui-app b { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
  .ui-app .run {
    margin-top: 7px; display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ui-muted);
  }
  .ui-app .run i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-run); }

  /* activity strip */
  .ui-strip { margin-top: 22px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
  .ui-panel {
    background: #fff; border: 1px solid var(--ui-line); border-radius: 16px; padding: 18px 20px;
  }
  .ui-panel h4 { font-size: 13px; font-weight: 650; color: var(--ui-muted); letter-spacing: .02em; }
  .ui-act { display: flex; align-items: center; gap: 11px; margin-top: 13px; font-size: 13.5px; }
  .ui-act .av {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
    background: linear-gradient(135deg, var(--blue), var(--cyan)); display: grid; place-items: center;
  }
  .ui-act span { color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ui-act small { margin-left: auto; color: var(--ui-faint); font-size: 12px; flex: 0 0 auto; }
  .ui-bars { display: flex; align-items: flex-end; gap: 9px; height: 74px; margin-top: 16px; }
  .ui-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--blue), var(--cyan)); opacity: .85; }
  .ui-cap { margin-top: 10px; font-size: 12px; color: var(--ui-faint); }

  /* ================================================================
     SCENE — mobile variant 500×1400 (phone-width staging)
     ================================================================ */
  .ui-topbar {
    display: flex; align-items: center; gap: 12px; padding: 20px 22px;
    border-bottom: 1px solid var(--ui-line);
  }
  .ui-topbar .burger { width: 24px; display: grid; gap: 5px; }
  .ui-topbar .burger i { height: 2.5px; border-radius: 2px; background: var(--ui-muted); display: block; }
  .ui-topbar .av {
    margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #2E3A50, #141B28);
    color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
  }
  .scene-inner.is-mobile .ui-main { padding: 0 24px; }
  .scene-inner.is-mobile .ui-col { width: 100%; }
  .scene-inner.is-mobile .ui-date { margin-top: 42px; font-size: 11px; }
  .scene-inner.is-mobile .ui-hello { font-size: 33px; }
  .scene-inner.is-mobile .ui-prompt { margin-top: 38px; border-radius: 18px; }
  .scene-inner.is-mobile .ui-qbar { height: 36px; padding: 0 12px 0 14px; }
  .scene-inner.is-mobile .ui-qbar .ui-q { font-size: 12px; }
  .scene-inner.is-mobile .ui-qbar .ui-qicons { gap: 8px; }
  .scene-inner.is-mobile .ui-cardbody { padding: 12px 12px 12px; }
  .scene-inner.is-mobile .ui-scope { font-size: 11.5px; padding: 6px 11px; }
  .scene-inner.is-mobile .ui-ask { font-size: 15.5px; margin: 14px 2px 14px; }
  .scene-inner.is-mobile .ui-attach { width: 33px; height: 33px; }
  .scene-inner.is-mobile .ui-agentchip { font-size: 12px; }
  .scene-inner.is-mobile .ui-send { width: 33px; height: 33px; }
  .scene-inner.is-mobile .ui-chips { margin-top: 22px; }
  .scene-inner.is-mobile .ui-chip { font-size: 12px; }
  .scene-inner.is-mobile .ui-appslabel { margin-top: 46px; font-size: 10.5px; }
  .scene-inner.is-mobile .ui-apps { grid-template-columns: 1fr 1fr; gap: 14px; }
  .scene-inner.is-mobile .ui-app b { font-size: 12.5px; white-space: normal; }
  .scene-inner.is-mobile .ui-strip { grid-template-columns: 1fr; }
  .scene-inner.is-mobile .ui-panel.is-metrics { display: none; }

  /* ---------- statement band ---------- */
  .statement { padding: 12rem 0 14rem; position: relative; }
  .statement .wrap { max-width: 840px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .statement .lede { max-width: 44ch; }
  .statement .body-copy { margin-top: 18px; max-width: 58ch; font-size: 1.05rem; line-height: 1.7; }
  .statement .btn { margin-top: 44px; }
  [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .9s ease, translate .9s var(--ease); transition-delay: var(--d, 0s); }
  [data-reveal].in { opacity: 1; translate: 0 0; }

  /* ---------- responsive ---------- */
  @media (max-width: 860px) {
    .hero-scroll { height: 555svh; --hero-title-top: clamp(112px, 15.5svh, 168px); }
    .scroll-cue { bottom: 3.5svh; }
    .person-group { right: max(1vw, 4px); }
    .person-group.is-left { left: max(1vw, 4px); right: auto; }
    .quote-bubble { max-width: 76vw; font-size: 13px; }
    .statement { padding: 9rem 0 10rem; }
  }

  /* ---------- reduced motion / motion off: static end state ---------- */
  html.motion-off .hero-scroll { height: auto; }
  html.motion-off .hero-stage { position: relative; height: auto; overflow: visible; padding: 8svh 0 0; }
  html.motion-off .hero-title { position: relative; top: auto; left: auto; transform: none; margin: 0 auto 5svh; }
  html.motion-off .scroll-cue { display: none; }
  html.motion-off .frame {
    position: relative; left: auto !important; top: auto !important;
    width: 100% !important; height: 78svh !important; border-radius: 0 !important;
  }
  html.motion-off .person-group { opacity: 1; transform: none; position: absolute; }
  html.motion-off .person-group img { height: min(23vh, 200px); }
  html.motion-off .quote-bubble { transition: none; }
  html.motion-off .q-cursor { animation: none; }



/* ================================================================
   STATEMENT · platform + managed service (from statement.html)
   ================================================================ */

  html, body { overflow-x: clip; }
  body { background: var(--bg); }

  /* ============ Statement section: what Mindset HQ + TTM are ============ */
  .stmt {
    position: relative;
    padding: calc(var(--band) * 1.05) 0 var(--band);
  }
  .stmt-head { max-width: 880px; }
  .stmt-head .lede { margin-top: var(--s5); max-width: 56ch; }
  .stmt-head .lede strong { color: var(--ink); font-weight: 650; }

  /* slow drift on the headline gradient accent only (gradient stays reserved) */
  .stmt-head .grad-text {
    background-size: 220% 100%;
    animation: stmt-grad-drift 12s ease-in-out infinite alternate;
  }
  @keyframes stmt-grad-drift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
  }

  /* ---- the two halves ---- */
  .stmt-pair {
    position: relative;
    margin-top: var(--s8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    align-items: stretch;
  }
  .stmt-panel {
    position: relative;
    border-radius: var(--r3);
    padding: clamp(26px, 3.4vw, 44px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .stmt-panel:hover { border-color: var(--hair-strong); }
  /* quiet brand-tinted wash + solid top hairline (gradient stays reserved) */
  .stmt-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
  }
  .stmt-panel::after {
    content: ""; position: absolute; top: 0; left: clamp(26px, 3.4vw, 44px);
    right: clamp(26px, 3.4vw, 44px); height: 2px; border-radius: 2px;
  }
  .stmt-platform::before {
    background: radial-gradient(120% 90% at 18% 0%, var(--glow-cyan), transparent 62%);
  }
  .stmt-platform::after { background: var(--cyan); opacity: .55; }
  .stmt-service::before {
    background: radial-gradient(120% 90% at 82% 0%, var(--glow-green), transparent 62%);
  }
  .stmt-service::after { background: var(--green); opacity: .5; }

  .stmt-kicker {
    display: flex; align-items: center; gap: var(--s3);
    font-size: var(--t-label); font-weight: 700; letter-spacing: .19em;
    text-transform: uppercase; color: var(--faint); margin: 0;
  }
  .stmt-kicker .mk {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--e2); border: 1px solid var(--hair);
    box-shadow: var(--inner-hi);
  }
  .stmt-name {
    margin: var(--s4) 0 0;
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight: 760; font-stretch: 107%;
    letter-spacing: -.022em; line-height: 1.08;
  }
  .stmt-line { margin: var(--s3) 0 0; max-width: 46ch; color: var(--muted);
    font-size: 1.02rem; line-height: 1.6; font-weight: 420; }

  /* ---- living visuals ---- */
  .stmt-viz {
    margin: var(--s6) 0 0;
    border: 1px solid var(--hair);
    border-radius: var(--r2);
    background: var(--e1);
    box-shadow: var(--inner-hi);
    overflow: hidden;
  }
  .stmt-viz svg { display: block; width: 100%; height: auto; }
  .stmt-viz text {
    font-family: var(--font); fill: var(--muted);
  }
  .viz-chip rect { fill: var(--e3); stroke: var(--hair-strong); }
  .viz-chip text { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
  .viz-wire { fill: none; stroke: var(--hair-strong); stroke-width: 1.2; opacity: .55; }
  .viz-dot { fill: var(--cyan); }
  .viz-hub circle { fill: var(--e3); stroke: var(--cyan); stroke-width: 1.4; }
  .viz-hub { color: var(--cyan); transform-origin: 452px 84px;
    animation: stmt-hub-breathe 4.5s ease-in-out infinite; }
  @keyframes stmt-hub-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  .viz-halo { fill: none; stroke: var(--cyan); stroke-width: 1;
    transform-origin: 452px 84px; animation: stmt-halo 3.2s ease-out infinite; }
  @keyframes stmt-halo {
    0% { transform: scale(.8); opacity: .55; }
    100% { transform: scale(1.65); opacity: 0; }
  }

  /* linear lifecycle with a perpetual return */
  .viz-track { fill: none; stroke: var(--hair-strong); stroke-width: 1.2; opacity: .55; }
  .viz-return { fill: none; stroke: var(--hair-strong); stroke-width: 1.2;
    stroke-dasharray: 2 7; opacity: .55; }
  .viz-arrow { fill: var(--faint); }
  .viz-loop-dot { fill: var(--green); }
  .viz-node circle { fill: var(--e3); stroke: var(--hair-strong); stroke-width: 1.2;
    transition: stroke .4s ease; }
  .viz-node text { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; fill: var(--faint); }
  .viz-caption { font-size: 10px; font-weight: 650; letter-spacing: .14em; fill: var(--faint); }

  /* four capabilities, instantly scannable */
  .stmt-list {
    list-style: none; margin: var(--s6) 0 0; padding: var(--s5) 0 0;
    border-top: 1px solid var(--hair);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5);
  }
  .stmt-item { display: flex; gap: var(--s3); align-items: flex-start; }
  .stmt-item .ic {
    width: 36px; height: 36px; flex: none; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--e2); border: 1px solid var(--hair);
    box-shadow: var(--inner-hi);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }
  .stmt-item:hover .ic {
    transform: translateY(-2px);
    border-color: currentColor;
  }
  .stmt-platform .ic { color: var(--cyan); }
  .stmt-service .ic { color: var(--green); }
  .stmt-item b {
    display: block; font-size: .98rem; font-weight: 650;
    letter-spacing: -.01em; line-height: 1.3;
  }
  .stmt-item span {
    display: block; margin-top: 3px;
    font-size: var(--t-caption); line-height: 1.45; color: var(--muted);
  }

  /* the join: two halves of one whole */
  .stmt-join {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--e3); border: 1px solid var(--hair-strong);
    box-shadow: var(--inner-hi), var(--sh-1);
    color: var(--cyan);
  }
  .stmt-join::before {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid var(--cyan);
    animation: stmt-join-halo 3s ease-out infinite;
  }
  @keyframes stmt-join-halo {
    0% { transform: scale(1); opacity: .5; }
    100% { transform: scale(1.9); opacity: 0; }
  }

  /* ---- reveals (armed by statement.js only, so no-JS stays visible) ---- */
  .reveal-armed [data-reveal] {
    opacity: 0; translate: 0 26px;
    transition: opacity .9s ease, translate .9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .reveal-armed [data-reveal].in { opacity: 1; translate: 0 0; }
  /* capabilities stagger in after their panel lands */
  .reveal-armed .stmt-item {
    opacity: 0; translate: 0 12px;
    transition: opacity .7s ease, translate .7s var(--ease);
  }
  .reveal-armed .stmt-panel.in .stmt-item { opacity: 1; translate: 0 0; }
  .reveal-armed .stmt-panel.in .stmt-item:nth-child(1) { transition-delay: .18s; }
  .reveal-armed .stmt-panel.in .stmt-item:nth-child(2) { transition-delay: .28s; }
  .reveal-armed .stmt-panel.in .stmt-item:nth-child(3) { transition-delay: .38s; }
  .reveal-armed .stmt-panel.in .stmt-item:nth-child(4) { transition-delay: .48s; }

  /* ---- reduced motion / motion off: everything static and visible ---- */
  html.motion-off .reveal-armed [data-reveal],
  html.motion-off .reveal-armed .stmt-item {
    opacity: 1; translate: none; transition: none;
  }
  html.motion-off .stmt-head .grad-text,
  html.motion-off .viz-hub, html.motion-off .viz-halo,
  html.motion-off .stmt-join::before { animation: none; }
  html.motion-off .viz-halo, html.motion-off .stmt-join::before { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .stmt-head .grad-text, .viz-hub, .viz-halo,
    .stmt-join::before { animation: none; }
    .viz-halo, .stmt-join::before { opacity: 0; }
  }

  /* ---- cross-panel alignment: matching band heights in the 2-up layout ---- */
  @media (min-width: 901px) {
    .stmt-line { min-height: calc(1.6em * 3); } /* platform line runs 3 lines */
    .stmt-item b { min-height: calc(1.3em * 2); } /* longest titles wrap to 2 */
    .stmt-item span { min-height: calc(1.45em * 2); } /* support lines run 2 */
  }

  /* ---- responsive ---- */
  @media (max-width: 900px) {
    .stmt-pair { grid-template-columns: 1fr; gap: var(--s6); }
    .stmt-join { display: none; }
  }
  @media (max-width: 560px) {
    .stmt-list { grid-template-columns: 1fr; gap: var(--s4); }
    .stmt-item .ic { width: 34px; height: 34px; }
  }



/* ================================================================
   USE CASES (from use-cases.html)
   ================================================================ */

  html, body { overflow-x: clip; }
  body { background: var(--bg); }

  /* ---------- lab chrome (self-contained, matches hero-v4 header slots) ---------- */
  .uc-top {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border-bottom: 1px solid var(--hair);
  }
  .uc-top-inner {
    display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
    min-height: 64px; padding-top: var(--s2); padding-bottom: var(--s2);
  }
  .uc-back { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 550; }
  .uc-back:hover { color: var(--ink); }
  .uc-top strong { font-weight: 700; letter-spacing: -.01em; }
  .uc-top .spacer { flex: 1; }

  /* ---------- tokens: staged light product UI (same language as hero-v4) ---------- */
  .use-cases {
    --ui-bg: #FFFFFF;
    --ui-side: #F2F4F8;
    --ui-panel: #F5F7FA;
    --ui-ink: #0D1420;
    --ui-muted: #5B6675;
    --ui-faint: #8B96A6;
    --ui-line: rgba(13, 20, 32, .09);
    --ui-blue: #2E6BF0;
    --ui-run: #1FA855;
  }

  /* ---------- section head ---------- */
  .use-cases { padding-block: var(--band) calc(var(--band) * .9); position: relative; z-index: 1; }
  .uc-head { max-width: 780px; }
  .uc-head .lede { margin-top: var(--s5); max-width: 52ch; }

  /* ---------- card grid: broken rhythm, 7/5 then full then 5/7 ---------- */
  .uc-grid {
    margin-top: var(--s9);
    display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5);
  }
  .uc-card {
    position: relative; overflow: clip;
    border-radius: var(--r3);
    background: var(--e1);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-1);
    padding: var(--s6);
    display: flex; flex-direction: column; gap: var(--s4);
  }
  .uc-card:nth-child(1) { grid-column: span 7; }
  .uc-card:nth-child(2) { grid-column: span 5; }
  .uc-card:nth-child(3) { grid-column: span 12; }
  .uc-card:nth-child(4) { grid-column: span 5; }
  .uc-card:nth-child(5) { grid-column: span 7; }

  .uc-idx {
    position: absolute; top: var(--s5); right: var(--s6);
    font-size: var(--t-label); font-weight: 700; letter-spacing: .16em;
    color: var(--faint); font-variant-numeric: tabular-nums;
  }
  /* on the featured card the vignette owns the right side, so the index
     flows inside the copy column instead of floating over the panel */
  .uc-card.is-feature .uc-idx { position: static; order: -1; }
  .uc-name { font-size: var(--t-subhead); font-weight: 700; letter-spacing: -.014em; margin: 0; max-width: 24ch; }
  .uc-desc { color: var(--muted); margin: 0; font-size: .98rem; line-height: 1.6; max-width: 46ch; }
  /* featured card: copy left, chat vignette right */
  .uc-card.is-feature { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); align-items: center; }
  .uc-card.is-feature .uc-copy { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }

  /* accent hairline per card, one of the three brand colors */
  .uc-card::before {
    content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px;
    background: var(--accent, var(--blue)); opacity: .55;
  }
  .uc-card[data-accent="blue"] { --accent: var(--blue); }
  .uc-card[data-accent="cyan"] { --accent: var(--cyan); }
  .uc-card[data-accent="green"] { --accent: var(--green); }

  /* ================================================================
     VIGNETTES — staged light-palette Mindset HQ product moments
     ================================================================ */
  .vign {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: clamp(18px, 2vw, 26px);
    background: var(--ui-panel);
    border: 1px solid var(--hair);
    border-radius: var(--r2);
    padding: var(--s4);
    box-shadow: var(--sh-1);
    font-family: var(--font);
    color: var(--ui-ink);
  }
  .is-feature .vign { margin-top: 0; align-self: stretch; }
  .vign > .v-panel { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .vign > .v-flow { flex: 1; }
  .vign > .v-chat { flex: 1; justify-content: center; }
  .vign .v-panel {
    background: var(--ui-bg); border: 1px solid var(--ui-line);
    border-radius: 12px; padding: 14px 16px;
  }
  .v-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--ui-muted);
  }
  .v-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .v-dot.live { background: var(--ui-run); box-shadow: 0 0 0 3px rgba(31, 168, 85, .16); }
  .v-dot.blue { background: var(--ui-blue); }
  .v-head small { margin-left: auto; color: var(--ui-faint); font-weight: 550; }

  /* --- vignette 1: orchestration flow --- */
  .v-flow { display: flex; align-items: center; gap: 12px; }
  .v-flow .v-panel { flex: none; }
  .v-req { max-width: 190px; }
  .v-req b { display: block; font-size: 13px; font-weight: 650; letter-spacing: -.01em; margin-top: 6px; }
  .v-req span { font-size: 11.5px; color: var(--ui-faint); }
  .v-link { flex: 1; height: 1px; background: var(--ui-line); position: relative; min-width: 14px; }
  .v-link::after {
    content: ""; position: absolute; right: -1px; top: -3px;
    border: 3.5px solid transparent; border-left-color: var(--ui-line); border-right: 0;
  }
  .v-mindy { display: flex; align-items: center; gap: 9px; }
  .v-av {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    display: grid; place-items: center;
  }
  .v-mindy b { display: block; font-size: 13px; font-weight: 650; }
  .v-mindy span { font-size: 11px; color: var(--ui-faint); }
  .v-routes { display: flex; flex-direction: column; gap: 7px; flex: 0 1 auto; min-width: 150px; }
  .v-route {
    display: grid; grid-template-columns: 6px auto; column-gap: 9px;
    align-items: center; text-align: left;
    background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 9px;
    padding: 8px 12px; font-size: 12.5px; font-weight: 650;
  }
  .v-route b { font-weight: 650; }
  .v-route span { grid-column: 2; color: var(--ui-faint); font-weight: 550; font-size: 11px; line-height: 1.3; }
  .v-route i { width: 6px; height: 6px; border-radius: 50%; grid-row: 1; }

  /* --- vignette 2: live metrics dashboard --- */
  .v-tabs {
    display: flex; gap: 4px; margin-top: 12px;
    background: #ECEFF5; padding: 3px; border-radius: 9px;
  }
  .v-tabs span {
    flex: 1; text-align: center; font-size: 11px; font-weight: 600;
    color: var(--ui-muted); padding: 5px 0; border-radius: 7px; white-space: nowrap;
  }
  .v-tabs span.on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 3px rgba(13, 20, 32, .12); }
  .v-chart { position: relative; height: 112px; margin-top: 14px; }
  .v-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; }
  .v-bars i {
    flex: 1; border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--blue), var(--cyan)); opacity: .88;
    height: 0; transition: height .9s var(--ease);
  }
  .in .v-bars i { height: var(--h); }
  .v-baseline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .v-baseline polyline {
    fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 5;
    vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .9;
  }
  .v-baseline circle { fill: #fff; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .v-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; font-weight: 550; color: var(--ui-faint); }
  .v-legend i { display: inline-block; width: 14px; margin-right: 6px; vertical-align: middle; }
  .v-legend .lg-bar { height: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan)); }
  .v-legend .lg-line { height: 0; border-top: 2px dashed var(--cyan); }

  /* --- vignette 5: automation, two sourcing paths --- */
  .v-branch {
    margin-top: 12px; background: var(--ui-bg);
    border: 1px solid var(--ui-line); border-radius: 10px; padding: 11px 13px 12px;
  }
  .v-branch-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; }
  .v-branch-head .pill { margin-left: auto; }
  .v-track { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 4px; margin-top: 10px; }
  .v-step {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 600; color: var(--ui-muted);
    background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; padding: 5px 10px;
  }
  .v-step em { font-style: normal; color: var(--ui-faint); font-weight: 550; }
  .v-step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--ui-line); flex: none; }
  .v-step.done { color: var(--ui-ink); }
  .v-step.done::before {
    content: "\2713"; width: auto; height: auto; border: none; border-radius: 0;
    color: var(--ui-run); font-size: 11px; font-weight: 800; line-height: 1;
  }
  .v-step.active { color: var(--ui-ink); border-color: rgba(46, 107, 240, .45); }
  .v-step.active::before { background: var(--ui-blue); border-color: var(--ui-blue); animation: v-pulse 1.7s ease-out infinite; }
  .v-step.hold { color: var(--ui-muted); border-style: dashed; }
  @keyframes v-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 107, 240, .35); }
    100% { box-shadow: 0 0 0 8px rgba(46, 107, 240, 0); }
  }
  html.motion-off .v-step.active::before { animation: none; }
  .v-arrow { color: var(--ui-faint); font-size: 11px; }
  .v-data { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .v-datum {
    font-size: 11px; color: var(--ui-muted);
    background: #fff; border: 1px dashed var(--ui-line); border-radius: 8px; padding: 4px 10px;
  }
  .v-datum b { color: var(--ui-ink); font-weight: 650; margin-right: 5px; }

  /* --- vignette 3: RFP chat --- */
  .v-chat { display: flex; flex-direction: column; gap: 10px; }
  .v-msg {
    max-width: 82%; font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: 14px;
    opacity: 0; translate: 0 10px; transition: opacity .5s ease, translate .5s var(--ease);
  }
  .in .v-msg { opacity: 1; translate: 0 0; }
  .in .v-msg:nth-child(1) { transition-delay: .15s; }
  .in .v-msg:nth-child(2) { transition-delay: .45s; }
  .v-msg.user {
    align-self: flex-end; background: var(--ui-blue); color: #fff;
    border-bottom-right-radius: 5px;
  }
  .v-msg .v-file {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    background: rgba(255, 255, 255, .14); border-radius: 9px; padding: 6px 10px;
    font-size: 11.5px; font-weight: 600;
  }
  .v-msg.mindy {
    align-self: flex-start; background: var(--ui-bg); border: 1px solid var(--ui-line);
    color: var(--ui-ink); border-bottom-left-radius: 5px;
  }
  .v-from {
    display: flex; align-items: center; gap: 7px; margin: -2px 0 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ui-faint);
  }
  .v-from .v-av { width: 18px; height: 18px; }

  /* --- vignettes 4 + 5: request rows --- */
  .v-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .v-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 10px;
    padding: 9px 13px; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  }
  .v-row .pill {
    margin-left: auto; flex: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    border-radius: var(--r-pill); padding: 3px 10px;
  }
  .pill.ok { color: #177a3c; background: rgba(31, 168, 85, .13); }
  .pill.run { color: var(--ui-blue); background: rgba(46, 107, 240, .11); }
  .pill.wait { color: var(--ui-muted); background: rgba(13, 20, 32, .06); }

  /* ---------- path to depth ---------- */
  .uc-more { margin-top: var(--s8); display: flex; justify-content: center; }
  .uc-platform-cta { min-height: 48px; }

  /* ---------- reveals ---------- */
  [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .9s ease, translate .9s var(--ease); transition-delay: var(--d, 0s); }
  [data-reveal].in { opacity: 1; translate: 0 0; }
  html.motion-off [data-reveal] { opacity: 1; translate: 0; transition: none; }
  html.motion-off .v-bars i { height: var(--h); transition: none; }
  html.motion-off .v-msg { opacity: 1; translate: 0; transition: none; }

  /* ---------- responsive ---------- */
  @media (max-width: 980px) {
    .uc-card:nth-child(n) { grid-column: span 12; }
    .uc-card.is-feature { grid-template-columns: 1fr; gap: var(--s5); }
  }
  /* mid-size: the flow row runs out of room before the phone layout kicks in,
     so stack it before the route chips can escape the vignette */
  @media (max-width: 760px) {
    .v-flow { flex-wrap: wrap; }
    .v-link { display: none; }
    .v-req { max-width: none; width: 100%; }
    .v-routes { width: 100%; }
  }
  @media (max-width: 560px) {
    .uc-card { padding: var(--s5); }
    .v-msg { max-width: 94%; }
    .uc-idx { display: none; }
  }



/* ================================================================
   TOTAL TALENT · the lens (from total-talent.html; includes shared lab-panel styles)
   ================================================================ */

  html, body { overflow-x: clip; }
  body { background: var(--bg); }

  /* ---------- lab chrome ---------- */
  .lab-top {
    position: relative; z-index: 30;
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s4) var(--gutter);
    font-size: var(--t-caption); color: var(--faint);
  }
  .lab-back { color: var(--muted); text-decoration: none; font-weight: 600; }
  .lab-back:hover { color: var(--ink); }
  .lab-top strong { color: var(--ink); font-weight: 650; }
  .lab-top .lab-chip { margin-left: auto; }

  /* ---------- section: sticky lens scene ---------- */
  .tt-region { position: relative; height: 245svh; }
  .tt-stage {
    position: sticky; top: 0; height: 100svh; overflow: clip;
    display: flex; flex-direction: column;
  }
  .tt-head {
    text-align: center; padding-top: clamp(40px, 8svh, 84px);
    display: flex; flex-direction: column; align-items: center;
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
  .tt-head .eyebrow { justify-content: center; }
  .tt-head .eyebrow::after {
    content: ""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; flex: none;
  }
  .tt-head h2 { margin: 0; }
  .tt-head .lede { margin-top: var(--s4); max-width: 56ch; }

  /* ---------- scene: fixed-coordinate diagram, scaled to fit ---------- */
  .tt-scene-wrap { position: relative; flex: 1; min-height: 0; }
  .tt-scene {
    position: absolute; left: 50%; top: 50%;
    width: 1200px; height: 620px;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .tt-group-label {
    position: absolute; transform: translate(-50%, -50%);
    font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
    color: var(--faint); white-space: nowrap;
  }

  .tt-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .tt-wires path { fill: none; stroke-width: 1.3; stroke-linecap: round; }

  .tt-chip {
    position: absolute; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--r-pill);
    /* solid, not translucent: wires run BEHIND the chips, never show through */
    background: color-mix(in srgb, var(--bg) 94%, #ffffff);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-1);
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    color: var(--ink); white-space: nowrap;
    will-change: transform, opacity;
  }
  .tt-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .tt-chip .dot.green { background: var(--green); }
  .tt-chip .dot.cyan { background: var(--cyan); }
  .tt-chip .dot.blue { background: var(--blue); }
  .tt-chip.sys {
    color: var(--muted);
    background: color-mix(in srgb, var(--bg) 96.5%, #ffffff);
    font-variant-numeric: tabular-nums;
  }
  .tt-chip.sys .port {
    width: 7px; height: 7px; border-radius: 2px; flex: none;
    border: 1.5px solid var(--cyan);
    transition: background .35s ease;
  }
  /* pulse land: the node lights briefly as a signal arrives, then settles */
  .tt-chip {
    transition: border-color .35s ease, box-shadow .35s ease;
  }
  .tt-chip.tt-lit {
    border-color: color-mix(in srgb, var(--cyan) 62%, transparent);
    box-shadow: var(--inner-hi), 0 0 20px -3px var(--glow-cyan), 0 0 34px -10px var(--glow-blue);
  }
  .tt-chip.tt-lit .port { background: var(--cyan); }
  .tt-chip.tt-lit .dot { box-shadow: 0 0 8px 1px currentColor; }

  /* ---------- the lens ---------- */
  .tt-lens {
    position: absolute; width: 230px; height: 230px;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
  }
  .tt-lens .glow {
    position: absolute; inset: -46%; border-radius: 50%;
    background:
      radial-gradient(circle at 42% 38%, var(--glow-cyan), transparent 62%),
      radial-gradient(circle at 62% 66%, var(--glow-blue), transparent 66%);
    opacity: 0; will-change: opacity;
  }
  .tt-lens .ring {
    position: absolute; inset: 0; border-radius: 50%; padding: 1.5px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .12; will-change: opacity;
  }
  .tt-lens .glass {
    position: absolute; inset: 7px; border-radius: 50%;
    background: var(--e2);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-2);
    overflow: hidden;
  }
  .tt-lens .veil {
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--bg); opacity: .85; will-change: opacity;
  }
  .tt-lens .core {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; text-align: center; padding: 0 22px;
    opacity: 0; will-change: opacity;
  }
  .tt-lens .bulb {
    width: 46px; height: auto; display: block;
    filter: drop-shadow(0 6px 18px var(--glow-cyan));
  }
  .tt-lens .brand {
    font-size: 10px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--faint);
  }
  .tt-lens .line {
    font-size: 17px; font-weight: 650; letter-spacing: -.01em;
    color: var(--ink); line-height: 1.15;
  }

  /* ---------- statements: mirrored pair + resolution ---------- */
  .tt-truths { padding: var(--band) 0 calc(var(--band) * .8); position: relative; z-index: 1; }

  /* the two sides, balanced like the diagram above */
  .tt-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6);
  }
  .tt-side {
    position: relative;
    padding: var(--s4) var(--s6); /* Chris: shorter boxes — .mini rows removed, close the freed space */
    border-radius: 20px;
    background: var(--e1);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-1);
  }
  .tt-side .k {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-label); font-weight: 700; letter-spacing: .19em;
    text-transform: uppercase; color: var(--ink); margin-bottom: var(--s3);
  }
  .tt-side .k i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .tt-side .k i.port {
    border-radius: 2px; background: none;
    border: 1.5px solid var(--cyan);
  }
  .tt-side > p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

  /* the resolution: what the two sides add up to */
  .tt-resolve {
    position: relative; margin-top: var(--s6);
    text-align: center;
    padding: var(--s7) var(--s6);
    border-radius: 22px;
    background: var(--e2);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-1);
    overflow: hidden;
  }
  .tt-resolve::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 132px; height: 2px; background: var(--grad); border-radius: 0 0 2px 2px;
  }
  .tt-resolve .k {
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
    font-size: var(--t-label); font-weight: 700; letter-spacing: .19em;
    text-transform: uppercase; color: var(--ink); margin-bottom: var(--s4);
  }
  .tt-resolve .k i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .tt-resolve > p {
    margin: 0 auto; max-width: 56ch;
    color: var(--ink); font-size: clamp(16.5px, 1.35vw, 19px);
    font-weight: 500; line-height: 1.6; letter-spacing: -.005em;
  }
  [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .9s ease, translate .9s var(--ease); transition-delay: var(--d, 0s); }
  [data-reveal].in { opacity: 1; translate: 0 0; }

  /* ---------- lab panel ---------- */
  .lab-panel {
    position: fixed; left: var(--s4); bottom: var(--s4); z-index: 40;
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--bg) 76%, transparent);
    border: 1px solid var(--hair);
    box-shadow: var(--inner-hi), var(--sh-2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    font-size: var(--t-caption); color: var(--muted);
  }
  .lab-panel .lab-chip { white-space: nowrap; }
  .lab-panel label { display: flex; align-items: center; gap: var(--s2); }
  .lab-panel input[type="range"] { width: 118px; accent-color: var(--cyan); cursor: pointer; min-height: 32px; }
  .lab-panel button {
    font: inherit; font-weight: 600; color: var(--ink);
    min-height: 36px; padding: 0 var(--s3);
    border-radius: var(--r-pill); border: 1px solid var(--hair);
    background: var(--e1); cursor: pointer;
    white-space: nowrap;
  }

  /* ---------- responsive ---------- */
  @media (max-width: 860px) {
    .tt-region { height: 235svh; }
    .tt-head { padding-top: 4svh; }
    .tt-scene { width: 380px; height: 566px; }
    /* keep the resolved scene fully clear of the fixed sandbox panel */
    .tt-scene-wrap { margin-bottom: 70px; }
    .tt-chip { font-size: 12px; padding: 8px 12px; }
    .tt-lens { width: 150px; height: 150px; }
    .tt-lens .line { font-size: 14.5px; }
    .tt-lens .bulb { width: 32px; }
    .tt-pair { grid-template-columns: 1fr; gap: var(--s5); }
    .tt-side { padding: var(--s3) var(--s5); }
    .tt-resolve { padding: var(--s6) var(--s5); }
    .lab-panel { right: var(--s4); gap: var(--s2); }
    .lab-panel .lab-chip { display: none; }
    .lab-panel input[type="range"] { width: 72px; }
  }
  @media (max-height: 780px) {
    .tt-head { padding-top: 4svh; }
  }

  /* ---------- reduced motion / motion off: static resolved state ---------- */
  html.motion-off .tt-region { height: auto; }
  html.motion-off .tt-stage { position: relative; height: auto; min-height: 100svh; overflow: visible; padding-bottom: 6svh; }
  html.motion-off [data-reveal] { opacity: 1; translate: none; transition: none; }



/* ================================================================
   CLOSING CTA (from closing-cta.html)
   ================================================================ */

  html, body { overflow-x: clip; }
  body { background: var(--bg); }

  /* ================================================================
     CLOSING CTA — final Home band. Quiet, confident, unmissable:
     near-full-screen calm, one gradient action, one quiet email path.
     Copy: CONTENT.md H54 verbatim headline + assurances 1-2, with the
     D6 approved mailto-honest drafts (lede + assurance 3 + note).
     ================================================================ */
  .closing-cta {
    position: relative;
    min-height: calc(100svh - 57px); /* minus the lab top bar */
    display: flex;
    align-items: center;
    padding: var(--band) 0;
    overflow: clip;
  }

  /* soft brand glow converging behind the action; sits under the
     ambient field's calm, never a loud wash */
  .closing-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(46% 38% at 50% 62%, var(--glow-cyan), transparent 72%),
      radial-gradient(34% 30% at 50% 40%, var(--glow-blue), transparent 74%);
  }

  .closing-cta .wrap {
    position: relative;
    max-width: 880px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .closing-cta .eyebrow { justify-content: center; }
  .closing-cta .display { max-width: 15ch; }
  .closing-cta .lede { margin-top: var(--s5); max-width: 52ch; }

  /* assurances: a quiet hairline row, no card chrome */
  .assurances {
    list-style: none;
    margin: var(--s8) 0 0;
    padding: var(--s5) 0 0;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3) var(--s7);
  }
  .assurances li {
    position: relative;
    max-width: 26ch;
    font-size: var(--t-caption);
    font-weight: 550;
    line-height: 1.5;
    color: var(--muted);
    padding-left: 18px;
    text-align: left;
  }
  .assurances li::before {
    content: "";
    position: absolute;
    left: 0; top: .48em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--grad);
  }

  .cta-row {
    margin-top: var(--s8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
  }
  .cta-row .btn-primary { min-height: 56px; padding: 0 36px; font-size: 1.02rem; }

  /* reveals (same language as hero-v4 statement band) */
  [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .9s ease, translate .9s var(--ease); transition-delay: var(--d, 0s); }
  [data-reveal].in { opacity: 1; translate: 0 0; }

  @media (max-width: 720px) {
    .closing-cta { min-height: auto; padding: calc(var(--band) * .8) 0; }
    .assurances { flex-direction: column; align-items: center; gap: var(--s4); }
    .cta-row { flex-direction: column; }
    .cta-row .btn { width: min(100%, 340px); }
  }

  /* motion off / reduced motion: everything simply present */
  html.motion-off [data-reveal] { opacity: 1; translate: 0 0; transition: none; }



/* ================================================================
   HOME v2 COMPOSITION · Statement beat scene (composed page only)

   Chris's choreography: the Statement section never appears all at
   once. Beat A = headline + lede enter from above and hold alone,
   then leave as one unit (the content is taller than one viewport);
   Beat B = Platform card enters from the left; Beat C = Managed
   Service card enters from the right. The final frame is the two
   cards, cleanly framed. Beats are sequential with
   near-clear spacing (the next starts only as the previous motion
   completes) and are scrubbed frame-by-frame by the master beat
   controller in home.js — the section pins, and a gentle pan keeps
   the active beat framed because the full statement content is
   taller than one viewport.

   transform/opacity only. Motion off (lab toggle or reduced motion)
   collapses the scene to a static, fully readable section.
   ================================================================ */

  body[data-home-beats] .stmt-scroll { position: relative; height: 340svh; }
  body[data-home-beats] .stmt-stage {
    position: sticky; top: 0; height: 100svh; overflow: clip;
    padding: clamp(40px, 7svh, 72px) 0;
  }
  body[data-home-beats] .stmt-stage .stmt-pair { margin-top: var(--s6); }

  /* The controller owns the three beat units frame-by-frame, so kill
     the time-based reveal behavior on this scene: the head children
     and the join render with their containers, and the panels keep
     only their hover border transition (never a transform one). */
  body[data-home-beats] .stmt .stmt-head,
  body[data-home-beats] .stmt .stmt-platform,
  body[data-home-beats] .stmt .stmt-service,
  body[data-home-beats] .stmt .stmt-join {
    opacity: 0;
    translate: none;
    transition: none;
    will-change: transform, opacity;
  }
  body[data-home-beats] .stmt .stmt-platform,
  body[data-home-beats] .stmt .stmt-service {
    transition: border-color var(--dur) var(--ease);
  }
  body[data-home-beats] .stmt .stmt-head [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }

  @media (max-width: 860px) {
    body[data-home-beats] .stmt-scroll { height: 400svh; }
  }

  /* motion off / reduced motion: the scene unpins and every beat is
     simply visible and readable, in document order */
  html.motion-off body[data-home-beats] .stmt-scroll { height: auto; }
  html.motion-off body[data-home-beats] .stmt-stage {
    position: relative; height: auto; overflow: visible;
    padding: calc(var(--band) * .8) 0 var(--band);
  }
  html.motion-off body[data-home-beats] .stmt .stmt-head,
  html.motion-off body[data-home-beats] .stmt .stmt-platform,
  html.motion-off body[data-home-beats] .stmt .stmt-service,
  html.motion-off body[data-home-beats] .stmt .stmt-join {
    opacity: 1 !important;
    transform: none !important;
  }

/* ================================================================
   COMPOSED HOME v2 · USE CASES BEAT SCENE (body[data-home-beats])

   Chris's choreography, mirroring the Statement pattern: the Use
   Cases section never appears all at once. Beat A = title + lede
   enter from above and hold alone, then leave as one unit before
   the cards; Beat B = cards 01+02 (orchestrate incoming talent +
   real-time data) in from the left; Beat C = card 03 (work with AI
   on projects) in from above; Beat D = cards 04+05 (manage/respond
   + automate request management) in from the right; Beat E = the
   Explore the platform button settles last. Beats are sequential
   with near-clear spacing (the next starts only as the previous
   motion completes — no overlapping soft crossfades) and are
   scrubbed frame-by-frame by the master beat controller in home.js
   — the section pins, and a gentle pan keeps the active beat framed
   because the full use-cases content is far taller than one
   viewport.

   transform/opacity only. Motion off (lab toggle or reduced motion)
   collapses the scene to a static, fully readable section.
   ================================================================ */

  body[data-home-beats] .uc-scroll { position: relative; height: 560svh; }
  body[data-home-beats] .uc-stage {
    position: sticky; top: 0; height: 100svh; overflow: clip;
    padding: clamp(40px, 7svh, 72px) 0;
  }
  body[data-home-beats] .uc-stage .uc-grid { margin-top: var(--s6); }

  /* The controller owns the five beat units frame-by-frame, so kill
     the time-based reveal behavior on this scene: the head children
     render with their container, and the beat units keep no transform
     or opacity transitions of their own. The vignette inner states
     (metric bars, chat messages) key off .in, which the composed page
     never adds — force them complete so each card enters whole. */
  body[data-home-beats] .use-cases .uc-head,
  body[data-home-beats] .use-cases .uc-card,
  body[data-home-beats] .use-cases .uc-more {
    opacity: 0;
    translate: none;
    transition: none;
    will-change: transform, opacity;
  }
  body[data-home-beats] .use-cases .uc-head [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
  body[data-home-beats] .use-cases .v-bars i { height: var(--h); }
  body[data-home-beats] .use-cases .v-msg { opacity: 1; translate: 0; transition: none; }

  @media (max-width: 860px) {
    body[data-home-beats] .uc-scroll { height: 680svh; }
  }

  /* motion off / reduced motion: the scene unpins and every beat is
     simply visible and readable, in document order */
  html.motion-off body[data-home-beats] .uc-scroll { height: auto; }
  html.motion-off body[data-home-beats] .uc-stage {
    position: relative; height: auto; overflow: visible;
    padding: calc(var(--band) * .8) 0 var(--band);
  }
  html.motion-off body[data-home-beats] .use-cases .uc-head,
  html.motion-off body[data-home-beats] .use-cases .uc-card,
  html.motion-off body[data-home-beats] .use-cases .uc-more {
    opacity: 1 !important;
    transform: none !important;
  }

/* ================================================================
   HOME v2 COMPOSITION · section-to-section handoffs

   Each component finishes its own choreography before this seam takes
   ownership. The empty travel lane gives the outgoing layer room to
   clear; only after it is essentially gone may the incoming layer move.
   There is deliberately no blur or crossfade. The ambient field remains
   continuous, so the short near-clear beat reads as breathing room rather
   than a blackout.
   ================================================================ */

  body[data-home-beats] {
    --home-handoff-travel: 20svh;
    --home-hero-exit-travel: 68svh;
    --home-title-clearance: clamp(88px, 11svh, 118px);
  }

  body[data-home-beats] .home-handoff {
    position: relative;
    height: var(--home-handoff-travel);
    pointer-events: none;
  }

  /* The hero is the one section that must be COMPLETELY off the screen
     before the statement's title starts arriving. The short shared lane
     put the statement head's own beat A underneath the layer fade, so the
     title appeared to snap on a frame after the hero vanished. This longer
     lane pushes the statement region far enough down that the hero is gone,
     an empty ambient beat plays, and only then does the head enter under
     its own choreography. */
  body[data-home-beats] .home-handoff[data-home-handoff="hero-statement"] {
    height: var(--home-hero-exit-travel);
  }

  body[data-home-beats] [data-home-layer] {
    transform-origin: 50% 50%;
    will-change: transform, opacity;
  }

  /* The fixed header gets a full line of calm air before section titles.
     This replaces the earlier 40px minimum that could sit beneath it. */
  body[data-home-beats] .stmt-stage,
  body[data-home-beats] .uc-stage {
    padding-top: var(--home-title-clearance);
  }
  body[data-home-beats] .tt-head {
    padding-top: var(--home-title-clearance);
  }
  body[data-home-beats] .tt-truths {
    min-height: 100svh;
  }

  html.motion-off body[data-home-beats] .home-handoff {
    display: none;
    height: 0;
  }
  html.motion-off body[data-home-beats] .tt-truths {
    min-height: 0;
    display: block;
  }
  html.motion-off body[data-home-beats] [data-home-layer] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    will-change: auto;
  }

  @media (max-width: 860px) {
    body[data-home-beats] {
      --home-handoff-travel: 20svh;
      --home-hero-exit-travel: 58svh;
      --home-title-clearance: clamp(84px, 11svh, 104px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-home-beats] .home-handoff { display: none; height: 0; }
    body[data-home-beats] [data-home-layer] {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      will-change: auto;
    }
  }