/* ==========================================================================
   THE MARKETING BLOCK / DESIGN SYSTEM
   Ported from the Claude Design canvas "Marketing Block Site.dc.html"
   (cards: Homepage 2a, AI Visibility 3a, Mobile home 4c, Scrolly 4a).

   Visual language: editorial / neo-brutalist.
   Hard 2px rules, zero border-radius, hard-offset shadows (no blur),
   Archivo uppercase for structure, Satoshi for reading.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS
   Self-hosted, so no font host sees a page load. Archivo is one variable
   file covering 500 to 900, from Google Fonts (SIL Open Font License).
   Satoshi 400, 500 and 700 come from Fontshare (ITF Free Font License).
   /privacy/ says no outside company serves fonts here; keep that true if a
   face is ever added.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/satoshi-700.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette: sampled from the canvas by frequency */
  --slate:        #1F2E39;  /* primary ink + rules */
  --ink:          #0F1A21;  /* text on mint */
  --mint:         #3DC3A0;  /* primary accent */
  --teal:         #16705D;  /* link hover / deep accent */
  --cream:        #F5F2EA;  /* text on slate */
  --sand:         #F1EDE3;  /* page background */
  --muted:        #3B4C58;  /* secondary slate */
  --grey:         #5E6B74;  /* chrome text. 4.69:1 on sand, WCAG AA */
  --amber:        #E0A35F;  /* score / warning figure. 6.35:1 on slate */
  --flag:         #DF7965;  /* failed check. 4.68:1 on slate, WCAG AA */

  /* Alpha derivatives */
  --slate-80:     rgba(31, 46, 57, .80);
  --slate-72:     rgba(31, 46, 57, .72);
  --slate-55:     rgba(31, 46, 57, .55);
  --slate-18:     rgba(31, 46, 57, .18);
  --slate-10:     rgba(31, 46, 57, .10);
  --cream-90:     rgba(245, 242, 234, .90);
  --cream-70:     rgba(245, 242, 234, .70);
  --cream-66:     rgba(245, 242, 234, .66);
  --cream-30:     rgba(245, 242, 234, .30);
  --cream-20:     rgba(245, 242, 234, .20);
  --cream-14:     rgba(245, 242, 234, .14);
  --cream-08:     rgba(245, 242, 234, .08);

  /* Structure */
  --rule:         2px solid var(--slate);
  --rule-thin:    1px solid var(--slate-18);
  --rule-dark:    1px solid var(--cream-20);
  --shadow:       4px 4px 0 var(--slate);
  --shadow-sm:    3px 3px 0 var(--slate);

  /* Type */
  --display:      'Archivo', system-ui, -apple-system, sans-serif;
  --body:         'Satoshi', system-ui, -apple-system, sans-serif;
  --mono:         ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --maxw:         1280px;
  --pad:          44px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--slate);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Links.
   Inline links in running text carry a permanent underline, because a link
   that is only a slightly different shade of near-black is not discoverable
   without hovering over it by accident.
   Hover then paints the mint highlight used by .mark elsewhere. Colour alone
   was doing the work before and slate to teal measures 2.33:1 against itself,
   which reads as the text fading rather than responding.
   Component links (nav, buttons, cards, pills) announce themselves by shape
   and keep their own hover treatment, so they are excluded below. */
a { color: var(--slate); text-decoration: none; }
a:hover { color: var(--teal); }

p a, .prose li a, .crumbs a, .checklist a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

p a:hover, .prose li a:hover, .crumbs a:hover, .checklist a:hover {
  color: var(--ink);
  background: var(--mint);
  text-decoration-thickness: 2px;
  box-shadow: 0 0 0 2px var(--mint);
}

/* Same links on a dark panel: the mint block would fight the background, so
   these lift to mint text on a thicker rule instead. */
.footer a, .widget a, .section--slate a, .band a {
  text-underline-offset: 3px;
}
/* Running-text links on a dark panel read in cream, not in the slate that
   would vanish into the background. Buttons keep their own colours. */
.section--slate p a, .section--slate li a, .band p a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.footer a:hover, .widget a:hover, .section--slate a:hover, .band a:hover,
.footer p a:hover, .widget p a:hover, .section--slate p a:hover, .band p a:hover {
  color: var(--mint);
  background: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.footer li a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Visible focus for keyboard users: the design has no focus states of its own */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.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;
}

/* Page shell: every page is a bordered column on the sand field */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--sand);
  border-left: var(--rule);
  border-right: var(--rule);
}
@media (max-width: 1320px) {
  .shell { border-left: 0; border-right: 0; }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--mint);
  padding: 8px 12px;
}
.eyebrow--bare {
  background: none;
  color: var(--slate-72);
  padding: 0;
  letter-spacing: .14em;
}
.eyebrow--dark { background: none; color: var(--mint); padding: 0; }

h1, .h1 {
  margin: 0;
  font: 900 58px/1 var(--display);
  letter-spacing: -.028em;
  text-transform: uppercase;
  color: var(--slate);
  text-wrap: pretty;
}
h2, .h2 {
  margin: 0;
  font: 900 34px/1.05 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--slate);
  text-wrap: pretty;
}
h3, .h3 {
  margin: 0;
  font: 800 17px/1.25 var(--display);
  letter-spacing: -.01em;
  color: var(--slate);
}
h4, .h4 {
  margin: 0;
  font: 700 11.5px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* The signature move: knocked-out highlight behind a word in the H1 */
.mark { background: var(--slate); color: var(--mint); padding: 0 10px; }

.lede {
  margin: 24px 0 0;
  max-width: 560px;
  font: 400 17.5px/1.65 var(--body);
  color: var(--slate-80);
  text-wrap: pretty;
}
.prose p { margin: 0 0 16px; font: 400 16px/1.7 var(--body); color: var(--slate-80); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--slate); font-weight: 700; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose h3 { margin: 28px 0 12px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin: 0 0 8px; font: 400 16px/1.7 var(--body); color: var(--slate-80); }
.prose li::marker { color: var(--mint); }
.prose li:last-child { margin-bottom: 0; }

.small { font: 500 13.5px/1.5 var(--body); color: var(--slate-72); }
.mono  { font: 400 11px var(--mono); color: var(--grey); }

/* --------------------------------------------------------------------------
   4. NAV
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: stretch;
  border-bottom: var(--rule);
  background: var(--sand);
  position: relative;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  border-right: var(--rule);
  background: var(--slate);
  flex: none;
}
.nav__brand img { width: 36px; height: 36px; object-fit: cover; }
.nav__brand span {
  font: 800 12px/1.15 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}
.nav__brand:hover span { color: var(--mint); }

.nav__links { flex: 1; display: flex; align-items: stretch; }
.nav__link {
  padding: 0 20px;
  font: 700 11.5px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  border-right: var(--rule-thin);
  display: grid;
  place-items: center;
  white-space: nowrap;
}
.nav__link:last-child { border-right: 0; }
.nav__link:hover { background: var(--slate); color: var(--mint); }
.nav__link[aria-current="page"] { background: var(--slate); color: var(--mint); }

.nav__phone {
  display: grid;
  place-items: center;
  padding: 0 20px;
  font: 600 13px/1 var(--body);
  color: var(--slate);
  border-left: var(--rule-thin);
  white-space: nowrap;
}
.nav__cta {
  display: grid;
  place-items: center;
  padding: 0 26px;
  background: var(--mint);
  border-left: var(--rule);
  font: 800 12px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--teal); color: var(--cream); }

/* Five links plus the phone and the button do not fit between 900 and
   1140px, so on that band the links tighten and the phone number steps
   aside; the button still carries the call to action. */
@media (min-width: 901px) and (max-width: 1140px) {
  .nav__link { padding: 0 13px; font-size: 11px; letter-spacing: .07em; }
  .nav__phone { display: none; }
  .nav__cta { padding: 0 18px; }
}

/* Mobile trigger: hidden on desktop */
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--cream); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: 800 13px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: var(--rule);
  background: var(--mint);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { color: var(--ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--slate); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--slate); }

.btn--slate { background: var(--slate); color: var(--cream); }
.btn--slate:hover { color: var(--mint); }
.btn--ghost { background: none; box-shadow: none; }
.btn--ghost:hover { background: var(--slate); color: var(--mint); transform: none; }
.btn--block { display: block; width: 100%; text-align: center; }

/* Flat button used inside the dark widget: no border, no shadow */
.btn--flat {
  width: 100%;
  background: var(--mint);
  border: none;
  box-shadow: none;
  padding: 15px;
  font: 800 13px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.btn--flat:hover { background: #35ad8e; transform: none; }
a.btn--flat { display: block; text-align: center; text-decoration: none; }

/* --------------------------------------------------------------------------
   6. SECTIONS & GRID
   -------------------------------------------------------------------------- */
.section { padding: 52px var(--pad); border-bottom: var(--rule); }
.section--tight { padding: 36px var(--pad); }
.section--flush { padding: 0; }
.section--slate { background: var(--slate); color: var(--cream); }
.section--slate h2, .section--slate h3 { color: var(--cream); }
.section--slate .lede, .section--slate .prose p { color: var(--cream-90); }
.section--mint { background: var(--mint); }

.section__head { margin: 0 0 28px; }
.section__head .lede { margin-top: 14px; }

/* Split rows divided by hard rules, like the hero */
.split {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  border-bottom: var(--rule);
}
.split > * + * { border-left: var(--rule); }
.split--even { grid-template-columns: 1fr 1fr; }
.split__pane { padding: 56px var(--pad) 52px; }
.hero__actions { margin: 30px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Once a report opens, the widget column can run several times the height of
   the hero copy beside it, leaving a tall empty column. Sticking the copy
   keeps the pitch in view while the report is read. Scoped to the pane that
   sits next to the widget so other split sections are untouched, and dropped
   entirely below 900px where the two columns stack. */
@media (min-width: 901px) {
  .split > .split__pane:has(+ .widget) { position: sticky; top: 0; align-self: start; }

  /* Ratio scoped above the stacking breakpoint so a phone gets one column. */
  .split--book { grid-template-columns: .85fr 1.15fr; }
}

/* Equal columns separated by rules */
.cols { display: grid; border-bottom: var(--rule); }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols > * { padding: 32px 28px; border-right: var(--rule); }
.cols > *:last-child { border-right: 0; }

/* --------------------------------------------------------------------------
   7. COMPONENTS
   -------------------------------------------------------------------------- */

/* Checklist with mint tick squares */
.checklist { margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; max-width: 520px; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: 12px; }
.checklist li::before {
  content: "✓";
  flex: none;
  width: 26px; height: 26px;
  background: var(--mint);
  display: grid; place-items: center;
  font: 800 12px var(--display);
  color: var(--ink);
}
.checklist span { font: 500 15px/1.4 var(--body); color: var(--slate); }
.section--slate .checklist span { color: var(--cream); }

/* Numbered tile: the "3 tests" pattern */
.tile { padding: 28px; border-right: var(--rule); }
.tile:last-child { border-right: 0; }
.tile__n {
  font: 900 24px/1.05 var(--display);
  color: var(--mint);
  display: block;
  margin-bottom: 10px;
}
.tile__tag {
  display: inline-block;
  font: 700 10.5px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--slate-10);
  color: var(--slate);
  padding: 5px 8px;
  margin-bottom: 12px;
}
.tile h3 { margin-bottom: 8px; }
.tile p { margin: 0; font: 400 14px/1.65 var(--body); color: var(--slate-80); }

/* Stat block */
.stat { padding: 28px; border-right: var(--rule); }
.stat:last-child { border-right: 0; }
.stat__fig { font: 900 40px/1 var(--display); letter-spacing: -.02em; color: var(--slate); }
.stat__label { margin-top: 10px; font: 500 13px/1.5 var(--body); color: var(--slate-72); }
.section--slate .stat__fig { color: var(--mint); }
.section--slate .stat__label { color: var(--cream-70); }

/* Card with hard shadow */
.card { border: var(--rule); background: var(--cream); padding: 26px; box-shadow: var(--shadow); }
.card--flat { box-shadow: none; }

/* Quote / proof */
.quote { border: var(--rule); background: var(--cream); padding: 28px; }
.quote p { margin: 0; font: 400 16px/1.7 var(--body); color: var(--slate); }
.quote footer { margin-top: 16px; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-72); }

/* FAQ: written as liftable answers for AI extraction (spec card 2b) */
.faq { border-top: var(--rule); }
.faq__item { border-bottom: var(--rule); }
.faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 20px var(--pad);
  font: 800 17px/1.35 var(--display);
  color: var(--slate);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq__q::after { content: "+"; font: 900 22px/1 var(--display); color: var(--mint); flex: none; }
.faq__item.is-open .faq__q::after { content: "–"; }
.faq__a { padding: 0 var(--pad) 22px; max-width: 760px; display: none; }
.faq__item.is-open .faq__a { display: block; }
.faq__a p { margin: 0 0 12px; font: 400 15.5px/1.7 var(--body); color: var(--slate-80); }
.faq__a p:last-child { margin-bottom: 0; }

/* Dark scan widget */
.widget { background: var(--slate); padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; }
.widget__frame { border: var(--rule-dark); }
.widget__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: var(--rule-dark);
}
.widget__title { font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.widget__meta { font: 400 11px var(--mono); color: var(--cream-66); }
.widget__body { padding: 20px 18px 18px; }
.widget p { color: var(--cream-90); }
.widget__note { margin: 12px 0 0; font: 400 12px/1.5 var(--body); color: var(--cream-66); }
.widget__note a { color: var(--mint); text-decoration: underline; text-underline-offset: 2px; }

.field {
  width: 100%;
  background: var(--cream-08);
  border: 1px solid var(--cream-30);
  padding: 14px;
  font: 400 14px var(--mono);
  color: var(--cream);
  outline: none;
}
.field--text { font: 400 14px var(--body); }
.field::placeholder { color: var(--cream-66); }
.field:focus { border-color: var(--mint); }
.field-stack { display: flex; flex-direction: column; gap: 8px; }

.scanrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--cream-14);
  background: rgba(245, 242, 234, .05);
}
.scanrow__label { font: 500 13px/1.3 var(--body); color: var(--cream-90); }
.scanrow__badge { font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.scanrow-stack { display: flex; flex-direction: column; gap: 7px; }

.score { font: 900 34px/1 var(--display); color: var(--amber); }
.score span { font-size: 14px; color: var(--cream-66); }

/* Result panes for the AI visibility check.
   Every row here is one measured fact returned by /api/audit. */
.scanrow--open { flex-direction: column; align-items: stretch; gap: 6px; }
.scanrow__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.scanrow__detail { margin: 0; font: 400 12.5px/1.55 var(--body); color: var(--cream-70); }
.scanrow__fix { margin: 4px 0 0; font: 500 12.5px/1.55 var(--body); color: var(--mint); }
.scanrow__fix b { font-weight: 700; }

.is-pass { color: var(--mint); }
.is-warn { color: var(--amber); }
.is-fail { color: var(--flag); }
.is-info { color: var(--cream-66); }

.scanrow.is-pass, .scanrow.is-warn, .scanrow.is-fail { border-left: 3px solid currentColor; }
.scanrow.is-pass .scanrow__label,
.scanrow.is-warn .scanrow__label,
.scanrow.is-fail .scanrow__label { color: var(--cream-90); }

/* Score header */
.scanscore { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: var(--rule-dark); }
.scanscore__num { font: 900 44px/1 var(--display); }
.scanscore__num span { font-size: 15px; color: var(--cream-66); }
.scanscore__meta { font: 400 12px/1.5 var(--body); color: var(--cream-70); }
.scanscore__meta b { display: block; font: 700 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); margin-bottom: 4px; }

/* The single worst finding, stated before anything else */
.scanhead { margin: 14px 0; padding: 13px 14px; border: 1px solid var(--cream-14); background: rgba(245, 242, 234, .05); }
.scanhead__kicker { display: block; margin-bottom: 7px; font: 700 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.scanhead__label { margin: 0 0 5px; font: 700 13.5px/1.35 var(--body); }
.scanhead__detail { margin: 0; font: 400 12.5px/1.55 var(--body); color: var(--cream-70); }

/* Grouped checks. The score and the worst finding stay put; the detail
   scrolls, so a twenty-check report cannot stretch the hero. */
.scanscroll { max-height: 46vh; min-height: 220px; overflow-y: auto; padding-right: 6px; }
.scanscroll::-webkit-scrollbar { width: 6px; }
.scanscroll::-webkit-scrollbar-thumb { background: var(--cream-30); }
.scangroup { margin-top: 16px; }
.scangroup:first-child { margin-top: 4px; }
.scangroup__title { font: 700 10.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.scangroup__blurb { margin: 6px 0 9px; font: 400 12px/1.5 var(--body); color: var(--cream-66); }

/* On /scan/ the check owns the full page width, so the report lays out as a
   grid of the three tests instead of a scrolling box in a hero column. */
.widget--page { padding: 40px var(--pad); }
.widget--page .widget__body { padding: 24px 22px; }
.widget--page .scanscroll {
  max-height: none; min-height: 0; overflow: visible; padding-right: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 8px 26px; align-items: start;
}
.widget--page .scangroup { margin-top: 12px; }
.widget--page .scangroup--wide { grid-column: 1 / -1; margin-top: 22px; padding-top: 20px; border-top: var(--rule-dark); }
.widget--page .scangroup--wide .scanrow-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 7px 26px; }
.widget--page .scanscore { padding-bottom: 18px; }
.widget--page .scanscore__num { font-size: 56px; }
/* Inline field row. .field and .btn--flat both carry width:100% for the
   stacked layout, so both need overriding before flex can share the row. */
.widget--page .field-stack--inline { flex-direction: row; align-items: stretch; max-width: 660px; gap: 10px; }
.widget--page .field-stack--inline .field { flex: 1 1 auto; width: auto; min-width: 0; }
.widget--page .field-stack--inline .btn--flat { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 15px 26px; }

/* Running state: a turning mark and one line at a time.

   The mark turns in eight hard steps rather than sweeping, because a smooth
   spin is the one shape in this design language that has no corners. Steps
   keep it mechanical and on the same grid as everything else. */
.scanspin { display: flex; align-items: center; gap: 14px; padding: 10px 0 12px; min-height: 46px; }
.scanspin__mark {
  flex: 0 0 auto; width: 18px; height: 18px; background: var(--mint);
  animation: scanturn 1.2s steps(8, end) infinite;
}
.scanspin__line { margin: 0; font: 500 14.5px/1.45 var(--body); color: var(--cream); }
.scanspin__line.is-in { animation: scanlinein .35s ease both; }
.scanspin__sub { margin: 0 0 4px; font: 400 12.5px/1.5 var(--body); color: var(--cream-66); }

@keyframes scanturn   { to { transform: rotate(360deg); } }
@keyframes scanlinein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.scanwait__bar { height: 4px; background: var(--cream-14); margin-top: 12px; }
.scanwait__fill { height: 100%; width: 0; background: var(--mint); transition: width .5s ease; position: relative; overflow: hidden; }

/* A travelling sheen over the bar, so the fill reads as moving even while it
   creeps. Decoration over a real fetch. */
.scanwait__fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245, 242, 234, .5), transparent);
  animation: scansheen 1.15s linear infinite;
}
@keyframes scansheen { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* --------------------------------------------------------------------------
   THE REPORT GATE
   Tests two and three are blurred until the visitor identifies themselves.
   The report underneath is whole: unlocking is a class change, not a second
   request. Blur is a presentational lock and nothing more, so the markup is
   also taken out of the accessibility tree in js/main.js. Anyone determined
   enough to open devtools can read it, which is fine. This is a gate on a
   marketing page, not a permission boundary.
   -------------------------------------------------------------------------- */
.scangroup.is-locked {
  filter: blur(7px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

.scangate {
  margin-top: 18px; padding: 20px 18px;
  border: 1px solid var(--mint); background: rgba(61, 195, 160, .07);
}
.scangate__kicker {
  display: block; font: 700 10px/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mint);
}
.scangate__title {
  margin: 10px 0 0; font: 800 19px/1.25 var(--display);
  letter-spacing: -.01em; color: var(--cream);
}
.scangate__blurb { margin: 8px 0 15px; font: 400 13px/1.6 var(--body); color: var(--cream-70); }
.scangate .field-stack { gap: 8px; }

/* Hero only: the report box gives up height to the gate so the two together
   stay near the size the box was before. /scan/ opts out below. */
.widget.is-gated .scanscroll { max-height: 26vh; min-height: 150px; }
.widget.is-gated .scangate { padding: 16px 15px; }
.widget.is-gated .scangate__title { font-size: 17px; }
.widget.is-gated .scangate__blurb { margin-bottom: 12px; font-size: 12.5px; }
.widget--page.is-gated .scanscroll { max-height: none; min-height: 0; }
.widget--page.is-gated .scangate { padding: 20px 18px; }
.widget--page.is-gated .scangate__title { font-size: 19px; }
.widget--page.is-gated .scangate__blurb { font-size: 13px; }

/* --------------------------------------------------------------------------
   BOOKING HAND-OFF
   Shown once the report is fully open. One primary action: pick a time. The
   email route stays available underneath as plain text, deliberately lighter,
   so the two are ranked rather than competing.
   -------------------------------------------------------------------------- */
.scanbook {
  margin-top: 18px; padding: 20px 18px;
  border: 1px solid var(--cream-20); background: rgba(245, 242, 234, .05);
}
.scanbook__kicker {
  display: block; font: 700 10px/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mint);
}
.scanbook__title {
  margin: 10px 0 0; font: 800 19px/1.25 var(--display);
  letter-spacing: -.01em; color: var(--cream);
}
.scanbook__blurb { margin: 8px 0 0; font: 400 13px/1.6 var(--body); color: var(--cream-70); }
.scanbook__list { margin: 13px 0 16px; padding: 0; list-style: none; }
.scanbook__list li {
  position: relative; padding-left: 19px; margin-bottom: 7px;
  font: 400 13px/1.55 var(--body); color: var(--cream-90);
}
.scanbook__list li::before { content: '→'; position: absolute; left: 0; color: var(--mint); }
.scanbook__alt {
  display: block; width: 100%; margin-top: 11px;
  background: none; border: 0; padding: 4px 0;
  font: 500 12.5px/1.4 var(--body); color: var(--cream-70);
  text-align: center; text-decoration: underline; cursor: pointer;
}
.scanbook__alt:hover { color: var(--cream); }

/* On /scan/ the widget owns the page width. Both panels are reading matter,
   so they stop at a comfortable measure instead of running the full 1280. */
.widget--page .scangate,
.widget--page .scanbook { max-width: 640px; }

@media (prefers-reduced-motion: reduce) {
  /* The mark stays, it just stops turning: something on screen should still
     say the page is busy. The lines keep changing, they simply appear. */
  .scanspin__mark,
  .scanspin__line.is-in,
  .scanwait__fill::after { animation: none; }
  .scanwait__fill { transition: none; }
}

/* Scroll-driven "3 tests" section (canvas card 4a) */

/* Full-width CTA band */
.band { background: var(--slate); padding: 48px var(--pad); border-bottom: var(--rule); }
.band h2 { color: var(--cream); }
.band .lede { color: var(--cream-90); max-width: 680px; }
.band__actions { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* The founder video band on /chiropractor/.

   The 540px cap is not a taste call. The file is 1280 wide, and a 2x laptop
   screen draws a 760px box with 1520 device pixels, so the picture gets
   upscaled and goes soft. 540 lands on 1080 and stays inside the source.

   Two columns from 900px up. Stacked, this band measured 806px tall on a
   900px laptop viewport and pushed the entire hero below the fold, so the
   page opened on nothing but the video and looked like it had no more to it.
   Side by side the band is as tall as its taller column instead of the sum of
   both, and the headline underneath stays on screen. */
.band--video .video { max-width: 540px; margin-top: 26px; }
.band--video .video .btn { margin-top: 14px; }
@media (min-width: 900px) {
  .band--video {
    padding: 30px var(--pad);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 540px;
    column-gap: 48px;
    align-items: center;
  }
  .band--video .section__head { margin: 0; }
  .band--video .video { margin-top: 0; }
}

/* Breadcrumb */
.crumbs { padding: 14px var(--pad); border-bottom: var(--rule); font: 500 12px/1 var(--body); color: var(--slate-72); }
.crumbs a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--slate); color: var(--cream); padding: 48px var(--pad) 32px; }
.footer a { color: var(--cream-90); }
.footer a:hover { color: var(--mint); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer__brand img { width: 36px; height: 36px; object-fit: cover; }
.footer__brand span { font: 800 12px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.footer h4 { color: var(--mint); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer li { font: 400 14px/1.4 var(--body); }
.footer__bar {
  margin-top: 36px; padding-top: 20px;
  border-top: var(--rule-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 400 12.5px/1.5 var(--body); color: var(--cream-66);
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE: mobile mirrors canvas card 4c (390px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --pad: 16px; }

  /* The inline field on /scan/ stacks like every other field group */
  .widget--page .field-stack--inline { flex-direction: column; }

  /* Nav collapses to slate bar: brand + Call + hamburger */
  .nav { background: var(--slate); border-bottom: var(--rule); align-items: center; padding: 12px 14px; flex-wrap: wrap; }
  .nav__brand { padding: 0; border-right: 0; gap: 9px; }
  .nav__brand img { width: 30px; height: 30px; }
  .nav__brand span { font-size: 10px; }
  .nav__toggle { display: flex; order: 3; margin-left: 8px; }
  .nav__phone {
    order: 2; margin-left: auto; border-left: 0; padding: 9px 11px;
    background: var(--mint); color: var(--ink);
    font: 800 10px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  }
  .nav__cta { display: none; }

  .nav__links {
    order: 4; flex-basis: 100%; display: none;
    flex-direction: column; align-items: stretch;
    margin-top: 12px; border-top: var(--rule-dark); padding-top: 8px;
  }
  .nav__links.is-open { display: flex; }
  .nav__link {
    color: var(--cream); border-right: 0; border-bottom: var(--rule-dark);
    padding: 14px 0; place-items: start;
  }
  .nav__link:hover, .nav__link[aria-current="page"] { background: none; color: var(--mint); }

  /* Everything stacks; vertical rules become horizontal */
  .split, .split--even { grid-template-columns: 1fr; }
  .split > * + * { border-left: 0; border-top: var(--rule); }
  .split__pane { padding: 22px var(--pad) 20px; }
  .split--hero .split__pane { display: flex; flex-direction: column; align-items: flex-start; }
  .split--hero .checklist { order: 1; }
  .split--hero .hero__actions { margin-top: 22px; }

  .cols--2, .cols--3, .cols--4 { grid-template-columns: 1fr; }
  .cols > * { border-right: 0; border-bottom: var(--rule); }
  .cols > *:last-child { border-bottom: 0; }
  .tile, .stat { border-right: 0; border-bottom: var(--rule); }
  .tile:last-child, .stat:last-child { border-bottom: 0; }

  .section { padding: 24px var(--pad); }
  .shell { border-left: 0; border-right: 0; }

  h1, .h1 { font-size: 33px; letter-spacing: -.025em; }
  h2, .h2 { font-size: 24px; }
  .mark { padding: 0 6px; }
  .lede { margin-top: 14px; font-size: 15px; }
  .eyebrow { font-size: 9.5px; padding: 7px 10px; letter-spacing: .14em; }
  .checklist { margin-top: 16px; gap: 8px; }
  .checklist li::before { width: 22px; height: 22px; font-size: 11px; }
  .checklist span { font-size: 13.5px; }

  .widget { padding: 16px; }
  .band { padding: 28px var(--pad); }
  .footer { padding: 32px var(--pad) 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .faq__q { padding: 16px var(--pad); font-size: 15px; }
  .faq__a { padding: 0 var(--pad) 18px; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  h1, .h1 { font-size: 28px; }

  /* The booking calendar will not lay out below 297px: the GoHighLevel widget
     holds a 280px floor at a 17px inset, and the frame's overflow:hidden clips
     whatever spills past it. The padding either side of the iframe would leave
     it 305px at 375px wide and less than that on a narrower phone, so on a
     phone that padding is dropped and the calendar takes the full width of the
     card. The copy above and below it is inset on its own, to the same 18px as
     the card's head. Above 480px the padded card has room to spare. */
  .widget--cal { padding: 0; }
  .widget--cal .widget__body { padding: 16px 0 14px; }
  .widget--cal .widget__body > p,
  .widget--cal .widget__note { padding-left: 18px; padding-right: 18px; }
}

/* --------------------------------------------------------------------------
   10. PAGE-LEVEL BLOCKS
   -------------------------------------------------------------------------- */

/* Engine marquee band */
.marquee { background: var(--slate); padding: 13px 0; overflow: hidden; border-bottom: var(--rule); }
.marquee__track { display: flex; gap: 34px; width: max-content; animation: mbmarq 22s linear infinite; }
.marquee span {
  font: 800 12.5px/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-66); white-space: nowrap;
}
.marquee span:nth-child(odd) { color: var(--mint); }
@keyframes mbmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Service cards */
.svc { padding: 28px; border-right: var(--rule); display: flex; flex-direction: column; }
.svc:last-child { border-right: 0; }
.svc--flagship { background: var(--mint); }
.svc__kicker { font: 800 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-72); }
.svc--flagship .svc__kicker { color: rgba(15, 26, 33, .85); }
.svc h3 { margin: 14px 0 0; font: 900 24px/1.05 var(--display); text-transform: uppercase; }
.svc--flagship h3 { color: var(--ink); }
.svc p { margin: 12px 0 0; font: 400 14.5px/1.65 var(--body); color: var(--slate-72); }
.svc--flagship p { color: rgba(15, 26, 33, .85); }
.svc__list { margin: 16px 0 0; font: 500 13px/1.9 var(--body); color: var(--slate-80); }
.svc--flagship .svc__list { color: rgba(15, 26, 33, .85); }
.svc__more {
  margin-top: auto; padding-top: 18px; padding-bottom: 3px;
  font: 800 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); border-bottom: 2px solid var(--mint); align-self: flex-start;
}
.svc--flagship .svc__more { color: var(--ink); border-bottom-color: var(--ink); }

/* Bordered box that carries its own frame within a padded section */
.framed { margin: 0 var(--pad) 56px; border: var(--rule); }
.framed__head {
  padding: 24px 28px; border-bottom: var(--rule); background: var(--slate);
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}
.framed__head h2 { color: var(--cream); font-size: 26px; letter-spacing: -.01em; }
.framed__head .mono { color: var(--mint); font-size: 12px; }

/* Pills */
.pillset { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font: 700 11.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); border: 1.5px solid var(--slate); padding: 8.5px 14px;
}
.pill--solid { color: var(--cream); background: var(--slate); border-color: var(--slate); padding: 10px 14px; }
.pill--dashed { color: var(--teal); border-style: dashed; border-color: var(--teal); }
.pill--link:hover { background: var(--slate); color: var(--mint); }

/* Founder video, in the hero above the free check */
.video { margin: 0 0 24px; }
.video__label { display: block; margin: 0 0 10px; font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.video__player { display: block; width: 100%; height: auto; border: var(--rule-dark); background: var(--ink); }
.video__transcript { margin-top: 10px; font: 400 14px/1.6 var(--body); color: var(--cream-70); }
.video__transcript summary { cursor: pointer; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-90); }
.video__transcript p { margin: 10px 0 0; color: var(--cream-70); }

/* Founder block */
.founder { display: grid; grid-template-columns: 318px 1fr; border-top: var(--rule); border-bottom: var(--rule); background: #fff; }
.founder img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; object-position: 56% 32%; border-right: var(--rule); }
.founder__body { padding: 40px var(--pad); display: flex; flex-direction: column; justify-content: center; }

/* Photo placeholder: used where a real asset is still outstanding */
.photo-slot {
  min-height: 340px;
  background: repeating-linear-gradient(135deg, var(--slate-10) 0 6px, transparent 6px 12px);
  border-right: var(--rule);
  display: grid; place-items: center; text-align: center; padding: 24px;
  font: 400 10.5px/1.7 var(--mono); color: var(--slate-72);
}
.slot {
  background: repeating-linear-gradient(135deg, var(--slate-10) 0 6px, transparent 6px 12px);
  display: grid; place-items: center; text-align: center; padding: 20px;
  font: 400 10.5px/1.7 var(--mono); color: var(--slate-72);
}

/* Result cards */
.result { padding: 26px; border-right: var(--rule); background: #fff; display: flex; flex-direction: column; }
.result:last-child { border-right: 0; }
.result--mint { background: var(--mint); }
.result__label { font: 700 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.result--mint .result__label { color: rgba(15, 26, 33, .85); }
.result__fig { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
.result__fig b { font: 900 46px/1 var(--display); color: var(--slate); font-weight: 900; }
.result--mint .result__fig b { color: var(--ink); }
.result__fig span { font: 600 14px/1.3 var(--body); color: var(--slate-80); }
.result--mint .result__fig span { color: rgba(15, 26, 33, .85); }
.result p { margin: 14px 0 0; font: 400 13.5px/1.65 var(--body); color: var(--slate-80); }
.result--mint p { color: rgba(15, 26, 33, .85); }

/* Offset CTA box */
.ctabox {
  margin: 0 var(--pad) 52px;
  background: var(--mint); border: var(--rule); box-shadow: 6px 6px 0 var(--slate);
  padding: 44px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
}
.ctabox h2 { color: var(--ink); font-size: 34px; letter-spacing: -.02em; }
.ctabox p { margin: 14px 0 0; font: 500 15px/1.65 var(--body); color: rgba(15, 26, 33, .85); }
.ctabox__form { display: flex; flex-direction: column; gap: 8px; }
.ctabox__field {
  background: var(--cream); border: var(--rule); padding: 15px 16px;
  font: 400 14px var(--mono); color: var(--slate); width: 100%;
}
.ctabox__btn {
  text-align: center; background: var(--slate); color: var(--mint); border: var(--rule); padding: 17px;
  font: 800 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.ctabox__btn:hover { background: var(--ink); color: var(--mint); }

@media (max-width: 900px) {
  .svc { border-right: 0; border-bottom: var(--rule); }
  .svc:last-child { border-bottom: 0; }
  .framed { margin: 0 var(--pad) 24px; }
  .framed__head { padding: 16px; flex-direction: column; gap: 8px; }
  .framed__head h2 { font-size: 20px; }
  .founder { grid-template-columns: 1fr; }
  .founder img, .photo-slot { min-height: 240px; border-right: 0; border-bottom: var(--rule); }
  .founder__body { padding: 22px var(--pad); }
  .result { border-right: 0; border-bottom: var(--rule); }
  .result:last-child { border-bottom: 0; }
  .ctabox { margin: 0 var(--pad) 24px; padding: 22px; grid-template-columns: 1fr; gap: 20px; box-shadow: 4px 4px 0 var(--slate); }
  .ctabox h2 { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   11. MOTION
   Decoration on top of a page that already works. The reveal classes are
   only ever added by main.js, so with scripting off nothing is hidden, and
   main.js skips the lot when the visitor asks for reduced motion. The
   reduced-motion block at the end is the backstop for everything else.
   -------------------------------------------------------------------------- */

/* Blocks rise in as they reach the viewport; grid children stagger */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Hover: the service cards invert the way the nav does; pills lift */
.svc { transition: background .18s ease; }
.svc h3, .svc p, .svc__list, .svc__kicker, .svc__more { transition: color .18s ease, border-color .18s ease; }
a.svc:hover { background: var(--slate); }
a.svc:hover h3 { color: var(--cream); }
a.svc:hover p, a.svc:hover .svc__list, a.svc:hover .svc__kicker { color: var(--cream-70); }
a.svc:hover .svc__more { color: var(--mint); border-bottom-color: var(--mint); }
.pill { transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pill--link:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--slate); }
.nav__link, .nav__cta, .ctabox__btn, .btn--flat, .scanbook__alt { transition: background .15s ease, color .15s ease; }

/* The widget says it runs in seconds; the dot says it is awake */
.widget__meta::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  background: var(--mint); vertical-align: 1px;
  animation: livepulse 1.8s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Result figures count up. main.js pins each one's width first so the label
   beside it does not jump while the digits change. */
.result__fig b { display: inline-block; font-variant-numeric: tabular-nums; }

/* Mobile thumb bar: call or book from anywhere on the page. Hidden on
   desktop, where the nav carries both. main.js tucks it away until the
   visitor has scrolled past the top of the page; with scripting off it
   simply stays. Not present on /booking/ and /contact/, which are the
   destination. */
.stickybar { display: none; }
@media (max-width: 900px) {
  .stickybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 2fr 3fr;
    border-top: var(--rule); background: var(--slate);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .stickybar.is-off { transform: translateY(110%); }
  .stickybar a {
    display: grid; place-items: center; padding: 17px 10px; text-align: center;
    font: 800 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  }
  .stickybar__call { color: var(--cream); border-right: var(--rule-dark); }
  .stickybar__call:hover { color: var(--mint); }
  .stickybar__book { background: var(--mint); color: var(--ink); }
  .stickybar__book:hover { background: var(--teal); color: var(--cream); }
  body:has(.stickybar) .footer { padding-bottom: 100px; }
}

/* --------------------------------------------------------------------------
   13. /CHIRO/: the chiropractic landing page
   Its own homepage for one trade. The hero carries an illustrated AI answer
   instead of the check, the problem grid pairs each problem with its fix
   and a small looping picture, and the calendar sits on the page itself.
   -------------------------------------------------------------------------- */
.split--chiro .split__pane:last-child {
  background: var(--slate); padding: 40px 36px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  position: relative; overflow: hidden;
}
/* Ambient clip behind the answer, only when a file is in place */
.hero__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; pointer-events: none; }

/* The AI answer, illustrated */
.answer { position: relative; width: 100%; max-width: 500px; background: var(--cream); border: var(--rule); box-shadow: 6px 6px 0 var(--mint); }
.answer__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: var(--rule-thin); }
.answer__dot { width: 9px; height: 9px; background: var(--slate-18); }
.answer__app { margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--slate-72); }
.answer__q {
  margin: 16px 16px 0 auto; width: fit-content; max-width: 80%;
  background: var(--slate); color: var(--cream); padding: 10px 14px;
  font: 500 14px/1.5 var(--body); min-height: 41px;
}
.answer__a { margin: 12px 16px 0; padding: 12px 14px 14px; border: var(--rule-thin); font: 400 14.5px/1.6 var(--body); color: var(--slate); min-height: 150px; }
.answer__a p { margin: 0; }
.answer__a strong { background: var(--mint); color: var(--ink); padding: 0 5px; font-weight: 700; }
.answer__a.is-typing p::after {
  content: ''; display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: var(--slate); animation: caret .9s steps(2, start) infinite;
}
@keyframes caret { to { visibility: hidden; } }
.answer__why { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.answer__why li {
  font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); border: 1.5px solid var(--teal); padding: 6px 8px;
  opacity: 0; transition: opacity .4s ease;
}
.answer.is-done .answer__why li { opacity: 1; }
.answer.is-done .answer__why li:nth-child(2) { transition-delay: .15s; }
.answer.is-done .answer__why li:nth-child(3) { transition-delay: .3s; }
.answer__note { margin: 0; padding: 12px 16px 14px; font: 400 11.5px/1.5 var(--body); color: var(--slate-72); }

/* Problem grid: the problem, the fix, and a small looping picture */
.problems { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--rule); background: #fff; }
.problem { display: flex; flex-direction: column; border-right: var(--rule); border-bottom: var(--rule); }
.problem:nth-child(3n) { border-right: 0; }
.problem:nth-last-child(-n+3) { border-bottom: 0; }
.problem__pic { display: block; width: 100%; height: auto; background: var(--sand); border-bottom: var(--rule-thin); }
.problem__body { padding: 20px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.problem__k { font: 700 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-72); }
.problem h3 { margin: 10px 0 0; font: 800 18px/1.3 var(--display); letter-spacing: -.01em; }
.problem__fix { margin-top: auto; padding-top: 16px; }
.problem__fix::before { content: ''; display: block; width: 36px; height: 3px; background: var(--mint); margin-bottom: 14px; }
.problem__fix .problem__k { color: var(--teal); }
.problem__fix p { margin: 8px 0 0; font: 400 14px/1.6 var(--body); color: var(--slate-80); }
.problem__fix a {
  display: inline-block; margin-top: 12px; padding-bottom: 3px;
  font: 800 11.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid var(--mint);
}
.problem__fix a:hover { color: var(--teal); border-bottom-color: var(--slate); }

/* The pictures. Base state is the finished state, so with animation off
   (reduced motion, print) each one shows its ending. */
.pic text { font: 500 12px var(--body); fill: var(--slate); }
.pic .pic-t-cream { fill: var(--cream); }
.pic .pic-t-mono { font: 600 10px var(--mono); letter-spacing: .06em; }
.pic .pic-t-b { font-weight: 700; }
.pic [class*="pic-a-"] { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease; transform-box: fill-box; transform-origin: center; }
.pic-a-pulse { animation-name: picpulse; }
.pic-a-pop { animation-name: picpop; }
.pic-a-fade { animation-name: picfade; }
.pic-a-rise { animation-name: picrise; }
.pic-a-drop { animation-name: picdrop; }
.pic-a-swap { animation-name: picswap; }
.pic-a-tick { animation-name: pictick; }
@keyframes picpulse { 0%, 40% { opacity: 1; } 48%, 100% { opacity: .12; } }
@keyframes picpop   { 0%, 44% { opacity: 0; transform: translateY(6px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes picfade  { 0%, 24% { opacity: 1; } 32%, 56% { opacity: .15; } 66%, 100% { opacity: 1; } }
@keyframes picrise  { 0%, 34% { transform: translateY(72px); } 48%, 100% { transform: none; } }
@keyframes picdrop  { 0%, 34% { transform: translateY(-36px); } 48%, 100% { transform: none; } }
@keyframes picswap  { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pictick  { 0%, 30% { opacity: 0; } 40%, 100% { opacity: 1; } }

/* Mike on the result: a face beside the next step */
.scanbook__who { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cream-14); }
.scanbook__who img { flex: none; width: 52px; height: 52px; object-fit: cover; object-position: 50% 10%; border: 2px solid var(--mint); }
.scanbook__who span { font: 500 13.5px/1.45 var(--body); color: var(--cream-90); }

/* Two columns on slate: what's in it, and who it is not for */
.twoup { display: grid; grid-template-columns: 1.1fr .9fr; }
.twoup__a { padding-right: 40px; border-right: 1px solid var(--cream-20); }
.twoup__b { padding-left: 40px; }
.notlist { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.notlist li { position: relative; padding-left: 28px; font: 400 15px/1.6 var(--body); color: var(--cream-90); }
.notlist li::before { content: '\2715'; position: absolute; left: 0; top: 0; font: 800 13px/1.6 var(--display); color: var(--flag); }
.notlist a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.notlist a:hover { color: var(--mint); }

/* The right patients: what the site says against what the patient types */
.want { display: grid; grid-template-columns: .9fr 1.1fr; border: var(--rule); background: #fff; }
.want__no { background: var(--slate); padding: 28px; }
.want__no .problem__k { color: var(--cream-66); }
.want__yes { padding: 28px; }
.want__yes p { margin: 16px 0 0; font: 400 14.5px/1.65 var(--body); color: var(--slate-80); }
.search {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  border: var(--rule); background: var(--cream); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.search__icon { flex: none; width: 18px; height: 18px; }
.search__text { font: 500 16px/1.3 var(--body); color: var(--slate); min-height: 21px; overflow-wrap: anywhere; }
.search__text::after {
  content: ''; display: inline-block; width: 2px; height: 17px; margin-left: 2px; vertical-align: -3px;
  background: var(--slate); animation: caret .9s steps(2, start) infinite;
}
.search.is-static .search__text::after { display: none; }
.queries { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.queries li { font: 500 12.5px/1 var(--body); color: var(--slate-80); border: 1.5px solid var(--slate-18); padding: 7px 10px; }

/* Check section on the page: copy beside the widget */
.split--check .split__pane:last-child { background: var(--slate); padding: 36px; display: flex; align-items: center; }
.split--check .widget { width: 100%; max-width: 520px; margin: 0 auto; }

/* Calendar on the page */
.bookhere { display: grid; grid-template-columns: .9fr 1.1fr; border-bottom: var(--rule); }
.bookhere > * + * { border-left: var(--rule); }
.bookhere__copy { padding: 52px var(--pad); }
.bookhere__cal { background: var(--slate); padding: 28px; }

@media (max-width: 900px) {
  .split--chiro .split__pane:last-child { padding: 24px var(--pad) 28px; }
  .answer__a { min-height: 132px; }
  .problems { grid-template-columns: 1fr; }
  .problem { border-right: 0; border-bottom: var(--rule); }
  .problem:last-child { border-bottom: 0; }
  .split--check .split__pane:last-child { padding: 20px var(--pad) 24px; }
  .twoup { grid-template-columns: 1fr; }
  .want { grid-template-columns: 1fr; }
  .want__no, .want__yes { padding: 22px var(--pad); }
  .twoup__a { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--cream-20); }
  .twoup__b { padding: 24px 0 0; }
  .bookhere { grid-template-columns: 1fr; }
  .bookhere > * + * { border-left: 0; border-top: var(--rule); }
  .bookhere__copy { padding: 24px var(--pad); }
  .bookhere__cal { padding: 16px; }
}

/* Same reason as .widget--cal in section 9: on a phone the calendar column
   gives up its padding so the GoHighLevel widget clears its 297px floor.
   It sits here, after the rule above, because that one would otherwise win
   on source order. */
@media (max-width: 480px) {
  .bookhere__cal { padding: 0; }
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .widget__meta::before { animation: none; }
  .pic [class*="pic-a-"] { animation: none; }
  .answer__why li { opacity: 1; }
  .search__text::after { display: none; }
}

@media print {
  .nav, .band, .footer, .widget, .stickybar, .bookhere__cal { display: none; }
  .pic [class*="pic-a-"] { animation: none; }
  body { background: #fff; }
}