/* Prototype layout. Tokens and reference components come from tokens.css / components.css (copied from brand/). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.is-zoomed { overflow: hidden; }
body { min-height: 100vh; display: flex; flex-direction: column; }
img, canvas { max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.skip:focus-visible {
  position: fixed !important; left: var(--tp-space-3); top: var(--tp-space-3); width: auto; height: auto; clip: auto; margin: 0;
  z-index: var(--tp-z-toast); padding: var(--tp-space-2) var(--tp-space-4); background: var(--tp-paper-raised); border-radius: var(--tp-radius-pill);
}
.page { flex: 1; width: 100%; padding-top: var(--tp-space-5); padding-bottom: var(--tp-space-8); outline: none; }
.tp-base .page:focus-visible { box-shadow: none; }

/* focus: the token rule sets a small radius; keep each component's own shape under the lake ring */
.tp-base .tp-btn:focus-visible, .tp-base .tp-score:focus-visible, .tp-base .chip-todo:focus-visible, .tp-base .zoom__tool:focus-visible { border-radius: var(--tp-radius-pill); }
.tp-base .tp-compass__opt:focus-visible { border-radius: 50%; }
.tp-base .tp-points__opt:focus-visible { border-radius: var(--tp-radius-md); }
.tp-base .tp-seg button:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--tp-paper), inset 0 0 0 4px var(--tp-lake); }
.tp-base .tp-signup input:focus-visible { box-shadow: none; }
.tp-base .verdict:focus-visible { border-radius: var(--tp-radius-lg); }
.tp-base .hit:focus-visible { box-shadow: none; border-radius: 0; outline: 3px solid var(--tp-lake); outline-offset: -3px; }

/* header / footer */
.site-header { position: sticky; top: 0; z-index: var(--tp-z-header); gap: var(--tp-space-3); }
.site-header .brand { display: inline-flex; align-items: center; min-height: var(--tp-tap); flex: none; }
.site-header .brand img { display: block; height: 22px; width: auto; }
.site-header nav a { white-space: nowrap; }
@media (max-width: 359px) {
  .site-header .brand img { height: 18px; }
  .site-header nav { gap: var(--tp-space-3); }
}
.site-header nav { gap: var(--tp-space-4); }
.site-header nav a { display: inline-flex; align-items: center; min-height: var(--tp-tap); }
@media (min-width: 640px) {
  .site-header .brand img { height: 24px; }
  .site-header nav { gap: var(--tp-space-5); }
}
.motif-band {
  height: var(--tp-space-9);
  background: linear-gradient(var(--tp-paper), rgba(246, 241, 229, 0)), url("../img/contour-pattern.svg") 0 0 / var(--tp-motif-size) repeat;
}
.footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tp-space-5); padding-inline: 0; }
.footer__in a, .footer__in .linklike { display: inline-flex; align-items: center; min-height: var(--tp-tap); }
.footer__mark { display: block; height: 18px; width: auto; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.linklike:hover { color: var(--tp-lake); }
body.is-card .site-header, body.is-card .site-footer, body.is-card .motif-band { display: none; }
body.is-card .page { padding: 0; max-width: none; }
body.is-card #card { display: block; max-width: none; }

/* tokens.css styles .tp-base a with color: inherit; keep link-buttons on their component colours */
.tp-base a.tp-btn { text-decoration: none; }
.tp-base a.tp-btn--primary, .tp-base a.tp-btn--primary:hover { color: var(--tp-paper); }
.tp-base a.tp-btn--secondary:hover { color: var(--tp-ink); }

/* ---------- shared ---------- */
.mapbox { position: relative; border: var(--tp-border-panel); background: var(--tp-map); line-height: 0; }
.mapbox > img { display: block; width: 100%; height: auto; aspect-ratio: 1; -webkit-user-select: none; user-select: none; }
.mapbox--tap { cursor: zoom-in; }
.hit { position: absolute; inset: 0; cursor: crosshair; touch-action: manipulation; }
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin { position: absolute; width: 0; height: 0; transform-origin: 0 0; }
.pin__mark { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--tp-map); border: 2px solid var(--tp-ink); display: grid; place-items: center; }
.pin__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tp-marker); }
.pin--pick .pin__mark { background: transparent; border: 2.5px dashed var(--tp-ink); }
.pin--pick .pin__mark::after { display: none; }
.pin__label {
  position: absolute; left: 14px; top: -32px; white-space: nowrap; line-height: 1;
  font: var(--tp-weight-bold) var(--tp-text-caption)/1 var(--tp-font-sans); padding: 6px 9px;
  border-radius: var(--tp-radius-pill); background: var(--tp-ink); color: var(--tp-paper);
}
.pin__label .tp-mono { font-size: var(--tp-text-sm); }
.pin--pick .pin__label { background: var(--tp-paper-raised); color: var(--tp-ink); border: 1.5px solid var(--tp-ink); }
.pin--flip .pin__label { left: auto; right: 14px; }
.pin--low .pin__label { top: 14px; }

.tp-score { white-space: nowrap; }
.demo-note {
  display: inline-block; margin-right: var(--tp-space-2);
  font: var(--tp-weight-semibold) var(--tp-text-caption)/var(--tp-leading-caption) var(--tp-font-sans); color: var(--tp-ink-soft);
}

/* progress: one segment per level, done = ink, current = outlined */
.progress { display: inline-flex; gap: 6px; align-items: center; }
.progress i { width: 28px; height: 6px; border-radius: 3px; background: var(--tp-paper-sunk); border: 1px solid var(--tp-rule-strong); }
.progress i.done { background: var(--tp-ink); border-color: var(--tp-ink); }
.progress i.now { background: var(--tp-paper-raised); border: 1.5px solid var(--tp-ink); }

/* ---------- today ---------- */
.today, .play, .results, .results__cols, .results__aside { grid-template-columns: minmax(0, 1fr); }
.today { display: grid; gap: var(--tp-space-5); }
.today__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--tp-space-3); margin-top: var(--tp-space-1); }
.today__date { font-size: var(--tp-text-xl); line-height: var(--tp-leading-xl); font-weight: var(--tp-weight-bold); color: var(--tp-ink-map); }
.today__name { margin-top: var(--tp-space-1); font-size: var(--tp-text-lg); line-height: var(--tp-leading-lg); color: var(--tp-ink-soft); }
.today__progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-2) var(--tp-space-4); margin-top: var(--tp-space-3); }
.today__count { font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-ink-map); }
.today__map .mapbox { max-width: var(--tp-container-play); }
.today__side { display: grid; gap: var(--tp-space-5); align-content: start; }
.today__cta { display: grid; gap: var(--tp-space-2); justify-items: center; }
.today__cta .tp-btn { width: 100%; }
.today__results { display: inline-flex; align-items: center; min-height: var(--tp-tap); font-size: var(--tp-text-sm); font-weight: var(--tp-weight-semibold); }

.ladder { border-top: var(--tp-border-hair); }
.ladder li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--tp-space-3); padding: var(--tp-space-3) 0; border-bottom: var(--tp-border-hair); min-height: 60px; }
.ladder__n {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--tp-ink); font: var(--tp-weight-bold) var(--tp-text-sm)/1 var(--tp-font-sans); background: var(--tp-paper-raised);
}
.ladder li.is-next .ladder__n { background: var(--tp-ink); color: var(--tp-paper); }
.tp-base .ladder__link { text-decoration: none; }
.ladder__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--tp-radius-md); }
.tp-base .ladder__link:focus-visible { box-shadow: none; }
.ladder__link:focus-visible::after { box-shadow: var(--tp-focus-ring); }
.ladder__link:hover .ladder__name { text-decoration: underline; text-underline-offset: 3px; }
.ladder__name { display: block; font-weight: var(--tp-weight-bold); }
.ladder__q { display: block; font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-ink-soft); }
.ladder__next { font-size: var(--tp-text-caption); font-weight: var(--tp-weight-semibold); letter-spacing: var(--tp-tracking-label); text-transform: uppercase; }

.howto .tp-label { color: var(--tp-ink-map); }
.howto ol { counter-reset: s; margin-top: var(--tp-space-3); display: grid; gap: var(--tp-space-2); }
.howto li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: var(--tp-space-2); max-width: 68ch; }
.howto li::before { content: counter(s); font-weight: var(--tp-weight-bold); color: var(--tp-ink-map); font-variant-numeric: tabular-nums; }
.howto a { display: inline-flex; align-items: center; min-height: var(--tp-tap); margin-top: var(--tp-space-2); font-size: var(--tp-text-sm); font-weight: var(--tp-weight-semibold); }

@media (min-width: 900px) {
  .page { padding-top: var(--tp-space-6); }
  .today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head map" "side map"; column-gap: var(--tp-space-7); row-gap: var(--tp-space-5); align-items: start; }
  .today__head { grid-area: head; }
  .today__map { grid-area: map; }
  .today__side { grid-area: side; }
  .today__cta { justify-items: start; }
  .today__cta .tp-btn { width: auto; }
}

/* ---------- play ---------- */
.play { display: grid; gap: var(--tp-space-4); max-width: var(--tp-container-play); margin-inline: auto; }
.play__prompt { margin-top: var(--tp-space-1); font-size: var(--tp-text-xl); line-height: var(--tp-leading-xl); }
.play__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-3); margin-top: var(--tp-space-3); }
.play__under { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3); margin-top: var(--tp-space-2); min-height: var(--tp-tap); }
.play__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-2); min-width: 0; }
.play__status .tp-grid__readout { font-size: var(--tp-text-sm); }
.play__hint { font-size: var(--tp-text-caption); line-height: var(--tp-leading-caption); color: var(--tp-ink-soft); }
.zoom-btn { flex: none; padding-inline: var(--tp-space-4); font-size: var(--tp-text-sm); }
.play__view img { width: 100%; height: auto; aspect-ratio: 1504 / 694; }
.play__view figcaption { margin-top: var(--tp-space-2); }
.play__side { display: grid; gap: var(--tp-space-5); align-content: start; }
.answer { display: grid; gap: var(--tp-space-4); justify-items: center; }
.answer > * { max-width: 100%; }
.answer .lock { width: 100%; }
.answer__label { justify-self: start; }
.answer__row { justify-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tp-space-1) var(--tp-space-3); }
.answer__attempt { color: var(--tp-ink); }
.answer__status { justify-self: stretch; font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-ink-map); }
.answer__error { justify-self: stretch; }
.answer .tp-points, .answer .tp-seg { width: 100%; }

.tp-compass__hub { pointer-events: none; }
.tp-points__opt .bull { flex: none; }
.tp-points__opt.is-struck, .tp-points__opt.is-struck:hover {
  background: var(--tp-paper-sunk); color: var(--tp-ink-faint); border: 1.5px dashed var(--tp-ink-faint); cursor: not-allowed;
}
.tp-points__opt.is-struck span { text-decoration: line-through; text-decoration-thickness: 3px; }
.tp-points__opt.is-struck .bull { opacity: 0.35; }
@media (max-width: 359px) { .tp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 8 segments need 352 px to keep 44 px targets; below that, two rows of four */
@media (max-width: 379px) {
  .answer .tp-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--tp-radius-md); }
  .answer .tp-seg button:nth-child(5) { border-left: 0; }
  .answer .tp-seg button:nth-child(n+5) { border-top: 1px solid var(--tp-rule-strong); }
}
.tp-compass__opt[disabled], .tp-seg button[disabled], .tp-points__opt[disabled]:not(.is-struck) { cursor: progress; }

.verdict { width: 100%; display: grid; gap: var(--tp-space-3); animation: rise var(--tp-dur-base) var(--tp-ease-out); outline: none; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.verdict__top { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3); flex-wrap: wrap; }
.verdict__score { display: flex; align-items: baseline; gap: var(--tp-space-2); }
.verdict__pts { font-size: var(--tp-text-3xl); line-height: var(--tp-leading-3xl); font-weight: var(--tp-weight-bold); font-variant-numeric: tabular-nums; }
.verdict__of { font-size: var(--tp-text-lg); line-height: var(--tp-leading-lg); color: var(--tp-ink-soft); font-weight: var(--tp-weight-semibold); }
.verdict__rows { border-top: var(--tp-border-hair); }
.verdict__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tp-space-3); padding: var(--tp-space-2) 0; border-bottom: var(--tp-border-hair); font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); }
.verdict__rows dt { color: var(--tp-ink-soft); }
.verdict__rows dd { font-weight: var(--tp-weight-bold); text-align: right; }
.verdict .tp-btn { width: 100%; margin-top: var(--tp-space-1); padding-inline: var(--tp-space-4); }

@media (min-width: 1024px) {
  .play { max-width: none; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "head head" "map side"; column-gap: var(--tp-space-6); row-gap: var(--tp-space-5); align-items: start; }
  .play__head { grid-area: head; }
  .play__map { grid-area: map; }
  .play__side { grid-area: side; }
  .play__prompt { font-size: var(--tp-text-2xl); line-height: var(--tp-leading-2xl); }
  .play__meta { justify-content: flex-start; gap: var(--tp-space-5); }
  .play__hint--touch { visibility: hidden; }
  .mapbox--tap { cursor: default; }
}

/* ---------- zoom overlay ---------- */
.zoom { position: fixed; inset: 0; z-index: var(--tp-z-modal); background: var(--tp-ink); display: flex; flex-direction: column; color: var(--tp-paper); }
.zoom__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-space-3); padding: var(--tp-space-3) var(--tp-gutter); }
.zoom__status { font: var(--tp-weight-semibold) var(--tp-text-sm)/var(--tp-leading-sm) var(--tp-font-sans); min-width: 0; }
.zoom__tools { display: flex; align-items: center; gap: var(--tp-space-2); flex: none; }
.zoom__tool {
  width: var(--tp-tap); height: var(--tp-tap); border-radius: 50%; border: 1.5px solid var(--tp-ink); background: var(--tp-paper-raised); color: var(--tp-ink);
  font: var(--tp-weight-bold) 22px/1 var(--tp-font-sans); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.zoom__tool:hover { background: var(--tp-paper-sunk); }
.zoom__tool[disabled] { background: var(--tp-paper-sunk); color: var(--tp-ink-faint); cursor: not-allowed; }
.zoom__view { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.zoom__view:active { cursor: grabbing; }
.zoom__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.zoom .mapbox { border: 0; outline: calc(2px * var(--inv, 1)) solid var(--tp-panel-border); }
.zoom .pin { transform: scale(var(--inv, 1)); }
.zoom .hit { cursor: crosshair; touch-action: none; }
.zoom__help { padding: var(--tp-space-2) var(--tp-gutter) var(--tp-space-4); font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-rule); text-align: center; }

/* ---------- results ---------- */
.results { display: grid; gap: var(--tp-space-6); }
.results__total { margin-top: var(--tp-space-1); font-size: var(--tp-text-3xl); line-height: var(--tp-leading-3xl); font-weight: var(--tp-weight-bold); font-variant-numeric: tabular-nums; }
.results__total .max, .results__total .pct { color: var(--tp-ink-soft); }
.results__total .pct { font-size: 0.6em; margin-left: 0.04em; }
.results__chips { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); margin-top: var(--tp-space-3); }
.chip-todo {
  display: inline-flex; align-items: center; height: 34px; padding: 0 var(--tp-space-4); border-radius: var(--tp-radius-pill);
  border: 1.5px solid var(--tp-ink-faint); background: var(--tp-paper-raised); font-size: var(--tp-text-sm); font-weight: var(--tp-weight-semibold);
}
.tp-base a.chip-todo { text-decoration: none; }
.results__cols { display: grid; gap: var(--tp-space-5); align-items: start; }
.results__aside { display: grid; gap: var(--tp-space-5); }
.results h2 { font-size: var(--tp-text-xl); line-height: var(--tp-leading-xl); }
.results__todo { display: grid; gap: var(--tp-space-3); justify-items: start; }
.results__todo p { color: var(--tp-ink-map); }
.share { position: relative; overflow: hidden; }
/* a faint contour corner behind the heading (motif in margins only; never near a map) */
.share::before {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 260px; height: 120px; pointer-events: none;
  background: radial-gradient(ellipse at 100% 0, rgba(251, 248, 241, 0) 0, var(--tp-paper-raised) 72%), url("../img/contour-pattern.svg") 100% 0 / var(--tp-motif-size) no-repeat;
}
.share > * { position: relative; }
.share__lede { margin-top: var(--tp-space-1); color: var(--tp-ink-map); max-width: 52ch; }
.share__body { display: grid; gap: var(--tp-space-5); margin-top: var(--tp-space-4); }
.share__text {
  margin: 0; padding: var(--tp-space-3) var(--tp-space-4); background: var(--tp-map); border: var(--tp-border-hair); border-radius: var(--tp-radius-md);
  font: var(--tp-weight-medium) var(--tp-text-sm)/var(--tp-leading-sm) var(--tp-font-mono); white-space: pre-wrap; min-width: 0;
}
.share__status { min-height: var(--tp-leading-sm); font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-ink-map); }
.share__preview { padding-top: var(--tp-space-4); border-top: var(--tp-border-hair); display: flex; flex-wrap: wrap; gap: var(--tp-space-4); align-items: flex-end; }
.share__canvas { display: block; height: 284px; width: auto; aspect-ratio: 1080 / 1920; border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-2); border: var(--tp-border-hair); background: var(--tp-paper); }
.share__side { display: grid; gap: var(--tp-space-2); justify-items: start; flex: 1 1 140px; }

/* share kit: Story CTA, platform row, copy result, tip */
.sharekit { display: grid; gap: var(--tp-space-3); }
.sharekit svg { flex: none; }
.sharekit__story { width: 100%; gap: var(--tp-space-3); }
.sharekit__story svg { width: 24px; height: 24px; }
.sharekit__hint { margin-top: calc(-1 * var(--tp-space-1)); font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-ink-soft); text-align: center; }
.sharekit__label { margin-top: var(--tp-space-2); color: var(--tp-ink-map); }
.sharekit__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tp-space-2); }
.sharekit__app {
  display: grid; justify-items: center; align-content: start; gap: 2px; width: 100%; min-height: var(--tp-tap); padding: var(--tp-space-1) 0 var(--tp-space-2);
  border: 0; border-radius: var(--tp-radius-md); background: transparent; color: var(--tp-ink); cursor: pointer; text-align: center;
  transition: background-color var(--tp-dur-fast) var(--tp-ease-out);
}
.tp-base a.sharekit__app { text-decoration: none; color: var(--tp-ink); }
.sharekit__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--tp-space-1); border-radius: 50%;
  border: 1.5px solid var(--tp-ink); background: var(--tp-paper-raised);
  transition: background-color var(--tp-dur-fast) var(--tp-ease-out), color var(--tp-dur-fast) var(--tp-ease-out), transform var(--tp-dur-instant) var(--tp-ease-out);
}
.sharekit__icon svg { width: 24px; height: 24px; }
.sharekit__app:hover .sharekit__icon { background: var(--tp-ink); color: var(--tp-paper); }
.sharekit__app:active .sharekit__icon { transform: translateY(1px); }
.sharekit__name { font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); font-weight: var(--tp-weight-bold); }
.sharekit__sub { font-size: var(--tp-text-caption); line-height: var(--tp-leading-caption); color: var(--tp-ink-soft); letter-spacing: var(--tp-tracking-label); text-transform: uppercase; font-weight: var(--tp-weight-semibold); }
.tp-base .sharekit__app:focus-visible { border-radius: var(--tp-radius-md); }
.sharekit__copy { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); align-items: center; margin-top: var(--tp-space-2); }
.sharekit__copy .share__text { flex: 1 1 250px; }
.sharekit__copybtn { gap: var(--tp-space-2); padding-inline: var(--tp-space-4); white-space: nowrap; }
.sharekit__copybtn svg { width: 18px; height: 18px; }
.sharekit__tip { display: none; }
.sharekit__tip.is-on {
  display: flex; gap: var(--tp-space-2); align-items: flex-start; padding: var(--tp-space-3) var(--tp-space-4); border-radius: var(--tp-radius-md);
  background: var(--tp-paper-sunk); font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); font-weight: var(--tp-weight-semibold); color: var(--tp-ink);
}
.sharekit__tip svg { width: 18px; height: 18px; margin-top: 1px; color: var(--tp-score-summit); }
@media (max-width: 359px) {
  .sharekit__icon { width: 46px; height: 46px; }
}
@media (min-width: 640px) {
  .share__body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .share__preview { border-top: 0; padding-top: 0; flex-direction: column; align-items: center; flex-wrap: nowrap; }
  .share__side { justify-items: center; flex: none; text-align: center; }
  .share__side .size-seg { margin-inline: auto; }
}
/* compact share card in the done-for-today state (no preview) */
.share--compact h2 { font-size: var(--tp-text-xl); line-height: var(--tp-leading-xl); }
.share--compact .sharekit { margin-top: var(--tp-space-4); }
.size-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 220px; }
.size-seg button { padding: 0 var(--tp-space-3); }
.signup__label { display: block; margin: var(--tp-space-3) 0 var(--tp-space-2); font-weight: var(--tp-weight-bold); }
.signup__msg { margin-top: var(--tp-space-2); min-height: var(--tp-leading-sm); font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); font-weight: var(--tp-weight-semibold); }
.signup__msg.is-ok { color: var(--tp-ink); }
.signup .tp-field-help { max-width: 68ch; }
.nextmap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tp-space-2) var(--tp-space-4); align-items: center; color: var(--tp-ink); }
.nextmap b { font-family: var(--tp-font-mono); font-size: var(--tp-text-lg); font-variant-numeric: tabular-nums; }
.nextmap a { display: inline-flex; align-items: center; min-height: var(--tp-tap); font-size: var(--tp-text-sm); font-weight: var(--tp-weight-semibold); }
@media (min-width: 900px) {
  .results__cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- how ---------- */
.how { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tp-space-6); max-width: 760px; }
.how > * { min-width: 0; }
.how h1 { font-size: var(--tp-text-3xl); line-height: var(--tp-leading-3xl); }
.how h2 { font-size: var(--tp-text-xl); line-height: var(--tp-leading-xl); margin-bottom: var(--tp-space-3); }
.how section > p { color: var(--tp-ink-map); margin-bottom: var(--tp-space-3); max-width: 68ch; }
.how__h3 { margin: var(--tp-space-5) 0 var(--tp-space-2); }
.how__levels li { padding: var(--tp-space-3) 0; border-bottom: var(--tp-border-hair); max-width: 68ch; }
.how__levels b { display: block; }
.tbl-wrap { overflow-x: auto; }
.tbl-wrap--next { margin-top: var(--tp-space-2); }
.tbl { border-collapse: collapse; width: 100%; font-size: var(--tp-text-sm); background: var(--tp-paper-raised); border-radius: var(--tp-radius-md); overflow: hidden; }
.tbl th, .tbl td { padding: var(--tp-space-2) 6px; text-align: center; border-bottom: var(--tp-border-hair); white-space: nowrap; }
@media (min-width: 640px) { .tbl th, .tbl td { padding-inline: var(--tp-space-3); } }
.tbl tr:first-child th { font-weight: var(--tp-weight-semibold); color: var(--tp-ink-map); background: var(--tp-paper-sunk); }
.tbl th[scope="row"] { text-align: left; font-weight: var(--tp-weight-semibold); }
.tbl td { font-variant-numeric: tabular-nums; font-weight: var(--tp-weight-bold); }
.tbl-note { margin-top: var(--tp-space-2); font-size: var(--tp-text-sm); color: var(--tp-ink-soft); max-width: 68ch; }
.tiers { display: grid; gap: var(--tp-space-2); }
.tiers li { display: flex; align-items: center; gap: var(--tp-space-3); }