/* The apex story page (task 289). Every color, font and step comes from
 * tokens.css, which is a byte-identical copy of frontend/assets/tokens.css —
 * scripts/check-apex-site.py asserts the copy and scripts/check-frontend-tokens.py
 * scans this page for color literals. A literal here would be a second palette
 * for the same brand on a host that cannot see the first one.
 *
 * This is the whole stylesheet: the page carries no inline <style>, because
 * `style-src 'self'` with no 'unsafe-inline' is the point of the CSP and an
 * inline block would have bought the weaker policy.
 */

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

body {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  /* The page is one column of prose at every width; the gutter above is the
   * only thing that changes. `text-wrap: pretty` is progressive — a browser
   * that ignores it renders the same copy with worse rags. */
  text-wrap: pretty;
}

/* ── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--space-4) 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mark {
  /* Width/height are on the element so the mark reserves its box before the
   * SVG arrives; the radius matches the source icon's own rounded ground. */
  border-radius: 20%;
  display: block;
}

.wordmark {
  margin: 0;
  font-size: var(--text-heading-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-strong);
}

/* ── the story ────────────────────────────────────────────────────────── */

main {
  max-width: 38rem;
  margin: 0 auto;
}

section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* The lede owns the top of the page and is the one thing that is not
 * separated from what came before it. */
.lede {
  border-top: 0;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

h1 {
  margin: 0 0 var(--space-3);
  /* Larger than the shell's heading step: this is the one line a cold visitor
   * reads, and the shell's scale is tuned for a screen that also holds a
   * capture box. clamp() keeps it from crowding a phone. */
  font-size: clamp(2rem, 1.55rem + 2.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
  text-wrap: balance;
}

.standfirst {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--color-text-strong);
  margin: 0;
}

/* The kist/chest sentence is the only place a stranger learns what this is
 * (task 289, load-bearing under the 2026-08-08 concept ruling), so the word
 * itself is marked rather than italicised into the run of text. It now leads
 * the page, so the mark is on the h1 and the standfirst's `till` takes the
 * quieter treatment: two highlights in three lines reads as decoration. */
h1 em {
  font-style: normal;
  box-shadow: inset 0 -0.3em 0 var(--color-accent-light);
  padding: 0 0.1em;
}

.standfirst em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-accent-dark);
}

.sawdust {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
}

h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-secondary);
}

p {
  margin: 0 0 var(--space-3);
}

p:last-child {
  margin-bottom: 0;
}

.who {
  margin: 0;
  padding: 0;
  list-style: none;
}

.who li {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent-light);
  margin-bottom: var(--space-3);
}

.who li:last-child {
  margin-bottom: 0;
}

/* ── actions ──────────────────────────────────────────────────────────── */

a {
  color: var(--color-accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.action {
  margin: var(--space-4) 0 var(--space-3);
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
  /* The address is the action. Nothing on this page is a form field, so the
   * only "submit" is the reader's own mail client. */
  word-break: break-word;
}

.primary:hover,
.primary:focus-visible {
  background: var(--color-accent-dark);
  color: var(--color-surface);
}

.onward {
  font-size: var(--text-label);
}

:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

/* ── footer ───────────────────────────────────────────────────────────── */

footer {
  max-width: 38rem;
  margin: 0 auto;
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

footer p {
  margin: 0 0 var(--space-1);
}

@media (max-width: 26rem) {
  body {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ─── plans (task 1139) ─────────────────────────────────────────────────────── */

h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-heading-sm);
  color: var(--color-text-strong);
}

.plan-list {
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.plan-list li {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.price {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-accent-dark);
}

.plan-list .primary {
  margin-right: var(--space-3);
}

.terms,
.source {
  overflow-wrap: anywhere;
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}

.wordmark a {
  color: inherit;
  text-decoration: none;
}

.standfirst + p {
  margin-top: var(--space-3);
}