/* assets/pages.css — the free-beta signup and the explainer pages (beta, towns, find, how we grade),
   on top of assets/plat.css. Plat tokens only (site/docs/DESIGN.md): warm paper sheets on the spruce
   ground, coral-ink links on paper, gold for top ranks, ok-ink for "open", gold-ink for "not yet". */

/* ---------- the signup form (on the ground or on a paper sheet) ---------- */
.beta-form{display:grid;gap:12px;max-width:44rem}
.actions + .beta-form{margin-top:22px}
.beta-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px}
.beta-fields label{display:grid;gap:6px;flex:1 1 14rem;min-width:0;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.beta-fields input,.beta-fields select{width:100%;min-height:46px;padding:0 14px;border-radius:8px;border:1.5px solid #F3EDE266;background:var(--spruce-deep);
  color:var(--paper);font:500 16px/1.2 var(--body);letter-spacing:0;text-transform:none}
.beta-fields select{cursor:pointer}
.beta-fields input::placeholder{color:var(--mist)}
.beta-fields input:focus,.beta-fields select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #F2C14E45}
.beta-fields .btn{flex:0 0 auto}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{box-shadow:0 0 0 4px #16231E2E}
.beta-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.beta-form .beta-privacy{margin:0;font-size:14px;color:var(--mist);max-width:44rem}
.beta-form .beta-privacy a{color:var(--paper);text-decoration-color:var(--coral);text-underline-offset:3px}
.beta-form .beta-msg{margin:0;font-size:15.5px;font-weight:600;color:var(--paper);border-left:3px solid var(--gold);padding:4px 0 4px 12px}
.beta-form .beta-msg[data-outcome="ok"],.beta-form .beta-msg[data-outcome="removed"]{border-left-color:var(--coral)}
.beta-free{display:inline-flex;align-items:baseline;gap:.4em;font-family:var(--display);font-weight:600;font-size:30px;line-height:1.05;color:var(--paper)}
.beta-free small{font-family:var(--body);font-size:14px;font-weight:600;color:var(--mist)}
/* on paper */
.sheet .beta-fields label,.on-paper .beta-fields label{color:var(--ink-mute)}
.sheet .beta-fields input,.sheet .beta-fields select,.on-paper .beta-fields input,.on-paper .beta-fields select{background:var(--paper);color:var(--ink);border-color:#4F5F5766}
.sheet .beta-fields input::placeholder,.on-paper .beta-fields input::placeholder{color:var(--ink-mute)}
.sheet .beta-form .beta-privacy,.on-paper .beta-form .beta-privacy{color:var(--ink-mute)}
.sheet .beta-form .beta-privacy a,.on-paper .beta-form .beta-privacy a{color:var(--coral-ink)}
.sheet .beta-form .beta-msg,.on-paper .beta-form .beta-msg{color:var(--ink);border-left-color:var(--gold-ink)}
.sheet .beta-form .beta-msg[data-outcome="ok"],.on-paper .beta-form .beta-msg[data-outcome="ok"],.sheet .beta-form .beta-msg[data-outcome="removed"],.on-paper .beta-form .beta-msg[data-outcome="removed"]{border-left-color:var(--ok-ink)}
.on-paper .beta-free{color:var(--ink)}
.on-paper .beta-free small{color:var(--ink-mute)}

/* footer: the towns and lead pages as links (the line stays quiet, like the plat sheet's legend) */
.site-foot .towns a{color:inherit;text-decoration:none}
.site-foot .towns a:hover{color:var(--paper);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.site-foot .towns + .towns{border-top:0;padding-top:0}

/* ---------- explainer pages ---------- */
.page{padding-bottom:64px}
.page-hero{padding-top:18px;padding-bottom:34px;display:grid;gap:16px;max-width:60rem}
.page-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.6vw,60px);line-height:1.03;letter-spacing:-.02em;font-variation-settings:'opsz' 144;text-wrap:balance}
.page-hero h1 em{font-style:italic;font-weight:500;color:var(--coral)}
.page-hero .lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--mist);max-width:44em}
.page-hero .lede b{color:var(--paper);font-weight:600}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.crumbs a{color:var(--paper);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-decoration-color:var(--coral)}
.beta-note{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:3px;
  padding:12px 16px;max-width:60rem;font-size:15.5px;color:var(--paper)}
.beta-note b{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.page .sheet{border-radius:3px}
.page .sheet .wrap{padding-top:44px;padding-bottom:48px;display:grid;gap:22px}
.page .sheet + .sheet{margin-top:0;border-top:1px solid var(--paper-line)}
.page h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,36px);line-height:1.08;letter-spacing:-.012em;font-variation-settings:'opsz' 144;max-width:24em;text-wrap:balance}
.page h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2}
.prose{display:grid;gap:14px;max-width:46em}
.sheet .prose p,.sheet .prose li{color:var(--ink)}
.sheet .prose .quiet{color:var(--ink-mute)}
.prose ul{padding-left:1.2em;display:grid;gap:8px}
.facts{width:100%;max-width:60rem;border-collapse:collapse;font-size:15.5px}
.facts th,.facts td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-bottom:1px solid var(--paper-line)}
.facts th{width:30%;min-width:9rem;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding-top:14px}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts code,.prose code{font-family:var(--mono);font-size:.88em;background:var(--paper-2);padding:1px 5px;border-radius:3px}
.status{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 10px;
  border:1px solid #4F5F5759;color:var(--ink-mute);white-space:nowrap;vertical-align:2px}
.status.open,.status.proven{color:var(--ok-ink);border-color:#2E6B4F59;background:#2E6B4F1A}
.status.closed,.status.unproven{color:var(--gold-ink);border-color:#7A5A0E59;background:#7A5A0E14}
.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:14px 26px;max-width:72rem}
.personas > div{border-top:3px solid var(--paper-line);padding-top:12px;display:grid;gap:6px;align-content:start}
.personas > div.is-open{border-top-color:var(--ok-ink)}
.personas p{font-size:15.5px;color:var(--ink-mute)}
.faq{display:grid;gap:0;max-width:52rem}
.faq details{border-bottom:1px solid var(--paper-line);padding:14px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);list-style-position:outside}
.faq details p{margin-top:10px;color:var(--ink);max-width:46em}
.links{display:flex;flex-wrap:wrap;gap:8px 10px}
.links a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid #4F5F5759;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.links a:hover{border-color:var(--coral-ink);color:var(--coral-ink)}
.links a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.page .cta{padding-top:44px;display:grid;gap:18px;max-width:60rem}
.page .cta h2{color:var(--paper)}
.page .cta > p{color:var(--mist);max-width:44em}
.asof{font-family:var(--mono);font-size:12px;color:var(--ink-mute);line-height:1.7}
@media (max-width:700px){
  .facts th{width:auto;display:block;padding-bottom:2px;border-bottom:0}
  .facts td{display:block;padding-top:0}
  .beta-fields .btn{width:100%}
}