/* ==========================================================================
   AnswerCapture — theme styles

   Single source of truth for colour, type and spacing is theme.json. This file
   aliases those presets to short names and then carries the bespoke sections
   that no core block can express.

   Ported from the Astro implementation's global.css (tag: astro-v2-final).
   Tailwind is deliberately NOT used here — see docs/PROJECT.md. Utility classes
   are invisible to the block editor, which is the thing WordPress is meant to
   make easier.
   ========================================================================== */

:root {
  --ac-night:  var(--wp--preset--color--night);
  --ac-panel:  var(--wp--preset--color--panel);
  --ac-line:   var(--wp--preset--color--line);
  --ac-body:   var(--wp--preset--color--body);
  --ac-bright: var(--wp--preset--color--bright);
  --ac-signal: var(--wp--preset--color--signal);
  --ac-relay:  var(--wp--preset--color--relay);

  --ac-font-display: var(--wp--preset--font-family--display);
  --ac-font-sans:    var(--wp--preset--font-family--sans);
  --ac-font-mono:    var(--wp--preset--font-family--mono);

  --ac-micro: var(--wp--preset--font-size--micro);
  --ac-small: var(--wp--preset--font-size--small);
  --ac-lede:  var(--wp--preset--font-size--lede);
  --ac-scene: var(--wp--preset--font-size--scene);

  --ac-section: var(--wp--preset--spacing--60);

  /*
   * Page gutter. Declared here rather than in theme.json's styles.css: WP 7.1
   * emits that string bare, with no selector, so the declaration was invalid
   * CSS and silently dropped -- which zeroed the root padding sitewide and put
   * body text flush against the edge of every phone screen. theme.json still
   * points its root padding at this variable; only the declaration moved.
   */
  --ac-gutter: clamp(1.25rem, 5vw, 2.5rem);
}

/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; letter-spacing: 0.005em; }

:focus-visible {
  outline: 2px solid var(--ac-signal);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--ac-signal); color: var(--ac-night); }

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

/* One skip link, and WordPress core owns it.
 *
 * Core injects `<a class="skip-link screen-reader-text" href="#wp--skip-link--target">`
 * on block themes and puts that id on <main>, so the link is correct and the
 * target is right. The theme used to print its own identical link at the top of
 * every template, which meant two of them in the tab order -- a screen-reader
 * user hearing "Skip to content" twice reasonably assumes they go to different
 * places. The theme's link is gone; we style core's instead.
 *
 * `body` prefix on the focus rule beats core's own inline
 * `.skip-link.screen-reader-text:focus`, which is printed later in the
 * document. The hidden state is core's and is already correct. */
body .skip-link.screen-reader-text:focus {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 60;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  overflow: visible;
  clip-path: none;
  white-space: nowrap;
  background: var(--ac-signal);
  color: var(--ac-night);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ==========================================================================
   Type roles
   ========================================================================== */

/* Monospace instrumentation. Budgeted — see docs/V2-DECISIONS.md D3. */
.ac-label {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-signal);
}

/* A category, not a readout. Deliberately sans, and not counted against the
   instrumentation budget. */
.ac-tag {
  font-family: var(--ac-font-sans);
  font-size: var(--ac-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-body);
}

/* Section eyebrow: runs the measure and terminates in a tick. */
.ac-channel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--ac-small);
  margin-block-end: clamp(2.5rem, 5vw, 3rem);
}
.ac-channel__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--ac-signal) 55%, transparent),
    var(--ac-line) 22%, var(--ac-line));
}
.ac-channel__tick { width: 2px; height: 9px; background: var(--ac-line); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--ac-signal);
  border-radius: 2px;
  background: var(--ac-signal);
  color: var(--ac-night);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.ac-btn:hover { background: var(--ac-relay); border-color: var(--ac-relay); color: var(--ac-night); }
.ac-btn__number { font-family: var(--ac-font-mono); font-size: var(--ac-small); font-weight: 500; }

/* Secondary never competes with the demo CTA — it is a link with a rule under
   it, not a button. See docs/V2-DECISIONS.md D1. */
.ac-btn--secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--ac-line);
  border-radius: 0;
  background: none;
  color: var(--ac-body);
  font-weight: 400;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}
.ac-btn--secondary:hover { background: none; border-bottom-color: var(--ac-signal); color: var(--ac-bright); }

/* ==========================================================================
   Header / footer
   ========================================================================== */

.ac-header { border-bottom: 1px solid var(--ac-line); }

/* No hamburger. This audience calls; the number never hides behind a menu. */
.ac-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ac-signal) 45%, transparent);
  background: color-mix(in srgb, var(--ac-signal) 10%, transparent);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ac-header__phone:hover { border-color: var(--ac-signal); background: color-mix(in srgb, var(--ac-signal) 20%, transparent); }
.ac-header__phone .ac-label { font-size: var(--ac-micro); }
.ac-header__number { font-family: var(--ac-font-mono); font-size: var(--ac-small); font-weight: 500; color: var(--ac-bright); }

/* The number is the only link here -- the "Demo line" label beside it is a
   sibling, so the anchor was 17px tall, under the 24px pointer-target minimum
   and awkward to hit with a thumb. Padding gives it ~44px; the negative margin
   keeps it optically where it already sat, and the type size does not change. */
.ac-header__number a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}

/* Every nav and footer link clears 44px. */
.ac-nav a,
.ac-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }

.ac-footer { border-top: 1px solid var(--ac-line); }

/* Mobile: the number is reachable from anywhere, with one thumb. */
.ac-callbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; border-top: 1px solid color-mix(in srgb, var(--ac-signal) 30%, transparent); background: color-mix(in srgb, var(--ac-night) 95%, transparent); backdrop-filter: blur(4px); }
.ac-callbar a { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 4.5rem; margin: 0.75rem; padding: 0.9rem; background: var(--ac-signal); color: var(--ac-night); font-weight: 600; text-decoration: none; border-radius: 2px; }
@media (min-width: 782px) { .ac-callbar { display: none; } }
@media (max-width: 781px) { body { padding-bottom: 6rem; } }

/* ==========================================================================
   The turn — 7:42 → 8:03
   The one place instrumentation is concentrated on purpose (D3), and the one
   place the background grid appears.
   ========================================================================== */

.ac-instrument-field {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ac-line) 45%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ac-line) 45%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
}

.ac-log { --trunk: 3.85rem; --minute: 0.55rem; }
@media (min-width: 782px) { .ac-log { --trunk: 5.25rem; --minute: 0.92rem; } }

.ac-log__measure { max-width: 52rem; }
.ac-log__panel {
  border: 1px solid var(--ac-line);
  background: color-mix(in srgb, var(--ac-night) 62%, transparent);
  padding: 1.5rem 1.35rem 1.6rem;
}
@media (min-width: 782px) { .ac-log__panel { padding: 2rem; } }

.ac-log__list { position: relative; margin: 0; padding: 0; list-style: none; }
.ac-log__trunk { position: absolute; left: var(--trunk); top: 0.4rem; bottom: 0; width: 3px; background: var(--ac-line); }

.ac-log__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--trunk) 1fr;
  column-gap: 1.75rem;
  align-items: baseline;
}
/* Elapsed time IS the message: silent rows are spaced by the real gap. */
.ac-log__row--silent { padding-top: calc(var(--gap) * var(--minute)); }

.ac-log__tick { position: absolute; left: calc(var(--trunk) - 3.5px); top: 0.3rem; width: 10px; height: 10px; background: var(--ac-line); }
.ac-log__row--silent .ac-log__tick { top: calc(var(--gap) * var(--minute) + 0.3rem); }
.ac-log__tick--ok { background: var(--ac-relay); }

.ac-log__time { font-family: var(--ac-font-mono); font-size: var(--ac-small); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ac-body); white-space: nowrap; }
.ac-log__event { font-family: var(--ac-font-mono); font-size: var(--ac-small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ac-bright); margin: 0; }
.ac-log__detail { margin: 0.2rem 0 0; font-size: var(--ac-small); color: color-mix(in srgb, var(--ac-body) 85%, transparent); }

.ac-log__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.85rem 0 0; }
.ac-log__chip { border: 1px solid color-mix(in srgb, var(--ac-relay) 40%, transparent); padding: 0.2rem 0.55rem; font-family: var(--ac-font-mono); font-size: var(--ac-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-relay); }

.ac-log__silence { font-family: var(--ac-font-mono); font-size: var(--ac-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--ac-body) 75%, transparent); margin: 0; }

.ac-log__elapsed {
  position: relative;
  margin: 0;
  padding-left: calc(var(--trunk) + 1.75rem);
  padding-top: calc(var(--gap) * var(--minute));
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-body);
}
/* The trunk runs through the final gap so the cap terminates a line rather
   than floating below one. */
.ac-log__elapsed::before { content: ''; position: absolute; left: var(--trunk); top: 0; width: 3px; height: calc(var(--gap) * var(--minute) + 0.2rem); background: var(--ac-line); }
.ac-log__cap { position: absolute; left: calc(var(--trunk) - 5.5px); top: calc(var(--gap) * var(--minute) + 0.2rem); width: 14px; height: 4px; background: var(--ac-line); }

/* Full-bleed severance. */
.ac-log__break { margin-top: 3.5rem; height: 5px; width: 100%; background: var(--ac-signal); }

.ac-log__counter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 0.85rem; padding-top: 2.5rem; margin: 0; font-family: var(--ac-font-mono); font-size: var(--ac-small); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-signal); }
.ac-log__counter-status { border: 1px solid color-mix(in srgb, var(--ac-signal) 45%, transparent); padding: 0.25rem 0.6rem; font-size: var(--ac-micro); letter-spacing: 0.14em; }

/* ==========================================================================
   Response-system cycle — Capture → Understand → Decide → Act → Outcome →
   Improve. IMPROVE is a stage, which is how continuous improvement lands
   without becoming its own section.
   ========================================================================== */

.ac-cycle__stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px)  { .ac-cycle__stages { grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; } }
@media (min-width: 1024px) { .ac-cycle__stages { grid-template-columns: repeat(3, 1fr); gap: 0 3rem; } }

.ac-cycle__stage { position: relative; padding: 1.4rem 0 1.5rem 2.9rem; border-top: 1px solid var(--ac-line); }
.ac-cycle__num { position: absolute; left: 0; top: 1.45rem; font-family: var(--ac-font-mono); font-size: var(--ac-micro); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.1em; color: var(--ac-signal); }
.ac-cycle__name { color: var(--ac-bright); margin: 0; }
.ac-cycle__copy { margin: 0.6rem 0 0; font-size: var(--ac-small); line-height: 1.6; color: var(--ac-body); }

/* ---- log deltas (Direction C's ledger reading of Direction A's scale) ----
   The gaps were always proportional; nothing said so. These labels name the
   silence in minutes, so the spacing reads as data rather than as layout. */

.ac-log__delta {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ac-signal);
  justify-self: end;
  align-self: start;
}
.ac-log__scale {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  letter-spacing: 0.06em;
  text-transform: none;
  color: color-mix(in srgb, var(--ac-body) 70%, transparent);
}

/* ---- the conversation bracket and the return path (Direction B) ----------
   Two of seven stages are the phone call. The bracket says so above the grid;
   the drawn path says the loop closes. Both are decorative — the closing
   sentence carries the same claim in words. */

.ac-cycle__heard {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-relay);
}
.ac-cycle__heard-mark {
  width: 2.25rem;
  height: 0.5rem;
  border: 1px solid var(--ac-relay);
  border-bottom: 0;
  flex-shrink: 0;
}

/* The two heard stages carry the relay colour on their rule and number, so the
   bracket's claim is legible even when the label scrolls out of view. */
.ac-cycle__stage--heard { border-top-color: color-mix(in srgb, var(--ac-relay) 55%, var(--ac-line)); }
.ac-cycle__stage--heard .ac-cycle__num { color: var(--ac-relay); }

.ac-cycle__loop { margin-top: 1.25rem; color: var(--ac-signal); }
.ac-cycle__loop-svg { display: block; width: 100%; height: 40px; }

.ac-cycle__return { margin: 0.75rem 0 0; padding-left: 0; font-size: var(--ac-small); line-height: 1.6; color: var(--ac-bright); max-width: 46rem; }
.ac-cycle__ref { font-family: var(--ac-font-mono); font-size: var(--ac-micro); color: var(--ac-signal); letter-spacing: 0.08em; }

@media (prefers-reduced-motion: no-preference) { .ac-cycle__loop-svg { transition: opacity 200ms ease; } }

/* ==========================================================================
   Human handoff — routing as infrastructure, not a sentence in a prompt
   ========================================================================== */

.ac-flow { margin: 0; padding: 0; list-style: none; max-width: 34rem; }
.ac-flow__step { position: relative; padding: 0 0 1.65rem 2.25rem; }
.ac-flow__step:last-child { padding-bottom: 0; }
.ac-flow__rail { position: absolute; left: 5px; top: 0.75rem; bottom: 0; width: 2px; background: var(--ac-line); }
.ac-flow__step:last-child .ac-flow__rail { display: none; }
.ac-flow__node { position: absolute; left: 0; top: 0.42rem; width: 12px; height: 12px; background: var(--ac-signal); }
/* Fallbacks are outlined — the paths we hope not to use. */
.ac-flow__step--fallback .ac-flow__node { background: transparent; border: 2px solid var(--ac-signal); }
.ac-flow__step--terminal .ac-flow__node { background: var(--ac-relay); border-color: var(--ac-relay); }
.ac-flow__name { color: var(--ac-bright); margin: 0; }
.ac-flow__note { margin: 0.35rem 0 0; font-size: var(--ac-small); line-height: 1.55; color: var(--ac-body); }
.ac-flow__arrow { position: absolute; left: 3px; bottom: 0.35rem; border-top: 6px solid var(--ac-line); border-left: 4px solid transparent; border-right: 4px solid transparent; }

/* ==========================================================================
   Diagnosis list — the eight questions, banded by response stage.
   Not a worksheet: no blank form fields.
   ========================================================================== */

.ac-diagnosis { margin: 0; padding: 0; list-style: none; max-width: 60rem; border-top: 1px solid var(--ac-line); }
.ac-diagnosis__item { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--ac-line); padding: 1rem 0; }
@media (min-width: 782px) { .ac-diagnosis__item { grid-template-columns: 4.5rem 9rem 1fr; column-gap: 1.5rem; } }
.ac-diagnosis__num { font-family: var(--ac-font-display); font-size: var(--wp--preset--font-size--display-m); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ac-signal); }
.ac-diagnosis__q { font-size: var(--ac-lede); color: var(--ac-bright); grid-column: span 2; margin-top: 0.25rem; }
@media (min-width: 782px) { .ac-diagnosis__q { grid-column: 3; margin-top: 0; } }

/* ==========================================================================
   Coverage / reporting panels
   ========================================================================== */

.ac-panel { border: 1px solid var(--ac-line); background: color-mix(in srgb, var(--ac-panel) 70%, transparent); padding: 1.5rem; }
@media (min-width: 782px) { .ac-panel { padding: 1.75rem; } }
.ac-panel__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--ac-line) 70%, transparent); padding: 0.85rem 0; }
.ac-panel__row:first-of-type { border-top: 0; padding-top: 0; }
.ac-panel__channel { font-size: var(--ac-small); color: var(--ac-bright); }
.ac-panel__state { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--ac-font-mono); font-size: var(--ac-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ac-relay); }
.ac-panel__dot { width: 6px; height: 6px; background: var(--ac-relay); flex: none; }

.ac-metrics { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ac-line); }
.ac-metrics li { border-bottom: 1px solid var(--ac-line); padding: 0.75rem 0; font-size: var(--ac-small); color: color-mix(in srgb, var(--ac-bright) 90%, transparent); }

/* ==========================================================================
   Homepage section rhythm

   Ported from the Astro <Section> component. Core blocks carry the copy so it
   stays editable in WordPress; these classes only supply the layout the copy
   used to get from Tailwind utilities.
   ========================================================================== */

/* The page-wide template uses flow layout, not constrained, so every section
   supplies its own measure. Matches the Astro `shell` utility exactly. */
.ac-shell { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: var(--ac-gutter); }

.ac-section { padding-block: var(--ac-section); }
.ac-section--first { padding-top: clamp(3rem, 6vw, 4.5rem); }
/* Contained band, matching Astro: the border and tint stop at the 74rem
   measure rather than running to the viewport edge. The dispatch log keeps its
   full-width treatment -- that section is the turn and earns the bleed; this
   one is a quieter beat and should read as contained. */
.ac-section--panel { padding-block: 0; }
.ac-section--panel > .ac-shell {
  border-block: 1px solid var(--ac-line);
  background: color-mix(in srgb, var(--ac-panel) 45%, transparent);
  padding-block: var(--ac-section);
}
.ac-section--close { border-top: 1px solid var(--ac-line); padding-block: var(--ac-section) 0; }

/* Two-column split: a short heading against a wider body. Collapses early —
   21rem of heading beside prose stops working well before the tablet break. */
.ac-split { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .ac-split { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 5rem; }
}

/* Hero: content against the coverage panel. */
.ac-hero__grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
  .ac-hero__grid { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 5rem; }
}

/* Measures. Prose stops being readable well before it reaches the wide size. */
.ac-prose { max-width: 44rem; }
.ac-measure { max-width: 38rem; }

.ac-lead-answer {
  font-family: var(--ac-font-display);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ac-signal);
}

/* The scene is set off by a rule rather than a box — it is a moment in a
   narrative, not a callout. */
.ac-scene-quote { border-left: 2px solid var(--ac-line); padding-left: 1.5rem; }
@media (min-width: 782px) { .ac-scene-quote { padding-left: 2.25rem; } }

.ac-pull { border-left: 2px solid var(--ac-signal); padding-left: 1.5rem; color: var(--ac-bright); }

/* A timestamp inside prose. Mono, signal, and non-breaking so "7:42 PM" never
   splits across a line -- the time is the point of the sentence. */
.ac-instrument {
  font-family: var(--ac-font-mono);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--ac-signal);
  white-space: nowrap;
}

/* Inline forward link. 3rem min height so it clears the touch target rule. */
.ac-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ac-line);
  color: var(--ac-body);
  text-decoration: none;
  transition: color 150ms, border-color 150ms;
}
.ac-link:hover { color: var(--ac-bright); border-bottom-color: var(--ac-signal); }
.ac-link__arrow { color: var(--ac-signal); }

/* Status qualifier under a demonstration. Deliberately not styled to be
   ignorable: same weight as the label above it. */
.ac-caption {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ac-body);
}

/* ==========================================================================
   How It Works — condition list and stage detail
   ========================================================================== */

/* "A call can be answered while..." — the same visual family as the homepage's
   eight-question list, so the two pages read as one argument. Dashes rather
   than numbers: these are simultaneous conditions, not an ordered sequence. */
.ac-conditions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ac-line); }
.ac-conditions li {
  position: relative;
  border-bottom: 1px solid var(--ac-line);
  padding: 0.9rem 0 0.9rem 2rem;
  font-size: var(--ac-lede);
  color: var(--ac-bright);
}
.ac-conditions li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Centre on the first line rather than a fixed offset: the row padding is
     fixed but the line box scales with the fluid lede size, so a constant top
     drifts high as the viewport grows. */
  top: calc(0.9rem + 0.85em);
  width: 0.75rem;
  height: 1px;
  background: var(--ac-signal);
}

/* Each stage carries what it does AND what its absence looks like. The failure
   mode is what makes a stage legible — a name and a definition alone read as a
   feature list, which is what this page exists not to be. */
.ac-stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ac-line); }
.ac-stage {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--ac-line);
  padding-block: 1.75rem;
}
@media (min-width: 1024px) {
  .ac-stage {
    grid-template-columns: 3.5rem minmax(0, 10rem) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 2.5rem;
    /* Baseline, not start: the number is display type, the name is uppercase
       sans and the body is sans at a different size, so aligning boxes leaves
       three staggered tops. Aligning text baselines reads as one row. */
    align-items: baseline;
  }
}
.ac-stage__num {
  grid-row: 1;
  font-family: var(--ac-font-display);
  font-size: var(--ac-lede);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ac-signal);
}
.ac-stage__name {
  grid-column: 2;
  font-family: var(--ac-font-sans);
  font-size: var(--ac-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-bright);
}
.ac-stage__does,
.ac-stage__without { grid-column: 2; }
@media (min-width: 1024px) {
  .ac-stage__does { grid-column: 3; grid-row: 1; }
  .ac-stage__without { grid-column: 4; grid-row: 1; }
}
.ac-stage__does { color: var(--ac-bright); }
.ac-stage__without { color: var(--ac-body); }

/* A label, not decoration: on mobile the columns stack, and without it the two
   sentences read as one continuous claim. */
.ac-stage__label {
  display: block;
  margin-block-end: 0.3rem;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-signal);
}

/* ==========================================================================
   Demo page — disclosure, scope lists, console anchor
   ========================================================================== */

/* The sticky bar links here on /demo. Margin so the heading above the console
   is not sitting against the top edge after the jump. */
.ac-console-anchor { scroll-margin-block-start: 1.5rem; }

/* Status disclosure. Stated once, above the thing it describes. Bordered so it
   reads as a statement of fact rather than fine print — but not coloured as a
   warning, because it is not one. */
.ac-disclosure {
  border: 1px solid var(--ac-line);
  border-left: 2px solid var(--ac-signal);
  background: color-mix(in srgb, var(--ac-panel) 60%, transparent);
  padding: 1.25rem 1.5rem;
  max-width: 44rem;
}
@media (min-width: 782px) { .ac-disclosure { padding: 1.5rem 1.75rem; } }
.ac-disclosure p { color: var(--ac-bright); }

/* Shows / does not prove. Two columns of equal visual weight: the second list
   is what makes the first one believable, so it is not styled as a footnote. */
.ac-scope { display: grid; gap: 2.5rem; }
@media (min-width: 782px) { .ac-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } }
.ac-scope__list { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--ac-line); }
.ac-scope__list li {
  position: relative;
  border-bottom: 1px solid var(--ac-line);
  padding: 0.8rem 0 0.8rem 1.75rem;
  font-size: var(--ac-small);
  color: var(--ac-bright);
}
.ac-scope__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.8rem + 0.8em);
  width: 0.6rem;
  height: 1px;
  background: var(--ac-signal);
}
.ac-scope--not .ac-scope__list li { color: var(--ac-body); }
.ac-scope--not .ac-scope__list li::before { background: var(--ac-line); }

/* ==========================================================================
   Handoff — the standard, and its current demo status
   ========================================================================== */

/* Six numbered rules, each a lead line and an explanation. Numbered because
   they are a checklist a reader can judge any vendor against, which is what
   the page is for. */
.ac-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ac-line); }
.ac-rule {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--ac-line);
  padding-block: 1.75rem;
}
@media (min-width: 782px) {
  .ac-rule { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem 2rem; padding-block: 2.25rem; }
}
.ac-rule__num {
  grid-row: 1;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--ac-signal);
  padding-top: 0.35rem;
}
.ac-rule__lead {
  grid-column: 2;
  font-family: var(--ac-font-display);
  font-size: var(--wp--preset--font-size--display-m);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ac-bright);
}
.ac-rule__body { grid-column: 2; max-width: 44rem; }

/* The standard against its current demonstration status. Two columns, and the
   right one is deliberately not styled as a warning: it is a status, scoped to
   one demonstration system, not an alarm about the product. */
.ac-status { display: grid; gap: 2rem; }
@media (min-width: 900px) { .ac-status { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3.5rem; } }
.ac-status__list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--ac-line); }
.ac-status__list li {
  border-bottom: 1px solid var(--ac-line);
  padding: 0.7rem 0;
  font-size: var(--ac-small);
  color: var(--ac-bright);
}
.ac-status__note {
  margin-top: 1rem;
  border-left: 2px solid var(--ac-relay);
  background: color-mix(in srgb, var(--ac-panel) 60%, transparent);
  padding: 1.1rem 1.35rem;
  max-width: 44rem;
}

/* ==========================================================================
   Resources — pillar grid, article list, related reading
   ========================================================================== */

.ac-pillars { display: grid; gap: 1px; background: var(--ac-line); border: 1px solid var(--ac-line); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .ac-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ac-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ac-pillar { background: var(--ac-night); }
.ac-pillar a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 3rem;
  padding: 1.25rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.ac-pillar a:hover { background: color-mix(in srgb, var(--ac-panel) 70%, transparent); }
.ac-pillar__name {
  font-family: var(--ac-font-sans);
  font-size: var(--ac-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-signal);
}
.ac-pillar__desc { font-size: var(--ac-small); line-height: 1.55; color: var(--ac-body); }
.ac-pillar__count {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ac-body) 70%, transparent);
}

/* Related reading. Rendered only when there is something in the same pillar —
   see patterns/related-reading.php. */
.ac-related { margin-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--ac-line); padding-top: var(--wp--preset--spacing--40); }
.ac-related__heading {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-signal);
}
.ac-related__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.ac-related__item { border-bottom: 1px solid var(--ac-line); }
.ac-related__item a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 0;
  font-size: var(--ac-lede);
  color: var(--ac-bright);
  text-decoration: none;
}
.ac-related__item a:hover { color: var(--ac-signal); }

/* Article body. The post content is authored in the editor, so it gets sane
   defaults rather than a class on every block. */
.ac-article :where(h2) { margin-top: var(--wp--preset--spacing--50); }
.ac-article :where(h3) { margin-top: var(--wp--preset--spacing--40); }
.ac-article :where(p, ul, ol) { max-width: 44rem; }
.ac-article :where(ul, ol) { padding-left: 1.25rem; }
.ac-article :where(li) { margin-block: 0.4rem; }
.ac-article :where(li)::marker { color: var(--ac-signal); }
.ac-article :where(blockquote) {
  margin: var(--wp--preset--spacing--40) 0;
  border-left: 2px solid var(--ac-signal);
  padding-left: 1.5rem;
  max-width: 44rem;
  color: var(--ac-bright);
}

/* ==========================================================================
   Solutions — hub cards
   ========================================================================== */

.ac-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ac-line); border: 1px solid var(--ac-line); }
@media (min-width: 900px) { .ac-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The li must be a flex container, not just a background. height:100% on the
   anchor resolves against an auto-height grid item, which let the arrow fall
   through the bottom border of every card. */
.ac-card { display: flex; background: var(--ac-night); }
.ac-card a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 3rem;
  padding: 1.5rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}
@media (min-width: 782px) { .ac-card a { padding: 1.75rem; } }
.ac-card a:hover { background: color-mix(in srgb, var(--ac-panel) 70%, transparent); }
.ac-card__label {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-signal);
}
.ac-card__title {
  font-family: var(--ac-font-display);
  font-size: var(--wp--preset--font-size--display-m);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ac-bright);
}
.ac-card__note { font-size: var(--ac-small); line-height: 1.55; color: var(--ac-body); }
.ac-card__arrow { margin-top: auto; padding-top: 0.75rem; color: var(--ac-signal); }

/* ==========================================================================
   Contact form
   ========================================================================== */

.ac-form-wrap { max-width: 34rem; }

.ac-field { margin-block: 1.5rem; }
.ac-field label {
  display: block;
  margin-block-end: 0.5rem;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-signal);
}
.ac-field__opt {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: color-mix(in srgb, var(--ac-body) 80%, transparent);
}

.ac-field input,
.ac-field textarea {
  /* Form controls do not inherit border-box from anywhere in WordPress, so
     width:100% plus padding and a border overflowed the page by 11px at every
     phone width. The first form on the site is the first chance for this to
     happen; verify:layout caught it. */
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ac-line);
  border-radius: 2px;
  background: color-mix(in srgb, var(--ac-panel) 70%, transparent);
  color: var(--ac-bright);
  font-family: var(--ac-font-sans);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
}
.ac-field textarea { min-height: 8rem; resize: vertical; }
.ac-field input:hover,
.ac-field textarea:hover { border-color: color-mix(in srgb, var(--ac-signal) 45%, var(--ac-line)); }
.ac-field input:focus-visible,
.ac-field textarea:focus-visible { border-color: var(--ac-signal); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs — and aria-hidden on the wrapper keeps it away from screen
   readers, who must never be asked to fill in a trap. */
.ac-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ac-form-error {
  border-left: 2px solid var(--ac-signal);
  background: color-mix(in srgb, var(--ac-panel) 60%, transparent);
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
  color: var(--ac-bright);
}

.ac-form-done {
  border: 1px solid var(--ac-line);
  border-left: 2px solid var(--ac-signal);
  background: color-mix(in srgb, var(--ac-panel) 60%, transparent);
  padding: 1.5rem;
}
.ac-form-done:focus-visible { outline: 2px solid var(--ac-signal); outline-offset: 3px; }
.ac-form-done__lead {
  margin-block-start: 0.75rem;
  font-size: var(--ac-lede);
  color: var(--ac-bright);
}
.ac-form-done p + p { margin-block-start: 0.75rem; }

/* ==========================================================================
   Founder photograph
   ========================================================================== */

/* A document, presented as one. Bordered like the panels rather than bled to
   the edge — it is evidence in a story, not a hero image, and the site spec
   bans hero photography anyway. */
.ac-founder-photo {
  margin: var(--wp--preset--spacing--40) 0 0;
  max-width: 44rem;
  border: 1px solid var(--ac-line);
  background: color-mix(in srgb, var(--ac-panel) 60%, transparent);
  padding: 0.75rem;
}
.ac-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.ac-founder-photo figcaption {
  margin-top: 0.85rem;
  padding: 0 0.25rem 0.25rem;
  font-size: var(--ac-small);
  line-height: 1.6;
  color: var(--ac-body);
}

/* ==========================================================================
   Videos
   ========================================================================== */

.ac-videos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ac-line); }
.ac-video {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--ac-line);
  padding-block: 2rem;
}
@media (min-width: 782px) {
  .ac-video { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem 2rem; padding-block: 2.5rem; }
}
.ac-video__num {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--ac-signal);
  padding-top: 0.4rem;
}
.ac-video__body { grid-column: 2; max-width: 44rem; }
.ac-video__q {
  font-family: var(--ac-font-display);
  font-size: var(--wp--preset--font-size--display-m);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ac-bright);
}
.ac-video__summary { margin-top: 0.85rem; }

/* 16:9, reserved before the frame loads so an embed cannot shift the page. */
.ac-video__frame {
  position: relative;
  margin-top: 1.5rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ac-line);
  background: color-mix(in srgb, var(--ac-panel) 70%, transparent);
}
/* A portrait recording stays portrait. Capped so a 9:16 video does not run the
   whole height of a desktop screen, and left-aligned with the prose rather than
   centred, because every other block on these pages starts at the same edge. */
.ac-video__frame--portrait {
  aspect-ratio: 9 / 16;
  max-width: min(24rem, 100%);
}
.ac-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.ac-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ac-video__body > p:last-child { margin-top: 1rem; }

/* ==========================================================================
   Scroll reveal — translate only. A fade puts small text through a transient
   sub-4.5:1 state that axe flags and slow scrollers actually see.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ac-reveal { animation: ac-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes ac-reveal-in {
  from { transform: translateY(0.9rem); }
  to   { transform: none; }
}

/* ==========================================================================
   Demo console bridge
   The console ships its own stylesheet and uses its own token names. Aliasing
   them here — scoped to the console, not globally — lets the exact same
   component run under Astro and WordPress with no edits.
   ========================================================================== */

.console {
  --color-night: var(--ac-night);
  --color-panel: var(--ac-panel);
  --color-line: var(--ac-line);
  --color-body: var(--ac-body);
  --color-bright: var(--ac-bright);
  --color-signal: var(--ac-signal);
  --color-relay: var(--ac-relay);
  --font-sans: var(--ac-font-sans);
  --font-mono: var(--ac-font-mono);
  --text-micro: var(--ac-micro);
  --text-small: var(--ac-small);
  --text-lede: var(--ac-lede);
}