/* ============================================================================
   801 S Chester — core: reset, base elements, layout, components.
   Layer 2 of 3.  Load AFTER tokens.css, BEFORE the theme files.

   RULE: not one raw colour value below this line. Every colour is a semantic
   token from tokens.css, so a theme file can repaint the whole system without
   touching this file. If a component needs a colour that has no semantic
   token, the token is missing — add it, do not inline a hex.

   Mobile-first. Every media query is min-width. There is no max-width query.
   Breakpoints: 480 / 768 / 1024.
   ============================================================================ */

/* --- reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Controls do not inherit type by default in any browser. */
input, select, textarea, button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- base --------------------------------------------------------------- */

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

body {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Any element carrying a theme paints its own background. Without this a
   themed block inherits the page's background and the focus ring inside it
   is measured against the wrong colour — the contrast numbers in the README
   assume every [data-theme] block is opaque. */
[data-theme] {
  background-color: var(--surface);
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-normal);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-6); line-height: var(--lh-tight); text-transform: var(--display-transform); }
h2 { font-size: var(--fs-4); line-height: var(--lh-tight); text-transform: var(--display-transform); }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }

p  { max-width: var(--measure); }

a { color: inherit; text-underline-offset: 0.2em; }

strong, b { font-weight: var(--fw-bold); }

address { font-style: normal; }

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--border);
  margin-block: var(--sp-6);
}

/* One focus treatment for everything. --focus-ring is measured against each
   theme's --surface at ≥3:1 (SC 1.4.11); the 2px offset means the ring is
   always compared to the surface behind the control, never to the control. */
:focus-visible {
  outline: var(--bw-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-1);
}

/* Selection inverts the context's own primary pair rather than painting on the
   accent. Accent-painted selection cannot be made safe here: .c-footer rebinds
   --accent to --accent-on-inverse but not --on-accent, so selected text in the
   footer measured 1.77 apex / 2.50 events / 2.40 lounge. Rebinding --on-accent
   there does not fix it either — it would give 1.77 / 6.64 / 2.06, helping one
   skin and making another worse, because each theme's inverse accent needs a
   different foreground. Inversion needs no new token and is correct by
   construction: text-on-surface is already every skin's strongest pair.
   Measured: 16.59 apex body · 16.59 apex footer · 15.66 events body ·
   16.59 events footer · 14.24 lounge body · 16.54 lounge footer. */
::selection { background: var(--text); color: var(--surface); }


/* --- utilities ---------------------------------------------------------- */
/* These exist because `style-src 'self'` blocks the style="…" ATTRIBUTE, not
   only inline <style> blocks. Under this CSP a one-off inline style is
   silently dropped in production and the page looks right only in the
   prototype. There is no style="…" anywhere in components.html or index.html
   for that reason; every one-off is a class here. */

.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-0 { margin-bottom: 0; }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-measure    { max-width: var(--measure); }
.u-muted      { color: var(--text-muted); }
.u-caption    { font-size: var(--fs--1); color: var(--text-muted); }
.u-mono       { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }

.u-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

/* Vertical rhythm helper. --stack-gap is set per instance. */
.u-stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); }
.u-stack--lg { --stack-gap: var(--sp-5); }


/* --- layout ------------------------------------------------------------- */

.l-wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section { padding-block: var(--sp-section); }

.l-band {
  background-color: var(--surface-sunken);
  color: var(--text);
}

/* Auto-fitting grid. Cards reflow at their own content width — no breakpoint
   needed for the common two/three-up case. */
.l-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 16rem)), 1fr));
}
.l-grid--sm { --col-min: 7rem; }
.l-grid--md { --col-min: 13rem; }
.l-grid--lg { --col-min: 18rem; }
.l-grid--xl { --col-min: 20rem; }

@media (min-width: 768px) {
  :root { --gutter: var(--sp-5); }
  .l-grid { gap: var(--sp-5); }
}


/* --- skip link ---------------------------------------------------------- */

.c-skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: var(--bw-thick) solid var(--focus-ring);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}
.c-skip:focus { transform: none; }


/* --- brand mark --------------------------------------------------------- */

.c-mark {
  display: block;
  width: auto;
  height: 2rem;
  color: var(--accent);
  flex: none;
}
.c-mark--lg { height: var(--fs-display); }
.c-mark--inverse { color: var(--accent-on-inverse); }


/* --- header / nav ------------------------------------------------------- */
/* Deliberately NOT sticky. A sticky header is the usual way a build fails
   WCAG 2.2 SC 2.4.11 (Focus Not Obscured) — tabbing scrolls the focused
   control under it. Static costs nothing here and removes the failure mode. */

.c-header {
  border-bottom: var(--bw-hair) solid var(--border-control);
  background: var(--surface);
}

.c-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  min-height: 64px;
  padding-block: var(--sp-3);
}

.c-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  min-height: var(--target-min);
  text-decoration: none;
}

.c-header__name {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--display-transform);
  line-height: 1.1;
}

.c-header__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-5);
}

/* No hamburger. A menu that opens needs JavaScript; the nav is five links (four
   until the Photos link, 2026-10-25), so it wraps to a second row on a 360px screen instead. */
.c-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
}
.c-nav__link:hover { color: var(--text); text-decoration: underline; }
.c-nav__link[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}


/* --- footer ------------------------------------------------------------- */

.c-footer {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding-block: var(--sp-7);
  /* Footer is an inverted island inside a light page: repoint the tokens
     its children read so .c-link, .u-muted and :focus-visible stay correct. */
  --text: var(--text-on-inverse);
  --text-muted: var(--text-muted-on-inverse);
  --accent: var(--accent-on-inverse);
  --surface: var(--surface-inverse);
  --focus-ring: var(--text-on-inverse);   /* ≥14.2:1 on every theme's inverse */
  --border: var(--border-on-inverse);
  --border-control: var(--border-control-on-inverse);
}

.c-footer a { color: var(--text-on-inverse); }
.c-footer h3 { font-size: var(--fs-0); letter-spacing: var(--tracking-wide); }

.c-footer__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .c-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.c-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--bw-hair) solid var(--border);
  font-size: var(--fs--1);
  color: var(--text-muted-on-inverse);
}

/* G4 / J5: "Powered by StratosDigital.ai" on the tracked link. */
.c-attribution {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted-on-inverse);
}
/* The whole phrase is the link, and it takes the colour of the line it sits on
   rather than standing out bold and underlined: this is our credit on the
   client's page and has to read quieter than their own legal line above it.
   Measured: --text-muted-on-inverse is 7.47:1 on --surface-inverse and 8.68:1 in
   the lounge theme; on the light grounds (the holding page, the intake page) it
   inherits --text-muted, 7.93:1 on --surface. `.c-footer a` matches at the same
   specificity, so this has to come after it.

   44px, because the ANCHOR is the target and the min-height on the paragraph
   above does not reach it. That figure is this repository's own contractual
   floor (AGENTS.md), above SC 2.5.8's 24px AA minimum. On the apex the
   paragraph was already --target-min tall, so nothing moves there; on the
   holding page and the intake page the footer line grows to 44px. */
a.powered {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: inherit;
  text-decoration: none;
}
a.powered:hover,
a.powered:focus-visible { text-decoration: underline; }


/* --- buttons ------------------------------------------------------------ */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--sp-3) var(--sp-5);
  border: var(--bw-thick) solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--display-transform);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.c-btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.c-btn--primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }

.c-btn--secondary {
  background-color: transparent;
  border-color: var(--border-control);
  color: var(--text);
}
.c-btn--secondary:hover { border-color: var(--accent); }

.c-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  text-decoration: underline;
  padding-inline: var(--sp-2);
}

.c-btn--lg { font-size: var(--fs-1); padding: var(--sp-4) var(--sp-6); min-height: 56px; }
.c-btn--block { width: 100%; }

.c-btn[aria-disabled="true"],
.c-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.c-btn__arrow { font-size: 1.1em; line-height: 1; }

/* Standalone text link, used where a button would over-weight the page. */
.c-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--text);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.c-link:hover { text-decoration-color: var(--accent); }

/* Phone numbers are the highest-intent control on the apex. They get button
   sizing without button weight. */
.c-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tracking-wide);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}


/* --- card --------------------------------------------------------------- */

.c-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-control);
  border-radius: var(--radius-card);
}

.c-card__title { font-size: var(--fs-2); }
.c-card__body  { color: var(--text-muted); }
.c-card > .c-btn { margin-top: auto; }

/* An interactive card. The border is --border-control (≥3:1 on every surface
   in both themes) because SC 1.4.11 covers the visual boundary of a control. */
.c-card--action:hover { border-color: var(--accent); }


/* --- assistant card ----------------------------------------------------- */
/* A named, pictured assistant, introduced beside the number that reaches it.
   It is a .c-card with a different layout (class="c-card c-assistant"), so
   surface, border, radius and padding stay the card's own and follow whichever
   skin the block sits in. It must come after .c-card: it overrides that rule's
   flex column.

   THE PICTURE IS DECORATIVE and carries alt="". The name, the role and the
   disclosure line sit directly beside it and say everything it could, so
   describing it aloud would add nothing and could say something the page does
   not mean.

   The disc behind the cutout is --accent: oxblood in the apex's own skin and
   the events skin, copper in the lounge skin, from one image. Its 2px border is
   the same colour; that border is what survives when a printer drops the fill,
   so the cutout still sits inside a circle on paper. The box is sized here as
   well as by the width and height attributes, so it is reserved before the
   file arrives.

   Measured in Chrome against composited backgrounds, WCAG 2.x, 320 to 1440px.
   Apex skin: the role (--accent on --surface-raised) 11.79:1, the disclosure
   line and the number 15.66, the muted paragraph 7.48, the focus ring 11.79.
   Specimen sheet, in the same order without the ring: events skin 9.70, 16.59
   and 7.93; lounge skin 7.96, 12.56 and 6.59. The number is a link 44px tall
   at every width, and nothing reaches past the viewport, at 320px included
   with a classic 15px scrollbar (305px of width). */
.c-assistant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-4);
  break-inside: avoid;
}

.c-assistant__pic {
  width: 4.5rem;
  height: 4.5rem;
  border: var(--bw-thick) solid var(--accent);
  border-radius: 50%;
  background-color: var(--accent);
  object-fit: cover;
}

.c-assistant__role {
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

/* Name and role are the one div; every paragraph after them runs the full
   width of the card, under the picture. */
.c-assistant > p { grid-column: 1 / -1; }

/* The disclosure is not a caption. It reads at body size and in bold. */
.c-assistant__ai { font-weight: var(--fw-bold); }

@media (min-width: 480px) {
  .c-assistant__pic { width: 6rem; height: 6rem; }
}


/* --- price block -------------------------------------------------------- */

.c-price {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.c-price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--font-display);
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
}
.c-price__currency { font-size: 0.45em; }
/* "/month" is the billing frequency, which the automatic-renewal statutes
   require to be conspicuous. Fixed at --fs-0, not a fraction of the numeral. */
.c-price__cadence  { font-family: var(--font-body); font-size: var(--fs-0);
                     font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
                     color: var(--text); }

/* The renewal sentence. --fs-0, never --fs--1: several state automatic-renewal
   statutes require the disclosure be no less prominent than what surrounds it,
   and this component is the one that sits next to the card field. */
.c-price__terms {
  font-size: var(--fs-0);
  line-height: var(--lh-loose);
  color: var(--text);
  max-width: var(--measure);
}


/* --- form: field + label + hint + error --------------------------------- */

.c-field { display: block; margin-bottom: var(--sp-5); }

.c-field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.c-field__req {
  margin-left: var(--sp-2);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.c-field__hint {
  margin-bottom: var(--sp-2);
  font-size: var(--fs--1);
  color: var(--text-muted);
}

.c-field__input,
.c-field__select,
.c-field__textarea {
  display: block;
  width: 100%;
  min-height: var(--target-min);
  padding: var(--sp-3);
  background-color: var(--surface);
  color: var(--text);
  /* 16px minimum. iOS Safari zooms the viewport on focus below 16px, which
     reads as a layout bug and cannot be undone without a JS scroll fix. */
  font-size: var(--fs-0);
  border: var(--bw-hair) solid var(--border-control);
  border-radius: var(--radius-control);
}

.c-field__textarea { min-height: 8rem; resize: vertical; }

.c-field__input::placeholder,
.c-field__textarea::placeholder { color: var(--text-muted); opacity: 1; }

/* Native select arrow is left alone: replacing it needs a background image
   (img-src 'self' — a data: URI would work, but it is not worth the bytes)
   and the native control is already keyboard- and screen-reader-correct. */
.c-field__select { padding-right: var(--sp-6); }

/* Error state. Colour is never the only signal (SC 1.4.1): the border
   thickens 1px → 2px, the message is present in the DOM, and it is prefixed
   with a literal word, not an icon font. */
.c-field--invalid .c-field__input,
.c-field--invalid .c-field__select,
.c-field--invalid .c-field__textarea {
  border-width: var(--bw-thick);
  border-color: var(--danger);
}

.c-field__error {
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: var(--bw-focus) solid var(--danger);
  font-size: var(--fs-0);
  font-weight: var(--fw-medium);
  color: var(--danger);
}

.c-fieldset { border: 0; margin-bottom: var(--sp-6); }

.c-fieldset__legend {
  display: block;
  width: 100%;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-hair) solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-2);
}

/* Two fields side by side from 480px. */
.c-field-row { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 480px) { .c-field-row { grid-template-columns: 1fr 1fr; } }


/* --- date entry --------------------------------------------------------- */

/* Booking date: native input[type=date]. Submits without JavaScript, gets
   min/max validation for free, and the OS picker is already accessible. The
   popup itself cannot be styled — that is the trade and it is worth it. */
.c-datefield { max-width: 18rem; }

/* Date of birth: three selects, not input[type=date]. A date picker opens on
   the current month, so a 1979 birthday is ~45 interactions away. Selects are
   3. Same no-JS submit, same native a11y. Server rebuilds and validates the
   date — three separate fields cannot be trusted as a date. */
.c-dob { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.c-dob__part { flex: 1 1 6rem; }
.c-dob__part--year { flex: 1 1 7rem; }
.c-dob__part label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs--1);
  color: var(--text-muted);
}


/* --- checkbox group ----------------------------------------------------- */

.c-checkgroup { display: flex; flex-direction: column; gap: var(--sp-2); }

.c-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  /* The whole row is the target, not just the box. 44px floor. */
  min-height: var(--target-min);
  padding: var(--sp-3);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.c-check:hover { border-color: var(--border-control); }

.c-check__box {
  width: 24px;
  height: 24px;
  margin: 0;
  /* Aligns the box to the cap height of the first line of label text. */
  margin-top: 0.15em;
  accent-color: var(--accent);
  border: var(--bw-hair) solid var(--border-control);
  flex: none;
}

.c-check__text { font-size: var(--fs-0); line-height: var(--lh-loose); }
.c-check__text small { display: block; font-size: var(--fs--1); color: var(--text-muted); }


/* --- required acceptance ------------------------------------------------ */
/* The auto-renewal pattern. Structurally separate from .c-checkgroup — it is
   never a sibling in the same stack as the marketing consents, because a
   consent that sits in a list of optional consents reads as optional, which
   is the defect the state statutes exist to catch.
   Order on the page: renewal terms → THIS → card field → marketing consents. */

.c-acknowledge {
  margin-block: var(--sp-5);
  padding: var(--sp-5);
  background-color: var(--surface-sunken);
  border: var(--bw-thick) solid var(--accent);
  border-left-width: 6px;
  border-radius: var(--radius-card);
}

.c-acknowledge__terms {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-0);
  line-height: var(--lh-loose);
}

.c-acknowledge .c-check {
  background-color: var(--surface);
  border-color: var(--border-control);
  border-width: var(--bw-thick);
}
.c-acknowledge .c-check__text { font-weight: var(--fw-bold); }


/* --- notice / alert ----------------------------------------------------- */

.c-notice {
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw-hair) solid var(--border-control);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-card);
  background-color: var(--surface-raised);
}

.c-notice__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.c-notice p { font-size: var(--fs-0); }
.c-notice--ok     { border-left-color: var(--ok); }
.c-notice--warn   { border-left-color: var(--warn); }
.c-notice--danger { border-left-color: var(--danger); }
.c-notice--ok     .c-notice__title { color: var(--ok); }
.c-notice--warn   .c-notice__title { color: var(--warn); }
.c-notice--danger .c-notice__title { color: var(--danger); }


/* --- fact list ---------------------------------------------------------- */

.c-facts { display: grid; gap: var(--sp-3); }
.c-facts > div {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-top: var(--bw-hair) solid var(--border);
}
.c-facts dt {
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.c-facts dd { margin: 0; font-size: var(--fs-1); }

@media (min-width: 480px) {
  .c-facts > div { grid-template-columns: 14rem 1fr; gap: var(--sp-4); align-items: baseline; }
}


/* --- door (apex only) --------------------------------------------------- */
/* A full-width themed panel. Each door carries its own [data-theme], so the
   two businesses appear in their own colours in one viewport — which is the
   fastest possible answer to "which one do I want". */

/* Apex hero. The address is the headline, because the address is the question
   the page exists to answer. */
.c-hero { padding-block: var(--sp-7) var(--sp-8); }
.c-hero__inner { display: grid; gap: var(--sp-5); }
.c-hero h1 { font-size: var(--fs-7); }
.c-hero__lede { font-size: var(--fs-2); color: var(--text-muted); max-width: 28ch; }
.c-hero__watermark { opacity: 0.18; }
@media (min-width: 768px) {
  .c-hero__inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-8); }
}

.c-door { padding-block: var(--sp-8); }

.c-door__inner {
  display: grid;
  gap: var(--sp-5);
}

.c-door__main  { display: grid; gap: var(--sp-4); align-content: start; }
.c-door__aside { display: grid; gap: var(--sp-5); align-content: start; }

.c-door__eyebrow {
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.c-door__name {
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  text-transform: var(--display-transform);
}

.c-door__what { font-size: var(--fs-1); color: var(--text-muted); max-width: 34ch; }

.c-door__actions { display: grid; gap: var(--sp-3); }

.c-door__points { display: grid; gap: var(--sp-2); }
.c-door__points li {
  padding-left: var(--sp-5);
  position: relative;
  color: var(--text-muted);
}
.c-door__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: var(--sp-3);
  height: 2px;
  background: var(--accent);
}

@media (min-width: 768px) {
  .c-door__inner { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); align-items: start; }
  .c-door__actions { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: var(--sp-5); }
  .c-door__aside { padding-top: var(--sp-2); }
}


/* --- specimen sheet only ------------------------------------------------ */

.x-spec { padding-block: var(--sp-6); border-top: var(--bw-hair) solid var(--border); }
.x-spec__label {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.x-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.x-pair { display: grid; gap: var(--sp-4); }
.x-pair > [data-theme] { padding: var(--sp-5); border: var(--bw-hair) solid var(--border-control); }
@media (min-width: 768px) { .x-pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.x-pair__head {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-hair) solid var(--border);
}
.x-swatch { display: grid; gap: var(--sp-1); font-size: var(--fs--1); }
.x-swatch__chip {
  width: 100%;
  height: 3rem;
  border: var(--bw-hair) solid var(--border-control);
  border-radius: var(--r-1);
}
.x-swatch__chip--surface { background: var(--surface); }
.x-swatch__chip--raised  { background: var(--surface-raised); }
.x-swatch__chip--sunken  { background: var(--surface-sunken); }
.x-swatch__chip--inverse { background: var(--surface-inverse); }
.x-swatch__chip--accent  { background: var(--accent); }
.x-swatch__chip--text    { background: var(--text); }
.x-swatch__chip--muted   { background: var(--text-muted); }
.x-swatch__chip--border  { background: var(--border-control); }
.x-scale > * { margin-block: var(--sp-2); }
.x-panel { padding: var(--sp-5); border: var(--bw-hair) solid var(--border-control); }
.x-half  { flex: 1 1 20rem; }
.x-display {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  font-weight: var(--fw-normal);
  line-height: var(--lh-tight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
}