/* ============================================================================
   TeamHUD site — "work outside the box."
   Synthwave palette + Y2K/Swiss new-media structure on dark.
   The DESKTOP sits behind the copy, gradient-faded out; it pans on scroll to
   reveal widget areas (real widgets mount from apps/teamhud-web). Dock at bottom.
   Body + display: NV Monobreach. Smooth scroll: Lenis.
   ============================================================================ */

:root {
  /* logo gradient — yellow ↔ almost-white */
  --logo-grad: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #fff) 60%, var(--accent));   /* accent yellow ↔ pale yellow shimmer */

  --accent:      #faca08;
  --accent-soft: rgba(250, 202, 8, 0.18);
  --accent-2:    var(--accent);   /* single yellow accent */

  /* cool slate ramp */
  --bg:        #121519;
  --bg-elev:   #181b21;
  --bg-panel:  #232830;
  --bg-card:   #181b21;
  --screen:    #0e1014;
  --text:      #e8eaef;
  --text-dim:  #98a0ac;
  --text-faint:#7c8490;   /* 4.5:1 on --bg-card (AA for small text) */
  --ink:       #14171b;

  --border:        rgba(232, 234, 239, 0.10);
  --border-strong: rgba(232, 234, 239, 0.20);
  --hairline:      rgba(232, 234, 239, 0.05);

  --font-display: "NV Monobreach", "Inter", system-ui, sans-serif;
  --font-mono:    "NV Monobreach", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: var(--font-mono);

  /* Fluid type scale: each step grows linearly from a 360px screen (floor) to 1920px (ceiling).
     Use these, not px. Display sizes (hero h1, section h2) keep their own clamps below. */
  --fs-3xs:  clamp(0.625rem, 0.596rem + 0.128vw, 0.75rem);     /* 10 → 12  micro labels, idents */
  --fs-2xs:  clamp(0.6875rem, 0.659rem + 0.128vw, 0.8125rem);  /* 11 → 13  tags, chips, table heads */
  --fs-xs:   clamp(0.75rem, 0.714rem + 0.16vw, 0.90625rem);    /* 12 → 14.5 kickers, nav, fine print */
  --fs-sm:   clamp(0.8125rem, 0.769rem + 0.192vw, 1rem);       /* 13 → 16  buttons, captions, dense lists */
  --fs-body: clamp(0.875rem, 0.832rem + 0.192vw, 1.0625rem);   /* 14 → 17  reading copy */
  --fs-h4:   clamp(1.1875rem, 1.058rem + 0.577vw, 1.75rem);    /* 19 → 28  card / step headings */
  --fs-h3:   clamp(1.28rem, 1.058rem + 0.994vw, 2.25rem);      /* 20.5 → 36 feature headings */

  --cut: 32px;                 /* horizontal leg of each chamfer (cut width along top/bottom edges) */
  --cut-angle: 51.111deg;      /* chamfer angle from the horizontal edge (45deg = symmetric) */
  --cut-y: calc(var(--cut) * tan(var(--cut-angle)));   /* vertical leg = run × tan(angle); ≈25.8px */
  --clip-notch: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut-y));
  --clip-notch-sm: polygon(16px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 16px) 100%, 0 100%, 0 13px);
  --clip-tab:   polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);

  --maxw: 1920px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  /* Shared 2-col eyeline: hero / vision / alpha CTA (left media-or-copy, right rail) */
  --split-cols: minmax(0, 0.95fr) minmax(320px, 0.7fr);
  --split-gap: clamp(32px, 6vw, 80px);

  --ease-techno:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

* { box-sizing: border-box; }
::selection { background: rgba(250, 202, 8, 0.4); color: var(--ink); }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Dark overlay-style scrollbars ── thin, translucent, no layout shift.
   Standard props (scrollbar-width/color) cover Firefox + Chrome/Edge 121+;
   the -webkit- rules cover Safari and older Chromium. True hide-on-idle is
   native only on macOS; a JS lib (OverlayScrollbars) is the only cross-browser
   way to fully idle-hide — overkill for a landing page, so skipped. */
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;   /* inset the thumb so it reads as a floating pill */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 75%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox has no ::-webkit-scrollbar (and no per-state thumb styling). Give it
   the standard thin translucent bar — scoped so Chromium keeps the webkit rules
   above; setting scrollbar-color unscoped makes Chrome ignore ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
}

/* Text up to --fs-body: NV Monobreach at 400 renders uneven at small sizes on Windows (Chrome, Edge), so Windows gets 500.
   head-init.js adds .os-win; macOS stays 400. Headings set their own weight. */
:root { --fw-text: 400; }
html.os-win { --fw-text: 500; }
body { margin: 0; font-family: var(--font); font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); background: var(--bg); color: var(--text); line-height: 1.6; font-weight: var(--fw-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 0.9; letter-spacing: -0.035em; text-transform: lowercase; margin: 0; }
h3 { font-weight: 400; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.goo-defs { position: absolute; width: 0; height: 0; }

/* ───────────── Logo toggle ───────────── */
html[data-logo="a"] .logo--b { display: none !important; }
html[data-logo="b"] .logo--a { display: none !important; }

/* ───────────── Animated-gradient logo ───────────── */
.logo-link { display: inline-flex; align-items: center; line-height: 0; }
.logo-link--header { --logo-h: 42px; transform: translateY(0.3rem); }
.logo-link--footer { --logo-h: 22px; }

/* a11y: skip link (visible on focus only) */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-techno);
}
.skip-link:focus { transform: translateY(12px); outline: 2px solid var(--ink); outline-offset: 2px; }
.page-top-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.logo { position: relative; display: block; height: var(--logo-h, 26px); width: calc(var(--logo-h, 26px) * 5.378); overflow: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.logo--a { -webkit-mask-image: url("/assets/teamhud-wordmark.svg");   mask-image: url("/assets/teamhud-wordmark.svg"); }
.logo--b { -webkit-mask-image: url("/assets/teamhud-wordmark-b.svg"); mask-image: url("/assets/teamhud-wordmark-b.svg"); }
.logo__fx { position: absolute; inset: 0; background: var(--logo-grad); background-size: 220% 100%; animation: logo-pan 8s var(--ease-inout) infinite alternate; }
@keyframes logo-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ───────────── Registration frame + reticles + chips ───────────── */
.frame { position: fixed; inset: 12px; z-index: 40; pointer-events: none; }
.frame i { position: absolute; width: 20px; height: 20px; }
.frame i::before, .frame i::after { content: ""; position: absolute; background: var(--border-strong); }
.frame i::before { width: 100%; height: 1px; }
.frame i::after  { width: 1px; height: 100%; }
.frame i.tl { top: 0; left: 0; }   .frame i.tl::before { top: 0; }    .frame i.tl::after { left: 0; }
.frame i.tr { top: 0; right: 0; }  .frame i.tr::before { top: 0; }    .frame i.tr::after { right: 0; }
.frame i.bl { bottom: 0; left: 0; }.frame i.bl::before { bottom: 0; } .frame i.bl::after { left: 0; }
.frame i.br { bottom: 0; right: 0; }.frame i.br::before { bottom: 0; }.frame i.br::after { right: 0; }
.reticle { display: inline-block; width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ───────────── Page backdrop (behind desktop) ───────────── */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.facet { position: absolute; }
.facet--tl { top: 0; left: 0;  width: 44vw; height: 80vh; background: rgba(255,255,255,0.01); clip-path: polygon(0 0, 100% 0, 0 100%); }
.facet--br { bottom: 0; right: 0; width: 40vw; height: 70vh; background: rgba(0,0,0,0.25); clip-path: polygon(100% 100%, 100% 0, 0 100%); }
.fx-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: calc(100% / 12) 100%; opacity: 0.5; }
.fx-grid { display: none; } /* ponytail: column lines off (they fought the tables); markup + boot step kept, delete this line to bring them back */
.fx-glyphstrip { position: fixed; top: 0; left: 24px; bottom: 0; z-index: 0; writing-mode: vertical-rl; font: var(--fw-text) var(--fs-2xs)/2 var(--font-mono); letter-spacing: 0.4em; text-transform: uppercase; color: rgba(240, 238, 246, 0.05); user-select: none; pointer-events: none; }

/* ───────────── Decorative type bits ───────────── */
.kicker { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; }
.kicker .idx { color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--accent-soft); flex: none; }

.hl { background: none; padding: 0; }
.accent { color: var(--accent); }
.meta-coord { position: absolute; z-index: 3; font: 500 var(--fs-3xs)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.meta-coord--tl { top: 6px; left: var(--gutter); }
.fx-chamfer { clip-path: var(--clip-notch); }
.fx-spec { font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.75; color: var(--text-dim); border-left: 1px solid var(--accent); padding-left: 16px; max-width: 58ch; }
.fx-spec + .fx-spec { margin-top: 18px; }
.spec-stack { border-left: 1px solid var(--accent); padding-left: 16px; max-width: 58ch; }
.spec-stack .fx-spec { border-left: 0; padding-left: 0; max-width: none; }

/* ───────────── Layout helpers ───────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 10vw, 128px) var(--gutter); position: relative; z-index: 2; }
.demo-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }
.section__head { max-width: none; margin: 0 0 48px; } /* left-aligned on the page grid, like .section-intro */
.section__head h2, .section-intro h2, .trust h2, .why-hero h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); }
.section__foot { margin-top: 36px; color: var(--text-faint); font-size: var(--fs-sm); font-family: var(--font-mono); }

/* ───────────── Header ───────────── */
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: 17px var(--gutter); }
/* full-width frosted bar behind the centered header content */
.site-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(20, 23, 27, 0.42); }
.site-header::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--border-strong); }
.header-notch { position: absolute; right: var(--gutter); bottom: -12px; z-index: 31; font: 500 var(--fs-3xs)/1 var(--font-mono); letter-spacing: 0.16em; color: var(--ink); background: var(--accent); padding: 6px 12px 6px 14px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); display: none; }
.nav { font-family: var(--font-mono); display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--text-dim); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-fast) var(--ease-techno); }
.nav a::before { content: "// "; color: var(--text-faint); }
.nav a:hover { color: var(--text); }
.nav a:hover::before { color: var(--accent); }
.nav__cta { color: var(--accent) !important; }
.nav__links-cta { display: none; }   /* phones only: the CTA moves into the menu (see @media 560px) */
.nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 26px; padding: 4px 3px; background: none; border: 0; cursor: pointer; }
.nav__burger span { display: block; height: 2px; width: 100%; background: var(--text); }

/* ───────────── Buttons ───────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: 0; transition: transform var(--dur-fast) var(--ease-techno), background var(--dur-base); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
html.os-win .btn { font-weight: 600; } /* 700 renders uneven on Windows too; see --fw-text */
.btn .slash { color: var(--bg); }
.btn--primary { background: var(--accent); color: var(--ink); clip-path: polygon(calc(var(--cut) / 2) 0, 100% 0, 100% calc(100% - calc(var(--cut-y) / 2)), calc(100% - calc(var(--cut) / 2)) 100%, 0 100%, 0 calc(var(--cut-y) / 2)); }
.btn--primary:hover { background: #fff; filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0px 0px 66px rgba(250, 202, 8, 0.25)); }
.btn--ghost { background: none; color: var(--text-dim); }
.btn--ghost:hover { color: var(--text); }
.btn--ghost .slash { color: var(--text-faint); }
.btn--block { width: 100%; }

/* ───────────── Hero — 16:9 media left, copy right (same split as vision/CTA) ───────────── */
.hero { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; min-height: 86vh; padding: clamp(36px, 7vh, 80px) var(--gutter) clamp(56px, 9vh, 110px); display: flex; flex-direction: column; justify-content: center; }
.hero__layout { display: grid; grid-template-columns: var(--split-cols); gap: max(4vw, var(--split-gap)); align-items: center; width: 100%; }
.hero__media, .reel__media { position: relative; aspect-ratio: 1121 / 720; width: 100%; min-width: 0; overflow: hidden; clip-path: var(--clip-notch); background:
  linear-gradient(135deg, rgba(240, 238, 246, 0.06), transparent 55%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05)); }
.hero__media::after, .reel__media::after { content: ""; position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-right: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
.notch-glow--inset:has(> .reel__pause) { position: relative; }
.reel__pause { position: absolute; left: 14px; bottom: 14px; z-index: 4; width: 40px; height: 40px; border: 1px solid var(--border-strong); background: rgba(14, 16, 20, 0.7); color: var(--text); cursor: pointer; }
.reel__pause::before { content: ""; display: block; margin: auto; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.reel__pause[data-state="paused"]::before { width: 0; height: 0; border: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid currentColor; }
.reel__pause:hover, .reel__pause:focus-visible { border-color: var(--accent); }
.reel__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.hero__copy { max-width: none; width: 100%; text-align: left; min-width: 0; }
.hero h1 { font-size: clamp(2.6rem, 1rem + 5.5vw, 6.2rem); line-height: 0.95; text-wrap: balance; letter-spacing: -0.05em; margin: 0; }
.hero .lede { color: var(--text-dim); font-family: var(--font-mono); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); margin-top: 26px; max-width: 46ch; }
/* Above the stacking breakpoint: two proportional columns, centred with equal outer margins.
   Below 1366px the base grid + single-col stack take over. */
@media (min-width: 1366px) {
  /* Copy column is as wide as the lede (capped at 34rem so it wraps instead of crowding the reel);
     the h1 is kept out of that measurement and wraps inside it; media takes the rest. Edges line up
     with the header at 1366px, then the pair eases inward, settling at 90% of the hero's content box. */
  .hero__layout { grid-template-columns: minmax(0, 1fr) auto; width: clamp(90%, 100% - (100vw - 1366px) / 3, 100%); margin-inline: auto; }
  .hero h1 { contain: inline-size; }
  .hero .lede { max-width: 34rem; }
}
.hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 36px; flex-wrap: wrap; }
.slash { color: var(--accent); font-family: var(--font-mono); }

/* ───────────── Anti-app strip ───────────── */
.strip { max-width: var(--maxw); margin: 0 auto; padding: clamp(60px, 9vw, 100px) var(--gutter); text-align: center; position: relative; z-index: 2; }
.strip p { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 400; line-height: 1.2; text-transform: lowercase; letter-spacing: -0.02em; text-wrap: balance; }

/* ───────────── Widgets ───────────── */
/* Fixed 4-col tracks so every card is the same width; row 2 can end short. */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.cards > .notch-glow { min-width: 0; width: 100%; }
.card-demo { position: relative; width: 100%; background: var(--bg-card); padding: 20px 18px 24px; min-height: 0; display: flex; flex-direction: column; align-items: stretch; clip-path: var(--clip-notch); transition: background var(--dur-base) var(--ease-techno), transform var(--dur-base) var(--ease-techno); }
.card-demo:hover { background: var(--bg-elev); }
.card-demo__id { display: block; align-self: flex-end; font: 500 var(--fs-3xs)/1 var(--font-mono); letter-spacing: 0.14em; color: var(--accent); margin-bottom: 14px; }
.card-demo__media { aspect-ratio: 3456 / 2234; width: 100%; margin: 0 0 16px; overflow: hidden; clip-path: polygon(calc(var(--cut) / 2) 0, 100% 0, 100% calc(100% - calc(var(--cut-y) / 2)), calc(100% - calc(var(--cut) / 2)) 100%, 0 100%, 0 calc(var(--cut-y) / 2)); background:
  linear-gradient(135deg, rgba(240, 238, 246, 0.06), transparent 55%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.04)); }
.card-demo__media { opacity: 0.85; transition: opacity 250ms ease; }
.card-demo__media:hover { opacity: 1; }
/* Touch / coarse-pointer: no hover, so drop the recede-and-brighten (it would leave
   media permanently dimmed). */
@media (hover: none), (pointer: coarse) {
  .card-demo__media { opacity: 1; }
}
.card-demo__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: transform var(--dur-base) var(--ease-techno); will-change: transform; }
.card-demo__media:hover img { transform: scale(1.4); }
/* No tap-to-zoom on touch: the scale is a hover-only affordance and there's no cursor to
   follow, so a tap would just zoom to center. Kill it on coarse pointers AND anything under
   the 992px shell breakpoint — stylus devices (e.g. Galaxy S Pen) report hover:hover /
   pointer:fine and slip past the coarse checks, so the width guard catches them. Placed after
   the rule above so it wins on source order. */
@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .card-demo__media:hover img { transform: none; }
}
.card-demo__media--ask { display: flex; align-items: center; justify-content: center; background: var(--accent); border-color: transparent; }
.card-demo__ask { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 1; }
.card-demo h3, .thing h3, .steps h3, .alts a { font-size: var(--fs-h4); }
.card-demo p { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-sm); margin-top: 8px; line-height: 1.55; }

/* Notch glow wrappers — filter must live on a PARENT of the clipped element:
   clip-path is applied *after* filter, so a drop-shadow on the clipped element
   itself gets clipped away. drop-shadow on the wrapper traces the child's
   notched silhouette. To add a yellow glow, uncomment the filter line below
   (or scope it to :hover / .open). */
.notch-glow { display: flex; filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45)); }
/* Inset variant for the clipped media tiles (.card-demo__media): same 1px
   double drop-shadow trick — filter on the wrapper so the media's own clip-path doesn't clip
   it away — but with the offsets reversed (light from bottom-right) so the notch reads as
   pressed-in rather than raised. Block, not flex: the media is the sole child at width:100%. */
.notch-glow--inset { display: block; filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.45)); }
.notch-glow > .card-demo, .notch-glow > .card { flex: 1 1 auto; width: 100%; min-width: 0; }
.nav__links-glow { display: contents; }   /* desktop: transparent to layout; becomes a box on mobile (see @media) */
/* .notch-glow { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 65%, transparent)); } */

/* ───────────── Foundation (trust + platform) ───────────── */
.private-band { max-width: var(--maxw); margin: 0 auto; padding: clamp(68px, 9vw, 116px) var(--gutter); position: relative; z-index: 2; display: grid; grid-template-columns: var(--split-cols); gap: var(--split-gap); align-items: end; }
/* top/bottom rules inset to the gutter (a border would run past the page edges); .cta-band drops the bottom one */
.private-band::before, .private-band::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--border); }
.private-band::before { top: 0; }
.private-band::after { bottom: 0; }
.cta-band::before, .cta-band::after { content: none; } /* the closing sign-up band has no rules */
.private-band h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); margin-bottom: 22px; }
.private-band__copy { max-width: 720px; }
.private-band__proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-dim); }
.private-band__proof li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border); }
.private-band__proof li:last-child { border-bottom: 0; }
.private-band__proof span { color: var(--accent-2); font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; }

/* ───────────── Journey invert (full-bleed accent pop) ───────────── */
.section--invert {
  max-width: none;
  width: 100%;
  color: var(--ink);
  background-color: var(--accent);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  background-position: center top;
}
.section--invert .section__head {
  max-width: min(760px, calc(var(--maxw) - 2 * var(--gutter)));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.section--invert,
.section--invert .kicker,
.section--invert .kicker .idx,
.section--invert h2,
.section--invert .hl,
.section--invert .fx-spec { color: var(--ink); }
.section--invert .kicker { font-weight: 600; }
.section--invert h2 { font-weight: 700; }
.section--invert .spec-stack { border-left: 1px solid var(--ink); }
.section--invert .fx-spec { font-weight: 500; }
/* inverted selection: black highlight, yellow text */
.section--invert ::selection { background: var(--ink); color: var(--accent); }

/* ───────────── Fun aside ───────────── */
/* bottom pad matches .private-band / cta-band vertical padding */
.aside-fun { text-align: center; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(68px, 9vw, 116px); position: relative; z-index: 2; }
.aside-fun p { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-faint); }
.coin { color: var(--accent); font-weight: 700; letter-spacing: 0.06em; }
.fx-hazard { display: block; height: 3px; width: 64px; background: repeating-linear-gradient(45deg, var(--accent) 0 8px, var(--bg) 8px 16px); margin: 0 auto 18px; }

/* ───────────── CTA / form (shares .private-band 2-col grid with foundation) ───────────── */
.cta-band { align-items: center; border-bottom: 0; }
.cta-band .private-band__copy .platform-note { margin-top: 22px; color: var(--accent-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }

.cta-band__form { width: 100%; min-width: 0; display: flex; }
.cta-band__form > .form-card { width: 100%; }
.card { background: var(--bg-card); padding: 36px; clip-path: var(--clip-notch); }
.form-card .kicker { margin-bottom: 12px; }
.form-card__lead { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-body); margin: 0 0 22px; line-height: 1.55; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.muted { color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.field input { width: 100%; padding: 13px 15px; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, 0.3); color: var(--text); font-family: var(--font-mono); font-size: max(1rem, var(--fs-body)); transition: border-color var(--dur-fast) var(--ease-techno); }
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--accent); }
.field select, .field textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, 0.3); color: var(--text); font-family: var(--font-mono); font-size: max(1rem, var(--fs-body)); border-radius: 0; transition: border-color var(--dur-fast) var(--ease-techno); }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
/* Select menus: dark everywhere. color-scheme alone fixes the light-grey Windows popup; browsers with customizable
   selects (Chrome 135+) also get the brand list: dark panel, gold highlight, no system blue. */
.field select { color-scheme: dark; }
.field select option { background: var(--bg-elev); color: var(--text); }
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select::picker(select) { background: var(--bg-elev); border: 1px solid var(--border-strong); padding: 4px 0; margin-top: 4px; }
  .field select::picker-icon { color: var(--text-dim); }
  .field select option { padding: 10px 15px; font-family: var(--font-mono); }
  .field select option::checkmark { display: none; }
  .field select option:hover, .field select option:focus-visible { background: var(--accent-soft); color: var(--text); outline: none; }
  .field select option:checked { color: var(--accent); }
}
.field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.form-card__fineprint { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: 14px; text-align: center; }
.hp { position: absolute; left: -9999px; }

/* ───────────── Footer ───────────── */
.site-footer { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 44px var(--gutter) 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* top rule inset to the gutter, like the header's, so it lines up with the page edges instead of running past them */
.site-footer::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--border); }
.site-footer__brand { display: flex; align-items: center; gap: 20px; }

.site-footer__brand p { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-sm); }
.site-footer__idents { display: flex; flex-direction: column; gap: 4px; }
.site-footer__idents span { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.14em; color: var(--text-faint); }
.site-footer__idents span:first-child { color: var(--accent); }
.site-footer__copy { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__legal a { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-decoration: none; }
.site-footer__legal a:hover { color: var(--accent); }

/* ───────────── Toast ───────────── */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--bg-elev); border: 1px solid var(--border-strong); padding: 14px 26px; font-family: var(--font-mono); font-size: var(--fs-body); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); z-index: 80; animation: toast-in 0.3s ease; transition: opacity 0.4s ease; }
.toast.is-hiding { opacity: 0; }
.toast::before { content: "// "; color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ───────────── Responsive ───────────── */
/* Hero stacks early — video + copy need width before the rest of the page */
@media (max-width: 1365px) {
  .hero__layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.6rem, 1.1rem + 7vw, 5rem); }
}
/* Phones: copy + CTA first, media after (CTA above the fold at 390) */
@media (max-width: 720px) {
  .hero { min-height: 0; padding-top: 24px; }
  .hero__layout > .hero__reel { order: 2; }
  .hero__actions { margin-top: 24px; }
}
/* Shell breakpoint: nav + 2-col bands */
@media (max-width: 991px) {
  .private-band { grid-template-columns: 1fr; align-items: start; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav__burger { display: flex; }
  .nav { gap: 14px; }
  .nav a.nav__cta { order: -1; font-size: var(--fs-2xs); letter-spacing: 0.08em; }
  .nav a.nav__cta::before { content: none; }
  /* below the header rule (not over it); right edge lines up with the burger's bars, inset by its 3px padding */
  .nav__links-glow { display: block; position: absolute; top: calc(100% + 8px); right: calc(var(--gutter) + 3px); z-index: 32; }
  .nav__links { display: none; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 28px; background: var(--bg-elev); clip-path: var(--clip-notch); }
  .nav__links.open { display: flex; }
}
@media (max-width: 720px) {
  .fx-glyphstrip, .frame { display: none; }
}
@media (max-width: 560px) {
  .nav > .nav__cta { display: none; }   /* header-level CTA only; pages that keep it inside the menu are untouched */
  .nav .nav__links-cta { display: inline; color: var(--accent); }
  .private-band__proof li { grid-template-columns: 1fr; gap: 4px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 26px; }
}

/* ═════════════════ Motion layer (anim.js / anime.js) ═════════════════
   Initial-hidden states gate on html.th-anim / html.th-booting, both added by
   head-init.js BEFORE first paint → no flash. JS toggles .is-in on reveal and
   removes .th-booting when the boot timeline completes. All the actual tweening
   is done by anime.js via CSSOM inline styles (CSP-safe: not style-src). */

/* ── Scroll reveals: fade-in-up ── */
html.th-anim .strip p,
html.th-anim .section__head,
html.th-anim .cards > .notch-glow,
html.th-anim .private-band__copy,
html.th-anim .private-band__proof li,
html.th-anim .spec-stack,
html.th-anim .cta-band__form,
html.th-anim .aside-fun p,
html.th-anim .section__foot,
html.th-anim .section-intro,
html.th-anim .feature__body,
html.th-anim .feature__media,
html.th-anim .band,
html.th-anim .thing,
html.th-anim .kit li,
html.th-anim .steps li,
html.th-anim .stat,
html.th-anim .before-after li,
html.th-anim .shot,
html.th-anim .flow,
html.th-anim .quotes figure,
html.th-anim .matrix-scroll,
html.th-anim .alts li,
html.th-anim .mid-cta,
html.th-anim .not-yet li,
html.th-anim .kit-next,
html.th-anim .trust,
html.th-anim .proof-list li,
html.th-anim .why-hero .container > :not(.why-mark),
html.th-anim .diagram,
html.th-anim .policy,
html.th-anim .specs > div,
html.th-anim .datasheet li,
html.th-anim .invert__grid > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-techno),
              transform var(--dur-slow) var(--ease-techno);
  will-change: opacity, transform;
}
/* Revealed state must win over the multi-class hidden selectors above
   (e.g. `.cards > .notch-glow` is more specific than `.is-in`). !important is
   safe: none of these reveal targets carry their own hover transform. */
html.th-anim .is-in { opacity: 1 !important; transform: none !important; }

/* ── Intro boot: pre-boot hidden states (anime animates from here) ── */
html.th-booting .frame i { opacity: 0; transform: scale(0.6); }
html.th-booting .fx-grid,
html.th-booting .fx-glyphstrip,
html.th-booting .meta-coord,
html.th-booting .site-header .brand,
html.th-booting .site-header .nav,
html.th-booting .header-notch,
html.th-booting .hero__copy > * { opacity: 0; }

/* ── Header scramble: per-char cells (kept inline so headings still wrap) ── */
.th-sc { display: inline; }

/* ── Nav scrollspy: active link takes the existing hover treatment ── */
.nav a[aria-current="true"] { color: var(--text); }
.nav a[aria-current="true"]::before { color: var(--accent); }

/* ───────────── Reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo__fx{ animation: none; }
  /* Motion layer disabled: reveal everything statically, no build-in. */
  html.th-anim .strip p,
  html.th-anim .section__head,
  html.th-anim .cards > .notch-glow,
  html.th-anim .private-band__copy,
  html.th-anim .private-band__proof li,
  html.th-anim .spec-stack,
  html.th-anim .cta-band__form,
  html.th-anim .aside-fun p,
  html.th-anim .section__foot,
  html.th-anim .section-intro,
  html.th-anim .feature__body,
  html.th-anim .feature__media,
  html.th-anim .band,
  html.th-anim .thing,
  html.th-anim .kit li,
  html.th-anim .steps li,
  html.th-anim .stat,
  html.th-anim .before-after li,
  html.th-anim .shot,
  html.th-anim .flow,
  html.th-anim .quotes figure,
  html.th-anim .matrix-scroll,
  html.th-anim .alts li,
  html.th-anim .mid-cta,
  html.th-anim .not-yet li,
  html.th-anim .kit-next,
  html.th-anim .trust,
  html.th-anim .proof-list li,
  html.th-anim .why-hero .container > :not(.why-mark),
  html.th-anim .diagram,
  html.th-anim .policy,
  html.th-anim .specs > div,
  html.th-anim .datasheet li,
  html.th-anim .invert__grid > *,
  html.th-booting .frame i,
  html.th-booting .fx-grid,
  html.th-booting .fx-glyphstrip,
  html.th-booting .meta-coord,
  html.th-booting .site-header .brand,
  html.th-booting .site-header .nav,
  html.th-booting .header-notch,
  html.th-booting .hero__copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ───────── Downloads page (downloads.html) ───────── */
.downloads-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1240px; margin: 0 auto; }
.downloads-card { padding: 28px 26px 26px; }
.downloads-card h3 { margin: 0 0 10px; }
.downloads-card p { margin: 0 0 14px; color: var(--text-dim); }
.downloads-card .downloads-card__meta { font: 500 var(--fs-2xs)/1 var(--font-mono); letter-spacing: 0.1em; color: var(--text-faint); margin-top: auto; }
.downloads-card .btn { margin-top: 14px; }
/* The self-host card is not a fourth OS: it takes its own row rather than
   orphaning a third of one. Collapses with the rest below 991px. */
.downloads-card--selfhost { grid-column: 1 / -1; }

@media (max-width: 991px) {
  .downloads-grid { grid-template-columns: 1fr; max-width: 620px; }
}

/* Linux support modal (downloads.html) */
.support-dialog { background: none; border: 0; padding: 24px; max-width: 720px; width: calc(100% - 32px); max-height: calc(100vh - 48px); color: var(--text); }
.support-dialog::backdrop { background: rgba(10, 12, 15, 0.72); backdrop-filter: blur(3px); }
.support-dialog__inner { background: var(--bg-card); clip-path: var(--clip-notch); padding: 38px 36px; overflow-y: auto; max-height: calc(100vh - 96px); }
.support-dialog h3 { margin: 6px 0 12px; }
.support-dialog h4 { margin: 24px 0 6px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.support-dialog p, .support-dialog li { color: var(--text-dim); font-size: var(--fs-body); }
.support-dialog__note { margin: 0 0 10px; }
.support-dialog ul { margin: 0 0 16px; padding-left: 20px; }

.support-dialog table { width: 100%; border-collapse: collapse; font: var(--fw-text) var(--fs-sm)/1.5 var(--font-mono); }
.support-dialog th, .support-dialog td { text-align: left; padding: 7px 10px; border: 1px solid var(--hairline); }
.support-dialog th { color: var(--accent); font-weight: 500; letter-spacing: 0.08em; }
.support-dialog td { color: var(--text-dim); }
.support-dialog .btn { margin-top: 8px; }

.downloads-card__more { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.downloads-card__more:hover { color: var(--accent); }
.support-dialog p { margin: 0 0 12px; }

/* ── Linux install modal: tabs + copyable code blocks ── */
/* Segmented control: the active method reads as a filled amber block, not a
   faint underline — switching is unmistakable. Equal-width, terminal-sharp. */
.tabs { display: flex; gap: 3px; margin: 28px 0 0; padding: 3px; background: var(--screen); border: 1px solid var(--border); }
.tab { flex: 1; appearance: none; background: none; border: 0; padding: 10px 12px; color: var(--text-faint); font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: 0.06em; cursor: pointer; transition: color var(--dur-fast) var(--ease-inout), background var(--dur-fast) var(--ease-inout); }
.tab:hover { color: var(--text-dim); }
.tab[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tab-panel { margin: 26px 0 0; }
.tab-panel[hidden] { display: none; }
/* Qualified with .support-dialog so these beat the generic `.support-dialog p`
   rule (spec 0,1,1) that was otherwise zeroing out the vertical rhythm —
   the note ended up flush against the code block. */
.support-dialog .tab-panel__lede { margin: 0 0 18px; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.6; }
.support-dialog .tab-panel__note { margin: 20px 0 0; color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.6; }
.tab-panel__note code, .tab-panel__lede code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-dim); background: var(--accent-soft); padding: 1px 5px; }
.arch-note { display: block; margin-top: 8px; color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; }

.codeblock { position: relative; background: var(--screen); border: 1px solid var(--hairline); }
.codeblock pre { margin: 0; padding: 34px 16px 15px; overflow-x: auto; }
.codeblock code { font: var(--fw-text) var(--fs-sm)/1.7 var(--font-mono); color: var(--text); white-space: pre; }
.codeblock__copy { position: absolute; top: 7px; right: 7px; appearance: none; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim); font: 500 var(--fs-3xs)/1 var(--font-mono); letter-spacing: 0.08em; padding: 6px 8px; cursor: pointer; transition: color var(--dur-fast) var(--ease-inout), border-color var(--dur-fast) var(--ease-inout); }
.codeblock__copy:hover, .codeblock__copy.is-copied { color: var(--accent); border-color: var(--accent); }
.codeblock__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.arch-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; }
.arch-switch .arch-dl { flex: 1 1 200px; margin-top: 0; }

.support-dialog__details { margin: 22px 0 4px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.support-dialog__details summary { cursor: pointer; color: var(--text-dim); font: 500 var(--fs-xs)/1.4 var(--font-mono); letter-spacing: 0.04em; }
.support-dialog__details summary:hover, .support-dialog__details[open] summary { color: var(--accent); }
.support-dialog__details[open] summary { margin-bottom: 8px; }

/* ───────── Pricing page (pricing.html) ───────── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.kit.pricing-fine { margin-top: 96px; }
.pricing-fine strong { color: var(--text); }
.pricing-card { padding: 28px 24px 26px; }
.pricing-card h3 { margin: 0 0 14px; }
.pricing-card .pricing-card__price { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--text); margin: 0; }
.pricing-card .pricing-card__unit { font: 500 var(--fs-2xs)/1.5 var(--font-mono); letter-spacing: 0.08em; color: var(--text-faint); margin: 8px 0 16px; }
.pricing-card .pricing-card__lede { color: var(--text); margin: 0 0 14px; }
.pricing-card--featured, .pricing-card--featured:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 2%, transparent) 60%), var(--bg-elev); }
.notch-glow--gold { filter: drop-shadow(-1px -1px 0 color-mix(in srgb, var(--accent) 55%, transparent)) drop-shadow(1px 1px 0 color-mix(in srgb, var(--accent) 22%, transparent)); }
/* enterprise: "let's talk", set a step back from the plans you can buy today */
.pricing-card--apart, .pricing-card--apart:hover { background: color-mix(in srgb, var(--screen) 65%, transparent); }
.notch-glow--quiet { filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.08)); }
/* early access: Pro is the only way in; Free and Lite show what comes after, without a sign-up */
.pricing-card--later { opacity: .62; }
.pricing-card__cta.is-disabled { cursor: default; color: var(--text-faint); }
.pricing-card__cta.is-disabled .slash { color: var(--text-faint); }
.pricing-card__was { color: var(--text-faint); text-decoration-thickness: .06em; margin-right: .2em; }
/* "$7.50 $0*" stays on one line: same size as the other prices, shrinking only when the card is too narrow for it */
.pricing-card--featured { container-type: inline-size; }
.pricing-card--featured .pricing-card__price { white-space: nowrap; font-size: min(clamp(2.4rem, 1.6rem + 2vw, 3.2rem), 17cqi); }
.pricing-card__dot { margin-inline: -0.22em; } /* monospace leaves a full cell around the point; pull the digits in */
.pricing-card__price sup { font-size: .45em; vertical-align: super; line-height: 0; }
.pricing-card .card-demo__id { font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 28px; }
.pricing-card--featured .pricing-card__price { color: var(--accent); }
.pricing-list { list-style: none; margin: 0 0 22px; padding: 0; font: var(--fw-text) var(--fs-sm)/1.55 var(--font-mono); color: var(--text-dim); }
.pricing-list li { position: relative; padding: 0 0 8px 18px; }
.pricing-list li::before { content: "+"; position: absolute; left: 0; color: var(--accent); }
.pricing-card__cta { margin-top: auto; }
/* Outline buttons in the pricing cards take the primary button's chamfer. A CSS border would be clipped off at the
   cuts, so the 1px outline is a ring: the outer chamfer traced one way, the same shape inset 1px traced back
   (evenodd leaves only the edge). The inset points on the diagonals are offset ~0.4px so the cut edge stays ~1px. */
.pricing-card .btn--ghost, .matrix .btn--ghost { --c: calc(var(--cut) / 2); --y: calc(var(--cut-y) / 2); }
.pricing-card .btn--ghost::before, .matrix .btn--ghost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--border-strong); transition: background var(--dur-base) var(--ease-techno);
  clip-path: polygon(evenodd,
    var(--c) 0, 100% 0, 100% calc(100% - var(--y)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--y), var(--c) 0,
    calc(var(--c) + 0.4px) 1px, 1px calc(var(--y) + 0.5px), 1px calc(100% - 1px), calc(100% - var(--c) - 0.4px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - var(--y) - 0.5px), calc(100% - 1px) 1px, calc(var(--c) + 0.4px) 1px);
}
.pricing-card .btn--ghost:hover::before, .matrix .btn--ghost:hover::before { background: var(--accent); }
.matrix tfoot td { padding-top: 24px; border-bottom: 0; vertical-align: top; }
.pricing-card__cta.is-disabled:hover::before { background: var(--border-strong); } /* not a link: no gold on hover */
.soon { display: inline-block; font: 600 var(--fs-3xs)/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-soft); padding: 3px 5px; vertical-align: 1px; white-space: nowrap; }
.pricing-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1480px; margin: 14px auto 0; }
.pricing-note { padding: 26px 24px; }
.pricing-note h3 { margin: 0 0 6px; }
.pricing-note p strong { color: var(--text); }
#pricing .section__foot { max-width: 1480px; margin-left: auto; margin-right: auto; }
@media (max-width: 1279px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
  .pricing-notes, #pricing .section__foot { max-width: 920px; }
}
@media (max-width: 719px) {
  .pricing-grid, .pricing-notes { grid-template-columns: 1fr; max-width: 520px; }
  #pricing .section__foot { max-width: 520px; }
}

/* ───────── beta-scope homepage additions (plan: WEBSITE_1_0_REPOSITIONING_PLAN.md) ───────── */
/* Hero reel: clips cross-fade inside the existing hero media frame; chips + caption sit under it */
@media (max-width: 1365px) { .hero__reel { min-width: 0; } }
.reel__video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-inout); }
.reel__media video.reel__video { position: absolute; }
.reel__video.is-active { opacity: 1; }
.reel__chips { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; counter-reset: reel; }
.reel__chip { counter-increment: reel; position: relative; display: block; width: 100%; padding: 10px 0 0; border: 0; border-top: 2px solid var(--border-strong); background: none; text-align: left; font: 500 var(--fs-2xs)/1.35 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; transition: color var(--dur-fast) var(--ease-techno); }
.reel__chip::before { content: "// " counter(reel, decimal-leading-zero); display: block; margin-bottom: 2px; color: var(--text-faint); transition: color var(--dur-fast) var(--ease-techno); }
.reel__chip::after { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.reel__chip:hover, .reel__chip[aria-current="true"] { color: var(--text); }
.reel__chip:hover::before, .reel__chip[aria-current="true"]::before { color: var(--accent); }
.reel__chip:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.reel__caption { margin-top: 12px; min-height: 1.6em; font: var(--fw-text) var(--fs-sm)/1.6 var(--font-mono); color: var(--text-dim); }
.reel__caption::before { content: "// "; color: var(--accent); }
@media (max-width: 560px) {
  .reel__chips { grid-auto-columns: minmax(84px, 1fr); overflow-x: auto; padding-bottom: 4px; }
}

/* /platform intro: the page's h1 takes the section-heading scale */
.section--lead { padding-bottom: 0; }
.section__head h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); margin-bottom: 22px; }
.hero__copy .platform-note { margin-top: 18px; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.hero__copy .lede strong { color: var(--text); font-weight: 600; }
.strip--link { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(24px, 4vw, 48px); }
.strip--link p { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.strip--link a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.form-card__status { min-height: 1.4em; margin-top: 10px; color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .reel__video { transition: none; } }

/* ============================================================================
   Content sections (homepage rows, things, trust, bands, steps; /why).
   One class per component, BEM-style children (.feature__body), states as
   modifiers (.feature--flip, .chip.on). Drawn product mock-ups (.stage, .mini,
   .band__demo) keep their small internals scoped to the drawing.
   ============================================================================ */
.content { position: relative; z-index: 2; }
.content h2, .content h3 { line-height: .95; text-wrap: balance; }
.content p { text-wrap: pretty; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* shared type (section h2s and small h3s are grouped into .section__head h2 / .card-demo h3) */
.feature__body h3, .band h3 { font-size: var(--fs-h3); }
.feature__body p, .band__copy p, .thing > p, .steps p, .stat__label { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.65; }
.feature__body p + p, .band__copy p + p { margin-top: 12px; }

/* numbered tab (feature rows, steps) */
.num-tab { align-self: flex-start; min-width: 32px; height: 22px; padding: 0 14px 0 8px; margin-bottom: 22px; display: inline-flex; align-items: center; background: var(--accent); color: var(--ink); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; clip-path: var(--clip-tab); }

/* section intro: heading left, short paragraph right */
.section-intro { padding: 112px 0 72px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr); gap: 72px; align-items: end; }
.section-intro > p { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.75; border-left: 1px solid var(--accent); padding-left: 16px; max-width: 48ch; }

/* feature rows: drawing + copy, alternating sides */
.features { display: flex; flex-direction: column; gap: 128px; padding-bottom: 32px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.feature--flip .feature__media { order: 2; }
.feature__body { display: flex; flex-direction: column; max-width: 54ch; justify-self: center; }
.feature__body h3 { margin-bottom: 12px; }

/* trust: heading + labelled proof list */
.trust { margin-top: 144px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.proof-list { list-style: none; margin: 0; padding: 0; }
.proof-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.65; }
.proof-list li:last-child { border-bottom: 1px solid var(--border); }
.proof-list span { font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* band: heading / copy / small demo, three across */
.band { margin-top: 128px; background: var(--bg-elev); clip-path: var(--clip-notch); padding: 48px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }

/* things: four-up grid */
.things { padding: 176px 0 0; }
.things .section-intro { padding: 0 0 56px; }
.things__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.thing { border-top: 1px solid var(--border-strong); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.thing .card-demo__media { margin: 0; } /* /platform's widget tile + hover zoom, reused; .thing's gap does the spacing */

/* mid-page CTA */
.mid-cta { margin-top: 72px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.mid-cta p { font-size: clamp(1.1rem, 2vw, 1.5rem); text-transform: lowercase; }

/* three steps above the form */
.steps-sec { max-width: var(--maxw); margin: 0 auto; padding: 144px var(--gutter) 0; }
.steps-sec .container { padding: 0; }
.steps { list-style: none; margin: 0 0 112px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps li { display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); padding-top: 20px; }
.steps h3 { margin-bottom: 10px; }

/* ---------- drawn mock-ups ----------
   Each drawing scales like an image: its root takes a font-size from its box (container query
   units, with a rem floor/ceiling) and everything inside is sized in em off that. 1em ≈ 11 design px
   in .stage, 11.5 in .mini, 12 in .band__demo. Hairline borders stay 1–2px. */
.feature__media, .thing, .band { container-type: inline-size; }
.stage { font-size: clamp(0.4375rem, 1.7cqi, 1.125rem); }
.mini { font-size: clamp(0.5rem, 3.6cqi, 1rem); }
.band__demo { font-size: clamp(0.6875rem, 0.94cqi, 0.9375rem); }

/* shared bits */
.chip { padding: .455em .909em; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--border-strong); background: rgba(14,16,20,.9); color: var(--text-dim); }
.chip.on { border-color: var(--accent); color: var(--accent); }
.chips { display: flex; gap: .5em; }
.chips .chip { display: inline-flex; align-items: center; gap: .6em; padding: .3em .8em; font-size: .87em; }
.dot--red { background: #ff5a5f; box-shadow: 0 0 10px rgba(255,90,95,.6); }
.av { position: relative; width: 3.538em; height: 3.538em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.182em; font-weight: 700; color: var(--ink); box-shadow: 0 .462em 1.231em rgba(0,0,0,.45); }
.av.talk { box-shadow: 0 0 0 .231em var(--bg), 0 0 0 .385em var(--accent), 0 0 1.846em rgba(250,202,8,.45); }
.av.away { opacity: .45; }
.av.hover { box-shadow: 0 0 0 .231em var(--bg), 0 0 0 .308em var(--text); }
.av.cam { width: 4.923em; height: 4.923em; overflow: hidden; color: transparent; }
.av-mini { flex: none; width: 2.444em; height: 2.444em; border-radius: 50%; font-size: .75em; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.face { position: absolute; inset: 0; }
.msg { display: flex; gap: .833em; align-items: flex-start; font-size: 1.043em; line-height: 1.45; }
.msg b { display: block; color: var(--text); font-weight: 600; font-size: .917em; }
.msg div span { color: var(--text-dim); }
.quest { display: flex; align-items: center; gap: .7em; color: var(--text); }
.quest i { flex: none; width: .87em; height: .87em; border: 1px solid var(--border-strong); }
.quest.done { color: var(--text-dim); text-decoration: line-through; }
.quest.done i { background: var(--accent); border-color: var(--accent); }
.quest .av-mini { margin-left: auto; width: 2.25em; height: 2.25em; font-size: .696em; }

/* stage: a drawn desktop standing in for a real capture */
.stage { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 80% 10%, #2a2340 0%, #161a22 55%, #0e1014 100%); clip-path: var(--clip-notch); overflow: hidden; }
.win { position: absolute; background: #12151a; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 1.818em 4.545em rgba(0,0,0,.45); }
.win-bar { display: flex; align-items: center; gap: .545em; height: 2.364em; padding: 0 .909em; background: #1a1e25; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--text-dim); }
.win-bar i { width: .727em; height: .727em; border-radius: 50%; background: #3a404b; display: block; }
.code { padding: 1.043em 1.217em; font-size: 1.045em; line-height: 1.75; color: #8c95a3; white-space: pre; }
.code .k { color: #c9a2ff; }
.code .s { color: #9fd38a; }
.code .f { color: #7fc4ff; }
.code .c { color: #5f6773; }
.term { padding: 1.043em 1.217em; font-size: 1.045em; line-height: 1.8; color: #9fd38a; white-space: pre; }
.term .p { color: var(--accent); }
.term .d { color: #8c95a3; }
.edge { position: absolute; right: 2.2%; top: 14%; display: flex; flex-direction: column; gap: 1.091em; align-items: center; }
.edge-status { position: absolute; display: flex; flex-direction: column; gap: 1.091em; right: 9%; top: 14%; }
.edge-status span { height: 4.182em; display: flex; align-items: center; justify-content: flex-end; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.edge-status b { color: var(--accent); font-weight: 600; }
.badge { position: absolute; right: -.308em; bottom: -.308em; width: 1.385em; height: 1.385em; border-radius: 50%; background: var(--ink); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; }
.badge svg { width: .769em; height: .769em; }
.pill { position: absolute; display: inline-flex; align-items: center; gap: .727em; padding: .545em 1.091em; background: rgba(14,16,20,.88); border: 1px solid var(--border-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.hcard { position: absolute; width: 19.09em; background: rgba(27,31,37,.97); border: 1px solid var(--border-strong); clip-path: var(--clip-notch-sm); padding: 1.273em; display: flex; flex-direction: column; gap: .909em; }
.hcard__who { display: flex; flex-direction: column; gap: .182em; }
.hcard__who b { font-size: 1.273em; font-weight: 600; }
.hcard__who span { color: var(--text-dim); }
.hcard__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .545em; }
.hcard__acts button { min-height: 2.909em; padding: 0 .727em; background: rgba(14,16,20,.9); color: var(--text); border: 1px solid var(--border-strong); font: 500 1em var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.hcard__acts .go { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .545em; padding: .727em; height: calc(100% - 2.364em - 4em); box-sizing: border-box; }
.tile { position: relative; overflow: hidden; background: #232830; }
.tile .nm { position: absolute; left: .762em; bottom: .571em; font-size: .955em; color: var(--text); background: rgba(8,9,12,.7); padding: .19em .571em; }
.tile.talk { outline: 2px solid var(--accent); outline-offset: -2px; }
.ctrl { height: 4em; display: flex; align-items: center; justify-content: center; gap: .727em; border-top: 1px solid rgba(255,255,255,.06); }
.ctrl span { width: 2.727em; height: 2.727em; border-radius: 50%; background: #232830; display: block; }
.ctrl .end { background: #ff5a5f; width: 4em; border-radius: 1.364em; }
.focus-track { position: absolute; left: 6%; bottom: 7%; display: flex; align-items: center; gap: .727em; }
.focus-track .arrow { color: var(--accent); font-size: 1.091em; }
.req { position: absolute; right: 5%; bottom: 7%; }
.req button { min-height: 2.909em; padding: 0 1.091em; font: 500 1em var(--font-mono); background: rgba(14,16,20,.9); color: var(--text); border: 1px solid var(--accent); }

/* band demo: spoken request, swatches */
.band__demo { display: flex; flex-direction: column; gap: .833em; }
.said { display: flex; align-items: center; gap: .833em; color: var(--text); padding: .833em 1em; background: var(--screen); }
.band__demo .quest { padding: .833em 1em; border: 1px solid var(--border-strong); }
.added { margin-left: auto; color: var(--accent); font-size: .833em; letter-spacing: .12em; text-transform: uppercase; }
.swatches { display: flex; gap: .833em; }
.swatches span { width: 3.667em; height: 3.667em; clip-path: var(--clip-notch-sm); opacity: .8; }
.swatches .on { opacity: 1; outline: 2px solid var(--text); outline-offset: -2px; }

/* mini: small drawn card inside a .thing */
.mini { aspect-ratio: 4 / 3; box-sizing: border-box; background: var(--bg-elev); clip-path: var(--clip-notch-sm); padding: 1.217em; display: flex; flex-direction: column; gap: .696em; line-height: 1.4; overflow: hidden; }
.mini__title { font-size: .87em; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .2em; }
.mini__foot { margin-top: auto; }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .522em; }
.res-grid span { padding: .952em .571em; background: var(--bg-panel); font-size: .913em; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-grid .on { color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
.ai-ask { align-self: flex-end; max-width: 85%; background: var(--bg-panel); padding: .522em .87em; color: var(--text); }
.ai-reply { border-left: 1px solid var(--accent); padding-left: .696em; color: var(--text-dim); }
.ai-reply b { color: var(--text); font-weight: 600; }

@media (max-width: 1100px) {
  .section-intro { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature--flip .feature__media { order: 0; }
  .feature__body { justify-self: start; }
  .features { gap: 80px; }
  .band, .trust { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .things__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
}
@media (max-width: 640px) {
  .section-intro { padding: 72px 0 40px; }
  .things__grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .steps { margin-bottom: 72px; }
  .trust { margin-top: 96px; }
  .proof-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .band { padding: 28px 20px; margin-top: 80px; }
  .things { padding-top: 112px; }
}

/* ---------- /why ---------- */
.todo { color: #ff8a3d; }
.source { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-faint); margin-top: 10px; }
.matrix-scroll + .source { margin-top: 24px; }
/* pages that end on content (no closing sign-up band) still get a section's worth of room before the footer */
main > .content:last-child { padding-bottom: var(--sec-gap); }
.why-hero { padding: clamp(72px, 12vh, 140px) 0 72px; }
.why-hero h1 { max-width: 18ch; text-wrap: balance; }
/* the 3D monogram (why-mark.js): sits behind the copy on the right, scrolls with the hero */
.why-hero .container { position: relative; }
.why-hero .container > :not(.why-mark) { position: relative; z-index: 1; }
.why-mark { position: absolute; top: -42%; right: 0; width: 58%; height: 220%; pointer-events: none; }
.why > section:not(.why-hero) { position: relative; z-index: 1; } /* later sections stay over the mark as it trails the scroll */
@media (max-width: 991px) { .why-mark { display: none; } }
.why-lede { margin-top: 24px; font-family: var(--font-mono); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); color: var(--text-dim); max-width: 46ch; }
.why-stats { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 0; }
.why-stats .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.stat__n { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 12px; }
.why-flow { padding-top: 112px; }
.flow { margin: 48px 0 0; }
/* The vertical axis is a gradient, focus (top) → context → distraction (bottom); lines stretch, strokes don't. */
.flow__chart { position: relative; aspect-ratio: 5 / 2; background: linear-gradient(to bottom, rgba(250, 202, 8, .10), rgba(250, 202, 8, .02) 33.3%, rgba(232, 234, 239, .02) 50%, rgba(255, 90, 95, .03) 66.6%, rgba(255, 90, 95, .14)); border-block: 1px solid var(--border); }
.flow__chart::before, .flow__chart::after { content: ""; position: absolute; inset-inline: 0; border-top: 1px dashed var(--border); }
.flow__chart::before { top: 33.3%; }
.flow__chart::after { top: 66.6%; }
.flow__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__today { fill: none; stroke: var(--text-dim); stroke-width: 1.5; stroke-linejoin: round; opacity: .7; }
.flow__hud { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(250, 202, 8, .55)); }
.flow__pulse { fill: none; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(250, 202, 8, .9)); }
/* draw-in: anim.js adds .is-drawn when the chart scrolls into view; lines wipe in left to right, notes follow */
html.th-anim .flow__chart svg { clip-path: inset(0 100% 0 0); }
html.th-anim .flow__note { opacity: 0; }
html.th-anim .flow__chart.is-drawn svg { clip-path: inset(0 0 0 0); transition: clip-path 2.4s cubic-bezier(.65, 0, .35, 1); }
html.th-anim .flow__chart.is-drawn .flow__note { opacity: 1; transition: opacity .6s ease 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .flow__pulse { display: none; }
  html.th-anim .flow__chart svg { clip-path: none; }
  html.th-anim .flow__note { opacity: 1; }
}
.flow__zone { position: absolute; right: 0; padding-right: .75em; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.flow__zone--focus { top: 16.6%; color: var(--accent); }
.flow__zone--context { top: 50%; }
.flow__zone--noise { top: 83.3%; color: #ff8a8d; }
.flow__note { position: absolute; font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.4; color: var(--text-dim); white-space: nowrap; }
.flow__note--hud { color: var(--accent); }
.flow__legend { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 20px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-dim); }
.flow__key { display: inline-flex; align-items: center; gap: .75em; }
.flow__key::before { content: ""; width: 2em; border-top: 2px solid var(--text-dim); }
.flow__key--hud { color: var(--text); }
.flow__key--hud::before { border-top: 3px solid var(--accent); }
.why-flow .source a, .why-stats .source a { color: inherit; text-decoration-color: var(--border-strong); }
.noise-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 64px; }
/* noisy-tool mock-ups: sized like the home page drawings (em off a cqi root) */
.shot { margin: 0; container-type: inline-size; }
.shot figcaption { margin-top: 16px; font-family: var(--font-mono); }
.shot figcaption b { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
.shot figcaption span { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-dim); }
.noise { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-elev); clip-path: var(--clip-notch-sm); font-family: var(--font-mono); font-size: clamp(0.4375rem, 2.5cqi, 0.8125rem); line-height: 1.3; color: var(--text-dim); }
.noise ul { list-style: none; margin: 0; padding: 0; }
.noise p { margin: 0; }
.noise .chip { padding: .25em .6em; font-size: .85em; }
.noise .chip em { font-style: normal; color: #ff8a8d; margin-left: .3em; }
.nz-line { display: block; height: .55em; margin: .35em 0; background: rgba(232, 234, 239, .12); }
.nz-bar { display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.nz-bar span { color: var(--text-faint); }
/* chat */
.noise--chat { display: grid; grid-template-columns: 36% 1fr; }
.nz-side { background: #111418; padding: .8em 0; overflow: hidden; }
.nz-ws { padding: 0 .9em .6em; color: var(--text); font-weight: 700; }
.nz-head { padding: .8em .9em .3em; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.nz-side li { display: flex; align-items: center; justify-content: space-between; padding: .18em .9em; color: var(--text-faint); white-space: nowrap; }
.nz-side li.nz-unread { color: var(--text); font-weight: 600; }
.nz-side em { font-style: normal; font-size: .8em; padding: .05em .45em; background: rgba(232, 234, 239, .14); color: var(--text); }
.nz-side em.nz-at { background: #ff5a5f; color: var(--ink); font-weight: 700; }
.nz-main { overflow: hidden; }
.nz-msg { display: flex; gap: .7em; padding: .55em .9em; }
.nz-msg > div { flex: 1; }
.nz-toast { position: absolute; right: 4%; top: 18%; max-width: 52%; padding: .7em .9em; background: rgba(27, 31, 37, .97); border: 1px solid var(--border-strong); border-left: 2px solid #ff5a5f; color: var(--text); box-shadow: 0 1em 2.4em rgba(0, 0, 0, .5); }
.nz-toast b { color: #ff8a8d; }
/* board */
.nz-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; padding: .7em; }
.nz-col p { display: flex; justify-content: space-between; margin-bottom: .5em; font-size: .85em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.nz-card { padding: .55em .6em; margin-bottom: .5em; background: var(--bg-panel); border: 1px solid var(--border); }
.nz-card em { font-style: normal; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; }
.nz-title { display: block; margin: .3em 0; color: var(--text-dim); }
.nz-meta { display: flex; align-items: center; justify-content: space-between; margin-top: .3em; font-size: .8em; color: var(--text-faint); }
.nz-meta .av-mini { width: 1.8em; height: 1.8em; font-size: .9em; }
/* inbox */
.nz-count { padding: .05em .5em; background: #ff5a5f; font-weight: 700; }
.nz-bar .nz-count { color: var(--ink); }
.nz-rows li { display: grid; grid-template-columns: .6em 8.5em minmax(0, 1fr) auto; gap: .7em; align-items: center; padding: .52em .9em; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--text-faint); }
.nz-rows li > * { overflow: hidden; text-overflow: ellipsis; }
.nz-rows li.nz-unread { color: var(--text-dim); }
.nz-rows li.nz-unread b { color: var(--text); }
.nz-rows b { font-weight: 600; }
.nz-dot { width: .5em; height: .5em; border-radius: 50%; }
.nz-unread .nz-dot { background: var(--accent); }
.nz-rows time { font-size: .85em; }
/* feature lists on /platform and /security: numbered cells, same rhythm as .steps */
.kit-sec + .kit-sec .section-intro { padding-top: var(--sec-gap); }
.kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.kit li { border-top: 1px solid var(--border-strong); padding-top: 20px; }
.kit h3 { font-size: var(--fs-h4); margin: 12px 0 10px; }
.kit p { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.65; margin: 0; }
.kit code { font-family: var(--font-mono); font-size: .92em; color: var(--text); background: var(--accent-soft); padding: 1px 5px; }
.kit a, .kit-next a, .not-yet a { color: var(--accent); }
.tag-early { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; vertical-align: middle; }
.kit-next { margin-top: 56px; font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-dim); max-width: 72ch; }
.kit-next .kicker { display: flex; width: fit-content; margin: 0 0 12px; } /* kicker on its own line above the note */
.not-yet { list-style: none; margin: 0; padding: 0; }
.not-yet li { padding: 20px 0; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.6; color: var(--text-dim); }
.not-yet li:last-child { border-bottom: 1px solid var(--border); }
.not-yet b { color: var(--text); font-weight: 600; margin-right: .5em; }
.why-hero .why-lede a, .section-intro a { color: var(--accent); }
.before-after { list-style: none; margin: 0; padding: 0; }
.before-after__head { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; margin: 0 0 14px; }
.before-after li { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); line-height: 1.45; }
.before-after li:last-child { border-bottom: 1px solid var(--border); }
.before-after .was { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(232, 234, 239, .25); }
.before-after .arr { color: var(--accent); text-align: center; }
.before-after .now { color: var(--text); }
.why-quotes { padding-top: 144px; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.quotes figure { margin: 0; border-top: 1px solid var(--border-strong); padding-top: 20px; }
.quotes blockquote { margin: 0; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.35; }
.quotes figcaption { margin-top: 14px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.why-compare { padding-top: 32px; }
.matrix-scroll { overflow-x: auto; }
.matrix { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: left; font-weight: var(--fw-text); }
.matrix td { color: var(--text-faint); }
.matrix thead th { font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); border-bottom-color: var(--border-strong); }
.matrix tbody th { color: var(--text); }
.matrix .us { color: var(--accent); background: rgba(250, 202, 8, .06); }
.why-alts { padding-top: 112px; }
.alts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.alts a { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; text-transform: lowercase; }
.alts a span, .alts a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .kit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flow__chart { aspect-ratio: 4 / 3; }
  .flow__note { display: none; }
}
@media (max-width: 1100px) {
  .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-stats .container, .quotes, .noise-shots { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .before-after li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .before-after .arr { text-align: left; }
  .before-after__head { display: none; }
  .alts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- utilities ---------- */
.accent { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- inline-style-free helpers (CSP: style-src 'self', no style="" attributes) ---------- */
.c-peach { background: #ffb98a; }
.c-sky { background: #9fd3ff; }
.c-lilac { background: #c9a2ff; }
.c-mint { background: #9fe0b8; }
.c-paper { background: #e8eaef; }
.c-pink { background: #f7a8c8; }
.c-red { background: #ff8a8d; }
.t-peach { color: #ffb98a; }
.t-sky { color: #9fd3ff; }
.t-lilac { color: #c9a2ff; }
.t-mint { color: #9fe0b8; }
.t-paper { color: #e8eaef; }
.t-pink { color: #f7a8c8; }
.t-red { color: #ff8a8d; }
.g-peach { background: linear-gradient(160deg, #3a2f2a, #1d1a1c); }
.g-sky { background: linear-gradient(160deg, #26303a, #171b21); }
.g-lilac { background: linear-gradient(160deg, #2f2a3a, #1a1820); }
.g-mint { background: linear-gradient(160deg, #263a30, #171e1b); }
.sw-yellow { background: linear-gradient(135deg, #faca08 50%, #14171b 50%); }
.sw-magenta { background: linear-gradient(135deg, #ff4fd8 50%, #1a1030 50%); }
.sw-mint { background: linear-gradient(135deg, #9fe0b8 50%, #13201a 50%); }
.sw-blue { background: linear-gradient(135deg, #7fc4ff 50%, #0e1a24 50%); }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.pos-win-a { left: 5%; top: 9%; width: 55%; height: 80%; }
.pos-win-b { left: 5%; top: 9%; width: 66%; height: 80%; }
.pos-win-term { left: 6%; top: 15%; width: 88%; height: 62%; }
.pos-hcard { right: 11%; top: 24%; }
.edge.pos-edge { top: 12%; }
.pos-pill { left: 6%; top: 5%; }
.win-bar span { margin-left: .727em; }
.figma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .727em; padding: 1.091em; }
.figma-s, .figma-l { background: #232830; }
.figma-s { height: 4.909em; }
.figma-l { height: 10em; }
.figma-wide { grid-column: span 2; }
.chip.chip--bare { border: 0; background: none; }
.btn.btn--inline { padding-left: 0; margin-top: 18px; }
.flow__note--today { left: 13%; top: 54%; }
.flow__note--hud { left: 47.5%; top: 45%; }
.fx-spec a, .thing > p a, .private-band__copy a { color: var(--accent); }

/* ---------- /platform + /security layout: feature rows, balanced grids, drawn diagrams ---------- */
.kit--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kit--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.kit--spaced { margin-top: 96px; }
.kit-sec .feature__body p + p { margin-top: 12px; }
.feature__body code { font-family: var(--font-mono); font-size: .92em; color: var(--text); background: var(--accent-soft); padding: 1px 5px; }
.feature__body a { color: var(--accent); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split__media { container-type: inline-size; }
/* diagrams (security) */
.diagram { font-family: var(--font-mono); font-size: clamp(0.6875rem, 2.4cqi, 0.9375rem); line-height: 1.4; color: var(--text-dim); display: flex; flex-direction: column; gap: 1.2em; }
.dg-box { position: relative; border: 1px solid var(--border-strong); padding: 1.6em 1.2em 1.1em; display: flex; flex-direction: column; gap: .35em; }
.dg-app { background: var(--bg-elev); clip-path: var(--clip-notch-sm); gap: .9em; }
.dg-ui, .dg-proc { background: var(--bg-panel); border-color: var(--border); }
.dg-proc { border-left: 2px solid var(--accent); }
.dg-label { position: absolute; top: .45em; left: 1.2em; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.dg-box b { color: var(--text); font-weight: 600; }
.dg-pipe { align-self: center; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.dg-pipe::before, .dg-pipe::after { content: "↕"; margin: 0 .6em; }
.dg-net { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4em; }
.dg-net li { padding: .55em 1em; border: 1px solid var(--border); }
.dg-net li::before { display: inline-block; width: 1.4em; font-weight: 700; }
.dg-net .ok { color: var(--text); }
.dg-net .ok::before { content: "✓"; color: #9fe0b8; }
.dg-net .no { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(232, 234, 239, .25); }
.dg-net .no::before { content: "✕"; color: #ff8a8d; }
.dg-net .out::before { content: "→"; color: var(--accent); }
.dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; padding-top: .3em; }
.dg-grid span { padding: .7em .4em; text-align: center; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); }
.band__demo .diagram { font-size: inherit; }
@media (max-width: 1100px) {
  .kit--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .kit--spaced { margin-top: 72px; }
}
@media (max-width: 640px) {
  .kit--4, .kit--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- wide page heroes (/platform, /security): copy left, visual right ---------- */
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.page-hero .why-lede { max-width: 54ch; }
.page-hero .why-lede a { color: var(--accent); }
.hero-collage { position: relative; aspect-ratio: 16 / 11; }
.hc { position: absolute; width: 72%; height: auto; clip-path: var(--clip-notch); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.hc-1 { top: 0; right: 0; opacity: .55; }
.hc-2 { top: 22%; left: 0; opacity: .8; }
.hc-3 { bottom: 0; right: 8%; }
.readout { justify-self: center; width: min(100%, 30rem); background: var(--bg-elev); clip-path: var(--clip-notch); padding: clamp(20px, 2.4vw, 32px); font-family: var(--font-mono); }
.readout__title { margin: 0 0 14px; font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.readout ul { list-style: none; margin: 0; padding: 0; }
.readout li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-dim); }
.readout b { font-weight: 600; color: var(--text); text-align: right; }
.readout .off { color: var(--text-faint); }
.readout .off::before { content: "● "; color: #ff8a8d; }
.readout .on::before { content: "● "; color: #9fe0b8; }
.section-intro--flush { padding-top: 0; }
/* the journey band: two columns on desktop instead of a narrow centred column */
.invert__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.invert__grid h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); }
.section--invert .invert__grid .spec-stack { max-width: 62ch; }
/* the band is full-bleed; its grid sits on the same gutter as .container (off by one gutter past --maxw otherwise) */
.section.section--invert { padding-inline: 0; }
.invert__grid { padding-inline: var(--gutter); box-sizing: border-box; }
.section--invert .fx-spec a { color: var(--ink); text-decoration: underline; }
@media (max-width: 1100px) {
  .page-hero__grid, .invert__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-collage { max-width: 640px; }
  .readout { justify-self: start; }
}

/* ---------- vertical rhythm: one gap between content sections on every page (home is the reference) ---------- */
:root { --sec-gap: clamp(112px, 8.5vw, 176px); }
.why-flow { padding-top: 0; }
.why-friction { padding-top: clamp(32px, 3vw, 64px); }
.why .section--invert { margin-block: var(--sec-gap); }
.section--invert + .why-quotes { padding-top: 0; }
.why-alts { padding-top: var(--sec-gap); }
.content + .cta-band, .content + .private-band { margin-top: clamp(32px, 3vw, 64px); }
.section + .content .kit-sec:first-child .section-intro { padding-top: clamp(24px, 2.5vw, 48px); }
.kit-sec--note { padding-top: clamp(72px, 6vw, 112px); }

/* ---------- /security layouts: policy panel, spec rows, datasheet, status chips ---------- */
.policy { background: var(--bg-elev); clip-path: var(--clip-notch); padding: clamp(20px, 2.6vw, 36px); font-family: var(--font-mono); }
.policy__title { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.policy__title span { color: var(--accent); }
.policy ul { list-style: none; margin: 0; padding: 0; }
.policy li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body); color: var(--text); }
.policy li em { display: block; font-style: normal; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }
.sw { flex: none; position: relative; width: 2.6em; height: 1.4em; border-radius: 99em; background: var(--bg-panel); border: 1px solid var(--border-strong); }
.sw::after { content: ""; position: absolute; top: 50%; left: .2em; width: 1em; height: 1em; border-radius: 50%; background: var(--text-faint); transform: translateY(-50%); }
.policy__foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: var(--fs-xs); color: var(--text-dim); }
.rec { padding: 3px 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ff8a8d; border: 1px solid rgba(255, 90, 95, .5); }
.rec.cc { color: var(--text); border-color: var(--border-strong); }
.specs { margin: 0; display: grid; gap: 0; font-family: var(--font-mono); }
.specs > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--border); }
.specs > div:last-child { border-bottom: 1px solid var(--border); }
.specs dt { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: .2em; }
.specs dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
.datasheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; font-family: var(--font-mono); }
.datasheet li { display: grid; grid-template-columns: 4.5em 8.5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-dim); }
.datasheet b { font-weight: 600; color: var(--text); }
.ds-tag { justify-self: start; font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; }
.ds-app { color: #9fd3ff; } .ds-data { color: #9fe0b8; } .ds-calls { color: #c9a2ff; } .ds-ai { color: var(--accent); } .ds-ops { color: #ffb98a; }
.not-yet li { display: grid; grid-template-columns: 8.5em 16em minmax(0, 1fr); gap: 20px; align-items: baseline; }
.not-yet b { margin-right: 0; }
.status { justify-self: start; font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; }
.status--in-progress { color: var(--accent); } .status--planned { color: #9fd3ff; } .status--parked { color: var(--text-faint); } .status--not-yet { color: #ffb98a; }
@media (max-width: 1100px) {
  .datasheet { grid-template-columns: minmax(0, 1fr); }
  .not-yet li { grid-template-columns: 8.5em minmax(0, 1fr); }
  .not-yet li > span:last-child { grid-column: 2; }
}
@media (max-width: 640px) {
  .specs > div, .datasheet li, .not-yet li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .not-yet li > span:last-child { grid-column: auto; }
}
.specs--wide > div { grid-template-columns: 12em minmax(0, 1fr); }
.specs dt .tag-early { margin-left: 6px; }
@media (max-width: 640px) { .specs--wide > div { grid-template-columns: minmax(0, 1fr); } }
/* ---------- text links in copy: hover underline, the arrow nudges forward ---------- */
main p a:not(.btn), main dd a, main li a:not(.btn), .source a, .kit-next a {
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; text-decoration-thickness: 1px;
  transition: color var(--dur-fast, .18s) ease, text-decoration-color var(--dur-fast, .18s) ease;
}
main p a:not(.btn):hover, main dd a:hover, main li a:not(.btn):hover, .source a:hover, .kit-next a:hover,
main p a:not(.btn):focus-visible, main dd a:focus-visible, main li a:not(.btn):focus-visible { text-decoration-color: currentColor; }
.arr { display: inline-block; transition: transform var(--dur-fast, .18s) var(--ease-techno, ease); }
a:hover .arr, a:focus-visible .arr { transform: translateX(.3em); }
@media (prefers-reduced-motion: reduce) { .arr { transition: none; } a:hover .arr, a:focus-visible .arr { transform: none; } }
main .section--invert .fx-spec a { text-decoration-color: currentColor; } /* on yellow the underline is the only link cue */
.why-quotes[hidden] + .why-compare .section-intro { padding-top: 0; } /* quotes hidden until real ones exist */
.stage--video { aspect-ratio: 4 / 3; width: 100%; background: var(--bg-elev); }
.stage--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; display: block; } /* square clip shown 4:3: mostly trimmed from the top, keeping the chat window whole */

/* ---------- footer: taller, links in labelled columns ---------- */
.site-footer {
  display: grid; align-items: start; gap: 28px clamp(32px, 5vw, 96px);
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: "brand product compare connect legal" "idents product compare connect legal" "copy copy copy copy copy";
  padding: clamp(56px, 6vw, 96px) var(--gutter) 48px;
}
.site-footer__brand { grid-area: brand; }
.site-footer__idents { grid-area: idents; }
.site-footer__legal { flex-direction: column; gap: 12px; min-width: 9rem; }
.site-footer__legal[aria-label="Product"] { grid-area: product; }
.site-footer__legal[aria-label="Compare"] { grid-area: compare; }
.site-footer__legal[aria-label="Connect"] { grid-area: connect; }
.site-footer__legal[aria-label="Legal"] { grid-area: legal; }
.site-footer__legal::before { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.site-footer__legal[aria-label="Product"]::before { content: "// teamhud"; }
.site-footer__legal[aria-label="Compare"]::before { content: "// compare"; }
.site-footer__legal[aria-label="Connect"]::before { content: "// connect"; }
.site-footer__legal[aria-label="Legal"]::before { content: "// legal"; }
.site-footer__legal a { text-transform: lowercase; font-size: var(--fs-sm); }
.site-footer__copy { grid-area: copy; margin: 20px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
@media (max-width: 1100px) {
  .site-footer { grid-template-columns: repeat(4, auto); justify-content: space-between; grid-template-areas: "brand brand brand brand" "idents idents idents idents" "product compare connect legal" "copy copy copy copy"; }
}
@media (max-width: 640px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand brand" "idents idents" "product compare" "connect legal" "copy copy"; }
}

/* get-started / pricing heroes: a row of buttons under the lede; the account card's stacked buttons */
.hero-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.form-card .btn + .btn { margin-top: 12px; }
.form-card__fineprint a { color: var(--accent); }

/* Comparison tables. Wide: the feature column takes a third, the rest split evenly.
   Narrow (<992px): each feature becomes a block with its values labelled underneath (data-label). */
.matrix--stack { table-layout: fixed; }
.matrix--stack thead th:first-child { width: 34%; }
.matrix--compare { --cols: 7; }
.matrix--compare thead th:first-child { width: 28%; }
.matrix--plans { --cols: 4; }
@media (min-width: 992px) { .matrix--plans thead th:first-child { width: 22%; } .matrix--plans tfoot .btn { white-space: normal; text-align: center; padding-inline: 8px; letter-spacing: .06em; } }
@media (max-width: 991px) {
  .matrix--stack { min-width: 0; table-layout: auto; }
  .matrix--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix--stack tr { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 12px; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .matrix--stack tbody th { grid-column: 1 / -1; padding: 0 0 10px; border: 0; }
  .matrix--stack td { border: 0; padding: 8px 10px; }
  .matrix--stack tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
  .matrix--plans tfoot tr { border-bottom: 0; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix--plans tfoot td:first-child, .matrix--plans tfoot td:has(.is-disabled) { display: none; } /* the cards above already say "after early access" */
  .matrix--plans tfoot td { padding: 0; }
}
@media (max-width: 640px) {
  .matrix--compare { --cols: 3; }
}
@media (max-width: 560px) {
  .matrix--plans { --cols: 2; }
}

/* contact: form on the left, what to expect on the right */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.kit.contact-notes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.contact-notes .kicker { margin-bottom: 8px; }
@media (max-width: 991px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* /why video calls: today over with-teamhud, stacked, beside one video */
.calls-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
.calls-list { grid-column: 1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.calls-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--border); font-family: var(--font-mono); line-height: 1.45; }
.calls-list .was { font-size: var(--fs-sm); color: var(--text-faint); }
.calls-list .was s { text-decoration-color: rgba(232, 234, 239, .25); }
/* row labels share one width so both lines start at the same edge */
.calls-list b { font-size: var(--fs-3xs); font-weight: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.calls-list .now b { color: var(--accent); }
.calls-list .was, .calls-list .now { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; }
.calls-list .now { font-size: var(--fs-body); color: var(--text); }
.calls-video { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.calls-video .reel__media { aspect-ratio: 4 / 3; } /* the calls chapters are 960x720 app capture */
@media (max-width: 991px) {
  .calls-wrap { grid-template-columns: minmax(0, 1fr); }
  .calls-video { grid-column: 1; grid-row: auto; margin-top: 32px; }
}

/* ---------- /vs compare pages (plans/1.0.0-beta/WEBSITE_EARLY_ACCESS_LAUNCH_PLAN.md "vs landing pages") ---------- */
.matrix--vs { --cols: 2; }
.matrix--vs thead th:first-child { width: 40%; }
.checked time { color: var(--text); }
.vs .vs-great { margin-top: 0; }
.vs h1 .kicker { display: flex; width: fit-content; } /* the "teamhud vs <tool>" kicker sits inside the h1 so the comparison keyword is in it */
.vs-fit-intro { margin-top: var(--sec-gap); }
.vs-brief h3 a { color: var(--text); text-decoration: none; }
.vs-brief h3 a::after { content: " →"; color: var(--accent); }
.vs-brief h3 a:hover, .vs-brief h3 a:focus-visible { color: var(--accent); }
.stage--video.stage--wide { aspect-ratio: 16 / 9; }
.stage--wide video { object-position: 50% 50%; } /* 1920x1080 cuts shown whole */
/* /why table: a "vs <tool>" link under each column */
.matrix--compare tfoot td { padding-top: 16px; }
.vs-link { color: var(--accent); text-decoration: none; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.vs-link:hover, .vs-link:focus-visible { text-decoration: underline; }
@media (max-width: 991px) {
  .matrix--compare tfoot td:nth-child(-n+2) { display: none; }
  .matrix--compare tfoot td { padding: 6px 10px; }
}

/* ---------- /press ---------- */
.press-copy p, .proof-list a { overflow-wrap: anywhere; }
.proof-list a, .press-shots a { color: var(--accent); }
.press-shots p { margin-top: 12px; font-size: var(--fs-sm); }
.press-sub { margin: 72px 0 24px; font-size: var(--fs-h4); }
.press-logo { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 24px; background: var(--text); clip-path: var(--clip-notch-sm); }
.press-logo--dark { background: var(--bg-elev); }
.press-logo img { max-width: 80%; max-height: 64px; }
.press-logos p { margin-top: 10px; font-size: var(--fs-sm); }
.kit--4.press-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 991px) { .kit--4.press-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press-logos p a, .press-people a, .press-boiler a { color: var(--accent); }
.press-boiler { margin-top: 96px; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); }
.press-person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; }
.press-person img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; clip-path: var(--clip-notch-sm); }
.press-person h3 { margin-top: 0; }
.press-person p + p { margin-top: 10px; }
@media (max-width: 991px) { .press-boiler { grid-template-columns: minmax(0, 1fr); } }