/* ===== tokens.css ===== */
/* Frostwave design tokens. The ONLY file allowed to contain a color value.
   build.py --check fails on a hex, rgb(), rgba(), hsl() or hsla() anywhere else in src/css.
   Palette: Ember into Steel (Frost projects/wiki/frostwave-brand-colors.md).
   Rules: light text and the logo sit on the dark or steel side only. Amber is a highlight
   (text on dark, or a soft glow), never a surface under light text. The primary button is a
   light pill with ink text. Ember and red are glows, lines and small marks, never a
   background for body text. Contrast for every pair we use is checked by
   .planning/phases/02-design-system-and-core-pages/contrast.py */

:root {
  /* ---------- Brand palette ---------- */
  --steel-900: #26303A;   /* gunmetal */
  --steel-700: #465C6E;   /* base steel */
  --steel-500: #748CA0;   /* mid steel */
  --steel-300: #9DB0BE;   /* light steel */
  --steel-100: #E4EBF0;   /* tinted light surface */
  --steel-050: #F3F6F8;   /* lightest surface */
  --ember: #FF5A1F;
  --signal-red: #E5322D;
  --oxblood: #7A1F2B;
  --amber-100: #FFE0B8;
  --amber-300: #FFC27A;
  --ink: #4A1A1F;         /* button ink */
  --paper: #F6F9FB;       /* the brand's "white", nudged toward steel (no pure white) */

  /* ---------- Semantic colors ---------- */
  --surface-dark: var(--steel-900);
  --surface-mid: var(--steel-700);
  --surface-light: var(--steel-050);
  --surface-light-2: var(--steel-100);
  --text-on-dark: var(--paper);
  --text-dim-on-dark: #DEE7EC;  /* kept bright enough to stay readable over the warm/steel glow corners */        /* secondary text on steel-900 and steel-700 */
  --text-on-light: var(--steel-900);
  --text-dim-on-light: #3A4D5C;       /* secondary text on light surfaces */
  --highlight: var(--amber-300);      /* highlight text, on dark surfaces only */
  --line-on-dark: rgba(246, 249, 251, 0.16);
  --line-on-light: rgba(38, 48, 58, 0.16);
  --focus-on-dark: var(--paper);
  --focus-on-light: var(--ink);
  /* Warm amber surface (homepage contrast pass, 2026-10-05): ink text on amber, oxblood for secondary text */
  --surface-warm: var(--amber-100);
  --text-on-warm: var(--ink);
  --text-dim-on-warm: var(--oxblood);
  --line-on-warm: rgba(74, 26, 31, 0.22);
  --focus-on-warm: var(--ink);

  /* ---------- Glass ---------- */
  --glass-fill: rgba(246, 249, 251, 0.10);
  --glass-fill-strong: rgba(38, 48, 58, 0.55);
  --glass-nav: rgba(38, 48, 58, 0.78);   /* nav and sticky bar: dark enough for light text over any section */
  --glass-border: rgba(246, 249, 251, 0.24);
  --glass-blur: 14px;
  --scrim: rgba(38, 48, 58, 0.55);

  /* ---------- Glows and gradients ---------- */
  --glow-ember: rgba(255, 90, 31, 0.96);
  --glow-red: rgba(229, 50, 45, 0.80);
  --glow-steel: rgba(157, 176, 190, 0.35);
  --glow-oxblood: rgba(122, 31, 43, 0.92);
  --glow-amber: rgba(255, 194, 122, 0.40);
  --glow-ember-soft: rgba(255, 90, 31, 0.58);
  --glow-steel-strong: rgba(116, 140, 160, 0.55);
  --glow-red-soft: rgba(229, 50, 45, 0.22);

  /* Mesh: soft light sources over base steel, kept dark enough for light text.
     Ember bottom-left, red left-middle, mid steel top-right, light steel bottom-right, oxblood top-left. */
  --grad-mesh:
    radial-gradient(70% 60% at 4% 100%, var(--glow-ember), transparent 72%),
    radial-gradient(45% 45% at 0% 55%, var(--glow-red), transparent 70%),
    radial-gradient(55% 60% at 100% 0%, rgba(116, 140, 160, 0.60), transparent 72%),
    radial-gradient(40% 45% at 100% 100%, var(--glow-steel), transparent 70%),
    radial-gradient(45% 45% at 0% 0%, var(--glow-oxblood), transparent 72%),
    linear-gradient(180deg, var(--steel-700), var(--steel-900));
  /* Moving mesh: two layers that drift in opposite directions as a section scrolls, over a gray steel base.
     Positions are given inside a layer that is 130 percent of the section, so the visible window is the middle 77 percent. */
  --mesh-base: linear-gradient(160deg, var(--steel-700) 0%, var(--steel-900) 100%);
  --scrim-left: linear-gradient(90deg, rgba(38, 48, 58, 0.62) 0%, rgba(38, 48, 58, 0.26) 48%, transparent 78%);
  --layer-warm:
    radial-gradient(88% 74% at 19% 90%, var(--glow-ember), transparent 74%),
    radial-gradient(58% 56% at 56% 104%, var(--glow-ember-soft), transparent 72%),
    radial-gradient(46% 48% at 86% 94%, var(--glow-ember-soft), transparent 72%),
    radial-gradient(38% 38% at 32% 12%, var(--glow-oxblood), transparent 72%);
  --layer-red-steel:
    radial-gradient(58% 55% at 11% 50%, var(--glow-red), transparent 70%),
    radial-gradient(52% 56% at 89% 11%, var(--glow-steel-strong), transparent 72%),
    radial-gradient(40% 44% at 89% 89%, var(--glow-steel), transparent 70%);
  --grad-calm: linear-gradient(160deg, var(--steel-700) 0%, var(--steel-900) 100%);
  --grad-calm-warm:
    radial-gradient(55% 45% at 0% 100%, var(--glow-ember-soft), transparent 72%),
    radial-gradient(40% 40% at 100% 0%, var(--glow-red-soft), transparent 70%),
    var(--grad-calm);
  --grad-deep: linear-gradient(180deg, var(--steel-900) 0%, var(--steel-900) 100%);
  /* Pricing section: a warm glow rising from the bottom of a light surface. Kept low so dark text above it holds contrast. */
  --grad-plans-glow:
    radial-gradient(80% 60% at 50% 112%, var(--glow-ember-soft), transparent 72%),
    radial-gradient(55% 45% at 50% 104%, var(--glow-amber), transparent 72%);
  --grad-glow-rise:
    radial-gradient(70% 60% at 50% 110%, var(--glow-ember), transparent 70%),
    radial-gradient(50% 45% at 50% 105%, var(--glow-amber), transparent 72%),
    radial-gradient(45% 50% at 16% 106%, var(--glow-red), transparent 70%);

  /* ---------- Typography ---------- */
  --font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: clamp(2.5rem, 1.15rem + 5.4vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.3125rem, 1.05rem + 1vw, 1.75rem);
  --fs-h4: 1.1875rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-caption: 0.875rem;

  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body: 1.65;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --measure: 66ch;

  /* ---------- Spacing (4px scale) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --section: clamp(72px, 10vw, 128px);
  --gutter: 20px;
  --wrap: 1200px;

  /* ---------- Radii ---------- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---------- Shadows (light surfaces only; dark surfaces use borders) ---------- */
  --shadow-light: 0 1px 2px rgba(70, 92, 110, 0.10), 0 12px 28px rgba(70, 92, 110, 0.14);
  --shadow-glass: 0 10px 40px rgba(38, 48, 58, 0.35);
  --shadow-button: 0 1px 2px rgba(38, 48, 58, 0.25), 0 8px 20px rgba(255, 90, 31, 0.20);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 50;
  --z-menu: 60;

  /* ---------- Sizes ---------- */
  --nav-h: 64px;
  --tap: 48px;
}

/* ===== reset.css ===== */
/* Intentional reset for the Frostwave design system. Replaces the Tailwind preflight snapshot from Phase 1. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s-6)); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
summary { display: list-item; cursor: pointer; }
a, button, summary, input, select, textarea { touch-action: manipulation; }
[hidden] { display: none !important; }

/* ===== base.css ===== */
/* Base: fonts, document, type, layout, surfaces. Every value comes from tokens.css. */

@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); }
/* Metric-matched fallback so the swap to Poppins does not move layout. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial");
  size-adjust: 112.67%;
  ascent-override: 93.2%;
  descent-override: 31.07%;
  line-gap-override: 8.88%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 { font-weight: var(--fw-medium); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
h1, .display { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }
p { max-width: var(--measure); text-wrap: pretty; }
strong { font-weight: var(--fw-semibold); }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); }
.dim { color: var(--dim); }
.highlight { color: var(--highlight); }
.measure { max-width: var(--measure); }

/* Links in running text */
p a, li a.inline, .prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (hover: hover) and (pointer: fine) {
  p a:hover, .prose a:hover { text-decoration-thickness: 2px; }
}

/* Focus: one visible ring everywhere, colour picked by the surface. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }
.section { padding-block: var(--section); position: relative; }
.section-tight { padding-block: calc(var(--section) * 0.6); position: relative; }
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

/* Surfaces. Each one sets the text pair for everything inside it. */
.surface-mesh, .surface-calm, .surface-calm-warm, .surface-gunmetal { --fg: var(--text-on-dark); --dim: var(--text-dim-on-dark); --line: var(--line-on-dark); --focus: var(--focus-on-dark); color: var(--fg); }
.surface-mesh { background: var(--scrim-left), var(--mesh-base); }
.surface-calm { background: var(--grad-calm); }
.surface-calm-warm { background: var(--grad-calm); }
.surface-gunmetal { background: var(--surface-dark); }
.surface-light, .surface-light-2 { --fg: var(--text-on-light); --dim: var(--text-dim-on-light); --line: var(--line-on-light); --focus: var(--focus-on-light); color: var(--fg); }
.surface-light { background: var(--surface-light); }
.surface-light-2 { background: var(--surface-light-2); }
.surface-warm { --fg: var(--text-on-warm); --dim: var(--text-dim-on-warm); --line: var(--line-on-warm); --focus: var(--focus-on-warm); color: var(--fg); background: var(--surface-warm); }
body { --focus: var(--focus-on-dark); --dim: var(--text-dim-on-dark); --line: var(--line-on-dark); }

/* Moving gradient sections. Two layers sit under the content and drift in opposite directions as the section scrolls
   through the screen (JS sets --p from 0 to 1). Only transform and opacity change. Without JS the layers rest at --p 0.5. */
.surface-mesh, .surface-calm-warm, .mesh-soft { position: relative; isolation: isolate; overflow: clip; }
.surface-mesh { --k: 1; }
.surface-calm-warm { --k: 0.88; }
.mesh-soft { --k: 0.55; }
.surface-mesh::before, .surface-mesh::after, .surface-calm-warm::before, .surface-calm-warm::after, .mesh-soft::before, .mesh-soft::after {
  content: ""; position: absolute; inset: -15%; z-index: -1; pointer-events: none; will-change: transform, opacity;
}
.surface-mesh::before, .surface-calm-warm::before, .mesh-soft::before {
  background: var(--layer-warm);
  opacity: calc((0.7 + var(--p, 0.5) * 0.5) * var(--k));
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * -14%), calc((var(--p, 0.5) - 0.5) * 12%), 0);
}
.surface-mesh::after, .surface-calm-warm::after, .mesh-soft::after {
  background: var(--layer-red-steel);
  opacity: calc((1.1 - var(--p, 0.5) * 0.5) * var(--k));
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * 12%), calc((var(--p, 0.5) - 0.5) * -10%), 0);
}

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--s-3); left: var(--s-3); z-index: var(--z-menu); padding: var(--s-3) var(--s-5); background: var(--paper); color: var(--ink); border-radius: var(--r-pill); font-weight: var(--fw-medium); transform: translateY(-200%); }
.skip-link:focus-visible { transform: translateY(0); outline-color: var(--ink); }

/* Page-load hook: the mobile sticky bar needs room at the bottom of the page. */
@media (max-width: 1039px) { body { padding-bottom: 72px; } }

/* ===== components.css ===== */
/* Components. Tokens only, no colors here. Interaction states on everything clickable:
   hover (gated to real hover devices), focus-visible (base.css), active (press feedback). */

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.01em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--glow-amber); transition: opacity var(--dur-base) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover::before { opacity: 1; }
  .btn:active { transform: scale(0.97); }
}
.btn-primary { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-button); }
.btn-primary:focus-visible { outline-color: var(--paper); }
.btn-ink { background: var(--steel-900); color: var(--paper); box-shadow: var(--shadow-button); }
.btn-glass { background: var(--glass-fill); color: var(--text-on-dark); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.btn-glass-dark { background: var(--glass-nav); color: var(--text-on-dark); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.btn-small { min-height: 44px; padding: 0 var(--s-5); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* Quiet text button */
.link-quiet { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: var(--fw-medium); text-decoration: none; }
.link-quiet span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .link-quiet:hover span { text-decoration-thickness: 2px; } }

/* ---------- Glass pill navigation ---------- */
.nav { position: fixed; z-index: var(--z-nav); top: var(--s-4); left: 0; right: 0; display: flex; justify-content: center; padding-inline: var(--s-4); pointer-events: none; transition: transform var(--dur-base) var(--ease-out); }
.nav.is-hidden { transform: translateY(calc(-100% - var(--s-6))); }
.nav__pill {
  pointer-events: auto; width: min(1120px, 100%); min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background: var(--glass-nav); border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass); color: var(--text-on-dark);
  --focus: var(--focus-on-dark);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; text-decoration: none; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; }
.nav__links { display: none; align-items: center; gap: var(--s-1); }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium); position: relative; }
.nav__links a::after { content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 8px; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav__links a.active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); } }
/* Book a Call stays on screen at all times. From 1040px it is its own glass button at the top right,
   so it stays put when the nav pill slides away. Below that, the bottom bar (sticky-cta) does the job. */
.book-fixed { display: none; }
.nav__menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-medium); border: 1px solid var(--glass-border); }
.nav__menu-btn:active { transform: scale(0.97); }
@media (min-width: 1040px) {
  .nav__pill { width: auto; gap: var(--s-6); padding-right: var(--s-5); }
  .nav__links { display: flex; }
  .nav__menu-btn { display: none; }
  .book-fixed { display: flex; position: fixed; z-index: var(--z-nav); top: var(--s-4); left: 0; right: 0; justify-content: center; padding-inline: var(--s-4); pointer-events: none; opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
  .book-fixed.is-hidden { opacity: 0; }
  .book-fixed__in { width: min(1120px, 100%); height: 62px; display: flex; align-items: center; justify-content: flex-end; }
  .book-fixed .btn { pointer-events: auto; min-height: 48px; }
  .book-fixed.is-hidden .btn { pointer-events: none; }
}

.menu-panel { overscroll-behavior: contain; position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); padding: var(--s-9) var(--s-6) var(--s-7); background: var(--glass-nav); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--text-on-dark); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); --focus: var(--focus-on-dark); }
.menu-panel.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-panel a:not(.btn) { display: block; padding: var(--s-3) 0; font-size: var(--fs-h3); font-weight: var(--fw-light); text-decoration: none; letter-spacing: var(--tracking-heading); }
.menu-panel__close { position: absolute; top: var(--s-4); right: var(--s-4); min-width: 44px; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--glass-border); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-medium); }

/* ---------- Mobile sticky Book a Call ---------- */
.sticky-cta {
  position: fixed; z-index: var(--z-sticky); left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
  padding: var(--s-2); padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
  background: var(--glass-nav); border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-glass);
  transform: translateY(160%); transition: transform var(--dur-base) var(--ease-out); --focus: var(--focus-on-dark);
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 1040px) { .sticky-cta { display: none; } }

/* ---------- Cards and lists ---------- */
.card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); background: var(--glass-fill); }
.surface-light .card, .surface-light-2 .card { background: var(--surface-light); box-shadow: var(--shadow-light); }
.plain-list { display: grid; gap: var(--s-3); }
.plain-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.plain-list li::before { content: ""; width: 8px; height: 8px; margin-top: 0.7em; border-radius: var(--r-pill); background: var(--ember); }

/* ---------- Steps (a real sequence, so numbered) ---------- */
.steps { display: grid; gap: var(--s-6); counter-reset: step; }
/* The steps descend like a staircase: each one sits further right than the one before. */
.steps { --stair: var(--s-5); }
.step { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
.step:nth-child(2) { margin-left: var(--stair); }
.step:nth-child(3) { margin-left: calc(var(--stair) * 2); }
.step__num { font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 200; line-height: 1; letter-spacing: var(--tracking-display); color: var(--dim); }
.step__body { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.step__body h3 { margin-bottom: var(--s-3); }
/* Step text is always readable (the blur-until-hover and +/x toggle were removed 2026-10-05, Abdullaah). */
@media (min-width: 900px) {
  .steps { --stair: 96px; }
  .step { grid-template-columns: 160px 1fr; gap: var(--s-6); }
}

/* ---------- Benchmarks (stats with sources) ---------- */
.stats { display: grid; gap: var(--s-7); }
.stat { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.stat__value { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: var(--fw-light); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.stat__text { margin-top: var(--s-4); }
.stat__source { margin-top: var(--s-3); font-size: var(--fs-caption); color: var(--dim); }
.stat__source a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }

/* ---------- FAQ ---------- */
.faq-tabs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
/* The active tab's fill slides up from below (transform only). The label colour swaps without a
   transition, delayed to land as the fill passes behind it, so no colour is ever animated. */
.faq-tabs__btn { position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--dim); font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); transition: color 0s linear 110ms, transform var(--dur-fast) var(--ease-out); }
.faq-tabs__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--steel-900); transform: translateY(101%); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .faq-tabs__btn:not(.is-active):hover { color: var(--fg); transition-delay: 0s; } }
.faq-tabs__btn:active { transform: scale(0.97); }
.faq-tabs__btn.is-active { border-color: var(--steel-900); color: var(--paper); }
.faq-tabs__btn.is-active::before { transform: translateY(0); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding-block: var(--s-4); font-size: var(--fs-h4); font-weight: var(--fw-medium); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
/* A plus drawn from two bars; it turns 45 degrees into a close mark when the answer is open. */
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding-bottom: var(--s-5); color: var(--dim); }
.faq__body p + p { margin-top: var(--s-3); }

/* ---------- Closing CTA with the rising glow ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-dark); color: var(--text-on-dark); --dim: var(--text-dim-on-dark); --line: var(--line-on-dark); --focus: var(--focus-on-dark); }
.cta-band__glow { position: absolute; inset: auto 0 0 0; height: 140%; z-index: -1; background: var(--grad-glow-rise); opacity: calc(0.22 + var(--p, 0) * 0.32); transform: translateY(calc((1 - var(--p, 0)) * 35%)); will-change: transform, opacity; pointer-events: none; }
.cta-band__inner { position: relative; display: grid; gap: var(--s-5); justify-items: start; padding-block: calc(var(--section) * 1.1); }
/* A flat, fixed-opacity scrim over the glow so heading and body text keep the same contrast at every point
   in the glow's scroll-driven rise. It spans the whole band, edge to edge: when it covered only the text
   column, the brighter glow outside it left a hard vertical seam on each side (fixed 2026-10-05).
   ::after paints after the glow div, so with the same z-index it sits above the glow and below the text. */
.cta-band::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--scrim); pointer-events: none; }
.cta-band__inner h2 { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-display); letter-spacing: var(--tracking-display); max-width: 16ch; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: var(--fw-medium); font-size: var(--fs-small); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--tap); padding: var(--s-3) var(--s-4); background: var(--surface-light); color: var(--text-on-light); border: 1px solid var(--line-on-light); border-radius: var(--r-sm); font-size: 1rem; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.field-note { font-size: var(--fs-caption); color: var(--dim); max-width: 60ch; }
.form-status { min-height: 1.5em; font-weight: var(--fw-medium); }
.form-status[data-state="error"] { color: var(--ink); }
.form-status[data-state="ok"] { color: var(--text-on-light); }

/* ---------- Footer ---------- */
.footer { background: var(--surface-dark); color: var(--text-on-dark); --dim: var(--text-dim-on-dark); --line: var(--line-on-dark); --focus: var(--focus-on-dark); border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-7); }
.footer__grid { display: grid; gap: var(--s-7); }
.footer__title { margin-bottom: var(--s-3); color: var(--dim); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0; line-height: var(--lh-body); }
.footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }
.footer__social a { gap: var(--s-3); }
.footer__social svg { flex: none; width: 20px; height: 20px; opacity: 0.75; transition: opacity 0.2s ease-out; }
.footer__social a:hover svg, .footer__social a:focus-visible svg { opacity: 1; }
.footer__note { max-width: none; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--dim); font-size: var(--fs-caption); }
@media (min-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }
/* Columns size to their content and share the spare width evenly, so the long email address does not widen one gap */
@media (min-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 17rem) repeat(4, auto); justify-content: space-between; } .footer__grid > :first-child { grid-column: auto; } }

/* ---------- Section heads and prose width ---------- */
.section-head { display: grid; gap: var(--s-3); max-width: 62ch; margin-bottom: var(--s-8); }
.narrow { max-width: 840px; }
.narrow > * + * { margin-top: var(--s-5); }



/* ---------- More systems ---------- */
.more { display: grid; gap: var(--s-6); }
.more li { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.more h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; margin-bottom: var(--s-2); }
.more p { color: var(--dim); }
@media (min-width: 720px) { .more { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); } }
@media (min-width: 1040px) { .more { grid-template-columns: repeat(3, 1fr); } }
.section-link { margin-top: var(--s-7); }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + var(--s-9)); padding-bottom: var(--s-9); }
.page-hero__inner { display: grid; gap: var(--s-5); justify-items: start; }
.page-hero__inner h1 { max-width: 18ch; }
.page-hero__sub { max-width: 52ch; font-size: var(--fs-h4); line-height: 1.6; color: var(--fg); }

/* ---------- Small shared bits ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reach { display: grid; gap: var(--s-1); }
.reach dt { color: var(--dim); margin-top: var(--s-4); font-size: var(--fs-caption); }
.reach dt:first-child { margin-top: 0; }
.reach dd { overflow-wrap: anywhere; }
@media (min-width: 640px) { .reach { grid-template-columns: max-content 1fr; gap: var(--s-3) var(--s-6); } .reach dt { margin-top: 0; font-size: inherit; } }
.reach dd { margin: 0; }
.reach a { min-height: 44px; display: inline-flex; align-items: center; }
.form-success { border: 1px solid var(--line-on-light); border-radius: var(--r-lg); padding: var(--s-6); }
.form-success h3 { margin-bottom: var(--s-3); }

/* Client review: one real quote, no card. Hanging marks, hairline rule before the name. */
.narrow > .review, .review { position: relative; margin: 0; }
.review__text { position: relative; margin: 0; padding: 0 clamp(1.75rem, 1rem + 3vw, 3rem); }
.review__text p { font-size: clamp(1.3125rem, 1.05rem + 1.1vw, 1.875rem); font-weight: var(--fw-light); line-height: 1.45; letter-spacing: -0.01em; max-width: none; }
.review__mark { fill: currentColor; color: var(--dim); opacity: 0.55; }
.review__mark--open { position: absolute; left: 0; top: 0.3em; width: clamp(1.125rem, 0.8rem + 1.3vw, 1.875rem); height: auto; }
.review__mark--close { display: inline-block; width: 0.8em; height: auto; margin-left: 0.3em; vertical-align: 0.35em; transform: rotate(180deg); }
.review__by { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-7); padding-left: clamp(1.75rem, 1rem + 3vw, 3rem); font-size: var(--fs-small); color: var(--dim); }
.review__rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.review__who { text-align: right; }
.review__name { font-weight: var(--fw-semibold); color: var(--fg); }
@media (max-width: 639px) { .review__sep { display: none; } .review__org { display: block; } }

/* ===== motion.css ===== */
/* Motion. Only transform, opacity and filter. Nothing here runs without a reason:
   1. the hero load  2. the text-focus block  3. step cards and system cards
   4. stat count-up (JS)  5. the closing glow rising (JS sets --p)  6. FAQ answers and categories.
   Everything is switched off by prefers-reduced-motion at the bottom. */

/* 1 and 3. Reveal: staggered by --i, arriving out of a soft blur. */
.js .reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

/* The hero arrives with CSS alone, so the headline never waits for JavaScript. */
.rise { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 1. Headline words rise out of a clip, one after another (site.js wraps them). The clip carries a
   little bottom padding so descenders on j, g and y are never cut. */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hw > span { display: inline-block; transform: translateY(110%); animation: hw-up 720ms var(--ease-out) forwards; animation-delay: calc(var(--w, 0) * 55ms + 60ms); }
@keyframes hw-up { to { transform: translateY(0); } }

/* Section headings with data-words wait until they scroll into view (site.js adds .is-in). */
.js [data-words]:not(.is-in) .hw > span { animation-play-state: paused; }

/* 7. Call demo. Without JS or with reduced motion the whole call shows, still. While playing, each step
   rises in; an AI reply shows a typing indicator first, then its text. */
.js .call-demo.is-playing [data-step] { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(3px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out), filter 480ms var(--ease-out); }
.js .call-demo.is-playing .bubble--ai { transform-origin: 100% 100%; }
.js .call-demo.is-playing .bubble--caller { transform-origin: 0 100%; }
.js .call-demo.is-playing [data-step].is-on { opacity: 1; transform: none; filter: blur(0); }
.js .call-demo.is-resetting [data-step] { transition-duration: 500ms; }
/* A reply starts as a small typing bubble in the corner, then the full bubble grows out of it. */
.bubble::before { transition: transform 460ms var(--ease-out), opacity 200ms var(--ease-out); }
.bubble__text { transition: opacity 320ms var(--ease-out) 90ms; }
.bubble__dots { transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-out); }
.bubble.is-typing::before { transform: scale(0.25, 0.4); opacity: 0; }
.bubble.is-typing .bubble__text { opacity: 0; transition-delay: 0s; }
.bubble.is-typing .bubble__dots { opacity: 1; transform: none; }
.bubble.is-typing .bubble__dots i { animation: dot-bob 1100ms var(--ease-in-out) infinite; }
.bubble.is-typing .bubble__dots i:nth-child(2) { animation-delay: 160ms; }
.bubble.is-typing .bubble__dots i:nth-child(3) { animation-delay: 320ms; }
@keyframes dot-bob { 0%, 55%, 100% { transform: translateY(0); opacity: 0.45; } 25% { transform: translateY(-4px); opacity: 1; } }

/* 8. A newly chosen plan settles in out of a light blur. */
.js [data-plan-panel].is-entering { animation: plan-in 420ms var(--ease-out); }
@keyframes plan-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* 6. An opened answer settles into place; a newly chosen category fades up. Height is never animated. */
.faq details[open] .faq__body { animation: faq-open var(--dur-base) var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-faq-panel]:not([hidden]) { animation: faq-panel-in 320ms var(--ease-out); }
@keyframes faq-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 2. Problem story lines. Plain text without JS; site.js scrollStory() turns them into the pinned
   scroll story (pages-home.css .ss) and keeps them as screen-reader text. */
.tf { display: grid; gap: var(--s-5); }
.tf-line { font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: 1.3; letter-spacing: var(--tracking-heading); max-width: 30ch; }
@media (min-width: 900px) { .tf-line { font-size: clamp(1.75rem, 1rem + 1.8vw, 2.625rem); max-width: 34ch; } }

/* Reduced motion: everything is visible, sharp and still. Opacity fades are kept only where they
   help comprehension, and there are none left, so nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .rise { opacity: 1; transform: none; filter: none; transition: none; animation: none; }
  .hw > span { transform: none; animation: none; }
  .faq details[open] .faq__body, [data-faq-panel]:not([hidden]) { animation: none; }
  .faq-tabs__btn, .faq-tabs__btn::before, .plan-switch__pill, .plan-switch button { transition: none !important; }
  .bubble__dots i, [data-plan-panel].is-entering { animation: none !important; }
  .nav, .btn, .btn::before, .nav__links a::after, .faq summary::after, .sticky-cta, .menu-panel, .book-fixed { transition: none !important; }
  .cta-band__glow { transform: none; opacity: 0.85; }
  .surface-mesh::before, .surface-mesh::after, .surface-calm-warm::before, .surface-calm-warm::after, .mesh-soft::before, .mesh-soft::after { transform: none !important; will-change: auto; }
  html { scroll-behavior: auto; }
}

/* ===== pages-about.css ===== */
/* About page layout only. */
.prose-grid { display: grid; gap: var(--s-6); }
.prose h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; margin-bottom: var(--s-2); }
.prose > * + * { margin-top: var(--s-6); }
@media (min-width: 900px) { .prose-grid { grid-template-columns: 1fr 2fr; gap: var(--s-8); align-items: start; } }

/* ===== pages-contact.css ===== */
/* Contact page layout only. */
.contact-grid { display: grid; gap: var(--s-8); grid-template-areas: "book" "form"; }
.contact-book { grid-area: book; display: grid; gap: var(--s-4); align-content: start; }
.contact-form { grid-area: form; display: grid; gap: var(--s-4); align-content: start; }
.cal__mount { display: grid; place-content: center; justify-items: center; gap: var(--s-4); height: 700px; padding: var(--s-6); text-align: center; border: 1px solid var(--line); border-radius: var(--r-lg); }
.cal.is-loaded .cal__mount { display: block; padding: 0; overflow: hidden; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "form book"; align-items: start; gap: var(--s-9); }
}
/* Social links in "Other ways to reach us": one row that wraps, each link keeps its 44px tap height */
.reach__socials { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }

/* ===== pages-home.css ===== */
/* Home page layout only. Every value comes from tokens.css; shared pieces live in components.css. */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + var(--s-9)); padding-bottom: var(--s-9); }
.hero__grid { display: grid; gap: var(--s-8); align-items: center; width: 100%; }
.hero__copy { display: grid; gap: var(--s-5); max-width: 46rem; }
.hero__sub { max-width: 46ch; font-size: var(--fs-h4); line-height: 1.6; color: var(--fg); }
.hero__cta { margin-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

/* ---------- Demo button: the hero's signature moment after the headline (D-11) ----------
   An ember slab, squared (no capsule), with a single light beam travelling round its edge. The beam is a
   rotating conic gradient behind a 2px inset fill, so only transform animates. The waveform moves on
   hover and keyboard focus, and plays once as the hero settles. Reduced motion: everything is still. */
.demo-cta {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  width: 100%; max-width: 30rem; padding: 2px; border-radius: var(--r-md);
  background: var(--oxblood); color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 4px var(--scrim), 0 26px 60px -22px var(--glow-ember);
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.demo-cta__beam {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 140%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--amber-100) 80%, transparent 92%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: demo-beam 5200ms linear infinite;
}
@keyframes demo-beam { to { transform: translate(-50%, -50%) rotate(360deg); } }
.demo-cta__fill {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  min-height: 84px; padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  border-radius: calc(var(--r-md) - 2px); background: var(--ember);
}
.demo-cta__mic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--ink); color: var(--ember); }
.demo-cta__text { display: grid; gap: 2px; min-width: 0; }
.demo-cta__label { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.01em; }
.demo-cta__cap { font-size: var(--fs-caption); line-height: 1.4; }
.demo-cta__wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.demo-cta__wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(0.3); transform-origin: 50% 50%; }
.demo-cta__wave i:nth-child(2), .demo-cta__wave i:nth-child(6) { transform: scaleY(0.55); }
.demo-cta__wave i:nth-child(3), .demo-cta__wave i:nth-child(5) { transform: scaleY(0.8); }
.demo-cta__wave i:nth-child(4) { transform: scaleY(1); }
.demo-cta__wave i { animation: demo-wave 640ms var(--ease-in-out) 1100ms 2 alternate; }
.demo-cta__wave i:nth-child(2n) { animation-delay: 1180ms; }
.demo-cta__wave i:nth-child(3n) { animation-delay: 1260ms; }
@keyframes demo-wave { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
/* Narrow phones: the caption needs the room more than the waveform does */
@media (max-width: 479px) {
  .demo-cta__fill { grid-template-columns: auto 1fr; padding-right: var(--s-4); }
  .demo-cta__wave { display: none; }
}
.demo-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.demo-cta:focus-visible .demo-cta__wave i { animation: demo-wave 640ms var(--ease-in-out) infinite alternate; }
.demo-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .demo-cta:hover { transform: translateY(-2px); }
  .demo-cta:hover .demo-cta__wave i { animation: demo-wave 640ms var(--ease-in-out) infinite alternate; }
  .demo-cta:hover .demo-cta__wave i:nth-child(2n) { animation-delay: 80ms; }
  .demo-cta:hover .demo-cta__wave i:nth-child(3n) { animation-delay: 160ms; }
  .demo-cta:active { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-cta { transition: none; }
  .demo-cta__beam { animation: none; transform: translate(-50%, -50%) rotate(35deg); }
  .demo-cta__wave i, .demo-cta:hover .demo-cta__wave i, .demo-cta:focus-visible .demo-cta__wave i { animation: none; }
}
/* ---------- Scroll story (problem section) ----------
   The section pins with CSS sticky and native scroll (no snap, no wheel hijack). site.js scrollStory() maps
   scroll to six steps: it sets .is-on on the caption and phone screen, flips small in-step states (.is-*)
   on the pin, and scrubs the tilt, glow and rail directly on those elements. Step changes are CSS
   transitions, so a fast scroll retargets instead of restarting. Without JS the plain .tf lines show. */
.ss-on { padding-block: 0; }
.ss-on .tf, .ss-on #problem-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ss { --ss-step: 85svh; position: relative; height: calc(100svh + 6 * var(--ss-step)); }
.ss__pin { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; align-items: center; padding-top: var(--nav-h); padding-bottom: calc(var(--tap) + var(--s-7)); } /* clears the bottom Book a Call bar */
.ss__glow { position: absolute; inset: 0; pointer-events: none; }
.ss__glow--warm { background: radial-gradient(46% 52% at 30% 62%, var(--glow-ember-soft) 0%, transparent 70%), radial-gradient(30% 36% at 12% 96%, var(--glow-oxblood) 0%, transparent 72%); }
.ss__glow--cool { opacity: 0; background: radial-gradient(50% 56% at 34% 46%, var(--glow-steel-strong) 0%, transparent 72%), radial-gradient(36% 40% at 88% 14%, var(--glow-steel) 0%, transparent 70%); }
.ss__grid { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--s-6); }
.ss__box { height: min(46svh, 420px); aspect-ratio: 440 / 900; perspective: 1400px; }
@media (min-width: 600px) { .ss__box { height: min(54svh, 560px); } }
.ss__tilt { width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.ss__buzz { width: 100%; height: 100%; }
.ss__copy { width: 100%; max-width: 34rem; text-align: center; }
.ss__caps { display: grid; }
.ss__cap { grid-area: 1 / 1; margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.5rem); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: var(--tracking-heading); text-wrap: balance; color: var(--fg); }
.ss__cap em { font-style: normal; color: var(--highlight); }
.ss__cap .w { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.ss__cap.is-on .w { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 640ms var(--ease-out); transition-delay: calc(var(--wi) * 26ms); }
.ss__rail { display: flex; gap: 6px; width: min(100%, 240px); margin: var(--s-5) auto 0; }
.ss__rail i { flex: 1 1 0; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line-on-dark); }
.ss__rail b { display: block; height: 100%; background: var(--highlight); transform: scaleX(0); transform-origin: 0 50%; }
@media (min-width: 900px) {
  .ss__grid { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: var(--s-9); }
  .ss__box { height: min(76svh, 720px); margin-left: clamp(0px, 4vw, 64px); }
  .ss__copy { max-width: 38rem; text-align: left; }
  .ss__cap { font-size: clamp(2rem, 0.9rem + 2.3vw, 3.25rem); line-height: 1.18; }
  .ss__rail { margin: var(--s-7) 0 0; }
}
@media (min-width: 1040px) { .ss__pin { padding-block: 0; } }

/* The phone: drawn on a fixed 440 x 900 canvas, scaled to .ss__box by site.js (transform only). */
.ssp { position: absolute; left: 0; top: 0; width: 440px; height: 900px; transform-origin: 0 0; padding: 12px; border-radius: 84px; background: var(--steel-900);
  box-shadow: inset 0 0 0 2px var(--glass-border), 0 70px 120px color-mix(in srgb, var(--oxblood) 40%, transparent), 0 18px 40px var(--scrim); }
.ss__box { position: relative; }
.ssp__screen { position: relative; width: 100%; height: 100%; border-radius: 72px; overflow: hidden; background: var(--steel-900); color: var(--paper); font-family: var(--font); }
.ssp__screen p { margin: 0; max-width: none; }
.ssp__screen svg { display: block; }
.ssp__island { position: absolute; left: 50%; top: 20px; width: 128px; height: 36px; margin-left: -64px; border-radius: 18px; background: var(--steel-900); z-index: 5; }
.ssp__scr { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); filter: blur(2px); transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out), filter 360ms var(--ease-out); }
.ssp__scr.is-on { opacity: 1; transform: none; filter: none; transition-duration: 480ms, 640ms, 480ms; }
.ssp__light { background: var(--steel-100); color: var(--steel-900); }
.ssp__h { position: absolute; left: 28px; top: 90px; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.ssp__row { position: absolute; left: 16px; width: 384px; padding: 24px 22px; border-radius: 28px; background: var(--paper); box-shadow: 0 12px 30px color-mix(in srgb, var(--steel-900) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--steel-900) 5%, transparent); }
.ssp__t { font-size: 26px; font-weight: 600; line-height: 1.25; }
.ssp__s { font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--text-dim-on-light); }
.ssp__bad { margin-top: 2px; font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--oxblood); }
/* things that arrive inside a step */
.ssp__in-step { opacity: 0; transform: translateY(24px); transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }
.ssp__in-step.is-in { opacity: 1; transform: none; }

/* lock */
.ssp__lock { background:
    radial-gradient(130% 70% at 15% 108%, var(--ember) 0%, color-mix(in srgb, var(--signal-red) 85%, transparent) 34%, transparent 72%),
    radial-gradient(130% 60% at 92% -8%, var(--steel-300) 0%, color-mix(in srgb, var(--steel-500) 70%, transparent) 40%, transparent 74%),
    linear-gradient(180deg, var(--steel-700) 0%, color-mix(in srgb, var(--steel-900) 70%, var(--oxblood)) 55%, var(--oxblood) 100%); }
.ssp__day { position: absolute; left: 0; top: 84px; width: 100%; text-align: center; font-size: 26px; font-weight: 500; }
.ssp__clock { position: absolute; left: 0; top: 146px; width: 100%; text-align: center; font-size: 128px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }

/* call */
.ssp__call { background: linear-gradient(180deg, var(--steel-700) 0%, var(--steel-900) 70%); }
.ssp__avatar { position: absolute; left: 123px; top: 150px; width: 170px; height: 170px; border-radius: 50%; background: var(--steel-500); display: grid; place-items: center; }
.ssp__caller { position: absolute; left: 0; top: 352px; width: 100%; text-align: center; font-size: 36px; font-weight: 600; }
.ssp__state { position: absolute; left: 0; top: 408px; width: 100%; height: 40px; font-size: 26px; font-weight: 500; }
.ssp__state span { position: absolute; inset: 0; text-align: center; transition: opacity 240ms var(--ease-out); }
.ssp__in { color: var(--text-dim-on-dark); }
.ssp__miss { color: var(--amber-300); opacity: 0; }
.ssp__btns { position: absolute; left: 0; top: 680px; width: 100%; display: flex; justify-content: center; gap: 96px; transition: opacity 300ms var(--ease-out); }
.ssp__btn { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--paper); }
.ssp__btn--end { background: var(--signal-red); }
.ssp__btn--ok { background: var(--steel-500); }
.is-missed .ssp__in { opacity: 0; }
.is-missed .ssp__miss { opacity: 1; }
.is-missed .ssp__btns { opacity: 0.35; }
.is-ringing .ss__buzz { animation: ss-buzz 1400ms linear infinite; }
@keyframes ss-buzz {
  0%, 36%, 100% { transform: translateX(0); }
  3%, 9%, 15%, 21%, 27%, 33% { transform: translateX(-4px); }
  6%, 12%, 18%, 24%, 30% { transform: translateX(4px); }
}

/* voicemail */
.ssp__vmrow { top: 170px; }
.ssp__top { display: flex; align-items: center; gap: 14px; }
.ssp__av { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: var(--steel-500); color: var(--paper); display: grid; place-items: center; }
.ssp__len { margin-left: auto; font-size: 22px; font-weight: 600; color: var(--text-dim-on-light); }
.ssp__wave { margin-top: 22px; height: 40px; display: flex; align-items: center; gap: 5px; }
.ssp__play { width: 34px; height: 34px; flex: 0 0 34px; margin-right: 8px; border-radius: 50%; background: var(--steel-900); color: var(--paper); display: grid; place-items: center; }
.ssp__wave i { width: 5px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--steel-900) 22%, transparent); }
.ssp__nomsg { margin-top: 16px; font-size: 23px; }
.ssp__vm .ssp__sk1 { top: 448px; height: 104px; }
.ssp__vm .ssp__sk2 { top: 566px; height: 104px; }

/* search */
.ssp__field { position: absolute; left: 16px; top: 168px; width: 384px; height: 68px; padding: 0 22px; border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--steel-900) 10%, transparent); display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; color: var(--text-dim-on-light); }
.ssp__field .ch { opacity: 0; white-space: pre; color: var(--steel-900); }
.ssp__field .ch.is-in { opacity: 1; }
.ssp__r1 { top: 268px; transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }
.ssp__r2 { top: 414px; transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }
.is-picked .ssp__r1 { opacity: 0.45; }
.is-picked .ssp__r2 { transform: scale(1.03); }
.ssp__ring { position: absolute; inset: -3px; border-radius: 31px; box-shadow: 0 0 0 3px var(--ember); opacity: 0; transition: opacity 300ms var(--ease-out); }
.ssp__stat { position: relative; height: 28px; margin-top: 4px; }
.ssp__stat span { position: absolute; left: 0; top: 0; font-size: 20px; font-weight: 600; white-space: nowrap; transition: opacity 240ms var(--ease-out); }
.ssp__calling { color: var(--text-dim-on-light); }
.ssp__up { color: var(--steel-900); opacity: 0; }
.is-picked .ssp__ring, .is-picked .ssp__up { opacity: 1; }
.is-picked .ssp__calling { opacity: 0; }
.ssp__skel { position: absolute; left: 16px; width: 384px; height: 126px; border-radius: 28px; background: color-mix(in srgb, var(--steel-900) 5%, transparent); }
.ssp__sk1 { top: 562px; }
.ssp__sk2 { top: 702px; }

/* follow-ups */
.ssp__frow { display: flex; align-items: center; gap: 18px; }
.ssp__fic { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 50%; background: var(--ember); color: var(--ink); display: grid; place-items: center; }
.ssp__fa { top: 176px; }
.ssp__fb { top: 376px; }

/* the week */
.ssp__cal { position: absolute; left: 16px; top: 172px; width: 384px; display: flex; gap: 10px; }
.ssp__col { flex: 1 1 0; }
.ssp__d { text-align: center; font-size: 18px; font-weight: 600; color: var(--text-dim-on-light); margin-bottom: 12px; }
.ssp__slot { position: relative; height: 172px; margin-bottom: 12px; }
.ssp__open, .ssp__job { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; font-size: 17px; font-weight: 600; }
.ssp__open { border: 2px dashed color-mix(in srgb, var(--steel-900) 22%, transparent); color: var(--text-dim-on-light); opacity: 0; transition: opacity 300ms var(--ease-out); }
.ssp__job { background: var(--ember); color: var(--ink); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.ssp__slot.is-gone .ssp__job { opacity: 0; transform: scale(0.9); }
.ssp__slot.is-gone .ssp__open { opacity: 1; }

/* Reduced motion: the same steps, told with opacity only */
@media (prefers-reduced-motion: reduce) {
  .ss__cap .w, .ss__cap.is-on .w { transform: none; transition-delay: 0ms; }
  .ssp__scr, .ssp__scr.is-on { transform: none; filter: none; }
  .ssp__in-step, .is-picked .ssp__r2, .ssp__slot.is-gone .ssp__job { transform: none; }
  .is-ringing .ss__buzz { animation: none; }
}
.hero__demo { display: grid; justify-items: center; gap: var(--s-3); }
/* On a computer the whole hero, phone included, fits in the first screen: it fills the viewport under
   the nav, and on shorter screens the phone scales down (zoom keeps its layout box honest). */
@media (min-width: 960px) {
  .hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + var(--s-5)); padding-bottom: var(--s-4); }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hero__demo { justify-items: end; }
  .call-demo, .call-demo__cap { width: 340px; }
  .hero #hero-title { font-size: min(var(--fs-display), 9.5svh); }
}
@media (min-width: 960px) and (max-height: 780px) { .call-demo, .call-demo__cap { zoom: 0.9; } }
@media (min-width: 960px) and (max-height: 718px) { .call-demo, .call-demo__cap { zoom: 0.82; } }
@media (min-width: 960px) and (max-height: 668px) { .call-demo, .call-demo__cap { zoom: 0.74; } }
@media (min-width: 960px) and (max-height: 619px) { .call-demo, .call-demo__cap { zoom: 0.66; } }

/* ---------- Call demo: an example after-hours call that plays in the hero ---------- */
.call-demo { margin: 0; width: 100%; max-width: 340px; display: grid; justify-items: center; }
/* The system the example call belongs to, named above the phone (no "Example call:" prefix, no pause control) */
.call-demo__cap { width: 100%; max-width: 340px; text-align: center; font-size: var(--fs-caption); color: var(--dim); }
.call-demo__cap a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .call-demo__cap a:hover { color: var(--highlight); } }

/* The device: a dark frame with a lit edge, a light app screen inside, layered shadows and a warm glow
   underneath so it sits above the gradient instead of on it. */
.phone { position: relative; width: 100%; padding: 10px; border-radius: 52px; background: var(--steel-900); box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 0 0 3px var(--steel-700), 0 2px 4px var(--scrim), 0 30px 70px -18px var(--scrim), 0 40px 90px -30px var(--glow-ember-soft); }
.phone__screen { --fg: var(--text-on-light); --dim: var(--text-dim-on-light); --line: var(--line-on-light); position: relative; display: flex; flex-direction: column; min-height: 600px; border-radius: 42px; overflow: hidden; background: var(--paper); color: var(--fg); }
.phone__status { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 6px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.phone__island { position: absolute; left: 50%; top: 10px; width: 92px; height: 27px; border-radius: var(--r-pill); background: var(--steel-900); transform: translateX(-50%); }
.phone__icons { display: flex; align-items: center; gap: 5px; }
.phone__home { position: absolute; left: 50%; bottom: 8px; width: 118px; height: 5px; border-radius: var(--r-pill); background: var(--steel-900); transform: translateX(-50%); }

.app-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface-light); }
.app-bar__back { display: grid; place-items: center; color: var(--steel-700); }
.app-bar__avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--ember); color: var(--ink); }
.app-bar__who { flex: 1; min-width: 0; }
.app-bar__name { font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.3; }
.app-bar__sub { font-size: 0.75rem; color: var(--dim); line-height: 1.3; white-space: nowrap; }
.app-bar__timer { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--dim); font-variant-numeric: tabular-nums; }

.app-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-6); }
.app-body__stamp { align-self: center; font-size: var(--fs-caption); color: var(--dim); }
.call-demo__log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }

/* Bubbles draw their background on ::before so a reply can grow out of its typing bubble with a transform. */
.bubble { position: relative; isolation: isolate; max-width: 82%; padding: 10px 14px; font-size: var(--fs-small); line-height: 1.4; }
.bubble::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; background: var(--bubble-bg); }
.bubble--ai { --bubble-bg: var(--steel-900); justify-self: end; color: var(--paper); }
.bubble--ai::before { border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.bubble--caller { --bubble-bg: var(--surface-light-2); justify-self: start; color: var(--fg); }
.bubble--caller::before { border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.bubble__dots { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 15px; border-radius: 20px 20px 6px 20px; background: var(--steel-900); opacity: 0; transform: scale(0.8); transform-origin: 100% 100%; pointer-events: none; }
.bubble__dots i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--paper); opacity: 0.6; }

.call-demo__booked { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-light); border: 1px solid var(--line); box-shadow: var(--shadow-light); }
.call-demo__check { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--ember); color: var(--ink); }
.call-demo__booked-title { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.call-demo__meta { font-size: var(--fs-caption); color: var(--dim); }
.call-demo__ctrl { min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--dim); font-family: inherit; font-size: var(--fs-caption); font-weight: var(--fw-medium); transition: transform var(--dur-fast) var(--ease-out); }
.call-demo__ctrl:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .call-demo__ctrl:hover { color: var(--fg); } }

/* ---------- Plans: one system at a time, chosen with a sliding switch ---------- */
/* The plans section hands over to the amber cohort band below it with no seam: its background fades from the
   light surface into the exact amber at its bottom edge, and the ember glow is masked out before it reaches
   that edge (a glow cut off by the next section reads as a hard split, 2026-10-05). */
.plans { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--surface-light) 0%, var(--surface-light) 58%, var(--surface-warm) 100%); }
.plans__glow { position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; background: var(--grad-plans-glow); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, var(--ink) 0%, var(--ink) 45%, transparent 92%); mask-image: linear-gradient(180deg, var(--ink) 0%, var(--ink) 45%, transparent 92%); }
.plans__head { display: grid; gap: var(--s-4); justify-items: center; text-align: center; margin-bottom: var(--s-7); }
.plans__head p { max-width: 52ch; }

.plan-switch { --plan: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(560px, 100%); margin: 0 auto var(--s-7); padding: var(--s-1); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-light); box-shadow: var(--shadow-light); }
.plan-switch__pill { position: absolute; top: var(--s-1); bottom: var(--s-1); left: var(--s-1); width: calc((100% - 2 * var(--s-1)) / 3); border-radius: var(--r-pill); background: var(--steel-900); transform: translateX(calc(var(--plan) * 100%)); transition: transform 460ms var(--ease-out); }
.plan-switch button { position: relative; z-index: 1; min-height: 48px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--dim); font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); transition: color 0s linear 150ms; }
.plan-switch button.is-active { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .plan-switch button:not(.is-active):hover { color: var(--fg); transition-delay: 0s; } }
.plan-switch button { white-space: nowrap; }
@media (max-width: 420px) { .plan-switch button { padding: 0 var(--s-1); font-size: var(--fs-caption); } }
html:not(.js) .plan-switch { display: none; }

.plan { display: grid; gap: var(--s-7); max-width: 1040px; margin: 0 auto; padding: var(--s-6); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-light); }
.plan + .plan { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .plan { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); padding: var(--s-7); }
}
.plan__name { font-size: var(--fs-h3); }
.plan__label { margin-top: var(--s-3); font-size: var(--fs-caption); color: var(--dim); }
.plan__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.plan__list li { position: relative; padding-left: calc(24px + var(--s-3)); line-height: 1.5; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--ember); }
.plan__list li::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(45deg); }
.plan__note { margin-top: var(--s-5); }
.plan__price { display: grid; gap: var(--s-2); padding: var(--s-6); border-radius: var(--r-md); background: var(--surface-light-2); }
.plan__tag { font-size: var(--fs-caption); color: var(--dim); }
.plan__amount { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: 1; letter-spacing: var(--tracking-display); }
.plan__per { margin-left: var(--s-1); font-size: var(--fs-h4); letter-spacing: 0; color: var(--dim); }
.plan__was { font-size: var(--fs-small); color: var(--dim); }
.plan__was s { display: block; text-decoration-thickness: 1px; }
.plan__price .btn { margin-top: var(--s-4); min-height: 56px; font-size: var(--fs-h4); }

.plans__more { display: grid; gap: var(--s-3); justify-items: start; max-width: 1040px; margin: var(--s-6) auto 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-light); }
.plans__more p { max-width: 72ch; }
@media (min-width: 900px) { .plans__more { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-7); } }

/* Demo link under Book a Call on each price card (Never-Miss: live demo; the others: their example walkthrough) */
.plan__demo { display: flex; justify-content: center; margin-top: var(--s-2); width: 100%; }

/* ===== pages-intake.css ===== */
/* ---------- Client intake (intake.html) ---------- */
/* One column; each numbered section is a step the owner fills in order. On wide screens the number gets its own column so the sequence reads down the left edge. */
.intake { max-width: 760px; color-scheme: light; }
.intake__form { gap: 0; }
.intake-sec { display: grid; gap: var(--s-5); padding-block: var(--s-8); border-top: 1px solid var(--line-on-light); }
.intake-sec:first-of-type { padding-top: 0; border-top: 0; }
.intake-sec__num { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: 1; color: var(--steel-500); }
.intake-sec__head { display: grid; gap: var(--s-3); }
.intake-sec__head h2 { font-size: var(--fs-h3); }
.intake-sec__head p { max-width: 60ch; }
.intake-sec__fields { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .intake { max-width: 880px; }
  .intake-sec { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--s-6); }
  .intake-sec__num { grid-row: 1 / span 2; }
}

.req { margin-left: var(--s-2); font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--text-dim-on-light); }

/* Tick boxes and radio buttons: the whole row is the tap target, the native control stays */
.choice-group { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group legend { margin-bottom: var(--s-3); padding: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.choices { display: grid; gap: var(--s-2); }
@media (min-width: 600px) { .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-4); background: var(--surface-light); color: var(--text-on-light); border: 1px solid var(--line-on-light); border-radius: var(--r-sm); cursor: pointer; line-height: 1.4; transition: transform var(--dur-fast) var(--ease-out); }
.choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--steel-900); cursor: pointer; }
.choice:has(input:checked) { background: var(--steel-100); border-color: var(--steel-700); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.choice:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--steel-500); } }
@media (prefers-reduced-motion: reduce) { .choice { transition: none; } .choice:active { transform: none; } }

.intake__send { display: grid; gap: var(--s-3); justify-items: start; padding-top: var(--s-7); border-top: 1px solid var(--line-on-light); }
@media (min-width: 900px) { .intake__send { padding-left: calc(4.5rem + var(--s-6)); } }

/* ===== pages-legal.css ===== */
/* Legal pages (privacy, terms, SMS terms): long reading text, so a narrow measure and quieter headings. */
.legal { max-width: var(--measure); }
.legal > * + * { margin-top: var(--s-4); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.legal h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; margin-top: var(--s-5); }
.legal ul { padding-left: var(--s-5); list-style: disc; }
.legal li + li { margin-top: var(--s-2); }
.legal-updated { font-size: var(--fs-small); color: var(--dim); }

/* ===== pages-service.css ===== */
/* Service pages (Never-Miss-A-Call, Show-Up, Cold Estimate Recovery). Layout only, tokens only.
   One bold moment per page: the demo block on the dark surface. Everything else stays quiet. */

.svc-h2 { margin-bottom: var(--s-6); max-width: 24ch; }
.svc-hero__price { font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: var(--tracking-heading); line-height: 1.25; }
.svc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.svc-status { max-width: 52ch; font-size: var(--fs-small); color: var(--fg); }

/* Two setups, split by one hairline instead of two cards */
.setup-choice { display: grid; gap: var(--s-6); }
.setup-choice__opt { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.setup-choice__opt h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }
@media (min-width: 760px) {
  .setup-choice { grid-template-columns: 1fr 1fr; gap: 0; }
  .setup-choice__opt { padding: var(--s-2) var(--s-7) var(--s-2) 0; border-top: 0; }
  .setup-choice__opt + .setup-choice__opt { padding: var(--s-2) 0 var(--s-2) var(--s-7); border-left: 1px solid var(--line); }
}

/* ---------- Demo block ---------- */
.demo { overflow: hidden; isolation: isolate; }
.demo::before { content: ""; position: absolute; inset: auto -10% -40% 30%; height: 90%; z-index: -1; background: var(--grad-glow-rise); opacity: 0.35; pointer-events: none; }
.demo__grid { display: grid; gap: var(--s-7); align-items: center; }
.demo__copy { display: grid; gap: var(--s-4); }
.demo__copy p { max-width: 52ch; color: var(--dim); }
.demo__action { display: grid; gap: var(--s-3); justify-items: start; }
.demo__note { font-size: var(--fs-caption); color: var(--dim); }
.demo__status { min-height: 3em; max-width: 44ch; font-size: var(--fs-small); }
.demo__status[data-state="error"] { color: var(--amber-300); }
.demo__status a { color: inherit; }
@media (min-width: 900px) { .demo__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-9); } }

/* The launcher: a squared slab, not a capsule. Paper on gunmetal is the strongest contrast on the page. */
.casey-launch {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  width: 100%; max-width: 460px; min-height: 84px; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-button), 0 24px 60px -24px var(--glow-ember-soft);
  font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-semibold); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out);
}
.casey-launch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glow-amber); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.casey-launch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.casey-launch:active { transform: scale(0.97); }
.casey-launch[disabled] { cursor: default; }
.casey-launch__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--ember); color: var(--ink); }
.casey-launch__label { transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.casey-launch__wave { display: flex; align-items: center; gap: 3px; height: 24px; }
.casey-launch__wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; opacity: 0.35; transform: scaleY(0.3); }
.casey-launch__wave i:nth-child(2), .casey-launch__wave i:nth-child(4) { transform: scaleY(0.55); }
.casey-launch__wave i:nth-child(3) { transform: scaleY(0.8); }
.casey-launch.is-loading .casey-launch__label { opacity: 0.6; filter: blur(1px); }
.casey-launch.is-loading .casey-launch__wave i { opacity: 0.8; animation: casey-wave 900ms var(--ease-in-out) infinite alternate; }
.casey-launch.is-loading .casey-launch__wave i:nth-child(2) { animation-delay: 120ms; }
.casey-launch.is-loading .casey-launch__wave i:nth-child(3) { animation-delay: 240ms; }
.casey-launch.is-loading .casey-launch__wave i:nth-child(4) { animation-delay: 360ms; }
.casey-launch.is-loading .casey-launch__wave i:nth-child(5) { animation-delay: 480ms; }
.casey-launch.is-ready .casey-launch__wave i { opacity: 0.8; }
@keyframes casey-wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@media (hover: hover) and (pointer: fine) {
  .casey-launch:not([disabled]):hover { transform: translateY(-1px); }
  .casey-launch:not([disabled]):hover::before { opacity: 1; }
  .casey-launch:not([disabled]):active { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .casey-launch, .casey-launch__label { transition: none; }
  .casey-launch.is-loading .casey-launch__wave i { animation: none; }
}

/* ---------- Example walkthrough (Show-Up, Cold Estimate): reuses the homepage phone and call-demo player ---------- */
.walk { display: grid; gap: var(--s-7); align-items: center; justify-items: center; }
.walk__copy { display: grid; gap: var(--s-3); justify-items: start; width: 100%; }
.walk__copy h2 { max-width: 18ch; }
.walk__fig { max-width: 340px; }
.walk__fig .phone__screen { min-height: 0; }
.walk__log > .app-body__stamp { justify-self: center; margin-top: var(--s-2); }
.walk__log > .app-body__stamp:first-child { margin-top: 0; }
/* On the customer's phone the business's messages arrive on the left and the customer's reply goes out on the right */
.bubble--in { --bubble-bg: var(--surface-light-2); justify-self: start; color: var(--fg); }
.bubble--in::before { border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.bubble--out { --bubble-bg: var(--steel-900); justify-self: end; color: var(--paper); }
.bubble--out::before { border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.js .call-demo.is-playing .bubble--in { transform-origin: 0 100%; }
.js .call-demo.is-playing .bubble--out { transform-origin: 100% 100%; }
@media (min-width: 900px) {
  .walk { grid-template-columns: 1fr auto; gap: var(--s-9); justify-items: stretch; }
  .walk__fig { width: 340px; }
}
.svc-proof { max-width: 72ch; margin-top: var(--s-7); }

/* ---------- Handoff and limits ---------- */
.handoff { display: grid; gap: var(--s-6); }
.handoff__col { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.handoff__col h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }
.handoff__col p { max-width: 52ch; }
@media (min-width: 760px) { .handoff { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* ---------- Price ---------- */
.price-block { display: grid; gap: var(--s-6); align-items: end; }
.price-block .svc-h2 { margin-bottom: var(--s-3); }
.price-block__amount { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: var(--tracking-display); margin-bottom: var(--s-2); }
.price-block__side { display: grid; gap: var(--s-4); justify-items: start; }
@media (min-width: 900px) { .price-block { grid-template-columns: 1.3fr 1fr; gap: var(--s-8); } }

/* ===== pages-services.css ===== */
/* Services page layout only. */
.svc { display: grid; gap: var(--s-6); padding-block: var(--s-7); border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc__copy { display: grid; gap: var(--s-4); align-content: start; }
.svc__facts { display: grid; gap: var(--s-1); align-content: start; }
.svc__facts dt { margin-top: var(--s-4); font-size: var(--fs-caption); color: var(--dim); }
.svc__facts dt:first-child { margin-top: 0; }
.svc__facts dd { margin: 0; }
.svc__price { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.25; letter-spacing: var(--tracking-heading); }
@media (min-width: 900px) { .svc { grid-template-columns: 1.4fr 1fr; gap: var(--s-8); } }

/* "Ask for it" / "Let the call find it" guidance, sits below the .more list */
.custom-ways { display: grid; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.custom-ways h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; margin-bottom: var(--s-2); }
@media (min-width: 900px) { .custom-ways { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* ===== pages-state.css ===== */
/* State pages (DC, Maryland, Virginia, West Virginia) and the "Areas we serve" hub. Layout only, tokens only.
   Each local fact is a row led by its own figure in display type. The figures differ per state (a temperature,
   a consent rule, a count, a year), so every page reads differently without a separate template. */

.state-hero__remote { max-width: 56ch; font-size: var(--fs-small); color: var(--fg); }

.state-facts { display: grid; }
.fact { display: grid; gap: var(--s-4); padding-block: var(--s-7); border-top: 1px solid var(--line); }
.fact:first-child { border-top: 0; padding-top: 0; }
.fact:last-child { padding-bottom: 0; }
.fact__figure { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: var(--fw-light); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--fg); }
.fact__unit { display: block; margin-top: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: 1.4; letter-spacing: 0; color: var(--dim); }
.fact__body { display: grid; gap: var(--s-3); align-content: start; max-width: 62ch; }
.fact__body h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }
.fact__source { font-size: var(--fs-caption); line-height: 1.5; color: var(--dim); }
.fact__source a { color: var(--fg); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .fact__source a:hover { color: var(--highlight); } }
@media (min-width: 860px) {
  .fact { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--s-8); }
}

/* The system that fits this area: the page's one dark band */
.state-feature__inner { display: grid; gap: var(--s-6); align-items: end; }
.state-feature__inner h2 { max-width: 20ch; }
.state-feature__inner p { max-width: 52ch; }
.state-feature__side { display: grid; gap: var(--s-3); justify-items: start; }
.state-feature__price { font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: var(--tracking-heading); line-height: 1.2; }
.state-feature__side .link-quiet { color: var(--fg); }
@media (min-width: 900px) { .state-feature__inner { grid-template-columns: 1.3fr 1fr; gap: var(--s-9); } }

/* All nine systems: a plain link list, three columns on wide screens */
.state-systems { display: grid; column-gap: var(--s-7); }
.state-systems a { display: flex; align-items: center; min-height: 52px; padding-block: var(--s-2); border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; font-weight: var(--fw-medium); }
.state-systems a span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.state-systems a:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .state-systems a:hover span { text-decoration-color: currentColor; } }
.state-systems__note { margin-top: var(--s-5); max-width: 60ch; }
@media (min-width: 640px) { .state-systems { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .state-systems { grid-template-columns: 1fr 1fr 1fr; } }

/* Hub: one row per area, the area name set large as its own figure */
.area-list { display: grid; }
.area { display: grid; gap: var(--s-3); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.area:first-child { border-top: 0; padding-top: 0; }
.area h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); letter-spacing: var(--tracking-display); line-height: 1.1; }
.area p { max-width: 56ch; }
@media (min-width: 860px) { .area { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; gap: var(--s-7); align-items: center; } }
.area-intro { margin-bottom: var(--s-8); }