/* The account pages. Same world as the landing page — bone paper, sodium
   accent, one committed look. A person arriving here has already seen the
   front page; a different-looking form reads as a phishing page. */
:root{
  --paper:#EDE9E1; --card:#FFFDF9; --card-2:#F6F2E9;
  --rule:#D6CFC0; --rule-soft:#E4DED1;
  --ink:#141210; --dim:#4A453D; --faint:#6E675C;
  --sodium:#9A4C07; --sodium-lo:#D9A15C; --sodium-bg:rgba(154,76,7,.11);
  --asphalt:#12161C; --asphalt-ink:#E9E4D9; --green:#2C6B47; --red:#8C2F1D;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16.5px;line-height:1.7;letter-spacing:.003em;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
::selection{background:var(--sodium);color:#0B0E13}
:focus-visible{outline:2px solid var(--sodium);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

header.top{border-bottom:1px solid var(--rule);background:var(--card)}
header.top .in{max-width:960px;margin:0 auto;padding:18px 24px;display:flex;
  align-items:center;gap:12px}
header.top a.brand{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em}
header.top .tick{width:22px;height:22px;flex:none}

main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:48px 24px 64px}
main.wide{max-width:760px}
h1{font-size:1.75rem;line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.sub{color:var(--dim);margin:0 0 32px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:28px}

label{display:block;font-weight:500;margin:0 0 6px}
.hint{color:var(--faint);font-size:.87rem;line-height:1.5;margin:6px 0 0}
input[type=text],input[type=email],input[type=password],input[type=number],select{
  width:100%;padding:11px 13px;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--card-2);border:1px solid var(--rule);border-radius:7px;
}
input:focus{background:var(--card)}
.field{margin:0 0 20px}

/* The agreement. Deliberately NOT pre-ticked and deliberately not tiny — a
   consent record is only worth having if the person plainly saw what it says. */
.agree{display:flex;gap:11px;align-items:flex-start;margin:26px 0 4px;
  padding:15px;background:var(--card-2);border:1px solid var(--rule-soft);border-radius:8px}
.agree input{margin:4px 0 0;width:17px;height:17px;flex:none;accent-color:var(--sodium)}
.agree label{font-weight:400;margin:0;font-size:.94rem;line-height:1.55}
a{color:var(--sodium)}

.btn{display:inline-block;width:100%;padding:13px 18px;font:inherit;font-weight:600;
  font-size:1rem;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--asphalt);color:var(--asphalt-ink);border:1px solid var(--asphalt);
  border-radius:8px;margin-top:24px}
.btn:hover{background:#1B212A}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--card-2)}

/* 🔴 A failure has to be impossible to miss. An earlier version of the app
   failed silently and a person clicked a button and watched nothing happen. */
.msg{margin:20px 0 0;padding:13px 15px;border-radius:8px;font-size:.95rem;
  border-left:3px solid}
.msg.err{background:rgba(140,47,29,.08);border-color:var(--red);color:#5E1F13}
.msg.ok{background:rgba(44,107,71,.09);border-color:var(--green);color:#1D4B31}
.msg[hidden]{display:none}

.alt{margin:22px 0 0;text-align:center;color:var(--dim);font-size:.94rem}
footer{border-top:1px solid var(--rule);padding:22px 24px;text-align:center;
  color:var(--faint);font-size:.86rem}
/* 🔴 A link a thumb has to hit needs a thumb-sized target. These were 18px
   tall, which is a miss on a phone. Padding, not a bigger font — the footer
   should stay quiet. */
footer a{display:inline-block;padding:15px 8px;line-height:1}

/* subscribe */
.seats{display:flex;gap:12px;align-items:center}
.seats input{width:110px}
.plan{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px}
.plan button{padding:14px;font:inherit;text-align:left;cursor:pointer;background:var(--card-2);
  border:1px solid var(--rule);border-radius:8px;color:var(--ink)}
.plan button[aria-pressed=true]{border-color:var(--sodium);background:var(--sodium-bg);
  box-shadow:inset 0 0 0 1px var(--sodium)}
.plan b{display:block;font-size:1rem}
.plan span{color:var(--faint);font-size:.87rem}
.total{margin:26px 0 0;padding:20px;background:var(--asphalt);color:var(--asphalt-ink);
  border-radius:9px}
.total .n{font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.total .b{color:#9A968C;font-size:.9rem;margin-top:7px}
.rows{margin:14px 0 0;border-top:1px solid #2A313C;padding-top:12px;font-size:.88rem;
  color:#C9C4B8}
.rows div{display:flex;justify-content:space-between;padding:3px 0}
dl.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.96rem}
dl.facts dt{color:var(--faint)}
dl.facts dd{margin:0;font-weight:500}
@media (max-width:520px){
  main{padding:32px 18px 48px} .card{padding:22px} .plan{grid-template-columns:1fr}
}