/* Shared look for /start, /i/<code>, /family — same tokens as the landing page. */
:root{
  --ink:#07080c; --paper:#eef0f3; --card:#ffffff; --line:#d6dae1;
  --graphite:#161a21; --muted:#5b6371;
  --uv:#5562ff; --uv-ink:#2f37b8; --glow:#efee6c; --alert:#c8323d; --ok:#2f8a57; --wait:#8a6a12;
  --display:"Funnel Display","Helvetica Neue",Arial,sans-serif;
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--graphite);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--uv-ink)}
:focus-visible{outline:3px solid var(--uv);outline-offset:3px}
.top{background:var(--ink);color:#e9ebf0}
.top .in{width:min(640px,100% - 32px);margin-inline:auto;height:64px;display:flex;align-items:center}
.brand{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;color:#e9ebf0;text-decoration:none}
main{width:min(640px,100% - 32px);margin:36px auto 72px;display:flex;flex-direction:column;gap:22px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,7vw,46px);letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
h2{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-.015em;line-height:1.15}
.lede{font-size:19px;color:#353b46;max-width:56ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-weight:700;font-size:16px}
.field small{color:var(--muted);font-size:15px}
input[type=text],input[type=tel],input[type=number],input[type=email]{font:inherit;font-size:18px;padding:13px 14px;border:1.5px solid #b9bfca;border-radius:10px;background:#fff;color:var(--graphite);width:100%}
input:focus{border-color:var(--uv);outline:none;box-shadow:0 0 0 3px rgba(85,98,255,.2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row>*{min-width:0}
@media (max-width:520px){.row{grid-template-columns:1fr}}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#353b46}
.consent input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--uv)}
.ref{font-size:14px;color:var(--muted)}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.btns{grid-template-columns:1fr}}
button,.btn{font:inherit;font-weight:700;font-size:18px;padding:15px 18px;border-radius:12px;cursor:pointer;border:2px solid var(--ink);text-align:center;text-decoration:none;display:inline-block}
.primary{background:var(--ink);color:#fff}
.secondary{background:transparent;color:var(--ink)}
.big{font-size:22px;padding:20px 22px;width:100%}
.small{font-size:15px;padding:8px 12px;border-width:1.5px;border-radius:9px}
button:disabled{opacity:.5;cursor:default}
button.picked:disabled{opacity:1}
.msg{font-size:16px;min-height:1.4em}
.msg.err{color:var(--alert)}
.msg.good{color:var(--ok)}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10;width:max-content;max-width:calc(100% - 32px);padding:14px 20px;border-radius:12px;background:#1f6b45;color:#fff;font-size:17px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.err{background:var(--alert)}
.toast[hidden]{display:none}
.linkbox{font-family:var(--mono);font-size:14px;background:var(--paper);border:1px dashed #9aa1ad;border-radius:10px;padding:12px;word-break:break-all}
.people{list-style:none;display:flex;flex-direction:column}
.people li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.people li:first-child{border-top:0}
.people .who{flex:1;min-width:140px}
.people .who b{display:block}
.people .who em{font-style:normal;color:var(--muted);font-family:var(--mono);font-size:13px}
.pill{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1.5px solid currentColor}
.pill.confirmed{color:var(--ok)}
.pill.waiting{color:var(--wait)}
.pill.opted_out{color:var(--alert)}
.lamp{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 3px var(--ink),0 0 18px var(--glow);margin-right:10px;vertical-align:middle}
.done h2{color:var(--ok)}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
/* pause rules (10/26) */
.choices{border:0;padding:0;margin:0;display:grid;gap:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.choice:has(input:checked){border-color:var(--ink)}
.choice input{margin-top:4px;width:18px;height:18px;accent-color:var(--ink);flex:none}
.choice b{display:block;font-size:17px}
.choice em{font-style:normal;font-size:13px;font-weight:700;color:var(--uv-ink);background:#eef0ff;border-radius:6px;padding:1px 8px;margin-top:4px;display:inline-block}
.moneyrow{display:flex;align-items:center;gap:8px;font-weight:700}
.money input{width:140px}
.money input:disabled{opacity:.45}
.who em.gone{color:var(--alert);font-weight:700}
/* Waiting for your review: the one box that needs an answer, so it sits first and gets the alert border. */
.card.alert{border:2px solid var(--alert)}
.reviews{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.reviews>li{display:flex;flex-direction:column;gap:10px}
.reviews>li+li{border-top:1px solid var(--line);padding-top:18px}
.amt{font-size:30px;font-weight:700;margin:0;font-variant-numeric:tabular-nums}
.amt span{font-size:17px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.flags{margin:0;padding-left:20px}
.danger{background:var(--alert);border-color:var(--alert);color:#fff}
.warn{flex-basis:100%;margin:4px 0 0;padding:12px 14px;border-radius:10px;background:#fbe9ea;color:#5a1016;font-size:16px;line-height:1.5}
/* The 6-digit phone setup code: read aloud, so big and spaced. */
.shortbox{border-top:1px solid var(--line);padding-top:14px}
.short{font-family:var(--mono);font-size:40px;letter-spacing:.18em;color:var(--ink);margin:4px 0}
/* Account box: the "Signed in on" list heading. */
h3.sub{font-family:var(--display);font-weight:500;font-size:19px;margin-top:6px}