/* Agent Journey Lab — site v14. One local stylesheet, written against
   docs/BRAND-DESIGN-SYSTEM.md (version 3). System fonts only, no remote asset,
   no script, no raster background, no third-party file. This file serves every
   canonical page and supersedes site.v13.css: it is one system, not a stack of
   historical override layers. */

:root {
  /* semantic palette — the design system names, with the short aliases the
     page components use. Both name the same value. */
  --color-canvas:#FAFAF8; --color-surface:#FFFFFF; --color-band:#F0EEE8;
  --color-text:#111111; --color-text-body:#3A3A38; --color-text-muted:#6B6B68;
  --color-border:#E4E2DC; --color-border-strong:#CFCCC4; --color-control-border:#6B6B68;
  --color-primary:#0B5F63; --color-primary-hover:#084548; --color-primary-soft:#E8F4F4;
  --color-on-primary:#FFFFFF; --color-reached:#3A6B4A; --color-stopped:#A63A22;
  --color-focus:#0B5F63;

  --bg:#FAFAF8; --bg-2:#FFFFFF; --band:#F0EEE8;
  --ink:#111111; --ink-2:#3A3A38; --ink-3:#6B6B68;
  --line:#E4E2DC; --line-2:#CFCCC4;
  --accent:#0B5F63; --accent-2:#084548; --accent-soft:#E8F4F4;
  --halt:#A63A22; --pass:#3A6B4A;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "Liberation Sans","DejaVu Sans",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;

  /* spacing scale: 4 8 12 16 24 32 48 64 80 96 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:96px;
  --r:8px; --r-s:6px; --r-l:10px;
  --max:1160px; --gutter:20px;
  --section:clamp(48px,32px + 5vw,96px);
  --shadow:0 1px 2px rgba(17,17,17,.04),0 16px 40px -20px rgba(17,17,17,.20);
}
@media (min-width:48rem) { :root { --gutter:32px; } }

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:10rem; }
@media (min-width:64rem) { html { scroll-padding-top:6rem; } }
@media (max-height:32rem) { html { scroll-padding-top:var(--s5); } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

body {
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  overflow-wrap:break-word; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:48rem) { body { font-size:17px; } }

h1,h2,h3 { color:var(--ink); margin:0 0 var(--s4); }
h1 { font-size:clamp(2rem,1.4rem + 2.2vw,3.5rem); line-height:1.10; font-weight:700; letter-spacing:-.025em; }
h2 { font-size:clamp(1.625rem,1.3rem + 1.2vw,2.5rem); line-height:1.16; font-weight:650; letter-spacing:-.02em; }
h3 { font-size:20px; line-height:1.30; font-weight:650; letter-spacing:-.01em; }
p,li { max-width:66ch; }
p { margin:0 0 var(--s4); }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover { color:var(--accent-2); text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; border-radius:2px; }
hr { border:0; border-top:1px solid var(--line); margin:var(--s6) 0; }
strong { color:var(--ink); font-weight:650; }

.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.skip { position:absolute; left:-9999px; display:inline-flex; align-items:center; min-height:44px; }
.skip:focus { left:1rem; top:1rem;
  z-index:60; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--color-control-border); border-radius:var(--r-s); padding:.7rem 1rem; }
.mono,.ua { font-family:var(--mono); font-size:.88em; }
.note { color:var(--ink-3); font-size:14px; line-height:1.5; }
.eyebrow { font-size:13px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--s3); padding-left:var(--s3);
  border-left:3px solid var(--accent); }

/* ---- masthead ---------------------------------------------------------- */
/* Two navigation instances, one per breakpoint, and exactly one of them is in
   the accessibility tree at any width. The wide one is a plain list, so the
   desktop links can never be hidden by a disclosure the reader left closed on
   a phone. The narrow one is a native <details> that ships CLOSED, so the
   default mobile masthead is one compact bar. */
.mast { position:sticky; top:0; z-index:10; background:var(--bg-2); border-bottom:1px solid var(--line); }
.mast .wrap { display:flex; align-items:center; gap:var(--s5); min-height:68px; flex-wrap:wrap; }
.wordmark { margin:0; font-size:18px; line-height:1.3; font-weight:650; letter-spacing:-.012em; color:var(--ink); }
.wordmark a { display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--ink);
  text-decoration:none; padding:10px 0; min-height:44px; }
.wordmark span { min-width:0; }
.wordmark svg { color:var(--accent); flex:0 0 auto; width:24px; height:24px; }
.mast nav ul { display:flex; align-items:center; gap:var(--s5); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.mast nav li { max-width:none; }
.mast nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2);
  text-decoration:none; font-size:15px; font-weight:600; }
.mast nav a:hover { color:var(--accent); text-decoration:underline; }
.mast nav a[aria-current="page"] { color:var(--accent); text-decoration:underline;
  text-underline-offset:.35em; text-decoration-thickness:2px; }
.mast-cta { margin:0 0 0 auto; }
.mast-cta .btn { min-height:44px; }

/* the narrow disclosure: a 44px summary that says what it does */
.navdis > summary { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; min-width:44px; padding:0 var(--s3); cursor:pointer; font-size:15px; font-weight:600;
  color:var(--ink); list-style:none; white-space:nowrap;
  border:1px solid var(--color-control-border); border-radius:var(--r-s); background:var(--bg-2); }
.navdis > summary::-webkit-details-marker { display:none; }
.navdis > summary::after { content:""; flex:none; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:5px solid var(--ink-3); }
.navdis[open] > summary::after { border-top:0; border-bottom:5px solid var(--ink-3); }

/* one instance per breakpoint: the other is removed from layout and from the
   accessibility tree, so focus order never contains both. */
@media (min-width:64rem) { .nav-narrow { display:none; } }
@media (max-width:63.99rem) {
  .nav-wide { display:none; }
  .mast .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:var(--s2) var(--s3); min-height:0; padding-top:var(--s2); padding-bottom:var(--s2); }
  .wordmark { grid-column:1; grid-row:1; }
  .nav-narrow { grid-column:2; grid-row:1; justify-self:end; }
  .mast-cta { grid-column:1 / -1; grid-row:2; margin:0; }
  /* the open panel is laid over the page, not inside the bar, so opening the
     menu never changes the height of the masthead itself. */
  .navdis { position:static; }
  /* nowrap matters: the panel is a column flex box with a definite max-height,
     so wrapping would spill the tail of the menu into a second column off the
     right edge as soon as a nested list opens. It must scroll, not wrap. */
  .navdis[open] > ul { position:absolute; left:0; right:0; top:100%;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:var(--s1);
    padding:var(--s3) var(--gutter) var(--s4); background:var(--bg-2);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow); z-index:30;
    max-height:min(70vh,32rem); overflow-y:auto; overscroll-behavior:contain; }
  /* outranks `.mast nav ul { display:flex }` so the closed menu really is
     closed: no link is painted, hit-tested, or in the focus order. */
  .mast .navdis:not([open]) > ul { display:none; }
  .mast .navdis[open] > ul { display:flex; }
  /* the nested list stacks too, and outranks `.mast nav ul` so it never
     becomes a row that a long label can push past the right edge. */
  .mast .navdis .menu > ul { display:flex; flex-direction:column; flex-wrap:nowrap;
    align-items:stretch; gap:var(--s1); padding-left:var(--s5); }
  .mast nav a { padding:0 var(--s3); border-radius:var(--r-s);
    min-width:0; overflow-wrap:anywhere; }
  .mast nav a:hover { background:var(--accent-soft); text-decoration:none; }
}
.menu summary { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s3) 0 0;
  cursor:pointer; font-size:15px; font-weight:600; color:var(--ink-2); list-style:none; }
.menu summary::-webkit-details-marker { display:none; }
.menu summary::after { content:""; flex:none; width:0; height:0; margin-left:var(--s1);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:5px solid var(--ink-3); }
.menu[open] summary::after { border-top:0; border-bottom:5px solid var(--ink-3); }
.menu[open] summary { color:var(--accent); }
.menu ul { display:block; margin:var(--s1) 0 0; padding:var(--s1) 0; }
@media (min-width:64rem) {
  .menu { position:relative; }
  .menu ul { position:absolute; left:-.9rem; top:2.6rem; z-index:20; min-width:14rem; background:var(--bg-2);
    border:1px solid var(--line-2); border-radius:var(--r); padding:var(--s2); }
  .menu ul a { display:flex; padding:0 var(--s3); border-radius:var(--r-s); }
  .menu ul a:hover { background:var(--band); text-decoration:none; }
}
@media (max-width:63.99rem) {
  .menu summary { padding-left:var(--s3); }
  .menu ul { padding-left:var(--s5); }
}
/* a short viewport must never lose page to a pinned bar */
@media (max-height:32rem) { .mast { position:relative; } }

/* ---- buttons and links ------------------------------------------------- */
.actions { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; max-width:none; }
.actions > * { min-width:0; max-width:100%; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px var(--s5); border-radius:var(--r); font-size:16px; font-weight:600;
  min-width:0; max-width:100%; text-align:center; white-space:normal; overflow-wrap:anywhere;
  text-decoration:none; border:1px solid transparent; line-height:1.35;
  transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease; }
.btn-primary { background:var(--accent); color:var(--color-on-primary); border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-2); border-color:var(--accent-2); color:var(--color-on-primary); }
.btn-secondary { background:var(--bg-2); color:var(--accent); border-color:var(--accent); }
.btn-secondary:hover { background:var(--accent-soft); color:var(--accent-2); border-color:var(--accent-2); }
.tap { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }

/* ---- hero: the promise beside one record ------------------------------- */
.hero { background:var(--bg-2); border-bottom:1px solid var(--line);
  padding:var(--section) 0; }
.hero .wrap { display:grid; gap:var(--s7); align-items:start; }
.hero .wrap > * { min-width:0; }
.hero h1 { font-size:clamp(2.25rem,1.3rem + 3.5vw,4.5rem); line-height:1.06;
  letter-spacing:-.03em; font-weight:700; max-width:14ch; margin-bottom:var(--s5); }
.hero .eyebrow { color:var(--accent-2); margin-bottom:var(--s5); }
.hero .lede { font-size:clamp(1.125rem,1rem + .5vw,1.375rem); line-height:1.5;
  color:var(--ink-2); max-width:46ch; }
.hero .sub { border-left:3px solid var(--line-2); padding-left:var(--s4); max-width:46ch;
  color:var(--ink-3); font-size:15px; }
.hero .actions { margin:var(--s6) 0 var(--s5); }
.hero .actions .btn { min-height:48px; }
.hero .owner,.hero .note { max-width:46ch; }
@media (min-width:64rem) {
  .hero .wrap { grid-template-columns:minmax(0,55fr) minmax(0,45fr); align-items:center; }
}

/* ---- three-fact strip -------------------------------------------------- */
.facts { display:grid; gap:1px; background:var(--line); border-bottom:1px solid var(--line);
  list-style:none; margin:0; padding:0; }
.facts li { max-width:none; background:var(--bg); padding:var(--s5) var(--gutter); }
.facts h3 { margin:0 0 var(--s1); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:650; }
.facts p { margin:0; color:var(--ink); font-weight:600; }
@media (min-width:48rem) { .facts { grid-template-columns:repeat(3,1fr); } }
.factstrip { background:var(--bg-2); }

/* ---- page body --------------------------------------------------------- */
.page { padding:var(--section) 0; }
.page > .wrap { display:block; }
.sec { padding:0 0 var(--section); }
.sec + .sec { border-top:1px solid var(--line); padding-top:var(--section); }
.sec:last-child { padding-bottom:0; }
.sec > h2 { max-width:22ch; }
.sec > h2 + p { font-size:1.0625rem; line-height:1.6; color:var(--ink-2); max-width:64ch; }
.rail { display:none; }
.cols,.cols-2 { display:grid; gap:var(--s5); }
@media (min-width:48rem) { .cols,.cols-2 { grid-template-columns:1fr 1fr; gap:var(--s6); } }

/* ---- rows, steps, cards ------------------------------------------------ */
.rows { list-style:none; margin:var(--s5) 0; padding:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.rows li { max-width:none; background:var(--bg-2); padding:var(--s4) var(--s5); }
.rows h3 { margin:0 0 var(--s1); font-size:1.0625rem; }
.rows p { margin:0; color:var(--ink-2); }
.chip { display:inline-block; margin:0 0 var(--s2); padding:2px var(--s2); border-radius:var(--r-s);
  font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent-2); }
.chip-open { background:var(--band); color:var(--ink-2); }
.steps,.ticked { list-style:none; margin:var(--s5) 0; padding:0; display:grid; gap:var(--s3); }
.steps li,.ticked li { padding-left:var(--s5); position:relative; }
.steps li::before,.ticked li::before { content:"—"; position:absolute; left:0; color:var(--accent); }
.steps li strong { display:block; }
.crossed { text-decoration:line-through; color:var(--ink-3); }
.disclosure { background:var(--band); border-left:3px solid var(--accent); border-radius:var(--r-s);
  padding:var(--s4) var(--s5); margin:var(--s5) 0; }

/* ---- evidence panels (the only place mono appears) --------------------- */
.brk { font-size:13px; line-height:1.55; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-l); padding:var(--s5); }
figure { margin:var(--s6) 0; }
figcaption { margin-top:var(--s3); color:var(--ink-3); font-size:14px; line-height:1.5; max-width:66ch; }
.fixlabel { font-family:var(--sans); font-size:13px; font-weight:650; letter-spacing:.03em;
  color:var(--ink-3); margin:0 0 var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line); max-width:none; }
.figlabel { font-family:var(--sans); font-size:13px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s2); }
.brk dl { display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); margin:0 0 var(--s5); }
.brk dt { color:var(--ink-3); min-width:0; overflow-wrap:anywhere; }
.brk dd,.brk .val { font-family:var(--mono); }
.brk dd { margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.redact { display:inline-block; width:6.5rem; height:.85em; vertical-align:-.05em;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 9px); border-radius:2px; }
.bar { height:4px; border-radius:2px; margin-top:var(--s4);
  background:linear-gradient(90deg,var(--pass) 0 80%,var(--halt) 80% 100%); }

/* the evidence sheet: the one raised surface in the system */
.specimen { margin:0; }
.specimen .brk { padding:0; overflow:hidden; box-shadow:var(--shadow); }
.spec-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) var(--s5); background:var(--band); border-bottom:1px solid var(--line); }
.spec-head p { margin:0; max-width:none; }
.spec-title { font-family:var(--sans); font-size:13px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
.spec-id { color:var(--ink); font-size:13px; }
.spec-body { padding:var(--s5); }
.spec-body dl { grid-template-columns:8.5rem 1fr; }
.spec-foot { display:flex; align-items:center; gap:var(--s2); margin:var(--s5) 0 0; padding-top:var(--s4);
  border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); max-width:none; }
.spec-foot .st { font-size:13px; }

/* checkpoint ladder */
.ruler { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.ruler li { display:grid; grid-template-columns:2.2rem 1fr auto; gap:var(--s3); align-items:baseline;
  max-width:none; padding-bottom:var(--s2); border-bottom:1px dotted var(--line); }
.ruler li:last-child { border-bottom:0; padding-bottom:0; }
.ruler .n { color:var(--ink-3); }
.st { font-size:13px; font-weight:650; white-space:nowrap; }
.st-pass { color:var(--pass); }
.st-halt { color:var(--halt); }
.st-none { color:var(--ink-3); }
.lanes { display:grid; gap:var(--s5); }
@media (min-width:44rem) { .lanes { grid-template-columns:1fr 1fr; gap:var(--s6); } }
.lane h3 { font-family:var(--sans); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--s3); }
.ticks { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.ticks li { max-width:none; }
.owner,.lbl { color:var(--ink-3); font-size:15px; }

/* ---- tables ------------------------------------------------------------ */
.sheet { padding:0; overflow:hidden; }
.sheet .fixlabel { padding:var(--s4) var(--s5) var(--s3); margin:0; }
.scroll { overflow-x:auto; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); margin:var(--s5) 0; }
.brk .scroll, .sheet .scroll { border:0; border-radius:0; background:transparent; margin:0; }
.tbl { width:100%; min-width:32rem; border-collapse:collapse; font-size:15px; font-family:var(--sans); }
.tbl caption { text-align:left; padding:var(--s4) var(--s5); color:var(--ink-3); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:650; }
.tbl th,.tbl td { text-align:left; vertical-align:top; padding:var(--s3) var(--s5);
  border-top:1px solid var(--line); }
.tbl thead th { background:var(--band); color:var(--ink-3); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:650; }
.tbl tbody th { color:var(--ink); font-weight:650; white-space:nowrap; }
.tbl td { color:var(--ink-2); }

/* ---- faq --------------------------------------------------------------- */
.faq { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-2);
  margin:var(--s5) 0; }
.faq details + details { border-top:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:44px; padding:var(--s3) var(--s5); cursor:pointer; font-weight:650; color:var(--ink);
  list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-weight:650; }
.faq details[open] summary::after { content:"–"; }
.faq details[open] summary { background:var(--accent-soft); }
.faq summary:hover { background:var(--band); }
.faq .a { padding:var(--s4) var(--s5) var(--s5); }
.faq .a p { margin:0; }

/* ---- journey choices --------------------------------------------------- */
.jcards { list-style:none; margin:var(--s6) 0 var(--s5); padding:0; display:grid; gap:var(--s5); }
@media (min-width:48rem) { .jcards { grid-template-columns:1fr 1fr; gap:var(--s6); } }
.jcards li { max-width:none; }
.jcards a { display:flex; flex-direction:column; height:100%; gap:var(--s2); text-decoration:none;
  color:inherit; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  border-top:3px solid var(--accent); padding:var(--s5);
  transition:border-color 140ms ease,background-color 140ms ease; }
.jcards a:hover { border-color:var(--accent); background:var(--accent-soft); }
.jcards .n { font-family:var(--sans); font-size:13px; font-weight:650; color:var(--ink-3); letter-spacing:.08em; }
.jcards h3 { margin:0; font-size:1.25rem; }
.jcards p { margin:0; max-width:none; }
.jcards .goal { color:var(--ink-2); }
.jcards .stop { margin-top:var(--s2); padding-top:var(--s3); border-top:1px solid var(--line);
  color:var(--ink-3); font-size:15px; }
.jcards .lbl { display:block; font-size:12px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s1); }
.jcards .go { margin-top:auto; padding-top:var(--s4); color:var(--accent); font-weight:650; font-size:15px; }
.jcards a:hover .go { text-decoration:underline; }

/* ---- the five-state method trace --------------------------------------- */
.trace { list-style:none; margin:var(--s6) 0 var(--s5); padding:0; display:grid; gap:var(--s5);
  counter-reset:none; }
.trace li { max-width:none; position:relative; padding-left:var(--s7);
  border-left:2px solid var(--line-2); padding-bottom:var(--s5); }
.trace li:last-child { padding-bottom:0; }
.trace .n { position:absolute; left:calc(-1 * var(--s4) - 1px); top:0; display:inline-flex;
  align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  border:2px solid var(--accent); background:var(--bg); color:var(--accent);
  font-size:12px; font-weight:650; }
.trace h3 { margin:0 0 var(--s2); font-size:1.0625rem; }
.trace p { margin:0; color:var(--ink-3); font-size:15px; max-width:none; }
@media (min-width:60rem) {
  .trace { grid-template-columns:repeat(5,1fr); gap:var(--s6); }
  .trace li { padding:var(--s7) 0 0; border-left:0; }
  .trace li::before { content:""; position:absolute; left:0; right:calc(-1 * var(--s6)); top:15px;
    border-top:2px solid var(--line-2); }
  .trace li:last-child::before { right:0; }
  .trace .n { left:0; }
  .trace p { max-width:24ch; }
}

/* ---- offers ------------------------------------------------------------ */
.tiers { display:grid; gap:var(--s5); margin:var(--s6) 0 var(--s5); }
@media (min-width:56rem) { .tiers { grid-template-columns:repeat(3,1fr); gap:var(--s6); } }
.tier { display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s5); }
.tier-lead { border:2px solid var(--accent); padding:calc(var(--s5) - 1px); }
.tier h3 { margin:0 0 var(--s3); font-size:1.0625rem; }
.tier .price { margin:0; color:var(--ink); font-size:2.5rem; line-height:1; font-weight:700;
  letter-spacing:-.03em; }
.tier .basis { margin:var(--s2) 0 var(--s4); padding-bottom:var(--s4); border-bottom:1px solid var(--line);
  color:var(--ink-3); font-size:15px; max-width:none; }
.tier .ticked { margin:0 0 var(--s5); gap:var(--s3); }
.tier .ticked li { font-size:15px; max-width:none; }
.tier .actions { margin-top:auto; }
.tier .btn { width:100%; }

/* ---- first-party figures ----------------------------------------------- */
.jgraph, .diagram { margin:0 0 var(--s5); }
.jgraph svg, .diagram svg { display:block; width:100%; height:auto; }
.jgraph svg text, .diagram svg text { font-family:var(--sans); font-variant-numeric:tabular-nums; }
.jgraph { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s5); }
.jgraph figcaption, .diagram figcaption { margin-top:var(--s3); color:var(--ink-3);
  font-size:14px; line-height:1.5; max-width:60ch; }
.jgraph figcaption { padding-top:var(--s3); border-top:1px solid var(--line); }
.diagram { margin:var(--s6) 0; padding:var(--s5); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r); }
.diagram .scroll { margin:0; background:transparent; border:0; border-radius:0; }
.diagram svg { min-width:33rem; max-width:40rem; margin:0 auto; }
.contrast { margin:0 0 var(--s2); }
.contrast > div { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s5); }
.contrast > div:last-child { border-color:var(--accent); background:var(--accent-soft); }
.contrast h3 { margin:0 0 var(--s3); font-size:13px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
.contrast > div:last-child h3 { color:var(--accent-2); }
.contrast ul { margin:0; }
.contrast li { max-width:none; }

/* ---- first-party screenshots ------------------------------------------- */
.shots { display:grid; gap:var(--s6); margin:0 0 var(--s5); }
@media (min-width:60rem) { .shots { grid-template-columns:1fr 1fr; } }
.shot { margin:0; min-width:0; }
.shot .frame { border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2);
  overflow:hidden; }
.frame-bar { display:flex; align-items:center; gap:var(--s1); min-width:0;
  padding:var(--s2) var(--s3); background:var(--band); border-bottom:1px solid var(--line); }
.frame-bar .dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.frame-bar .url { margin-left:var(--s2); min-width:0; font-size:12px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frame img { display:block; width:100%; height:auto; border-top:0; }

/* ---- alternate band, footer -------------------------------------------- */
.sec.band,.band { background:var(--band); }
footer { background:var(--band); border-top:1px solid var(--line); padding:var(--section) 0 var(--s7); }
.foot { display:grid; gap:var(--s6); }
@media (min-width:48rem) { .foot { grid-template-columns:repeat(3,1fr); } }
@media (min-width:64rem) { .foot { grid-template-columns:repeat(5,1fr); } }
.foot h2 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 var(--s3); font-weight:650; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s1); }
.foot a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--ink-2);
  text-decoration:none; font-size:15px; }
.foot a:hover { color:var(--accent); text-decoration:underline; }
.foot-base { margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line-2); }
.foot-base p { color:var(--ink-3); font-size:14px; }

/* ---- narrow phones: no document overflow at 320px ---------------------- */
@media (max-width:34rem) {
  .spec-body { padding:var(--s4); }
  .spec-body dl { grid-template-columns:1fr; gap:var(--s1) 0; }
  .spec-body dt { font-size:12px; letter-spacing:.03em; }
  .spec-body dd + dt { margin-top:var(--s2); }
  .spec-head { flex-wrap:wrap; gap:var(--s1) var(--s3); }
  .spec-foot { align-items:flex-start; }
  .ruler li { grid-template-columns:2.2rem 1fr; }
  .ruler li .st { grid-column:2; }
  .brk { padding:var(--s4); }
  .rows li,.jcards a,.tier,.contrast > div,.jgraph,.diagram { padding:var(--s4); }
  .tbl th,.tbl td,.tbl caption,.faq summary,.faq .a { padding-left:var(--s4); padding-right:var(--s4); }
}

/* ---- print: the record stays readable, its disclosure stays visible ---- */
@media print {
  .mast,.rail,footer,.skip { display:none; }
  body { background:#fff; color:#111; font-size:11pt; }
  .brk,.sheet,.scroll,.shot .frame { box-shadow:none; overflow:visible; }
  .tbl { min-width:0; }
  .tbl thead { display:table-header-group; }
  .sec,figure,.brk { break-inside:avoid; }
  .fixlabel,figcaption { color:#111; }
}