/*
 * xwits.dev
 *
 * Colours come from the October 2026 logo pack (teal #00D1BE, teal on light
 * #009A8A, cream #E8E5DB, ink #1B1B19) on the brand book's paper and stone.
 * Type is Geist and Geist Mono.
 *
 * Two rules from the brand book, kept literally:
 *   1. Teal is the moment: one teal element per screenful. On light pages it
 *      is the underline in the headline; on ink bands it is the one button.
 *      Illustrations and diagrams use ink, stone and paper, with teal only on
 *      the one part that matters and only where nothing else on screen is teal.
 *   2. Mono is not decoration. Prices, figures and code are set in mono
 *      because they are the parts a reader checks.
 *
 * Every size, space, duration and colour below comes from a token. Seven type
 * steps (rem, so they follow the reader's text size), a 4px spacing scale,
 * and two motion speeds. Change a token, not a rule.
 *
 * Body text on #00695E links passes WCAG AA on paper (6.0:1) and stone (5.6:1).
 * #009A8A is only used for the logo and large graphics (3.2:1).
 */

/* Geist and Geist Mono, self-hosted (SIL Open Font License, fonts/OFL.txt).
   One variable file each covers every weight the site uses. */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour: the site is dark only (Deep, 25 Oct 2026); there is no light theme */
  --teal: #00d1be;
  --teal-ink: #2fe3d2;
  --logo-teal: #00d1be;
  --logo-ink: #e8e5db;
  --on-teal: #1b1b19;
  --mark: rgb(0 209 190 / 0.55);
  --ink: #e9e6dc;
  --ink-2: #c8c5bd;
  --muted: #9b9990;
  --paper: #121210;
  --stone: #1b1b19;
  --cream: #26251f;
  --line: #2e2d28;
  --band: #0a0a09;
  --band-ink: #e8e5db;
  --band-muted: #a9a69c;
  --band-line: #3a3933;
  --ok: #5fbe86;
  --warn: #d8a53c;
  --risk: #e8827a;
  --code-bg: #1b1b19;
  --shadow-1: 0 12px 30px rgb(0 0 0 / 0.12);
  --shadow-2: 0 8px 22px rgb(0 0 0 / 0.18);
  --shadow-0: 0 1px 2px rgb(0 0 0 / 0.06);           /* resting cards that sit on a surface */

  /* type: seven steps */
  --fs-xs: 0.875rem;                            /* 14px labels, captions, footer */
  --fs-sm: 0.9375rem;                           /* 15px cards, nav, buttons, tables */
  --fs-base: 1.0625rem;                         /* 17px body */
  --fs-md: 1.25rem;                             /* 20px lead, h3 */
  --fs-lg: 1.5rem;                              /* 24px article headings */
  --fs-xl: clamp(1.75rem, 3.4vw, 2.25rem);      /* 28-36px h2, big figures */
  --fs-2xl: clamp(2.25rem, 6.4vw, 4.125rem);    /* 36-66px h1 */

  /* space: 4px scale */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 5rem;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 160ms;
  --dur-ui: 220ms;

  --measure: 64ch;
  --wide: 1120px;
  --radius: 6px;
  color-scheme: dark;
}

/* Readers who ask for more contrast get firmer lines and focus rings. */
@media (prefers-contrast: more) {
  :root { --line: var(--muted); --band-line: var(--band-muted); }
  :focus-visible { outline-width: 3px !important; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s5); }
.mono, code, kbd { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

a { color: var(--teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--s3); top: -48px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: var(--s2) var(--s3); border-radius: var(--radius);
}
.skip:focus { top: var(--s3); }

/* Line icons: drawn on a 24px grid, coloured by the text around them. */
.ico {
  width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.badge {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink);
}
.badge .ico { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
section.stone .badge { background: var(--paper); }

/* ── masthead ─────────────────────────────────────────────── */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.logo { display: inline-flex; line-height: 0; }
.logo svg { width: 92px; height: auto; }
.lg-t { fill: var(--logo-teal); }
.lg-i { fill: var(--logo-ink); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a {
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.nav a.btn { margin-left: 6px; color: var(--paper); padding: 9px 14px; border: 1.5px solid var(--ink); }
.nav a.btn:hover { color: var(--paper); }

.menu { display: none; margin-left: auto; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 500;
  padding: var(--s2) 14px; border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 44px; display: flex; align-items: center;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--stone); }
.menu .panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(86vw, 320px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow-1);
  transform-origin: top right;
}
.menu[open] .panel { animation: menu-in var(--dur-ui) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.menu .panel a { display: block; padding: 10px var(--s3); color: var(--ink); text-decoration: none; border-radius: 4px; }
.menu .panel a:hover { background: var(--stone); }
.menu .panel .btn, .menu .panel .btn:hover { margin-top: var(--s2); text-align: center; color: var(--paper); background: var(--ink); }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block; font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  padding: 13px 20px; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { text-decoration: none; opacity: 0.9; } }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.small { padding: 9px 14px; font-size: var(--fs-xs); }
.btn.teal { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ── hero ─────────────────────────────────────────────────── */
.hero { padding: var(--s9) 0 var(--s8); border-bottom: 1px solid var(--line); }
.hero .eyebrow { margin: 0 0 18px; }
.hero h1 {
  margin: 0 0 22px; max-width: 18ch;
  font-size: var(--fs-2xl); line-height: 1.03; letter-spacing: -0.035em; font-weight: 600;
  text-wrap: balance;
}
.hero h1 u { text-decoration: none; box-shadow: inset 0 -0.3em 0 var(--mark); }
.hero .stand { margin: 0 0 30px; max-width: 52ch; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hero .note { margin: 22px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.hero.small { padding: 56px 0 44px; }
.hero.small h1 { font-size: clamp(2rem, 5vw, 3rem); max-width: 22ch; }
.hero .price-line { margin: 0 0 26px; font-size: var(--fs-sm); color: var(--muted); }
.hero .price-line b { color: var(--ink); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-weight: 500; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--s8); align-items: center; }
.hero-visual { justify-self: end; width: 100%; max-width: 460px; }
.hero-visual img { display: block; width: 100%; height: auto; }

.crumbs { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ── the example call (home hero) ─────────────────────────── */
.callflow {
  margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--stone);
  padding: var(--s5); box-shadow: 0 1px 0 var(--line);
}
.callflow figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s4); }
.callflow .title { font-weight: 600; font-size: var(--fs-sm); }
.callflow .tag { font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; background: var(--paper); }
.beats { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--s4); }
/* The rail behind the beats: a base line, and a fill that draws down (--fill 0 to 1). */
.beats::before, .beats::after { content: ''; position: absolute; left: calc(1.25rem - 0.5px); top: 1.25rem; bottom: 1.25rem; width: 1px; }
.beats::before { background: var(--line); }
.beats::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--fill, 1)); }
.beat { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; }
.beat .badge { position: relative; z-index: 1; }
.beat .when { display: block; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.beat .what { display: block; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.beat.done .badge { border-color: var(--ok); color: var(--ok); }
.stamp {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ok); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 10px 2px 8px;
}
.stamp .ico { width: 1rem; height: 1rem; vertical-align: 0; }

/* The example call plays once, in CSS so it runs from the first frame: the
   rail draws down, each step lights in turn, then "Booked". Before a step is
   reached its text is muted, never hidden. Reduced motion shows the end. */
.callflow .beats::after { animation: rail-draw 2.6s var(--ease-out) 0.4s both; }
@keyframes rail-draw { from { transform: scaleY(0); } }
.callflow .beat .badge { animation: beat-on 0.6s var(--ease-out) both; }
.callflow .beat .what { animation: text-on 0.5s var(--ease-out) both; }
.callflow .beat:nth-child(1) :is(.badge, .what) { animation-delay: 0.3s; }
.callflow .beat:nth-child(2) :is(.badge, .what) { animation-delay: 1s; }
.callflow .beat:nth-child(3) :is(.badge, .what) { animation-delay: 1.7s; }
.callflow .beat:nth-child(4) :is(.badge, .what) { animation-delay: 2.7s; }
.callflow .stamp { animation: stamp-in 0.45s var(--ease-out) 2.2s both; }
@keyframes beat-on { 0% { transform: scale(0.92); border-color: var(--line); } 60% { transform: scale(1.06); border-color: var(--ink); } 100% { transform: scale(1); } }
@keyframes text-on { from { color: var(--muted); } }
@keyframes stamp-in { from { opacity: 0; transform: scale(0.8); } }
/* Below the fold, anim.js holds a sequence on its first frame until it is scrolled to. */
.callflow.is-waiting, .callflow.is-waiting *, .callflow.is-waiting *::before, .callflow.is-waiting *::after { animation-play-state: paused !important; }

/* Several things at once (industry heroes): notifications piling up. */
.pile { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pile li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow-0);
}
.pile .when { display: block; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.pile .what { display: block; font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty; }
.dayscene .close { margin: var(--s4) 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.dayscene .pile li { animation: pile-in 0.5s var(--ease-out) both; }
.dayscene .pile li:nth-child(1) { animation-delay: 0.2s; }
.dayscene .pile li:nth-child(2) { animation-delay: 0.65s; }
.dayscene .pile li:nth-child(3) { animation-delay: 1.1s; }
.dayscene .pile li:nth-child(4) { animation-delay: 1.55s; }
.dayscene .close { animation: text-on 0.6s var(--ease-out) 2.1s both; }
@keyframes pile-in { from { opacity: 0.35; transform: translateY(-8px) scale(0.98); } }

/* How-we-work hero: what happens on its own, and what waits for a person. */
.rule-group { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: var(--s4); }
.rule-group + .rule-group { margin-top: var(--s3); }
.rule-group .rg-h { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--s3); }
.rule-group ul { list-style: none; margin: 0; padding: 0 0 0 3.25rem; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.rule-group.wait { border-color: var(--ink); }
.rulefig .foot { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* Home hero: a day at your business with AI at work. Jobs arrive one at a
   time and tick off; the refund waits for a person. Plays once on load. */
.wd { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.wd-job { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.wd-job .when { display: block; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.wd-job .what { display: block; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); text-decoration: none; text-wrap: pretty; }
.wd-job a.what:hover { text-decoration: underline; }
.wd-done { color: var(--ok); display: grid; place-items: center; }
.wd-done .ico { width: 1.25rem; height: 1.25rem; stroke-dasharray: 24; stroke-dashoffset: 0; }
.wd-wait { border-color: var(--ink); }
.wd-pill { font-size: var(--fs-xs); font-weight: 600; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
@media (max-width: 480px) {
  .wd-wait { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--s2); }
  .wd-wait .wd-pill { grid-column: 2; justify-self: start; }
}
.wd-foot { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.workday .wd-job { animation: wd-in 0.55s var(--ease-out) var(--d, 0s) both; }
.workday .wd-job .what { animation: text-on 0.55s var(--ease-out) var(--d, 0s) both; }
.workday .wd-done .ico { animation: wd-tick 0.45s var(--ease-out) calc(var(--d, 0s) + 0.45s) both; }
.workday .wd-pill { animation: wd-pill 0.6s var(--ease-out) calc(var(--d, 0s) + 0.55s) both; }
.workday .wd-foot { animation: text-on 0.6s var(--ease-out) 3.5s both; }
@keyframes wd-in { from { transform: translateX(14px); border-color: var(--line); } }
@keyframes wd-tick { from { stroke-dashoffset: 24; } }
@keyframes wd-pill { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ── sections ─────────────────────────────────────────────── */
section { padding: var(--s8) 0; border-bottom: 1px solid var(--line); }
section.stone { background: var(--stone); }
section.band { background: var(--band); color: var(--band-ink); border-bottom: 0; }
section.band a { color: var(--teal); }
section.band .label, section.band .lead, section.band .muted { color: var(--band-muted); }
.label {
  margin: 0 0 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
h2 { margin: 0 0 var(--s3); font-size: var(--fs-xl); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; max-width: 26ch; }
h3 { margin: 0 0 var(--s2); font-size: var(--fs-md); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
h4 { margin: var(--s5) 0 6px; font-size: var(--fs-base); font-weight: 600; }
p { max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 var(--s6); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.source { font-size: var(--fs-xs); color: var(--muted); margin-top: 14px; }
.prose p, .prose ul, .prose ol { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: 6px 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }

/* "More detail": longer copy, folded. Still in the page for search engines. */
.more-detail { margin-top: var(--s5); max-width: var(--measure); }
.more-detail > summary {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); min-height: 44px;
}
.more-detail > summary::-webkit-details-marker { display: none; }
.more-detail > summary .ico { transition: transform var(--dur-ui) var(--ease-out); }
.more-detail[open] > summary .ico { transform: rotate(45deg); }
.more-detail .more-body { padding: var(--s2) 0 var(--s2); color: var(--ink-2); }
.more-detail .more-body > :first-child { margin-top: 0; }
.faq details::details-content, .more-detail::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--dur-ui) var(--ease-out), content-visibility var(--dur-ui) allow-discrete;
}
.faq details[open]::details-content, .more-detail[open]::details-content { block-size: auto; }

/* ── cards and grids ──────────────────────────────────────── */
.grid { display: grid; gap: var(--s4); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--paper);
}
section.stone .card { background: var(--paper); }
section.band .card { background: transparent; border-color: var(--band-line); }
.card p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.card .more { margin-top: auto; padding-top: var(--s3); font-size: var(--fs-sm); font-weight: 500; }
.card .more a { display: inline-block; padding: 4px 0; }
.card .card-ico { color: var(--ink); margin-bottom: var(--s2); }
.card .card-ico .ico { width: 1.75rem; height: 1.75rem; }
.card .corner-go { position: absolute; top: var(--s5); right: var(--s5); color: var(--muted); transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .corner-go { transform: translateX(3px); color: var(--ink); } }
.ticks.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); columns: auto; }
/* Compact links with an icon, e.g. the industries on the home page. */
.tiles { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.tiles a {
  display: flex; align-items: center; gap: var(--s3); min-height: 4rem; padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  transition: border-color var(--dur-ui) var(--ease-out);
}
.tiles li { display: flex; }
.tiles a { flex: 1; }
.tiles .name { flex: 1; }
.tiles .go { color: var(--muted); transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tiles a:hover { border-color: var(--ink); }
  .tiles a:hover .go { transform: translateX(3px); color: var(--ink); }
}
a.card { color: inherit; text-decoration: none; transition: border-color var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover { border-color: var(--ink); }
  a.card:hover .more { text-decoration: underline; }
}
.card .price { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.card .tag { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.arrow { white-space: nowrap; }

/* ── the four levels, on one scale ────────────────────────── */
.scale { position: relative; margin: 0 0 var(--s4); display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.scale-track { position: relative; height: 2px; background: var(--line); margin: 0 0 var(--s5); border-radius: 2px; }
.scale-track::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--fill, 1)); border-radius: 2px; }
.scale-track i { z-index: 1; }
.scale-track i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.level { position: relative; }
.level .step { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.level.first { border-style: dashed; }

/* ── steps ────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.steps li {
  counter-increment: s; display: grid; grid-template-columns: 52px 1fr; gap: var(--s3);
  padding: 18px 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(s, decimal-leading-zero); font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  color: var(--muted); font-size: var(--fs-xs); padding-top: 2px;
}
.steps b { display: block; font-size: var(--fs-base); margin-bottom: 2px; }
.steps span { color: var(--ink-2); }
section.band .steps li { border-color: var(--band-line); }
section.band .steps span { color: var(--band-ink); }

/* Timeline: an ordered list with a rail that fills as you read. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--s5); max-width: 760px; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: calc(1.25rem - 1px); top: 1.25rem; bottom: 1.25rem; width: 2px; border-radius: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--fill, 1)); }
.timeline li { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.timeline .dot-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs);
}
section.stone .timeline .dot-n { background: var(--stone); }
.timeline b { display: block; font-size: var(--fs-base); margin: 6px 0 2px; }
.timeline span { color: var(--ink-2); font-size: var(--fs-sm); }

/* ── lists ────────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; max-width: var(--measure); }
.ticks li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em; width: 12px; height: 2px; background: var(--ink);
}
.ticks.icons li { padding-left: 2rem; }
.ticks.icons li::before { display: none; }
.ticks.icons li > .ico { position: absolute; left: 0; top: 0.2em; }
.ticks.icons.yes li > .ico { color: var(--ok); }
.ticks.icons.no li > .ico { color: var(--risk); }
.cols2 { columns: 2; column-gap: 40px; }
.cols2 li { break-inside: avoid; }

/* ── the second job (home) ────────────────────────────────── */
.jobs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s6); align-items: stretch; margin: var(--s5) 0 0; }
.job { border: 1px solid var(--line); border-radius: 12px; padding: var(--s5); background: var(--paper); }
.job h3 { font-size: var(--fs-base); margin-bottom: var(--s4); }
.trades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); }
.trades li { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); white-space: nowrap; }
.chores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.chores li {
  display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm);
  border: 1px solid var(--line); border-radius: 8px; padding: var(--s2) var(--s3); background: var(--stone);
}
.job.second { background: var(--paper); }

/* ── leaks as cards (replaces the three-column table) ─────── */
.leaks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.leak-card {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.35fr) 1.25rem minmax(0, 1.35fr);
  gap: var(--s4); align-items: center; padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.leak-card h3 { font-size: var(--fs-sm); margin: 0; }
.leak-card p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; position: relative; }
.leak-card .lose { color: var(--risk); }
.leak-card .win { color: var(--ok); }
.leak-card .state { display: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.leak-card .to { color: var(--muted); }
.leak-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.35fr) 1.25rem minmax(0, 1.35fr); gap: var(--s4); padding: 0 var(--s5) var(--s2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.leak-head span:first-child { grid-column: 2; }
.leak-head span:nth-child(3) { grid-column: 5; }

/* ── one job at a time: the story ─────────────────────────── */
/* The concept film: click to play, poster first */
.film { margin: 0 0 var(--s7); max-width: 46rem; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.film figcaption { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }
.film figcaption strong { color: var(--ink); }
.film .more-detail { margin-top: var(--s2); }
.film .more-body ol { margin: 0; padding-left: 1.25rem; }
.film .film-v { display: none; aspect-ratio: 9 / 16; max-width: 22rem; }
@media (max-width: 600px) {
  .film .film-h { display: none; }
  .film .film-v { display: block; }
}
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.story-scene { position: sticky; top: var(--s6); }
.story-scene svg { display: block; width: 100%; height: auto; }
.story-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.story-step { counter-increment: st; padding: var(--s5) 0; border-top: 1px solid var(--line); }
.story-step:last-child { border-bottom: 1px solid var(--line); }
.story-step .n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.story-step h3 { margin: 4px 0 6px; font-size: var(--fs-md); }
.story-step p { margin: 0; color: var(--ink-2); }
.story-step .step-ico { display: none; }
.story.scrolly .story-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.45; transition: opacity var(--dur-ui) var(--ease-out); }
.story.scrolly .story-step.is-active { opacity: 1; }
/* scene parts */
.sc-line { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-paper { fill: var(--paper); }
.sc-stone { fill: var(--stone); }
.sc-ink { fill: var(--ink); }
.sc-teal { fill: var(--teal); }
.sc-text { fill: var(--muted); font-family: 'Geist', system-ui, sans-serif; font-size: 13px; }
.sc-strong { fill: var(--ink); font-weight: 600; }
.sc-win { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sc-win.lit { fill: var(--ink); }
.sc-win.teal { fill: var(--teal); }
.sc-bar { fill: var(--ink); }
/* Scene states. Without JavaScript (no .is-live) the finished picture shows. */
.scene .bar { transform-box: fill-box; transform-origin: bottom; }
.scene .link { stroke-dashoffset: 0; }
.scene.is-live :is(.s1, .s2, .s3, .s4, .s5) { opacity: 0; transition: opacity 500ms var(--ease-out), fill 500ms var(--ease-out); }
.scene.is-live .bar { transform: scaleY(0.1); transition: transform 700ms var(--ease-out); }
.scene.is-live .sc-win.first { fill: var(--paper); }
.scene[data-step='1'] .s1,
.scene[data-step='2'] :is(.s1, .s2),
.scene[data-step='3'] :is(.s1, .s2, .s3),
.scene[data-step='4'] :is(.s1, .s2, .s3, .s4),
.scene[data-step='5'] :is(.s1, .s2, .s3, .s4, .s5) { opacity: 1; }
.scene.is-live:is([data-step='3'], [data-step='4'], [data-step='5']) .bar { transform: none; }
.scene .sc-win.first { fill: var(--teal); }
.scene.is-live:is([data-step='2'], [data-step='3'], [data-step='4'], [data-step='5']) .sc-win.first { fill: var(--teal); }
.scene .joint { stroke-width: 3; }
/* Drawn, not faded: the brain's lines write themselves in at step 1, and the
   end-to-end line runs top to bottom at step 5. Only while the scene is live. */
.scene.is-live .pageline { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 600ms var(--ease-out) var(--d, 0ms); }
.scene.is-live:not([data-step='0']) .pageline { stroke-dashoffset: 0; }
.scene.is-live .joint { stroke-dasharray: 120; stroke-dashoffset: 120; transition: opacity 200ms var(--ease-out), stroke-dashoffset 900ms var(--ease-out) 150ms; }
.scene.is-live[data-step='5'] .joint { stroke-dashoffset: 0; }
.scene .sc-win.w { fill: var(--ink); }
.scene .sc-win.off { fill: var(--paper); }

/* ── service pages: who does what ─────────────────────────── */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: stretch; gap: 0; }
.lane { border: 1px solid var(--line); border-radius: 12px; padding: var(--s5); background: var(--paper); }
.lane h3 { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-base); margin: 0 0 var(--s4); }
.lane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.lane li { position: relative; padding-left: var(--s5); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.lane li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.lane.person li::before { background: var(--ink); }
.handover { display: grid; place-items: center; color: var(--muted); }
.handover .ico { width: 1.5rem; height: 1.5rem; }
.recorded { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.leakline { display: grid; gap: var(--s6); align-items: start; }
.leakline.with-stats { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.pull { margin: var(--s2) 0 0; font-size: var(--fs-lg); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); max-width: 32ch; text-wrap: pretty; }
/* Pricing: three steps that rise, and the partner plan alongside. */
.ladder { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.ladder li { display: flex; padding-top: calc((2 - var(--i)) * 3rem); }
.ladder .card { flex: 1; }
.ladder .amount, .alongside .amount { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-lg); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: var(--s2); }
.ladder .time, .alongside .time { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.ladder p { margin-top: var(--s2); }
.alongside { margin-top: var(--s4); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding-right: 3.5rem; }
.alongside h3 { margin: 0 0 4px; }
.alongside .amount { margin: 0; white-space: nowrap; }
/* Who it's for: ideal customer profiles. */
.chips { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: var(--fs-xs); background: var(--paper); color: var(--ink-2); }
.icp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: var(--s6); margin-top: var(--s5); }
.icp h3 { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-md); margin: 0 0 var(--s3); }
.icp .who { margin: 0; color: var(--ink); }
.icp .size { margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.icp-h { margin: 0 0 var(--s3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.icp-side .ticks + .icp-h { margin-top: var(--s5); }
.icp-side .tiles { margin-top: 0; grid-template-columns: 1fr; }
.icp-go { margin: var(--s5) 0 0; font-weight: 600; }
.icp.featured { border-color: var(--ink); }
.icp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.icp-grid .icp { display: flex; flex-direction: column; gap: var(--s4); margin-top: 0; padding: var(--s5); }
.icp-grid .icp-side { margin-top: auto; }
.icp-tiles { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.icp-tiles .card.primary { border-color: var(--ink); }
.fitfig .ticks + .ticks { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.fitfig .ticks li { font-size: var(--fs-sm); }
.fitfig .foot { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }

/* Evidence: a figure, what it measures, and where it came from. */
.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: var(--s5); }
.ev { background: var(--paper); padding: var(--s4) var(--s4) var(--s3); display: flex; flex-direction: column; gap: 6px; }
section.stone .ev { background: var(--stone); }
.ev b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ev span { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; flex: 1; }
.ev .src { font-size: var(--fs-xs); color: var(--muted); align-self: flex-start; padding: 5px 0; margin: -3px 0; }   /* a 24px+ tap target */
/* Trying AI against putting it to work. */
.gap { margin: var(--s5) 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: var(--s5); max-width: 760px; }
.gap-title { font-weight: 600; margin: 0 0 var(--s4); }
.gap-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 4rem; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.gap-label { font-size: var(--fs-sm); color: var(--ink-2); }
.gap-bar { display: block; height: 12px; border-radius: 3px; background: var(--line); overflow: hidden; }
.gap-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--v, 1)); }
.gap-row b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.gap-note { margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
/* What holds owners back, and our answer to each. */
.barriers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.barrier { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: var(--s5); }
.barrier-head { display: grid; grid-template-columns: 2.5rem auto minmax(0, 1fr); gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.barrier-head b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.barrier-head span { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.barrier p { margin: 0; color: var(--ink); }

/* Why Xwits: questions grouped, answers visible. */
.qa-nav ul { list-style: none; margin: 0; padding: var(--s6) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); border-bottom: 1px solid var(--line); }
.qa-nav a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; height: 100%; }
@media (hover: hover) and (pointer: fine) { .qa-nav a:hover { border-color: var(--ink); } }
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s5); }
.qa h3 { font-size: var(--fs-base); margin: 0 0 var(--s2); }
.qa p { margin: 0; color: var(--ink-2); }
.compare td, .compare th { vertical-align: top; }
.compare td:last-child { color: var(--ink); font-weight: 500; }

/* Industry pages: where AI pays first, in order. */
.order { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--s4); counter-reset: none; }
.order li { display: flex; }
.order .card { flex: 1; }
.order-n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
/* The four answers as one bar, the usual start marked. */
.pin { list-style: none; margin: var(--s4) 0 var(--s5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; max-width: 760px; background: var(--paper); }
.pin li { text-align: center; padding: 10px 6px; font-size: var(--fs-xs); color: var(--muted); border-left: 1px solid var(--line); }
.pin li:first-child { border-left: 0; }
.pin li.on { background: var(--ink); color: var(--paper); font-weight: 600; }
/* One rule, called out. */
.rule-callout { display: flex; align-items: flex-start; gap: var(--s3); margin: 0; max-width: var(--measure); font-size: var(--fs-md); line-height: 1.45; }
.rule-callout .badge { flex: none; }
.measure { margin-top: var(--s6); }
.data-wrap { max-width: 620px; margin-top: var(--s5); }
.data-wrap .small { margin: var(--s3) 0 0; }
.measure h3 { font-size: var(--fs-base); margin-bottom: var(--s3); }
.measure .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
.measure .ticks.icons li > .ico { color: var(--muted); }

/* The audit's example report: ranked leaks, bars show order only. */
.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ranks li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; grid-template-areas: "n what call" "n bar bar";
  column-gap: var(--s3); row-gap: 6px; align-items: center;
  padding: var(--s3); border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.ranks .n {
  grid-area: n; align-self: start; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--ink); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs);
}
.ranks .n .ico { width: 0.9rem; height: 0.9rem; }
.ranks .what { grid-area: what; font-size: var(--fs-sm); font-weight: 500; }
.ranks .call { grid-area: call; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.ranks .bar { grid-area: bar; display: block; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.ranks .bar::after {
  content: ''; position: absolute; inset: 0; border-radius: 3px; background: var(--ink);
  transform-origin: left; transform: scaleX(var(--w, 1));
}
.ranks .keep { background: transparent; border-style: dashed; }
.ranks .keep .n { border-color: var(--line); color: var(--muted); }
.ranks .keep .bar::after { background: var(--muted); }
.report .foot { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.report .ranks li .bar::after { animation: bar-grow 0.9s var(--ease-out) both; }
.report .ranks li:nth-child(1) .bar::after { animation-delay: 0.3s; }
.report .ranks li:nth-child(2) .bar::after { animation-delay: 0.5s; }
.report .ranks li:nth-child(3) .bar::after { animation-delay: 0.7s; }
.report .ranks li:nth-child(4) .bar::after { animation-delay: 0.9s; }
@keyframes bar-grow { from { transform: scaleX(0); } }

/* ── compact price list (home) ────────────────────────────── */
.pricelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 860px; }
.pricelist li { border-bottom: 1px solid var(--line); }
.pricelist a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) 1.25rem; gap: var(--s4);
  align-items: center; padding: var(--s4) 0; color: var(--ink); text-decoration: none;
}
.pricelist .name { font-weight: 600; }
.pricelist .from { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pricelist .time { font-size: var(--fs-sm); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pricelist a:hover .name { text-decoration: underline; } }

/* ── tables ───────────────────────────────────────────────── */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); min-width: 560px; }
caption { text-align: left; font-size: var(--fs-xs); color: var(--muted); padding-bottom: 10px; }
th, td { text-align: left; padding: 13px var(--s4) 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
tbody th { font-weight: 600; }
td.num, th.num { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.state { white-space: nowrap; width: 1%; padding-right: 22px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: var(--s2); vertical-align: 1px; }
.works { color: var(--ok); } .works .dot { background: var(--ok); }
.partial { color: var(--warn); } .partial .dot { background: var(--warn); }
.absent { color: var(--risk); } .absent .dot { background: var(--risk); }

/* ── figures ──────────────────────────────────────────────── */
.figures {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.fig { background: var(--paper); padding: 20px 18px; }
section.stone .fig { background: var(--stone); }
.fig b { display: block; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ── code and rules (engineering page) ────────────────────── */
.rule { padding: 22px 0; border-top: 1px solid var(--line); }
.rule:first-of-type { border-top: 0; }
.rule .said { margin: 0 0 10px; font-size: var(--fs-md); font-weight: 500; }
.rule .why { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }
pre {
  margin: 0; padding: 14px var(--s4); background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 4px; overflow-x: auto; font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-2);
}
section.stone pre { background: var(--paper); }
p code, li code, td code { font-size: 0.88em; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; }

/* ── faq ──────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
  font-size: var(--fs-base); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 14px; font-size: var(--fs-lg); font-weight: 300; color: var(--muted);
}
.faq details[open] summary::after { content: '–'; }
.faq .a { padding: 0 0 20px; color: var(--ink-2); }
.faq .a p { margin: 0 0 10px; }

/* ── price block ──────────────────────────────────────────── */
.pricebox {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--paper);
  display: grid; gap: 10px; max-width: 520px;
}
.pricebox .amount { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xl); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pricebox .amount small { font-size: var(--fs-sm); color: var(--muted); letter-spacing: 0; }

/* ── the check ────────────────────────────────────────────── */
.check { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s6); align-items: start; }
.check form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.field .err { font-size: var(--fs-xs); color: var(--risk); margin: 0; font-weight: 500; }
.field .err:empty { display: none; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 11px var(--s3); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--teal-ink); outline-offset: 1px; }
.field [aria-invalid='true'] { border-color: var(--risk); }
.affix { display: flex; align-items: stretch; }
.affix span {
  display: flex; align-items: center; padding: 0 var(--s3); border: 1.5px solid var(--line); background: var(--stone);
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
}
.affix span:first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.affix span:last-child { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.affix input { border-radius: 0; }
.affix input:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.affix span:first-child + input { border-radius: 0 var(--radius) var(--radius) 0; }
.result {
  position: sticky; top: 20px; border-radius: var(--radius); padding: 26px;
  background: var(--band); color: var(--band-ink);
}
.result .label { color: var(--band-muted); }
.result .lvl { font-size: var(--fs-xl); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.result .what { color: var(--band-ink); margin: 0 0 18px; }
.result dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); margin: 0 0 18px; padding: var(--s4) 0; border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.result dt { color: var(--band-muted); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s2); }
.result dd { margin: 0; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-base); text-align: right; font-variant-numeric: tabular-nums; }
.result dd.total { color: var(--band-ink); font-size: var(--fs-md); font-weight: 600; }
.result .payback { font-size: var(--fs-xs); color: var(--band-muted); margin: 0 0 20px; }
.result a { color: var(--teal); }
.result .btn.ghost { color: var(--band-ink); border-color: var(--band-ink); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.key.risk, .bars .seg.risk { background: var(--band-ink); }
.key.admin, .bars .seg.admin { background: var(--band-muted); }
.bars { position: relative; height: 12px; border-radius: 3px; overflow: hidden; background: var(--band-line); margin: 0 0 var(--s4); }
/* Both segments span the bar; scaling from opposite ends, they meet where the split is. */
.bars .seg { position: absolute; inset: 0; transform: scaleX(0); transition: transform 420ms var(--ease-out); }
.bars .seg.risk { transform-origin: left; }
.bars .seg.admin { transform-origin: right; }
.result .pin { margin: 0 0 var(--s4); background: transparent; border-color: var(--band-line); }
.result .pin li { color: var(--band-muted); border-color: var(--band-line); transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.result .pin li.on { background: var(--band-ink); color: var(--band); }
.noscript { padding: 14px var(--s4); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ── forms (contact) ──────────────────────────────────────── */
.form { display: grid; gap: var(--s4); max-width: 560px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.form .status { font-size: var(--fs-sm); margin: 0; }

/* ── article ──────────────────────────────────────────────── */
.glossary-index { display: flex; flex-wrap: wrap; gap: var(--s2) 18px; max-width: 720px; margin: 0 0 40px; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.article { max-width: 720px; }
.article h2 { font-size: var(--fs-lg); margin-top: 44px; max-width: none; }
.article h2, .article h3 { scroll-margin-top: var(--s5); }
.article h3 { font-size: var(--fs-md); margin-top: 30px; }
.article p, .article li { font-size: 1.125rem; line-height: 1.7; }
.article blockquote { margin: var(--s5) 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--line); color: var(--ink-2); }
.article table { min-width: 0; font-size: var(--fs-sm); }
.article .scroll table { min-width: 520px; }
.article img { border-radius: var(--radius); }
.article .figure { margin: var(--s6) 0; }
.byline { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--s2); }
.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.post-list li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.post-list a { font-size: var(--fs-md); font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.post-list a:hover { text-decoration: underline; }
.post-list p { margin: 6px 0 0; color: var(--ink-2); }

/* ── final call to action band ────────────────────────────── */
.cta-band { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { color: var(--band-ink); max-width: 20ch; }
.band .btn.ghost { color: var(--band-ink); border-color: var(--band-ink); }
.strokes { display: block; width: 100%; max-width: 300px; height: auto; justify-self: end; }

/* ── footer ───────────────────────────────────────────────── */
.slogan { margin: var(--s4) 0 var(--s2); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
footer.site { padding: 56px 0 40px; font-size: var(--fs-xs); color: var(--muted); }
footer.site .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
footer.site h2 { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s3); }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; }
footer.site .legal p { margin: 0; max-width: none; }

.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 4; display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--ink); color: var(--paper); padding: 11px var(--s4); border-radius: 999px; font-weight: 600;
  font-size: var(--fs-xs); text-decoration: none; box-shadow: var(--shadow-2);
}
.wa:hover { text-decoration: none; opacity: 0.92; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-visual { justify-self: start; max-width: 520px; }
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-scene { display: none; }
  .story-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
  .story-step .step-ico { display: grid; }
}
@media (max-width: 980px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icp-grid, .icp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barriers { grid-template-columns: 1fr; }
  .qa-grid { grid-template-columns: 1fr; }
  .icp { grid-template-columns: 1fr; gap: var(--s5); }
  .ladder { grid-template-columns: 1fr; }
  .ladder li { padding-top: 0; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  footer.site .cols > div:first-child { grid-column: 1 / -1; }
  .nav { display: none; }
  .menu { display: block; }
  .check { grid-template-columns: 1fr; }
  .result { position: static; }
  .cta-band { grid-template-columns: 1fr; }
  .strokes { display: none; }
  .scale { display: none; }
  .scale-track { display: none; }
}
@media (max-width: 760px) {
  .leak-head { display: none; }
  .leak-card { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: start; padding: var(--s4); }
  .leak-card h3 { grid-column: 2; align-self: center; }
  .leak-card .badge { grid-row: 1; }
  .leak-card p { grid-column: 2; }
  .leak-card .to { display: none; }
  .leak-card .state { display: block; margin-bottom: 2px; color: var(--muted); }
  .jobs { grid-template-columns: 1fr; }
  .lanes { grid-template-columns: 1fr; gap: var(--s3); }
  .handover { transform: rotate(90deg); }
  .pricelist a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; row-gap: 2px; }
  .pricelist .badge { grid-row: span 2; }
  .pricelist .from, .pricelist .time { grid-column: 2; }
  .pricelist .go { grid-row: 1 / span 2; grid-column: 3; }
}
@media (max-width: 680px) {
  body { font-size: 1.03125rem; }
  .grid.c2, .grid.c3, .grid.c4, .two, .tiles, .order, .icp-grid, .icp-tiles { grid-template-columns: 1fr; }
  .icp { padding: var(--s5); }
  .gap-row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .gap-bar { grid-column: 1 / -1; grid-row: 2; }
  .barrier-head { grid-template-columns: 2.5rem auto; }
  .barrier-head span { grid-column: 1 / -1; }
  .pin { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 12px; }
  .pin li { border-color: var(--line); }
  .pin li:nth-child(odd) { border-left: 0; }
  .pin li:nth-child(n+3) { border-top-style: solid; border-top-width: 1px; }
  .rule-callout { font-size: var(--fs-base); }
  .alongside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding-right: var(--s5); }
  .two { gap: var(--s5); }
  .hero { padding: 52px 0 44px; }
  .hero .stand { font-size: 1.125rem; }
  section { padding: 46px 0; }
  .cols2 { columns: 1; }
  .ticks.cols2 { grid-template-columns: 1fr; }
  .measure .ticks { grid-template-columns: 1fr; }
  .leakline.with-stats { grid-template-columns: 1fr; }
  .ranks li { grid-template-columns: 1.75rem minmax(0, 1fr); grid-template-areas: "n what" "n call" "n bar"; }
  .ranks .call { white-space: normal; }
  .pull { font-size: var(--fs-md); }
  .form .row { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 40px 1fr; }
  .wa span { display: none; }
}
/* Tables that must stay readable on a phone become labelled rows. */
@media (max-width: 640px) {
  .stack, .article .scroll .stack { min-width: 0; }
  .scroll:has(> .stack) { overflow: visible; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack, .stack tbody, .stack tr, .stack th, .stack td { display: block; width: auto; }
  .stack tr { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .stack th, .stack td { border: 0; padding: 2px 0; }
  .stack tbody th { font-size: var(--fs-base); margin-bottom: 4px; }
  .stack td[data-label]::before {
    content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: var(--s2);
  }
  td.state { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .story.scrolly .story-step { opacity: 1; min-height: 0; }
}
/* Windows high contrast and other forced-colour modes. */
@media (forced-colors: active) {
  .hero h1 u { box-shadow: none; text-decoration: underline; text-decoration-thickness: 0.12em; }
  .btn, .card, .leak-card, .lane, .job, .callflow, .badge { border: 1px solid CanvasText; }
  .dot, .key, .bars .seg { forced-color-adjust: none; background: CanvasText; }
  .beats::after, .timeline::after, .scale-track::after { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  .top, footer.site, .wa, .cta-band .btns { display: none; }
  section.band { background: none; color: #000; }
  .more-detail > summary { display: none; }
  .more-detail .more-body { display: block; }
}

/* ── 27 Oct 2026 copy: banner, switcher, systems, pricing, booking ── */

/* The strip above the header. Quiet: the teal stays with the page's one moment. */
.announce { background: var(--stone); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.announce p { margin: 0; padding: 10px 0; max-width: none; text-align: center; text-wrap: balance; }
.announce strong { color: var(--ink); font-weight: 600; }
.announce a { font-weight: 600; white-space: nowrap; }

section > .wrap > .eyebrow, .hero .eyebrow { color: var(--muted); }
.hero .stand2 { margin: -12px 0 28px; max-width: 52ch; color: var(--ink-2); }

/* The hero's workflow switcher. */
.switch { border: 1px solid var(--line); border-radius: 12px; background: var(--stone); padding: var(--s5); }
.switch-h { margin: 0 0 var(--s3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.switch-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s4); }
.switch-tab {
  display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.switch-tab .ico { color: var(--muted); }
.switch-tab[aria-selected='true'], .switch-tab[aria-current='true'] { border-color: var(--ink); color: var(--ink); background: var(--cream); }
.switch-tab[aria-selected='true'] .ico, .switch-tab[aria-current='true'] .ico { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .switch-tab:hover { border-color: var(--ink); color: var(--ink); } }
.switch-panel { border-top: 1px solid var(--line); padding-top: var(--s4); }
.switch-panel:focus-visible { outline-offset: 6px; }
.switch-panel h3 { font-size: var(--fs-base); margin: 2px 0 var(--s3); }
.switch-k { margin: var(--s3) 0 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.switch-panel .ticks { gap: 6px; }
.switch-panel .ticks li { font-size: var(--fs-sm); line-height: 1.45; }
.switch-result { margin: 0; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.switch-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.switch-facts dt { font-size: var(--fs-xs); color: var(--muted); }
.switch-facts dd { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
.switch-panel:not([hidden]) { animation: panel-in var(--dur-ui) var(--ease-out); }
@keyframes panel-in { from { opacity: 0.4; transform: translateY(4px); } }

/* A row of short promises (home, security). */
.assure-band { padding: var(--s6) 0; }
.assure { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.assure li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; }
.assure b { display: block; font-size: var(--fs-sm); margin: 2px 0 4px; }
.assure span { display: block; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* Us-and-them tables. */
table.vs { min-width: 0; }
.vs thead th:first-child { width: 22%; }
.vs td.them { color: var(--muted); }
.vs td.us { color: var(--ink); font-weight: 500; }

/* The four pillars (home). */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.pillar { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: var(--s5); }
section.stone .pillar { background: var(--paper); }
.pillar header { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); align-items: center; margin-bottom: var(--s2); }
.pillar header .n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.pillar h3 { margin: 0; font-size: var(--fs-md); }
.pillar p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.pillar .ticks li { font-size: var(--fs-sm); line-height: 1.45; }
.pk { margin: var(--s4) 0 var(--s2) !important; font-size: var(--fs-xs) !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted) !important; }
.pillar-go { margin-top: auto; padding-top: var(--s4); font-size: var(--fs-sm); font-weight: 600; }

/* A process as a chain of steps. */
.pipe { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pipe li { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.pipe li span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--paper); line-height: 1.35; }
section.stone .pipe li span { background: var(--paper); }
.pipe li:not(.last)::after { content: '→'; color: var(--muted); }
.pipe li.last span { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.pipe-split .pipe-branches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s3); }
.pipe-split .pipe-branches > div { border: 1px dashed var(--line); border-radius: 10px; padding: var(--s3) var(--s4) var(--s4); }
.pipe-split .pipe-branches > .wait { border-color: var(--ink-2); }
.pipe-split .pipe-branches .pk { margin-top: 0 !important; }
.pipe-split .pipe-branches .pipe { margin-top: 0; }

/* Example screens on /systems/. */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ba-list li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: var(--fs-sm); }
.ba-list .when { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); padding-top: 2px; }
.ba-result { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s4) 0 0; font-size: var(--fs-sm); }
.ba-before .ba-result { color: var(--risk); }
.ba-after .ba-result { color: var(--ok); }
.ba-after { border-color: var(--ink-2); }
.demo-chat, .demo-queue, .demo-screen { margin-top: var(--s5); max-width: 640px; }
.pill-ok { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--ok); border: 1.5px solid currentColor; border-radius: 999px; padding: 1px 10px 1px 6px; }
.pill-ok .ico { width: 1rem; height: 1rem; vertical-align: 0; }
.bubbles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.bubbles li { max-width: 86%; padding: var(--s3) var(--s4); border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.bubbles li.ai { justify-self: end; border-color: var(--ink-2); background: var(--cream); }
.bubbles .who { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }
.bubbles p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.demo-note { display: flex; gap: var(--s2); align-items: center; margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.demo-foot { margin: var(--s3) 0 0; }
.callflow .ticks li { font-size: var(--fs-sm); }
.numbered { margin: 0; padding-left: 1.25rem; font-size: var(--fs-sm); color: var(--ink-2); display: grid; gap: 4px; }
.outs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.outs li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: var(--fs-sm); }
.demo-then { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.fake-btn { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 4px 12px; font-weight: 600; color: var(--ink); }
.cand { display: flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.rubric { margin: 0; display: grid; gap: var(--s2); }
.rubric div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: var(--fs-sm); }
.rubric dd { margin: 0; color: var(--ok); font-weight: 500; text-align: right; }
.score { margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.score b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--ink); font-weight: 500; }
.sys-name { display: flex; align-items: center; gap: var(--s3); max-width: none; }
.sys-head { margin: 0 0 var(--s3); font-size: var(--fs-lg); line-height: 1.3; font-weight: 500; color: var(--ink); max-width: 36ch; }
.sys-detail { margin-top: var(--s7); }
.caps { margin: 0; display: grid; gap: var(--s4); }
.caps dt { font-weight: 600; margin-bottom: 2px; }
.caps dd { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.sys-price { margin: var(--s5) 0 var(--s4); font-size: var(--fs-sm); color: var(--muted); }
.sys-price .mono { color: var(--ink); }
.jump { display: flex; flex-wrap: wrap; gap: var(--s2); }
.jump a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .jump a:hover { border-color: var(--ink); } }
.arch .n, .card > .n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.arch .ticks { margin-top: var(--s2); gap: 6px; }
.arch .ticks li { font-size: var(--fs-sm); color: var(--ink-2); }

/* Priced steps (home, how it works). */
.psteps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.pstep { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: var(--s5); }
section.stone .pstep { background: var(--paper); }
.pstep .n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.pstep h3 { margin: 4px 0 var(--s2); }
.pstep .amount, .tier .amount { margin: 0; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-lg); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pstep .time, .tier .time { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.pstep .plead, .tier .plead { margin: var(--s4) 0 var(--s3); font-weight: 500; color: var(--ink); }
.pstep dl { margin: 0; display: grid; gap: var(--s3); }
.pstep dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pstep dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.pstep:first-child { border-color: var(--ink-2); }
.standalone { margin-top: var(--s6); align-items: stretch; }
.amount-line { color: var(--ink-2) !important; }
.amount-line b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--ink); font-weight: 500; }
.callout { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; border: 1px solid var(--ink-2); border-radius: 12px; padding: var(--s5); background: var(--stone); }
section.stone .callout { background: var(--paper); }
.callout h3 { font-size: var(--fs-base); margin: 6px 0 var(--s2); }
.callout p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.guards .card .badge { margin-bottom: var(--s2); }
.deploy .tag { margin-bottom: 2px; }

/* Pricing tiers in detail. */
.tiers { display: grid; gap: var(--s4); }
.tier { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: var(--s6); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: var(--s6); scroll-margin-top: var(--s5); }
.tier .n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.tier h3 { margin: 4px 0 var(--s3); }
.tier .plead { margin-top: 0; }
.tier .caps dd .ticks li { font-size: var(--fs-sm); }
.tier .deploy { margin-top: var(--s2); grid-template-columns: 1fr; }
.tier .deploy .card { padding: var(--s4); background: var(--stone); }
.tier-body > p:last-child { margin: var(--s4) 0 0; font-size: var(--fs-sm); }
.sys-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.sys-list a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); line-height: 1.45; }
.sys-list b { display: block; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .sys-list a:hover { border-color: var(--ink); } }

/* Security: the guardrail layers. */
.layers-fig .quote { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: var(--fs-sm); }
.glayers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.glayers li { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: var(--fs-sm); }
.glayers .n { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.glayers span:last-child { color: var(--ink-2); }
.glayers li.stop { border-color: var(--ink); }

/* The closing band's small print. */
.band-foot { margin: var(--s4) 0 0; color: var(--band-muted); }

/* The booking dialog. */
dialog.book {
  width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1);
}
dialog.book::backdrop { background: var(--backdrop); }
dialog.book[open] { animation: book-in var(--dur-ui) var(--ease-out); }
@keyframes book-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.book-in { position: relative; padding: var(--s6); }
.book-x { position: absolute; top: var(--s3); right: var(--s3); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.book-x:hover { color: var(--ink); background: var(--stone); }
.book h2 { font-size: var(--fs-lg); max-width: 22ch; padding-right: var(--s6); }
.book h2:focus { outline: none; }
.book p { color: var(--ink-2); }

@media (max-width: 1000px) {
  .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psteps { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 820px) {
  .pillars, .ba, .pipe-split .pipe-branches { grid-template-columns: 1fr; }
  .pipe { flex-direction: column; align-items: flex-start; }
  .pipe li { flex-direction: column; align-items: flex-start; }
  .pipe li:not(.last)::after { content: '↓'; padding-left: 14px; }
}
@media (max-width: 560px) {
  .assure { grid-template-columns: 1fr; }
  .switch { padding: var(--s4); }
  .switch-facts { grid-template-columns: 1fr; }
  .book-in { padding: var(--s5) var(--s4); }
  .tier { padding: var(--s5) var(--s4); }
}
@media (max-width: 720px) {
  .announce-more { display: none; }
  .announce p { text-align: center; }
}

/* ── screens (29 Oct 2026): one idea per screen, after otto, platinux, grexa ──
   Sizes snap to a fixed type scale (12, 14, 16, 18, 20, 24, 30, 36, 48, 60px)
   and spacing to 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96px. The second part of
   each headline is the screen's one teal moment. */
:root {
  --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
}

/* A sticky, quiet header. */
header.top { position: sticky; top: 0; z-index: 20; background: var(--hdr-bg); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); }

.screen { padding: 96px 0; }
.screen.slim { padding-bottom: 32px; border-bottom: 0; }
.screen.slim + .screen.sys { border-top: 0; }

/* Centered section heads. */
.shead { margin: 0 0 48px; }
.shead.center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.shead.center h2, .shead.center h1, .shead.center .ssub { margin-left: auto; margin-right: auto; }
.shead h2 { font-size: 3rem; line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; margin-bottom: 16px; }
.shead.left h2 { max-width: 16ch; }
.shead .ssub, .sys-copy .ssub { font-size: 1.125rem; line-height: 1.75rem; color: var(--ink-2); max-width: 540px; margin-top: 0; margin-bottom: 0; }
.accent { display: block; color: var(--accent); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--stone);
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
section.stone .pill { background: var(--paper); }
.pill .ico { width: 1rem; height: 1rem; vertical-align: 0; color: var(--ink); }

/* The centered hero. */
.hero2 { padding: 96px 0 80px; border-bottom: 1px solid var(--line); text-align: center; }
.hero2 .shead { margin-bottom: 32px; max-width: 900px; }
.hero2 h1 { font-size: 3.75rem; line-height: 1; letter-spacing: -0.035em; font-weight: 600; margin: 0 auto 24px; text-wrap: balance; }
.hero2 .accent { margin-top: 4px; }
.hero2 .ssub { font-size: 1.25rem; line-height: 1.75rem; max-width: 600px; }
.btns.center { justify-content: center; }
.crumbs.center { justify-content: center; }
.proof { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 0.875rem; color: var(--ink-2); }
.proof li { display: inline-flex; align-items: center; gap: 8px; }
.proof .ico { color: var(--ok); width: 1rem; height: 1rem; }

/* Quick picks under the hero, and audience tiles. */
.qtiles { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }
.qtiles a {
  position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--stone); color: var(--ink); text-decoration: none;
  transition: transform 500ms var(--ease-fluid), border-color 300ms var(--ease-fluid), background-color 300ms var(--ease-fluid);
}
.qtiles .qt-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.qtiles .qt-ico .ico { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.qtiles .qt-name { font-weight: 600; font-size: 1rem; line-height: 1.5rem; }
.qtiles .qt-out { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); padding-right: 16px; }
.qtiles .qt-go { position: absolute; top: 24px; right: 24px; color: var(--muted); transition: transform 300ms var(--ease-fluid); }
@media (hover: hover) and (pointer: fine) {
  .qtiles a:hover { transform: translateY(-4px); border-color: var(--ink-2); }
  .qtiles a:hover .qt-go { transform: translateX(4px); color: var(--ink); }
}
.qtiles a:active { transform: scale(0.98); }
.qtiles.who { margin-top: 0; }
section.stone .qtiles a { background: var(--paper); }

/* One system per screen: copy on one side, the mockup on the other. */
.sys-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.sys.flip .sys-copy { order: 2; }
.sys-copy h2 { font-size: 3rem; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 16px; max-width: 15ch; }
.sys-copy .ssub { margin-bottom: 32px; }
.mtiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mtiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mtiles li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--stone); }
section.stone .mtiles li { background: var(--paper); }
.mtiles .ico { grid-row: span 2; align-self: start; margin-top: 2px; color: var(--ink); }
.mtiles b { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.mtiles span { grid-column: 2; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.sys-more { margin: 24px 0 0; font-size: 1rem; font-weight: 600; }
.sys-visual { display: flex; justify-content: center; }

/* The mockups. Finished state by default; site.js arms and plays them. */
.mock { position: relative; width: 100%; max-width: 440px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--stone); box-shadow: var(--lift); overflow: hidden; }
section.stone .mock { background: var(--paper); }
.m-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.75rem; line-height: 1rem; }
.m-dots { display: inline-flex; gap: 4px; }
.m-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.m-title { font-weight: 600; color: var(--ink); }
.m-meta { margin-left: auto; color: var(--muted); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; }
.m-body { padding: 24px 16px; display: grid; gap: 12px; }
.m-cap { position: absolute; right: 12px; bottom: 8px; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.m-chat { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 8px; }
.m-chat li { max-width: 86%; font-size: 0.875rem; line-height: 1.25rem; }
.m-chat .them { justify-self: start; padding: 8px 12px; border-radius: 4px var(--r-md) var(--r-md) var(--r-md); background: var(--cream); }
.m-chat .ai { justify-self: end; padding: 8px 12px; border-radius: var(--r-md) 4px var(--r-md) var(--r-md); border: 1px solid var(--ink-2); background: var(--paper); }
section.stone .m-chat .ai { background: var(--stone); }
.m-chat .who { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.m-note { justify-self: center; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.75rem !important; }
.m-note .ico { width: 0.875rem; height: 0.875rem; }
.m-ok { justify-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: none !important; padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; color: var(--ok); font-weight: 500; font-size: 0.75rem !important; }
.m-ok .ico { width: 1rem; height: 1rem; }
.m-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--ok); font-weight: 600; }
.m-pill .ico { width: 0.875rem; height: 0.875rem; }
.m-voice { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
section.stone .m-voice { background: var(--stone); }
.m-voice b { display: block; font-size: 0.875rem; line-height: 1.25rem; }
.wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.wave i { flex: 1; height: var(--h); border-radius: 2px; background: var(--ink-2); transform-origin: center; }
.m-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-outs li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 0.875rem; line-height: 1.25rem; }
.m-outs em { margin-left: auto; font-style: normal; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--muted); }
.m-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.m-btn { padding: 4px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); font-weight: 600; }
.m-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.m-done { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 500; }
.m-done .ico { width: 1rem; height: 1rem; }
.m-cand { display: flex; align-items: center; gap: 12px; margin: 0; }
.m-cand b { display: block; font-size: 0.875rem; line-height: 1.25rem; }
.m-cand span span, .m-cand > span:last-child { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.m-rubric { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-rubric li { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 0.875rem; line-height: 1.25rem; }
.m-rubric em { font-style: normal; font-weight: 600; color: var(--ok); }
.m-score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 0.875rem; color: var(--muted); }
.m-score .bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.m-score .bar i { display: block; height: 100%; background: var(--ok); transform-origin: left; transform: scaleX(var(--v)); }
.m-score b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--ink); font-weight: 500; }
.m-wait { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--ink-2); border-radius: var(--r-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.m-req { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
section.stone .m-req { background: var(--stone); }
.m-req p { margin: 0; }
.m-k { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.m-k .ico { width: 1rem; height: 1rem; }
.m-amt { margin-top: 8px !important; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 1.875rem; line-height: 2.25rem; color: var(--ink); }
.m-sub { margin-top: 4px !important; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-2); }

/* Playing a mockup: each step arrives in turn (--i), once. */
[data-mock].armed [style*='--i'] { opacity: 0; }
[data-mock].play [style*='--i'] { animation: m-in 600ms var(--ease-fluid) calc(var(--i) * 700ms + 200ms) both; }
@keyframes m-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
[data-mock].play .wave i { animation: wave 900ms var(--ease-fluid) 2 alternate; }
@keyframes wave { 50% { transform: scaleY(0.35); } }
[data-mock].play .m-score .bar i { animation: bar-fill 900ms var(--ease-fluid) calc(4 * 700ms + 400ms) both; }
@keyframes bar-fill { from { transform: scaleX(0); } }

/* Steps in a row, joined by a line. */
.srow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.srow::before { content: ''; position: absolute; left: 16.66%; right: 16.66%; top: 24px; height: 1px; background: var(--line); }
.srow li { position: relative; text-align: center; padding: 0 16px; }
.srow .sn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 50%; border: 1px solid var(--ink-2); background: var(--paper); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 0.875rem; }
section.stone .srow .sn { background: var(--stone); }
.srow h3 { font-size: 1.5rem; line-height: 2rem; margin: 0 0 8px; }
.srow .sp { margin: 0 auto 8px; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 1.25rem; line-height: 1.75rem; color: var(--ink); }
.srow .sl { margin: 0 auto; max-width: 26ch; font-size: 1rem; line-height: 1.5rem; color: var(--muted); }

/* Two cards: them and us. */
.vs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 0 auto; }
.vcard { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); }
.vcard.us { border-color: var(--ink-2); }
.vk { margin: 0 0 24px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vcard.us .vk { color: var(--ink); }
.vcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vcard li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.125rem; line-height: 1.75rem; }
.vcard li .ico { flex: none; margin-top: 4px; }
.vcard.them li { color: var(--muted); }
.vcard.them .ico { color: var(--risk); }
.vcard.us .ico { color: var(--ok); }

/* Large type, lit word by word. */
.tagline { padding: 128px 0; }
.tl { margin: 0 auto; max-width: 900px; text-align: center; font-size: 3.75rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.tl.armed .w { color: var(--faint-ink); transition: color 700ms var(--ease-fluid); }
.tl.armed .w.lit { color: var(--ink); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split .shead { margin-bottom: 32px; }
.split > div:last-child { display: flex; justify-content: center; }
.faq.center { margin: 0 auto; }
.clink { margin: 48px auto 0; text-align: center; max-width: none; font-size: 1rem; }

/* Fade up as things scroll in (site.js adds .rv only to what is below the fold). */
[data-rv].rv { opacity: 0; transform: translateY(32px); }
[data-rv].rv.in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-fluid), transform 900ms var(--ease-fluid); }

@media (max-width: 1000px) {
  .qtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-grid, .split { grid-template-columns: 1fr; gap: 48px; }
  .sys.flip .sys-copy { order: 0; }
  .hero2 h1 { font-size: 3rem; }
  .tl { font-size: 3rem; }
}
@media (max-width: 720px) {
  .screen { padding: 64px 0; }
  .hero2 { padding: 64px 0; }
  .hero2 h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .hero2 .ssub { font-size: 1.125rem; }
  .shead { margin-bottom: 32px; }
  .shead h2, .sys-copy h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .br-lb, br.lb { display: none; }
  .qtiles { grid-template-columns: 1fr; margin-top: 48px; }
  .qtiles a { padding: 16px 20px; }
  .qtiles .qt-ico { margin-bottom: 8px; }
  .mtiles.c2 { grid-template-columns: 1fr 1fr; }
  .mtiles li { padding: 12px; grid-template-columns: 1fr; }
  .mtiles .ico { grid-row: auto; }
  .mtiles span { grid-column: 1; }
  .srow { grid-template-columns: 1fr; gap: 32px; }
  .srow::before { display: none; }
  .vs2 { grid-template-columns: 1fr; }
  .vcard { padding: 24px; }
  .vcard li { font-size: 1rem; line-height: 1.5rem; }
  .tagline { padding: 80px 0; }
  .tl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rv].rv { opacity: 1; transform: none; }
  [data-mock].armed [style*='--i'] { opacity: 1; }
  .tl.armed .w { color: var(--ink); }
}

/* Screens, part 2: folds, price cards, chips. */
.screen.slim + .screen.sys { padding-top: 48px; }
.srow { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.srow::before { left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3)); }
.sys-detail2 { margin-top: 48px; border-top: 1px solid var(--line); }
.sys-detail2 > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-top: 16px; cursor: pointer; list-style: none; font-weight: 600; }
.sys-detail2 > summary::-webkit-details-marker { display: none; }
.sys-detail2 > summary .ico { transition: transform 300ms var(--ease-fluid); }
.sys-detail2[open] > summary .ico { transform: rotate(45deg); }
.sd-body { padding: 24px 0 8px; display: grid; gap: 32px; }
.sd-body h3 { font-size: 1rem; line-height: 1.5rem; margin: 0 0 12px; }
.sd-body .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.tchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tchips li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-2); }
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pcard { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--stone); scroll-margin-top: 96px; }
section.stone .pcard { background: var(--paper); }
.pcard.featured { border-color: var(--ink-2); }
.pk2 { margin: 0 0 16px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pprice { margin: 0; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.03em; color: var(--ink); }
.pprice small { margin-left: 4px; font-size: 1rem; letter-spacing: 0; color: var(--muted); }
.pnote { margin: 8px 0 24px; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.pcard ul { list-style: none; margin: 0 0 32px; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.pcard ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.5rem; }
.pcard ul .ico { flex: none; margin-top: 2px; color: var(--ok); }
.pgo { margin-top: auto; font-weight: 600; }
.wide-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; padding: 24px 32px; border: 1px solid var(--line); border-radius: var(--r-xl); }
.wide-card b { font-size: 1.25rem; line-height: 1.75rem; }
.wide-card p { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
.wide-card .pprice { font-size: 1.5rem; line-height: 2rem; }
.ftiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.ftiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
.ftiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ftiles.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ftiles li { padding: 32px 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--stone); }
section.stone .ftiles li { background: var(--paper); }
.ftiles .badge { margin-bottom: 24px; }
.ftiles h3 { font-size: 1.125rem; line-height: 1.75rem; margin: 0 0 8px; }
.ftiles p { margin: 0; font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.film.center { margin: 0 auto; }
@media (max-width: 1000px) {
  .pcards, .ftiles.c3, .ftiles.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pcards, .ftiles.c2, .ftiles.c3, .ftiles.c4, .sd-body .caps { grid-template-columns: 1fr; }
  .pcard { padding: 24px; }
  .ftiles li { padding: 24px; }
  .wide-card { padding: 24px; }
}
.hero2 .btns { justify-content: center; }
@media (max-width: 720px) {
  .srow { grid-template-columns: 1fr; }
}

/* The booking dialog: the booking calendar, embedded. */
dialog.book.wide { width: min(1040px, calc(100vw - 2rem)); }
.book-cal { position: relative; height: min(700px, calc(100dvh - 260px)); min-height: 440px; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--stone); }
.book-cal iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 400ms var(--ease-fluid); }
.book-cal.ready iframe { opacity: 1; }
.book-cal-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; max-width: none; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 720px) { .book-cal { height: calc(100dvh - 220px); } }

/* The 3-minute check: the home preview and the page itself. */
.m-level { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.02em; }
.m-pin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.m-pin li { padding: 8px 4px; text-align: center; font-size: 0.75rem; line-height: 1rem; color: var(--muted); border-left: 1px solid var(--line); }
.m-pin li:first-child { border-left: 0; }
.m-pin li.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.m-sum { margin: 0; display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.m-sum div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; line-height: 1.25rem; }
.m-sum dt { color: var(--muted); }
.m-sum dd { margin: 0; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--ink); }
.m-sum .tot dt { color: var(--ink); font-weight: 600; }
.m-sum .tot dd { font-weight: 600; }
.check-cta .mock .m-sub { margin-bottom: 12px !important; }
.check-screen { padding-top: 64px; }
.center-form { margin: 0 auto; }

/* Screens, part 3: service and industry pages. */
.qtiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.qtiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.cgrid { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.cgrid li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5rem; }
.cgrid .ico { flex: none; margin-top: 2px; color: var(--ok); }
.schips { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; max-width: 1040px; }
.schips li { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--stone); text-align: left; }
section.stone .schips li { background: var(--paper); }
.schips .sn { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 0.875rem; color: var(--muted); }
.schips b { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.center-more { max-width: 720px; margin: 32px auto 0; }
.center-prose { max-width: 680px; margin: 0 auto; text-align: center; }
.center-prose p { margin-left: auto; margin-right: auto; }
.split .shead.left h2 { max-width: 20ch; }
.split .source { margin-top: 16px; }
.screen .lanes { max-width: 960px; margin: 0 auto; }
@media (max-width: 1000px) { .qtiles.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .qtiles.c2, .qtiles.c3, .cgrid { grid-template-columns: 1fr; }
  .schips { grid-template-columns: 1fr 1fr; }
}
.shead.sm h2 { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.02em; max-width: 24ch; }
.schips { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 720px) { .schips { grid-template-columns: 1fr 1fr; } .shead.sm h2 { font-size: 1.5rem; line-height: 2rem; } }
.center-chips { display: flex; justify-content: center; margin-top: 32px; }
.center-chips .tchips { justify-content: center; max-width: 880px; }
.center-callout { margin: 0 auto; max-width: 720px; }
.vs2.one { grid-template-columns: 1fr; max-width: 640px; }
.screen .leaks-wrap { max-width: 1040px; margin: 0 auto; }
.screen .pin { margin-left: auto; margin-right: auto; }
.split .tchips { margin-top: 8px; }
.ev-wrap { max-width: 1040px; margin: 0 auto 48px; } .ev-wrap .evidence { margin-top: 0; }

/* Screens, part 4: blog, glossary, contact. */
.pcards2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcards2 a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--stone); color: var(--ink); text-decoration: none; transition: transform 500ms var(--ease-fluid), border-color 300ms var(--ease-fluid); }
section.stone .pcards2 a { background: var(--paper); }
.pc-meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.pc-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; padding-right: 24px; text-wrap: balance; }
.pc-desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcards2 .qt-go { position: absolute; top: 24px; right: 24px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pcards2 a:hover { transform: translateY(-4px); border-color: var(--ink-2); } }
.gterms { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; gap: 12px; }
.gterms li { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--stone); scroll-margin-top: 96px; }
.gterms summary { position: relative; display: block; padding: 20px 56px 20px 24px; cursor: pointer; list-style: none; }
.gterms summary::-webkit-details-marker { display: none; }
.gterms summary h2 { margin: 0 0 4px; font-size: 1.125rem; line-height: 1.75rem; max-width: none; }
.gterms summary p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5rem; }
.gterms summary .ico { position: absolute; top: 24px; right: 24px; color: var(--muted); transition: transform 300ms var(--ease-fluid); }
.gterms details[open] summary .ico { transform: rotate(45deg); }
.gt-more { padding: 0 24px 20px; color: var(--ink-2); }
.gt-more p { margin: 0 0 12px; }
.split.top { align-items: start; }
.form-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--stone); }
.form-card h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 24px; }
@media (max-width: 1000px) { .pcards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .pcards2 { grid-template-columns: 1fr; } .form-card { padding: 24px; } }
.hero2.small { padding: 80px 0 64px; }
.hero2.small h1 { font-size: 3rem; line-height: 1.05; max-width: 22ch; }
@media (max-width: 720px) { .hero2.small h1 { font-size: 1.875rem; line-height: 2.25rem; } }
@media (min-width: 1001px) { .check .result { position: sticky; top: 96px; } }

/* ── nav and footer (29 Oct 2026) ─────────────────────────────
   Dropdowns open on hover and on keyboard focus (focus-within), so they need
   no script. Below 1024px the phone menu replaces them: a full-screen sheet. */
.top .wrap { gap: 24px; min-height: 72px; }
.nav { margin-left: auto; gap: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav a.nav-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: 999px;
  color: var(--ink-2); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  transition: color 200ms var(--ease-fluid), background-color 200ms var(--ease-fluid);
}
.nav a.nav-link:hover, .has-menu:hover > a.nav-link, .has-menu:focus-within > a.nav-link { color: var(--ink); background: var(--stone); }
.nav a.nav-link[aria-current='page'] { color: var(--ink); border: 0; font-weight: 500; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.nav a.nav-link[aria-current='page']:hover { border-radius: 999px; box-shadow: none; }
.chev { width: 14px; height: 14px; vertical-align: 0; color: var(--muted); transition: transform 300ms var(--ease-fluid); }
.has-menu:hover .chev, .has-menu:focus-within .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 30; width: 360px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--lift-2);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity 200ms var(--ease-fluid), transform 400ms var(--ease-fluid), visibility 0s linear 200ms;
}
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* keeps hover across the gap */
.has-menu:hover > .mega, .has-menu:focus-within > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.mega.c2 { width: 620px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mega.c2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav .mega a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: var(--r-lg); color: var(--ink); font-size: 0.875rem; }
.nav .mega a:hover { background: var(--stone); color: var(--ink); }
.mi-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--stone); color: var(--ink); }
.mi-ico .ico { width: 1.125rem; height: 1.125rem; vertical-align: 0; }
.mi-txt b { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.mi-txt span { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.nav .mega a.mega-more { display: block; margin: 4px 0 0; padding: 12px 8px 4px; border-top: 1px solid var(--line); border-radius: 0; font-weight: 600; color: var(--ink-2); }
.nav .mega a.mega-more:hover { background: none; color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-cta .btn { white-space: nowrap; }

/* The phone menu: a hamburger that turns into an X, and a full-screen sheet. */
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; position: relative; z-index: 2; }
.burger { position: relative; display: block; width: 20px; height: 12px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 400ms var(--ease-fluid), top 400ms var(--ease-fluid); }
.burger i:first-child { top: 0; }
.burger i:last-child { top: 10px; }
.menu[open] .burger i:first-child { top: 5px; transform: rotate(45deg); }
.menu[open] .burger i:last-child { top: 5px; transform: rotate(-45deg); }
header.top:has(.menu[open]) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
.top .logo { position: relative; z-index: 2; }
.menu .sheet {
  position: fixed; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 128px 24px 32px; background: var(--paper); display: flex; flex-direction: column; gap: 32px;
}
.menu[open] .sheet { animation: sheet-in 400ms var(--ease-fluid); }
@keyframes sheet-in { from { opacity: 0; } }
.sheet-nav { display: grid; gap: 32px; }
.sheet-group { animation: sheet-up 600ms var(--ease-fluid) both; }
.sheet-group:nth-child(2) { animation-delay: 60ms; }
.sheet-group:nth-child(3) { animation-delay: 120ms; }
.sheet-group:nth-child(4) { animation-delay: 180ms; }
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } }
.sheet-h { margin: 0 0 8px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sheet-h a { color: inherit; text-decoration: none; }
.sheet-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sheet-group li a { display: block; padding: 8px 0; color: var(--ink); text-decoration: none; font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.sheet-cta { display: grid; gap: 12px; margin-top: auto; }
.sheet-cta .btn { text-align: center; font-size: 1rem; padding: 14px 20px; }
html.menu-open { overflow: hidden; }

/* The footer. */
footer.site { padding: 80px 0 40px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.f-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
.f-brand .slogan { margin: 16px 0 8px; }
.f-line { margin: 0; max-width: 32ch; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.f-brand .btns { margin: 24px 0 16px; }
footer.site .f-brand .btn { color: var(--paper); text-decoration: none; }
footer.site .f-brand .btn.ghost { color: var(--ink); }
.f-mail { margin: 0; }
.f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
footer.site h2 { margin: 0 0 16px; font-size: 0.75rem; line-height: 1rem; }
footer.site ul { gap: 12px; }
footer.site .f-cols a { color: var(--ink-2); font-size: 0.875rem; line-height: 1.25rem; }
footer.site .f-cols a:hover { color: var(--ink); }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.f-bottom p { margin: 0; max-width: none; }
.f-legal { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 1180px) {
  .nav a.nav-link { padding: 8px 10px; }
  .nav-cta .btn.ghost { display: none; }
}
@media (max-width: 1023px) {
  .nav-cta { display: none; }
  .menu { margin-left: auto; }
  .menu summary { border: 1px solid var(--line); }
  .menu[open] summary { background: var(--stone); }
}
@media (max-width: 860px) {
  .f-top { grid-template-columns: 1fr; gap: 48px; }
  .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 560px) {
  .f-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
}
.has-menu.shut > .mega { opacity: 0; visibility: hidden; pointer-events: none; }
.menu .sheet { padding-top: calc(var(--sheet-top, 128px) + 24px); }
.menu .sheet { top: var(--sheet-top, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
/* Dropdowns open centered under the header, so none can run past the window
   at any width. The bridge above each panel keeps hover across the gap. */
.top .wrap { position: relative; }
.nav-item { position: static; }
.mega { top: calc(100% - 4px); }
.mega::before { top: -28px; height: 28px; }

/* The closing band's Xw tile, as the favicon; the footer's headline. */
.strokes { max-width: 240px; filter: drop-shadow(0 24px 48px rgb(0 0 0 / 0.45)); }
.xw-tile { fill: var(--mark-tile); stroke: var(--band-line); stroke-width: 0.5; }
.xw-cream { fill: var(--mark-cream); }
.xw-teal { fill: var(--mark-teal); }
.f-title { margin: 24px 0 0; max-width: 22ch; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }


/* ── themes (29 Oct 2026) ─────────────────────────────────────
   Dark is the default and the brand's own look. Light is the October 2026
   brand book's warm paper, chosen with the switch in the header or by the
   reader's system setting (public/theme.js). Every colour on the site reads
   from these tokens; the closing band and the check's result card stay dark
   in both themes. */
:root {
  --accent: var(--teal);
  --hdr-bg: rgb(18 18 16 / 0.82);
  --faint-ink: rgb(233 230 220 / 0.25);
  --lift: 0 24px 64px rgb(0 0 0 / 0.35);
  --lift-2: 0 24px 64px rgb(0 0 0 / 0.45);
  --backdrop: rgb(0 0 0 / 0.65);
  --mark-tile: #1b1b19; --mark-cream: #e8e5db; --mark-teal: #00d1be;
}
:root[data-theme='light'] {
  --teal: #00d1be;
  --teal-ink: #00695e;
  --accent: #00796e;                     /* 5.0:1 on paper, 4.7:1 on stone */
  --logo-teal: #009a8a;
  --logo-ink: #1b1b19;
  --on-teal: #1b1b19;
  --mark: rgb(0 209 190 / 0.45);
  --ink: #1b1b19;
  --ink-2: #3d3c37;
  --muted: #636159;                      /* 5.9:1 on paper, 5.4:1 on stone */
  --paper: #faf9f6;
  --stone: #f2f0ea;
  --cream: #e9e6dc;
  --line: #e2dfd6;
  --band: #1b1b19;
  --band-ink: #e8e5db;
  --band-muted: #a9a69c;
  --band-line: #3a3933;
  --ok: #187038;
  --warn: #8a5f00;
  --risk: #b3261e;
  --code-bg: #f2f0ea;
  --hdr-bg: rgb(250 249 246 / 0.85);
  --faint-ink: rgb(27 27 25 / 0.2);
  --lift: 0 24px 64px rgb(27 27 25 / 0.1), 0 2px 6px rgb(27 27 25 / 0.04);
  --lift-2: 0 24px 64px rgb(27 27 25 / 0.14);
  --backdrop: rgb(27 27 25 / 0.45);
  color-scheme: light;
}
/* In light, the dark band's mockups and buttons keep their dark-theme look. */
:root[data-theme='light'] section.band .btn.ghost { color: var(--band-ink); border-color: var(--band-ink); }

/* The switch: a sun in dark (go light), a moon in light (go dark). Hidden
   until theme.js has run, because without it the switch would do nothing. */
.theme-btn {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color 200ms var(--ease-fluid), background-color 200ms var(--ease-fluid), transform 160ms var(--ease-fluid);
}
:root[data-theme] .theme-btn { display: inline-grid; }
.theme-btn:hover { color: var(--ink); background: var(--stone); }
.theme-btn:active { transform: scale(0.94); }
.theme-btn .ico { width: 1.125rem; height: 1.125rem; vertical-align: 0; }
.theme-btn .moon, :root[data-theme='light'] .theme-btn .sun { display: none; }
:root[data-theme='light'] .theme-btn .moon { display: block; }
@media (max-width: 1023px) { .top .theme-btn { margin-left: auto; } .top .theme-btn + .menu { margin-left: 8px; } }
.pcards2.feature a { padding: 32px; gap: 12px; min-height: 260px; }
.pcards2.feature .pill { align-self: flex-start; margin: 0 0 8px; }
.pcards2.feature .pc-title { font-size: 1.5rem; line-height: 2rem; }
.pcards2.feature .pc-desc { -webkit-line-clamp: 3; font-size: 1rem; line-height: 1.5rem; }
.pcards2.feature .pc-meta { order: 9; margin-top: auto; }

/* Light theme: cards carry a very light hint of the accent (29 Oct 2026, Deep).
   Sections stay neutral paper and stone, so it reads as a hint, not a wash.
   Text on the tint keeps AA contrast (muted 5.7:1, accent 4.8:1). */
:root[data-theme='light'] { --card: #eff9f7; --card-line: #d4ebe6; }
:root[data-theme='light'] :is(.qtiles a, .mtiles li, .pcard, .ftiles li, .vcard, .pcards2 a, .gterms li, .schips li,
  .form-card, .card, .leak-card, .pillar, .lane, .barrier, .job, .icp, .callflow, .mock, .switch, .tiles a, .wide-card,
  .tier, .mi-ico, .qtiles .qt-ico) { background: var(--card); border-color: var(--card-line); }
:root[data-theme='light'] section.stone :is(.qtiles a, .mtiles li, .pcard, .ftiles li, .vcard, .pcards2 a, .schips li, .card, .leak-card, .mock, .callflow) { background: var(--card); }
:root[data-theme='light'] .vcard.us, :root[data-theme='light'] .pcard.featured { border-color: #8fcfc4; }
.screen p.source[style*="center"] { margin-left: auto; margin-right: auto; }

/* ── whitespace pass (31 Oct 2026, Deep: "need more white space") ──
   Larger gaps between screens, heads and their content, and inside cards,
   so each screen reads at a glance. Values stay on the 4px spacing scale. */
.screen { padding: 128px 0; }
.screen.slim { padding-bottom: 48px; }
.screen.slim + .screen.sys { padding-top: 64px; }
.hero2 { padding: 128px 0 112px; }
.hero2.small { padding: 112px 0 80px; }
.hero2 .shead { margin-bottom: 40px; }
.shead { margin-bottom: 64px; }
.shead h2 { margin-bottom: 20px; }
.shead .ssub, .sys-copy .ssub { line-height: 1.875rem; }
.proof { margin-top: 32px; gap: 12px 32px; }
.qtiles { margin-top: 80px; gap: 24px; }
.qtiles a { padding: 32px 28px; gap: 8px; }
.qtiles .qt-go { top: 32px; right: 28px; }
.sys-grid { gap: 96px; }
.sys-copy .ssub { margin-bottom: 40px; }
.mtiles { gap: 16px; }
.mtiles li { padding: 20px; }
.sys-more { margin-top: 40px; }
.srow { gap: 48px; }
.vs2 { gap: 32px; }
.vcard { padding: 40px; }
.vcard ul { gap: 20px; }
.pcards { gap: 32px; }
.pcard { padding: 40px; }
.ftiles { gap: 32px; }
.ftiles li { padding: 40px 32px; }
.pcards2 { gap: 24px; }
.pcards2 a { padding: 28px; }
.faq summary { padding-top: 24px; padding-bottom: 24px; }
.faq .a { padding-bottom: 28px; }
.split { gap: 96px; }
.clink { margin-top: 64px; }
.tagline { padding: 160px 0; }
footer.site { padding: 96px 0 48px; }
.f-top { gap: 96px; }
.f-bottom { margin-top: 80px; }

/* Blog posts: the bottom line first, then a calm, centered reading column. */
.bluf-wrap { padding: 64px 0 0; border-bottom: 0; }
.bluf { max-width: 720px; margin: 0 auto; padding: 32px 36px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--stone); }
:root[data-theme='light'] .bluf { background: var(--card); border-color: var(--card-line); }
.bluf-h { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; max-width: none; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.bluf-h .ico { width: 1rem; height: 1rem; vertical-align: 0; }
.bluf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bluf li { position: relative; padding-left: 24px; font-size: 1.125rem; line-height: 1.75rem; color: var(--ink); }
.bluf li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.post-body { padding: 64px 0 128px; border-bottom: 0; }
.article { max-width: 720px; margin: 0 auto; }
.article p, .article li { font-size: 1.125rem; line-height: 1.8; }
.article p { margin: 0 0 24px; }
.article ul, .article ol { margin: 0 0 24px; }
.article li + li { margin-top: 8px; }
.article h2 { margin: 80px 0 20px; font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.02em; }
.article h3 { margin: 48px 0 12px; font-size: 1.25rem; line-height: 1.75rem; }
.article blockquote { margin: 40px 0; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--stone); color: var(--ink-2); }
.article blockquote p:last-child { margin-bottom: 0; }
.post-cover { margin: 0 0 56px; }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--r-xl); }

@media (max-width: 1000px) {
  .sys-grid, .split { gap: 64px; }
}
@media (max-width: 720px) {
  .screen { padding: 88px 0; }
  .hero2 { padding: 88px 0 80px; }
  .hero2.small { padding: 72px 0 56px; }
  .shead { margin-bottom: 40px; }
  .qtiles { margin-top: 56px; gap: 16px; }
  .qtiles a { padding: 24px; }
  .vcard, .pcard, .ftiles li { padding: 28px 24px; }
  .tagline { padding: 112px 0; }
  .f-top { gap: 56px; }
  .bluf { padding: 24px; }
  .bluf-wrap { padding-top: 40px; }
  .post-body { padding: 48px 0 96px; }
  .article h2 { margin-top: 56px; font-size: 1.5rem; line-height: 2rem; }
}
@media (max-width: 1023px) { .top .theme-btn ~ .menu { margin-left: 8px; } }

/* Blog covers: a thumbnail on every card, the full cover on the post. */
.pcards2 a { padding: 0 0 28px; overflow: hidden; }
.pcards2 a > :not(.pc-img) { margin-left: 28px; margin-right: 28px; }
.pc-img { display: block; aspect-ratio: 1200 / 630; margin-bottom: 12px; border-bottom: 1px solid var(--line); background: #121210; overflow: hidden; }
.pc-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-fluid); }
@media (hover: hover) and (pointer: fine) { .pcards2 a:hover .pc-img img { transform: scale(1.03); } }
.pcards2 .qt-go { top: auto; bottom: 28px; right: 28px; }
.pcards2.feature a { padding: 0 0 32px; min-height: 0; }
.pcards2.feature a > :not(.pc-img) { margin-left: 32px; margin-right: 32px; }
.pcards2.feature .pill { margin-top: 8px; }
.pcards2.feature .pc-meta { order: 0; margin-top: 0; }
:root[data-theme='light'] .pcards2 a { background: var(--card); }
@media (max-width: 720px) {
  .pcards2 a > :not(.pc-img), .pcards2.feature a > :not(.pc-img) { margin-left: 20px; margin-right: 20px; }
}
/* Blog cards: the picture is the cue, so no corner arrow over the text. */
.pcards2 .pc-img ~ .qt-go { display: none; }
.post-cover img { border: 1px solid var(--line); }

/* ── proof (31 Oct 2026): before and after, cases, reviews, why now ── */
/* Before and after: two columns of timed steps that play in order. */
.mock.ease { max-width: 560px; }
.ease-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ease-col { padding: 20px 16px 40px; }
.ease-col + .ease-col { border-left: 1px solid var(--line); }
.ease-h { margin: 0 0 14px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ease-col.after .ease-h { color: var(--ink); }
.ease-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ease-col li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 8px; align-items: start; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-2); }
.ease-col li .ico { width: 1rem; height: 1rem; margin-top: 2px; color: var(--muted); }
.ease-col.after li { color: var(--ink); }
.ease-col.after li .ico { color: var(--ok); }
.ease-col li.ease-person .ico { color: var(--warn); }
.ease-col li em { display: block; font-style: normal; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.ease-total { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 2px; }
.ease-total span { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.ease-total b { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; color: var(--ink-2); }
.ease-col.after .ease-total b { color: var(--teal-ink); }
.ease-split > div:last-child { display: flex; justify-content: center; }
.ease-split.flip > div:first-child { order: 2; }
@media (max-width: 560px) {
  .ease-cols { grid-template-columns: 1fr; }
  .ease-col + .ease-col { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) { .ease-split.flip > div:first-child { order: 0; } }

/* Client case cards. */
.cases { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cases a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card, var(--paper)); color: var(--ink); text-decoration: none; transition: border-color 220ms var(--ease-fluid), transform 220ms var(--ease-fluid); }
.cases a:hover { border-color: var(--ink-2); }
.cases a:active { transform: scale(0.99); }
.cs-who { font-size: 0.8125rem; color: var(--muted); }
.cs-title { font-size: 1.25rem; line-height: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.cs-title .accent { color: var(--teal-ink); }
.cs-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-res span { display: grid; gap: 2px; font-size: 0.8125rem; line-height: 1.15rem; color: var(--muted); }
.cs-res b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; color: var(--ink); }
.cs-go { margin-top: auto; font-size: 0.875rem; font-weight: 500; }
.cs-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.cs-figs div { display: grid; gap: 4px; }
.cs-figs b { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.03em; }
.cs-figs span { font-size: 0.875rem; color: var(--muted); }
.cs-built .cgrid { grid-template-columns: 1fr; max-width: none; }
.cs-tools { max-width: 880px; margin: 40px auto 0; text-align: center; }

/* Reviews: real ones only. */
.reviews { list-style: none; margin: 48px auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.reviews li { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card, var(--paper)); }
.reviews blockquote { margin: 0 0 20px; }
.reviews blockquote p { margin: 0; font-size: 1.0625rem; line-height: 1.65rem; color: var(--ink); }
.reviews blockquote p::before { content: '\201C'; }
.reviews blockquote p::after { content: '\201D'; }
.rv-by { margin: auto 0 4px; font-size: 0.9375rem; }
.rv-by span { display: block; color: var(--muted); font-size: 0.875rem; }
.rv-src { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); }

/* Our own products, with a screenshot each. */
.own { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.own li { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--card, var(--paper)); display: flex; flex-direction: column; }
.own-img { display: block; border-bottom: 1px solid var(--line); }
.own-img img { display: block; width: 100%; height: auto; }
.own-body { padding: 24px 28px 28px; }
.own-body h3 { margin: 0 0 8px; font-size: 1.25rem; }
.own-body h3 a { color: var(--ink); text-decoration: none; }
.own-body p { margin: 0 0 10px; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink-2); }
.own-body .own-gap { margin: 0; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 760px) { .own { grid-template-columns: 1fr; } }

/* Who it's for: right for you, or not yet. */
.fit-vs { margin-top: 64px; }

/* Founder. */
.founder-photo { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 24px; border: 1px solid var(--line); }
.founder .figures { margin-top: 32px; }
#who-builds-it .source, #deep-parmar .source { margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }

/* Why now: cost and waiting bars. */
.costbars .gap-row, .waitbars .gap-row { grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem; }
.costbars .gap-bar i { min-width: 3px; }
.waitbars .gap-row:last-of-type .gap-bar i { background: var(--teal); }
.narrow-grid { margin-top: 48px; }
.wait-cost { margin: -4px 0 16px; font-size: 0.9375rem; font-weight: 600; color: var(--warn); }
/* These split columns hold text, not a centered mockup. */
.split.founder > div:last-child, #who-builds-it .split > div:last-child { display: block; }
.founder .figures, #who-builds-it .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cases, .reviews { grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; }
@media (max-width: 640px) { .cases, .reviews { grid-template-columns: 1fr; } }
/* Part of a department, or the whole one (1 Nov 2026). */
.scope .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .scope .pcards { grid-template-columns: 1fr; } }