:root{--paper:#F4F6F8;--surface:#FFFFFF;--ink:#17212B;--muted:#5E6B78;--line:#D9E0E6;--accent:#1F6F78;--accent-ink:#FFFFFF;--warn:#C9503F;color-scheme:light}
*{box-sizing:border-box}
/* Dark scheme (Jason, 6 Oct 2026, DM 11305: the mission page stayed white). Same variables and the same two selectors as the public page,
   so the system setting and an explicit data-theme both work. Every colour on these pages must go through a variable. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0F151B;--surface:#18212A;--ink:#E8EDF1;--muted:#98A6B3;--line:#2A3540;--accent:#5FB3BC;--accent-ink:#0F151B;--warn:#E07A6A;--note-bg:#3A3320;--note-line:#7A6A2E;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0F151B;--surface:#18212A;--ink:#E8EDF1;--muted:#98A6B3;--line:#2A3540;--accent:#5FB3BC;--accent-ink:#0F151B;--warn:#E07A6A;--note-bg:#3A3320;--note-line:#7A6A2E;color-scheme:dark}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;padding:24px 16px 48px}
main{max-width:620px;margin:0 auto;display:grid;gap:18px}
.brand{display:block;width:100%;max-width:300px;line-height:1;color:var(--ink);text-decoration:none}.brand svg{display:block;width:100%;height:auto}   /* same lockup and size as the home page (Jason, 6 Oct 2026, DM 11310) */
.preview{background:var(--note-bg,#FFF4D6);border:1px solid var(--note-line,#E5C66A);border-radius:10px;padding:10px 14px;font-size:14px}
h1{font-size:24px;margin:0}h2{font-size:18px;margin:0 0 4px}h3{font-size:16px;margin:8px 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:14px}
.step{font-size:13px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
label.f{display:grid;gap:4px;font-weight:600;font-size:15px}
input[type=email],input[type=text],textarea,label.f select{font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;width:100%;background:var(--surface);color:var(--ink)}
.opts{display:grid;gap:8px}.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.opt input{-webkit-appearance:none;appearance:none;margin:2px 0 0;width:20px;height:20px;flex:none;background:var(--surface);border:2px solid var(--muted);box-shadow:0 1px 2px rgba(23,33,43,.18);cursor:pointer}
.opt input[type=checkbox]{border-radius:5px}.opt input[type=radio]{border-radius:50%}
.opt input:checked{border-color:var(--accent);background-color:var(--accent)}
.opt input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:100% 100%}
.opt input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--surface),0 1px 2px rgba(23,33,43,.18)}
.opt input:focus-visible{outline:3px solid rgba(31,111,120,.35);outline-offset:2px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.opts.two,.row{grid-template-columns:1fr}}
.btn{display:block;text-align:center;font:inherit;font-weight:600;font-size:15px;padding:12px 10px;border-radius:10px;background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;width:100%}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn.danger{background:transparent;color:var(--warn);border:1.5px solid var(--warn)}
.btn:disabled{opacity:.4;cursor:not-allowed}
button.link{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;justify-self:start}
.note{color:var(--muted);font-size:14px;margin:0}.plain{margin:0}
.err{color:var(--warn);font-size:14px;margin:0;font-weight:600}
.consent{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--paper);font-size:15px;display:grid;gap:10px}
.consent p{margin:0}
fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}legend{font-weight:600;font-size:15px;padding:0;margin-bottom:6px}
a{color:var(--accent)}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}   /* 8 Oct 2026: left:-5000px made a right-to-left page scroll 5000px into empty space (Arabic rendered blank) */
.policy h2{margin-top:10px}.policy p{margin:0}
pre.copy{white-space:pre-wrap;word-break:break-word;font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px;margin:0;max-height:320px;overflow:auto}
[hidden]{display:none!important}

/* Mission page (5 Oct 2026): bracketed reference markers and the numbered list */
.policy a.ref{font-size:12px;vertical-align:super;line-height:0;text-decoration:none;margin-left:1px}
.policy ol.refs{margin:0;padding-left:22px;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.policy ol.refs li{padding-left:2px}

.opt.cat span{display:grid;gap:2px}.opt.cat b{font-weight:600}.opt.cat small{color:var(--muted);font-size:13px;line-height:1.35}
.sub{margin:0 0 4px 30px;padding-left:12px;border-left:2px solid var(--line)}
.followup{margin-top:4px;padding:10px 12px;border-radius:10px;background:var(--paper)}.followup legend{font-size:14px;margin-bottom:4px;float:left;width:100%}

/* 7 Oct 2026 (UX review items 8c and 9): the sample notification under "How often" on /signup/, and the "we sent a link" line at the top of step 2 on /profile/ */
.sample{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--paper);font-size:14px;line-height:1.45;display:grid;gap:4px}
.sample p{margin:0}.sample .place{font-weight:600;margin-top:4px}.sample .note{margin-bottom:2px}
.sent{border:1px solid var(--accent);border-radius:10px;padding:12px 14px;background:var(--paper);font-size:15px}

/* language switcher, entry pages only (8 Oct 2026) */
.langbar{display:flex;justify-content:flex-end;margin-top:-6px}#lang{font:inherit;font-size:14px;color:var(--ink);background:var(--card,#fff);border:1px solid var(--line,#D5DAE0);border-radius:999px;padding:6px 12px}
[dir=rtl] .langbar{justify-content:flex-start}