/* Arizona Front Desk — site styles (design system v2, docs/DESIGN_SYSTEM.md, D23)
   One file, no build. Tokens first, then base, then components, then motion. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --paper: #F7F3EA;
  --ink: #1B1F1D;
  --ink-rgb: 27 31 29;
  --ink-70: rgb(27 31 29 / .70);
  --ink-50: rgb(27 31 29 / .50);
  --ink-30: rgb(27 31 29 / .30);
  --ink-12: rgb(27 31 29 / .12);
  --sand: #EAE2D2;
  --turquoise: #1E9E90;
  --turquoise-deep: #15786D;
  --turquoise-light: #3FC9B9;
  --copper: #8A3F23;
  --copper-light: #F1DCCD;
  --paper-on-dark: #F7F3EA;
  --paper-70: rgb(247 243 234 / .70);
  --paper-50: rgb(247 243 234 / .50);
  --paper-30: rgb(247 243 234 / .30);
  --paper-12: rgb(247 243 234 / .14);
  --alert: #C2402A;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --frame: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(80px, 11vw, 144px);
  --r-band: 40px;
  --r-card: 20px;
  --r-node: 12px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-enter: 700ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: clamp(44px, 7vw, 84px); line-height: 0.98; font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; font-variation-settings: "opsz" 72; }
h3 { font-size: 26px; line-height: 1.2; font-variation-settings: "opsz" 36; }
h1 em, h2 em { font-style: italic; font-weight: 500; }
p { color: var(--ink-70); max-width: 68ch; }
.small { font-size: 15px; color: var(--ink-50); }
.figures { font-variant-numeric: tabular-nums; font-family: var(--sans); }

.frame { max-width: var(--frame); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
/* every section opens the same way: a centred serif h2, then at most one short sub line (M7) */
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { text-wrap: balance; }
.section-head .sub { margin: 16px auto 0; font-size: 19px; text-wrap: pretty; }

/* ---------- bands ---------- */
.band {
  margin-inline: var(--gutter); border-radius: var(--r-band);
  padding-block: var(--section-pad);
  --ink: var(--paper-on-dark); --ink-70: var(--paper-70); --ink-50: var(--paper-50); --ink-30: var(--paper-30); --ink-12: var(--paper-12);
  color: var(--paper-on-dark);
}
.band-ink { background: #1B1F1D; }
.band-copper { background: var(--copper); }
.band .frame { padding-inline: clamp(20px, 5vw, 72px); }
.band .btn-primary { background: var(--turquoise-light); color: #1B1F1D; }
.band .btn-secondary { border-color: var(--paper-50); color: var(--paper-on-dark); }
@media (max-width: 719px) { .band { border-radius: 28px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 28px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 18px; font-weight: 500; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.btn-primary { background: var(--turquoise); color: #1B1F1D; }
.btn-primary:hover { background: var(--turquoise-deep); color: var(--paper-on-dark); }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: rgb(27 31 29 / .06); }
.btn-sm { padding: 12px 20px; font-size: 16px; }
.btn:active { transform: translateY(1px); }
.link { color: var(--ink-70); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { color: var(--ink); }

/* ---------- nav ---------- */
/* One floating pill, centred, 16px from the top edge at rest and when stuck, the same size throughout.
   Left: mark and wordmark. Middle: the links. Right: exactly one solid button. Under 900px the links
   collapse behind a plain "Menu" button and the pill keeps mark, wordmark and the button on one line. */
.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 16px var(--gutter) 0; pointer-events: none; }
.nav {
  pointer-events: auto; max-width: 980px; height: 60px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 8px 0 18px; border-radius: 999px;
  background: rgb(247 243 234 / .92); border: 1px solid var(--ink-12);
  box-shadow: 0 8px 24px -16px rgb(27 31 29 / .4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 600; font-size: 22px; font-variation-settings: "opsz" 36; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .mark { width: 40px; height: 40px; flex: none; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a, .nav-links summary { display: block; padding: 10px 14px; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--ink-70); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.nav-links a:hover, .nav-links summary:hover { color: var(--ink); background: rgb(27 31 29 / .05); }
.nav-trades { position: relative; }
.nav-trades summary::-webkit-details-marker { display: none; }
.nav-trades ul { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; padding: 8px; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 20px; box-shadow: 0 8px 24px -16px rgb(27 31 29 / .4); }
.nav-trades li a { display: block; }
.nav .btn-sm { padding: 12px 20px; font-size: 16px; }
.nav-menu-btn { display: none; }
/* 900–1023px: four links and the button need 863px of an 826px pill at 900, so the links tighten
   (about 27px spare at 900 in Chromium; Safari sets text a little wider) */
@media (min-width: 900px) and (max-width: 1023px) {
  .nav { gap: 8px; }
  .nav-links a, .nav-links summary { padding-inline: 7px; }
}
@media (max-width: 899px) {
  /* 375px budget: 8px page inset, pill 359 wide, 10 + 4 inside; mark 24, gap 4, wordmark 18px at
     opsz 72 (153; at opsz 36 it is 162 and the button lands on the pill's edge), "Menu" 44, button
     102, two 4px gaps: 335 of 345, so device font rendering has 10px of slack */
  .nav-wrap { padding-inline: 8px; }
  .nav { position: relative; height: 56px; gap: 4px; padding: 0 4px 0 8px; }
  .wordmark { font-size: 18px; gap: 6px; font-variation-settings: "opsz" 72; }
  .wordmark .mark { width: 30px; height: 30px; }
  .nav-links { display: none; }
  .nav .nav-menu-btn { display: inline-flex; margin-left: auto; padding: 8px 3px; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--ink-70); cursor: pointer; }
  .nav .nav-menu-btn:hover { color: var(--ink); }
  .nav .btn-primary.btn-sm { padding: 10px 9px; font-size: 14px; }
  .nav.open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: 12px; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 24px; box-shadow: 0 8px 24px -16px rgb(27 31 29 / .4); }
  .nav.open .nav-links a, .nav.open .nav-links summary { padding: 12px 14px; font-size: 17px; }
  .nav.open .nav-trades ul { position: static; border: 0; box-shadow: none; padding: 0 0 0 12px; min-width: 0; }
}
@media (max-width: 364px) { .nav-wrap { padding-inline: 4px; } } /* 360px phones: the pill takes the gutter */

/* ---------- hero ---------- */
/* One centred column: headline, body, one button with the quiet link, one small line. The gaps shrink
   down the column, 32, 24, 16, measured ink to ink (M7): the margins below are those figures corrected
   for the headline's descender (-3), the body's half-leading and descender room (+7) and the small
   line's half-leading (+5), so the rendered gaps land on the multiples of 8, not the box gaps.
   Then the diagram. Behind the column sits the field, a faint dot grid that a slow ring passes through. */
.hero { position: relative; padding: 48px 0 56px; overflow-x: clip; overflow-y: visible; }
.hero-copy { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; }
.hero h1 { max-width: 60vw; margin: 0 auto; text-wrap: balance; }
.hero-sub { max-width: 600px; margin: 35px auto 0; font-size: 19px; text-wrap: balance; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 17px; }
.hero-actions .link { font-size: 18px; font-weight: 500; }
.hero-reassure { margin: 11px auto 0; }

/* two columns from 980px: the copy on the left, the call card on the right, centred on each other.
   Under 980px they stack, copy first, centred as before. */
.hero-grid { display: grid; gap: 48px; align-items: center; }
.call-side { width: 100%; max-width: 400px; margin: 0 auto; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(48px, 6vw, 96px); }
  .hero-grid .hero-copy { max-width: none; margin: 0; text-align: left; }
  .hero-grid h1 { max-width: none; margin: 0; }
  .hero-grid .hero-sub { margin-left: 0; margin-right: 0; max-width: 520px; text-wrap: balance; }
  .hero-grid .hero-actions { justify-content: flex-start; }
  .hero-grid .hero-reassure { margin-left: 0; }
  .call-side { margin: 0; justify-self: end; }
}

/* the call card: an incoming call from Stella, one ink object (D23, design B, picked 2026-10-24).
   Its turquoise (the rings, the live dot, the Answer button) is the card's own artwork and counts as one
   accent use (ruled 2026-10-23, see the design system). While the demo is ready the outer ring pulses,
   like a phone ringing; under reduced motion and in the final state the rings simply stand still. */
.call-card { display: grid; justify-items: center; padding: 26px 28px 28px; text-align: center; background: #1B1F1D; color: var(--paper-on-dark); border-radius: 40px; box-shadow: 0 32px 64px -36px rgb(27 31 29 / .55); }
.cc-live { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--paper-70); }
.cc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-30); flex: none; transition: background-color 300ms var(--ease-out); }
.call-card[data-state="ready"] .cc-dot, .call-card[data-state="ended"] .cc-dot { background: var(--turquoise-light); }
.call-card[data-state="live"] .cc-dot { background: var(--turquoise-light); animation: cc-blink 1.2s ease-in-out infinite; }
@keyframes cc-blink { 50% { opacity: .35; } }
/* Stella in a round window, peeking up from its lower edge, inside two rings; she talks on the headset
   during a call */
.cc-ring { position: relative; width: 136px; height: 136px; margin-top: 44px; }
.cc-ring::before, .cc-ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgb(63 201 185 / .35); transition: border-color 300ms var(--ease-out); }
.cc-ring::after { inset: -30px; border-color: rgb(63 201 185 / .16); }
.call-card[data-state="ready"] .cc-ring::after { animation: cc-ringing 2.4s var(--ease-out) infinite; }
@keyframes cc-ringing { 0% { transform: scale(.88); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
.call-card[data-state="connecting"] .cc-ring::before, .call-card[data-state="offline"] .cc-ring::before { border-color: var(--paper-12); }
.call-card[data-state="connecting"] .cc-ring::after, .call-card[data-state="offline"] .cc-ring::after { border-color: rgb(247 243 234 / .06); }
.call-card[data-state="live"] .cc-ring::before { border-color: rgb(63 201 185 / .6); }
.cc-avatar { position: absolute; inset: 0; border-radius: 50%; background: #2A302D; overflow: hidden; box-shadow: inset 0 0 0 1px var(--paper-12); }
.cc-avatar img { position: absolute; left: 50%; bottom: -8px; width: 112px; height: auto; transform: translateX(-50%); transition: opacity 200ms var(--ease-out); }
.cc-talk { opacity: 0; }
.call-card[data-state="live"] .cc-talk { opacity: 1; }
.call-card[data-state="live"] .cc-peek { opacity: 0; }
.call-card[data-state="offline"] .cc-avatar img { filter: saturate(.35); opacity: .7; }
.call-card[data-state="offline"] .cc-avatar .cc-talk { opacity: 0; }
.cc-title { margin-top: 44px; font-size: 40px; line-height: 1.05; color: var(--paper-on-dark); font-variation-settings: "opsz" 72; text-wrap: balance; }
.cc-meta { margin-top: 8px; font-size: 15px; color: var(--paper-70); }
.cc-sub { margin-top: 20px; max-width: 26ch; font-size: 15px; line-height: 1.5; color: var(--paper-50); text-wrap: balance; }
/* the Answer button: the whole button and its label are one link */
.cc-mic { display: grid; justify-items: center; gap: 14px; margin-top: 28px; color: var(--paper-70); font-size: 14px; text-decoration: none; border-radius: 999px; }
/* The Answer button is drawn the way the mark is (D23, 2026-10-24): a paper line, with the turquoise
   fill printed out of register up and to the right by the mark's own ratio, about a quarter of the
   radius. A line-drawn ink handset sits on the fill. Answering locks the fill into register and the
   handset becomes the mark's three dots, moving while the call is live. */
.cc-btn { position: relative; isolation: isolate; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--ink); }
.cc-btn::before, .cc-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.cc-btn::before { z-index: -1; background: var(--turquoise); transform: translate(8px, -8px); transition: transform 300ms var(--ease-out), background-color 150ms var(--ease-out); }
.cc-btn::after { border: 5px solid var(--paper-on-dark); transition: border-color 300ms var(--ease-out); }
.cc-btn svg { grid-area: 1 / 1; width: 30px; height: 30px; transform: translate(3px, -3px); }
.cc-dots { grid-area: 1 / 1; display: none; gap: 6px; }
.cc-dots i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: cc-talking 1.2s ease-in-out infinite; }
.cc-dots i:nth-child(2) { animation-delay: .15s; }
.cc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cc-talking { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.cc-mic:hover .cc-btn::before { background: var(--turquoise-light); transform: translate(5px, -5px); }
.cc-mic:active .cc-btn::before { transform: none; }
.cc-mic:hover .cc-lbl { color: var(--paper-on-dark); }
.cc-mic:focus-visible { outline: none; }
.cc-mic:focus-visible .cc-btn { outline: 2px solid var(--paper-on-dark); outline-offset: 14px; }
.call-card[data-state="live"] .cc-btn::before { transform: none; }
.call-card[data-state="live"] .cc-handset { display: none; }
.call-card[data-state="live"] .cc-dots { display: flex; }
.call-card[data-state="live"] .cc-dot { display: none; }
.call-card[data-state="connecting"] .cc-btn, .call-card[data-state="offline"] .cc-btn { color: var(--paper-70); }
.call-card[data-state="connecting"] .cc-btn::before, .call-card[data-state="offline"] .cc-btn::before { background: var(--paper-12); transform: none; }
.call-card[data-state="connecting"] .cc-btn::after, .call-card[data-state="offline"] .cc-btn::after { border-color: var(--paper-30); }
.call-card[data-state="connecting"] .cc-btn svg, .call-card[data-state="offline"] .cc-btn svg { transform: none; }
.cc-note { margin-top: 14px; text-align: center; text-wrap: pretty; }
@media (max-width: 520px) {
  .call-card { padding: 22px 20px 24px; border-radius: 32px; }
  .cc-ring { width: 112px; height: 112px; margin-top: 38px; }
  .cc-avatar img { width: 94px; }
  .cc-title { margin-top: 38px; font-size: 34px; }
  }

/* the field: an ink dot grid at low strength, nearly clear behind the text column, faded out toward
   the edges and above the diagram, and
   two ring layers of the same grid at higher strength, each masked to a soft band whose radius grows
   from the headline outward over 9 s, half a cycle apart. Only the band brightens; nothing moves.
   Without @property support the rings simply stay hidden. */
@property --ring { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hero > .frame { position: relative; z-index: 1; }
@media (min-width: 980px) { .hero-field { --fx: 76%; --fy: 44%; --fw: 46%; } }
.hero-field {
  position: absolute; left: 0; right: 0; top: -96px; height: 860px; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse var(--fw, 60%) 62% at var(--fx, 50%) var(--fy, 40%), rgb(0 0 0 / .12) 0%, rgb(0 0 0 / .12) 24%, #000 50%, rgb(0 0 0 / .5) 72%, transparent 100%);
          mask-image: radial-gradient(ellipse var(--fw, 60%) 62% at var(--fx, 50%) var(--fy, 40%), rgb(0 0 0 / .12) 0%, rgb(0 0 0 / .12) 24%, #000 50%, rgb(0 0 0 / .5) 72%, transparent 100%);
}
.field-base, .field-ring {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--ink) 1.3px, transparent 1.8px);
  background-size: 24px 24px; background-position: center 12px;
}
.field-base { opacity: .09; }
.field-ring {
  --peak: .32; opacity: var(--peak);
  --band: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), transparent calc(var(--ring) - 90px), #000 var(--ring), transparent calc(var(--ring) + 90px));
  -webkit-mask-image: var(--band); mask-image: var(--band);
  animation: field-ring 9s cubic-bezier(.3, .1, .3, 1) infinite;
}
.field-ring-2 { animation-delay: -4.5s; }
@keyframes field-ring { 0% { --ring: 40px; opacity: 0; } 12% { opacity: var(--peak); } 70% { opacity: calc(var(--peak) * .6); } 100% { --ring: 980px; opacity: 0; } }
html[data-state="final"] .field-ring, html.reduce-motion .field-ring, html[data-state="scrub"] .field-ring { display: none; }
@media (prefers-reduced-motion: reduce) { .field-ring { display: none; } }


/* ---------- the flow diagrams (D23, redrawn 2026-10-24) ---------- */
/* Cards on a faint dot grid: each node a paper card with a 1.5 ink-12 outline, a 32px icon chip and
   two lines (Figtree 15/600 and 12.5 at ink 70%). Ours is the turquoise card with the mark on a paper
   chip; the caller's chip is copper; the emergency icon is --alert. Connectors run straight with
   12-unit rounded corners: a 1.5 ink-12 track with the ink line drawn over it, and a turquoise
   signal dot that follows the call. The markup is the finished picture; site/diagrams.js plays it
   with GSAP when it scrolls into view. Wide (640 x 420) from 600px, tall (360 x 580) below. */
.flow { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.flow-tall { display: none; }
@media (max-width: 599px) { .flow-wide { display: none; } .flow-tall { display: block; } }
.flow .canvas { stroke: var(--ink-12); }
.flow .gdot { fill: var(--ink-12); }
.flow .base, .flow .act { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow .base { stroke: var(--ink-12); }
.flow .act { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 0; }
.flow .junction { fill: var(--paper); stroke: var(--ink-30); stroke-width: 1.5; }
.flow .card { fill: var(--paper); stroke: var(--ink-12); stroke-width: 1.5; }
.flow [data-lit] .card { stroke: var(--ink); }
.flow .n-us .card { fill: var(--turquoise); stroke: none; }
.flow .c-copper { fill: var(--copper); } .flow .c-sand { fill: var(--sand); } .flow .c-paper { fill: var(--paper); }
.flow .ic { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow .n-caller .ic { stroke: var(--paper); }
.flow .n-alert .ic { stroke: var(--alert); }
.flow .mi-fill { fill: var(--turquoise); }
.flow .mi-line { fill: none; stroke: #1B1F1D; stroke-width: 4; stroke-linejoin: round; }
.flow .mi-dot { fill: #1B1F1D; }
.flow text { font-family: var(--sans); fill: var(--ink); dominant-baseline: central; }
.flow .t { font-size: 15px; font-weight: 600; }
.flow .m { font-size: 12.5px; font-weight: 400; fill: var(--ink-70); }
.flow .n-us text { fill: #1B1F1D; }
.flow .n-us .m { fill: rgb(27 31 29 / .75); }
.flow .pill rect { fill: var(--paper); stroke: var(--ink-30); stroke-width: 1; }
.flow .pill text { font-size: 12px; font-weight: 500; }
.flow .ring { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; }
.flow .ring-us { stroke: var(--turquoise); stroke-width: 2; }
.flow .dot { opacity: 0; }
.flow .n-asks .card { fill: var(--paper); }
.flow .ask .tick { fill: #1B1F1D; stroke: #1B1F1D; stroke-width: 1.5; }
.flow .ask .ic { stroke: var(--paper); stroke-width: 2.4; }
.flow .ask .r { font-size: 13px; fill: var(--ink); }
.flow [data-dim] { opacity: .45; }
.flow .dead { fill: none; stroke: var(--ink-30); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.flow .dot .halo { fill: var(--turquoise); opacity: .22; }
.flow .dot .core { fill: var(--turquoise); }

@media (max-width: 899px) {
  .hero h1 { max-width: none; }
}
@media (max-width: 719px) {
  .hero { padding: 40px 0 40px; }
  /* the same 32, 24, 16 ink gaps at 375px; the phone headline's descender eats 2, the body +8, the small line +5 */
  .hero-sub { margin-top: 30px; }
  .hero-actions { margin-top: 16px; gap: 20px; }
  .hero-reassure { margin-top: 11px; }
  /* on a phone the text column is the full width, so the field sits lower in strength and mostly
     above and below the text */
  .hero-field { top: -72px; height: 720px; }
  .field-base, .field-ring { background-size: 20px 20px; }
  .field-base { opacity: .06; }
  .field-ring { --peak: .2; }
}

/* ---------- cards and rows ---------- */
.card { background: var(--sand); border-radius: var(--r-card); padding: 32px; }
.band .card { background: rgb(247 243 234 / .08); }
.rows > * + * { border-top: 1px solid var(--ink-12); }
.row { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; }

/* ---------- diagrams ---------- */
.diagram { width: 100%; height: auto; }
.diagram text { font-family: var(--sans); font-size: 15px; font-weight: 500; fill: currentColor; }
.diagram .node { fill: var(--sand); stroke: none; }
.diagram .node-us { fill: var(--turquoise); }
.diagram .node-caller { fill: var(--copper); }
.diagram .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram .line-us { stroke: var(--turquoise); }
.diagram .line-alert { stroke: var(--alert); }

/* ---------- the lost jobs (copper band) ---------- */
/* On a wide screen the van photo fills the band behind the heading and three frosted cards; an ink
   shade, darkest at the top, keeps the heading readable. Inside a card: an outlined label, the serif
   title, the "now" paragraph at reduced paper, a hairline, then the "instead" paragraph at full paper.
   Below 1024px the cards stack, so the photo becomes a strip across the top of the band and the cards
   sit on copper. The band's padding, and the top of the section after it, are tighter than --section-pad
   (operator, 2026-10-24). */
figure.scene { border-radius: var(--r-card); overflow: hidden; }
figure.scene img { width: 100%; height: auto; object-fit: cover; }
#lost { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 7vw, 96px); }
#lost .lost-scene { position: absolute; inset: 0; z-index: -2; margin: 0; border-radius: 0; }
#lost .lost-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
#lost::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(27 31 29 / .80) 0%, rgb(27 31 29 / .45) 40%, rgb(27 31 29 / .20) 70%, rgb(27 31 29 / .45) 100%); }
#lost .section-head .sub { color: var(--paper-on-dark); }
#lost + .section { padding-top: clamp(64px, 7vw, 96px); }   /* the band's own padding already separates them */
.losses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.loss-tag { display: inline-block; margin-bottom: 20px; padding: 6px 14px; border: 1px solid var(--paper-30);
  border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; color: var(--paper-70); }
#lost .loss.card { background: rgb(27 31 29 / .42); border: 1px solid rgb(247 243 234 / .16);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
#lost .loss .now { color: rgb(247 243 234 / .78); }
.loss h3 { margin-bottom: 16px; }
.loss .instead { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink-12); color: var(--ink); }
@media (min-width: 1024px) and (max-width: 1279px) {
  #lost .loss.card { padding: 28px 24px; }
  .loss-tag { padding: 5px 10px; font-size: 12px; letter-spacing: .03em; }
}
@media (max-width: 899px) {
  .losses { grid-template-columns: 1fr; gap: 16px; }
  .loss.card { padding: 24px; }
}
/* the photo goes behind three cards only when they sit side by side; this band stacks below 1024 */
@media (max-width: 1023px) {
  #lost .losses { grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin-inline: auto; }
  #lost { padding-top: 0; }
  #lost::before { display: none; }
  #lost .lost-scene { position: static; margin-bottom: 40px; }
  #lost .lost-scene img { height: auto; aspect-ratio: 16 / 9; }
  #lost .loss.card { background: rgb(247 243 234 / .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 719px) { #lost .lost-scene img { aspect-ratio: 4 / 3; } }
@media (max-width: 399px) { .loss-tag { padding: 5px 10px; font-size: 12px; letter-spacing: .03em; white-space: normal; border-radius: 12px; } }

/* ---------- how a call works (the pinned section) ---------- */
/* Desktop: three columns, the step titles | the sand stage with the call diagram | the current step's text.
   .how-pin sticks under the nav (centred on tall viewports) while the track behind it runs four --step
   lengths of scroll; the four sentinels are placed absolutely so each one owns one --step of the
   viewport's centre line, which is what app.js watches (rootMargin -50%/-50%). The pin is stuck while the
   centre line sits between (50vh - top) and (50vh - top + 3 steps) in track coordinates, so sentinel 1
   runs from 0 to (50vh - top + step) and 2 and 3 take one step each; the pin lets go exactly as the
   centre leaves sentinel 3. The titles are serif at reduced ink with a hairline bar; the current one
   is full ink with a turquoise bar (the one marker on this screen). The four texts share one cell and
   cross-fade by opacity. Under 900px nothing pins: the stage first, then each title with its text,
   all visible; tapping a title swaps the scene. */
.how { --step: 75vh; --pin-top: max(104px, calc(50vh - 216px)); }
.how-track { position: relative; }
/* the scroll room is a spacer in the content box, not padding: a sticky element is clamped to its
   containing block's content box, so padding would give the pin nowhere to stick */
.how-track::after { content: ""; display: block; height: calc(4 * var(--step)); }
.how-pin {
  position: sticky; top: var(--pin-top);
  display: grid; grid-template-columns: minmax(180px, 232px) minmax(0, 1fr) minmax(220px, 264px);
  gap: 40px; align-items: center;
}
.how-sentinel { position: absolute; left: 0; right: 0; pointer-events: none; }
.how-sentinel[data-step="1"] { top: 0; height: calc(50vh - var(--pin-top) + var(--step)); }
.how-sentinel[data-step="2"] { top: calc(50vh - var(--pin-top) + var(--step)); height: var(--step); }
.how-sentinel[data-step="3"] { top: calc(50vh - var(--pin-top) + 2 * var(--step)); height: var(--step); }
.how-sentinel[data-step="4"] { top: calc(50vh - var(--pin-top) + 3 * var(--step)); height: var(--step); }

.how-steps { display: grid; gap: 24px; }
.how-steps li {
  position: relative; padding-left: 20px; cursor: pointer;
  font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36; color: var(--ink-30);
  transition: color 400ms var(--ease-out);
}
.how-steps li::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px;
  background: var(--ink-12); transition: background-color 400ms var(--ease-out);
}
#how[data-current="1"] .how-steps li[data-step="1"],
#how[data-current="2"] .how-steps li[data-step="2"],
#how[data-current="3"] .how-steps li[data-step="3"],
#how[data-current="4"] .how-steps li[data-step="4"] { color: var(--ink); }
#how[data-current="1"] .how-steps li[data-step="1"]::before,
#how[data-current="2"] .how-steps li[data-step="2"]::before,
#how[data-current="3"] .how-steps li[data-step="3"]::before,
#how[data-current="4"] .how-steps li[data-step="4"]::before { background: var(--turquoise); }

.how-stage { padding: 24px; scroll-margin-top: 96px; }
.how-copy { display: grid; }
.how-copy p { grid-area: 1 / 1; opacity: 0; transition: opacity 400ms var(--ease-out); }
#how[data-current="1"] .how-copy p[data-step="1"],
#how[data-current="2"] .how-copy p[data-step="2"],
#how[data-current="3"] .how-copy p[data-step="3"],
#how[data-current="4"] .how-copy p[data-step="4"] { opacity: 1; }

/* the stage holds a flow diagram whose canvas is its own frame, so the sand card steps back; on
   desktop the diagram plays one chapter per step as the pinned section scrolls (site/diagrams.js) */
.how-stage { background: none; padding: 0; }
/* while the section pins, only the selected step's path is lit; the rest of the diagram steps back to
   a quarter. Each part carries the steps it belongs to (data-steps="2 3 4"). Opacity here never
   meets GSAP's: the parts it fades (tags, halos) are greyed through a wrapper. */
@media (min-width: 900px) {
  #how .flow [data-steps] { transition: opacity 400ms var(--ease-out); }
  #how[data-current="1"] .flow [data-steps]:not([data-steps~="1"]):not(.pw),
  #how[data-current="2"] .flow [data-steps]:not([data-steps~="2"]):not(.pw),
  #how[data-current="3"] .flow [data-steps]:not([data-steps~="3"]):not(.pw),
  #how[data-current="4"] .flow [data-steps]:not([data-steps~="4"]):not(.pw) { opacity: .22; }
  /* a tag stays solid so no line shows through it; only its outline and words step back */
  #how .flow .pw rect, #how .flow .pw text { transition: stroke 400ms var(--ease-out), fill 400ms var(--ease-out); }
  #how[data-current="1"] .flow .pw:not([data-steps~="1"]) rect,
  #how[data-current="2"] .flow .pw:not([data-steps~="2"]) rect,
  #how[data-current="3"] .flow .pw:not([data-steps~="3"]) rect,
  #how[data-current="4"] .flow .pw:not([data-steps~="4"]) rect { stroke: var(--ink-12); }
  #how[data-current="1"] .flow .pw:not([data-steps~="1"]) text,
  #how[data-current="2"] .flow .pw:not([data-steps~="2"]) text,
  #how[data-current="3"] .flow .pw:not([data-steps~="3"]) text,
  #how[data-current="4"] .flow .pw:not([data-steps~="4"]) text { fill: var(--ink-30); }
}


@media (max-width: 899px) {
  .how { --step: 0px; }
  .how-track::after { display: none; }
  .how-sentinel { display: none; }
  .how-pin { position: static; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .how-steps, .how-copy { display: contents; }
  .how-stage { order: 0; padding: 0; margin-bottom: 16px; }
  .how-steps li { font-size: 22px; }
  .how-steps li[data-step="1"] { order: 1; }  .how-copy p[data-step="1"] { order: 2; }
  .how-steps li[data-step="2"] { order: 3; margin-top: 16px; }  .how-copy p[data-step="2"] { order: 4; }
  .how-steps li[data-step="3"] { order: 5; margin-top: 16px; }  .how-copy p[data-step="3"] { order: 6; }
  .how-steps li[data-step="4"] { order: 7; margin-top: 16px; }  .how-copy p[data-step="4"] { order: 8; }
  .how-copy p { grid-area: auto; opacity: 1; }
}

/* ---------- talk to Stella (the ink band) ---------- */
/* The one object in the band is the row: a tinted panel (the band's card tint) holding the round
   microphone button in the band's accent, the label and status on one line, and the sub-line. The
   button's hit area is stretched over the whole panel, so the row is the thing to press. Under the
   row, the notice in Small, then the example line; both centred under the centred head. The row and
   the notice carry `hidden` until the widget accepts the token: the display rules below must not
   defeat that, so the band then shows the head and the example line alone, 56 under the head like
   any section's content. While a call is on (.live) the button inverts to paper with an accent ring. */
.talk-row { position: relative; display: flex; align-items: center; gap: 24px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 24px 40px 24px 24px; border-radius: var(--r-card); background: rgb(247 243 234 / .08); cursor: pointer; transition: background-color 150ms var(--ease-out); }
.talk-row[hidden], .try-note[hidden] { display: none; }
.talk-row:hover { background: rgb(247 243 234 / .12); }
.talk-btn {
  position: static; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; padding: 0; border: 0; border-radius: 999px;
  background: var(--turquoise-light); color: #1B1F1D; cursor: pointer;
  transition: background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.talk-btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }   /* the whole row presses the button */
.talk-btn svg { width: 32px; height: 32px; }
.talk-row:hover .talk-btn { background: var(--turquoise); }
.talk-row:active .talk-btn svg { transform: translateY(1px); }   /* on the glyph: a transform on the button would re-anchor its stretched hit area */
.talk-row.live .talk-btn { background: var(--paper-on-dark); color: #1B1F1D; box-shadow: 0 0 0 4px var(--turquoise-light); }
.talk-body { display: grid; gap: 4px; min-width: 0; }
.talk-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.talk-label { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.talk-status { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ink-50); }
.talk-row.live .talk-status { color: var(--ink); }
.talk-sub { max-width: 44ch; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.try-note { max-width: 520px; margin: 24px auto 0; text-align: center; text-wrap: pretty; }
.talk-example { max-width: 520px; margin: 8px auto 0; text-align: center; text-wrap: pretty; }
.try-note[hidden] + .talk-example { margin-top: 0; }   /* the hidden case: the example line is the content, 56 under the head */
@media (max-width: 719px) {
  .talk-row { gap: 16px; padding: 16px 20px 16px 16px; }
  .talk-btn { width: 64px; height: 64px; }
  .talk-btn svg { width: 28px; height: 28px; }
  .talk-sub { font-size: 16px; }
  .try-note { margin-top: 16px; }
}

/* ---------- price (the plan card) ---------- */
/* One sand card, 960 wide, centred. The price is Figures at the Price role: the amount large with
   "a month" beside it on the same baseline, the terms line under. Then the two columns, each a serif
   h3 over hairline-divided rows, stacking under 720px; then the refund and founders lines as body;
   then the one primary button with the quiet link beside it. Gaps 8, 16, 40, 48. */
.plan.card { max-width: 960px; margin: 0 auto; padding: 48px; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; color: var(--ink); max-width: none; }
.plan-price .amount { font-size: clamp(56px, 6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.plan-price .per { font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink-70); }
.plan-terms { margin-top: 16px; }
.plan-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 40px; }
.plan-cols h3 { margin-bottom: 8px; }
.plan-list li { padding: 12px 0; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.plan-list li:last-child { padding-bottom: 0; }
.plan-refund { margin-top: 48px; color: var(--ink); }
.plan-founders { margin-top: 8px; }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; }
.plan-actions .link { font-size: 18px; font-weight: 500; }
@media (max-width: 899px) {
  .plan.card { padding: 32px; }
  .plan-cols { gap: 40px; }
}
@media (max-width: 719px) {
  .plan.card { padding: 24px; }
  .plan-price .amount { font-size: 56px; }
  .plan-price .per { font-size: 20px; }
  .plan-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .plan-refund { margin-top: 32px; }
  .plan-actions { margin-top: 32px; }
}

/* ---------- questions ---------- */
/* Six hairline-divided rows, 1040 wide: the question in the Subhead serif on the left, the answer in
   body at reduced ink on the right, capped at 60ch. Under 720px the pair stacks. */
.qa { max-width: 1040px; margin: 0 auto; }
.q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; padding: 32px 0; }
.q:first-child { padding-top: 0; }
.q dt { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; text-wrap: balance; }
.q dd { margin: 0; max-width: 60ch; color: var(--ink-70); text-wrap: pretty; }
@media (max-width: 719px) {
  .q { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
  .q dt { font-size: 23px; }
}

/* ---------- close ---------- */
/* The one section that is nothing but its head: the centred serif h2, the one sub line, then the two
   buttons on one row under them, 56 below the head like any section's content and 16 apart. It keeps
   the full section padding on both sides and sits on bare paper, so it reads as the page coming to a
   stop rather than a card; the footer's hairline is the line it stops at. Under 720px the buttons stack,
   each the width of the frame, primary first. */
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; }
.close-actions .link { text-align: center; }
@media (max-width: 719px) {
  .close-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- motion ---------- */
.fade-in { color: var(--ink-30); transition: color 800ms var(--ease-out); }
.fade-in.is-in { color: var(--ink); }
[data-io] .part { opacity: 0; }
[data-io].is-in .part { animation: part-in 4s var(--ease-out) both; }
@keyframes part-in { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 1; } }

/* deterministic states for the critics, and reduced motion */
html[data-state="final"] *, html[data-state="final"] *::before, html[data-state="final"] *::after,
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important;
}
html[data-state="final"] [data-io] .part, html.reduce-motion [data-io] .part { opacity: 1; }
html[data-state="final"] .fade-in, html.reduce-motion .fade-in { color: var(--ink); }
html[data-state="scrub"] [data-io] .part { animation: part-in 4s var(--ease-out) both paused; animation-delay: calc(var(--t, 0) * -4s) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
  [data-io] .part { opacity: 1; }
  .fade-in { color: var(--ink); }
  html { scroll-behavior: auto; }
}

/* ---------- footer ---------- */
/* Quiet and complete, divided from the page by one hairline across the frame. Left: the wordmark with
   the mark, then 16 down the three meta lines in Small at reduced ink, 8 apart. Right: the four links
   in Small at body ink, on the wordmark's baseline (the grid aligns its two cells by baseline; the
   wordmark is a flex block here so its line box carries no descender slack under it). No logos, no
   social icons. Under 720px it is one column: wordmark, meta, then the links in a row 24 under. */
.footer { padding: 64px 0 48px; }
.footer .frame { display: grid; gap: 24px; grid-template-columns: 1fr auto; align-items: start; }
.footer .frame::before { content: ""; grid-column: 1 / -1; height: 0; border-top: 1px solid var(--ink-12); margin-bottom: 40px; }
.footer .wordmark { display: flex; width: fit-content; }
.footer-meta { font-size: 15px; line-height: 1.5; color: var(--ink-50); display: grid; gap: 8px; margin-top: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; line-height: 1.5; }
.footer-links a { color: var(--ink-70); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 719px) {
  .footer .frame { grid-template-columns: 1fr; }
  .footer .frame::before { margin-bottom: 24px; }
}

/* ======================================================================================
   SECONDARY PAGES (pages round 1). Scoped by body class or by new element classes; the
   blocks above are the judged home page and are not touched.
   ====================================================================================== */

/* ---------- shared page hero (pricing, start, privacy) ---------- */
/* The home hero's column and gaps without the field or the diagram: 48 under the nav pill, the
   centred serif h1 (italic second line where the copy has one), the sub 32 under it by ink, then
   64 to the first section, whose top padding is removed by .section-tight. */
.hero-page { padding: 48px 0 64px; }
.hero-page .frame, .hero-trade .frame { text-align: center; }
.hero-page h1 { max-width: 920px; }
.hero-page h1 .nowrap { white-space: nowrap; }   /* keeps a hyphenated number on one line under text-wrap: balance */
.section-tight { padding-top: 0; }
@media (max-width: 719px) {
  .hero-page { padding: 40px 0 48px; }
}

/* ---------- prose sections (pricing) ---------- */
/* A centred serif h2 (.section-head), then one or two paragraphs in a 60ch column, centred. */
.prose { max-width: 60ch; margin: 0 auto; text-align: center; text-wrap: pretty; }
.prose + .prose { margin-top: 16px; }
.plan-note { margin: 16px auto 0; text-align: center; }

/* the founders band: the copper band with the chip as a small paper-tinted pill in the UI size */
.page-pricing #founders .frame { text-align: center; }
.chip {
  display: inline-block; margin-top: 24px; padding: 8px 16px; border-radius: 999px;
  background: var(--paper-12); color: var(--paper-on-dark);
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums;
}

/* ---------- how it compares (pricing) ---------- */
/* HELD 2026-10-24: the operator asked not to publish the table yet. The markup is out of the page
   (restore it from commit b108745, site/pricing/index.html, section#compare); these rules stay. */
/* Four kinds of answering side by side, by category, never by vendor name (service review entry 3):
   hairline rows like the hours table, the row label in the UI size, our column in ink at 500 with a
   sand wash. Under 720px each row becomes a block: the label, then one line per column with its
   name. Figures from docs/research/2026-10-24-pricing-and-competitors.md; re-check before reuse. */
.compare-wrap { max-width: 1040px; margin: 0 auto; }
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: 16px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--ink-12); font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.compare thead td { border-top: 0; }
.compare thead th { border-top: 0; padding-bottom: 12px; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; font-variation-settings: "opsz" 36; color: var(--ink); vertical-align: bottom; }
.compare tbody th { width: 24%; padding-left: 0; font-weight: 500; color: var(--ink); }
.compare td { color: var(--ink-70); }
.compare .us { background: var(--sand); color: var(--ink); font-weight: 500; }
.compare thead .us { border-radius: 12px 12px 0 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 12px 12px; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 1px solid var(--ink-12); }
@media (max-width: 719px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { padding: 20px 0; border-top: 1px solid var(--ink-12); }
  .compare tbody tr:last-child { border-bottom: 1px solid var(--ink-12); }
  .compare th, .compare td, .compare tbody tr:last-child th, .compare tbody tr:last-child td { border: 0; padding: 4px 0; background: none; border-radius: 0; }
  .compare tbody th { width: auto; padding-bottom: 8px; font-family: var(--serif); font-size: 21px; font-variation-settings: "opsz" 36; }
  .compare td::before { content: attr(data-col) ": "; color: var(--ink-50); font-weight: 400; }
  .compare td.us { margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: var(--sand); }
  .compare td.us::before { color: var(--ink-70); }
}

/* ---------- support hours (pricing, start) ---------- */
/* Hairline rows: the day in the serif Subhead role, the times in Figures. Under 720px each day is
   a block with its times stacked under it. */
.hours { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; }
.hours th, .hours td { padding: 24px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--ink-12); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 1px solid var(--ink-12); }
.hours th { padding-right: 32px; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; white-space: nowrap; }
.hours td { font-family: var(--sans); font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours + .prose { margin-top: 40px; }
@media (min-width: 720px) { .hours td:only-of-type { text-align: right; } }   /* one span a day (D25): the time sits at the row's end */
@media (max-width: 719px) {
  .hours, .hours tbody, .hours tr, .hours th, .hours td { display: block; }
  .hours th, .hours td, .hours tr:last-child th, .hours tr:last-child td { border: 0; padding: 0; }
  .hours tr { padding: 24px 0; border-top: 1px solid var(--ink-12); }
  .hours tr:last-child { border-bottom: 1px solid var(--ink-12); }
  .hours th, .hours tr:last-child th { padding-bottom: 8px; font-size: 23px; white-space: normal; }
  .hours td + td { margin-top: 8px; }
  .hours td:empty { display: none; }
}

/* ---------- the 7:00am email (pricing) ---------- */
/* One email card drawn in ink on paper: the time, then one row per call: who (copper), what, where,
   the outcome (booked is the one turquoise mark; paged and message stay ink) and the recording
   mark. The parts reveal along the 4 s timeline; the end state is the still. On a phone the labels
   grow and the "where" column steps aside so the row still reads. */
.morning-diagram { max-width: 640px; margin: 0 auto; color: var(--ink); }
.morning-diagram .diagram { overflow: visible; }
#morning .prose { margin-top: 40px; }
#dgm-morning text { font-size: 17px; }
#dgm-morning .lbl { fill: var(--ink-70); }
#dgm-morning .on-caller { fill: var(--paper-on-dark); }
#dgm-morning .on-us { fill: #1B1F1D; }
#dgm-morning .on-ink { fill: var(--paper); }
#dgm-morning .card-mail { fill: var(--paper); stroke: currentColor; stroke-width: 2; }
#dgm-morning .node-ink { fill: currentColor; }
#dgm-morning .node-outline { fill: var(--paper); stroke: currentColor; stroke-width: 2; }
#dgm-morning .line-faint { stroke: var(--ink-12); }
#dgm-morning .rec { fill: none; stroke: currentColor; stroke-width: 2; }
#dgm-morning .rec-play { fill: currentColor; }
#dgm-morning .part { animation-delay: var(--d, 0s); }
@media (max-width: 719px) {
  #dgm-morning text { font-size: 24px; }
  #dgm-morning .where { display: none; }
}

/* ---------- trade pages ---------- */
/* The hero as on the home page, with the one eyebrow the system allows (the trade's name, small
   sans at reduced ink, 16 above the headline) and the trade's scene as one rounded figure under the
   text, 48 below the small line, the frame's full width, keeping the image's own ratio. */
.hero-trade { padding: 48px 0 64px; }
.kicker { margin: 0 auto 16px; font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--ink-50); }
figure.hero-scene { margin-top: 48px; }
figure.hero-scene img { aspect-ratio: 1344 / 752; }
/* the three loss cards on the copper band, as on the home page (the generator writes .loss alone) */
.page-trade .loss { background: rgb(247 243 234 / .08); border-radius: var(--r-card); padding: 32px; }
/* the transcript: one sand card; each line a row of the small sans label and the sentence */
.transcript.card { max-width: 800px; margin: 0 auto; padding: 32px 40px; }
.transcript .line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; max-width: none; color: var(--ink); }
.transcript .line + .line { margin-top: 24px; }
.transcript .line-caller { color: var(--ink-70); }
.transcript .who { padding-top: 4px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.transcript .line-ai .who { color: var(--ink); font-weight: 600; }   /* ruled 2026-10-23: text labels never carry the accent */
.transcript .line-caller .who { color: var(--copper); }
/* the emergencies: hairline rows in a 640 column, the note under the last line */
.emergencies, .emergencies-note { max-width: 640px; margin-inline: auto; }
.emergencies { border-bottom: 1px solid var(--ink-12); }
.emergencies li { padding: 16px 0; color: var(--ink); text-wrap: pretty; }
.emergencies li:first-child { padding-top: 0; }
.emergencies-note { margin-top: 24px; }
@media (max-width: 899px) {
  .page-trade .loss { padding: 24px; }
}
@media (max-width: 719px) {
  .hero-trade { padding: 40px 0 48px; }
  figure.hero-scene { margin-top: 32px; }
  figure.hero-scene img { aspect-ratio: 1344 / 752; }
  .transcript.card { padding: 24px; }
  .transcript .line { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .transcript .line + .line { margin-top: 16px; }
}

/* ---------- start page ---------- */
/* The form card on the left, the aside (the Talk to Stella row on paper) on the right; under 900px
   they stack, form first. Fields are rounded paper boxes with the label above in the UI size. */
.start-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.start-form.card { position: relative; padding: 40px; }
.start-form label { display: grid; gap: 8px; margin-bottom: 24px; }
.start-form label > span { font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--ink-70); }
.start-form input, .start-form select, .start-form textarea {
  width: 100%; margin: 0; padding: 16px; border: 1px solid var(--ink-12); border-radius: 12px;
  background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.2;
  appearance: none; -webkit-appearance: none;
}
.start-form select {
  padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%231B1F1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.start-form select:invalid { color: var(--ink-50); }
.start-form input:focus, .start-form select:focus, .start-form textarea:focus { outline: 3px solid var(--turquoise); outline-offset: 2px; border-color: var(--turquoise); }
.start-form textarea { resize: vertical; min-height: 120px; line-height: 1.4; }
.start-form .optional { font-style: normal; font-weight: 400; color: var(--ink-50); margin-left: 4px; }
.start-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.start-form .btn { margin-top: 8px; }
.start-form .form-note { margin-top: 16px; }
.start-form .form-success, .start-form .form-error { margin-top: 16px; font-weight: 500; }
.start-form .form-success { color: var(--ink); }
.start-form .form-error { color: var(--alert); }
/* until the widget has accepted the token the row is hidden (as on the home band); then the form
   takes the frame alone, centred, so the page never shows an empty column */
.start-grid:has(.talk-row[hidden]) { grid-template-columns: minmax(0, 1fr); }
.start-grid:has(.talk-row[hidden]) .start-form { width: 100%; max-width: 760px; margin: 0 auto; }
/* the aside: the home band's row on paper, a sand panel with the turquoise microphone button */
.start-aside { display: grid; gap: 16px; align-content: start; }
.page-start .talk-row { width: 100%; margin: 0; background: var(--sand); }
.page-start .talk-row:hover { background: var(--sand); }   /* the button carries the hover on paper */
.page-start .talk-btn { background: var(--turquoise); color: #1B1F1D; }
.page-start .talk-row:hover .talk-btn { background: var(--turquoise-deep); color: var(--paper-on-dark); }
.page-start .talk-row.live .talk-btn { background: var(--paper); color: #1B1F1D; box-shadow: 0 0 0 4px var(--turquoise); }
.page-start .try-note { margin: 0; max-width: none; text-align: left; }
/* what happens next: three hairline rows, the serif h3 beside its line */
.steps-plain { max-width: 960px; margin: 0 auto; }
.steps-plain li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; padding: 32px 0; border-top: 1px solid var(--ink-12); }
.steps-plain li:first-child { padding-top: 0; border-top: 0; }
.steps-plain li:last-child { border-bottom: 1px solid var(--ink-12); }
.steps-plain p { max-width: 60ch; text-wrap: pretty; }
@media (max-width: 899px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .start-form.card { padding: 32px; }
}
@media (max-width: 719px) {
  .start-form.card { padding: 24px; }
  .start-form .btn { width: 100%; }
  .steps-plain li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
  .steps-plain h3 { font-size: 23px; }
}

/* ---------- privacy page ---------- */
/* One 60ch column, left-aligned: h2 in the Subhead role, 16 to its paragraph, 48 between groups. */
.prose-page { max-width: 60ch; }
.prose-page h2 { font-size: 26px; line-height: 1.2; font-variation-settings: "opsz" 36; }
.prose-page h2 + p, .prose-page p + p { margin-top: 16px; }
.prose-page p + h2 { margin-top: 48px; }
.prose-page p a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose-page p.small { margin-top: 48px; }

/* the plan card's link to the pricing page is pointless on the pricing page */
.page-pricing .plan-actions .link { display: none; }

/* ---------- Stella, the cactus ---------- */
/* Dasha's widget stays invisible until our skin is inside it, so its own launcher never flashes in the
   corner; the Dasha block adds .afd-skinned (or gives up after 5 s and shows Dasha's own look). */
blackbox-agent:not(.afd-skinned) { visibility: hidden; }

/* The mascot (ruled 2026-10-23): a saguaro on the headset, in its own sage green with the brand's ink
   outline, teal headset and the white saguaro blossom. Used in three places only: the corner
   launcher on pages with the demo, the start form's success message, and the 7:00am email on the
   pricing page. Never beside a headline, never more than one per screen. */
.mascot-dock {
  position: fixed; z-index: 60; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: 0;
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
  transform: translateY(110%); transition: transform 600ms cubic-bezier(.34, 1.4, .64, 1), right 400ms var(--ease-out);
}
.mascot-dock.in { transform: none; }
.mascot-dock > * { pointer-events: auto; }
.md-cactus { display: block; width: 116px; height: 129px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.md-cactus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out); }
.md-cactus:hover img { transform: translateY(-4px); }
.md-cactus:focus-visible { outline: 2px solid var(--turquoise-deep); outline-offset: 4px; border-radius: 12px; }
.md-talk { opacity: 0; }
.mascot-dock[data-state="live"] .md-talk { opacity: 1; }
.mascot-dock[data-state="live"] .md-peek { opacity: 0; }
.md-bubble { position: relative; display: flex; align-items: flex-start; gap: 4px; margin-bottom: 88px; padding: 12px 8px 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--paper); border: 1px solid var(--ink-12); box-shadow: 0 12px 28px -16px rgb(27 31 29 / .45); }
.md-bubble[hidden] { display: none; }
.md-ask { display: grid; gap: 2px; padding: 0; border: 0; background: none; text-align: left; font: 600 15px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.md-ask span { font-weight: 400; font-size: 14px; color: var(--ink-70); }
.md-close { width: 28px; height: 28px; margin: -4px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; font: 400 20px/1 var(--sans); color: var(--ink-50); cursor: pointer; }
.md-close:hover { background: rgb(27 31 29 / .06); color: var(--ink); }
/* while Dasha's panel is open (224px wide, 24px from the corner) the cactus stands just left of it */
.mascot-dock.panel-open { right: calc(260px + env(safe-area-inset-right, 0px)); }
.mascot-dock.panel-open .md-bubble { display: none; }
@media (max-width: 719px) {
  .md-cactus { width: 88px; height: 98px; }
  .md-bubble { margin-bottom: 64px; padding: 10px 6px 10px 12px; }
  .md-ask { font-size: 14px; } .md-ask span { font-size: 13px; }
  .mascot-dock.panel-open { right: calc(244px + env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .mascot-dock { transition: none; } .md-cactus:hover img { transform: none; } }
html.reduce-motion .mascot-dock { transition: none; }

/* the start form's success message: the cactus gives a thumbs-up */
.start-form .form-success { display: flex; align-items: center; gap: 16px; }
.start-form .form-success[hidden] { display: none; }
.start-form .form-success img { width: 72px; height: auto; flex: none; }

/* the 7:00am email on the pricing page: the cactus with its coffee, beside the diagram from 980px */
.morning-diagram { position: relative; }
.morning-cactus { display: none; }
@media (min-width: 980px) {
  .morning-cactus { display: block; position: absolute; left: -150px; bottom: 0; width: 132px; height: auto; }
}