/*
 * WUBS public website: shared styles (docs/plans/marketing-site-refresh.md, Phase 2c).
 * Light "Clear Water": limestone page, white surfaces, stone ink, teal-700 for water, amber-500 ONLY for the primary
 * call to action ("Request a demo" / "Get a quote"), and one deep-teal band (the contact section).
 * Loaded as /site/site.css?v=N by the marketing pages in pages/. Never loaded by the app.
 *
 * Sections: fonts · tokens · base · header/nav · mobile menu · buttons · layout/sections · hero · problem · steps/figures ·
 * roles · founder · switching · pricing · security · FAQ · contact band + form · footer · sticky mobile bar.
 */

/* ── Fonts (self-hosted; Phase B, B10) ───────────────────────────────────────
 * The same latin files Google Fonts served before (css2?family=Bricolage+Grotesque:opsz,wght@12..96,700&family=
 * Figtree:wght@400;500;600), from /site/fonts/, so the marketing pages make no requests to Google for fonts. The app
 * (public/index.html) still loads Google Fonts. Licence: SIL Open Font License 1.1, /site/fonts/OFL-*.txt.
 *  - bricolage-grotesque-700-latin.woff2: weight 700, optical-size axis 12–96 (sizes itself to the text).
 *  - figtree-latin.woff2: one variable file (weight axis) for 400, 500 and 600, declared three times as Google did.
 * The files are preloaded from pages/_chrome/head.html; the url() paths must match those preloads exactly.
 *
 * Metric-matched fallbacks, used for the moment before a font arrives (font-display: swap), so the swap moves
 * less. Started from fontTools numbers (the font files vs macOS's Arial / Arial Bold): size-adjust = the font's
 * average character width (English letter frequencies) ÷ Arial's; ascent/descent-override = the font's hhea
 * ascent/descent per em ÷ size-adjust; line gap 0. Then tuned in Chrome by counting elements whose line wrapping
 * differs between fallback-only and real fonts (6 pages × 1440/390, 1326 elements):
 *  - Figtree 400 vs Arial: computed 101.53% (avg width .4539 vs .4470), best measured 100.5% → ascent .950 → 94.53%,
 *    descent .250 → 24.88%. Figtree 600 vs Arial Bold: .4621 vs .4841 → 95.46%; ascent 99.52%, descent 26.19%.
 *  - Bricolage 700 vs Arial Bold: opsz 24 → 101.5%, opsz 36 → 100%, opsz 48 → 98.5%; 100% measured best → ascent
 *    .930 → 93%, descent .270 → 27%.
 * Body text keeps the Apple system font ahead of the Arial fallback: on Apple devices it was already the closer match
 * (16 wrap differences vs 25 for adjusted Arial and 35 for plain Arial), so there nothing changes; elsewhere
 * (Windows, where Arial is always present) the adjusted Arial is used before Segoe UI.
 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/site/fonts/bricolage-grotesque-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/site/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree Fallback';
  font-weight: 100 599;
  src: local('Arial'), local('ArialMT');
  size-adjust: 100.5%;
  ascent-override: 94.53%;
  descent-override: 24.88%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Figtree Fallback';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 95.46%;
  ascent-override: 99.52%;
  descent-override: 26.19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 100 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 100%;
  ascent-override: 93%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --page: #fafaf9;          /* limestone (stone-50) */
  --surface: #ffffff;
  --rule: #e7e5e4;          /* stone-200 */
  --rule-strong: #d6d3d1;   /* stone-300 */
  --ink: #1c1917;           /* stone-900 */
  --ink-2: #57534e;         /* stone-600 */
  --ink-3: #6b6560;         /* between stone-500/600: AA on the page and on the teal wash */
  --placeholder: #a8a29e;   /* stone-400: clearly lighter than typed text */
  --water: #0f766e;         /* teal-700 */
  --water-deep: #115e59;    /* teal-800 */
  --wash: #f0fdfa;          /* teal-50 */
  --wash-2: #ccfbf1;        /* teal-100 */
  --action: #f59e0b;        /* amber-500: primary CTA only */
  --action-hover: #fbbf24;  /* amber-400 */
  --deep: #0f1d1c;          /* the app's sidebar */
  --deep-ink: #d5e6e3;
  --deep-ink-2: #a9c4bf;
  --danger: #b91c1c;
  --success: #15803d;

  --display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Segoe UI', sans-serif;
  --body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Figtree Fallback', 'Segoe UI', sans-serif;
  --mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;   /* dollar columns (store) */

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --section-y: clamp(52px, 7vw, 92px);
  --radius: 12px;
  --shadow-shot: 0 1px 2px rgba(28, 25, 23, .06), 0 20px 44px -24px rgba(28, 25, 23, .35);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--water); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--water-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); max-width: 30ch; }
.split h2 { font-size: clamp(1.9rem, 2.9vw, 2.4rem); }
.nowrap { white-space: nowrap; }
h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; }
p, li { text-wrap: pretty; }
.lede { color: var(--ink-2); font-size: 1.2rem; max-width: 60ch; }
.muted { color: var(--ink-2); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Header / nav ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 250, 249, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 28px; height: 28px; }
.main-nav { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav-links a, .nav-phone, .nav-login {
  font-size: 1rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.nav-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.nav-phone { color: var(--ink); font-weight: 600; }
.nav-login { color: var(--water-deep); font-weight: 600; }
.nav-phone:hover, .nav-login:hover { text-decoration: underline; color: var(--ink); }
.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  font: 600 1rem/1 var(--body); color: var(--ink); background: transparent;
  border: 1.5px solid var(--rule-strong); border-radius: 10px; cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Mobile menu (below 1100px) ─────────────────────────────────────────── */
.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 40px -24px rgba(28, 25, 23, .3);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
.mobile-menu ul { list-style: none; padding: 8px var(--gutter) 20px; max-width: var(--wrap); margin: 0 auto; }
.mobile-menu li + li { border-top: 1px solid var(--rule); }
.mobile-menu a {
  display: flex; align-items: center; min-height: 52px; font-size: 1.1rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.mobile-menu a:hover { color: var(--water); }
.mobile-menu .menu-cta { padding-top: 14px; border-top: 0; }
.mobile-menu .menu-cta a { justify-content: center; }

@media (max-width: 1099.98px) {
  .main-nav, .nav-login { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-actions { margin-left: auto; }
}
@media (min-width: 1100px) {
  .mobile-menu { display: none; }
}
@media (max-width: 719.98px) {
  :root { --header-h: 64px; }
  .site-header .wrap { gap: 12px; }
  .nav-phone { display: none; }
  .site-header .btn { padding: 11px 14px; font-size: .98rem; }
  .nav-actions { gap: 10px; }
  .brand { font-size: 1.3rem; }
}
@media (max-width: 439.98px) {
  .menu-toggle { padding: 0 11px; }
  .menu-toggle .menu-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── Buttons and text links ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 22px; border-radius: var(--radius); border: 0;
  font: 600 1.05rem/1.1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-action { background: var(--action); color: var(--ink); box-shadow: 0 1px 0 rgba(28, 25, 23, .12); }
.btn-action:hover { background: var(--action-hover); color: var(--ink); }
.btn-action:active { box-shadow: inset 0 2px 0 rgba(28, 25, 23, .12); }
.btn-action[disabled] { opacity: .7; cursor: progress; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn-quiet:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.text-link {
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--wash-2); padding-bottom: 1px;
}
.text-link:hover { color: var(--ink); border-color: var(--water); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: var(--section-y) 0; }
.section-band { background: var(--surface); border-block: 1px solid var(--rule); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split > .split-head { display: grid; gap: 18px; }
@media (max-width: 899.98px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.badge {
  display: inline-block; margin-bottom: 22px; padding: 6px 14px; border-radius: 999px;
  background: var(--wash); border: 1px solid var(--wash-2); color: var(--water-deep);
  font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); line-height: 1.04; letter-spacing: -.025em; max-width: 15ch; }
.hero .lede { margin: 24px 0 32px; font-size: clamp(1.18rem, 1.6vw, 1.3rem); max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero-call { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hero-call:hover { color: var(--ink); text-decoration: underline; }
.hero-samples { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.assure { margin-top: 26px; color: var(--ink-3); font-size: 1rem; max-width: 48ch; }
.reply-note { margin-top: 12px; color: var(--ink-3); font-size: .95rem; }

.artifact { position: relative; margin: 0; padding: 0 0 64px 64px; }
.artifact .bill {
  width: 100%; max-width: 480px; margin-left: auto;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 28px 60px -28px rgba(28, 25, 23, .38);
  transform: rotate(2deg);
}
.artifact .phone { position: absolute; left: 0; bottom: 0; width: min(200px, 38%); transform: rotate(-3deg); }
.artifact figcaption {
  position: absolute; right: 0; bottom: 0; max-width: min(240px, 50%); text-align: right;
  font-size: 1rem; line-height: 1.4; color: var(--ink-3);
}
@media (prefers-reduced-motion: no-preference) {
  .artifact .phone { animation: phone-in .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
  @keyframes phone-in { from { transform: translateY(18px) rotate(-1deg); } to { transform: rotate(-3deg); } }
}
@media (max-width: 899.98px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .artifact { padding: 0 0 72px 44px; max-width: 540px; }
  .artifact .bill { transform: rotate(1.4deg); }
  .artifact .phone { width: 140px; }
  .artifact figcaption { max-width: min(220px, 52%); }
}
@media (max-width: 479.98px) {
  .artifact { padding: 0 0 96px 28px; }
  .artifact .phone { width: 118px; }
  .artifact figcaption { max-width: min(200px, 56%); }
}

/* ── Phone frame and screenshots (shared) ───────────────────────────────── */
.phone {
  background: #1c1917; border-radius: 30px; padding: 8px;
  box-shadow: 0 26px 50px -18px rgba(28, 25, 23, .5);
}
.phone img { width: 100%; border-radius: 23px; background: #fff; }
.shot {
  margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-shot);
}
.shot img { width: 100%; }
.shot.crop { aspect-ratio: var(--crop, 16 / 10); }
.shot.crop img { height: 100%; object-fit: cover; object-position: top left; }

/* ── The problem ────────────────────────────────────────────────────────── */
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); list-style: none; }
.problem-grid li { border-top: 3px solid var(--ink); padding-top: 18px; }
.problem-grid h3 { margin-bottom: 8px; }
.problem-grid p { color: var(--ink-2); }
.problem-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 1099.98px) { .problem-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 799.98px) { .problem-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── How a billing cycle runs (a real sequence, so it's numbered) ───────── */
.steps { display: grid; gap: clamp(56px, 5.5vw, 76px); list-style: none; counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step:nth-child(even) .step-text { order: 2; }
.step-num {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--water);
}
.step-num::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--wash); border: 1.5px solid var(--water); color: var(--water-deep); font-size: 1.05rem;
}
.step h3 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin-bottom: 14px; max-width: 22ch; }
.step p { color: var(--ink-2); max-width: 50ch; }
.ticks { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.ticks li::before {
  content: ''; position: absolute; left: 3px; top: .5em; width: 13px; height: 7px;
  border-left: 2.5px solid var(--water); border-bottom: 2.5px solid var(--water); transform: rotate(-45deg);
}
.step .more { margin-top: 18px; }

/* Figures inside steps */
.figure { position: relative; margin: 0; }
.figure-phones { display: flex; justify-content: center; gap: clamp(16px, 3vw, 36px); padding-bottom: 44px; }
.figure-phones .phone { width: min(220px, 44%); }
.figure-phones .phone:nth-child(2) { transform: translateY(44px); }
.figure-overlap { padding: 0 0 48px 0; }
.figure-overlap .overlay { position: absolute; right: -8px; bottom: 0; }
.figure-overlap .overlay.phone { width: min(170px, 30%); }
.figure-overlap .overlay.shot { width: 54%; }
.figure-overlap.left .overlay { right: auto; left: -8px; }
.figure-overlap .main { margin-right: 12%; }
.figure-overlap.left .main { margin: 0 0 0 12%; }
@media (max-width: 899.98px) {
  .step, .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .step:nth-child(even) .step-text { order: 0; }
  .figure-overlap .overlay { right: 0; }
  .figure-overlap.left .overlay { left: 0; }
}

/* ── Roles ──────────────────────────────────────────────────────────────── */
.roles-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
}
.roles-row li { padding: 24px 22px; border-left: 1px solid var(--rule); }
.roles-row li:first-child { border-left: 0; }
.roles-row h3 { font-size: 1.15rem; margin-bottom: 8px; }
.roles-row p { font-size: 1rem; color: var(--ink-2); line-height: 1.5; }
.roles-row a { display: inline-block; margin-top: 8px; font-size: 1rem; font-weight: 600; }
@media (max-width: 999.98px) {
  .roles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles-row li { border-left: 0; border-top: 1px solid var(--rule); }
  .roles-row li:nth-child(-n+2) { border-top: 0; }
  .roles-row li:nth-child(even) { border-left: 1px solid var(--rule); }
}
@media (max-width: 999.98px) {
  .roles-row li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 559.98px) {
  .roles-row li { padding: 18px 16px; }
  .roles-row h3 { font-size: 1.08rem; }
}
@media (max-width: 359.98px) {
  .roles-row { grid-template-columns: minmax(0, 1fr); }
  .roles-row li:nth-child(even) { border-left: 0; }
  .roles-row li:nth-child(2) { border-top: 1px solid var(--rule); }
}

/* ── Founder and endorsements ───────────────────────────────────────────── */
.founder { display: flex; gap: 20px; align-items: center; margin-top: 8px; }
.founder img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--rule); }
.founder-name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.founder-title { color: var(--ink-2); font-size: 1rem; }
.creds { list-style: none; display: grid; gap: 10px; }
.creds li { padding-left: 18px; position: relative; color: var(--ink-2); }
.creds li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--water); }
.endorse h3 { font-size: 1.2rem; }
.endorse-note { color: var(--ink-2); font-size: 1rem; margin: 6px 0 24px; max-width: 58ch; }
.endorse-list { display: grid; gap: 28px; }
.endorse-list figure { margin: 0; padding-left: 22px; border-left: 3px solid var(--wash-2); }
.endorse-list blockquote { font-size: 1.08rem; line-height: 1.6; }
@media (max-width: 599.98px) {
  .endorse-list figure:nth-child(3) { display: none; }   /* two are enough on a phone */
  .endorse-list { gap: 22px; }
}
.endorse-list figcaption { margin-top: 10px; font-size: 1rem; color: var(--ink-2); }
.endorse-list figcaption strong { color: var(--ink); font-weight: 600; }

/* ── Switching (the first three are a real timeline) ────────────────────── */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 9px; right: 16%; top: 9px; height: 2px;
  background: linear-gradient(90deg, var(--water), var(--wash-2));
}
.timeline li { position: relative; padding-top: 38px; }
.timeline li::before {
  content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--page); border: 3px solid var(--water);
}
.timeline li:last-child::before { background: var(--water); }
.timeline .when { font-weight: 600; color: var(--water-deep); font-size: 1rem; margin-bottom: 4px; }
.timeline h3 { margin-bottom: 8px; }
.timeline p { color: var(--ink-2); }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--rule); }
.promises h3 { margin-bottom: 8px; }
.promises p { color: var(--ink-2); }
@media (max-width: 799.98px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .timeline::before { left: 9px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--water), var(--wash-2)); }
  .timeline li { padding: 0 0 0 40px; }
  .promises { grid-template-columns: minmax(0, 1fr); }
}
/* One-time reveal for [data-reveal] timelines: site.js adds .is-armed (hidden start) and then .is-revealed when the
   list first scrolls into view. The line draws along its length, each marker springs in, and each step rises in turn
   (after the archived home page's onboarding steps). No motion, and nothing hidden, under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .timeline.is-armed::before { transform: scaleX(0); transform-origin: left center; }
  .timeline.is-armed li { opacity: 0; transform: translateY(28px); }
  .timeline.is-armed li::before { transform: scale(.3); }
  .timeline.is-armed.is-revealed::before { transform: none; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
  .timeline.is-armed.is-revealed li {
    opacity: 1; transform: none;
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
  }
  .timeline.is-armed.is-revealed li::before { transform: none; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
  .timeline.is-armed.is-revealed li:nth-child(1), .timeline.is-armed.is-revealed li:nth-child(1)::before { transition-delay: .1s; }
  .timeline.is-armed.is-revealed li:nth-child(2), .timeline.is-armed.is-revealed li:nth-child(2)::before { transition-delay: .4s; }
  .timeline.is-armed.is-revealed li:nth-child(3), .timeline.is-armed.is-revealed li:nth-child(3)::before { transition-delay: .7s; }
  @media (max-width: 799.98px) {
    .timeline.is-armed::before { transform: scaleY(0); transform-origin: center top; }
  }
}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.pricing { background: var(--wash); border-block: 1px solid var(--wash-2); }
.pricing .lede { color: var(--ink); }
.range { font-weight: 600; color: var(--water-deep); }
.terms { color: var(--ink-2); }
.included { list-style: none; background: var(--surface); border: 1px solid var(--wash-2); border-radius: 16px; padding: 8px 28px; }
.included li { position: relative; padding: 13px 0 13px 32px; border-bottom: 1px solid var(--rule); }
.included li:last-child { border-bottom: 0; }
.included li::before {
  content: ''; position: absolute; left: 4px; top: 1.3em; width: 13px; height: 7px;
  border-left: 2.5px solid var(--water); border-bottom: 2.5px solid var(--water); transform: rotate(-45deg);
}
.included-title { font-size: 1.2rem; margin: 0 0 4px; padding-top: 16px; }

/* ── Security and your money ────────────────────────────────────────────── */
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 48px); }
.facts li { border-top: 1px solid var(--rule-strong); padding-top: 16px; }
.facts h3 { font-size: 1.2rem; margin-bottom: 6px; }
.facts p { color: var(--ink-2); }
@media (max-width: 899.98px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--rule-strong); }
.faq-list details { border-bottom: 1px solid var(--rule-strong); }
.faq-list summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 17px 48px 17px 0; font-weight: 600; font-size: 1.12rem; line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2.5px solid var(--water); border-bottom: 2.5px solid var(--water); transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-list summary:hover { color: var(--water-deep); }
.faq-list summary:focus-visible { outline-offset: 2px; }
.faq-list .answer { padding: 0 48px 22px 0; color: var(--ink-2); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }

/* ── Contact band and demo form ─────────────────────────────────────────── */
.contact { background: var(--deep); color: var(--deep-ink); }
.contact h2 { color: #fff; }
.contact .lede { color: var(--deep-ink-2); }
.contact .direct { font-size: 1.1rem; line-height: 1.8; }
.contact .direct a { color: #fff; font-weight: 600; }
.contact .direct a:hover { color: var(--wash-2); }
.contact :focus-visible { outline-color: var(--action); }
.contact .demo-form :focus-visible { outline-color: var(--water); }

.demo-form {
  background: var(--surface); color: var(--ink); border-radius: 18px; padding: clamp(20px, 3vw, 32px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
}
.field { display: grid; gap: 6px; align-content: start; }
.field.full, .form-actions, .form-status { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 1rem; }
.field .opt { font-weight: 500; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; font: 400 1.05rem/1.4 var(--body); color: var(--ink);
  padding: 12px 14px; background: #fff; border: 1.5px solid var(--rule-strong); border-radius: 10px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #a8a29e; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(13, 148, 136, .15); outline: none; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 1rem; font-weight: 500; }
.field-error:empty { display: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-actions p { font-size: 1rem; color: var(--ink-2); }
.form-status { font-size: 1.05rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--danger); }
.form-status.is-success { color: var(--success); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 559.98px) { .demo-form { grid-template-columns: minmax(0, 1fr); } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { padding: 40px 0 44px; color: var(--ink-2); font-size: 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: flex-start; }
.site-footer address { font-style: normal; display: grid; gap: 4px; }
.site-footer .legal { color: var(--ink); font-weight: 600; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }

/* ── Sticky mobile bar ("Request a demo" + "Call") ─────────────────────── */
.sticky-cta { display: none; }
@media (max-width: 759.98px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Room for the bar only on pages that have one (Phase 3: training, legal and 404 pages have none). */
  body:has(> [data-sticky-cta]) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sticky-cta {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--rule);
    box-shadow: 0 -10px 30px -18px rgba(28, 25, 23, .35);
    visibility: hidden; transform: translateY(110%);
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .sticky-cta.is-shown { visibility: visible; transform: none; transition: transform .22s ease; }
  .sticky-cta .btn { flex: 1; }
  .sticky-cta .btn-quiet { flex: 0 0 auto; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .sticky-cta.is-shown, .mobile-menu, .mobile-menu.is-open { transition: none; }
}

/* Page-specific crops and spacing (classes, not inline styles, so a CSP never needs 'unsafe-inline') */
.crop-billing { --crop: 1000 / 420; }   /* hides the testing-only "backdate" hint below the period picker */
.crop-board { --crop: 1000 / 700; }
.section.flush-top { padding-top: 0; }

/* Phone-width tightening (kept last so it wins over the section rules above) */
@media (max-width: 599.98px) {
  .included { padding: 4px 18px; }
  .included li { padding: 10px 0 10px 30px; }
  .included li::before { top: 1.1em; }
  .hero-samples { margin-top: 18px; }
  .assure { margin-top: 20px; }
}
.field [aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(185, 28, 28, .15); }

/* ══ Feature and audience pages (Phase 2d): /meter-reading-app, /customer-portal-online-payments, … ══════════════
 * Same tokens and components as the home page. New here: breadcrumb, a smaller page hero, prose blocks, the grouped
 * footer, the closing call-to-action band, and one page-specific figure each (GPS distance scale, notice day track,
 * payment flow, packet stack, comparison table, checklist). */

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; font-size: 1rem; color: var(--ink-3); margin-bottom: 20px; }
.crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--rule-strong); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-3); }

/* Page hero */
.page-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(52px, 6vw, 84px); overflow: hidden; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Hero headline measures: max(Nch, …em) keeps the ch measure once Bricolage has loaded (its wide zero makes 1ch ≈ .64em,
 * so the em floor never wins there), but stops the fallback font's narrower zero from squeezing the box before the swap.
 * Without the floor the headline wrapped one line longer in the fallback and the whole hero jumped on swap (CLS). */
.page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.022em; max-width: max(17ch, 10.8em); }
.page-hero .lede { margin: 20px 0 30px; font-size: clamp(1.15rem, 1.5vw, 1.26rem); max-width: 46ch; }
.page-hero .assure { margin-top: 22px; }
.hero-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.5vw, 28px); padding-bottom: 36px; }
.hero-phones .phone { width: min(240px, 46%); }
.hero-phones .phone:nth-child(2) { transform: translateY(36px); }
.hero-phones.single .phone { width: min(270px, 64%); transform: rotate(1.5deg); }
.hero-shot { position: relative; padding-bottom: 40px; }
.hero-shot .overlay.phone { position: absolute; left: -12px; bottom: 0; width: min(160px, 32%); }
.hero-shot .main { margin-left: 14%; }
@media (max-width: 899.98px) {
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-shot .overlay.phone { left: 0; }
}

/* Prose and content blocks */
.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h3 { margin-top: 1.8em; }
.prose h3 + p { margin-top: .5em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.note { border-left: 3px solid var(--water); background: var(--wash); padding: 14px 18px; border-radius: 0 10px 10px 0; color: var(--ink); max-width: 66ch; }
.section-head .muted { max-width: 62ch; }
.split + .split { position: relative; margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(40px, 5vw, 56px); }
.split + .split::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--rule); }
.facts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 559.98px) { .facts.two { grid-template-columns: minmax(0, 1fr); } }
.timeline.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timeline.four::before { right: 12%; }
@media (max-width: 799.98px) { .timeline.four { grid-template-columns: minmax(0, 1fr); } }
.figure-note { margin-top: 12px; font-size: 1rem; color: var(--ink-3); }

/* Meter reading app: the GPS distance scale */
.gps-scale { margin-top: 8px; max-width: 560px; }
.gps-bar { display: grid; grid-template-columns: 3fr 5fr 4fr; height: 14px; border-radius: 999px; overflow: hidden; }
.gps-bar span:nth-child(1) { background: #16a34a; }
.gps-bar span:nth-child(2) { background: #f59e0b; }
.gps-bar span:nth-child(3) { background: #dc2626; }
.gps-marks { display: grid; grid-template-columns: 3fr 5fr 4fr; margin-top: 10px; font-size: 1rem; }
.gps-marks div { padding-right: 10px; }
.gps-marks div + div { border-left: 1.5px solid var(--rule-strong); padding-left: 10px; }
.gps-marks strong { display: block; color: var(--ink); font-weight: 600; }
.gps-marks span { color: var(--ink-2); line-height: 1.4; display: block; }
@media (max-width: 479.98px) {
  .gps-marks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gps-marks div, .gps-marks div + div { position: relative; border-left: 0; padding-left: 22px; }
  .gps-marks div::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: #16a34a; }
  .gps-marks div:nth-child(2)::before { background: #f59e0b; }
  .gps-marks div:nth-child(3)::before { background: #dc2626; }
}

/* Customer portal: where a payment goes */
.flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.flow li { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; }
.flow li:nth-child(2) { border-color: var(--water); box-shadow: 0 0 0 3px var(--wash); }
.flow li + li::before {
  content: ''; position: absolute; left: -21px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-right: 2.5px solid var(--water); border-bottom: 2.5px solid var(--water); transform: rotate(-45deg);
}
.flow h3 { font-size: 1.15rem; margin-bottom: 6px; }
.flow p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
@media (max-width: 799.98px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .flow li + li::before { left: 50%; top: -22px; margin: 0 0 0 -6px; transform: rotate(45deg); }
}

/* Board reports: the packet, page by page */
.packet { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 12px 0 24px; }
.packet img { width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 22px 44px -26px rgba(28, 25, 23, .45); }
.packet img:nth-child(1) { transform: rotate(-3deg) translate(14%, 6%); }
.packet img:nth-child(2) { position: relative; z-index: 2; transform: scale(1.12); }
.packet img:nth-child(3) { transform: rotate(3deg) translate(-14%, 6%); }
.num-list { list-style: none; display: grid; gap: 14px; counter-reset: num; }
.num-list li { padding-left: 42px; position: relative; color: var(--ink-2); }
.num-list li::before {
  counter-increment: num; content: counter(num);
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .95rem/1 var(--display); color: var(--water-deep);
  background: var(--wash); border: 1.5px solid var(--water);
}
.num-list strong { color: var(--ink); font-weight: 600; }

/* Switching: comparison table and checklist */
.compare { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; font-size: 1.02rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.compare thead th { background: var(--page); font-weight: 600; font-size: 1rem; letter-spacing: .03em; color: var(--ink-2); }
.compare tbody th { font-weight: 600; width: 24%; }
.compare td { color: var(--ink-2); }
.compare tr:last-child > * { border-bottom: 0; }
@media (max-width: 719.98px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .compare tbody tr { padding: 14px 18px; border-bottom: 1px solid var(--rule); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare td { padding: 0; border: 0; }
  .compare tbody th { width: auto; margin-bottom: 8px; font-size: 1.08rem; }
  .compare td + td { margin-top: 8px; }
  .compare td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--ink); font-size: 1rem; }
}
.checklist { list-style: none; display: grid; gap: 12px; max-width: 66ch; }
.checklist li { position: relative; padding-left: 36px; color: var(--ink-2); }
.checklist li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border: 2px solid var(--water); border-radius: 5px; background: var(--surface); }
.checklist strong { color: var(--ink); font-weight: 600; }

/* Who sees what (associations) */
.who { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.who li { padding: 22px 24px; border-top: 1px solid var(--rule); }
.who li:nth-child(-n+2) { border-top: 0; }
.who li:nth-child(even) { border-left: 1px solid var(--rule); }
.who h3 { font-size: 1.15rem; margin-bottom: 6px; }
.who p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
@media (max-width: 639.98px) {
  .who { grid-template-columns: minmax(0, 1fr); }
  .who li:nth-child(2) { border-top: 1px solid var(--rule); }
  .who li:nth-child(even) { border-left: 0; }
}

/* Related pages */
.related { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 48px); }
.related li { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.related a { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; text-decoration: none; color: var(--ink); }
.related a:hover { color: var(--water-deep); text-decoration: underline; }
.related p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
@media (max-width: 899.98px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .related { grid-template-columns: minmax(0, 1fr); } }

/* Closing call to action (the deep band, without the form) */
.cta-band { background: var(--deep); color: var(--deep-ink); padding: clamp(48px, 6vw, 76px) 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: var(--deep-ink-2); margin-top: 10px; max-width: 52ch; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cta-band .cta-actions a:not(.btn) { color: #fff; font-weight: 600; white-space: nowrap; }
.cta-band :focus-visible { outline-color: var(--action); }

/* Footer, grouped links (every marketing page) */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer .wrap.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px clamp(24px, 4vw, 56px); }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.footer-head { color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.footer-nav ul { list-style: none; display: grid; gap: 6px; }
.footer-nav a { line-height: 1.4; display: inline-block; }
@media (max-width: 899.98px) {
  .site-footer .wrap.footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.after-figure { margin-top: 24px; }
.media-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.media-split .phone { width: 100%; max-width: 240px; justify-self: center; }
.media-split .shot { align-self: start; }
@media (max-width: 899.98px) { .media-split { grid-template-columns: minmax(0, 1fr); } }
/* Links from the home page to the Phase 2d pages */
.link-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.roles-row a { display: block; width: fit-content; }
.roles-row a + a { margin-top: 4px; }
#switching .more { margin-top: 32px; }

/* ══ Phase 3 (docs/plans/marketing-site-phase-3.md): training, courses, doctrine, privacy, terms, 404 ═══════════════
 * Same tokens. New here: the training header's Cart button, a one-column page hero, legal documents, the training hub's
 * course index and course rows, the course price block and syllabus, the doctrine's long-form reading layout, the cart
 * toast, and print styles. Nothing is hidden until a script runs. */

/* Current section in the header */
.nav-links a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--water); text-decoration-thickness: 2px; }
.mobile-menu a[aria-current] { color: var(--water-deep); }

/* Training header: a quiet Cart button in place of "Request a demo" */
.nav-cart { gap: 8px; }
.cart-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--water); color: #fff; font: 600 .9rem/1 var(--body); font-variant-numeric: tabular-nums;
}
.cart-count:empty, .cart-count[data-n="0"] { display: none; }
.mobile-menu .menu-plain a { color: var(--water-deep); }

/* One-column page hero (legal pages, 404, doctrine) */
.page-hero.solo .wrap { grid-template-columns: minmax(0, 1fr); }
.page-hero.solo h1 { max-width: 22ch; }
.page-hero.solo .lede { max-width: 60ch; margin-bottom: 0; }
.updated { margin-top: 14px; color: var(--ink-3); font-size: 1rem; }

/* Legal documents (privacy, terms). Named .legal-doc: .site-footer .legal already exists. */
.legal-doc { max-width: 66ch; }
.legal-doc > * + * { margin-top: 1em; }
.legal-doc h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); max-width: none; margin-top: 2.2em; }
.legal-doc h2 + * { margin-top: .6em; }
.legal-doc p, .legal-doc li { color: var(--ink-2); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc ul { padding-left: 1.2em; }
.legal-doc li + li { margin-top: .5em; }
.section.legal-body { padding-top: 0; }

/* 404 */
.lost-code { color: var(--ink-3); font-size: 1rem; margin-bottom: 8px; }
.lost-list { margin-top: 8px; }

/* Training hub: the course index (the hero's bold element) */
.course-index { list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-shot); }
.course-index li + li { border-top: 1px solid var(--rule); }
.course-index a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline;
  padding: 20px 24px; color: var(--ink); text-decoration: none;
}
.course-index a:hover .ci-name { color: var(--water-deep); text-decoration: underline; }
.ci-name { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.ci-meta { grid-column: 1; color: var(--ink-2); font-size: 1rem; }
.ci-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--display); font-weight: 700; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.kin { margin-top: 22px; color: var(--ink-2); font-size: 1rem; }

/* Training hub: one row per course */
.course-rows { border-top: 1px solid var(--rule-strong); }
.course-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px clamp(32px, 5vw, 72px);
  padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--rule-strong);
}
.course-row h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.course-row h3 a { color: var(--ink); text-decoration: none; }
.course-row h3 a:hover { color: var(--water-deep); text-decoration: underline; }
.code-tag { font: 600 .95rem/1 var(--body); color: var(--water-deep); background: var(--wash); border: 1px solid var(--wash-2); border-radius: 6px; padding: 4px 8px; letter-spacing: .03em; }
.course-meta { color: var(--ink-3); font-size: 1rem; margin-top: 6px; }
.course-row .hook { font-size: 1.12rem; margin-top: 16px; max-width: 62ch; }
.course-row .outcome { color: var(--ink-2); margin-top: 12px; max-width: 62ch; }
.course-row .outcome strong { color: var(--ink); font-weight: 600; }
.mods { list-style: none; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; max-width: 640px; }
.mods li { font-size: 1rem; color: var(--ink); }
.mods .mod-code { display: inline-block; min-width: 3.6em; color: var(--water-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.mods .mod-stage { grid-column: 1 / -1; color: var(--ink-3); font-weight: 600; margin-top: 8px; }
.mods .mod-stage:first-child { margin-top: 0; }
.course-buy { display: grid; gap: 10px; align-content: start; justify-items: start; }
.price-now { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-note { color: var(--ink-2); font-size: 1rem; margin-bottom: 6px; }
.course-buy .btn { width: 100%; }
.course-dur { color: var(--ink-3); font-size: 1rem; }
.shared-note { margin-top: 28px; }
@media (max-width: 899.98px) {
  .course-row { grid-template-columns: minmax(0, 1fr); }
  .course-buy { grid-row: 2; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 18px; }
  .course-buy .price-now { grid-row: 1 / span 2; }
  .course-buy .btn, .course-buy .text-link, .course-buy .course-dur { grid-column: 1 / -1; }
  .course-buy .btn { max-width: 360px; }
}
@media (max-width: 559.98px) { .mods { grid-template-columns: minmax(0, 1fr); } }

/* Course pages: price block, facts, syllabus */
.course-code { color: var(--ink-2); font-size: 1rem; margin-bottom: 12px; }
.course-code b { color: var(--water-deep); font-weight: 600; margin-right: 6px; }
.course-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 1rem; color: var(--ink-2); margin-top: -6px; }
.course-facts li { white-space: nowrap; }
.course-facts li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--water); vertical-align: .18em; }
.price-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-shot);
  padding: clamp(22px, 3vw, 32px); max-width: 400px; width: 100%; justify-self: end;
}
.price-card .now { font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.price-card .per { color: var(--ink-2); font-size: 1rem; margin: 8px 0 20px; }
.price-card .btn { width: 100%; }
.price-card .small { margin-top: 16px; font-size: 1rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 899.98px) { .price-card { justify-self: start; } }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 6vw, 88px); }
.pair h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 14px; }
.pair p { color: var(--ink-2); max-width: 60ch; }
.pair p + p { margin-top: 1em; }
.pair strong { color: var(--ink); font-weight: 600; }
@media (max-width: 799.98px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.stage { font-weight: 600; color: var(--ink-3); margin: 28px 0 6px; }
.stage:first-child { margin-top: 0; }
.syllabus { list-style: none; border-top: 1px solid var(--rule-strong); }
.syllabus li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.syllabus .code { color: var(--water-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.syllabus .name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.tag { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: var(--wash); border: 1px solid var(--wash-2); color: var(--water-deep); font: 600 .9rem/1.4 var(--body); vertical-align: .15em; }
.cta-band .cta-note { font-size: 1rem; }
.cta-band .cta-note a { color: #fff; font-weight: 600; }

/* The Billing Operations Doctrine: long-form reading */
.doctrine { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.toc-side { position: sticky; top: calc(var(--header-h) + 24px); }
.toc-head { font-weight: 600; color: var(--ink); margin-bottom: 10px; font-size: 1rem; }
.toc ol { list-style: none; display: grid; gap: 2px; font-size: 1rem; line-height: 1.35; }
.toc a { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); padding: 6px 0; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc a span { color: var(--water); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc-drop { display: none; margin-bottom: 32px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.toc-drop summary { cursor: pointer; padding: 14px 18px; font-weight: 600; }
.toc-drop .toc { padding: 0 18px 12px; }
@media (max-width: 1099.98px) {
  .doctrine { grid-template-columns: minmax(0, 1fr); }
  .toc-side { display: none; }
  .toc-drop { display: block; }
}
.reading { max-width: 68ch; font-size: 1.1rem; line-height: 1.75; }
.reading p { color: var(--ink-2); }
.reading strong { color: var(--ink); font-weight: 600; }
.reading .note { font-size: 1.05rem; margin-bottom: 8px; }
.principle { position: relative; padding-top: 2.4em; scroll-margin-top: calc(var(--header-h) + 20px); break-inside: avoid; }
.principle h2 { font-size: 1.55rem; line-height: 1.2; max-width: none; margin-bottom: .7em; }
.principle p + p { margin-top: 1em; }
.p-num { display: block; margin-bottom: 6px; color: var(--water); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .p-num { position: absolute; left: -2.6rem; width: 2rem; text-align: right; margin: 0; }
  .reading { padding-left: 2.6rem; }
}
.doctrine-end { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--rule-strong); }
.doctrine-end h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); max-width: 26ch; margin-bottom: .6em; }
.doctrine-end .btn { margin-top: 1.4em; }
.ipline { margin-top: 2em; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }

/* Cart toast (/site/training.js): answers "Add to cart" */
.cart-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; gap: 12px; align-items: baseline;
  max-width: 420px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: 1rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--water); box-shadow: 0 18px 40px -18px rgba(28, 25, 23, .45);
  transform: translateY(calc(100% + 40px)); visibility: hidden;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .45s;
}
.cart-toast.show { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.cart-toast:hover { color: var(--ink); }
.cart-toast b { color: var(--water-deep); white-space: nowrap; text-decoration: underline; }
@media (max-width: 559.98px) { .cart-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .cart-toast, .cart-toast.show { transition: none; } }

/* ── Print (every marketing page; privacy, terms and the doctrine matter most) ── */
@media print {
  :root { --page: #fff; }
  body { background: #fff; color: #000; font-size: 11.5pt; padding: 0 !important; }
  .site-header, .mobile-menu, .skip-link, .sticky-cta, .footer-nav, .cta-band, .cart-toast, .nav-cart,
  .toc-side, .toc-drop, [data-add], .hero-cta, .course-buy .btn, .doctrine-end .btn { display: none !important; }
  .site-header { position: static; }
  .page-hero, .section { padding: 16pt 0; }
  .section-band { border: 0; }
  .wrap { max-width: none; padding: 0; }
  .doctrine { display: block; }
  .reading, .legal-doc, .prose { max-width: none; }
  .reading p, .legal-doc p, .legal-doc li, .prose p, .muted, .lede { color: #000; }
  .shot, .course-index, .price-card { box-shadow: none; }
  .principle, .faq-list details, .course-row, .legal-doc li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .legal-doc a[href^="http"]::after, .reading a[href^="http"]::after,
  .legal-doc a[href^="/"]::after, .reading a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .9em; color: #333; }
  .page-url { display: block !important; }
}
.page-url { display: none; margin-top: 1em; font-size: 1rem; color: var(--ink-3); }

/* ══ Website conversion plan, Phase A (docs/plans/website-conversion-plan.md A1/A4) ══════════════════════════════════
 * Home: the hero's phone button on phones, two mid-page call-to-action strips, the clerk line, the training band,
 * click-to-enlarge screenshots, and the demo form's optional questions and thank-you panel. Same tokens. */

/* Hero: "or call" link on wide screens; a full-size Call button on phones */
.hero-call .call-verb { display: none; }
@media (max-width: 719.98px) {
  .hero-call {
    display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 48px; padding: 13px 22px;
    border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--rule-strong); background: var(--surface);
  }
  .hero-call:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
  .hero-call .call-or { display: none; }
  .hero-call .call-verb { display: inline; }
}
@media (max-width: 559.98px) {
  .hero-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Mid-page call to action: a line under the section, one short sentence and the action */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px;
  margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(22px, 3vw, 30px); border-top: 3px solid var(--water);
}
.cta-strip-text {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2;
  letter-spacing: -.015em; max-width: 36ch; text-wrap: balance;
}
.cta-strip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.cta-strip-actions a:not(.btn) { font-weight: 600; font-size: 1rem; }
@media (max-width: 559.98px) {
  .cta-strip-actions { width: 100%; }
  .cta-strip-actions .btn { width: 100%; }
  .cta-strip-actions a.nowrap { white-space: normal; overflow-wrap: anywhere; }
}

/* A line for the person who does the billing */
.clerk-line {
  margin-top: clamp(28px, 4vw, 40px); padding-left: 18px; border-left: 3px solid var(--wash-2);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.3; max-width: 44ch;
}

/* Training band (home body) */
.section.training-band { padding: clamp(40px, 5vw, 60px) 0; border-top: 1px solid var(--rule); }
.training-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 48px; }
.training-band h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.training-band-text p { margin-top: 8px; color: var(--ink-2); max-width: 56ch; }

/* Screenshots that open full size */
.shot .zoom { display: block; height: 100%; cursor: zoom-in; }

/* Demo form: optional questions */
.demo-form[hidden] { display: none; }
fieldset.field { border: 0; min-width: 0; }
fieldset.field legend { font-weight: 600; font-size: 1rem; padding: 0; margin-bottom: 8px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.choice {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 13px;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; background: #fff;
  font-size: 1rem; font-weight: 500; line-height: 1.25; cursor: pointer;
}
.choice:hover { border-color: #a8a29e; }
.field .choice input { width: 18px; height: 18px; flex: none; margin: 0; padding: 0; border: 0; accent-color: var(--water); }
.field .choice input:focus { box-shadow: none; }
.choice:has(input:checked) { border-color: var(--water); background: var(--wash); color: var(--water-deep); }
.choice:has(input:focus-visible) { outline: 3px solid var(--water); outline-offset: 2px; }
.field .choice input:focus-visible { outline: 0; }

/* Demo form: the thank-you panel that replaces it */
.demo-thanks { background: var(--surface); color: var(--ink); border-radius: 18px; padding: clamp(24px, 3.4vw, 40px); }
.demo-thanks h3 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.55rem, 2.4vw, 1.95rem); }
.demo-thanks h3:focus { outline: none; }
.demo-thanks h3::before {
  content: ''; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--water);
  background: var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.demo-thanks [data-thanks-message] { margin-top: 14px; font-size: 1.1rem; }
.thanks-lead { margin-top: 22px; color: var(--ink-2); font-weight: 600; font-size: 1rem; }
.thanks-next { list-style: none; margin-top: 8px; display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 14px; }
.thanks-next li { position: relative; padding-left: 18px; color: var(--ink-2); }
.thanks-next li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--water); }
.thanks-next a { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .demo-thanks:not([hidden]) { animation: thanks-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes thanks-in { from { transform: translateY(14px) scale(.98); } to { transform: none; } }

@media print {
  .cta-strip, .training-band-link { display: none !important; }
}

/* ══ Website conversion, Phase B slice 1 (docs/plans/website-conversion-phase-b.md B1) ═══════════════════════════════
 * The header's two menus (Features, Who it's for) and the /demo page. The header markup comes from pages/_chrome/
 * (server/scripts/sync-site-chrome.js). The menus are disclosures (buttons + lists), never opened by hover once
 * site.js runs; without it (no [data-nav-ready]) the lists open on hover and keyboard focus so the links stay usable. */

/* Desktop menus */
.nav-group { position: relative; }
.nav-disclosure {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: 500 1rem/1.6 var(--body); color: var(--ink-2); white-space: nowrap;
}
.nav-disclosure::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .15s ease, margin .15s ease;
}
.nav-disclosure:hover, .nav-disclosure[aria-expanded="true"] { color: var(--ink); }
.nav-disclosure[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-group:has([aria-current="page"]) > .nav-disclosure { color: var(--ink); }
.nav-sub {
  position: absolute; top: calc(100% + 12px); left: -14px; z-index: 50; min-width: 290px;
  list-style: none; padding: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 22px 44px -22px rgba(28, 25, 23, .38);
}
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* hover bridge (no-JS) */
.nav-sub[hidden] { display: none; }
.nav-links .nav-sub a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); line-height: 1.35;
}
.nav-links .nav-sub a:hover { background: var(--wash); color: var(--water-deep); text-decoration: none; }
.nav-links .nav-sub a[aria-current] {
  background: var(--wash); color: var(--water-deep); font-weight: 600; text-decoration: none;
  box-shadow: inset 3px 0 0 var(--water);
}
.main-nav:not([data-nav-ready]) .nav-sub { display: none; }
.main-nav:not([data-nav-ready]) .nav-group:hover > .nav-sub,
.main-nav:not([data-nav-ready]) .nav-group:focus-within > .nav-sub { display: block; }
@media (prefers-reduced-motion: reduce) { .nav-disclosure::after { transition: none; } }

/* Mobile menu: two labelled groups, then the plain links */
.mobile-menu .menu-group { padding: 12px 0 4px; }
.mobile-menu .menu-group-label { font-size: 1rem; font-weight: 600; color: var(--ink-3); line-height: 1.4; }
.mobile-menu .menu-group ul { padding: 0; margin: 4px 0 0; max-width: none; }
.mobile-menu .menu-group a { font-weight: 500; }
@media (min-width: 640px) {
  .mobile-menu > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .mobile-menu > ul > li { grid-column: 1 / -1; }
  .mobile-menu > ul > .menu-group { grid-column: auto; border-top: 0; }
}

/* /demo: the page's hero is the form */
.demo-page { padding: clamp(28px, 4vw, 56px) 0 var(--section-y); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) {
  .demo-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 88px); row-gap: 0; align-items: start; }
  .demo-intro { grid-column: 1; grid-row: 1; }
  .demo-covers { grid-column: 1; grid-row: 2; }
  .demo-grid .demo-slot { grid-column: 2; grid-row: 1 / span 2; }
}
.demo-intro h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.022em; max-width: max(15ch, 9.5em); }   /* floor: see .page-hero h1 */
.demo-intro .lede { margin-top: 20px; max-width: 44ch; }
.demo-sub { font-size: 1.35rem; max-width: none; }
@media (min-width: 900px) { .demo-covers { margin-top: clamp(28px, 4vw, 40px); } }
.demo-covers .ticks { margin-top: 14px; }
.demo-direct { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-2); max-width: 44ch; }
.demo-direct a { font-weight: 600; }
.form-title { font-size: clamp(1.4rem, 2vw, 1.6rem); margin-bottom: 16px; }
.demo-page .demo-form, .demo-page .demo-thanks { border: 1px solid var(--rule); box-shadow: var(--shadow-shot); }
.demo-slot:has(> .demo-thanks:not([hidden])) > .form-title { display: none; }