/* subscribe.css — v4 "Measured Life" subscribe page.
   Reuses story.css chrome (.story-top / .brand / .doors / .theme-toggle / .skip
   / .dx-foot-bar); this sheet only styles the pitch + form. */

.sub-main { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-9);
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 901px) { .sub-main { grid-template-columns: 1.05fr 0.95fr; } }

.sub-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ember); }
.sub-title { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1);
  line-height: var(--lh-tight); margin-top: var(--sp-3); }
.sub-lede { margin-top: var(--sp-4); color: var(--ink); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure); }
.sub-sub { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--measure); }

/* what lands in your inbox */
.wyg { margin-top: var(--sp-6); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.wyg-h { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-hair); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.wyg-row { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-top: var(--border-hair); }
.wyg-row:first-of-type { border-top: 0; }
.wyg-ic { color: var(--ember); font-family: var(--font-mono); flex-shrink: 0; }
.wyg-t { font-size: var(--fs-body); color: var(--ink-muted); line-height: var(--lh-relaxed); }
.wyg-t strong { color: var(--ink); font-weight: var(--weight-med); }

.sub-meta { margin-top: var(--sp-5); border-left: 2px solid var(--ember); padding-left: var(--sp-4); }
.sub-meta-h { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-faint); }
.sub-meta-b { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.sub-count-line { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.sub-count-line b { color: var(--ember); font-weight: var(--weight-reg); }
.sub-road { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.sub-road strong { color: var(--ink-muted); font-weight: var(--weight-reg); }

/* form card */
.sub-card { border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
@media (min-width: 901px) { .sub-card { position: sticky; top: var(--sp-6); } }
.sub-card-h { padding: var(--sp-4); border-bottom: var(--border-hair); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ember); }
.sub-card-b { padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-4); }
.sub-field { display: grid; gap: var(--sp-2); }
.sub-label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted); }
.sub-label .opt { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.sub-input { background: var(--page); border: var(--border-hair); border-radius: var(--radius-xs); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-body); padding: var(--sp-3); width: 100%; }
.sub-input::placeholder { color: var(--ink-faint); }
.sub-input:focus { outline: none; border-color: var(--ember); }
.sub-note { font-size: var(--fs-small); color: var(--ink-faint); line-height: var(--lh-relaxed); }
.sub-note a { color: var(--ink-muted); }
.sub-btn { width: 100%; cursor: pointer; background: var(--ember); color: var(--page); border: 0;
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.04em; padding: var(--sp-3) var(--sp-4); }
.sub-btn:hover { filter: brightness(1.06); }
.sub-btn:active { filter: brightness(0.94); }
.sub-btn:disabled { opacity: 0.55; cursor: progress; filter: none; }
.sub-input[aria-invalid="true"] { border-color: var(--ember); }
.sub-status { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); text-align: center; min-height: 18px; }
.sub-status.is-error { color: var(--ember); }
.sub-status.is-info { color: var(--ink-muted); }

.sub-success { display: none; border: var(--border-hair); border-radius: var(--radius-sm); background: var(--ember-wash);
  padding: var(--sp-7) var(--sp-5); text-align: center; }
.sub-success .st { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ember); margin-top: var(--sp-2); }
.sub-success .sb { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.sub-success a { color: var(--ember); }

/* state mark (#1473): the sprite icon (mail/check/flatline) replaced the old text
   dingbat — .si now sizes the inline <use> icon, colour rides the state. */
.si { color: var(--ember); }
.si .ico { width: 30px; height: 30px; }

/* ── /subscribe/confirm/ — the state readout card (#1473) ─────────────────── */
.cc-wrap { max-width: 560px; margin-inline: auto; padding: var(--sp-7) var(--gutter) var(--sp-9); }
.cc-card { border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.cc-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-hair); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.cc-head .ch-state { color: var(--ember); }
.cc-card[data-state="err"] .ch-state { color: var(--ink-muted); }
.cc-body { padding: var(--sp-7) var(--sp-5); text-align: center; }
.cc-body .st { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ember); margin-top: var(--sp-3); }
.cc-card[data-state="wait"] .st, .cc-card[data-state="err"] .st { color: var(--ink); }
.cc-card[data-state="err"] .si { color: var(--ink-faint); }
.cc-body .sb { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.cc-body .sb a { color: var(--ember); }
.cc-nojs { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); line-height: var(--lh-relaxed); }

.sub-btn:focus-visible, .sub-input:focus-visible, .doors a:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs);
}

/* ── The Engagement Ladder (#1393) ─────────────────────────────────────────────
   Reader → Subscriber → Predictor → Replicator → Contributor. A quiet, invitational
   surface — no urgency, no pressure (the SDT guardrail lives in the copy + JS). */
.ladder { max-width: 760px; margin: var(--sp-8) auto 0; padding: 0 var(--gutter) var(--sp-8); }
.ladder-head { text-align: center; margin-bottom: var(--sp-5); }
.ladder-eyebrow { color: var(--ember); margin-bottom: var(--sp-2); }
.ladder-head h2 { font-family: var(--font-serif); font-size: var(--fs-h2); color: var(--ink); }
.ladder-lede { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.ladder-fallback { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); text-align: center; }

.ladder-rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ladder-rung { border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface);
  padding: var(--sp-4) var(--sp-4); border-left: 2px solid var(--rule); }
.ladder-rung[data-reached] { border-left-color: var(--ember); }
.ladder-rung[data-here] { background: var(--surface-raised); box-shadow: 0 0 0 1px var(--ember) inset; }
.lr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.lr-name { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); }
.lr-badge { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ember); }
.lr-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.lr-blurb { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.lr-note { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.lr-cta { display: inline-block; margin-top: var(--sp-3); color: var(--ember); font-size: var(--fs-body); }
.lr-selfcert { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ember);
  background: transparent; border: var(--border-hair); border-radius: var(--radius-xs);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; }
.lr-selfcert:hover { border-color: var(--ember); }
.lr-selfcert:disabled { color: var(--ink-faint); cursor: default; }

.ladder-you { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.ladder-prov { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-faint); }
.ladder-prov summary { cursor: pointer; font-family: var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ladder-prov-list { margin-top: var(--sp-3); display: grid; gap: var(--sp-2) var(--sp-3); }
.ladder-prov-list dt { font-family: var(--font-serif); color: var(--ink-muted); }
.ladder-prov-list dd { margin: 0 0 var(--sp-2); color: var(--ink-faint); line-height: var(--lh-relaxed); }
.ladder-prov-list code { font-family: var(--font-mono); font-size: 0.92em; /* fs-ok: inline-code relative down-scale in prose */ color: var(--ink-muted); }

.lr-selfcert:focus-visible, .lr-cta:focus-visible, .ladder-prov summary:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs);
}