/* The app carries its tokens inline in app.html, and /tokens.css is the older
Claude Design set, so neither is a reliable source here. These are the same
values the app uses, declared once so the front door and the app match. */
:root{
--canvas:#F2F2F2; --card:#FFFFFF; --panel:#F6F6F6;
--ink:#101114; --ink2:#6B6F76; --ink3:#9AA0A8;
--line:#E9E9EB;
--accent:#0072C6; --accent-ink:#FFFFFF; --accent-soft:#E7F1FA;
--anchor:#101114;
--r-card:22px; --r-tile:16px; --r-pill:999px;
--f:'Plus Jakarta Sans',system-ui,sans-serif;
}
html[data-theme="dark"]{
--canvas:#09080E; --card:#17161D; --panel:#221F28;
--ink:#F4F3F7; --ink2:#9B98A6; --ink3:#8A8796;
--line:#26232F;
--accent:#00A3FF; --accent-ink:#0B1017; --accent-soft:rgba(0,163,255,.16);
--anchor:#FFFFFF;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--canvas);color:var(--ink);
font-family:var(--f);-webkit-font-smoothing:antialiased}
button{font-family:inherit}
a{color:var(--accent);text-decoration:none}
/* ============================================================
AUTH — sign in, create account, qualification
26 Sep 2026. Rebuilt on the Framer landing system
(~/.claude/skills/um-framer-web) and on Samuel's standing note
from 23 Sep: NO SPLIT. The form is centred, the worries loop
above it, the stacks sit below.
Built on the portal's own tokens so the front door and the app
are the same product.
============================================================ */
.auth{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
padding:28px 20px 60px;background:var(--canvas)}
.auth-top{width:100%;max-width:1120px;display:flex;align-items:center;
justify-content:space-between;gap:16px;margin-bottom:clamp(28px,6vh,64px)}
.auth-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;
letter-spacing:-.02em;font-size:15px;color:var(--ink);text-decoration:none}
.auth-brand span{width:28px;height:28px;border-radius:9px;background:var(--accent);
color:var(--accent-ink);display:grid;place-items:center;font-size:11px;font-weight:800}
.auth-top .tbtn{width:38px;height:38px;border-radius:50%;background:var(--card);
border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
/* ---- the worries, looping right to left above the form ---- */
.worries{width:100%;max-width:100vw;overflow:hidden;margin-bottom:26px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.worries-track{display:flex;gap:10px;width:max-content;animation:wmarq 42s linear infinite}
.worry{flex:none;padding:10px 18px;border-radius:var(--r-pill);background:var(--card);
border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink2);
white-space:nowrap;box-shadow:0 1px 2px rgba(11,16,23,.04)}
@keyframes wmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.worries-track{animation:none}}
/* ---- the centred card ---- */
.auth-head{text-align:center;max-width:620px;margin:0 auto 24px}
.auth-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);
font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:18px}
.auth-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.auth-head h1{margin:0 0 12px;font-size:clamp(28px,4vw,44px);font-weight:800;
letter-spacing:-.035em;line-height:1.06;color:var(--ink)}
.auth-head p{margin:0;font-size:16px;line-height:1.6;color:var(--ink2)}
.auth-card{width:100%;max-width:520px;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-card);padding:30px;
box-shadow:0 2px 6px rgba(11,16,23,.06),0 24px 60px rgba(11,16,23,.10)}
.auth-card.wide{max-width:660px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.fld .hint{font-size:12.5px;color:var(--ink3);margin:-3px 0 7px}
.fld input,.fld textarea,.fld select{width:100%;border:1px solid var(--line);
border-radius:14px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);
background:var(--card)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft)}
/* Six digits copied out of an email. Big, spaced and centred so a typo is
visible before they tap Confirm, and tabular so the box never reflows. */
.fld input.codein{text-align:center;font-size:30px;font-weight:700;letter-spacing:.34em;
text-indent:.34em;padding:16px 15px;font-variant-numeric:tabular-nums}
.fld input.codein::placeholder{letter-spacing:.34em;color:var(--ink3);font-weight:600}
/* ---------- Cloudflare's check ----------
It sizes itself, so the wrapper only reserves room and centres it. The note
under it is how a visitor learns the check FAILED rather than silently
degrading to the rate limiters, which is what happened for weeks while the
secrets were set and no page rendered the widget. */
.tswrap{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:7px}
.tswrap:empty{display:none}
#ts{min-height:0}
.tsnote{margin:0;font-size:12.5px;line-height:1.5;text-align:center;color:var(--ink3)}
.tsnote:empty{display:none}
.tsnote.bad{color:#B25E02}
html[data-theme="dark"] .tsnote.bad{color:#F0B354}
/* ---------- or ---------- */
.or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
/* ---------- Google ---------- */
/* .abtn is space-between (its chevron sits on the right) and is defined after
this block, so the same specificity would lose on order. Google has no
chevron, so the mark and the words travel together in the middle. */
.abtn.gbtn{display:flex;align-items:center;justify-content:center;gap:11px}
.gbtn .glogo{width:18px;height:18px;flex:none}
/* .abtn.ghost puts a chevron in an i; Google has none, so the row stays centred. */
.gbtn i{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
/* the one CTA, arrow in a circle, same as the marketing site */
.abtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
padding:8px 8px 8px 24px;border:0;border-radius:var(--r-pill);background:var(--anchor);
color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;
box-shadow:0 10px 30px rgba(11,16,23,.22);
transition:transform .28s cubic-bezier(.22,1,.36,1)}
.abtn:hover{transform:translateY(-2px)}
.abtn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
.abtn i{font-style:normal;width:40px;height:40px;border-radius:50%;flex:none;display:grid;
place-items:center;background:var(--accent);color:var(--accent-ink);font-size:17px}
.abtn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);
box-shadow:none}
.abtn.ghost i{background:var(--panel);color:var(--ink)}
.auth-alt{margin:18px 0 0;text-align:center;font-size:14px;color:var(--ink3)}
.auth-alt a{color:var(--ink2);font-weight:600}
/* ---- the option list, for the qualification steps ---- */
.opts{display:grid;gap:9px}
.opts button{border:1px solid var(--line);border-radius:var(--r-pill,999px);padding:14px 16px;
text-align:left;background:var(--card);font:inherit;font-size:14.5px;font-weight:600;
color:var(--ink);cursor:pointer}
/* A one-line choice is a chip and takes the pill above. One carrying a
description is a card, and a two-line pill is a lozenge — so it keeps its
corner. :has() is the only way to tell them apart in CSS; where it is not
supported every option stays a pill, which is the safe way round. */
.opts button:has(small){border-radius:14px}
.opts button:hover{border-color:var(--ink3)}
.opts button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.opts button small{display:block;font-weight:500;font-size:12.5px;color:var(--ink3);margin-top:3px}
.opts button.on small{color:var(--accent)}
/* ---- progress ---- */
.prog{display:flex;gap:6px;margin-bottom:22px}
.prog i{flex:1;height:4px;border-radius:999px;background:var(--line)}
.prog i.on{background:var(--accent)}
.stepk{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink3);margin-bottom:10px;display:block}
/* ---- the stacks, under the form ---- */
.stacks{width:100%;max-width:1000px;margin:46px auto 0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.stack{background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);
padding:20px;box-shadow:0 1px 2px rgba(11,16,23,.04)}
.stack b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.stack p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.stack .si{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);
color:var(--accent);display:grid;place-items:center;margin-bottom:12px}
.stack .si svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.auth-note{max-width:520px;margin:20px auto 0;text-align:center;font-size:12.5px;
line-height:1.6;color:var(--ink3)}
.auth-err{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#FDE8E8;
color:#8A1C1C;font-size:13.5px;font-weight:600}
html[data-theme="dark"] .auth-err{background:rgba(240,87,75,.16);color:#F0574B}