/* Capability Actual — page styles. Tokens live in tokens.css. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
button, a { -webkit-tap-highlight-color: rgba(201, 101, 45, 0.12); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--t-micro);
  font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--hero-bg) 0%, var(--hero-bg-2) 100%);
  color: var(--hero-fg);
  border-bottom: 1px solid var(--hero-border);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--head);
  font-weight: 700;
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
  color: #f2ebdd;
}
.brand svg { width: 36px; height: 28px; flex: 0 0 auto; }
.wordmark { white-space: nowrap; }
.brand-bar { font-weight: 500; margin: 0 0.08em; }

@media (max-width: 480px) {
  .brand { font-size: var(--t-small); gap: 8px; }
  .brand svg { width: 30px; height: 23px; }
  .toggle { padding: 7px 10px; }
}
@media (max-width: 360px) {
  .topbar { gap: 8px; }
  .brand { font-size: var(--t-micro); gap: 6px; }
  .brand svg { width: 26px; height: 20px; }
}

.toggle {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-dim);
  background: transparent;
  border: 1px solid var(--hero-border);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.toggle:hover { color: var(--hero-fg); border-color: var(--hero-dim); }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero-body { padding: 64px 0 80px; max-width: 760px; }

.umbrella {
  margin-top: 18px;
  max-width: 54ch;
  color: var(--hero-dim);
  font-size: var(--t-body);
  line-height: 1.6;
}

.eyebrow {
  /* The hero's own orange: the gradient's lighter stop puts --accent at
     4.41:1 here, under the floor. The cream-ground --accent-text would be
     worse still (2.90) — this ground needs the light one. */
  color: var(--accent-on-dark);
  display: inline-block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hero-border);
  margin-bottom: 28px;
}

.hero h1 {
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}

.hero p {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--hero-dim);
  margin: 0 0 16px;
  max-width: 60ch;
}
.hero p:last-child { margin-bottom: 0; }
.hero p strong { color: var(--hero-fg); font-weight: 500; }

/* ---------- Selector ---------- */
.selector { padding: 64px 0 24px; }
.section-label { color: var(--muted); display: block; margin-bottom: 26px; }

.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 26px 24px 22px;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.panel:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel.active { border-color: var(--accent); box-shadow: var(--shadow); }

.panel .kicker { color: var(--accent-text); margin-bottom: 14px; display: block; }
.panel h2 {
  font-family: var(--head);
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.panel p { font-size: var(--t-body); color: var(--fg-dim); margin: 0; line-height: 1.55; }

/* ---------- Which door is open today ----------
   Three identical cards said all three lanes were equally open for business.
   Two of them are previews of tools that do not exist yet. The live one keeps
   the full surface and says so in the card; the previews step back a half
   tone — still fully usable, visibly not the same offer. */
.panel-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-micro); margin-bottom: 12px;
}
.panel-status .dot {
  width: 7px; height: 7px; border-radius: var(--r-circle);
  background: #4a7c4e; flex: 0 0 auto;
}
.panel.is-live {
  border-color: var(--fg);
  box-shadow: var(--shadow);
}
.panel.is-live .panel-status { color: var(--fg); font-weight: 600; }
.panel.is-soon { background: transparent; }
.panel.is-soon .panel-status { color: var(--muted); }
.panel.is-soon h2 { color: var(--fg-dim); }
/* Selection still reads louder than status, or the active card would be
   ambiguous once someone has picked a preview. */
.panel.active { border-color: var(--accent); }
.panel.is-live.active { border-color: var(--accent); }

.pill.soon { color: var(--muted); }


/* ---------- Inline preview panel ---------- */
.inline-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px 26px;
  margin-bottom: 28px;
}
.preview-tag {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.inline-q {
  font-family: var(--head);
  font-weight: 600;
  font-size: var(--t-lead);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.inline-options { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-options button {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.inline-options button:hover { border-color: var(--accent); }
.inline-options button.on { border-color: var(--accent); color: var(--accent-text); }
.inline-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Flow steps ---------- */
.step { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.step-label { color: var(--muted); display: block; margin-bottom: 12px; }

.field-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.field-row .grow { flex: 1 1 280px; min-width: 0; }

input[type="text"],
input[type="email"],
input[type="date"] {
  font-family: var(--sans);
  /* 16px is a hard floor. Any smaller and iOS Safari zooms the page on focus
     and does not zoom back out. Do not lower this. */
  font-size: var(--t-lead);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
input::placeholder { color: var(--muted); opacity: 1; }
input:focus { outline: none; border-color: var(--accent); }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent-strong-hover); border-color: var(--accent-strong-hover); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn-quiet:hover { background: transparent; border-color: var(--accent); color: var(--accent-text); }

.presets { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.presets button {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.presets button:hover { color: var(--accent-text); border-color: var(--accent); }
.presets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Rendered output ---------- */
.out:empty { display: none; }
.out {
  margin-top: 22px;
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-dim);
}
.out strong { color: var(--fg); }

.card-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 4px; }
.card-head h3 {
  font-family: var(--head);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}
.card-head .dur { color: var(--accent-text); }
.limit-note { color: var(--muted); font-size: var(--t-small); margin: 0 0 18px; }
.limit-note.none { font-style: normal; }

.movements { list-style: none; margin: 0 0 20px; padding: 0; }
.movements li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.movements li:first-child { border-top: 1px solid var(--hairline); }
.movements .name { flex: 1 1 200px; color: var(--fg); font-weight: 500; }
.movements .dose { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--fg-dim); }
.plane {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  flex: 0 0 auto;
}

/* ---------- Timer ---------- */
.timer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--bg);
  margin-bottom: 18px;
}
.timer-read {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  min-width: 4.4ch;
}
.timer-read.running { animation: tick 1s steps(1, end) infinite; }
.timer-read.done { color: var(--accent-text); }
@keyframes tick { 50% { opacity: 0.55; } }
.timer-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.timer .btn { font-size: var(--t-micro); padding: 9px 16px; }

.cta {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  background: var(--accent-strong);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cta:hover { background: var(--accent-strong-hover); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Three beats ---------- */
.beats { list-style: none; margin: 0 0 6px; padding: 0; counter-reset: beat; }
.beats li { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.beats li:first-child { border-top: 1px solid var(--hairline); }
.beats .beat-label { color: var(--accent-text); display: block; margin-bottom: 5px; }
.beats .beat-text { color: var(--fg); }

/* ---------- Ordered actions ---------- */
.actions { margin: 0 0 6px; padding: 0 0 0 1.2em; }
.actions li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.actions li:first-child { border-top: 1px solid var(--hairline); }
.actions li::marker { font-family: var(--mono); font-size: var(--t-small); color: var(--accent-text); }
.actions .act-name { color: var(--fg); font-weight: 600; display: block; }
.actions .act-why { color: var(--fg-dim); font-size: var(--t-body); }
.window-note { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }

/* ---------- Waitlist ---------- */
.waitlist { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.waitlist .lede { font-size: var(--t-body); color: var(--fg-dim); margin: 0 0 14px; max-width: 54ch; }
.waitlist .field-row { gap: 10px; }
.form-note { font-size: var(--t-small); margin: 12px 0 0; min-height: 1.2em; }
/* Don't hold a gap open for a message that isn't there. */
.form-note:empty { min-height: 0; margin: 0; }
.form-note.ok { color: var(--accent-text); }
.form-note.err { color: var(--fg); }

/* ---------- Status pills ---------- */
.status-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pill .dot { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--muted); flex: 0 0 auto; }
.pill.live .dot { background: #4a7c4e; }
.pill a { margin-left: 4px; color: var(--accent-text); font-weight: 700; text-decoration: none; }
.pill a:hover { color: var(--accent-strong-hover); }

/* ---------- Standard band ---------- */
.standard { padding: 56px 0 12px; }
.standard .inner { border-left: 2px solid var(--accent); padding-left: 22px; max-width: 60ch; }
.standard p {
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}
.standard .sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-lead);
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}
.standard .sub strong { color: var(--fg); font-weight: 600; }
.standard .sub a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.standard .sub a:hover { color: var(--accent-hover); }

/* ---------- Footer ---------- */
footer { margin-top: 64px; border-top: 1px solid var(--hairline); padding: 32px 0 56px; }
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  justify-content: space-between;
}
footer p { margin: 0; font-size: var(--t-body); color: var(--muted); max-width: 54ch; }
footer a.mail { color: var(--accent-text); text-decoration: none; font-weight: 500; font-size: var(--t-body); }
footer a.mail:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- Motion ---------- */
/* `backwards`, not `forwards`, and the keyframe states the START not the end.
   A forwards-filled animation keeps applying its final `transform: none` after
   it finishes, and a filled animation outranks every normal declaration — so
   it silently killed the card lift on :hover and the press on :active. With
   `backwards` the element holds the from-state before it starts, then returns
   to its own styles once it ends, and those pseudo-classes work again. */
.reveal { animation: rise 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) backwards; }
.reveal.d1 { animation-delay: 0.06s; }
.reveal.d2 { animation-delay: 0.12s; }
.reveal.d3 { animation-delay: 0.18s; }
.reveal.d4 { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Mobile ----------
   Phones get bigger type, full-width controls and 44px tap targets. The page
   should never need a pinch. */
@media (max-width: 780px) {
  .panel-grid { grid-template-columns: 1fr; gap: 14px; }
  .hero-body { padding: 44px 0 52px; }
  .selector { padding: 40px 0 8px; }
  .inline-panel { padding: 22px 18px; }
  .panel { padding: 20px 18px 18px; }
  .panel:hover { transform: none; }

  /* Mono labels are the smallest type on the page. Give them back some size
     and some of the letter-spacing budget. */
  .mono { font-size: var(--t-micro); letter-spacing: 0.12em; }
  .plane { font-size: var(--t-micro); letter-spacing: 0.1em; }
  .pill { font-size: var(--t-micro); }
  .movements .dose { font-size: var(--t-small); }

  /* "Open it" is the only link to the live product, and inline in a pill it
     was a 19px-tall target. Give it the full 44px and take the height back
     out of the pill's own padding so the row does not become a slab. */
  .pill.live { padding-top: 2px; padding-bottom: 2px; }
  .pill a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    margin-left: 2px;
  }

  /* Every control clears 44px. */
  .btn,
  .inline-options button,
  .presets button,
  .timer .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* One even row of choices. Ragged wrapping made the third option look like
     an afterthought. */
  .inline-options { gap: 8px; }
  .inline-options button {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--t-body);
    /* Equal thirds of a 390px screen leave 84px of content box, and "45+
       minutes" needs 84px. Trimming the side padding buys the headroom that
       keeps it on one line while the other two sit on one. */
    padding: 12px 4px;
  }

  /* Four stacked full-width presets ran as long as the primary question they
     sit under. Two columns keeps them secondary. */
  .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .presets button { padding: 12px 8px; font-size: var(--t-micro); letter-spacing: 0.04em; }
  .toggle { min-height: 40px; font-size: var(--t-micro); }

  /* Stack the forms. A button sharing a row with a field is a 40px target. */
  .field-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .field-row .grow { flex: 1 1 auto; width: 100%; }
  .field-row .btn { width: 100%; }
  input[type="text"],
  input[type="email"],
  input[type="date"] { min-height: 48px; }

  /* Movement rows read as name, then dose and plane on their own line. */
  .movements li { gap: 6px; padding: 13px 0; }
  .movements .name { flex: 1 1 100%; font-size: var(--t-lead); }
  .movements .dose { margin-right: auto; }

  .timer { gap: 12px; padding: 14px; }
  .timer-read { font-size: 2.2rem; }
  .timer-controls { flex: 1 1 100%; }
  .timer-controls .btn { flex: 1 1 0; }

  .cta { display: block; text-align: center; padding: 14px 20px; }
  .out { font-size: var(--t-lead); }
  .beats .beat-text, .actions .act-why { font-size: var(--t-lead); }
  footer .wrap { gap: 14px; }
  footer a.mail { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .hero h1 { font-size: 2rem; }
  /* Get to the three cards sooner. */
  .hero-body { padding: 34px 0 40px; }
  .eyebrow { padding-bottom: 11px; margin-bottom: 20px; }
  .hero p { font-size: var(--t-lead); }
  .selector { padding: 32px 0 8px; }
  .section-label { margin-bottom: 18px; }
  .inline-panel { padding: 20px 16px; }
  .presets { gap: 8px; }
  .presets button { flex: 1 1 100%; }
}

/* Touch devices of any width: no hover lift, no sub-44px targets. */
@media (pointer: coarse) {
  .panel:hover { transform: none; }
  .btn, .inline-options button, .presets button, .toggle { min-height: 44px; }
}

/* ---------- Press feedback ----------
   A phone has no hover, so the press is the only thing that confirms a tap
   landed. Small controls take the standard 0.97; the cards are big enough
   that the same figure reads as a lurch, so they get less.

   Placed after the media queries on purpose: the touch blocks above null out
   the hover transform, and at equal specificity the last rule wins. Move this
   up and the cards stop responding to a press. */
.btn:active,
.inline-options button:active,
.presets button:active,
.toggle:active,
.cta:active { transform: scale(0.97); }

.panel:active { transform: scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .reveal { opacity: 1; transform: none; animation: none; }
  .timer-read.running { animation: none; }
  /* Feedback stays, via the border and colour change. The squeeze goes. */
  .btn:active,
  .inline-options button:active,
  .presets button:active,
  .toggle:active,
  .cta:active,
  .panel:active { transform: none; }
}

/* step actions row */
.step-actions { margin-top: 18px; }
.presets-label { display: block; margin-top: 20px; margin-bottom: 0; }

/* The line that turns a result into a point of view. One sentence, in the
   page's voice, between the answer and the single action it earns. */
.out .why {
  margin: 18px 0 14px;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-dim);
}
/* The result's action is a real button when it opens the waitlist, and an
   anchor when it leaves for the app. Same beat, same weight. */
.out button.cta { border: 0; font-family: var(--sans); cursor: pointer; }

/* One proof artifact. Not a testimonial wall, not a metric badge — a statement
   of what the thing you just used actually is, including its limits. */
.proof {
  max-width: 62ch;
  margin: 0 0 26px;
  padding-left: 18px;
  border-left: 2px solid var(--border);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-dim);
}
.proof-tag { display: block; color: var(--muted); margin-bottom: 8px; }

/* Footer: contact plus the two legal pages, reachable without hunting. */
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.foot-links a {
  color: var(--muted); text-decoration: none; font-size: var(--t-body);
  min-height: 44px; display: inline-flex; align-items: center;
}
.foot-links a:hover { color: var(--fg); }
.foot-links a.mail { color: var(--accent-text); font-weight: 500; }

/* ---------- Legal pages ----------
   Privacy and Terms live on this domain because this domain collects
   something: a waitlist form writes an email to KV, which Built Capable's
   policy does not cover. Same shell, same tokens, set for reading. */
.legal { padding: clamp(32px, 6vw, 64px) 0 48px; }
.legal .wrap { max-width: 68ch; }
.legal-back {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none; font-size: var(--t-body);
}
.legal-back:hover { color: var(--fg); }
.legal h1 {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.025em;
  margin: 18px 0 6px; line-height: 1.1;
}
.legal-date { margin: 0 0 28px; color: var(--muted); font-size: var(--t-small); }
.legal-lede {
  margin: 0 0 32px; padding-left: 18px; border-left: 2px solid var(--accent);
  font-size: var(--t-lead); line-height: 1.65; color: var(--fg);
}
.legal h2 {
  font-family: var(--head); font-weight: 600; font-size: var(--t-h3);
  letter-spacing: -0.015em; margin: 32px 0 10px;
}
.legal p, .legal li { font-size: var(--t-lead); line-height: 1.7; color: var(--fg-dim); margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal code {
  font-family: var(--mono); font-size: var(--t-small);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 1px 6px;
}


/* Targets the audit caught under 44px: the theme toggle, the live pill's
   action, and links sitting inline inside a sentence. Inline links in prose
   are exempt from the 44px guidance but were 17px, which is a pinpoint. */
.toggle { min-height: 44px; }
.pill a { min-height: 44px; display: inline-flex; align-items: center; }
.standard .sub a,
.legal p a,
.legal li a { display: inline-block; padding: 6px 0; }
.btn { min-height: 44px; }