/* axon.vet design system — the one stylesheet for every surface.
   Surfaces: marketing/storefront, signup+checkout, membership, the clinic's own app,
   the public front desk. One template set, three art directions, light + dark.
   Rules: no font downloads (system stacks only), no trackers, tokens live here and nowhere else.
   Art direction = `data-art` on <html>. Theme = `data-theme` (defaults to the OS).
   Tenant brand = `--t-*` (set per clinic from its row; the only saturated colour on screen). */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-2)/1.55 var(--font-ui); }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------- shared scale (direction-independent) */
:root {
  color-scheme: light dark;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* one scale, rem-based; directions change which step a role lands on */
  --fs--2: .6875rem; --fs--1: .75rem; --fs-0: .8125rem; --fs-1: .875rem; --fs-2: 1rem;
  --fs-3: 1.125rem; --fs-4: 1.375rem; --fs-5: 1.75rem; --fs-6: 2.25rem; --fs-7: 3rem; --fs-8: 3.75rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --maxw: 1180px; --maxread: 68ch;

  /* tenant brand defaults — overridden per clinic page from the tenant row */
  --t-accent: #3f7d62; --t-accent-hi: #58a184; --t-soft: #eaf2ee; --t-ink: #16301f;
  --t-mark: "S"; --t-name: "Stephens Veterinary";
  --t-radius: 10px;
}

/* In dark we do not ask the clinic for a second palette: the tint, the ink and the
   hover are derived from the one accent they picked. Set the tenant variables on :root
   (that is what "from the tenant row" means in the templates) and this holds. */
:root[data-theme="dark"] {
  --t-accent-hi: color-mix(in oklab, var(--t-accent) 55%, white);
  --t-soft: color-mix(in oklab, var(--t-accent) 22%, var(--surface));
  --t-ink: color-mix(in oklab, var(--t-accent) 32%, white);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-accent-hi: color-mix(in oklab, var(--t-accent) 55%, white);
    --t-soft: color-mix(in oklab, var(--t-accent) 22%, var(--surface));
    --t-ink: color-mix(in oklab, var(--t-accent) 32%, white);
  }
}

/* ------------------------------------------------ art direction 1 — signal
   App-first, cool neutral, dense, hairline rules. The chrome disappears so the
   tenant's own colour is the only saturation on screen. */
[data-art="signal"] {
  --bg: #fafafb; --surface: #ffffff; --surface-2: #f3f4f6; --rail: #101114; --rail-fg: #e9eaee;
  --line: #e4e6ea; --line-2: #d3d6dc; --fg: #15171a; --muted: #676d76; --faint: #9aa1ab;
  --accent: #0f766e; --accent-fg: #ffffff; --accent-soft: #e6f1f0;
  --ok: #15803d; --warn: #b45309; --soon: #7c3aed;
  --font-display: var(--font-ui);
  --h1: var(--fs-7); --h2: var(--fs-5); --h3: var(--fs-3); --ui: var(--fs-0); --body: var(--fs-2);
  --r1: 3px; --r2: 6px; --r3: 10px; --r-card: 8px;
  --pad-card: var(--s5); --gap: var(--s4); --row-h: 34px;
  --shadow: 0 1px 2px rgba(16,18,22,.05), 0 12px 32px -12px rgba(16,18,22,.14);
  --win-bar: #f6f7f8;
}
[data-art="signal"][data-theme="dark"],
[data-art="signal"][data-theme="light"] { color-scheme: dark; }
[data-art="signal"][data-theme="dark"] {
  --bg: #0e1013; --surface: #16181c; --surface-2: #1c1f24; --rail: #0a0b0d; --rail-fg: #dfe2e7;
  --line: #262a30; --line-2: #333840; --fg: #e9ebee; --muted: #98a0aa; --faint: #6f7883;
  --accent: #2dd4bf; --accent-fg: #06302b; --accent-soft: #14262a;
  --ok: #4ade80; --warn: #fbbf24; --soon: #c4b5fd;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  --win-bar: #1b1e23;
}
@media (prefers-color-scheme: dark) {
  [data-art="signal"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1013; --surface: #16181c; --surface-2: #1c1f24; --rail: #0a0b0d; --rail-fg: #dfe2e7;
    --line: #262a30; --line-2: #333840; --fg: #e9ebee; --muted: #98a0aa; --faint: #6f7883;
    --accent: #2dd4bf; --accent-fg: #06302b; --accent-soft: #14262a;
    --ok: #4ade80; --warn: #fbbf24; --soon: #c4b5fd;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
    --win-bar: #1b1e23;
  }
}

/* ------------------------------------------------ art direction 2 — hearth
   Warm paper, soft light, rounded, human. The front desk should feel like the
   waiting room, not the hospital. Slightly larger, slower type. */
[data-art="hearth"] {
  --bg: #fbf7f1; --surface: #fffdfa; --surface-2: #f4eee5; --rail: #2b241d; --rail-fg: #f2ece3;
  --line: #e8ded1; --line-2: #d8cabb; --fg: #241f1a; --muted: #6d6155; --faint: #9c8e7f;
  --accent: #b0512b; --accent-fg: #fff8f3; --accent-soft: #f7e6dc;
  --ok: #3f7d62; --warn: #a16207; --soon: #8b5cf6;
  --font-display: var(--font-serif);
  --h1: var(--fs-7); --h2: var(--fs-5); --h3: var(--fs-3); --ui: var(--fs-1); --body: var(--fs-2);
  --r1: 6px; --r2: 12px; --r3: 18px; --r-card: 16px;
  --pad-card: var(--s6); --gap: var(--s5); --row-h: 40px;
  --shadow: 0 1px 0 rgba(36,31,26,.04), 0 16px 40px -20px rgba(36,31,26,.25);
  --win-bar: #f6efe6;
}
[data-art="hearth"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #171310; --surface: #1f1a16; --surface-2: #272119; --rail: #100d0b; --rail-fg: #ece3d8;
  --line: #322a22; --line-2: #443a2e; --fg: #f0e9e0; --muted: #a89b8b; --faint: #7d7263;
  --accent: #f0a17c; --accent-fg: #2b1710; --accent-soft: #2e211a;
  --ok: #6fbb98; --warn: #e0b158; --soon: #c4b5fd;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 20px 44px -22px rgba(0,0,0,.7);
  --win-bar: #262019;
}
@media (prefers-color-scheme: dark) {
  [data-art="hearth"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171310; --surface: #1f1a16; --surface-2: #272119; --rail: #100d0b; --rail-fg: #ece3d8;
    --line: #322a22; --line-2: #443a2e; --fg: #f0e9e0; --muted: #a89b8b; --faint: #7d7263;
    --accent: #f0a17c; --accent-fg: #2b1710; --accent-soft: #2e211a;
    --ok: #6fbb98; --warn: #e0b158; --soon: #c4b5fd;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 20px 44px -22px rgba(0,0,0,.7);
    --win-bar: #262019;
  }
}

/* ------------------------------------------------ art direction 3 — ledger
   Editorial precision: white/steel, real rules instead of shadows, small caps
   labels, tabular figures everywhere a number appears. Reads like an invoice
   that a person who cares about details wrote. */
[data-art="ledger"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f6f8; --rail: #12161c; --rail-fg: #e6e9ee;
  --line: #d9dee4; --line-2: #b9c1cb; --fg: #0e1216; --muted: #5a6472; --faint: #8b95a3;
  --accent: #1f4d8f; --accent-fg: #ffffff; --accent-soft: #e9eff7;
  --ok: #166534; --warn: #92400e; --soon: #4338ca;
  --font-display: var(--font-serif);
  --h1: var(--fs-6); --h2: var(--fs-4); --h3: var(--fs-2); --ui: var(--fs-0); --body: var(--fs-1);
  --r1: 0px; --r2: 2px; --r3: 4px; --r-card: 2px;
  --pad-card: var(--s4); --gap: var(--s3); --row-h: 32px;
  --shadow: 0 1px 0 var(--line);
  --win-bar: #f2f4f6;
}
[data-art="ledger"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1014; --surface: #14181e; --surface-2: #1a1f26; --rail: #090b0e; --rail-fg: #dfe4ea;
  --line: #252b33; --line-2: #38414c; --fg: #e7ebf0; --muted: #98a3b0; --faint: #6f7b89;
  --accent: #82b4f5; --accent-fg: #08213d; --accent-soft: #16222f;
  --ok: #6ee7a8; --warn: #fcd34d; --soon: #a5b4fc;
  --shadow: 0 1px 0 var(--line);
  --win-bar: #181d23;
}
@media (prefers-color-scheme: dark) {
  [data-art="ledger"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1014; --surface: #14181e; --surface-2: #1a1f26; --rail: #090b0e; --rail-fg: #dfe4ea;
    --line: #252b33; --line-2: #38414c; --fg: #e7ebf0; --muted: #98a3b0; --faint: #6f7b89;
    --accent: #82b4f5; --accent-fg: #08213d; --accent-soft: #16222f;
    --ok: #6ee7a8; --warn: #fcd34d; --soon: #a5b4fc;
    --shadow: 0 1px 0 var(--line);
    --win-bar: #181d23;
  }
}

/* ----------------------------------------------------------- typography */
.display { font: 600 var(--h1)/1.06 var(--font-display); letter-spacing: -.02em; margin: 0; max-width: 20ch; }
[data-art="ledger"] .display { letter-spacing: -.01em; font-weight: 700; }
h1 { font: 600 var(--h1)/1.1 var(--font-display); letter-spacing: -.02em; margin: 0 0 var(--s4); }
h2 { font: 600 var(--h2)/1.2 var(--font-display); letter-spacing: -.015em; margin: 0 0 var(--s3); }
h3 { font: 600 var(--h3)/1.3 var(--font-display); margin: 0 0 var(--s2); }
h4 { font: 600 var(--fs-1)/1.3 var(--font-ui); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s4); max-width: var(--maxread); }
.lede { font-size: var(--fs-3); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.small { font-size: var(--fs--1); } .tiny { font-size: var(--fs--2); }
.caps { font: 600 var(--fs--2)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .94em; }
.quote { font: 500 var(--fs-3)/1.4 var(--font-display); color: var(--fg); border-left: 3px solid var(--t-accent);
         padding-left: var(--s4); margin: 0 0 var(--s4); max-width: 44ch; }

/* ---------------------------------------------------------- page skeleton */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--s5); }
.band { padding: var(--s8) 0; border-top: 1px solid var(--line); }
.band.tight { padding: var(--s6) 0; }
.band.alt { background: var(--surface-2); }
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: grid; gap: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; } .row.end { justify-content: flex-end; }
.spread { align-items: baseline; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* -------------------------------------------------------------- header/nav */
header.site { display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
              padding: var(--s4) 0; }
header.site.sticky { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--bg) 92%, transparent);
                     backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
nav.main { display: flex; gap: var(--s5); font-size: var(--fs-1); }
nav.main a { color: var(--muted); } nav.main a:hover, nav.main a[aria-current] { color: var(--fg); text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font: 700 1.06rem var(--font-ui);
         color: var(--fg); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: var(--accent-fg);
               display: grid; place-items: center; font: 800 12px/1 var(--font-mono); }
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s2); padding: .6rem 1rem; border-radius: var(--r2);
       border: 1px solid transparent; background: var(--accent); color: var(--accent-fg); font: 600 var(--fs-1) var(--font-ui);
       text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(.96); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--fg); }
.btn.quiet { background: transparent; color: var(--muted); border-color: transparent; padding: .4rem .6rem; }
.btn.sm { padding: .35rem .6rem; font-size: var(--fs--1); }
.btn.wide { width: 100%; justify-content: center; padding: .8rem 1rem; }
.btn .arrow { font-family: var(--font-mono); }

/* ------------------------------------------------------------ surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
        padding: var(--pad-card); box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.card.tight { padding: var(--s4); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.panel > .ph { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); display: flex;
               justify-content: space-between; align-items: center; gap: var(--s3); }
.panel > .pb { padding: var(--s4); }
.badge { display: inline-flex; align-items: center; gap: .35rem; font: 600 var(--fs--1) var(--font-ui);
         padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
         background: var(--surface); }
.badge.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, var(--line)); }
.badge.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, var(--line)); }
.chip { display: inline-block; font: 500 var(--fs--1) var(--font-ui); padding: .15rem .5rem; border-radius: var(--r1);
        background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.kbd { font: 600 var(--fs--2) var(--font-mono); border: 1px solid var(--line-2); border-bottom-width: 2px;
       border-radius: 4px; padding: .1rem .35rem; color: var(--muted); }
.note { font-size: var(--fs--1); color: var(--muted); border-left: 2px solid var(--line-2); padding-left: var(--s3); }

/* ------------------------------------------------------------- forms */
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field label { font: 600 var(--fs--1) var(--font-ui); color: var(--muted); }
.field input, .field select, .field textarea { padding: .6rem .7rem; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r2); color: var(--fg); width: 100%; }
.field input:focus { border-color: var(--accent); outline: none; }
.field .hint { font-size: var(--fs--1); color: var(--muted); }
.field .slug { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--r2);
               overflow: hidden; background: var(--surface); }
.field .slug input { border: 0; border-right: 1px solid var(--line-2); max-width: 22ch; }
.field .slug .suffix { padding: .6rem .7rem; background: var(--surface-2); color: var(--muted);
                       font: var(--fs-0) var(--font-mono); }
fieldset { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); margin: 0 0 var(--s4); }
legend { font: 600 var(--fs--1) var(--font-ui); color: var(--muted); padding: 0 var(--s2); }
.radio { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line);
         border-radius: var(--r2); margin-bottom: var(--s2); background: var(--surface); }
.radio input { margin-top: .25rem; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
th, td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 var(--fs--2) var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------- product window (proof) */
.win { border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--surface);
       box-shadow: var(--shadow); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
           background: var(--win-bar); border-bottom: 1px solid var(--line); }
.win-bar .dots { display: flex; gap: 5px; }
.win-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.win-bar .url { font: var(--fs--2) var(--font-mono); color: var(--muted); }
.win-body { padding: 0; background: var(--surface); }
.win-tab { font: 600 var(--fs--2) var(--font-ui); color: var(--muted); padding: .1rem .5rem; border-radius: var(--r1);
           background: var(--surface-2); }

/* ------------------------------------------------- app chrome (surface A) */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh; background: var(--bg); }
.app.railtop { grid-template-columns: 1fr; }
.rail { background: var(--rail); color: var(--rail-fg); padding: var(--s4) var(--s3); display: grid;
        align-content: start; gap: var(--s1); }
.rail a, .rail span { display: flex; align-items: center; gap: var(--s3); padding: .45rem var(--s3);
        border-radius: var(--r2); color: color-mix(in oklab, var(--rail-fg) 76%, transparent); text-decoration: none;
        font-size: var(--fs-0); }
.rail a:hover { background: color-mix(in oklab, var(--rail-fg) 8%, transparent); color: var(--rail-fg); }
.rail a[aria-current] { background: color-mix(in oklab, var(--t-accent) 26%, transparent); color: #fff; }
.rail .ic { width: 15px; opacity: .8; font-family: var(--font-mono); font-size: .8rem; }
.rail .sec { margin-top: var(--s4); }
.topbar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5);
          border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar .crumb { font-size: var(--fs-0); color: var(--muted); }
.brandchip { display: flex; align-items: center; gap: var(--s3); }
.brandchip .logo { width: 34px; height: 34px; border-radius: var(--t-radius); background: var(--t-accent);
                   color: #fff; display: grid; place-items: center; font: 700 15px/1 var(--font-ui);
                   letter-spacing: .02em; }
.brandchip .logo.img { background-image: var(--t-logo); background-size: cover; background-position: center; }
.brandchip .who { display: grid; }
.brandchip .who b { font: 600 var(--fs-1) var(--font-ui); letter-spacing: -.01em; }
.brandchip .who span { font: var(--fs--2) var(--font-mono); color: var(--muted); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--t-soft); color: var(--t-ink);
          display: grid; place-items: center; font: 700 var(--fs--1) var(--font-ui); }
.main-col { display: grid; align-content: start; }
.page { padding: var(--s5); display: grid; gap: var(--s5); }
.toolbar { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; }
.seg a { padding: .3rem .7rem; font-size: var(--fs--1); color: var(--muted); }
.seg a[aria-current] { background: var(--surface-2); color: var(--fg); }

/* ------------------------------------------------------- booking UI */
.week { display: grid; grid-template-columns: 46px repeat(5, 1fr); border: 1px solid var(--line);
        border-radius: var(--r2); overflow: hidden; background: var(--surface); }
.week > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 34px; }
.week > div:last-child { border-right: 0; }
.week .hd { background: var(--surface-2); padding: .3rem .4rem; font: 600 var(--fs--2) var(--font-ui);
            letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.week .hr { font: var(--fs--2) var(--font-mono); color: var(--faint); text-align: right; padding: .2rem .35rem;
            background: var(--surface-2); }
.slot { margin: 2px; padding: .25rem .35rem; border-radius: var(--r1); font: 600 var(--fs--2)/1.25 var(--font-ui);
        background: var(--t-soft); color: var(--t-ink); text-align: center;
        border: 1px solid color-mix(in oklab, var(--t-accent) 30%, var(--line)); }
.slot.bsy { background: color-mix(in oklab, var(--t-accent) 8%, var(--surface)); border-style: dashed;
        color: var(--faint); }
.slot.free { background: color-mix(in oklab, var(--t-accent) 20%, var(--surface)); cursor: pointer; }
.slot.on { background: var(--t-accent); color: #fff; border-color: var(--t-accent); }
.sched { display: grid; grid-template-columns: 54px 1fr; }
.sched .lane { border-left: 1px solid var(--line); display: grid; }
.appt { margin: 0 var(--s2) 2px; padding: .3rem var(--s2); border-radius: var(--r1); background: var(--t-soft);
        color: var(--t-ink); border-left: 3px solid var(--t-accent); display: grid; gap: 1px; }
.appt b { font: 600 var(--fs--1)/1.3 var(--font-ui); }
.appt span { font-size: var(--fs--2); color: color-mix(in oklab, var(--t-ink) 72%, transparent); }
.appt.voice { border-left-color: var(--accent); background: var(--accent-soft); }
.list { display: grid; }
.list .li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center;
            padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.list .li:last-child { border-bottom: 0; }
.list .li:hover { background: var(--surface-2); }
.timeline { display: grid; gap: 0; }
.timeline .t { display: grid; grid-template-columns: 74px 1fr; gap: var(--s3); padding: var(--s3) 0;
               border-bottom: 1px solid var(--line); }
.timeline .t time { font: var(--fs--1) var(--font-mono); color: var(--muted); }

/* ------------------------------------------------ transcript (agent proof) */
.transcript { display: grid; gap: var(--s3); }
.tline { display: grid; gap: var(--s1); max-width: 62ch; }
.tline .who { font: 600 var(--fs--2) var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.tline .said { padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--surface);
               border: 1px solid var(--line); font-size: var(--fs-1); }
.tline.agent .said { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 24%, var(--line)); }
.tline .meta { font: var(--fs--2) var(--font-mono); color: var(--faint); }

/* a ticked list of what is included — the price card's body */
.why { display: grid; gap: var(--s2); font-size: var(--fs-0); }
.why > div { display: grid; grid-template-columns: 18px 1fr; gap: var(--s3); }
.why > div > span:first-child { color: var(--t-accent); font-weight: 700; }

/* colour swatches in the branding editor */
.sw { display: flex; gap: var(--s2); }
.sw i { width: 26px; height: 26px; border-radius: var(--r1); border: 1px solid var(--line-2); }

/* the closing rule + small print on a ledger page */
.foot-note { border-top: 2px solid var(--fg); padding: var(--s3) 0; font-size: var(--fs--1); color: var(--muted); }
.reveal .tline { opacity: 0; transform: translateY(6px); animation: rise .5s forwards; }
.reveal .tline:nth-child(1) { animation-delay: .2s; } .reveal .tline:nth-child(2) { animation-delay: 1.3s; }
.reveal .tline:nth-child(3) { animation-delay: 2.6s; } .reveal .tline:nth-child(4) { animation-delay: 4s; }
.reveal .tline:nth-child(5) { animation-delay: 5.2s; } .reveal .tline:nth-child(6) { animation-delay: 6.2s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal .tline { animation: none; opacity: 1; transform: none; } }
.wave { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.wave i { width: 2px; background: currentColor; opacity: .55; animation: w 1.1s ease-in-out infinite alternate; }
.wave i:nth-child(2) { animation-delay: .1s } .wave i:nth-child(3) { animation-delay: .2s }
.wave i:nth-child(4) { animation-delay: .3s } .wave i:nth-child(5) { animation-delay: .15s }
.wave i:nth-child(6) { animation-delay: .25s } .wave i:nth-child(7) { animation-delay: .35s }
@keyframes w { from { height: 3px } to { height: 14px } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; height: 7px; } }

/* ------------------------------------------------ storefront patterns */
.hero { padding: var(--s8) 0 var(--s7); display: grid; gap: var(--s6); }
.hero-2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--s7); }
.stat { display: grid; gap: var(--s1); }
.stat b { font: 600 var(--fs-5)/1 var(--font-display); letter-spacing: -.02em; }
.stat span { font-size: var(--fs--1); color: var(--muted); }
.price { display: grid; gap: var(--s3); }
.price .amt { font: 600 var(--fs-6)/1 var(--font-display); letter-spacing: -.02em; }
.price .amt small { font-size: var(--fs-1); color: var(--muted); font-weight: 500; }
.steps { counter-reset: s; display: grid; gap: var(--s4); }
.steps > div { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: var(--s3); }
.steps > div::before { content: counter(s, decimal-leading-zero); font: 600 var(--fs-0) var(--font-mono);
  color: var(--accent); padding-top: .25rem; }
.compare { width: 100%; }
.faq { display: grid; gap: var(--s2); }
.faq details { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.faq summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 600; font-size: var(--fs-1); }
.faq details > div { padding: 0 var(--s4) var(--s4); color: var(--muted); font-size: var(--fs-1); }
footer.site { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s8); color: var(--muted);
              font-size: var(--fs--1); display: grid; gap: var(--s4); }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s5); }
footer.site a { color: var(--muted); }

/* --------------------------------------------------- front desk (surface B) */
.fd { max-width: 1040px; margin: 0 auto; padding: 0 var(--s5) var(--s9); }
.fd-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
           padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.fd-hero { display: grid; gap: var(--s4); padding: var(--s7) 0; }
.fd-grid { display: grid; grid-template-columns: 1.35fr .95fr; gap: var(--s6); align-items: start; }
.svc { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center;
       padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.svc:last-child { border-bottom: 0; }
.svc b { font-size: var(--fs-1); } .svc span { font-size: var(--fs--1); color: var(--muted); }
.svc a { color: var(--t-accent); }
.svc .cost { font: 600 var(--fs-1) var(--font-mono); font-variant-numeric: tabular-nums; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: .1rem var(--s4); font-size: var(--fs-1); }
.hours .d { color: var(--muted); } .hours .h { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hours .today { color: var(--t-accent); font-weight: 600; }
.phonelink { font: 600 var(--fs-3) var(--font-mono); color: var(--t-accent); letter-spacing: -.01em; }
.emergency { border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--line)); background: var(--surface);
             border-radius: var(--r-card); padding: var(--s4); }
.fab { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 30; }

/* ---------------------------------------------------------- theme switch */
.theme-switch { display: inline-flex; align-items: center; gap: var(--s2); font: var(--fs--1) var(--font-ui);
                color: var(--muted); }
.theme-switch button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px;
                       padding: .3rem .7rem; cursor: pointer; color: var(--muted); }
.theme-switch button[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); }

/* ----------------------------------------------------------- legacy aliases
   so the pages written before this system keep rendering */
:root { --bg-legacy: var(--bg); }
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5) var(--s8); }
.hero h1 { max-width: 22ch; }
.cta { display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-fg);
       text-decoration: none; padding: .7rem 1.3rem; border-radius: var(--r2); font-weight: 600; }
.cta.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .hero-2, .g3, .g4, .fd-grid, footer.site .cols { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: 1fr; }
  .rail { grid-auto-flow: column; overflow-x: auto; gap: var(--s2); }
  .rail .sec { margin-top: 0; }
  nav.main { display: none; }
  .display { font-size: var(--fs-6); }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .wrap, .narrow, .fd, .page { padding-left: var(--s4); padding-right: var(--s4); }
  .week { grid-template-columns: 40px repeat(2, 1fr); }
  .band { padding: var(--s6) 0; }
}