/* GREEN18 — topic-cluster landing pages.
   Tokens mirror green18 Sources/DesignSystem/Tokens.swift (dark scheme):
   surfacePrimaryDark, Palette.white (creme), accentDark, actionPill pair. */

:root {
  --bg:        #041306;  /* surfacePrimaryDark  rgb(4,19,7) */
  --bg-2:      #0A1C0E;  /* raised surface */
  --bg-3:      #0E2413;  /* card / inset */
  --ink:       #F5F2E3;  /* Palette.white — creme, never pure white */
  --ink-2:     #B4BFB2;  /* secondary — 9.6:1 on --bg */
  --ink-3:     #7C8C7E;  /* tertiary / eyebrow — 4.9:1 on --bg */
  --accent:    #75DC49;  /* accentDark — 11.5:1 on --bg */
  --pill-fill: #0E3017;  /* actionPillFill */
  --pill-ink:  #88FA68;  /* actionPillLabel */
  --border:    #1F3324;
  --border-2:  #2C4633;
  /* a11y: boundary colour for INTERACTIVE controls only (WCAG 1.4.11 needs
     3:1 against both the control fill and the page). --border-2 is 1.7-1.8:1
     and stays where it is decorative. #628A6C is 3.69:1 on --pill-fill,
     3.13:1 on the .btn hover fill, 4.19:1 on --bg-3, 4.88:1 on --bg. */
  --border-ui: #628A6C;
  --measure:   38rem;
  --wide:      60rem;   /* narrowed from 68rem — the header content was spread
                          across ~1088px with a large gap between the mark and
                          the nav, which made the wide 18 read as stretched.
                          Narrowing the shared container keeps the mark aligned
                          with the page text rather than breaking alignment by
                          narrowing only the header. */
  color-scheme: dark;
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* the sticky CTA slides up on scroll; snap it instead */
  .btn:active { transform: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 860px) { body { font-size: 18px; } }

a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
/* a11y: 3px ring, 2px offset. --accent is 9.4-11.0:1 on every surface here.
   NOTE: no border-radius here — it used to square off the pill buttons and
   cards on focus; the outline already follows the element's own radius. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: .5rem; z-index: 100;
  background: var(--accent); color: #041306; padding: .55rem .8rem;
  border-radius: 4px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: .5rem; }
/* accent-on-accent is 1.55:1 — ring in the near-black field instead (11.0:1) */
.skip:focus-visible { outline-color: #041306; }

/* ---------------------------------------------------------------- shell -- */

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }
.measure { max-width: var(--measure); }

header.site {
  position: sticky; top: 0; z-index: 40;
  /* Exactly the page background — no translucency, no blur, no divider. A
     translucent header over a tinted hero rendered as a visibly different
     shade, and the border read as a seam. */
  background: var(--bg);
}
header.site .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.6rem;
}
.wordmark {
  font-weight: 800; font-size: 1.1rem; letter-spacing: .04em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark b { color: var(--accent); font-weight: 800; }
header.site nav { margin-left: auto; display: none; gap: 1.5rem; }
header.site nav a {
  color: var(--ink-2); text-decoration: none; font-size: .95rem; white-space: nowrap;
  /* a11y 2.5.8: the inline box was ~26px tall and 0 padding wide-side */
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
header.site nav a:hover, header.site nav a:focus-visible { color: var(--ink); }
header.site .btn { margin-left: auto; }
/* The header CTA is a control in the row, not the row itself — it was filling
   the full header height. */
header.site .btn { padding: .45rem 1.05rem; font-size: .92rem; min-height: 0; }
header.site nav ~ .btn { margin-left: 0; }
@media (min-width: 860px) { header.site nav { display: flex; } }
@media (max-width: 520px) { header.site .btn { padding: .5rem .8rem; font-size: .9rem; } }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--pill-fill); color: var(--pill-ink);
  border: 1px solid var(--border-ui); border-radius: 999px;
  padding: .7rem 1.25rem; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover, .btn:focus-visible {
  background: #143D20; border-color: var(--accent); text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.08rem; }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--border-ui);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--bg-2); border-color: var(--accent); }

.cta-group { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0 .75rem; }
.cta-sub { color: var(--ink-3); font-size: .92rem; margin: 0; }

/* ---------------------------------------------------------------- type -- */

h1, h2, h3 { letter-spacing: -.015em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.05rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }

.eyebrow {
  display: inline-block; margin: 0 0 1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

p { margin: 0 0 1rem; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--ink-2); line-height: 1.55; }
.lede strong { color: var(--ink); }

/* The voice is short declarative lines. `.beat` gives each its own air. */
.beat { margin: 0 0 .55rem; color: var(--ink-2); }
.beat:last-child { margin-bottom: 0; }
.beat strong { color: var(--ink); }

blockquote.pull {
  margin: 1.75rem 0; padding: 0 0 0 1.15rem;
  border-left: 3px solid var(--accent);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.35;
  font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
blockquote.pull p { margin: 0; }

ul.ticks { list-style: none; padding: 0; margin: 0 0 1.25rem; }
ul.ticks li {
  position: relative; padding-left: 1.5rem; margin: .5rem 0; color: var(--ink-2);
}
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 1px;
  background: var(--accent);
}

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

section { padding: 3.25rem 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }
section > .wrap > * + h2 { margin-top: 0; }
section h2 + p, section h2 + .beat { margin-top: 1rem; }
@media (min-width: 860px) { section { padding: 4.5rem 0; } }

.hero { padding: 3.5rem 0 3rem; border-top: 0; }
.hero .lede { margin-top: 1.25rem; }
@media (min-width: 860px) { .hero { padding: 5.5rem 0 4.5rem; } }

/* The hero previously carried a radial glow. It made the band under the
   sticky header measurably lighter than the header itself (rgb(7,24,7) vs
   rgb(4,19,6)), which read as a mismatch. The page is now one flat field. */

.grid { display: grid; gap: 1rem; }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.35rem 1.4rem;
}
.card h3 { margin: 0 0 .5rem; }
.card p { margin: 0; color: var(--ink-2); }

/* numbered steps */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { ol.steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { ol.steps { grid-template-columns: repeat(4, 1fr); } }
ol.steps li {
  counter-increment: s;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.3rem 1.35rem;
}
ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block; margin-bottom: .7rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; color: var(--accent);
}
ol.steps h3 { margin: 0 0 .45rem; }
ol.steps .beat { font-size: .96rem; }

/* final conversion band */
.convert { background: var(--bg-2); border-top: 1px solid var(--border); }
.convert h2 { margin-bottom: 1rem; }

/* FAQ */
.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq details[open] summary { color: var(--accent); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
  /* a11y: ~52px tall row, and the ring hugs the row rather than the text */
  min-height: 2.75rem; display: flex; align-items: center;
  outline-offset: -3px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-weight: 400; font-size: 1.4rem; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1.2rem; color: var(--ink-2); max-width: var(--measure); }
.faq details > div p:last-child { margin-bottom: 0; }

/* breadcrumbs */
.crumbs { font-size: .88rem; color: var(--ink-3); padding: 1rem 0 0; }
.crumbs a {
  color: var(--ink-2); text-decoration: none;
  /* a11y 2.5.8: ~23px line box; pad to a 24px target without moving the row */
  display: inline-block; padding: .2rem 0; min-height: 1.5rem;
}
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span { padding: 0 .4rem; }

/* related links */
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
@media (min-width: 700px) { .related ul { grid-template-columns: repeat(2, 1fr); } }
.related a {
  display: block; padding: .85rem 1rem;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.related a:hover, .related a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* disclaimer */
.disclaimer { color: var(--ink-3); font-size: .9rem; max-width: var(--measure); }

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

footer.site { border-top: 1px solid var(--border); background: var(--bg); padding: 3rem 0 2rem; }
.foot-top { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 700px) { .foot-top { grid-template-columns: 1.2fr 3fr; } }
.foot-brand p { color: var(--ink-2); max-width: 18rem; margin: .6rem 0 0; font-size: .95rem; }
.foot-cols { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .foot-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .foot-cols { grid-template-columns: repeat(5, 1fr); } }
.foot-cols h2 {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .7rem;
}
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin: 0 0 .35rem; }
.foot-cols a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem;
  /* a11y 2.5.8 */
  display: inline-flex; align-items: center; min-height: 1.75rem;
}
.foot-cols a:hover, .foot-cols a:focus-visible { color: var(--accent); }
.foot-legal {
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  color: var(--ink-3); font-size: .85rem;
}
.foot-legal p { max-width: 52rem; }
.foot-legal p:last-child { margin-bottom: 0; }



/* ---------------------------------------------------------- utilities -- */
/* Used instead of inline style attributes so the CSP can stay at
   style-src 'self' with no 'unsafe-inline'. */
.mt-lg { margin-top: 2rem; }
.mt-md { margin-top: 1.5rem; }

/* ------------------------------------------------- hero device mock -- */
/* Two columns only when there is media to show; the text hero is unchanged
   everywhere else. */
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  /* The demo column is now a fixed 17rem (its cap), so the text column takes
     everything else instead of splitting the row near-evenly. A longer
     headline was wrapping to five lines against a ~512px column; this gives
     it roughly 760px at the page's max width. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.5rem; }
  .hero-split .measure { max-width: none; }
}

.phone-wrap { justify-self: center; max-width: 20rem; width: 100%; }
/* Cap by viewport height too: the frame is a tall portrait shape, and at
   laptop heights an unconstrained 20rem width pushes its own caption — and
   the hero CTA beside it — off screen. 0.46 is the device aspect. */
@media (min-width: 900px) {
  /* Hard ceiling of 17rem — the same width the demo has on mobile, which is
     the size that reads correctly. It may be SMALLER on short viewports (the
     vh term), never larger. Desktop had been letting it grow to 19rem. */
  .phone-wrap { max-width: min(17rem, calc(60vh * 0.46)); }
}

.phone {
  position: relative;
  border-radius: 3rem;
  padding: .55rem;
  background: linear-gradient(160deg, #2C4633 0%, #0E2413 42%, #071B0C 100%);
  box-shadow:
    0 0 0 1px rgba(117,220,73,.16),
    0 2rem 4rem -1rem rgba(0,0,0,.75),
    0 0 5rem -1rem rgba(117,220,73,.28);
}

.phone-screen {
  position: relative;
  aspect-ratio: 402 / 874;
  border-radius: 2.5rem;
  overflow: hidden;
  background: var(--bg);
}
.phone-screen video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* the dynamic island */
.phone::after {
  content: "";
  position: absolute; top: 1.35rem; left: 50%; transform: translateX(-50%);
  width: 6rem; height: 1.35rem; border-radius: 999px;
  background: #000; z-index: 2; pointer-events: none;
}

.phone-cap {
  margin: 1.1rem 0 0; text-align: center;
  color: var(--ink-3); font-size: .88rem; line-height: 1.5;
}

@media (max-width: 899px) {
  .phone-wrap { max-width: 17rem; margin-top: .5rem; }
}

/* ------------------------------------------------ model diagram (§32) -- */
.model { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 1000px) {
  .model { grid-template-columns: 2.1fr auto 1.15fr auto 1.15fr; gap: 1.25rem; align-items: center; }
}

.model-inputs { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 460px) { .model-inputs { grid-template-columns: 1fr; } }

.model-in {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: .95rem 1rem;
}
.model-in h3 {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5rem; font-weight: 700;
}
.model-in ul { list-style: none; margin: 0; padding: 0; }
.model-in li { color: var(--ink-2); font-size: .92rem; line-height: 1.5; }

/* the connector: a chevron down on narrow, a chevron right on wide */
.model-arrow {
  justify-self: center; align-self: center;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  margin: .35rem 0;
}
@media (min-width: 1000px) { .model-arrow { transform: rotate(-45deg); margin: 0; } }

.model-core {
  background: var(--pill-fill);
  border: 1px solid var(--border-2);
  border-radius: 12px; padding: 1.35rem 1.2rem; text-align: center;
  box-shadow: 0 0 3rem -1rem rgba(117,220,73,.5);
}
.model-brand {
  margin: 0 0 .5rem; font-weight: 800; letter-spacing: .05em;
  font-size: 1.05rem; color: var(--ink);
}
.model-brand b { color: var(--accent); }
.model-core-line { margin: 0; color: var(--pill-ink); font-size: .92rem; font-weight: 600; line-height: 1.45; }

.model-out {
  background: var(--bg-2); border: 1px solid var(--accent);
  border-radius: 12px; padding: 1.35rem 1.2rem;
}
.model-out h3 { margin: 0 0 .45rem; font-size: 1rem; }
.model-out p { margin: 0; color: var(--ink-2); font-size: .93rem; }

/* -------------------------------------------------------- trust strip -- */
.trust { background: var(--bg-2); padding: 2.25rem 0; }
.trust-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .trust-row { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.trust-row li { display: flex; flex-direction: column; gap: .2rem; }
.trust-row strong { color: var(--ink); font-size: 1rem; }
.trust-row span { color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
.trust-note { margin: 1.5rem 0 0; color: var(--ink-3); font-size: .86rem; max-width: 52rem; }

/* -------------------------------------------------------- calculators -- */
.calc-grid { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .calc-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 2rem; align-items: start; } }

.calc-form {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.25rem; display: grid; gap: .9rem;
}
.calc-field { display: grid; gap: .35rem; }
.calc-field > span { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.calc-field select, .calc-field input {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg-3); border: 1px solid var(--border-ui);
  border-radius: 7px; padding: .55rem .7rem; width: 100%;
  min-height: 2.75rem;
}
.calc-field select:focus-visible, .calc-field input:focus-visible { border-color: var(--accent); }
.calc-hint { margin: .2rem 0 0; color: var(--ink-3); font-size: .82rem; }

.calc-out {
  background: var(--bg-2); border: 1px solid var(--accent);
  border-radius: 10px; padding: 1.35rem 1.4rem;
}
.calc-label {
  margin: 0 0 .4rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.calc-verdict {
  margin: 0 0 .8rem; font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800; letter-spacing: -.015em; color: var(--accent); line-height: 1.15;
}
.calc-why { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.calc-note { margin: 1.5rem 0 0; color: var(--ink-3); font-size: .88rem; }

/* -------------------------------------------------- pipeline + glossary -- */
.pipeline { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 46rem; }
.pipeline li {
  display: grid; gap: .15rem; padding: .8rem 1rem;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  position: relative;
}
.pipeline li + li::before {
  content: ""; position: absolute; left: 1.5rem; top: -.45rem;
  width: .42rem; height: .42rem; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg);
}
.pipeline .pipe-name { font-weight: 700; color: var(--ink); font-size: .98rem; }
.pipeline .pipe-desc { color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.pipeline-start, .pipeline-end { background: var(--pill-fill); border-color: var(--border-2); }
.pipeline-start .pipe-name, .pipeline-end .pipe-name {
  color: var(--pill-ink); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem;
}

.glossary { display: grid; gap: 0; margin: 0; }
.glossary .term { padding: 1.1rem 0; border-bottom: 1px solid var(--border); scroll-margin-top: 5rem; }
.glossary dt { font-weight: 700; color: var(--ink); font-size: 1.02rem; margin: 0 0 .3rem; }
.glossary dd { margin: 0; color: var(--ink-2); line-height: 1.6; }

/* --------------------------------------------- answer + key points + tables */
.answer-wrap { padding: 0; border-top: 0; }
.answer {
  margin: 0; padding: 1.25rem 1.4rem;
  background: var(--bg-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  font-size: clamp(1.02rem, 2vw, 1.12rem); line-height: 1.6; color: var(--ink);
}
.keypoints-wrap { padding-top: 2rem; border-top: 0; }
.keypoints-h {
  font-size: .78rem !important; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .8rem;
}
ul.keypoints { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
ul.keypoints li {
  position: relative; padding-left: 1.5rem; color: var(--ink-2); line-height: 1.55;
}
ul.keypoints li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .5rem; height: .5rem; border-radius: 1px; background: var(--accent);
}

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.table-scroll table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.table-scroll th, .table-scroll td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-scroll th { background: var(--bg-2); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-note { margin: .9rem 0 0; color: var(--ink-3); font-size: .87rem; }

/* ----------------------------------------------------- reviewed stamp -- */
.reviewed { padding: 2rem 0; }
.reviewed p { margin: 0; color: var(--ink-3); font-size: .88rem; }
.reviewed a { color: var(--ink-2); }
.reviewed a:hover { color: var(--accent); }

/* ------------------------------------------- demo video pause control -- */
/* WCAG 2.2.2. Deliberately quiet — it must be reachable and obvious once
   found, without competing with the CTA beside it. */
/* Hidden until wanted. WCAG 2.2.2 requires a 30-second autoplaying loop to be
   stoppable, so the control cannot simply be deleted — but it does not need to
   sit there permanently either. On pointer devices it fades in on hover or
   keyboard focus; on touch, where hover does not exist, it stays visible. */
@media (hover: hover) and (pointer: fine) {
  .vid-toggle { opacity: 0; transition: opacity .18s ease; }
  .phone-wrap:hover .vid-toggle,
  .vid-toggle:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vid-toggle { transition: none; }
}

.vid-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid var(--border-2);
  color: var(--ink-2); border-radius: 999px;
  padding: .3rem .7rem; margin: 0 .4rem .3rem 0;
  font: inherit; font-size: .82rem; cursor: pointer;
  min-height: 30px;
}
.vid-toggle:hover, .vid-toggle:focus-visible { color: var(--ink); border-color: var(--accent); }
/* two bars = pause; a triangle = play */
.vid-icon {
  width: .5rem; height: .62rem; flex: 0 0 auto;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.vid-toggle.is-paused .vid-icon {
  width: 0; height: 0; border: none;
  border-left: .58rem solid currentColor;
  border-top: .34rem solid transparent;
  border-bottom: .34rem solid transparent;
}

/* Available to assistive tech, invisible on screen — used for table captions
   that would otherwise duplicate the heading directly above them. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The scroll region is focusable now, so it needs a visible ring. */
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ the mark -- */
/* The logo is the 18 mark (operator ruling, 2026-09-07) — the wordmark text
   is retired. The anchor carries the accessible name via aria-label, so the
   image itself is decorative (alt="") and must not be announced twice. */
.wordmark { display: inline-flex; align-items: center; line-height: 0; }
.wordmark img {
  display: block; width: auto; height: 18px;
  /* The mark is pre-trimmed with transparent corners (assets/mark.png), so it
     needs no radius of its own — the tile's own rounding is in the artwork. */
}
footer.site .wordmark img { width: auto; height: 15px; }
@media (max-width: 520px) { .wordmark img { height: 16px; } }

/* ------------------------------------------------------ explanatory art -- */
.diagram { margin: 0; }
.diagram-art { max-width: 44rem; }
.diagram-art svg { display: block; width: 100%; height: auto; }
.diagram figcaption {
  margin: 1rem 0 0; color: var(--ink-2); font-size: .95rem;
  line-height: 1.6; max-width: var(--measure);
}
/* Motion is an enhancement. Under reduced motion every diagram holds its
   final, meaningful frame rather than animating. */
@media (prefers-reduced-motion: reduce) {
  .diagram-art * { animation: none !important; transition: none !important; }
}

/* ---------------------------------- diagram motion (§33-§38 draft science) --
   Every diagram is authored in its FINAL, explanatory frame. These keyframes
   start elements in the "before" state and land them on the authored one, so
   the reduced-motion rule above (which kills animation outright) leaves the
   frame that carries the point. One shared 12s cycle, ~30% of it a hold. */
.dg-s { font-size: 15px; }
.dg-m { font-size: 19px; }

/* a pool member that drains at step N of the cycle */
.dg-fade-1, .dg-fade-2, .dg-fade-3, .dg-fade-4,
.dg-fade-5, .dg-fade-6, .dg-fade-7, .dg-fade-8 {
  opacity: 0;
  animation: 12s linear infinite both;
}
.dg-fade-1 { animation-name: dgFade1; }
.dg-fade-2 { animation-name: dgFade2; }
.dg-fade-3 { animation-name: dgFade3; }
.dg-fade-4 { animation-name: dgFade4; }
.dg-fade-5 { animation-name: dgFade5; }
.dg-fade-6 { animation-name: dgFade6; }
.dg-fade-7 { animation-name: dgFade7; }
.dg-fade-8 { animation-name: dgFade8; }
@keyframes dgFade1 { 0%, 12% { opacity: 1; } 17%, 100% { opacity: 0; } }
@keyframes dgFade2 { 0%, 18% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes dgFade3 { 0%, 24% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes dgFade4 { 0%, 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes dgFade5 { 0%, 36% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes dgFade6 { 0%, 42% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes dgFade7 { 0%, 48% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes dgFade8 { 0%, 54% { opacity: 1; } 59%, 100% { opacity: 0; } }

/* a label or annotation that only makes sense once the motion has resolved */
.dg-in-late { animation: dgInLate 12s linear infinite both; }
@keyframes dgInLate { 0%, 66% { opacity: 0; } 76%, 100% { opacity: 1; } }

.dg-flash { animation: dgFlash 12s linear infinite both; }
@keyframes dgFlash { 0%, 16% { opacity: 0; } 24%, 100% { opacity: 1; } }

.dg-pulse { animation: dgPulse 12s ease-in-out infinite both; }
@keyframes dgPulse {
  0%, 50% { opacity: 0; }
  62% { opacity: 1; }
  74% { opacity: .35; }
  86%, 100% { opacity: 1; }
}

/* §33 board re-order: the taken row leaves, the rows below change ORDER */
.br-out { animation: dgBrOut 12s ease-in-out infinite both; }
@keyframes dgBrOut {
  0%, 24% { opacity: 1; transform: translateX(0); }
  34%     { opacity: .3; transform: translateX(0); }
  48%, 100% { opacity: 0; transform: translateX(80px); }
}
.br-qbb, .br-wra { animation: 12s cubic-bezier(.4, 0, .2, 1) infinite both; }
.br-qbb { animation-name: dgBrUp; }
.br-wra { animation-name: dgBrDown; }
@keyframes dgBrUp   { 0%, 36% { transform: translateY(192px); } 58%, 100% { transform: translateY(0); } }
@keyframes dgBrDown { 0%, 36% { transform: translateY(-64px); } 58%, 100% { transform: translateY(0); } }

/* §35 replacement: both bars dim, the band between their tops stays lit */
.rp-dim { fill-opacity: .22; animation: dgRpDim 12s linear infinite both; }
@keyframes dgRpDim { 0%, 30% { fill-opacity: 1; } 46%, 100% { fill-opacity: .22; } }
.rp-gap { animation: dgRpGap 12s linear infinite both; }
@keyframes dgRpGap { 0%, 30% { fill-opacity: 1; } 46%, 100% { fill-opacity: 1; } }

/* §37 pick horizon: the wait between your two selections opens up */
.ph-band {
  transform-box: fill-box; transform-origin: left center;
  animation: dgPhBand 12s cubic-bezier(.4, 0, .2, 1) infinite both;
}
@keyframes dgPhBand { 0%, 8% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }