* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; line-height: 1.5; }
main { max-width: 440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: calc(env(safe-area-inset-top) + 32px) 22px calc(env(safe-area-inset-bottom) + 28px); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 17px var(--font-display); color: var(--heading); text-decoration: none; }
h1 { font-size: 32px; line-height: 1.08; }
.lede { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
/* One real input behind four boxes: paste, autofill and the phone keyboard
   all just work, and the boxes only ever draw what the input holds. */
.code { position: relative; display: flex; gap: 10px; }
.code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; caret-color: transparent; }
.box { flex: 1; height: 76px; border-radius: 14px; background: var(--surface); border: 2px solid var(--border); display: grid; place-items: center;
  font: 900 36px/1 var(--font-display); color: var(--heading); transition: border-color .15s; }
.code.focused .box.next, .box.filled { border-color: var(--primary); }
.code.focused .box.next::after { content: ''; width: 2px; height: 34px; background: var(--primary); animation: blink 1s steps(2) infinite; }
.code.bad .box { border-color: var(--warn); background: var(--warn-bg); }
@keyframes blink { 50% { opacity: 0; } }
.primary { font: 500 16px/1.2 var(--font-body); min-height: 54px; border-radius: var(--r-control); background: var(--primary); border: 1px solid var(--primary);
  color: var(--on-primary); box-shadow: var(--press); cursor: pointer; }
.primary:disabled { opacity: .45; box-shadow: none; cursor: default; }
.error { margin: -6px 0 0; font-size: 14px; color: var(--warn-text); }
.error:empty { display: none; }
.grow { flex-grow: 1; }
.fine { margin: 0; font-size: 12.5px; color: var(--faint); text-align: center; }
.fine b { color: var(--text); }

a.primary, a.secondary { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.secondary { font: 500 15px/1.2 var(--font-body); min-height: 50px; padding: 0 16px; border-radius: var(--r-control); background: var(--surface);
  border: 1px solid var(--border); color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
button.secondary.quiet { background: transparent; }
.secondary:disabled { color: var(--muted); background: transparent; cursor: default; }
:is(.primary, .secondary, .plan, .brand, a, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { color: var(--accent); }
.field-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.input { font: 400 17px var(--font-body); height: 56px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); color: var(--text); width: 100%; }
.input:focus { outline: none; border-color: var(--primary); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.note b { color: var(--text); }
.help-card { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border-soft); }
.help-card svg { flex: none; margin-top: 2px; color: var(--accent); }
.help-card p { margin: 0; font-size: 13px; color: var(--muted); }
.eyebrow-s { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pill { font: 600 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--raised); color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Plan cards: selection is a border, never a primary fill. */
.plans { display: flex; flex-direction: column; gap: 10px; }
.plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); cursor: pointer;
  font: inherit; text-align: left; color: var(--text); background: var(--surface); border: 2px solid var(--border); }
.plan[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--raised); }
.plan:disabled { opacity: .6; cursor: default; border-style: dashed; }
.plan .left, .plan .right { display: flex; flex-direction: column; gap: 2px; }
.plan .right { align-items: flex-end; gap: 0; }
.plan .name { display: flex; gap: 8px; align-items: center; }
.plan b { font: 800 17px var(--font-display); color: var(--heading); }
.plan .price { font: 800 19px var(--font-display); color: var(--heading); }
.plan .cadence, .plan .note-s { font-size: 12.5px; color: var(--muted); }
.perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.perks li { display: flex; gap: 8px; align-items: center; }
.perks svg { color: var(--accent); flex: none; }

/* Long-form pages */
.prose h2 { font-size: 19px; margin: 22px 0 4px; }
.prose p, .prose li { font-size: 15px; line-height: 1.65; color: var(--text); margin: 6px 0; }
.prose ul { padding-left: 20px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }