/* OgmaQ marketing site — shared stylesheet.
   Extracted from the former inline <style> in index.html so every marketing
   page (/, /product, /pricing) shares one source of truth. Loaded via
   <link rel="stylesheet" href="/assets/landing.css"> — CSP allows 'self'
   stylesheets. Section styles unused on a given page are harmless.
   Behaviour still lives in assets/landing.js (script-src 'self'). */

  :root{
    /* Navy — hero, product tour, CTA, footer */
    --navy-1:#122d42; --navy-2:#0d1f2e; --navy-3:#07121a;
    /* Brand palette — the OgmaQ Refined kit (2026-08-21): Brand Blue #1d486a, hover #173a56 (derived), Mint Accent #9df4b9, Mint Primary #cbf9da; -100/-50 are derived light tints — see docs/brand/README.md */
    --brand-600:#1d486a; --brand-700:#173a56; --brand-400:#9df4b9; --brand-300:#cbf9da;
    --brand-100:#e2edf4; --brand-50:#f2f7fa;
    /* Slate — text + surfaces */
    --ink:#0f172a; --slate-800:#1e293b; --slate-700:#334155; --slate-600:#475569;
    --slate-500:#64748b; --slate-400:#94a3b8; --slate-300:#cbd5e1; --slate-200:#e2e8f0;
    --slate-100:#f1f5f9; --slate-50:#f8fafc; --white:#ffffff;
    /* Operational status — never decorative */
    --red:#dc2626; --red-700:#b91c1c; --red-bg:#fef2f2; --red-line:#fecaca;
    --amber:#d97706; --amber-700:#b45309; --amber-bg:#fffbeb; --amber-line:#fde68a;
    --blue:#1d4ed8; --blue-600:#2563eb; --blue-bg:#eff6ff; --blue-line:#bfdbfe;
    --emerald:#047857; --emerald-500:#10b981; --emerald-bg:#ecfdf5; --emerald-line:#a7f3d0;
    --display:'Manrope',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
    --navy-grad:linear-gradient(165deg,#122d42,#0d1f2e 55%,#07121a);
    /* the one page-shell width — every band (.wrap, section.pad, the tour,
       analytics, pricing, CTA and footer inners) centres on it, so the site's
       left/right margins are changed in ONE place. 1360 was chosen over the
       original 1220 to give the hero's stacked cleanroom + Command Centre
       room to breathe on a laptop without stretching body copy: prose keeps
       its own max-widths (.lede 490, .tour-step p 400, …). */
    --shell:1360px;
    /* hero cleanroom-scene illustration tokens (hs-*) — pale cool surfaces on
       the navy hero; keep every scene colour on a token so the illustration
       can be retinted in one place */
    --hs-floor:#E2EAF8; --hs-zone:#D4E0F3; --hs-plinth:#A4B8DB; --hs-plinth-2:#91A7CE;
    --hs-wall:#EBF0FA; --hs-wall-2:#DDE7F5; --hs-line:#AEC0DF; --hs-grid:#C2D1EA;
    --hs-top:#F0F4FB; --hs-face:#E6EDF8; --hs-face-2:#CBD6E7; --hs-face-3:#BCC9DD;
    --hs-steel:#94A3B8; --hs-steel-2:#64748B; --hs-steel-3:#CBD5E1;
    --hs-shadow:rgba(7,18,26,.10);
    /* illustrative event severities — red critical · amber high · blue medium,
       matching the site's status hues (never decorative) */
    --hs-sev-critical:#f87171; --hs-sev-high:#fbbf24; --hs-sev-medium:#60a5fa;
  }
  *{box-sizing:border-box}
  /* navy canvas so iOS paints the status-bar / overscroll area to match the
     hero and footer instead of a white band above the sticky header */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--navy-1)}
  /* overflow-x: clip (with the hidden fallback for older browsers) — unlike
     hidden, clip removes the horizontally pannable canvas entirely, so mobile
     Safari can't pan right into empty space for content that lives inside
     horizontal scrollers (e.g. the pricing comparison table); and unlike a
     root-level clip it doesn't break the sticky header. */
  body{margin:0;background:var(--white);color:var(--slate-800);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{margin:0}
  a:focus-visible,button:focus-visible{outline:2px solid var(--brand-400);outline-offset:3px;border-radius:6px}
  [tabindex="-1"]:focus{outline:none}
  ::selection{background:var(--brand-600);color:#fff}
  .wrap{max-width:var(--shell);margin:0 auto;padding:0 32px}
  .skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;z-index:100;font:600 13px var(--body)}
  .skip:focus{left:16px;top:16px}

  /* ── buttons ── */
  .btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:9px;font:600 14px var(--body);cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;padding:13px 22px;text-align:center;justify-content:center}
  .btn svg{flex:none}
  .btn-brand{background:var(--brand-600);color:#fff}
  .btn-brand:hover{background:var(--brand-700);transform:translateY(-1px)}
  .btn-ghost-dark{background:rgba(255,255,255,.02);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  .btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
  .btn-ghost-light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--slate-200)}
  .btn-ghost-light:hover{box-shadow:inset 0 0 0 1.5px var(--slate-400)}
  .btn-sm{padding:9px 16px;font-size:13px;border-radius:8px}
  /* plain-text contact address beside the mailto CTAs — the address must stay
     readable/copyable for visitors without a configured mail client */
  .cta-mail{font:400 13px var(--body);color:var(--slate-400);margin:14px 0 0}
  .cta-mail a{color:var(--brand-300);font-weight:600}
  .cta-mail a:hover{text-decoration:underline}

  /* ── logo (v4.21 FINAL v2 kit: the primary lockup — "Ogma" + the castle/Q
     symbol AS the final Q, the kit's own SVG. The symbol extends above and
     below the type by design, so the type occupies ~35% of the asset height
     (378/1092 in the construction master) where the v4.17 lockup's type sat
     much taller — the CSS heights below are larger than v4.19's 44px to keep
     the RENDERED NAME at least as prominent (the v4.19 owner ask). The
     off-white Dark-UI lockup shows on the deep-navy header in EVERY state —
     top, scrolled and menu-open — since the bar stays dark throughout; the
     nav's vertical padding stays 14 (v4.19), the taller art grows into it.
     Mobile (≤820px) carries its own override below. ── */
  .brand{display:inline-flex;align-items:center}
  .brand-logo{display:block;height:56px;width:auto}
  .brand-logo-light{display:none}
  .brand-logo-foot{display:block;height:36px;width:auto}

  /* ── header ──
     The bar is SOLID brand-navy from the very first pixel in every state — top,
     scrolled and menu-open — so it never renders as a transparent strip over the
     hero. (The old transparent-at-top variant let hero content bleed through and
     overlap the logo as it scrolled past.) It stays an opaque navy bar throughout;
     scrolling past the hero only condenses its padding (see header.solid below). */
  header{position:sticky;top:0;z-index:50;transition:box-shadow .3s ease,border-color .3s ease;background:var(--navy-2);border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 12px 30px -20px rgba(2,6,18,.7);padding-top:env(safe-area-inset-top,0px)}
  /* iOS status-bar safe area (notched iPhones only): the inset strip under the
     notch is painted the SAME opaque navy as the header, so the safe area, the
     nav bar and (when open) the menu read as ONE continuous brand-navy band in
     every state — top, scrolled and menu-open. Painting it explicitly from the
     sticky header is more reliable on real iPhone Safari than relying on the
     header's own background to repaint the inset during momentum scroll, and it
     never flips to white. Zero height off iPhone (env → 0). */
  header::before{content:"";position:absolute;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--navy-2);pointer-events:none}
  /* vertical padding only — the shorthand would zero .wrap's horizontal gutters
     (14px, not 18px, since the v4.19 44px lockup: same overall bar height) */
  .nav{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
  .nav-links{display:flex;gap:26px;margin-left:16px}
  .nav-links a{font:500 13px var(--body);color:var(--slate-300);transition:color .15s}
  .nav-links a:hover{color:#fff}
  .nav-cta{margin-left:auto;display:flex;align-items:center;gap:16px}
  .signin{font:600 13px var(--body);color:#e2e8f0;cursor:pointer;transition:color .15s}
  .signin:hover{color:var(--brand-300)}
  /* condensed (scrolled) state — the bar is already solid navy (see the base
     header rule), so scrolling past the hero only condenses the vertical padding;
     the hairline + soft shadow that lift it above the content are always present.
     The nav links, sign-in and logo keep their light-on-navy colours in every
     state, since the background is never light. */
  header.solid .nav{padding-top:12px;padding-bottom:12px}

  /* ── mobile menu (hamburger) ──
     Desktop nav-links + nav-cta collapse into a hamburger ≤820px; the panel
     lives inside the sticky header so it drops down under the bar. Behaviour
     (open/close, ESC, close-on-navigate) is in landing.js — no inline JS. */
  .nav-toggle{display:none;margin-left:auto;align-items:center;justify-content:center;width:42px;height:42px;padding:0;background:transparent;border:0;border-radius:9px;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* the bar stays navy when solid, so the toggle keeps its white icon (no dark override) */
  .nav-toggle-bars{position:relative;display:block;width:22px;height:16px}
  .nav-toggle-bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .18s ease,top .25s ease}
  .nav-toggle-bars i:nth-child(1){top:0}
  .nav-toggle-bars i:nth-child(2){top:7px}
  .nav-toggle-bars i:nth-child(3){top:14px}
  /* open → X, and the header goes solid-navy so the whole top reads as one
     cohesive band (wins over header.solid via source order below) */
  header.menu-open{background:var(--navy-2);border-bottom-color:transparent;box-shadow:none}
  header.menu-open .brand-logo-dark{display:block}
  header.menu-open .brand-logo-light{display:none}
  header.menu-open .nav-toggle{color:#fff}
  header.menu-open .nav-toggle-bars i:nth-child(1){top:7px;transform:rotate(45deg)}
  header.menu-open .nav-toggle-bars i:nth-child(2){opacity:0}
  header.menu-open .nav-toggle-bars i:nth-child(3){top:7px;transform:rotate(-45deg)}
  .mobile-menu{display:none;border-top:1px solid rgba(255,255,255,.09);padding:10px max(20px,env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-right))}
  header.menu-open .mobile-menu{display:block}
  .mm-links{display:flex;flex-direction:column}
  .mm-links a{font:700 17px var(--display);letter-spacing:-.01em;color:#fff;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.08);transition:color .15s}
  .mm-links a:hover,.mm-links a:active{color:var(--brand-300)}
  /* matches aria-current="page" (the page itself) and aria-current="true"
     (section membership on sub-pages like /triage under Product) */
  .mm-links a[aria-current]{color:var(--brand-300)}
  .mm-cta{display:flex;flex-direction:column;gap:12px;margin-top:20px}
  .mm-cta .btn{width:100%;padding:14px 22px;font-size:15px}
  .mm-signin{font:600 14px var(--body);color:var(--slate-300);text-align:center;padding:8px;transition:color .15s}
  .mm-signin:hover{color:var(--brand-300)}

  /* ── operational blueprint backdrop ───────────────────────────────────────
     The shared decorative background for the navy marketing surfaces. Replaces
     the oversized Q-mark watermarks (.hero-chevron / .page-hero-chev /
     .sec-aside .chev / .cta-chev), which read as anonymous concentric rings
     because their large negative offsets pushed the mark's tail — the only
     part that identifies it as the Q — outside the viewport.

     Structure: one empty <div class="bp bp--variant" aria-hidden="true"> per
     surface. ::before paints a fine orthogonal facility grid (CSS gradients,
     no DOM, no request); ::after paints that variant's sparse floor-plan
     geometry as an inline SVG data URI, so every composition lives in this
     stylesheet instead of being hand-copied into 16 pages. Both layers are
     masked so the motif fades out before it reaches dense copy, the hero
     illustration, or a section boundary.

     Palette is brand-only: --brand-300 (#cbf9da) linework with a single
     --brand-400 (#9df4b9) emphasised node. Status hues are deliberately never
     used here — a static marketing page must not imply an active alarm state.

     Geometry vocabulary: orthogonal room boundaries, 90° route changes, small
     square status nodes, short connectors, partial frames. No rings, no
     concentric shapes, no circles. */
  .bp{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .bp::before,.bp::after{content:"";position:absolute;inset:0}
  /* facility grid — 64px cells on desktop */
  .bp::before{
    background-image:
      repeating-linear-gradient(to right,rgba(203,249,218,.055) 0 1px,transparent 1px 64px),
      repeating-linear-gradient(to bottom,rgba(203,249,218,.055) 0 1px,transparent 1px 64px);
  }
  /* geometry layer — each variant supplies its own composition */
  .bp::after{background-repeat:no-repeat;background-position:center;background-size:cover}

  /* hero — a room cluster along the lower edge with a dashed route running out
     of it, plus wall fragments entering from the left and right margins. The
     grid is punched out around the illustration (radial mask) so it stays the
     focal point.

     This layer is cover-scaled, so it centre-crops as the viewport narrows and
     the viewBox cannot be read by eye. The copy was measured back into viewBox
     coordinates at 768/1024/1280/1440: text and controls occupy x 164..1276,
     y 96..705, and the sticky header covers y 2..70. Everything below is drawn
     outside that — x<164, x>1276 or y>705 — so no route or node can land on a
     word at any width. The side clusters are cropped away below 1280 (the
     visible window at 768 is only x 449..991), which is why the lower band
     carries the composition on its own: keep the parts that must always read
     inside x 449..991. Re-measure before moving anything inward. */
  .bp--hero::before{-webkit-mask-image:radial-gradient(112% 88% at 70% 46%,transparent 30%,#000 76%);mask-image:radial-gradient(112% 88% at 70% 46%,transparent 30%,#000 76%)}
  .bp--hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 760' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M0 496 H128 V760' opacity='.16'/%3E%3Cpath d='M40 588 H128' opacity='.10'/%3E%3Cpath d='M128 496 V376' opacity='.13' stroke-dasharray='3 6'/%3E%3Cpath d='M1440 232 H1312 V64' opacity='.13'/%3E%3Cpath d='M1352 152 H1440' opacity='.07'/%3E%3Cpath d='M300 760 V722 H528' opacity='.15'/%3E%3Cpath d='M528 722 V760' opacity='.09'/%3E%3Cpath d='M528 736 H744' opacity='.12' stroke-dasharray='3 6'/%3E%3Cpath d='M744 736 V760' opacity='.08'/%3E%3Cpath d='M864 760 V716 H1092' opacity='.10'/%3E%3C/g%3E%3Cg fill='%23cbf9da'%3E%3Crect x='125' y='493' width='6' height='6' opacity='.48'/%3E%3Crect x='1309' y='229' width='6' height='6' opacity='.38'/%3E%3Crect x='525' y='719' width='6' height='6' opacity='.46'/%3E%3C/g%3E%3Crect x='741' y='733' width='8' height='8' fill='%239df4b9' opacity='.5'/%3E%3C/svg%3E")}

  /* CTA — two corner fragments: a room cluster routing out of the lower-left
     and a partial frame entering from the upper-right, so the eye is led
     inward toward the heading and buttons without anything being drawn behind
     them. Anchored at a fixed pixel size to each corner rather than scaled to
     cover, because a cover-scaled composition centre-crops as the viewport
     narrows — which is exactly where the copy sits.

     The heights are the constraint, not the widths. The CTA copy block is
     horizontally centred and reflows, so the only space that is reliably free
     at every width is the padding strip above the eyebrow and below the last
     button — measured at ≥88px top and ≥57px bottom across the tested
     viewports. Each layer is kept shorter than its band so no route or node
     can ever land on a word; widen a layer freely, but do not make it taller
     without re-measuring. */
  .bp--cta::before{-webkit-mask-image:radial-gradient(90% 130% at 50% 50%,transparent 22%,#000 72%);mask-image:radial-gradient(90% 130% at 50% 50%,transparent 22%,#000 72%)}
  .bp--cta::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='52' viewBox='0 0 236 52' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M0 22 H84 V52' opacity='.15'/%3E%3Cpath d='M36 38 H84' opacity='.09'/%3E%3Cpath d='M84 34 H150 V52' opacity='.10'/%3E%3Cpath d='M84 22 V8 H196' opacity='.13' stroke-dasharray='3 6'/%3E%3C/g%3E%3Crect x='81' y='19' width='6' height='6' fill='%23cbf9da' opacity='.42'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='212' height='78' viewBox='0 0 212 78' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M212 44 H128 V0' opacity='.13'/%3E%3Cpath d='M212 68 H170 V44' opacity='.09' stroke-dasharray='3 6'/%3E%3Cpath d='M150 22 H128' opacity='.08'/%3E%3C/g%3E%3Crect x='125' y='41' width='6' height='6' fill='%23cbf9da' opacity='.38'/%3E%3Crect x='166' y='64' width='8' height='8' fill='%239df4b9' opacity='.48'/%3E%3C/svg%3E");
    background-position:left bottom,right top;
    background-size:236px 52px,212px 78px;
  }

  /* card — the quietest variant. Geometry is deliberately omitted: the
     regulatory-boundary note is a dense block of small copy that fills the
     card at every width, so anything drawn inside it lands on a word. The
     masked grid alone is the whole treatment. */
  .bp--card::before{-webkit-mask-image:linear-gradient(145deg,transparent 34%,#000 88%);mask-image:linear-gradient(145deg,transparent 34%,#000 88%)}
  .bp--card::after{background-image:none}

  /* sub-page hero — a single corner frame plus the grid; sub-pages carry dense
     copy, so this variant deliberately adds almost nothing. */
  .bp--page::before{-webkit-mask-image:radial-gradient(100% 120% at 84% 8%,#000 12%,transparent 74%);mask-image:radial-gradient(100% 120% at 84% 8%,#000 12%,transparent 74%)}
  .bp--page::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 340' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M1180 0 V104 H1440' opacity='.13'/%3E%3Cpath d='M1256 48 H1352 V104' opacity='.08'/%3E%3Cpath d='M1180 104 V180' opacity='.07' stroke-dasharray='3 6'/%3E%3C/g%3E%3Crect x='1177' y='101' width='6' height='6' fill='%23cbf9da' opacity='.4'/%3E%3C/svg%3E")}

  /* mobile — a narrower, deliberately simplified composition per variant
     rather than a scaled-down desktop drawing (which turns to noise), plus a
     tighter 40px grid so cells still read at phone widths. */
  @media (max-width:760px){
    .bp::before{
      background-image:
        repeating-linear-gradient(to right,rgba(203,249,218,.05) 0 1px,transparent 1px 40px),
        repeating-linear-gradient(to bottom,rgba(203,249,218,.05) 0 1px,transparent 1px 40px);
    }
    /* hero — grid only. The phone hero is a full-bleed stacked column
       (eyebrow, heading, paragraph, two buttons, illustration) with no side
       gutter, so there is nowhere to draw: measured across 320→430, the only
       space free of both the copy and the sticky header is y 36..53 and
       y 610..620 of the 620-unit box — under 9 CSS px each. Anything placed
       there lands on a word as soon as the text reflows, so the geometry layer
       is dropped and the fading grid carries the surface alone. */
    .bp--hero::before{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 62%);mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 62%)}
    .bp--hero::after{background-image:none}
    .bp--cta::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 46%);mask-image:linear-gradient(to bottom,transparent 0%,#000 46%)}
    .bp--cta::after{
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='48' viewBox='0 0 148 48' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M0 20 H56 V48' opacity='.14'/%3E%3Cpath d='M56 20 V8 H120' opacity='.12' stroke-dasharray='3 6'/%3E%3C/g%3E%3Crect x='53' y='17' width='5' height='5' fill='%23cbf9da' opacity='.42'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='76' viewBox='0 0 132 76' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M132 32 H80 V0' opacity='.12'/%3E%3Cpath d='M132 58 H104' opacity='.09' stroke-dasharray='3 6'/%3E%3C/g%3E%3Crect x='77' y='29' width='5' height='5' fill='%23cbf9da' opacity='.38'/%3E%3Crect x='100' y='54' width='7' height='7' fill='%239df4b9' opacity='.42'/%3E%3C/svg%3E");
      background-size:148px 48px,132px 76px;
    }
    .bp--page::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 300' fill='none'%3E%3Cg stroke='%23cbf9da' stroke-width='1'%3E%3Cpath d='M300 0 V72 H390' opacity='.12'/%3E%3C/g%3E%3Crect x='297' y='69' width='5' height='5' fill='%23cbf9da' opacity='.38'/%3E%3C/svg%3E")}
  }

  /* ── hero ── */
  .hero{position:relative;background:var(--navy-grad);overflow:hidden;margin-top:calc(-73px - env(safe-area-inset-top,0px));padding-top:calc(73px + env(safe-area-inset-top,0px))}

  /* ── sub-page hero (navy top band on /product, /pricing) ──
     Reuses the SAME negative-margin tuck as .hero so the iOS safe-area inset is
     filled with navy on every page — a light-topped page never shows a navy
     band under the notch because its top section IS navy. Header stays
     transparent→solid uniformly across all pages. */
  .page-hero{position:relative;background:var(--navy-grad);overflow:hidden;margin-top:calc(-73px - env(safe-area-inset-top,0px));padding-top:calc(73px + env(safe-area-inset-top,0px))}
  .page-hero-glow{position:absolute;inset:0;background:radial-gradient(620px 380px at 82% 4%,rgba(157,244,185,.14),transparent 60%)}
  .page-hero-in{position:relative;max-width:var(--shell);margin:0 auto;padding:60px 32px 58px}
  .page-hero .eyebrow{color:var(--brand-300)}
  .page-hero h1{font:800 clamp(30px,4vw,44px)/1.1 var(--display);letter-spacing:-.022em;color:#fff;margin-top:14px;max-width:740px}
  .page-hero .lede{font:400 16px/1.65 var(--body);color:var(--slate-300);margin-top:16px;max-width:560px}
  .page-hero-ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
  .hero-glow{position:absolute;inset:0;background:radial-gradient(680px 420px at 78% 8%,rgba(157,244,185,.16),transparent 60%),radial-gradient(560px 360px at 12% 92%,rgba(203,249,218,.08),transparent 60%)}
  /* copy ~38% · visual ~62% — the animated workflow needs the wider column */
  .hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.64fr) minmax(0,1.04fr);gap:44px;align-items:center;padding-top:48px;padding-bottom:64px}
  .pill{display:inline-flex;align-items:center;border-radius:999px;background:rgba(157,244,185,.1);box-shadow:inset 0 0 0 1px rgba(203,249,218,.22);padding:5px 12px}
  .pill span{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-300)}
  h1{font:800 clamp(36px,4.6vw,54px)/1.07 var(--display);letter-spacing:-.022em;color:#fff;margin-top:22px}
  h1 .signal{position:relative;white-space:nowrap;color:var(--brand-300)}
  h1 .signal .u{position:absolute;left:1px;right:2px;bottom:2px;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400))}
  .hero p.lede{font:400 16px/1.65 var(--body);color:var(--slate-300);margin-top:20px;max-width:490px}
  .hero-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .hero-meta{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap}
  .hero-meta .t{font:400 11px var(--body);color:var(--slate-400)}
  .hero-meta .div{width:1px;height:13px;background:rgba(255,255,255,.14)}
  .hero-meta .tag{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400)}

  /* ── hero escalation-workflow visual ──
     Layout: the isometric cleanroom scene STACKED above the Command Centre —
     ONE composition at every breakpoint (2026-08; it was scene | Centre
     side-by-side above 640px until then). A raised issue now travels DOWN
     the page into the board, and the board gets the full column width, so it
     reads as the laptop-shaped dashboard it is instead of a narrow sidebar.
     An absolute connector overlay + two floating issue-card slots sit on
     top. All geometry-dependent positioning (cards, connector paths) is
     computed in landing.js from live rects, so every breakpoint shares one
     system — the stack is derived there, never hard-coded. */
  .hero-visual{position:relative;min-width:0}
  .hero-visual-in{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:16px}
  /* the scene keeps its own ceiling: a wide hero column must not blow the
     1.45:1 illustration up into a wall of floor — the width belongs to the
     Command Centre below it, which is the point of the stack */
  .hs-scene{flex:none;width:100%;max-width:480px;min-width:0;margin:0 auto;padding-top:8px}
  .hs-svg{display:block;width:100%;height:auto}
  .hs-note{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-400);text-align:right;margin:10px 2px 0}

  /* compact Command Centre card (reuses the shared .card chrome) */
  .card{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#fff;box-shadow:0 34px 70px -22px rgba(2,6,23,.6);overflow:hidden}
  .card-head{display:flex;align-items:center;gap:7px;padding:10px 11px;border-bottom:1px solid var(--slate-100);background:var(--slate-50)}
  .card-head .t{font:800 11.5px var(--display);color:var(--slate-800);white-space:nowrap}
  .demo-flag{margin-left:auto;font:700 7.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--slate-600);background:var(--slate-100);border-radius:4px;padding:2px 5px;white-space:nowrap}
  .card-body{padding:13px}
  /* the Command Centre spans the hero column and lays its board out WIDE:
     an instrument column (the KPI tiles, with the activity line settled
     under them) beside the recent-escalations list. Scoped to .hero-cc so
     the shared .card chrome the product tour reuses is untouched. */
  .hero-cc{flex:none;width:100%;position:relative;z-index:3}
  /* The board's height is FIXED by its instrument column — the escalations
     panel stretches into it and clips (it already has overflow:hidden). The
     list swaps a row in and out every few seconds and the two transitions
     overlap, so a panel that sized itself to its content would resize the
     board, and — now that the visual is the taller hero column — nudge the
     whole page down and back on every cycle (measured: 12–14 px). The rows
     are sized to hold three entries plus that overlap. */
  .hero-cc .card-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:130px auto;gap:12px 16px;padding:14px 15px}
  .hero-cc .attn{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .hero-cc .attn-row{padding:6px 7px}
  .hero-cc .kpis{grid-column:1;grid-row:1;grid-auto-rows:1fr}
  .hero-cc .kpi{padding:9px 11px;display:flex;flex-direction:column;justify-content:center}
  .hero-cc .kpi .v{font-size:22px}
  /* reserved for two lines so the activity caption swapping between the
     opening sentence and a per-scenario one can't move the board either */
  .hero-cc .cc-activity{grid-column:1;grid-row:2;min-height:40px;margin-top:0}
  .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{border:1px solid var(--slate-200);border-radius:10px;padding:8px 10px}
  .kpi.accent{border-color:var(--brand-100);background:var(--brand-50)}
  .kpi .k{font:700 8.5px var(--body);text-transform:uppercase;letter-spacing:.09em;color:var(--slate-500);white-space:nowrap}
  .kpi.accent .k{color:var(--brand-700)}
  .kpi .v{font:800 20px/1 var(--display);color:var(--slate-800);margin-top:5px}
  .kpi .v.red{color:var(--red)} .kpi .v.amber{color:var(--amber)} .kpi .v.teal{color:var(--brand-600)}
  .kpi .v span{display:inline-block}
  .kpi .v span.bump{animation:hsBump .5s ease}
  .attn{margin-top:11px;border:1px solid var(--slate-200);border-radius:10px;overflow:hidden}
  .attn-h{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--slate-100)}
  .attn-h .t{font:700 11px var(--display);color:var(--slate-800)}
  .attn-h .n{font:700 9px var(--mono);background:var(--slate-100);color:var(--slate-600);border-radius:999px;padding:1px 7px}
  .attn-list{padding:3px 5px}
  .attn-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:7px 7px;border-radius:8px;transition:background .45s ease}
  .attn-row .name{font:600 10.5px/1.35 var(--body);color:var(--slate-700)}
  /* slate-600 (not -500) clears WCAG AA at 8.5px on BOTH white and the .hl
     brand-50 highlight background */
  .attn-row .id{font:400 8.5px var(--mono);color:var(--slate-600);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attn-row.hl{background:var(--brand-50)}
  .attn-row.enter{opacity:0;transform:translateY(-5px);max-height:0;overflow:hidden}
  /* 76px cap clears a worst-case 3-line row during the entrance window; the
     classes are stripped once settled (nextPhase) so height is then natural */
  .attn-row.enter.in{opacity:1;transform:none;max-height:76px;transition:opacity .4s ease,transform .4s ease,max-height .4s ease}
  .attn-row.out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease,padding .3s ease}
  /* .sev-tag / .sev-high / .sev-med are defined once in the product-tour
     section below and shared here; the hero adds only the critical tier */
  .sev-crit{background:var(--red-bg);color:var(--red-700);box-shadow:inset 0 0 0 1px var(--red-line)}
  .cc-activity{margin-top:11px;border-top:1px solid var(--slate-100);padding-top:9px;display:flex;align-items:center;gap:7px}
  .cc-activity i{flex:none;width:5px;height:5px;border-radius:999px;background:var(--emerald-500);animation:eqBlink 1.8s ease-in-out infinite}
  .cc-activity span{font:500 10px/1.45 var(--body);color:var(--slate-500);transition:opacity .18s ease}
  .cc-activity span.swap{opacity:0}

  /* connector overlay (no viewBox — coordinates are CSS px of the overlay) */
  .hs-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
  .hs-connectors [data-hs-channel]{stroke:var(--brand-400);stroke-width:1.5;stroke-dasharray:3 6;stroke-linecap:round;opacity:0;transition:opacity .5s ease}
  .hs-connectors.channel-on [data-hs-channel]{opacity:.28}
  .hs-connectors [data-hs-local]{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:0;transition:opacity .3s ease}
  .hs-connectors [data-hs-route]{stroke:var(--brand-400);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s ease}
  .hs-connectors [data-hs-anchor]{fill:currentColor;opacity:0;transition:opacity .3s ease}
  .hs-connectors [data-hs-pulse]{fill:var(--brand-300);opacity:0}
  .hs-connectors .on{opacity:1}
  .hs-connectors .fade{opacity:0 !important}

  /* floating issue cards — structured operational notices, not push toasts */
  .hs-card{position:absolute;z-index:4;display:flex;gap:9px;align-items:flex-start;max-width:212px;background:rgba(18,45,66,.94);border:1px solid rgba(203,249,218,.28);border-radius:11px;padding:9px 11px;box-shadow:0 16px 34px -12px rgba(2,6,23,.75);opacity:0;transform:translateY(9px);transition:opacity .36s ease,transform .36s ease}
  /* the display:flex above outranks the UA [hidden]{display:none}; restore it
     so a hidden card slot leaves layout + hit-testing entirely */
  .hs-card[hidden]{display:none}
  .hs-card.on{opacity:1;transform:none}
  .hs-card-ic{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
  .hs-card-ic svg{display:block}
  .hs-card-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
  .hs-card-t1{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .hs-card-t1 b{font:600 12px/1.3 var(--body);color:#fff}
  .hs-card-t1 em{font:700 8.5px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em}
  .hs-card-t2{font:400 11px/1.4 var(--body);color:var(--slate-400)}
  /* namespaced hs-sev-* so they never collide with the .sev-high/.sev-med
     chip classes shared with the product tour */
  .hs-card.hs-sev-critical .hs-card-ic,.hs-card.hs-sev-critical .hs-card-t1 em{color:var(--hs-sev-critical)}
  .hs-card.hs-sev-high .hs-card-ic,.hs-card.hs-sev-high .hs-card-t1 em{color:var(--hs-sev-high)}
  .hs-card.hs-sev-medium .hs-card-ic,.hs-card.hs-sev-medium .hs-card-t1 em{color:var(--hs-sev-medium)}

  /* scene hotspots + ambient motion */
  .hs-spot{color:var(--brand-400)}
  .hs-spot .hs-core{fill:var(--brand-400);opacity:.55;transition:opacity .3s ease,fill .3s ease}
  .hs-spot .hs-ring,.hs-spot .hs-ring2{fill:none;stroke:var(--brand-300);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
  .hs-spot.on .hs-core{fill:currentColor;opacity:1}
  .hs-spot.on .hs-ring{stroke:currentColor;animation:hsPing 1.6s ease-out infinite}
  .hs-spot.on .hs-ring2{stroke:currentColor;animation:hsPing 1.6s ease-out .5s infinite}
  .hs-led{animation:eqBlink 2.6s ease-in-out infinite}
  .hs-op{transform-box:fill-box;transform-origin:center bottom;animation:hsBob 7s ease-in-out infinite}
  .hs-op-b{animation-delay:2.2s}

  /* ── trust strip ── */
  .trust{border-bottom:1px solid var(--slate-200);background:var(--slate-50)}
  .trust-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:22px;padding-bottom:22px;text-align:center}
  .trust-label{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500)}
  .trust-roles{display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap}
  .trust-role{font:700 15px var(--display);color:var(--slate-500);letter-spacing:-.01em}

  /* ── section shell ── */
  section.pad{max-width:var(--shell);margin:0 auto;padding:88px 32px}
  .eyebrow{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-600)}
  .head-center{text-align:center;max-width:640px;margin:0 auto}
  h2.sec{font:800 clamp(28px,3.4vw,36px)/1.14 var(--display);letter-spacing:-.02em;color:var(--ink);margin-top:12px}
  .sec-sub{font:400 15px/1.6 var(--body);color:var(--slate-600);margin-top:14px}

  /* ── lifecycle stepper ── */
  .life-track{position:relative;margin-top:52px;padding:0 6px}
  .life-line{position:absolute;left:6px;right:6px;top:15px;height:3px;border-radius:999px;background:var(--slate-200)}
  .life-fill{position:absolute;left:6px;top:15px;height:3px;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400));transition:width .1s linear}
  .life-nodes{position:relative;display:flex;justify-content:space-between}
  .life-node{display:flex;flex-direction:column;align-items:center;width:16.6%;transition:.4s}
  .life-dot{width:32px;height:32px;border-radius:999px;background:#fff;border:2px solid var(--slate-200);display:flex;align-items:center;justify-content:center;color:var(--slate-300);transition:.4s}
  .life-name{font:700 12px var(--display);color:var(--slate-800);margin-top:12px}
  .life-cap{font:400 11.5px/1.4 var(--body);color:var(--slate-500);margin-top:3px;text-align:center}

  /* ── product tour ── */
  .tour{position:relative;background:var(--navy-3);height:240vh}
  .tour-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
  .tour-glow{position:absolute;inset:0;background:radial-gradient(700px 480px at 82% 30%,rgba(157,244,185,.1),transparent 62%)}
  .tour-grid{position:relative;max-width:var(--shell);margin:0 auto;padding:0 32px;width:100%;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;align-items:center}
  .tour-h2{font:800 clamp(24px,2.6vw,30px)/1.16 var(--display);letter-spacing:-.02em;color:#fff;margin:12px 0 0}
  .tour-steps{margin-top:26px;display:flex;flex-direction:column;gap:22px}
  .tour-step{padding-left:16px;border-left:2px solid rgba(255,255,255,.12);transition:.35s}
  .tour-step.on{border-left-color:var(--brand-300)}
  .tour-step h3{font:800 28px var(--display);letter-spacing:-.01em;color:#fff;opacity:.5;transition:.35s}
  .tour-step p{font:400 15px/1.65 var(--body);color:var(--slate-400);margin-top:9px;max-width:400px;opacity:.5;transition:.35s}
  .tour-step.on h3,.tour-step.on p{opacity:1}
  .tour-pips{margin-top:32px;display:flex;gap:6px}
  .tour-pip{width:22px;height:4px;border-radius:999px;background:rgba(255,255,255,.16);transition:.3s}
  .tour-pip.on{background:var(--brand-300)}
  .tour-stage{position:relative;height:480px}
  .tour-panel{position:absolute;inset:0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;pointer-events:none;display:flex;flex-direction:column;justify-content:center}
  .tour-panel.on{opacity:1;transform:none;pointer-events:auto}

  /* mini product chrome (shared) */
  .mini{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#fff;box-shadow:0 34px 70px -22px rgba(2,6,23,.6);overflow:hidden}
  .mini-head{display:flex;align-items:center;gap:8px;padding:13px 17px;border-bottom:1px solid var(--slate-100);background:var(--slate-50)}
  .mini-head .t{font:800 13.5px var(--display);color:var(--slate-800)}
  .mini-head .id{font:600 10px var(--mono);color:var(--slate-500)}
  .mini-head .badge{margin-left:auto;font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.1em;border-radius:4px;padding:2px 6px}
  .mini-body{padding:20px}
  .kpi3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .kpi3 .cell{border:1px solid var(--slate-200);border-radius:10px;padding:15px}
  .kpi3 .cell.accent{border-color:var(--brand-100);background:var(--brand-50)}
  .kpi3 .k{font:700 9.5px var(--body);text-transform:uppercase;letter-spacing:.09em;color:var(--slate-500)}
  .kpi3 .cell.accent .k{color:var(--brand-700)}
  .kpi3 .v{font:800 29px/1 var(--display);color:var(--slate-800);margin-top:8px}
  .kpi3 .v.amber{color:var(--amber)} .kpi3 .v.teal{color:var(--brand-600)}
  .kpi3 .s{font:400 11px var(--body);color:var(--slate-500);margin-top:4px}
  .kpi3 .s.teal{color:var(--brand-600)}
  .alert{margin-top:14px;border:1px solid var(--red-line);background:var(--red-bg);border-radius:10px;padding:13px 15px;display:flex;align-items:center;gap:10px}
  .alert .m{font:600 13px var(--body);color:var(--red-700)}
  .alert .s{font:400 12.5px var(--body);color:#7f1d1d}
  .row-list{margin-top:14px;border:1px solid var(--slate-200);border-radius:10px;overflow:hidden}
  .row-list .h{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--slate-100)}
  .row-list .h .t{font:700 13px var(--display);color:var(--slate-800)}
  .row-list .h .n{font:700 9px var(--mono);background:var(--slate-100);color:var(--slate-600);border-radius:999px;padding:1px 7px}
  .row-item{display:flex;align-items:center;justify-content:space-between;padding:11px 15px}
  .row-item + .row-item{border-top:1px solid var(--slate-100)}
  .row-item .l{display:flex;align-items:center;gap:8px;min-width:0}
  .sev-tag{font:600 10px var(--mono);border-radius:4px;padding:1px 6px;flex:none}
  .sev-high{background:var(--amber-bg);color:var(--amber-700);box-shadow:inset 0 0 0 1px var(--amber-line)}
  .sev-med{background:var(--blue-bg);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue-line)}
  .row-item .name{font:600 12.5px var(--body);color:var(--slate-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
  .row-item .age{font:500 11.5px var(--body);color:var(--slate-500);flex:none}
  /* stepper (issue detail) */
  .stepper{display:flex;align-items:center}
  .step{display:flex;align-items:center;gap:6px}
  .step .d{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 11px var(--body)}
  .step .d.done{background:var(--brand-600);color:#fff}
  .step .d.todo{background:#fff;border:2px solid var(--slate-200)}
  .step .lab{font:600 12px var(--body)}
  .step .lab.done{color:var(--brand-700)} .step .lab.todo{color:var(--slate-400)}
  .step-line{flex:1;height:2px;margin:0 8px}
  .step-line.done{background:var(--brand-600)} .step-line.todo{background:var(--slate-200)}
  .detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;margin-top:20px}
  .as-found{border:1px solid var(--slate-200);border-radius:10px;padding:15px}
  .as-found .k{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--slate-400)}
  .as-found .txt{font:400 12.5px/1.6 var(--body);color:var(--slate-600);margin-top:6px}
  .flag-row{margin-top:11px;display:flex;flex-wrap:wrap;gap:5px}
  .flag{font:500 9.5px var(--body);color:var(--red-700);background:var(--red-bg);border-radius:999px;padding:2px 7px}
  .hold{border:1px solid var(--navy-1);border-radius:10px;padding:15px;background:linear-gradient(180deg,#122d42,#07121a)}
  .hold .top{display:flex;align-items:center;justify-content:space-between}
  .hold .k{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--slate-400)}
  .hold .pct{font:700 12.5px var(--display);color:var(--brand-300)}
  .hold .items{margin-top:10px;display:flex;flex-direction:column;gap:7px}
  .hold .it{display:flex;align-items:center;gap:7px}
  .hold .it .box{width:12px;height:12px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center}
  .hold .it .box.done{background:var(--brand-600)}
  .hold .it .box.todo{border:1.5px solid var(--slate-600)}
  .hold .it .lab{font:500 11.5px var(--body)}
  .hold .it .lab.done{color:var(--slate-300)} .hold .it .lab.todo{color:var(--slate-400)}
  /* triage board */
  .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:380px}
  .col{border-radius:10px;padding:12px}
  .col.screen{border:1px solid var(--slate-200);background:var(--slate-50)}
  .col.info{border:1px solid var(--amber-line);background:var(--amber-bg)}
  .col.decide{border:1px solid #ddd6fe;background:#f5f3ff}
  .col-h{display:flex;align-items:center;gap:6px;margin-bottom:9px}
  .col-h .dt{width:6px;height:6px;border-radius:999px}
  .col-h .lab{font:700 11px var(--body)}
  .col-h .n{margin-left:auto;font:700 9px var(--mono)}
  .col.screen .dt{background:var(--slate-500)} .col.screen .lab{color:var(--slate-700)} .col.screen .n{color:var(--slate-500)}
  .col.info .dt{background:var(--amber)} .col.info .lab{color:#92400e} .col.info .n{color:var(--amber-700)}
  .col.decide .dt{background:#7c3aed} .col.decide .lab{color:#6d28d9} .col.decide .n{color:#7c3aed}
  .tcard{border:1px solid var(--slate-200);border-radius:8px;background:#fff;padding:12px}
  .tcard .title{font:600 12.5px var(--body);color:var(--slate-700);margin-top:8px}
  .tcard .id{font:400 8.5px var(--mono);color:var(--slate-500);margin-top:5px}
  .tcard .go{margin-top:8px;display:flex;justify-content:flex-end}
  .tcard .go span{font:600 9px var(--body);color:#fff;background:var(--brand-600);border-radius:6px;padding:4px 9px}
  .col-empty{font:400 10px var(--body);color:var(--amber-700);opacity:.6;text-align:center;padding:20px 0}

  /* ── roles ── */
  .roles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
  .role-card{border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:24px;transition:border-color .15s,box-shadow .15s,transform .15s}
  .role-card:hover{border-color:var(--slate-300);box-shadow:0 12px 26px -14px rgba(15,23,42,.24);transform:translateY(-3px)}
  .role-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
  .role-ic.mfg{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-600)}
  .role-ic.qa{background:#eef2ff;border:1px solid #e0e7ff;color:#4f46e5}
  .role-ic.lead{background:var(--blue-bg);border:1px solid #dbeafe;color:var(--blue-600)}
  .role-card h3{font:800 16px var(--display);color:var(--ink);margin-top:16px}
  .role-card p{font:400 13px/1.6 var(--body);color:var(--slate-600);margin-top:8px}

  /* ── analytics (demo) ── */
  .an{background:var(--slate-50);border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}
  .an-inner{max-width:var(--shell);margin:0 auto;padding:88px 32px 0}
  .an-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:40px}
  .an-side{display:grid;gap:16px;align-content:stretch}
  .an-card{border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:18px 18px 16px;box-shadow:0 18px 50px -32px rgba(13,27,42,.35)}
  .an-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .an-title{font:800 13.5px var(--display);color:var(--slate-800)}
  .an-sub{font:400 11.5px var(--body);color:var(--slate-500);margin-top:2px}
  .an-legend{display:flex;gap:14px;flex-wrap:wrap;padding-top:2px}
  .an-key{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--body);color:var(--slate-600)}
  .an-key i{width:8px;height:8px;border-radius:2px;flex:none}
  /* weekly stacked columns — plain HTML/CSS so labels keep a real pixel size on phones */
  .an-plot{position:relative;height:224px;margin-top:16px}
  .an-gl{position:absolute;left:30px;right:0;height:1px;background:var(--slate-100)}
  .an-gl.base{background:var(--slate-200)}
  .an-yl{position:absolute;left:0;width:22px;text-align:right;font:500 10px var(--mono);color:var(--slate-400);line-height:1;transform:translateY(50%)}
  .an-cols{position:absolute;left:30px;right:0;top:6px;bottom:20px;display:flex;align-items:flex-end;gap:4px}
  .an-cw{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
  .an-col{width:100%;max-width:22px;display:flex;flex-direction:column;gap:2px;transform-origin:bottom;transform:scaleY(0);transition:transform .8s cubic-bezier(.22,1,.36,1)}
  .reveal.on .an-col{transform:scaleY(1)}
  .an-col i{display:block;width:100%;min-height:3px}
  .an-col i:first-child{border-radius:3px 3px 0 0}
  .an-col .hi{background:var(--amber)}
  .an-col .md{background:var(--blue-600)}
  .an-col .lo{background:#059669}
  .an-xl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font:500 9.5px var(--mono);color:var(--slate-400);white-space:nowrap}
  .an-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--slate-100);font:500 12px var(--body);color:var(--slate-600)}
  .an-note svg{flex:none;color:var(--brand-600)}
  /* aging / workload horizontal bars */
  .an-rows{margin-top:14px;display:flex;flex-direction:column;gap:9px}
  .an-row{display:grid;grid-template-columns:88px minmax(0,1fr) 20px;align-items:center;gap:10px}
  .an-rl{font:500 11px var(--body);color:var(--slate-500);white-space:nowrap}
  .an-rv{font:600 12px var(--body);color:var(--slate-700);text-align:right;font-variant-numeric:tabular-nums}
  .an-hbar{height:10px;border-radius:999px;background:var(--slate-100);overflow:hidden}
  .an-hbar i{display:block;height:100%;border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1)}
  .reveal.on .an-hbar i{transform:scaleX(1)}
  .demo-tag{text-align:center;padding:26px 0 34px}
  .demo-tag span{font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--slate-500);background:#fff;border:1px solid var(--slate-200);border-radius:4px;padding:3px 8px}

  /* ── configurability ── */
  .cfg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .cfg-list{margin:18px 0 0;padding:0;list-style:none}
  .cfg-list li{display:flex;gap:10px;padding:7px 0;align-items:baseline;font:400 14px var(--body);color:var(--slate-600)}
  .cfg-list li::before{content:"—";color:var(--brand-600);flex-shrink:0}
  .vig{border:1px solid var(--slate-200);border-radius:16px;background:#fff;padding:18px;box-shadow:0 18px 50px -32px rgba(13,27,42,.35)}
  .vig-title{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500);margin-bottom:14px}
  .vocab-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .vocab-btn{border:1.5px solid var(--slate-200);background:#fff;border-radius:999px;padding:6px 14px;font:600 12px var(--body);color:var(--slate-500);cursor:pointer;transition:.15s}
  .vocab-btn.on{border-color:var(--brand-600);background:var(--brand-600);color:#fff}
  .vocab-btn:hover:not(.on){border-color:var(--slate-400)}
  .vig-card{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:13px 14px;margin-bottom:9px}
  .vig-card:last-child{margin-bottom:0}
  .vig-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
  .vig-name{font:600 13.5px var(--body);color:var(--ink)}
  .vig-sub{font:400 11.5px/1.5 var(--body);color:var(--slate-500);margin-top:4px}
  .chip{font:600 10.5px var(--mono);letter-spacing:.06em;padding:2px 9px;border-radius:999px;flex-shrink:0}
  .chip-info{background:var(--brand-50);color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-100)}
  .chip-high{background:var(--amber-bg);color:var(--amber-700);box-shadow:inset 0 0 0 1px var(--amber-line)}
  .chip-ok{background:var(--emerald-bg);color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald-line)}
  .chip-mute{background:var(--slate-100);color:var(--slate-600);box-shadow:inset 0 0 0 1px var(--slate-200)}

  /* ── triage deep-dive cross-link (/product "Go deeper" card) ── */
  .pilot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center;border:1px solid var(--slate-200);border-radius:16px;background:#fff;padding:24px 26px;box-shadow:0 18px 50px -32px rgba(13,27,42,.35)}
  .pilot-tag{grid-column:1/-1;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)}
  .pilot p{font:400 13.5px/1.65 var(--body);color:var(--slate-600);margin:0;max-width:66ch}
  .pilot p strong{color:var(--ink)}
  @media (max-width:720px){
    .pilot{grid-template-columns:1fr;padding:20px}
    .pilot .btn{justify-self:start}
  }
  /* two go-deeper cards side by side; each stacks its button under the text */
  .deeper-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .deeper-grid .pilot{grid-template-columns:1fr;align-content:start}
  .deeper-grid .pilot .btn{justify-self:start}
  @media (max-width:990px){.deeper-grid{grid-template-columns:1fr}}

  /* ── closure-readiness interactive (/product) ──
     Mirrors the closure engine's shape: open items block, the first open item
     names the next action, closure is computed. Illustrative only. */
  .cr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;margin-top:44px;max-width:980px;margin-left:auto;margin-right:auto}
  .cr-item{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--slate-200);background:#fff;border-radius:12px;padding:13px 14px;margin-bottom:9px;cursor:pointer;transition:border-color .15s;text-align:left;font:inherit}
  .cr-item:last-child{margin-bottom:0}
  .cr-item:hover{border-color:var(--slate-400)}
  .cr-check{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--slate-300);display:flex;align-items:center;justify-content:center;color:#fff;background:#fff;transition:background .15s,border-color .15s}
  .cr-item.on .cr-check{background:var(--emerald);border-color:var(--emerald)}
  .cr-label{font:600 13.5px var(--body);color:var(--ink);flex:1}
  .cr-status{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
  .cr-item.on .cr-status{color:var(--emerald)}
  .cr-state{display:flex;flex-direction:column;align-items:flex-start}
  .cr-chip{font:800 15px var(--display);border-radius:999px;padding:8px 18px}
  .cr-chip.blocked{background:var(--amber-bg);color:var(--amber-700);box-shadow:inset 0 0 0 1px var(--amber-line)}
  .cr-chip.ready{background:var(--emerald-bg);color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald-line)}
  .cr-needed{font:400 13.5px/1.6 var(--body);color:var(--slate-600);margin:14px 0 0;min-height:44px}
  .cr-meter{margin-top:auto;width:100%}
  .cr-meter-bar{height:6px;border-radius:999px;background:var(--slate-100);overflow:hidden}
  .cr-meter-bar i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400));transform:scaleX(.5);transform-origin:left;transition:transform .3s ease}
  .cr-meter-t{display:block;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);margin-top:8px}
  .cr-note{font:400 13px/1.6 var(--body);color:var(--slate-500);text-align:center;margin:22px auto 0;max-width:560px}
  @media (max-width:820px){.cr-grid{grid-template-columns:1fr}}

  /* ── the boundary page (/boundary) ── */
  .bl-ledger{max-width:980px;margin:44px auto 0;border:1px solid var(--slate-200);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 18px 50px -32px rgba(13,27,42,.35)}
  .bl-head{display:grid;grid-template-columns:1fr 1fr;background:var(--slate-50);border-bottom:1px solid var(--slate-200)}
  .bl-head-cell{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500);padding:14px 22px}
  .bl-head-cell:first-child{color:var(--brand-700)}
  .bl-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--slate-100)}
  .bl-row:last-child{border-bottom:none}
  .bl-row span{font:400 13.5px/1.6 var(--body);color:var(--slate-600);padding:15px 22px}
  .bl-row span:first-child{border-right:1px solid var(--slate-100);color:var(--ink);font-weight:500}
  @media (max-width:720px){
    .bl-head{display:none}
    .bl-row{grid-template-columns:1fr}
    .bl-row span{padding:12px 18px}
    .bl-row span::before{display:block;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
    .bl-row span:first-child{border-right:none;padding-bottom:8px}
    .bl-row span:first-child::before{content:"Lives in OgmaQ";color:var(--brand-700)}
    .bl-row span:last-child{padding-top:0}
    .bl-row span:last-child::before{content:"Stays in your validated QMS";color:var(--slate-500)}
  }
  .bl-ref{max-width:560px;margin:40px auto 0}
  .bl-ref-note{font:400 13px/1.6 var(--body);color:var(--slate-400);text-align:center;margin-top:16px}
  .bl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .bl-step{border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:22px}
  .bl-step-n{display:flex;width:30px;height:30px;border-radius:999px;background:var(--brand-50);color:var(--brand-700);font:800 13px var(--display);align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--brand-100)}
  .bl-step h3{font:800 15.5px var(--display);color:var(--ink);margin-top:14px}
  .bl-step p{font:400 13.5px/1.65 var(--body);color:var(--slate-600);margin-top:8px}
  @media (max-width:946px){.bl-steps{grid-template-columns:1fr}}
  .bl-why{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;max-width:1080px;margin-left:auto;margin-right:auto}
  .bl-why-item h3{font:800 16px/1.35 var(--display);color:var(--ink)}
  .bl-why-item p{font:400 13.5px/1.65 var(--body);color:var(--slate-600);margin-top:8px}
  @media (max-width:946px){.bl-why{grid-template-columns:1fr}}
  .bl-faq{max-width:760px;margin:36px auto 0}
  .bl-faq h3{font:700 16px var(--display);color:var(--ink);margin-top:26px}
  .bl-faq p{font:400 14.5px/1.75 var(--body);color:var(--slate-600);margin-top:8px}

  /* ── demo page (/demo) ── */
  .dm-agenda{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;max-width:980px;margin:44px auto 0}
  .dm-item{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:18px 20px}
  .dm-n{flex:none;display:flex;width:28px;height:28px;border-radius:999px;background:var(--brand-50);color:var(--brand-700);font:800 12.5px var(--display);align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--brand-100)}
  .dm-item h3{font:800 15px var(--display);color:var(--ink)}
  .dm-item p{font:400 13.5px/1.6 var(--body);color:var(--slate-600);margin-top:5px}
  @media (max-width:820px){.dm-agenda{grid-template-columns:1fr}}
  .dm-after{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
  .dm-after-step h3{font:800 16px var(--display);color:#fff}
  .dm-after-step p{font:400 13.5px/1.65 var(--body);color:var(--slate-300);margin-top:8px}
  @media (max-width:946px){.dm-after{grid-template-columns:1fr}}
  /* triage → boundary cross-link line (print-and-sign section) */
  .tg-more{font:400 13px var(--body);color:var(--slate-500);margin-top:18px}
  .tg-more a{color:var(--brand-700);font-weight:600}
  .tg-more a:hover{text-decoration:underline}

  /* ── security ── */
  .sec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
  .sec-facts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .sec-fact{display:flex;align-items:center;gap:10px}
  .sec-fact .ic{width:22px;height:22px;border-radius:6px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;flex:none}
  .sec-fact .t{font:500 13px var(--body);color:var(--slate-700)}
  .sec-aside{position:relative;border:1px solid var(--navy-1);border-radius:14px;background:linear-gradient(160deg,#122d42,#07121a);padding:26px;overflow:hidden}
  .sec-aside .ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--brand-300)}
  .sec-aside h3{position:relative;font:800 16px var(--display);color:#fff;margin-top:16px}
  .sec-aside p{position:relative;font:400 12.5px/1.6 var(--body);color:var(--slate-400);margin-top:8px}

  /* ── pricing ── */
  .pricing{background:var(--slate-50);border-top:1px solid var(--slate-200)}
  .pricing-inner{max-width:var(--shell);margin:0 auto;padding:88px 32px}
  .pricing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .pricing .sub{color:var(--slate-600);font-size:15px;max-width:620px;margin-top:12px}

  /* ── operational value strip — value before price ── */
  .vstrip{background:#fff}
  .vstrip-in{max-width:var(--shell);margin:0 auto;padding:76px 32px}
  .vstrip .sub{color:var(--slate-600);font-size:15px;max-width:660px;margin-top:12px}
  .vgrid{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .vcard{border:1px solid var(--slate-200);border-radius:14px;background:var(--slate-50);padding:20px}
  .vcard .vt{font:800 14px var(--display);color:var(--ink)}
  .vcard p{font:400 13px/1.6 var(--body);color:var(--slate-600);margin-top:8px}
  .vnote{margin-top:22px;font:400 13px/1.6 var(--body);color:var(--slate-500);max-width:760px}

  /* ── plan cards — the PRIMARY pricing presentation at every width ── */
  .plans{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
  .pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--slate-200);border-radius:16px;background:#fff;padding:26px 24px;box-shadow:0 18px 50px -34px rgba(13,27,42,.35)}
  .pcard.hot{border-color:var(--brand-300);box-shadow:0 22px 56px -30px rgba(157,244,185,.32)}
  .pcard .pop{align-self:flex-start;margin-bottom:10px}
  .pc-name{font:800 18px var(--display);color:var(--ink);letter-spacing:-.01em}
  /* the ANNUAL contract amount is the visually primary figure (never a monthly
     headline — the monthly line below it is a comparison aid only) */
  .pc-price{font:800 32px var(--display);letter-spacing:-.025em;color:var(--ink);margin-top:12px;line-height:1.1}
  .pc-price small{font:400 13px var(--mono);color:var(--slate-500);letter-spacing:0}
  /* a worded price ("Custom pricing") is a long string — at the numeric size it
     out-shouts the two real figures, so it sits one step down in the scale */
  .pc-price.worded{font-size:26px}
  .pc-sub{font:500 12.5px/1.5 var(--body);color:var(--slate-600);margin-top:7px}
  .pcard.hot .pc-sub{color:var(--brand-700)}
  .pc-desc{font:400 13px/1.6 var(--body);color:var(--slate-600);margin:14px 0 0}
  .pc-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
  .pc-list li{position:relative;padding-left:24px;font:500 13px/1.5 var(--body);color:var(--slate-700)}
  .pc-list li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;background:var(--brand-600);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat}
  /* margin-top:auto pins the CTA to the card foot so the three cards align */
  .pc-cta{margin-top:auto;width:100%;margin-bottom:0}
  .pc-list + .pc-cta{margin-top:22px}
  .pc-foot{font:400 11.5px/1.55 var(--body);color:var(--slate-500);margin:14px 0 0}
  .pc-foot strong{color:var(--slate-700);font-weight:700}
  .pop{display:inline-block;font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--brand-600);border-radius:999px;padding:3px 10px}

  /* ── commercial terms band — the facts a buyer must not discover later ── */
  .terms{margin-top:26px;border:1px solid var(--brand-100);background:var(--brand-50);border-radius:16px;padding:22px 24px}
  .terms-h{font:800 15px var(--display);color:var(--ink)}
  .terms-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px}
  .terms-grid li{font:400 12.5px/1.6 var(--body);color:var(--slate-700)}
  .terms-grid b{display:block;color:var(--ink);font-weight:700}

  /* ── editor / participant definitions ── */
  .seat-defs{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .seat-defs .sd{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:14px 16px}
  .seat-defs .st{font:700 12.5px var(--display);color:var(--ink)}
  .seat-defs p{font:400 12px/1.55 var(--body);color:var(--slate-600);margin-top:5px}

  /* everything identical across the three offers lives HERE, not as repeated
     checkmark rows — the comparison groups compare only what actually differs */
  .inc{margin-top:22px;border:1px solid var(--slate-200);border-radius:16px;background:#fff;padding:24px 26px;display:flex;gap:16px 40px;align-items:flex-start;flex-wrap:wrap}
  .inc-head{flex:1 1 250px;max-width:330px}
  .inc-head h3{font:800 16px var(--display);color:var(--ink)}
  .inc-head p{font:400 12.5px/1.6 var(--body);color:var(--slate-600);margin-top:8px}
  .inc-grid{flex:2 1 420px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .inc-grid li{position:relative;padding-left:25px;font:500 13.5px/1.45 var(--body);color:var(--slate-700)}
  .inc-grid li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;background:var(--brand-600);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat}

  /* ── grouped comparison — native <details>, so keyboard + AT come free ── */
  .cmp-groups{margin-top:26px;border:1px solid var(--slate-200);border-radius:16px;background:#fff;overflow:hidden}
  .cmp-groups-head{padding:24px 26px 6px}
  .cmp-groups-head h3{font:800 16px var(--display);color:var(--ink)}
  .cmp-groups-head p{font:400 12.5px/1.6 var(--body);color:var(--slate-600);margin-top:8px;max-width:660px}
  .cgroup{border-top:1px solid var(--slate-100)}
  .cgroup:first-of-type{border-top:1px solid var(--slate-200);margin-top:18px}
  .cgroup > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 26px;cursor:pointer;list-style:none;user-select:none}
  .cgroup > summary::-webkit-details-marker{display:none}
  .cgroup > summary:hover{background:var(--slate-50)}
  .cgroup > summary:focus-visible{outline:2px solid var(--brand-400);outline-offset:-2px}
  .cg-t{font:700 13.5px var(--display);color:var(--ink)}
  /* chevron: straight-line polyline only (no arc/circle — blueprint shape rule) */
  .cg-i{flex:none;width:16px;height:16px;background:var(--slate-400);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;transition:transform .18s ease}
  .cgroup[open] > summary .cg-i{transform:rotate(180deg)}
  .cgroup[open] > summary{background:var(--slate-50)}

  /* feature-comparison table — one per group, real table semantics preserved */
  /* position:relative is LOAD-BEARING, not decoration: it makes the scroller the
     containing block for the absolutely-positioned .sr labels inside the cells.
     Without it their containing block is the initial one, so overflow-x:auto
     cannot clip them — they keep their static x inside the 560px table, extend
     the DOCUMENT's scrollable overflow past the viewport, and iOS Safari
     shrink-to-fits the whole page, leaving dead space down the right edge. */
  .cmp-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.cmp{width:100%;min-width:560px;border-collapse:separate;border-spacing:0}
  .cmp th,.cmp td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--slate-100);font:400 13.5px var(--body);color:var(--slate-700)}
  .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
  .cmp thead th{vertical-align:bottom;padding:12px 14px;border-bottom:1px solid var(--slate-200);font:700 11.5px var(--display);color:var(--slate-600)}
  /* sticky feature column keeps rows comparable while the plans scroll on phones */
  .cmp .feat,.cmp th[scope="row"]{position:sticky;left:0;z-index:1;background:#fff;text-align:left;min-width:186px;max-width:240px;box-shadow:1px 0 0 var(--slate-100)}
  .cmp th[scope="row"]{font:500 13.5px/1.4 var(--body);color:var(--slate-600)}
  /* desktop: give the feature names real room (mirrors .plan-bar-in's first track) */
  @media (min-width:1101px){.cmp .feat,.cmp th[scope="row"]{width:300px;max-width:300px}}
  /* row hover — track one feature across the offers without losing the line */
  @media (hover:hover){
    .cmp tbody tr:hover td,.cmp tbody tr:hover th[scope="row"]{background:var(--slate-50)}
    .cmp tbody tr:hover td.hot{background:var(--brand-100)}
  }
  .cmp .hot{background:var(--brand-50)}
  .cmp thead th.hot{box-shadow:inset 0 3px 0 var(--brand-600);color:var(--brand-700)}
  .cmp td.y::before{content:"";display:inline-block;width:15px;height:15px;vertical-align:-2px;background:var(--brand-600);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat}
  .cmp td.n::before{content:"—";color:var(--slate-300)}
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* role hint under a row header (who counts, or how a value is qualified) */
  .cmp th[scope="row"] .rh{display:block;font:400 11px var(--mono);color:var(--slate-400);margin-top:2px;text-transform:none;letter-spacing:.02em}
  .cmp td.unl{font:600 13px var(--body);color:var(--brand-700)}
  /* textual / qualified cell states — literal words, so never colour-only */
  .cmp td.txt{font:600 13px var(--body);color:var(--slate-600)}

  /* legend */
  .plan-legend{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px;font:400 12.5px var(--body);color:var(--slate-600)}
  .plan-legend .lg b{color:var(--ink);font-weight:700;margin-right:4px}

  /* planned-capabilities block — visually distinct, never checkmarks */
  .roadmap{margin-top:26px;border:1px dashed var(--slate-300);border-radius:16px;background:#fff;padding:22px 24px}
  .roadmap .rt{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500)}
  .roadmap h3{font:800 16px var(--display);color:var(--ink);margin-top:8px}
  .roadmap p{font:400 12.5px/1.6 var(--body);color:var(--slate-600);margin-top:8px;max-width:660px}
  .roadmap .rl{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
  .roadmap .rc{font:500 12px var(--body);color:var(--slate-600);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:999px;padding:6px 13px}
  .roadmap .rc i{font-style:normal;font-size:11px;color:var(--slate-400);margin-left:6px}

  /* the non-GMP boundary line under the comparison */
  .pricing-boundary{margin-top:24px;padding:14px 16px;border-left:3px solid var(--brand-600);background:#fff;border-radius:0 10px 10px 0;font:400 12.5px/1.6 var(--body);color:var(--slate-600)}

  /* ── trust & legal, at the point of evaluation ── */
  .trust-row{margin-top:20px;border:1px solid var(--slate-200);border-radius:16px;background:#fff;padding:20px 24px}
  .trust-row .tr-h{font:800 14px var(--display);color:var(--ink)}
  .trust-row .tr-p{font:400 12.5px/1.6 var(--body);color:var(--slate-600);margin:8px 0 0;max-width:720px}
  .trust-row .tr-p a{color:var(--brand-700);font-weight:600;border-bottom:1px solid var(--brand-300)}
  .tr-links{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
  .tr-links a{font:600 12px var(--body);color:var(--slate-700);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:999px;padding:6px 13px;transition:border-color .15s,color .15s}
  .tr-links a:hover{border-color:var(--brand-300);color:var(--brand-700)}

  /* ── pricing FAQ — native disclosure, same mechanics as the comparison ── */
  .faq{margin-top:26px;border:1px solid var(--slate-200);border-radius:16px;background:#fff;overflow:hidden}
  .faq-h{font:800 16px var(--display);color:var(--ink);padding:24px 26px 14px}
  .fq{border-top:1px solid var(--slate-100)}
  .fq > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 26px;cursor:pointer;list-style:none;user-select:none}
  .fq > summary::-webkit-details-marker{display:none}
  .fq > summary:hover{background:var(--slate-50)}
  .fq > summary:focus-visible{outline:2px solid var(--brand-400);outline-offset:-2px}
  .fq-q{font:600 13.5px/1.5 var(--body);color:var(--ink)}
  .fq[open] > summary .cg-i{transform:rotate(180deg)}
  .fq-a{padding:0 26px 18px}
  .fq-a p{font:400 13px/1.7 var(--body);color:var(--slate-600);margin:0;max-width:760px}
  .fq-a a{color:var(--brand-700);font-weight:600;border-bottom:1px solid var(--brand-300)}
  .fq-a strong{color:var(--ink);font-weight:700}

  .pricing-note{margin-top:20px;font:400 12.5px/1.6 var(--body);color:var(--slate-500);max-width:820px}

  /* compact sticky plan bar — keeps offer · price · CTA in view while the
     comparison scrolls (desktop/tablet; the cards + real thead stay the a11y
     truth, so the bar is aria-hidden and its links are tabindex="-1") */
  .plan-bar{position:fixed;left:0;right:0;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--slate-200);box-shadow:0 14px 30px -22px rgba(13,27,42,.35);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .plan-bar.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}
  .plan-bar-in{max-width:var(--shell);margin:0 auto;padding:8px 32px;display:grid;grid-template-columns:minmax(180px,260px) repeat(3,minmax(0,1fr));align-items:center;gap:8px}
  .pb-feat{font:700 10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--slate-500)}
  .pb-cell{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;border-radius:10px}
  .pb-cell.hot{background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-100)}
  .pb-name{display:block;font:800 12.5px var(--display);color:var(--ink)}
  .pb-price{display:block;font:600 12px var(--body);color:var(--slate-600);white-space:nowrap}
  .pb-price small{font:400 10px var(--mono);color:var(--slate-500)}
  .pb-cta{flex:none;font:600 11.5px var(--body);color:var(--brand-700);background:#fff;border:1px solid var(--slate-200);border-radius:8px;padding:5px 11px;white-space:nowrap}
  .pb-cta:hover{border-color:var(--slate-400)}
  .pb-cta.teal{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
  .pb-cta.teal:hover{background:var(--brand-700)}
  @media (max-width:1100px){.pb-cta{display:none}}
  /* below 820px the offer names no longer fit three-up beside the label */
  @media (max-width:820px){.plan-bar{display:none}}

  /* ── pricing responsive ── */
  @media (max-width:1210px){
    .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .terms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:1012px){
    /* plan cards stack — the primary pricing experience never scrolls sideways */
    .plans{grid-template-columns:minmax(0,1fr);gap:16px}
    .pcard{padding:22px 20px}
    .pc-cta{margin-top:20px}
  }
  @media (max-width:700px){
    .vgrid{grid-template-columns:minmax(0,1fr)}
    .terms-grid{grid-template-columns:minmax(0,1fr)}
    .seat-defs{grid-template-columns:minmax(0,1fr)}
    .cmp-groups-head,.faq-h{padding-left:22px;padding-right:22px}
    .cgroup > summary,.fq > summary,.fq-a{padding-left:22px;padding-right:22px}
    /* the group tables keep full table semantics; they sit in a labelled
       keyboard-reachable scroll region and are a SECONDARY aid — the stacked
       plan cards above already carry price, commitment and CTA with no
       horizontal movement at all */
    .cmp th,.cmp td{padding:10px 10px}
    .cmp .feat,.cmp th[scope="row"]{min-width:150px;max-width:165px}
    .cmp th[scope="row"]{font-size:12.5px}
    .cmp thead th{font-size:11px}
  }

  /* ── CTA ── */
  .cta{position:relative;background:var(--navy-grad);overflow:hidden}
  .cta-glow{position:absolute;inset:0;background:radial-gradient(600px 380px at 20% 20%,rgba(157,244,185,.14),transparent 60%)}
  .cta-in{position:relative;max-width:var(--shell);margin:0 auto;padding:74px 32px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .cta-in h2{font:800 clamp(28px,3.6vw,34px)/1.15 var(--display);letter-spacing:-.02em;color:#fff}
  .cta-in p{font:400 15px/1.6 var(--body);color:var(--slate-300);margin-top:12px;max-width:520px}

  /* ── desktop default scale (v4.19) ──────────────────────────────────────
     The owner wants the site to render by default the way it looks at 110%
     browser zoom. Every length in this stylesheet is an absolute px, so the
     one faithful implementation is the standardized CSS `zoom` property:
     each design px renders ×1.1.

     THE CONTRACT this block creates (change any part → change all parts):
     - `screen and` — print must stay unscaled (a landscape A4 page box is
       1123px wide and would otherwise match a bare min-width query).
     - 903px = 821 × 1.1: the hamburger collapses ≤820, so zoom must not
       start until the desktop nav fits at its old design minimum (821
       design px). Real widths 821–902 render unzoomed desktop, exactly as
       before; ≤820 is the untouched mobile experience.
     - Every media query in the ZOOMED range (>902 real px) states its
       threshold ×1.1, because media queries evaluate REAL px and CSS zoom —
       unlike browser zoom — does not shrink the viewport they see:
       1280→1408 · 1100→1210 · 1001→1101 · 1000→1100 · 920→1012 · 900→990 ·
       860→946. Queries ≤820 are byte-unchanged. A NEW desktop-range
       breakpoint must be authored as design-threshold × 1.1.
     - Viewport units are NOT divided by zoom, so every vh/vw length is
       compensated here with the SAME factor: the tour's vh heights (they'd
       render 264vh/110vh) AND the vw middle term of every type clamp —
       uncompensated, a clamp's vw term resolves against the REAL viewport
       and is then rendered ×1.1, so in the mid-band widths where the vw
       term is active (e.g. 1024px) headings ran 10% out of proportion with
       the correctly-scaled px body text (2026-08-21 review finding; the
       walk's 1440px checks sat at the px caps and could not see it). A NEW
       vh/vw length in the zoomed range must get a compensated twin here.
     - This block sits AFTER every base rule it overrides (the tour heights,
       and ALL FIVE vw clamps — the last is .cta-in h2 directly above) and
       BEFORE the ≤1100 flatten + reduced-motion overrides, which still win
       by order. Only font-size is re-declared, so the base `font`
       shorthands keep weight/line-height/family.
     - landing.js normalizes rect-derived geometry by the measured effective
       scale and keeps isDesktop() at css-flatten + 1 (1101) — see the
       zoomOf() comment there. landingScale.test.ts pins all of this. */
  @media screen and (min-width:903px){
    body{zoom:1.1}
    .tour{height:calc(240vh/1.1)}
    .tour-sticky{height:calc(100vh/1.1)}
    h1{font-size:clamp(36px,calc(4.6vw/1.1),54px)}
    .page-hero h1{font-size:clamp(30px,calc(4vw/1.1),44px)}
    h2.sec{font-size:clamp(28px,calc(3.4vw/1.1),36px)}
    .tour-h2{font-size:clamp(24px,calc(2.6vw/1.1),30px)}
    .cta-in h2{font-size:clamp(28px,calc(3.6vw/1.1),34px)}
  }

  /* ── footer ── */
  footer{background:var(--navy-3);border-top:1px solid rgba(255,255,255,.08)}
  .foot-grid{max-width:var(--shell);margin:0 auto;padding:48px 32px 30px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}
  .foot-about p{font:400 12px/1.6 var(--body);color:var(--slate-400);margin-top:14px;max-width:260px}
  .foot-col .h{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--slate-400)}
  .foot-col .links{display:flex;flex-direction:column;gap:9px;margin-top:14px}
  .foot-col .links a{font:400 12.5px var(--body);color:var(--slate-300);transition:color .15s;cursor:pointer}
  .foot-col .links a:hover{color:var(--brand-300)}
  /* the Get-started column reuses .btn-brand inside .links — the link colour
     rules above must not override the button's own white text (4.5:1 floor) */
  .foot-col .links a.btn-brand,.foot-col .links a.btn-brand:hover{color:#fff}
  .foot-bar{max-width:var(--shell);margin:0 auto;padding:18px 32px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .foot-bar .c{font:400 11px/1.6 var(--body);color:var(--slate-400)}
  .foot-bar .d{font:400 11px/1.5 var(--body);color:var(--slate-400);max-width:600px;text-align:right}

  /* ── legal & trust hub (/legal) ── */
  .legal-hub-groups{display:flex;flex-direction:column;gap:40px;margin-top:8px}
  .lh-group h2{font:800 15px var(--display);letter-spacing:-.01em;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--slate-200)}
  .lh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
  .lh-card{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:20px;transition:border-color .15s,box-shadow .15s,transform .15s}
  .lh-card:hover{border-color:var(--slate-300);box-shadow:0 12px 26px -14px rgba(15,23,42,.24);transform:translateY(-3px)}
  .lh-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-600);display:flex;align-items:center;justify-content:center}
  .lh-body{min-width:0}
  .lh-title{display:block;font:800 15px var(--display);color:var(--ink)}
  .lh-desc{display:block;font:400 12.5px/1.55 var(--body);color:var(--slate-600);margin-top:6px}
  .lh-arrow{flex:none;margin-left:auto;color:var(--slate-400);transition:color .15s,transform .15s}
  .lh-card:hover .lh-arrow{color:var(--brand-600);transform:translateX(2px)}
  @media (max-width:990px){.lh-grid{grid-template-columns:minmax(0,1fr)}}

  /* ── triage deep-dive page (/triage — sits under Product in the IA) ──
     Page-specific sections, tg-* namespaced so nothing collides with the
     shared chrome. Reuses the design system everywhere it can: .page-hero,
     .cfg-grid, .vig cards, .chip / .sev-tag hues (severity stays the one
     loud colour — amber high · blue medium · emerald low, same as the
     analytics legend), .demo-tag, .cta. Interactivity (the answers →
     suggested-severity example) lives in assets/landing.js (data-sev-demo)
     — no inline handlers under script-src 'self'. */

  /* the decision-path diagram — Raised → QA Screening → Decision → 4 paths */
  .tg-path{margin-top:44px}
  .tg-path-rail{display:flex;align-items:stretch;gap:0}
  .tg-path-node{flex:1;border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:16px 18px;position:relative}
  .tg-path-node .k{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
  .tg-path-node .t{font:800 15px var(--display);color:var(--ink);margin-top:6px}
  .tg-path-node .s{font:400 12px/1.5 var(--body);color:var(--slate-500);margin-top:5px}
  .tg-path-node.hot{border-color:var(--brand-100);background:var(--brand-50)}
  .tg-path-node.hot .k{color:var(--brand-600)}
  .tg-path-link{flex:none;align-self:center;display:flex;align-items:center;color:var(--slate-300);padding:0 8px}
  .tg-path-outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
  .tg-out{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:16px 18px}
  .tg-out .dt{display:inline-block;width:8px;height:8px;border-radius:2px;margin-bottom:9px;background:var(--brand-600)}
  .tg-out h3{font:800 14px var(--display);color:var(--ink)}
  .tg-out p{font:400 12px/1.55 var(--body);color:var(--slate-600);margin:6px 0 0}
  /* one connective rule between the rail and the outcome row: a stem drops
     from under the Documented-decision node (right rail third, ≈83%) onto a
     crossbar spanning the four outcome-card centres (12.5%..87.5%) */
  .tg-path-fork{height:26px;margin-top:4px;position:relative}
  .tg-path-fork::before{content:"";position:absolute;left:12.5%;right:12.5%;top:12px;height:1px;background:var(--slate-200)}
  .tg-path-fork::after{content:"";position:absolute;left:83%;top:0;width:1px;height:12px;background:var(--slate-200)}

  /* mini admin question-editor vignette */
  .tg-q-row{display:flex;align-items:flex-start;gap:10px;padding:11px 2px;border-bottom:1px solid var(--slate-100)}
  .tg-q-row:last-of-type{border-bottom:none}
  .tg-q-ix{flex:none;font:700 10px var(--mono);color:var(--slate-500);padding-top:2px}
  .tg-q-tx{min-width:0;flex:1}
  .tg-q-tx .q{font:600 13px var(--body);color:var(--slate-700)}
  .tg-q-tx .m{font:400 11px var(--body);color:var(--slate-500);margin-top:3px}
  .tg-q-tx .m b{font-weight:600;color:var(--slate-600)}
  .tg-q-add{display:flex;align-items:center;gap:8px;padding:11px 2px 2px;font:600 12.5px var(--body);color:var(--brand-700)}
  .tg-q-add i{font-style:normal;font-weight:800}

  /* answers → suggested severity example */
  .tg-sev-q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 2px;border-bottom:1px solid var(--slate-100)}
  .tg-sev-q .q{font:600 12.5px/1.4 var(--body);color:var(--slate-700)}
  .tg-seg{flex:none;display:inline-flex;border:1px solid var(--slate-200);border-radius:999px;padding:2px;background:var(--slate-50)}
  .tg-seg button{border:none;background:transparent;border-radius:999px;padding:4px 13px;font:600 11.5px var(--body);color:var(--slate-500);cursor:pointer;transition:.15s}
  .tg-seg button.on{background:var(--brand-600);color:#fff}
  .tg-seg button:hover:not(.on){color:var(--slate-700)}
  .tg-sev-out{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;border:1px solid var(--slate-200);border-radius:10px;padding:12px 14px;background:var(--slate-50)}
  .tg-sev-out .k{font:700 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
  .tg-sev-chip{font:700 12px var(--body);border-radius:999px;padding:4px 14px;transition:background .2s,color .2s,box-shadow .2s}
  .tg-sev-chip.hi{background:var(--amber-bg);color:var(--amber-700);box-shadow:inset 0 0 0 1px var(--amber-line)}
  .tg-sev-chip.md{background:var(--blue-bg);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue-line)}
  .tg-sev-chip.lo{background:var(--emerald-bg);color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald-line)}
  .tg-sev-note{font:400 11.5px/1.6 var(--body);color:var(--slate-500);margin:12px 0 0}

  /* interview requirement rows */
  .tg-int-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--slate-100)}
  .tg-int-row:last-of-type{border-bottom:none}
  .tg-int-row .who{min-width:0}
  .tg-int-row .who .n{font:600 13px var(--body);color:var(--slate-700)}
  .tg-int-row .who .r{font:400 11px var(--body);color:var(--slate-500);margin-top:2px}

  /* print · sign · file strip */
  .tg-print-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
  .tg-step{border:1px solid var(--slate-200);border-radius:14px;background:#fff;padding:22px;display:flex;flex-direction:column}
  .tg-step .n{width:26px;height:26px;border-radius:999px;background:var(--brand-600);color:#fff;font:700 12.5px var(--body);display:flex;align-items:center;justify-content:center}
  .tg-step h3{font:800 15.5px var(--display);color:var(--ink);margin-top:14px}
  .tg-step p{font:400 12.5px/1.6 var(--body);color:var(--slate-600);margin:7px 0 0}
  .tg-step .art{margin-top:auto;padding-top:18px}
  /* the paper interview form */
  .tg-paper{border:1px solid var(--slate-200);border-radius:6px;background:#fff;box-shadow:0 10px 24px -16px rgba(15,23,42,.35);padding:14px 16px}
  .tg-paper .ph{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .tg-paper .ph .t{font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-600)}
  .tg-paper .ph .id{font:400 8.5px var(--mono);color:var(--slate-400)}
  .tg-paper .pl{height:5px;border-radius:3px;background:var(--slate-100);margin-top:8px}
  .tg-paper .pl.w60{width:60%} .tg-paper .pl.w85{width:85%} .tg-paper .pl.w72{width:72%}
  .tg-paper .sig{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:16px}
  .tg-paper .sig .f{border-top:1px solid var(--slate-300);padding-top:4px;font:500 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-400)}
  /* the QMS hand-off tile */
  .tg-qms{border:1px solid var(--navy-1);border-radius:10px;background:linear-gradient(160deg,#122d42,#07121a);padding:14px 16px;display:flex;align-items:center;gap:11px}
  .tg-qms .ic{flex:none;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--brand-300);display:flex;align-items:center;justify-content:center}
  .tg-qms .t{font:700 12px var(--display);color:#fff}
  .tg-qms .s{font:400 10.5px/1.5 var(--body);color:var(--slate-400);margin-top:2px}
  /* upload row on step 3 */
  .tg-file{display:flex;align-items:center;gap:9px;border:1px solid var(--slate-200);border-radius:10px;padding:10px 12px}
  .tg-file .ic{flex:none;color:var(--brand-600)}
  .tg-file .fn{min-width:0;font:600 11.5px var(--body);color:var(--slate-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tg-file .fs{flex:none;font:400 9.5px var(--mono);color:var(--slate-400)}

  /* navy band section (severity) — same rhythm as the product tour surface */
  .tg-dark{position:relative;background:var(--navy-3);overflow:hidden}
  .tg-dark-glow{position:absolute;inset:0;background:radial-gradient(620px 420px at 78% 28%,rgba(157,244,185,.12),transparent 62%)}
  /* bottom padding 0 — the section ends with a .demo-tag, which carries the
     bottom spacing (the .an-inner idiom) */
  .tg-dark-in{position:relative;max-width:var(--shell);margin:0 auto;padding:88px 32px 0}
  .tg-dark .eyebrow{color:var(--brand-300)}
  .tg-dark h2.sec{color:#fff}
  .tg-dark .sec-sub{color:var(--slate-400)}
  .tg-dark .cfg-list li{color:var(--slate-300)}
  .tg-sev-why{font:500 10px var(--mono);letter-spacing:.02em;color:var(--slate-500);margin:8px 2px 0;min-height:14px}

  /* FAQ block (full-chrome page variant of the article-page FAQ) */
  .tg-faq{max-width:820px;margin:44px auto 0}
  .tg-faq h3{font:700 16px var(--display);color:var(--ink);margin-top:26px}
  .tg-faq h3:first-child{margin-top:0}
  .tg-faq p{font:400 14px/1.7 var(--body);color:var(--slate-600);margin:8px 0 0}

  /* honest-boundary card (shares the pricing-boundary voice, self-contained) */
  .tg-boundary{margin-top:34px;padding:16px 18px;background:#fff;border:1px solid var(--slate-200);border-left-width:3px;border-left-color:var(--brand-600);border-radius:0 12px 12px 0;font:400 13px/1.65 var(--body);color:var(--slate-600)}
  .tg-boundary b{color:var(--ink)}

  @media (max-width:990px){
    .tg-path-rail{flex-direction:column;gap:10px}
    .tg-path-link{align-self:flex-start;padding:0;transform:rotate(90deg);margin-left:22px}
    .tg-path-fork{display:none}
    .tg-path-outcomes{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
    .tg-print-grid{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:560px){
    .tg-path-outcomes{grid-template-columns:minmax(0,1fr)}
    .tg-sev-q{flex-direction:column;align-items:flex-start;gap:8px}
    .tg-dark-in{padding:56px 24px 0}
  }

  /* ── reveals ── */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  .reveal.on{opacity:1;transform:none}

  /* ── keyframes ── */
  @keyframes eqBlink{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes hsPing{0%{transform:scale(.6);opacity:.75}75%,100%{transform:scale(2.4);opacity:0}}
  @keyframes hsBump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
  @keyframes hsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none !important}
    .reveal{opacity:1 !important;transform:none !important;transition:none}
    .plan-bar{transition:none}
    .an-col,.an-hbar i{transform:none !important;transition:none !important}
    /* hero workflow: landing.js composes a designed static state (one issue
       card + connectors + the matching Command Centre row); kill transitions
       so it appears settled, never mid-animation */
    .hs-card,.hs-connectors [data-hs-channel],.hs-connectors [data-hs-local],.hs-connectors [data-hs-route],.hs-connectors [data-hs-anchor],.attn-row.enter,.cc-activity span,.attn-row{transition:none !important}
    /* the sticky product tour is scroll-driven — flatten it to a readable stack */
    .tour{height:auto}
    .tour-sticky{position:static;height:auto;display:block;overflow:visible;padding:72px 0}
    .tour-stage{height:auto;display:flex;flex-direction:column;gap:16px}
    .tour-panel{position:static;opacity:1;transform:none;pointer-events:auto}
  }

  /* ── responsive ──
     v4.19: thresholds >902px are ×1.1 of their design values — see the
     desktop-default-scale contract above. */
  @media (max-width:1408px){
    /* standard laptop: the columns tighten, the stacked visual is unchanged */
    .hero-grid{gap:36px}
    .hs-scene{max-width:440px}
  }
  @media (max-width:1100px){
    /* minmax(0,…) so a wide-min-content child (the product card) can't force
       the single column past the viewport and clip the copy — the grid gotcha */
    .hero-grid,.cfg-grid,.sec-grid{grid-template-columns:minmax(0,1fr);gap:40px}
    /* single-column hero: the whole stacked visual sits under the copy */
    .hero-visual{max-width:640px}
    .hs-scene{max-width:100%;padding-top:8px}
    /* narrower board — row titles and the activity caption wrap sooner, so
       the fixed instrument column carries more slack for the list beside it */
    .hero-cc .card-body{grid-template-rows:152px auto}
    /* product tour → single column; interleave each copy step directly above
       its own card (head · step0 · card0 · step1 · card1 …) via contents+order */
    .tour{height:auto}
    .tour-sticky{position:static;height:auto;display:block;overflow:visible;padding:64px 0}
    .tour-grid{grid-template-columns:minmax(0,1fr);gap:26px}
    .tour-copy,.tour-steps,.tour-stage{display:contents}
    .tour-panel{position:static;opacity:1;transform:none;pointer-events:auto}
    .tour-step h3,.tour-step p{opacity:1}
    .tour-step{border-left-color:var(--brand-300)}
    .tour-head{order:0}
    [data-tour-step="0"]{order:2} [data-tour-panel="0"]{order:3}
    [data-tour-step="1"]{order:4} [data-tour-panel="1"]{order:5}
    [data-tour-step="2"]{order:6} [data-tour-panel="2"]{order:7}
    /* rule off each header+figure pair so it reads as one group in the stack */
    [data-tour-panel="0"],[data-tour-panel="1"]{padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
    .tour-pips{display:none}
  }
  @media (max-width:820px){
    /* desktop nav collapses into the hamburger */
    .nav-links{display:none}
    .nav-cta{display:none}
    .nav-toggle{display:inline-flex}
    /* v4.19: phones keep their type scale, but the lockup still steps up.
       v4.21: 36→44px for the castle/Q lockup (its type is ~35% of the asset
       height, so 44px keeps the rendered name near the old prominence) —
       taller than the 42px toggle by 2px, which the bar absorbs. */
    .brand-logo{height:44px}
    .roles-grid{grid-template-columns:minmax(0,1fr)}
    .an-grid{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:640px){
    /* purpose-built mobile composition: compact scene above, mini Command
       Centre beneath (never the full desktop board on a phone) — the wide
       two-column board returns to a single stacked column */
    .hero-visual-in{gap:14px}
    /* the phone composition is the one this stack was modelled on — keep its
       breathing room between the copy above and the scene */
    .hs-scene{padding-top:26px}
    .hero-cc{flex:none;width:100%;max-width:400px;margin:0 auto}
    .hero-cc .card-body{display:block;padding:13px}
    .hero-cc .attn{margin-top:11px}
    .hero-cc .cc-activity{min-height:0}
    .hero-cc .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
    .hero-cc .kpi{padding:6px 7px}
    .hero-cc .kpi .k{font-size:7.5px;letter-spacing:.06em}
    .hero-cc .kpi .v{font-size:16px}
    .hero-cc .attn-list .attn-row:nth-child(n+3){display:none}
    /* only 2 rows shown here, so hide the desktop "3" count badge rather than
       let it contradict the visible list */
    .hero-cc .attn-h .n{display:none}
    .hero-cc .cc-activity{display:none}
    .hs-card{max-width:188px}
    .hs-note{text-align:center}
  }
  @media (max-width:374px){
    /* very small screens: strip fine scene detail + ambient motion */
    .hs-fine{display:none}
    .hs-op{animation:none}
    .hero-cc .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hero-cc .kpi.accent{display:none}
  }
  @media (max-width:560px){
    section.pad{padding:56px 24px}
    .wrap{padding:0 24px}
    .page-hero-in{padding:44px 24px 40px}
    .hero-grid{padding-top:40px;padding-bottom:44px}
    .an-inner{padding:56px 24px 0}
    .pricing-inner{padding:56px 24px}
    .vstrip-in{padding:56px 24px}
    .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* group tables: tighter cells + a narrower sticky feature column (the
       stacked plan cards above remain the no-scroll primary presentation) */
    .cmp th,.cmp td{padding:9px 9px}
    .cmp .feat,.cmp th[scope="row"]{min-width:140px;max-width:150px}
    .cmp th[scope="row"]{font-size:12px}
    .cmp-groups-head,.faq-h{padding-left:20px;padding-right:20px}
    .cgroup > summary,.fq > summary,.fq-a{padding-left:20px;padding-right:20px}
    .terms{padding:20px}
    .trust-row{padding:18px 20px}
    /* the every-plan feature list stacks to a single column */
    .inc{padding:20px}
    .inc-grid{grid-template-columns:minmax(0,1fr)}
    /* lifecycle → vertical stepper: breathing room, captions restored, and the
       dots still light up in sequence on scroll (motion preserved) */
    .life-track{margin-top:28px;padding:0}
    .life-line,.life-fill{display:none}
    .life-nodes{flex-direction:column;align-items:stretch;gap:0;position:relative}
    .life-nodes::before{content:"";position:absolute;left:13px;top:22px;bottom:22px;width:2px;background:var(--slate-200);z-index:0}
    .life-node{width:auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:8px 0;position:relative;z-index:1}
    .life-dot{grid-column:1;grid-row:1 / span 2;width:28px;height:28px}
    .life-name{grid-column:2;grid-row:1;text-align:left;margin:0;font-size:13.5px}
    .life-cap{grid-column:2;grid-row:2;display:block;text-align:left;margin:2px 0 0;font-size:12px}
    /* tighter product-card padding + smaller stepper labels on a narrow card */
    .mini-body{padding:16px}
    /* issue-detail stepper: labels don't fit legibly at 311px — collapse to a
       clean connected-dots progress rail (done = teal, todo = empty) */
    .step .lab{display:none}
    .step .d{width:20px;height:20px}
    /* triage board → horizontal swipe so columns aren't crushed to ~100px.
       position:relative for the same reason as .cmp-scroll: a horizontal
       scroller must be the containing block for its own content, or any
       absolutely-positioned descendant escapes the clip and widens the page. */
    .board{position:relative;display:flex;grid-template-columns:none;overflow-x:auto;gap:10px;min-height:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin:0 -2px}
    .col{flex:0 0 80%;scroll-snap-align:start}
    /* issue-detail: stack the "as found" + "holding closure" cards */
    .detail-grid{grid-template-columns:minmax(0,1fr)}
    .foot-bar{flex-direction:column;align-items:flex-start}
    .foot-bar .d{text-align:left}
  }

  /* viewport-fit=cover extends the page under the notch in landscape and the
     home indicator — keep gutters and the footer clear of both */
  @supports (padding:max(0px)){
    .wrap,section.pad,.pricing-inner,.cta-in,.foot-grid,.foot-bar,.tour-grid,.an-inner,.plan-bar-in,.page-hero-in,.tg-dark-in{
      padding-left:max(32px,env(safe-area-inset-left));
      padding-right:max(32px,env(safe-area-inset-right))
    }
    .foot-bar{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
    @media (max-width:560px){
      .wrap,section.pad,.pricing-inner,.an-inner,.page-hero-in,.tg-dark-in{
        padding-left:max(24px,env(safe-area-inset-left));
        padding-right:max(24px,env(safe-area-inset-right))
      }
    }
  }