/* fog.tools homepage — the FOG design study ported to production.
   Source of truth for the look: ~/Desktop/FOG LLC/fog.tools.html (1180px canvas,
   inline-styled). Everything below is that page as a real stylesheet: the study's
   numbers at >=1180px, fluid beneath it. Brand values come from fog-brand-kit
   (BRAND.md + contrast-matrix.md) — deviation needs owner approval.
   The three parallax scenes (.px-*) are the study
   ~/Desktop/FOG LLC/FOG Parallax Backgrounds.dc.html, ported layer for layer. */

@font-face { font-family: "Archivo"; src: url("../fonts/fog-archivo.woff2") format("woff2"); font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; unicode-range: U+0000-00FF, U+2013-2026, U+20AC; }
@font-face { font-family: "Public Sans"; src: url("../fonts/fog-publicsans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+2013-2026, U+20AC; }
@font-face { font-family: "Chivo Mono"; src: url("../fonts/fog-chivomono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+2013-2026, U+20AC; }
/* CLS-free fallback stacks (fog-brand-kit/03-typography/fallback-metrics.css) */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial");
  size-adjust: 130.8%; ascent-override: 89%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial");
  size-adjust: 103.1%; ascent-override: 91%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Chivo Mono Fallback"; src: local("Courier New");
  size-adjust: 100%; ascent-override: 84%; descent-override: 21%; line-gap-override: 0%; }

:root {
  --dark: #111419;      /* basalt */
  --dark-2: #1a1e24;
  --dark-3: #23272e;
  --dark-line: #363b42;
  --line-2: #646a72;
  --on-dark: #e7eaec;   /* vapor ink */
  --on-dark-2: #818890; /* slate — AA on basalt-1 */
  --acc: #ed842c;       /* flare: fills and dark text only */
  --acc-ink: #14171d;
  --ridge: #4a637d;
  --f-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-text: "Public Sans", "Public Sans Fallback", system-ui, sans-serif;
  --f-mono: "Chivo Mono", "Chivo Mono Fallback", ui-monospace, monospace;
  --ez-ui: cubic-bezier(.2, .8, .2, 1);
  --ez-burn: cubic-bezier(.16, 1, .3, 1);
  --ez-clip: cubic-bezier(.7, 0, .16, 1);
  /* the study's 49px gutter, held at >=1180px and shrunk on the way down */
  --gutter: clamp(20px, 4.15vw, 49px);
  --sec-pad: clamp(56px, 7.4vw, 88px);
  /* Full-bleed layout. The study was a 1180px canvas, which reads as a narrow
     column with dead gutters on a wide screen. Every band now spans the viewport
     and only the *content* is held to a measure: --pad-x is the gutter until the
     screen passes --content, and centres the column after that. Backgrounds and
     the parallax scenes therefore run edge to edge at every width. */
  --content: 1440px;
  --pad-x: max(var(--gutter), (100% - var(--content)) / 2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
fieldset { border: 0; }
ul { list-style: none; }
button { font: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ---- type roles (fog-brand-kit) ---- */
.fog-display { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.01em; }
.fog-t1 { font-family: var(--f-display); font-weight: 750; font-variation-settings: "wdth" 118; letter-spacing: -.01em; }
.fog-t2 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 110; letter-spacing: -.005em; }
.fog-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums lining-nums; }
.fog-label { font-family: var(--f-text); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.acc { color: var(--acc); }
.muted { color: var(--on-dark-2); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--acc); color: var(--acc-ink);
  padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* ---- shell: full-bleed basalt; the measure lives in --pad-x, not here ---- */
/* overflow-x: clip, not hidden: clip does not create a scroll container, so the
   sticky column in "why sites fail" keeps working while the 3D drum's outer cards
   stop widening the document on a phone. */
.shell { position: relative; width: 100%; background: var(--dark); overflow-x: clip; }
.sec { padding: var(--sec-pad) var(--pad-x); border-top: 1px solid var(--dark-line); }

/* reading progress — the hairline the study runs across the top of the canvas */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9; background: var(--dark-3); }
.prog > span { display: block; height: 100%; background: var(--acc); transform: scaleX(0); transform-origin: left; }

/* ---- surfaces ---- */
.fog-grain { position: relative; }
.fog-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }
.fog-bank { background: radial-gradient(120% 90% at 82% -10%, rgba(237, 132, 44, .16), transparent 55%), linear-gradient(178deg, #111419, #1a1e24 90%); }

/* ---- buttons ---- */
.fog-btn { font-family: var(--f-text); font-weight: 700; font-size: 16px; border-radius: 6px; border: 1.5px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none;
  padding: 14px 26px; min-height: 44px;
  transition: background-color 120ms var(--ez-ui), color 120ms var(--ez-ui), border-color 120ms var(--ez-ui), translate 120ms var(--ez-ui); }
.fog-btn-beacon { background: var(--acc); color: var(--acc-ink); }
.fog-btn-beacon:hover { translate: 0 -2px; background: #f0923f; }
.fog-btn-quiet { background: transparent; color: var(--on-dark); border-color: var(--line-2); padding: 14px 22px; }
.fog-btn-quiet:hover { border-color: var(--on-dark); translate: 0 -2px; }

/* ---- header ---- */
.nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 22px; padding: 26px var(--pad-x); }
.nav-brand { display: block; margin-right: auto; color: var(--on-dark); }
.nav-brand svg { width: 132px; height: 42px; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a.nav-link { color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a.nav-link:hover { color: var(--acc); }
.nav a.nav-tel { font-family: var(--f-mono); color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a.nav-tel:hover { color: var(--acc); }

/* ---- hero ---- the FINAL "answered live" hero, ported from the owner's
   2026-08-05 export. Two canvases, one activity column, one masked headline.
   Layer order: 0 WebGL fog · 1 readability scrim · 2 live engine · 3 nav ·
   4 content · 5 activity column · 6 grain. */
.hero { position: relative; overflow: hidden; min-height: max(720px, 100svh); display: flex; flex-direction: column; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transition: opacity .9s ease .1s; }
.hero-canvas-bg { z-index: 0; }
.hero-canvas-live { z-index: 2; }
/* the shader is desktop-only: a WebGL pass and a 2D pass together cost more than
   the mobile LCP budget allows, and .fog-bank already carries the same gradient */
@media (max-width: 767px) { .hero-canvas-bg { display: none; } }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(92deg, rgba(17, 20, 25, .4), rgba(17, 20, 25, 0) 58%); }
.hero .nav { z-index: 4; }
.hero.fog-grain::after { z-index: 6; }

.hero-in { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x) clamp(56px, 7.8vw, 92px); }
.hero-eyebrow { color: var(--on-dark-2); }
.hero-h1 { font-size: clamp(31px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -.015em; margin: 20px 0 0; }
.hero-l1, .hero-l2 { display: block; }
/* nowrap on line 1 only. Line 2 paints through background-clip: text, so any
   glyph past the element's box gets no background and vanishes rather than
   overflowing visibly — it has to be free to wrap. */
@media (min-width: 700px) { .hero-l1 { white-space: nowrap; } }
/* one mask per word. The padding/negative-margin pair keeps descenders from
   being clipped by the very overflow that hides the word before it rises. */
.hero-word { display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: .08em; margin-bottom: -.08em; }
.hero-word > i { display: inline-block; font-style: inherit; }
.hero-l2 { position: relative; color: var(--acc); }
.hero-ring { position: absolute; left: 9%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 1.5px solid rgba(237, 132, 44, .55); border-radius: 50%; opacity: 0; transform: scale(.2); pointer-events: none; }

/* the rotating line. Absolute stack, one item lit at a time — the box is reserved
   at two lines' height so nothing under it moves when a longer line arrives. */
.ticker { position: relative; height: 4.6em; margin: 24px 0 0; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.5; }
.ticker > span { position: absolute; left: 0; top: 0; color: var(--on-dark-2); opacity: 0; }
.ticker > span:first-child { opacity: 1; }
.ticker em { font-style: normal; }
@media (min-width: 700px) { .ticker { height: 32px; } .ticker > span { white-space: nowrap; } }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.fog-btn-beacon[data-fog-cta] { transition: background-color 120ms var(--ez-ui), box-shadow 240ms var(--ez-ui), transform 150ms var(--ez-ui); }
.fog-btn-beacon[data-fog-cta]:hover { translate: none; box-shadow: 0 8px 30px rgba(237, 132, 44, .32); }

/* ---- hero activity column ---- the simulated call feed */
.hero-col { position: absolute; top: 120px; right: var(--gutter); z-index: 5; width: 296px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
@media (max-width: 1080px) { .hero-col { display: none; } }
.hero-pill { background: rgba(26, 30, 36, .78); border: 1px solid var(--dark-line); border-radius: 10px;
  padding: 13px 15px; backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.hero-pill-top { display: flex; align-items: center; gap: 10px; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }
.hero-dot[data-tone="ring"] { background: var(--acc); }
.hero-dot[data-tone="warm"] { background: var(--acc); }
.hero-dot[data-tone="cool"] { background: #59738e; }
.hero-pill-title { font-weight: 600; font-size: 13.5px; color: var(--on-dark); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-pill-meta { margin-left: auto; font-size: 11px; color: var(--on-dark-2); white-space: nowrap; flex: none; }
.hero-pill-line { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--on-dark-2); }
.hero-pill-voice { gap: 9px; color: #c6ccd2; }
.hero-pill-booked { color: var(--acc); }
.hero-pill-cool { color: #c6ccd2; }
.hero-pill-cool svg { color: #59738e; }
.hero-pill-dim { color: var(--on-dark-2); }
.hero-pill-dim svg { color: var(--line-2); }
.hero-pill-job { margin-top: 7px; }
.hero-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
.hero-bars > i { width: 3px; height: 12px; border-radius: 1px; background: var(--acc); transform-origin: 50% 100%; }
.hero-stack { display: flex; flex-direction: column; border-top: 2px solid var(--dark-line); margin-top: 2px; }
.hero-stack:empty { border-top: 0; }
.hero-row { display: flex; align-items: center; gap: 9px; padding: 9px 4px; border-bottom: 1px solid rgba(54, 59, 66, .6); }
.hero-row > .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hero-row > .l { font-family: var(--f-mono); font-size: 11.5px; color: #c6ccd2; white-space: nowrap; }
.hero-row > .s { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--line-2); white-space: nowrap; }

/* ---- hero motion ---- */
@keyframes fog-wordrise { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes fog-slam { from { opacity: 0; transform: scale(1.09) translateY(10px); filter: blur(14px); }
  70% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fog-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes fog-reveal { from { opacity: 0; transform: translateX(26px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fog-settle { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes fog-tickin { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fog-voicebar { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@keyframes fog-ringdot { from { box-shadow: 0 0 0 0 rgba(237, 132, 44, .5); } to { box-shadow: 0 0 0 12px rgba(237, 132, 44, 0); } }
@keyframes fog-ringwave { from { opacity: .65; transform: scale(.2); } to { opacity: 0; transform: scale(4.2); } }

.js .hero-word > i[data-rise] { animation: fog-wordrise .7s var(--ez-burn) both; }
.js .hero-l2[data-slam] { background: linear-gradient(105deg, #ed842c 42%, #ffc07e 50%, #ed842c 58%); background-size: 260% 100%;
  background-position: 130% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fog-slam .62s var(--ez-burn) 2.6s both, fog-shine 1.15s linear 2.85s 1 both; }
.js .hero-l2[data-slam] .hero-ring { animation: fog-ringwave 1s var(--ez-burn) 2.66s 1 both; }
.js .hero-pill { animation: fog-reveal .42s var(--ez-burn) both; }
.js .hero-pill-line { animation: fog-settle .24s ease both; }
.js .hero-dot[data-tone="ring"] { animation: fog-ringdot 1.1s ease-out infinite; }
.js .hero-bars > i { animation: fog-voicebar .58s ease-in-out infinite alternate; }
.js .hero-bars > i:nth-child(1) { animation-delay: -.44s; }
.js .hero-bars > i:nth-child(2) { animation-delay: -.33s; }
.js .hero-bars > i:nth-child(3) { animation-delay: -.22s; }
.js .hero-bars > i:nth-child(4) { animation-delay: -.11s; }
.js .hero-row { animation: fog-settle .32s ease both; }
.js .ticker > span[data-live] { animation: fog-tickin .5s var(--ez-burn) both; }

/* motion off: nothing animates, nothing is hidden by an animation that never
   runs, and the shader canvas paints one static frame (the engines handle that
   themselves — they read prefers-reduced-motion directly). */
@media (prefers-reduced-motion: reduce) {
  .js .hero-word > i[data-rise], .js .hero-pill, .js .hero-pill-line, .js .hero-row,
  .js .ticker > span[data-live] { animation: none; opacity: 1; transform: none; filter: none; }
  .js .hero-l2[data-slam] { animation: none; background: none; color: var(--acc);
    -webkit-text-fill-color: currentColor; }
  .js .hero-dot[data-tone="ring"], .js .hero-bars > i { animation: none; }
  .hero-ring { display: none; }
}

/* ---- 01 why sites fail ---- */
.slip-g { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; }
.slip-side { position: sticky; top: 24px; }
.slip-side h2 { font-size: clamp(30px, 3.75vw, 52px); line-height: 1.04; margin: 14px 0 0; }
.slip-side p { font-size: 16px; line-height: 1.55; margin: 14px 0 0; color: var(--on-dark-2); }
.slip-list { display: flex; flex-direction: column; gap: 20px; list-style: none; }
.slip-card { border: 1.5px solid var(--dark-line); border-radius: 10px; padding: 28px; display: flex; gap: 28px; align-items: center; }
.slip-card > .n { font-size: clamp(46px, 5.4vw, 76px); line-height: 1; letter-spacing: -.02em; color: var(--acc); flex: none; }
.slip-card h3 { font-size: clamp(20px, 2vw, 27px); line-height: 1.15; margin: 0; }
.slip-card p { font-size: 15.5px; line-height: 1.5; margin: 8px 0 0; max-width: 46ch; color: var(--on-dark-2); }
.src { color: var(--acc); }

/* ---- 02 the statement ---- the FINAL first-response scope (owner export
   2026-08-06). The band is a full viewport because the instrument has to read as
   an instrument: at the old 78svh the outer rings fell off the top and bottom and
   the scope became a few arcs behind a line of type. Everything inside the scope
   is sized in vmin off one 212vmin box, so the whole thing scales as one object.

   The accent is the site token, not the export's #E8833A, and the mono is the
   site's Chivo — a fourth webfont for one decorative HUD is not worth the hop. */
.stmt { position: relative; overflow: hidden; height: 100svh; min-height: 640px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--dark-line); background: var(--dark); }
.stmt-head { position: relative; z-index: 2; margin: 0; padding: 0 5vw; text-align: center;
  color: #edf1f6; font-weight: 900; font-size: clamp(2.55rem, 6.6vw, 10rem); line-height: 1.05; letter-spacing: -.015em; }
.stmt-ww { display: inline-block; overflow: hidden; padding-bottom: .25em; margin-bottom: -.25em; }
.stmt-w { display: inline-block; }
.stmt-w-first { position: relative; }
.stmt-bar { position: absolute; left: 0; right: 0; bottom: -.06em; height: .055em; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), rgba(237, 132, 44, .55)); transform-origin: 0 50%; }

/* the scene */
.stmt-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stmt-glow-par, .stmt-par { position: absolute; inset: 0; }
.stmt-glow { position: absolute; right: -28vmin; bottom: -32vmin; width: 115vmin; height: 115vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(214, 110, 42, .32), rgba(214, 110, 42, .10) 44%, transparent 70%);
  filter: blur(28px); opacity: .6; }
.stmt-grid { position: absolute; inset: -80px; opacity: .32;
  background-image: radial-gradient(rgba(205, 220, 235, .11) 1px, transparent 1.5px); background-size: 30px 30px; }
.stmt-scope { position: absolute; left: 50%; top: 50%; width: 212vmin; height: 212vmin; transform: translate(-50%, -50%); }
.stmt-ring { position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); transform: translate(-50%, -50%);
  border: 1px solid rgba(216, 228, 240, var(--o)); border-radius: 50%; }
.stmt-ring-dash { border-style: dashed; }
.stmt-cross { position: absolute; background: rgba(216, 228, 240, .06); }
.stmt-cross-x { left: 0; right: 0; top: 50%; height: 1px; }
.stmt-cross-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.stmt-ticks { position: absolute; left: 50%; top: 50%; width: 124vmin; height: 124vmin; transform: translate(-50%, -50%); opacity: .9; }
.stmt-ticks > i { position: absolute; left: calc(50% - .5px); top: 0; width: 1px; display: block; transform-origin: .5px 62vmin; }
.stmt-rlabel { position: absolute; left: calc(50% + 12px); top: calc(50% - var(--d) - 16px);
  font-size: 9px; letter-spacing: .22em; color: rgba(216, 228, 240, var(--o)); }
.stmt-star { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: 4px; height: 4px;
  border-radius: 50%; background: rgba(210, 220, 232, var(--a)); transform: translate(-50%, -50%); }
.stmt-core { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(237, 132, 44, .65); box-shadow: 0 0 10px rgba(237, 132, 44, .45); }
.stmt-fx, .stmt-embers, .stmt-blips { position: absolute; inset: 0; }

/* the sweep: a cone that fades in behind the needle, and the needle itself */
.stmt-sweep { position: absolute; inset: 0; will-change: transform; }
.stmt-cone { position: absolute; inset: 0; border-radius: 50%; opacity: .85;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 275deg,
    rgba(237, 132, 44, .03) 300deg, rgba(237, 132, 44, .10) 344deg, rgba(237, 132, 44, .22) 359deg, transparent 360deg); }
.stmt-needle { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 50%; transform-origin: 50% 100%;
  background: linear-gradient(to top, transparent, rgba(237, 132, 44, .45) 55%, rgba(237, 132, 44, .85));
  box-shadow: 0 0 14px rgba(237, 132, 44, .3); }

/* atmosphere: one scan band, the vignette that drops the middle out so the
   headline sits on basalt rather than on hardware, and the grain */
.stmt-scan-clip { position: absolute; inset: 0; overflow: hidden; }
.stmt-scan { position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(216, 228, 240, .03), transparent);
  animation: stmt-scan 9s linear infinite; }
@keyframes stmt-scan { from { transform: translateY(-110%); } to { transform: translateY(520%); } }
.stmt-vig { position: absolute; inset: 0; background: radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(8, 10, 13, .55) 100%); }
.stmt-grain { position: absolute; inset: -120px; opacity: .05; mix-blend-mode: overlay; animation: stmt-grain 1.1s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
@keyframes stmt-grain {
  0% { background-position: 0 0; } 25% { background-position: -90px 40px; } 50% { background-position: 60px -70px; }
  75% { background-position: -40px -90px; } 100% { background-position: 80px 60px; } }

/* a contact's readout. Positioned by the engine (which side of the scope it is
   on); everything else is here so a media query can take it away. */
.stmt-blip-label { position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: 6px;
  white-space: nowrap; font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; }

/* In the split sections the scope is 554px, not a viewport, and a contact that
   lands near the right edge pushes its readout through the frame — the label is
   24px to the side of the dot and the figure clips. Which spot comes up is
   random, so it clips on roughly half the cycles. The copy beside each figure
   already says what the scope is showing, so the labels go, exactly as they do
   on a phone. The dot, the ripple and the sweep still tell the story. */
.stmt-fig .stmt-blip-label { display: none; }

/* the HUD. Invented, aria-hidden, and deliberately never a round number that
   could be mistaken for a FOG statistic. */
.stmt-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(226, 233, 241, .55); }
.stmt-hud-tl { position: absolute; left: clamp(18px, 3vw, 36px); top: clamp(16px, 2.6vw, 32px); display: grid; gap: 7px; }
.stmt-hud-tr { position: absolute; right: clamp(18px, 3vw, 36px); top: clamp(16px, 2.6vw, 32px); }
.stmt-hud-bl { position: absolute; left: clamp(18px, 3vw, 36px); bottom: clamp(16px, 2.6vw, 32px); }
.stmt-hud-tr span, .stmt-hud-bl span { color: #edf1f6; }
.stmt-hud-tr span { display: inline-block; }
.stmt-hud-live { display: flex; align-items: center; gap: 9px; }
.stmt-hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 10px rgba(237, 132, 44, .6); animation: stmt-pulse 2.2s ease-in-out infinite; }
@keyframes stmt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.stmt-hud-clock { font-size: 10px; color: rgba(226, 233, 241, .35); }
/* the chat launcher is position:fixed in that corner (chat.js, bottom/right 16px,
   ~56px tall) and sat on the last two feed lines in production — the feed clears
   it rather than the launcher moving, because the launcher is the conversion */
.stmt-feed { position: absolute; right: clamp(18px, 3vw, 36px); bottom: clamp(88px, 8vh, 104px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  font-size: 10px; letter-spacing: .14em; text-align: right; }
/* A phone has four corners and no room. The feed goes, the booked counter takes
   the corner it vacated so it stops crowding "FOG VOICE // LIVE", and the blip
   labels go with them — at 390 a three-line readout lands on the headline, and
   the headline is the thing this section exists to say. The scope still runs. */
@media (max-width: 699px) {
  .stmt-feed, .stmt-blip-label { display: none; }
  .stmt-hud { font-size: 10px; letter-spacing: .12em; }
  .stmt-hud-tr { top: auto; bottom: clamp(16px, 2.6vw, 32px); }
}

/* ---- 02b the split scopes ---- the same radar as #stmt, twice more, boxed
   beside copy instead of running full-bleed behind it.
   The scope is sized in vmin (212vmin, .stmt-scope) because full-bleed is what
   it was built for; inside a panel that is far wider than the panel, so the
   figure clips it to a square and scales the whole scope down as one piece.
   Scaling rather than re-declaring the radii keeps every ring, tick, label and
   sweep in the proportion the engine animates them at — the engine writes
   transforms on these nodes, so anything re-sized in CSS would fight it. */
.stmt-split { border-top: 1px solid var(--dark-line); background: var(--dark);
  padding: clamp(64px, 9vw, 116px) 0; }
.stmt-split-in { width: min(1180px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
/* Copy carries two beats now, so it is the taller column and the media aligns
   to its top rather than floating in the middle of it. */
.wa .stmt-split-in { align-items: start; }

/* The media panel. Square, framed and clipped — the video is a 760² export and
   a band crop would cut the phone out of its own scene. */
.wa-fig { position: relative; margin: 0; }
.wa-video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--dark-line); border-radius: 14px; background: #0d1014; }
/* The hook is the video's only description — the video itself is aria-hidden,
   so this line carries what it shows to anyone who cannot see it play. */
.wa-hook { margin: 14px 2px 0; color: #8b98a6; font-size: 12px; letter-spacing: .06em; line-height: 1.5; }
/* The beat between the two halves of the argument: the window, then the answer. */
.wa-rule { width: 64px; height: 1px; margin: 2.1em 0 1.9em; border: 0; background: var(--dark-line); }
.wa-h { font-size: clamp(1.65rem, 2.9vw, 2.6rem); }
/* Re-based off the panel, not the viewport. #stmt sizes its scope in vmin
   because it fills the screen; in a ~550px box those same numbers put the rings
   at 70px inside a 572px scope while the sweep cone stayed panel-sized — rings
   invisible, cone enormous. Scaling could not fix that: it shrinks both by the
   same factor and the ratio is what was wrong. Percentages resolve against the
   scope, so the geometry is now proportional to the panel at every width, and
   the ring radii in the markup are percentages to match. */

.stmt-split-copy { color: #dfe6ee; }
.stmt-split-eyebrow { display: block; margin: 0 0 .9em; color: var(--acc);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.stmt-split-h { margin: 0 0 .55em; color: #edf1f6; font-weight: 900;
  font-size: clamp(1.9rem, 3.5vw, 3.25rem); line-height: 1.06; letter-spacing: -.015em; }
.stmt-split-p { margin: 0; max-width: 46ch; color: #b3bfcc;
  font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; }

/* Section B: copy first, scope second. Only the columns swap — the markup order
   stays figure-then-copy so the reading order is identical in both, which is
   what a screen reader and a keyboard follow. */

@media (max-width: 860px) {
  /* One column. The scope goes above the copy in both sections — a radar that
     lands after the sentence it illustrates is just a gap on a phone. */
  .stmt-split-in { grid-template-columns: 1fr; gap: clamp(22px, 6vw, 34px); }
}

/* ---- 03 the FOG Voice service drum ---- the FINAL v2 carousel, ported from
   the owner's 2026-08-05 "Final - Spinner section" export. Ten faces on one
   cylinder, a numbered dial that turns with it, an index strip, and a name
   readout that scrambles into place as each face arrives. */
.cyl-sec { text-align: center; }
.cyl-sec h2 { font-size: clamp(32px, 4.75vw, 68px); line-height: 1.02; letter-spacing: -.015em; margin: 14px auto 0; max-width: 18ch; }
.cyl-sec .lede { font-size: 16px; line-height: 1.55; margin: 16px auto 0; max-width: 56ch; color: var(--on-dark-2); }

/* the stage has to be tall enough for the *magnified* front card, not for the
   card's own 480px: at perspective 1600 and a 539px radius the front face is
   scaled by 1600/(1600-539) ≈ 1.51, so it lands near 725px on screen. Sizing
   the band to the unmagnified card is what made the drum spill over the
   heading above it and the controls below. */
.cyl-stage { position: relative; perspective: 1600px; perspective-origin: 50% 46%; height: 780px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: pan-y; outline: none; margin-top: 28px; }
.cyl-stage:active { cursor: grabbing; }
.cyl-stage:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 10px; }
.cyl-dial { position: absolute; left: 50%; top: 57%; width: 880px; height: 880px; margin: -440px 0 0 -440px;
  pointer-events: none; opacity: .55; }
.cyl-dial svg { width: 100%; height: 100%; }
.cyl-mist { position: absolute; left: 50%; bottom: 4%; width: min(1300px, 130%); height: 280px; translate: -50% 0;
  pointer-events: none; opacity: .55; filter: blur(2px);
  background: radial-gradient(50% 55% at 50% 60%, rgba(231, 234, 236, .05), transparent 70%),
              radial-gradient(30% 40% at 50% 70%, rgba(237, 132, 44, .05), transparent 70%); }
.cyl-tilt { position: relative; transform-style: preserve-3d; }
/* Fluid, not stepped. At a fixed 350px the card magnified to ~525px on a 768
   tablet, which filled the viewport and sliced both neighbours off at the edges
   — the drum stopped reading as a drum. home.js recomputes the ring radius from
   the rendered card width on resize, so the cylinder stays closed at any size. */
.cyl { position: relative; width: clamp(240px, 32vw, 350px); height: clamp(340px, 44vw, 480px);
  transform-style: preserve-3d; }

.fcard { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden;
  border: 1px solid var(--dark-line); border-radius: 10px;
  background: radial-gradient(110% 80% at 80% 0%, rgba(237, 132, 44, .09), transparent 60%), var(--dark-2);
  box-shadow: 0 0 48px rgba(237, 132, 44, .13);
  padding: 22px 24px 18px; display: flex; flex-direction: column; text-align: left;
  transition: transform 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
@media (hover: hover) { .fcard:hover { transform: translateY(-3px); border-color: rgba(237, 132, 44, .55); } }
/* the hairline that lights on whichever face is at the front */
.fc-live { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--acc); opacity: 0;
  transition: opacity 240ms; }
.fc-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px;
  letter-spacing: .09em; color: var(--on-dark-2); }
.fc-head b { font-weight: 400; color: var(--on-dark); }
.fc-head i { font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: #5e6b7a; }
.fc-art { position: relative; display: grid; place-items: center; height: 146px; margin-top: 13px; border-radius: 8px;
  background-color: #14171d;
  background-image: repeating-linear-gradient(0deg, rgba(231, 234, 236, .035) 0 1px, transparent 1px 24px),
                    repeating-linear-gradient(90deg, rgba(231, 234, 236, .035) 0 1px, transparent 1px 24px);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.fc-ghost { position: absolute; right: 10px; bottom: -6px; font-size: 64px; line-height: 1; font-weight: 800;
  color: rgba(231, 234, 236, .06); pointer-events: none; }
.fcard h3 { font-size: 24px; line-height: 1.07; margin: 16px 0 0; color: var(--on-dark); text-align: center; }
.fcard p { font-size: 13.5px; line-height: 1.55; margin: 9px 0 0; color: var(--on-dark-2); text-wrap: pretty; }
.fc-chip { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(54, 59, 66, .7); }
.fc-big { font-size: 17px; color: var(--on-dark); letter-spacing: .02em; }
.fc-sub { font-size: 10px; letter-spacing: .1em; color: var(--on-dark-2); }
.fc-sub b { font-weight: 400; color: var(--on-dark); }
.fc-flow { font-size: 11px; letter-spacing: .08em; color: var(--on-dark-2); display: flex; gap: 8px; flex-wrap: wrap; }
.fc-flow b { font-weight: 400; color: var(--on-dark); }
.fc-quote { font-family: var(--f-text); font-size: 12.5px; line-height: 1.45; color: var(--on-dark); }
.fc-off { color: var(--line-2); }

/* the index strip and the arrows */
.cyl-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.cyl-ticks { display: flex; gap: 4px; }
.cyl-arrow { background: none; border: 1px solid var(--dark-line); border-radius: 6px; color: var(--on-dark-2);
  width: 44px; height: 44px; font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color 120ms var(--ez-ui), color 120ms var(--ez-ui); }
.cyl-arrow:hover { border-color: var(--acc); color: var(--acc); }
.cyl-tick { background: none; border: 0; cursor: pointer; padding: 10px 4px 0; min-height: 44px; }
.cyl-tick > span { display: block; font-size: 10px; letter-spacing: .08em; color: #5e6b7a; padding-bottom: 7px;
  border-bottom: 2px solid #2b3038; transition: color 180ms var(--ez-ui), border-color 180ms var(--ez-ui); }
.cyl-tick[aria-current="true"] > span { color: var(--acc); border-bottom-color: var(--acc); }
.cyl-tick:hover > span { color: var(--on-dark); }
.cyl-name { font-size: 10.5px; letter-spacing: .1em; color: var(--on-dark-2); margin-top: 14px; min-height: 1.2em; }

.cyl-foot { font-size: 17px; line-height: 1.5; margin: 40px auto 0; max-width: 44ch; color: var(--on-dark); }
.cyl-cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
/* keyboard/no-pointer path: the same ten cards as a readable column */
.cyl-list { display: none; }
@keyframes fog-cardin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- 04 the ledger rail ---- */
.rail-h { font-size: clamp(28px, 3.98vw, 56px); line-height: 1.05; letter-spacing: -.015em; margin: 14px 0 0; }
.rail-lede { font-size: 16px; line-height: 1.55; margin: 16px 0 0; color: var(--on-dark-2); }
.rail-vp { margin-top: 40px; overflow: hidden; }
.rail { display: flex; gap: 24px; width: max-content; align-items: stretch; }
/* the study sizes each ledger to its own line — nowrap, intrinsic width. Phones
   get a fixed card instead, where one line would run off the screen. */
.fog-ledger { border-top: 2px solid var(--line-2); background: var(--dark-2); border-radius: 0 0 10px 10px; padding: 24px;
  flex: none; white-space: nowrap;
  transition: translate 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
.fog-ledger:hover { translate: 0 -4px; border-color: var(--on-dark); }
.fog-ledger .n { font-size: clamp(44px, 5.1vw, 70px); line-height: 1; letter-spacing: -.02em; color: var(--acc); display: block; }
.fog-ledger p { font-size: 15.5px; line-height: 1.5; margin: 12px 0 0; color: var(--on-dark); }
.fog-ledger .src { display: block; margin-top: 12px; }
.rail-cap { width: 132px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); }

/* ---- 05 getting found ----
   Same frame and same type as the window-and-answer band above: one boxed media
   panel beside one hook, so the page's two "here is the thing working" sections
   read as a pair rather than as two studios. The cut-corner .fog-win window went
   with the old screenshot — it was the last thing using it. */
.found { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  align-items: center; overflow: hidden; }
/* The piece is a 1080-square, inset rather than run to the column edge: at full
   width it swallows the section and the headline stops being the subject. */
.found-win { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto;
  border: 1px solid var(--dark-line); border-radius: 14px; overflow: hidden; background: #f7f4ee; }
.found-canvas { display: block; width: 100%; height: 100%; }
.found-win img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---- 06 book a demo ---- *
   The section is a stack: WebGL fog (1), a scrim that keeps the copy column off the
   flare (2), the 2D switchboard (3), the content (4), the grain (6). The two canvases
   start transparent and are faded in by their own engines, so a blocked module leaves
   the gradient below and nothing half-painted. */
.demo { position: relative; overflow: clip; display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  background: radial-gradient(120% 90% at 82% -10%, rgba(237, 132, 44, .14), transparent 55%),
              linear-gradient(178deg, var(--dark), var(--dark-2) 90%); }
.demo-l { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.demo-atmo { z-index: 1; opacity: 0; transition: opacity 1.2s ease .1s; }
.demo-scrim { z-index: 2; background: linear-gradient(92deg, rgba(17, 20, 25, .36), rgba(17, 20, 25, 0) 55%); }
.demo-live { z-index: 3; opacity: 0; transition: opacity .9s ease .1s; }
.demo::after { z-index: 6; }
/* balanced, because "stop losing" is one idea and a ragged break puts "stop" alone
   at the end of a line — the export balances this heading for the same reason */
.demo h2 { font-size: clamp(28px, 3.9vw, 54px); line-height: 1.04; margin: 18px 0 0; max-width: 18ch;
  text-wrap: balance; }
.demo .lede { font-size: 17px; line-height: 1.55; margin: 20px 0 0; max-width: 46ch; color: var(--on-dark-2); }
.demo-beacon { display: block; margin-bottom: 26px; }
.demo-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
/* booking lives on its own page — the calendar was too heavy to sit in the section */
.demo-note { font-size: 14px; line-height: 1.5; margin-top: 16px; color: var(--on-dark-2); }
.demo-note a { color: var(--acc); text-underline-offset: 3px; }
/* "the line is open" — the section's one live claim, so the dot is steady, not blinking */
.demo-open { display: flex; align-items: center; gap: 10px; margin: 40px 0 0;
  font-family: var(--f-text); font-weight: 600; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-dark-2); }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #46966f; flex: none; }
/* the cable arcs over the whitespace above the copy, so the section needs height to
   arc through. Two columns only — stacked, the same rule is just dead space. */
@media (min-width: 1024px) { .demo { min-height: min(88vh, 820px); } }
/* the card is near-opaque: the cable and the rays run behind this copy otherwise.
   The top edge is brighter than the rest — it is the end the cable arrives at. */
.card { border: 1.5px solid var(--dark-line); border-top: 2px solid var(--line-2); border-radius: 10px;
  background: rgba(26, 30, 36, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); transition: box-shadow 500ms ease; }
/* the board answered: the card takes the call for as long as the ring lasts */
.card[data-demo-glow] { box-shadow: 0 0 0 1px rgba(237, 132, 44, .45), 0 24px 70px rgba(0, 0, 0, .45); }
.card h3 { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.1; margin: 0; }
.card-sub { font-size: 14.5px; line-height: 1.5; margin: 8px 0 22px; color: var(--on-dark-2); }
.fields { display: flex; flex-direction: column; gap: 14px; }
.fields label { display: block; }
.fl { display: block; margin-bottom: 6px; color: var(--on-dark-2); }
.fog-in { font-family: var(--f-text); font-size: 16px; width: 100%; padding: 11px 13px; border-radius: 6px;
  border: 1.5px solid var(--dark-line); background: var(--dark); color: var(--on-dark); min-height: 44px;
  transition: border-color 120ms var(--ez-ui); }
.fog-in:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--line-2); }
.fog-in::placeholder { color: var(--on-dark-2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label { font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 6px; border: 1.5px solid var(--dark-line);
  color: var(--on-dark-2); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color 120ms var(--ez-ui), color 120ms var(--ez-ui), background-color 120ms var(--ez-ui); }
.chips label:hover { border-color: var(--line-2); color: var(--on-dark); }
.chips input:checked + label { border-color: var(--acc); color: var(--acc-ink); background: var(--acc); }
.chips input:focus-visible + label { outline: 2px solid var(--acc); outline-offset: 3px; }
.fnote { font-size: 12.5px; line-height: 1.45; margin: 0; color: var(--on-dark-2); }
.ferr { font-size: 14px; color: #f6a06a; margin: 0; }
.lead-send { justify-content: center; padding: 14px; }
.sent { min-height: 340px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 12px; }
.sent h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; margin: 0; }
.sent p { font-size: 15.5px; line-height: 1.5; margin: 0; max-width: 34ch; color: var(--on-dark-2); }
.sent p a { color: var(--acc); text-underline-offset: 3px; }
/* the tick draws itself once the card has swapped — the receipt for the send */
.sent-tick { display: block; margin-bottom: 10px; }
.sent-tick path { animation: fog-draw 500ms var(--ez-burn) 150ms both; }
@keyframes fog-draw { to { stroke-dashoffset: 0; } }
.hpx { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer ---- */
.ft { border-top: 1px solid var(--dark-line); padding: 26px var(--pad-x); display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; font-size: 13.5px; color: var(--on-dark-2); }
.ft a { color: var(--acc); text-decoration: none; }
.ft a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-end { margin-left: auto; display: flex; gap: 18px; }

/* ============ the other public pages ============
   /products, /privacy.html and /thanks.html wear the same system: the study's nav
   on a flat basalt bar (no hero bank behind it), one page head, then content. */
.pg-bar { border-bottom: 1px solid var(--dark-line); background: var(--dark); }
.pg-head { padding: clamp(48px, 6vw, 76px) var(--pad-x) 0; }
.pg-head h1 { font-size: clamp(30px, 4.3vw, 62px); line-height: 1.03; letter-spacing: -.015em; margin: 14px 0 0; max-width: 20ch; }
.pg-head .lede { font-size: 17px; line-height: 1.55; margin: 16px 0 0; max-width: 54ch; color: var(--on-dark-2); }
.pg-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* long-form copy (privacy) */
.prose { padding: clamp(28px, 4vw, 40px) var(--pad-x) clamp(56px, 7vw, 88px); }
.prose > * { max-width: 78ch; }
.prose p { font-size: 16.5px; line-height: 1.8; margin: 0 0 18px; color: var(--on-dark-2); }
.prose p strong { color: var(--on-dark); font-weight: 700; }
.prose a { color: var(--acc); text-underline-offset: 3px; }
.prose .stamp { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; color: var(--on-dark-2); }
.back { display: inline-block; margin-top: 8px; color: var(--acc); text-decoration: none; font-weight: 600; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the confirmation page — one column, centred, nothing to do but the next step */
.tk { min-height: 72svh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(56px, 8vw, 96px) var(--pad-x); }
.tk h1 { font-size: clamp(32px, 4.8vw, 68px); line-height: 1.03; letter-spacing: -.015em; margin: 14px 0 0; }
.tk p { font-size: 17px; line-height: 1.55; margin: 16px auto 0; max-width: 46ch; color: var(--on-dark-2); }
.tk .pg-cta { justify-content: center; }

/* ---- the add-on catalogue ---- */
.pr-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: clamp(28px, 3.6vw, 44px) var(--pad-x) 0; }
.pr-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-pill { font-family: var(--f-text); font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 6px;
  border: 1.5px solid var(--dark-line); background: transparent; color: var(--on-dark-2); cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color 120ms var(--ez-ui), color 120ms var(--ez-ui), background-color 120ms var(--ez-ui); }
.pr-pill:hover { border-color: var(--line-2); color: var(--on-dark); }
.pr-pill-active, .pr-pill[aria-pressed="true"] { border-color: var(--acc); background: var(--acc); color: var(--acc-ink); }
.pr-search { position: relative; flex: 1 1 260px; max-width: 340px; }
.pr-search input { font-family: var(--f-text); font-size: 16px; width: 100%; min-height: 44px; padding: 11px 40px 11px 13px;
  border-radius: 6px; border: 1.5px solid var(--dark-line); background: var(--dark-2); color: var(--on-dark); }
.pr-search input::placeholder { color: var(--on-dark-2); }
.pr-search input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--line-2); }
.pr-search svg { position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; translate: 0 -50%;
  color: var(--on-dark-2); pointer-events: none; }
.pr-count { padding: 14px var(--pad-x) 0; color: var(--on-dark-2); font-size: 13.5px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
  padding: clamp(20px, 2.6vw, 28px) var(--pad-x) clamp(56px, 7vw, 88px); }
.pr-card { border: 1.5px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); padding: 26px;
  display: flex; flex-direction: column;
  transition: translate 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
.pr-card:hover { translate: 0 -4px; border-color: var(--line-2); }
.pr-icon { width: 44px; height: 44px; color: var(--acc); }
.pr-icon svg { width: 100%; height: 100%; }
.pr-card h3 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 110; font-size: 21px;
  line-height: 1.12; letter-spacing: -.005em; margin: 16px 0 0; }
.pr-tagline { font-size: 15px; line-height: 1.5; margin: 8px 0 0; color: var(--on-dark-2); }
.pr-bullets { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pr-bullets li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-2); }
.pr-bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc); }
.pr-foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pr-price { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }
.pr-cta { font-size: 15px; padding: 12px 20px; }
/* the chip that says which add-on the form is about */
.pr-chip { display: none; align-items: center; gap: 10px; margin-bottom: 14px; padding: 9px 13px; border-radius: 6px;
  border: 1.5px solid var(--acc); background: rgba(237, 132, 44, .12); font-size: 14px; }
.pr-chip button { background: none; border: 0; color: var(--acc); cursor: pointer; font-size: 18px; line-height: 1;
  padding: 4px 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---- motion primitives ---- */
@keyframes fog-reveal { from { opacity: 0; translate: 0 8px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes fog-burn-off { from { opacity: 0; translate: 0 14px; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes fog-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.m-burn { animation: fog-burn-off 720ms var(--ez-clip) both; }
.m-reveal { animation: fog-reveal 420ms var(--ez-burn) both; }
.lift { transition: translate 240ms var(--ez-ui), border-color 240ms var(--ez-ui); }
.lift:hover { translate: 0 -4px; border-color: var(--line-2); }

/* ============ scene layers ============
   The three parallax scenes the study shipped with are all gone now, each
   replaced by the thing it was standing in for: 01 by the hero's two canvases
   (2026-08-05), 03 by the demo switchboard's two (2026-08-06), and 02 by the
   FINAL first-response scope above, which owns its own layers under `.stmt-`.
   The shared `.px-scene / .px-l / .px-vig / .px-grain` primitives went with the
   last of them — nothing referenced them any more. */

/* Scenes sit behind their section's content, never over it. Named children only:
   a blanket `> *:not(.hero-canvas)` also catches the absolutely-positioned spotlight
   and drops it back into flow, which pushes the whole hero down by its own height. */
.hero > .nav, .hero > .hero-in { position: relative; z-index: 1; }
.demo > .demo-copy, .demo > .card { position: relative; z-index: 4; }

/* ---- motion off ----------------------------------------------------------
   The scenes are compositions first and animations second: with motion off every
   layer keeps its painted state, so the page loses the drift and nothing else. */
@media (prefers-reduced-motion: reduce) {
  /* the video holds its poster: it carries no autoplay attribute and home.js
     never calls play() with motion off, so there is nothing to switch off here */
  /* the scope holds its painted state: the engine bails to buildStatic() and the
     three ambient loops (sweep band, grain, live dot) stop where they are. */
  .stmt-scan, .stmt-grain, .stmt-hud-dot { animation: none !important; }
  /* the two demo engines hold a still frame of their own (both bail out of
     schedule() when the query matches), so the section keeps its composition. The
     card must not keep answering, though: that glow is a timer, not a transition. */
  .card, .card[data-demo-glow] { transition: none; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
  .sent-tick path { animation-duration: 120ms; }
  .m-burn, .m-reveal { animation-duration: 120ms; animation-name: fog-reveal; }
  .lift:hover, .fog-btn:hover, .fog-ledger:hover { translate: none; }
}
.static .stmt-scan, .static .stmt-grain, .static .stmt-hud-dot { animation: none !important; }

/* ---- widths ----------------------------------------------------------------
   The study is a 1180px canvas. Below it the three two-column grids collapse in
   the order the page reads, and the phone drops the blur-heavy scene layers —
   blur compositing is the phone's cost centre and mobile is the binding budget. */
@media (max-width: 1023px) {
  .slip-g { grid-template-columns: 1fr; gap: 32px; }
  .slip-side { position: static; }
  .found, .demo { grid-template-columns: 1fr; gap: 36px; }
  /* One column, so the card is below the beacon rather than beside it. The
     atmosphere's text-safe ellipse is centred for a left-hand copy column and
     would leave the headline sitting in the flare, and the scrim is a left-to-
     right falloff for a split that no longer exists. home.js gates the engines on
     the same breakpoint — the two must not drift apart. */
  .demo-atmo, .demo-scrim { display: none; }
}
@media (max-width: 767px) {
  .nav { flex-wrap: wrap; gap: 14px 18px; padding-bottom: 18px; }
  .nav-brand { margin-right: auto; }
  .nav-brand svg { width: 108px; height: 34px; }
  .nav-links { order: 3; width: 100%; display: flex; gap: 18px; flex-wrap: wrap; }
  .slip-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  /* the drum shrinks with the screen — a 350px card on a 390px phone leaves the
     neighbours half off the glass and the projection taller than its stage */
  .cyl-stage { height: 600px; perspective: 1200px; }
  .cyl-dial { width: 620px; height: 620px; margin: -310px 0 0 -310px; }
  /* ten ticks plus two arrows is 392px of control on a 390px screen, which wraps
     and strands the forward arrow on its own line. Tighten the ticks instead. */
  .cyl-ctrl { flex-wrap: nowrap; gap: 4px; }
  /* 24x24 is the WCAG 2.5.8 floor and these were 22px wide once the padding came
     off. min-width buys the target back without letting the row wrap again. */
  .cyl-tick { padding: 10px 0 0; min-width: 26px; }
  .cyl-tick > span { font-size: 9px; letter-spacing: .04em; }
  .cyl-arrow { width: 38px; flex: none; }
  .fcard { padding: 16px 17px 14px; }
  .fcard h3 { font-size: 19px; margin-top: 12px; }
  .fcard p { font-size: 12.5px; margin-top: 7px; }
  .fc-art { height: 106px; }
  .fc-ghost { font-size: 46px; }
  .fc-big { font-size: 15px; }
  .fog-ledger { white-space: normal; width: min(78vw, 320px); }
  .fog-grain::after { opacity: .04; }
  /* backdrop blur behind a full-width card is the phone's cost centre, and with
     the atmosphere already off there is nothing behind it left to blur */
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dark-2); }
}
/* no pointer, or motion off: the cylinder is unreadable as a spinning object, so
   the same ten features render as a plain list */
@media (prefers-reduced-motion: reduce) {
  .cyl-stage { display: none; }
  .cyl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 36px;
    text-align: left; list-style: none; }
  .cyl-list li { border: 1.5px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); padding: 20px; }
  .cyl-list i { font-family: var(--f-mono); font-style: normal; font-size: 11.5px; letter-spacing: .06em; color: var(--acc); }
  .cyl-list h3 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "wdth" 110; font-size: 19px;
    margin: 8px 0 0; color: var(--on-dark); }
  .cyl-list p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; color: var(--on-dark-2); }
}