@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/assets/fonts/inter-tight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
 --night:#14100c;--night2:#1b1611;--panel:#231b14;--panel2:#2b2219;--line:rgba(243,230,200,.12);--line2:rgba(243,230,200,.22);
 --display:"Fraunces",Georgia,serif;--body:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
 --cream:#f3e6c8;--muted:#b9a98c;--dim:#8a7c66;--clay:#c45c26;--clay2:#e07a3a;--gold:#e8b86a;--moss:#7aa35f;--sky:#7eb6c9;--rec:#ef4a3a;
 --r:14px;--r2:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--night);color:var(--cream);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.01em}
.logo svg{width:26px;height:26px}
.logo small{display:block;font:500 10px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;white-space:nowrap}
.btn-p{background:var(--clay);color:#fff8ec;box-shadow:0 2px 0 #7d3410}
.btn-s{background:transparent;border-color:var(--line2);color:var(--cream)}
.btn-g{background:var(--gold);color:#2a1c12}
.btn-sm{height:34px;padding:0 14px;font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel2);color:var(--muted);white-space:nowrap}
.pill.done{background:rgba(122,163,95,.16);color:#a9d18c}
.pill.prog{background:rgba(232,184,106,.16);color:var(--gold)}
.pill.inc{background:rgba(224,122,58,.16);color:#f0a070}
.pill.new{background:rgba(126,182,201,.14);color:var(--sky)}
.ex{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border:1px dashed var(--gold);border-radius:6px;color:var(--gold);font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.eyebrow{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.stub{background:rgba(232,184,106,.12);border:1px dashed var(--gold);color:var(--gold);border-radius:6px;padding:1px 6px;font-family:var(--mono);font-size:.85em}
.list{list-style:none}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.check:first-child{border-top:0}
.box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line2);display:grid;place-items:center;margin-top:1px}
.box.on{background:var(--moss);border-color:var(--moss)}
.box.on::after{content:"";width:10px;height:6px;border:2.5px solid #14100c;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.box.miss{border-color:#f0a070;border-style:dashed}
.check b{font-weight:600}
.check .sub{font-size:13px;color:var(--muted)}
.bar{height:6px;border-radius:9px;background:var(--panel2);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--clay),var(--gold));border-radius:9px}
/* app shell */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--night)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--gold);border:1px solid var(--line2)}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:8px 6px 22px;background:rgba(20,16,12,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px);z-index:5}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--dim);font-weight:600;min-width:64px}
.tabbar a.on{color:var(--gold)}
.tabbar svg{width:22px;height:22px}
.side{display:none}
main.page{padding:18px 18px 110px;flex:1}
.ph{margin-bottom:16px}
.ph h1{font-size:28px}
.ph p{color:var(--muted);margin-top:4px}
@media (min-width:900px){
 .app{flex-direction:row}
 .topbar.mob,.tabbar{display:none}
 .side{display:flex;flex-direction:column;width:248px;flex:none;border-right:1px solid var(--line);padding:22px 16px;gap:4px;background:var(--night2);min-height:100vh;min-height:100dvh}
 .side .logo{padding:0 8px 22px}
 .side .sect{font:600 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:18px 10px 8px}
 .side a.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:500}
 .side a.nav svg{width:18px;height:18px}
 .side a.nav.on{background:var(--panel2);color:var(--cream)}
 .side .me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 8px;border-top:1px solid var(--line);font-size:13px}
 main.page{padding:34px 40px 40px}
 .ph h1{font-size:34px}
}
:root{--night:#0a1224;--line:rgba(220,232,255,.10)}
body{font-size:16px;line-height:1.55}
.logo{font-size:17px;gap:9px}.logo svg{width:18px;height:18px}
.btn{height:48px;padding:0 26px;font-size:16px}.btn-p{box-shadow:none}
.link{color:var(--gold);font-weight:600}.link.quiet{color:var(--muted);font-weight:500}
.ex{border:0;padding:0;height:auto;font-size:11px;letter-spacing:.1em;color:var(--gold);opacity:.85}
.kicker{font-size:13px;color:var(--dim);margin-bottom:6px;display:flex;gap:10px;align-items:center}
.muted{color:var(--muted)}
.stub{font-size:.8em}
.list{list-style:none}
.prog{display:flex;align-items:center;gap:14px;margin:18px 0 22px}.prog .bar{flex:1;height:4px}.prog span{font-size:14px;color:var(--muted)}
.bar i{background:var(--gold)}
.st{font-size:14px;font-weight:500;color:var(--dim)}.st.done{color:var(--ok)}.st.inc{color:var(--warn)}
/* checklist */
.cl{margin:6px 0}
.ck{display:flex;align-items:center;gap:14px;padding:11px 0;font-size:16px}
.ck .box{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(220,232,255,.35);flex:none;display:grid;place-items:center}
.ck.on{color:var(--muted)}.ck.on .box{background:var(--moss);border-color:var(--moss)}
.ck.on .box::after{content:"";width:8px;height:5px;border:2px solid #0a1224;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.ck.miss .box{border-color:var(--warn)}
/* portal shell */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border:0}
.avatar{width:32px;height:32px;border:0;font-size:12px;background:#16233f}
.page{padding:12px 22px 120px}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 26px}.ph h1{font-size:34px}.ph.sm{margin:0 0 18px}
.back{color:var(--muted);font-weight:500}
.tabbar{display:flex;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;padding:10px 6px 24px;background:#0a1224;border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--dim);font-weight:500;min-width:60px}.tabbar a.on{color:var(--cream)}.tabbar svg{width:22px;height:22px}
.side{display:none}.dcol{display:none}
.lh{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin:44px 0 6px}
.rows li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.rows small{display:block;color:var(--dim);font-size:13px}.rows b{font-weight:500}
.resume h2{font-size:26px}
.detail h2{font-size:26px;margin-bottom:6px}.detail .muted{margin-bottom:14px}
.dfoot{display:flex;align-items:center;gap:22px;margin-top:22px}
.dfoot.sticky{position:fixed;left:0;right:0;bottom:78px;padding:14px 22px;background:#0a1224;margin:0}
@media(min-width:900px){
 .app{display:flex}.topbar,.tabbar{display:none}
 .side{display:flex;flex-direction:column;width:220px;flex:none;padding:30px 26px;min-height:100vh;min-height:100dvh;border-right:1px solid var(--line)}
 .side .logo{margin-bottom:44px;max-width:100%;overflow:hidden}
 .side nav{display:flex;flex-direction:column;gap:4px}
 .side .nav{padding:8px 0;color:var(--dim);font-weight:500}.side .nav.on{color:var(--cream)}
 .side .me{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14px}
 .page{flex:1;padding:40px 64px;max-width:1220px}
 .ph h1{font-size:40px}
 .dcol{display:block}
 .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
 .dfoot.sticky{position:static}
}
/* HOME */
.home .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.hnav .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.hnav nav{display:flex;gap:22px;font-size:15px;color:var(--muted)}
.hero{position:relative;overflow:hidden;padding:72px 0 88px}
.stars{position:absolute;inset:0;pointer-events:none}.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#dbe9ff}
.hero .wrap{position:relative}
.hero h1{font-size:44px;line-height:1.08;max-width:13ch;margin-bottom:18px}
.lead{font-size:18px;color:var(--muted);margin-bottom:32px}
.sec{padding-top:56px;padding-bottom:16px}
.sec h2{font-size:15px;font-family:var(--body);font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:22px}
.game .art{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.game .peak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.game .goat{position:absolute;right:-2%;bottom:-8%;width:60%}
.gbody{padding:22px 0 0}.gbody h3{font-size:30px;margin-bottom:8px}.gbody p{color:var(--muted);margin-bottom:14px;max-width:44ch}
.soon{color:var(--dim);margin-top:34px}
.split p{margin-bottom:8px;font-size:18px}.split .muted{font-size:15px}
.foot{padding-top:64px;padding-bottom:48px;color:var(--dim);font-size:13px}
@media(min-width:900px){
 .hero{padding:120px 0 120px}.hero h1{font-size:72px}.lead{font-size:20px}
 .game{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}.gbody{padding:0}.gbody h3{font-size:40px}
 .split{display:grid;grid-template-columns:240px 1fr;align-items:baseline}
 .sec{padding-top:72px}
}
/* SIGN IN */
.signin{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.si{flex:1;padding:28px 24px}.si-in{max-width:380px;margin:0 auto}
.si h1{font-size:34px;margin:72px 0 30px}
.si form{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
input{height:52px;border-radius:12px;border:1px solid rgba(220,232,255,.22);background:transparent;color:var(--cream);padding:0 16px;font:16px var(--body)}
.wide{width:100%}form .btn{margin-top:8px}
.si-alt{text-align:center;font-size:14px;color:var(--dim)}.si-alt a{color:var(--muted)}
.si-note{margin-top:56px;text-align:center;font-size:13px;color:var(--dim)}
.si-art{display:none}
@media(min-width:900px){.signin{flex-direction:row}.si{display:flex;align-items:center;padding:60px}.si .logo{position:absolute;top:36px;left:44px}.si h1{margin-top:0;font-size:40px}
 .si-art{display:block;position:relative;flex:0 0 48%;overflow:hidden}.si-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.si-art .goat{inset:auto;right:6%;bottom:-6%;width:70%;height:auto}}
/* SESSION */
.session{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#0a1224}
.sbar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#0a1224}
.rec{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--bad)}.rec i{width:8px;height:8px;border-radius:50%;background:var(--rec)}
.stitle{flex:1;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sstage{position:relative;flex:1;overflow:hidden}
.gwrap{position:absolute;inset:0}.gwrap img{width:100%;height:100%;object-fit:cover;object-position:top}.gdesk{display:none}
.report{position:absolute;right:16px;bottom:18px;height:50px;padding:0 24px;display:flex;align-items:center;border-radius:999px;background:var(--clay);color:#fff;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.spanel{display:none}
@media(min-width:900px){.sstage{display:flex;justify-content:center;gap:64px;padding:32px;background:#0a1224}
 .gwrap{position:relative;inset:auto;width:440px;border-radius:16px;overflow:hidden}.gphone{display:none}.gdesk{display:block}.report{display:none}
 .spanel{display:block;width:360px;padding-top:10px}.spanel h2{font-size:24px;margin-bottom:12px}.spanel .btn{margin:26px 0 18px}
 .slinks{display:flex;justify-content:center;gap:28px}
 .sbar{padding:14px 28px}}
/* REVIEW */
.seg{display:flex;gap:22px;margin-bottom:6px}.seg a{padding:6px 0;color:var(--dim);font-weight:500;font-size:15px}.seg a.on{color:var(--cream);box-shadow:inset 0 -2px var(--gold)}
.sess li.sel a{box-shadow:inset 3px 0 var(--gold);padding-left:14px}
.rhead h2{font-size:26px}
.bigst{font-size:20px;font-weight:600;margin:10px 0 24px}.bigst span{font-size:15px;font-weight:400;color:var(--muted);margin-left:8px}.bigst.inc{color:var(--warn)}
.nums{display:flex;gap:30px}.nums dt{font-size:13px;color:var(--dim)}.nums dd{font:600 26px var(--body)}
.sect{margin-top:40px}.sect h3{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.sect h3+.kv{margin-bottom:28px}
.tline{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px}
.ev{display:flex;flex-direction:column;font-size:13px}.ev img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:8px}.ev span{color:var(--dim)}
.ev.summit b{color:var(--ok)}.ev.fall b{color:var(--warn)}.ev.best b{color:var(--accent2)}.ev.rep b{color:var(--bad)}.ev.pause b{color:#b4a7ff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:15px}.kv dt{color:var(--dim)}.kv dd{text-align:right}
.rgrid>div:first-child{margin-bottom:40px}
@media(min-width:900px){.rgrid{display:grid;grid-template-columns:300px 1fr;gap:72px}.ph{margin-bottom:30px}
 .tline{grid-template-columns:repeat(6,1fr)}.ev img{aspect-ratio:4/3}
 .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px}.rhead .bigst{margin-bottom:20px}.sect{margin-top:34px}.nums{gap:44px}}
/* GUIDE */
.guide h1{font-size:34px;margin:8px 0 10px}
.guide section{margin-top:36px}.guide h2{font-size:22px;margin-bottom:12px}
.num{counter-reset:n}.num li{padding:7px 0;color:var(--muted)}.num b{color:var(--cream);font-weight:600}
.sev li{display:flex;align-items:baseline;gap:12px;padding:7px 0;color:var(--muted)}.sev i{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px)}.sev b{color:var(--cream);font-weight:600;min-width:96px}
.port{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:#111d38;color:var(--cream);border:1px solid rgba(220,232,255,.12);border-radius:16px;padding:24px;margin-bottom:24px}.port svg{width:26px;height:26px}
.port small{display:block;color:var(--dim);font-size:13px}.port b{font-size:17px}
.nums.dark{width:100%;margin-top:10px}.nums.dark dt{color:var(--dim)}
@media(min-width:900px){.ggrid{display:grid;grid-template-columns:1.2fr 1fr;gap:96px}.guide h1{font-size:40px}.record{padding-top:16px}}
.logo{white-space:normal}.logo > span{white-space:nowrap}
.hnav nav{display:none}
@media(min-width:900px){.hnav nav{display:flex}.side{background:transparent;gap:0;width:220px}.side a.nav{padding:9px 0;border-radius:0}.side a.nav.on{background:none;color:var(--cream);font-weight:600}.side .logo{padding:0}.side .me{border:0;padding:0}}
:root{--night:#0a1224;--night2:#0d1730;--panel:#111d38;--panel2:#16233f;--cream:#e8eef8;--muted:#a9b6cc;--dim:#8796b2;
 --accent:#2563eb;--accent2:#7cc4ff;--gold:#7cc4ff;--clay:#2563eb;--moss:#34d399;--ok:#6ee7a8;--warn:#fbbf77;--bad:#ff8a8a;--rec:#ff6b6b;
 --display:"Inter Tight","Inter",system-ui,sans-serif}
html,body{background:var(--night);color:var(--cream)}
h1,h2,h3{font-family:var(--display);font-weight:650;letter-spacing:-.02em}
.btn-p{background:var(--accent);color:#fff}
.link{color:var(--accent2)}
.ex{color:var(--accent2)}
.ck.on .box::after{border-color:#0a1224}
.ck.on .box{background:#34d399;border-color:#34d399}
.bar{background:#1b2a4a}.bar i{background:var(--accent2)}
.report{background:var(--accent)}
.seg a.on{box-shadow:inset 0 -2px var(--accent2)}
.sess li.sel a{box-shadow:inset 3px 0 var(--accent2)}
.hero{background:radial-gradient(900px 500px at 80% 0%,rgba(37,99,235,.18),transparent 70%)}
.stars i{background:#dbe9ff}
.build h2{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.12em;margin:56px 0 10px}
.build li{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid rgba(220,232,255,.10)}
.build li:last-child{border-bottom:0}.build b{font-size:17px;font-weight:600}.build span{color:var(--muted);font-size:15px}
.hero h1{max-width:15ch}
@media(min-width:900px){.hgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:80px;align-items:center}.build h2{margin-top:0}.hero h1{font-size:60px}}
.si-art{background:radial-gradient(700px 500px at 70% 30%,rgba(37,99,235,.35),transparent 70%),linear-gradient(160deg,#0f1d3d,#081022)}
.si-cap{position:absolute;left:56px;bottom:56px;display:flex;flex-direction:column}.si-cap b{font:650 34px var(--display);letter-spacing:-.02em}
.session .sbar{background:#0a1224;border-bottom:1px solid rgba(220,232,255,.08)}
@media(min-width:900px){.sstage{background:#0a1224}}
.port{background:#111d38}
.avatar{color:var(--accent2)}
.hnav{background:transparent;border:0;position:relative;z-index:2}
body.home{background:radial-gradient(1000px 560px at 80% 0%,rgba(37,99,235,.18),transparent 70%),var(--night);background-repeat:no-repeat}
.hero{background:none}
@media(min-width:900px){.sbar>.link{display:none}}
.ver{font:500 12px var(--mono);color:var(--accent2);background:rgba(124,196,255,.10);padding:2px 7px;border-radius:6px}
.hint{font-size:14px;color:var(--dim);margin-top:14px}
/* pass/fail checklist */
.cl2{margin:8px 0}
.ck2{display:flex;align-items:center;gap:14px;padding:10px 0;font-size:16px;min-height:44px}
.ck2 .ic{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;border:1.5px solid rgba(220,232,255,.3);color:#0a1224}
.ck2.pass{color:var(--muted)}.ck2.pass .ic{background:#34d399;border-color:#34d399}
.ck2.fail .ic{background:#ff8a8a;border-color:#ff8a8a}
.ck2.block .ic{background:#fbbf77;border-color:#fbbf77}
.ck2 small{display:block;font-size:13px;color:var(--bad)}.ck2.block small{color:var(--warn)}
.ck2.cur{flex-direction:column;align-items:stretch;gap:10px;padding:14px;margin:6px -14px;border-radius:14px;background:rgba(124,196,255,.07)}
.ck2.cur .res{font-weight:600}
.pfb{display:flex;gap:8px}.pfb a{flex:1;text-align:center;height:38px;line-height:36px;border-radius:10px;border:1px solid rgba(220,232,255,.18);font-size:14px;font-weight:600}
.pfb .p{color:var(--ok)}.pfb .f{color:var(--bad)}.pfb .b{color:var(--warn)}
.retest{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding:14px 16px;border-radius:14px;background:rgba(124,196,255,.08)}
.retest small{display:block;color:var(--muted);font-size:13px}.retest .go{font-size:24px;color:var(--accent2)}
.lh.top{margin-top:0}
/* report */
.report-page{min-height:100vh;min-height:100dvh}
.rbar{display:flex;align-items:center;gap:14px;padding:16px 22px}.rbar b{flex:1;font-size:17px}.rbar .x{color:var(--muted);font-size:18px}
.rform{padding:6px 22px 120px}
.fl{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted);margin-bottom:22px}.fl .dim{font-size:13px}
textarea{border-radius:12px;border:1px solid rgba(220,232,255,.22);background:transparent;color:var(--cream);padding:12px 14px;font:16px/1.5 var(--body);resize:none}
.sevpick{display:flex;gap:6px}.sevpick a{flex:1;text-align:center;height:40px;line-height:38px;border-radius:10px;border:1px solid rgba(220,232,255,.16);color:var(--cream);font-size:14px}
.sevpick a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.steps2{padding-left:20px;color:var(--cream);font-size:15px}.steps2 li{padding:5px 0}.steps2 li::marker{color:var(--dim)}
.rside{border-top:1px solid rgba(220,232,255,.10);padding-top:18px}
.rside .fl{margin-bottom:12px}
.shot{width:120px;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:12px;display:block}
.kv.tight{gap:6px 18px;font-size:14px}.kv .err{color:var(--bad)}
.console{font:12px/1.5 var(--mono);color:#ffb4b4;background:#0f1a33;border-radius:10px;padding:10px 12px;margin-top:12px;white-space:pre-wrap}
.rsend{position:fixed;left:0;right:0;bottom:0;padding:14px 22px 26px;background:#0a1224;border-top:1px solid rgba(220,232,255,.08)}
@media(min-width:900px){
 .rbar{max-width:1040px;margin:0 auto;padding:32px 24px 8px}.rbar b{font-size:24px;font-family:var(--display)}
 .rform{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:20px 72px;padding:20px 24px 40px}
 .rside{border:0;padding-top:0}.shot{width:100%;aspect-ratio:4/3}
 .rsend{position:static;padding:0;border:0;background:none;max-width:260px}
}
/* bugs */
.num{color:var(--dim);font-weight:500;margin-right:2px}
.sevf{display:inline-block;font-size:14px;color:var(--muted);margin:2px 0 6px}
.st.prog{color:var(--accent2)}.st.fixed{color:#c4b5fd}.st.closed{color:var(--dim)}.st.new{color:var(--muted)}
.bug h2{font-size:26px;margin-bottom:16px}.bug h3{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin:22px 0 8px}
.flow{display:flex;list-style:none;gap:4px;margin-bottom:16px}
.flow li{flex:1;font-size:12px;color:var(--dim);padding-top:8px;border-top:3px solid #1b2a4a}
.flow li.done{border-color:var(--accent2);color:var(--muted)}.flow li.now{border-color:#c4b5fd;color:var(--cream);font-weight:600}
.callout{font-size:15px;color:var(--cream);background:rgba(196,181,253,.10);border-radius:12px;padding:12px 14px;margin-bottom:18px}
.bugcols .shot{width:100%;max-width:220px;aspect-ratio:4/3}
.bact{display:flex;align-items:center;gap:22px;margin-top:22px}
.dfoot.col{flex-direction:column;align-items:stretch;gap:10px}.dfl{display:flex;justify-content:center;gap:26px;font-size:14px}
/* testers */
.invite input{height:52px;border-radius:12px;border:1px solid rgba(220,232,255,.22);background:transparent;color:var(--cream);padding:0 16px;font:16px var(--body)}
.invite .btn{margin-top:4px}
.invite{margin-bottom:40px}
.sub1{margin:-16px 0 26px}
@media(min-width:900px){.bugcols{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.bugcols h3{margin-top:22px}.bugsl small{font-size:12.5px}.bug .kv{max-width:520px}.bug h2{font-size:28px}.callout{max-width:520px}.flow{max-width:560px}}
.st{white-space:nowrap}
.rmain .kicker{margin-bottom:14px}
@media(min-width:900px){.bug{max-width:660px}.bug .kv,.callout,.flow{max-width:none}.bugcols{grid-template-columns:1fr 240px}.bugcols .shot{max-width:none}}
.logo > span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.logo em{display:block;font-style:normal;font:500 11px/1.2 var(--body);color:var(--accent2);margin:3px 0 0;letter-spacing:.02em}
.projsw{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 28px}
.projsw a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(220,232,255,.16);font-size:14px;color:var(--muted)}
.projsw a.on{background:rgba(124,196,255,.12);border-color:rgba(124,196,255,.4);color:var(--cream);font-weight:600}
.projsw .ex{font-size:10px}
.sevpick.two a{flex:0 0 auto;padding:0 18px}
.picks{display:flex;gap:8px;flex-wrap:wrap}.pk{height:38px;line-height:36px;padding:0 14px;border-radius:10px;border:1px solid rgba(220,232,255,.16);color:var(--cream);font-size:14px}.pk.on{border-color:var(--accent2);color:var(--accent2)}
.row2{display:flex;justify-content:space-between;align-items:baseline}
.sevf{margin-right:18px}
/* home work list */
.works .work{display:flex;flex-direction:column;gap:18px}
.wart{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden}.wart .peak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.wart .goat{position:absolute;right:0;bottom:-10%;width:52%}
.work h3{font-size:24px;margin-bottom:6px}.work p{color:var(--muted);margin-bottom:10px}
@media(min-width:900px){.works .work{display:grid;grid-template-columns:420px 1fr;gap:40px;align-items:center}}
/* brand art */
.si-art .bigstar{position:absolute;width:220px;height:220px;left:50%;top:42%;transform:translate(-50%,-50%);opacity:.9;filter:drop-shadow(0 0 40px rgba(124,196,255,.35))}
.logo svg{flex:none}
.projsw{flex-wrap:nowrap;overflow:hidden}.projsw a{white-space:nowrap;flex:none}
@media(max-width:899px){.projsw a{padding:0 13px;font-size:13px}}
/* ===== Light studio palette (v5) ===== */
:root{
 --bg:#faf9f6;--surface:#f2f0eb;--ink:#16161a;--ink2:#55555c;--ink3:#6b6b72;--hair:#e4e1da;--hair2:#d6d2c9;
 --ember:#a5401a;--ok:#17784a;--warn:#9a5800;--bad:#b42318;--info:#2f5f9e;--violet:#6b46c1;
 --night:var(--bg);--night2:var(--bg);--panel:var(--surface);--panel2:#ebe8e1;--cream:var(--ink);--muted:var(--ink2);--dim:var(--ink3);
 --accent:var(--ember);--accent2:var(--ember);--gold:var(--ember);--clay:var(--ink);--moss:var(--ok);--rec:var(--bad);
 --line:var(--hair);--line2:var(--hair2);
 --display:"Inter Tight","Inter",system-ui,sans-serif}
html,body,body.home{background:var(--bg);color:var(--ink)}
h1,h2,h3{font-weight:600;letter-spacing:-.025em}
.btn-p{background:var(--ink);color:#fff}
.btn-s{border-color:var(--hair2);color:var(--ink)}
.link{color:var(--ember)}
.logo em{color:var(--ember)}
.ex{color:var(--ember);opacity:1}
.stub{background:rgba(165,64,26,.07);border:1px dashed var(--ember);color:var(--ember)}
.avatar{background:var(--surface);color:var(--ink)}
.tabbar{background:var(--bg);border-top:1px solid var(--hair)}.tabbar a{color:var(--ink3)}.tabbar a.on{color:var(--ink)}
.side .nav{color:var(--ink3)}.side .nav.on,.side a.nav.on{color:var(--ink)}
.dfoot.sticky,.rsend{background:var(--bg);border-top:1px solid var(--hair)}
input,textarea,.invite input{border:1px solid var(--hair2);background:#fff;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#8a8a90}
.bar{background:var(--hair)}.bar i{background:var(--ink)}
.ck .box{border-color:var(--hair2)}.ck.on .box{background:var(--ok);border-color:var(--ok)}.ck.on .box::after{border-color:#fff}
.ck2 .ic{border-color:var(--hair2);color:#fff}
.ck2.pass .ic{background:var(--ok);border-color:var(--ok)}.ck2.fail .ic{background:var(--bad);border-color:var(--bad)}.ck2.block .ic{background:var(--warn);border-color:var(--warn)}
.ck2.cur{background:var(--surface)}
.pfb a{border-color:var(--hair2);background:#fff}
.retest{background:var(--surface)}.retest .go{color:var(--ink)}
.ver{color:var(--ink2);background:var(--surface)}
.sevpick a{border-color:var(--hair2);color:var(--ink);background:#fff}.sevpick a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.console{background:var(--surface);color:var(--bad)}
.st.prog{color:var(--info)}.st.fixed{color:var(--violet)}
.flow li{border-top-color:var(--hair)}.flow li.done{border-color:var(--ink);color:var(--ink2)}.flow li.now{border-color:var(--ember);color:var(--ink)}
.callout{background:var(--surface);color:var(--ink)}
.projsw a{border-color:var(--hair2);color:var(--ink2)}.projsw a.on{background:var(--ink);border-color:var(--ink);color:#fff}.projsw a.on .ex{color:#fff}
.pk{border-color:var(--hair2);color:var(--ink);background:#fff}.pk.on{border-color:var(--ink);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--ink)}
.seg a.on{color:var(--ink);box-shadow:inset 0 -2px var(--ink)}
.sess li.sel a{box-shadow:inset 3px 0 var(--ember)}
.ev.best b{color:var(--info)}.ev.pause b{color:var(--violet)}
.port{background:var(--surface);color:var(--ink);border:0}
.report{background:var(--ink);box-shadow:0 6px 18px rgba(22,22,26,.25)}
.session,.session .sbar{background:var(--bg)}.session .sbar{border-bottom:1px solid var(--hair)}
@media(min-width:900px){.sstage{background:var(--surface)}}
.rside{border-top-color:var(--hair)}
.si-art{background:var(--surface)}
.si-art .bigstar{filter:none;opacity:1;width:180px;height:180px}
.si-cap b{color:var(--ink)}
/* ===== HOME (studio pattern) ===== */
.h5 .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.hn .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.hn nav{display:none}
.hn .cta{height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center}
.hx{padding:64px 0 72px}
.hx h1{font-size:46px;line-height:1.04;letter-spacing:-.035em;max-width:14ch;margin-bottom:20px}
.hx p{font-size:19px;color:var(--ink2);max-width:34ch;margin-bottom:32px}
.hsec{border-top:1px solid var(--hair);padding:40px 0 48px}
.hsec>.wrap>h2,.hsec h2.lab{font:600 14px var(--body);letter-spacing:0;color:var(--ink3);margin-bottom:20px}
.svc{list-style:none;counter-reset:s}
.svc li{display:grid;grid-template-columns:36px 1fr;gap:4px 8px;padding:18px 0;border-bottom:1px solid var(--hair)}
.svc li:first-child{padding-top:0}.svc li:last-child{border-bottom:0}
.svc li::before{counter-increment:s;content:"0" counter(s);font:500 13px var(--mono);color:var(--ember);padding-top:6px;grid-row:span 2}
.svc b{font:600 22px/1.25 var(--display);letter-spacing:-.02em}.svc span{color:var(--ink2);font-size:16px}
.wk .art{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#1d2a3a}
.wk .art .peak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.wk .art .goat{position:absolute;right:-2%;bottom:-10%;width:58%}
.wk h3{font-size:28px;margin:22px 0 6px}.wk p{color:var(--ink2);margin-bottom:12px;max-width:40ch}
.wk .tag{font-size:13px;color:var(--ink3);margin-top:22px;display:block}
.soon2{color:var(--ink3);margin-top:28px;font-size:15px}
.tst p{font-size:18px;margin-bottom:10px;max-width:44ch}
.ct .big{font:600 38px/1.08 var(--display);letter-spacing:-.03em;margin-bottom:18px;max-width:14ch}
.ct .mail{font-size:20px}
.ft{border-top:1px solid var(--hair);padding:24px 0 40px;font-size:13px;color:var(--ink3)}.ft .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(min-width:900px){
 .hn nav{display:flex;gap:32px;font-size:15px;color:var(--ink2)}
 .hn .right{display:flex;align-items:center;gap:36px}
 .hx{padding:112px 0 120px}.hx h1{font-size:84px;max-width:15ch;margin-bottom:28px}.hx p{font-size:22px}
 .hsec{padding:56px 0 72px}
 .hsec .grid{display:grid;grid-template-columns:280px 1fr;gap:48px}
 .hsec h2.lab{margin:0}
 .svc li{grid-template-columns:56px 1fr 1.1fr;align-items:baseline;padding:24px 0}.svc li::before{grid-row:auto;padding:0}
 .svc b{font-size:28px}.svc span{font-size:17px}
 .wk{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}.wk .art{aspect-ratio:16/11}.wk h3{font-size:36px;margin-top:0}
 .ct .big{font-size:56px}
}
/* ===== production additions (forms, a11y, states) ===== */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button.btn{border:1px solid transparent}button.btn-p{background:var(--ink);color:#fff}button.btn-s{border-color:var(--hair2);color:var(--ink);background:transparent}
button.link{padding:0;font-weight:600;color:var(--ember)}button.link.quiet{color:var(--ink2);font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
fieldset{border:0;min-width:0}legend{padding:0;margin-bottom:8px}
fieldset.fl{display:flex;flex-direction:column;gap:0}
.inl{display:inline}
.err{color:var(--bad);font-size:15px;margin:0 0 16px}
.si .err{margin:-12px 0 22px}
.notice{background:var(--surface);border-radius:12px;padding:12px 16px;margin:0 0 22px;font-size:15px;color:var(--ink)}
.notice.warn{color:var(--warn);background:rgba(154,88,0,.07)}
.empty{padding:16px 0}
/* progress widths (no inline styles under CSP) */
.bar i.w0{width:0}.bar i.w5{width:5%}.bar i.w10{width:10%}.bar i.w15{width:15%}.bar i.w20{width:20%}.bar i.w25{width:25%}.bar i.w30{width:30%}.bar i.w35{width:35%}.bar i.w40{width:40%}.bar i.w45{width:45%}.bar i.w50{width:50%}.bar i.w55{width:55%}.bar i.w60{width:60%}.bar i.w65{width:65%}.bar i.w70{width:70%}.bar i.w75{width:75%}.bar i.w80{width:80%}.bar i.w85{width:85%}.bar i.w90{width:90%}.bar i.w95{width:95%}.bar i.w100{width:100%}
/* severity dots */
.sev i.d-blocker{background:var(--bad)}.sev i.d-major{background:var(--warn)}.sev i.d-minor{background:var(--info)}.sev i.d-polish{background:var(--ink3)}
/* pass/fail/blocked as forms */
.pfb form{flex:1;display:flex}.pfb button{flex:1;height:38px;border-radius:10px;border:1px solid var(--hair2);background:#fff;font-size:14px;font-weight:600}
.pfb .p{color:var(--ok)}.pfb .f{color:var(--bad)}.pfb .b{color:var(--warn)}
/* radio/checkbox pickers styled as in mockups */
.sevpick label{flex:1;position:relative}.sevpick.two label{flex:0 0 auto}
.sevpick input,.picks input{position:absolute;opacity:0;width:1px;height:1px}
.sevpick label span{display:block;text-align:center;height:40px;line-height:38px;border-radius:10px;border:1px solid var(--hair2);color:var(--ink);background:#fff;font-size:14px;cursor:pointer}
.sevpick.two label span{padding:0 18px}
.sevpick input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.sevpick input:focus-visible+span,.picks input:focus-visible+span{outline:2px solid var(--ember);outline-offset:2px}
.pk{padding:0;border:0;background:none;height:auto;line-height:normal;position:relative}
.pk span{display:inline-block;height:38px;line-height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--hair2);color:var(--ink);background:#fff;font-size:14px;cursor:pointer}
.pk input:checked+span{border-color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--ink)}
.pk input:checked+span::before{content:"✓ "}
/* selects as quiet filters */
.filt{display:inline-block}
select{font:inherit;color:inherit}
.sevf select{appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:4px 18px 4px 0;font-size:14px;color:var(--ink2);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:right 6px top 55%,right 1px top 55%;background-size:5px 5px;background-repeat:no-repeat}
.filters{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:4px}
.stsel{appearance:none;-webkit-appearance:none;padding:0 22px;height:48px;border-radius:999px;font-weight:600;font-size:16px;border:1px solid var(--hair2);background:#fff;color:var(--ink)}
.stf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.fixin input{height:44px;border-radius:10px;border:1px solid var(--hair2);padding:0 12px;font:15px var(--body);width:200px}
.bact{flex-wrap:wrap}
details.dup summary{list-style:none;cursor:pointer}details.dup summary::-webkit-details-marker{display:none}
details.dup[open] form{display:flex;align-items:flex-end;gap:10px;margin-top:12px}details.dup .fl{margin:0;flex-direction:row;align-items:center;gap:8px}
details.dup input{width:90px;height:40px;border-radius:10px;border:1px solid var(--hair2);padding:0 10px;font:15px var(--body)}
.dfoot form{display:contents}.dfoot.col form{display:block}.dfoot.col form .btn{width:100%}
.dfl form{display:inline}
.rtb{display:flex;gap:10px;margin:18px 0 12px}.rtb form{flex:1}.rtb .btn{width:100%}
.dfoot.col .rtb{margin:0}
/* report */
.stepsbox{border-radius:12px;border:1px solid var(--hair2);background:#fff;color:var(--ink);padding:12px 14px;font:15px/1.7 var(--body);resize:vertical}
.what{color:var(--ink2);margin:-6px 0 16px;max-width:60ch}
/* session iframe */
.gwrap iframe{display:block;width:100%;height:100%;border:0;background:#1d2a3a}
.sbar .inl button{font-size:15px}
.slinks .inl button{font-size:15px}
.spanel .btn-s.wide{width:100%;margin-top:0}
/* account menu on phone */
.mem{position:relative}.mem summary{list-style:none;cursor:pointer}.mem summary::-webkit-details-marker{display:none}
.mem .menu{position:absolute;right:0;top:42px;z-index:20;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:14px 16px;min-width:200px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(22,22,26,.08)}
.me .so{display:block}.me .so button{font-size:13px;padding:0}
.me span{display:flex;flex-direction:column}
/* copy rows */
.copyrow{display:flex;gap:10px;align-items:center;margin-top:12px}.copyrow input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid var(--hair2);background:#fff;padding:0 12px;font:14px var(--mono);color:var(--ink)}
.invlink{margin-top:22px;padding:16px;border-radius:12px;background:var(--surface)}.invlink p{font-size:14px;color:var(--ink2)}
.rows .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair)}
.pubrec .si-in{max-width:460px}.pubrec h1{margin:56px 0 24px}
/* home */
.ct .mail .link{font-size:20px}
form>.btn:not(.wide){align-self:flex-start}
.invite{display:flex;flex-direction:column;gap:0}
.rows .row>span:first-child{min-width:0;overflow-wrap:anywhere}
.sbar>.inl{flex:none}.sbar .inl button{line-height:1.2}
@media(min-width:900px){.sbar>.inl{display:none}}
.invite .fl{margin-bottom:22px}
.dfoot.col{gap:10px}
/* ===== contact form (/start) ===== */
.row{display:flex;flex-direction:column;gap:22px}
.cf{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.cf .hn{border-bottom:1px solid var(--hair)}
.cfw{flex:1;max-width:1120px;width:100%;margin:0 auto;padding:28px 24px 120px}
.cfh h1{font:600 34px/1.08 var(--display);letter-spacing:-.03em;margin-bottom:10px}
.cfh p{color:var(--ink2);font-size:16px;max-width:36ch}
.pg{margin:26px 0 30px}.pg .t{display:flex;justify-content:space-between;font-size:14px;color:var(--ink3);margin-bottom:10px}.pg .t b{color:var(--ink);font-weight:600}
.pg .bar{height:4px}
.steps{display:none}
.fset{border:0;display:flex;flex-direction:column;gap:22px}
.fset h2{font:600 22px var(--display);letter-spacing:-.02em;margin-bottom:-4px}
.f{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--ink);font-weight:500}
.f small{font-weight:400;color:var(--ink3);font-size:13px}
.f input,.f textarea{height:50px;border-radius:10px;border:1px solid var(--hair2);background:#fff;padding:0 14px;font:16px var(--body);color:var(--ink)}
.f textarea{height:auto;padding:12px 14px;resize:none}
.opt{display:flex;flex-direction:column;gap:8px}
.opt span{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;border:1px solid var(--hair2);border-radius:10px;background:#fff;font-weight:500}
.opt span i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair2);flex:none}
.opt span small{margin-left:auto}
.opt span.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.opt span.on i{border:5px solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{height:40px;line-height:38px;padding:0 15px;border:1px solid var(--hair2);border-radius:999px;background:#fff;font-size:14px;font-weight:500}
.chips span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cfbar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px 26px;background:var(--bg);border-top:1px solid var(--hair)}
.cfbar .btn{flex:1;max-width:none}.cfbar .back{flex:none;font-weight:500;color:var(--ink2)}
.exn{font:600 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
.ok{max-width:520px}.ok .mark{width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;margin:40px 0 26px}
.ok h1{font:600 38px/1.06 var(--display);letter-spacing:-.03em;margin-bottom:14px}.ok p{color:var(--ink2);font-size:17px;margin-bottom:10px}
.ok dl{margin:30px 0;border-top:1px solid var(--hair)}.ok dl div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px}.ok dt{color:var(--ink3)}
@media(min-width:900px){
 .cfw{display:grid;grid-template-columns:320px 1fr;gap:96px;padding:72px 24px 72px}
 .cfh h1{font-size:48px}
 .pg{display:none}
 .steps{display:block;list-style:none;margin-top:44px;counter-reset:s}
 .steps li{display:flex;gap:14px;align-items:center;padding:11px 0;color:var(--ink3);font-size:15px}
 .steps li::before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;border:1px solid var(--hair2);display:grid;place-items:center;font:600 12px var(--body)}
 .steps li.done::before{content:"✓";background:var(--surface);border-color:var(--surface);color:var(--ink)}
 .steps li.now{color:var(--ink);font-weight:600}.steps li.now::before{background:var(--ink);border-color:var(--ink);color:#fff}
 .fbody{max-width:620px}
 .fset h2{font-size:28px}
 .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
 .opt.grid{display:grid;grid-template-columns:1fr 1fr}
 .cfbar{position:static;padding:34px 0 0;border:0;justify-content:flex-start}.cfbar .btn{flex:none;padding:0 32px}.cfbar .back{order:-1;margin-right:12px}
 .okw{grid-template-columns:1fr;max-width:720px}.ok .mark{margin-top:0}.ok h1{font-size:52px}
}
/* real inputs for the mockup's option cards and chips */
.opt label{position:relative;display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;border:1px solid var(--hair2);border-radius:10px;background:#fff;font-weight:500;cursor:pointer}
.opt label i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair2);flex:none}
.opt input,.chips input{position:absolute;opacity:0;width:1px;height:1px}
.opt label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.opt label:has(input:checked) i{border:5px solid var(--ink)}
.opt label:has(input:focus-visible),.chips label:has(input:focus-visible) span{outline:2px solid var(--ember);outline-offset:2px}
.chips label{position:relative;cursor:pointer}
.chips label span{display:inline-block;height:40px;line-height:38px;padding:0 15px;border:1px solid var(--hair2);border-radius:999px;background:#fff;font-size:14px;font-weight:500}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.fset legend{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:8px;padding:0}
.fset fieldset.f{border:0;margin:0;padding:0;min-width:0}
.f legend small{margin-left:6px}
.cff{display:flex;flex-direction:column;gap:22px;margin:0}
.step{display:flex;flex-direction:column;gap:22px;border:0;padding:0;margin:0 0 36px;min-width:0}
.step>h2{font:600 22px var(--display);letter-spacing:-.02em;margin-bottom:-4px}
.branch>h3{font:600 16px var(--body);color:var(--ink2)}
.js .step{display:none;margin:0}.js .step.on{display:flex}
.js .branch{display:none}.js .branch.on{display:flex}
.branch{display:flex;flex-direction:column;gap:22px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ferr{color:var(--bad);font-size:14px;font-weight:500}
.f.bad input,.f.bad textarea{border-color:var(--bad)}
.cfbar .nojs-send{flex:1}
.js .cfbar .nojs-send{display:none}
.cfbar .js-only{display:none}.js .cfbar .js-only{display:inline-flex}
.js .cfbar .back.js-only[hidden]{display:none}
.alt{color:var(--ink3);font-size:15px;margin-top:18px}.alt a{color:var(--ink2)}
.pg .bar i{transition:width .2s}
.ok dd{text-align:right}
.ct .btn{margin-top:4px}
.ct .alt{margin-top:22px}
@media(min-width:900px){.step>h2{font-size:28px}.cfbar .nojs-send{flex:none;padding:0 32px}}
.js .nojs-h{display:none}
.answers h3{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin:22px 0 6px}
.answers p{white-space:pre-wrap;max-width:62ch}
.inb h2 .dim{font-weight:500}
.rows li.unread b{font-weight:700}
@media(max-width:899px){.tabbar a{min-width:0;flex:1}}
.opt label{flex-direction:row;justify-content:flex-start;color:var(--ink);font-size:15px}
.chips label{display:inline-block}
.f .lt{display:block}.f .lt small{margin-left:6px}
@media(max-width:899px){.inbx .rdet{display:none}}
/* ===== tap / focus / selection: no browser blue (keyboard ring only) ===== */
html{-webkit-tap-highlight-color:transparent}
*{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.sevpick input:focus-visible+span,.picks input:focus-visible+span,.pk input:focus-visible+span,.opt label:has(input:focus-visible),.chips label:has(input:focus-visible) span{outline:2px solid var(--ink);outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:none}
input:focus,textarea:focus,.f input:focus,.f textarea:focus,.stepsbox:focus,.copyrow input:focus,.fixin input:focus,details.dup input:focus,.stsel:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
.sevf select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input,textarea,select{accent-color:var(--ink);caret-color:var(--ink)}
::selection{background:rgba(165,64,26,.18);color:var(--ink)}
input:-webkit-autofill,textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:var(--ink)}
/* gentle pressed state */
a,button,label,summary{transition:opacity .12s ease}
/* pressed state: see v14 block at the end */
/* (pressed state for links: v14 block) */
/* a11y: real headings styled as before */
h1.stitle{font:400 14px/1.4 var(--body);letter-spacing:0;margin:0;color:var(--muted)}
.rbar h1{flex:1;font:700 17px/1.3 var(--body);letter-spacing:0;margin:0}
@media(min-width:900px){.rbar h1{font-size:24px;font-family:var(--display);letter-spacing:0}}
h2.lh{font:600 13px var(--body);letter-spacing:.1em}
[tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
input::placeholder,textarea::placeholder{color:#6b6b72;opacity:1}
.cfbar .home-back{flex:none;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.cfbar .home-back[hidden]{display:none}
@media(min-width:900px){.cfbar .home-back{order:-1;margin-right:12px}}
/* Goated App card art (approved v2 B) */
.wk .art{aspect-ratio:16/10;background:#1d3a4a}
.wk .art picture{display:block;width:100%;height:100%}
.wk .art .card{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.wk .art{aspect-ratio:16/10}}
/* header sign-in + client work */
.hn .right{display:flex;align-items:center;gap:16px}
.hn .hsign{font-size:14px;line-height:1;color:var(--ink2);display:inline-flex;align-items:center;height:38px}
.hn .hsign:hover{color:var(--ink)}
@media(min-width:900px){.hn .right{gap:28px}.hn .hsign{font-size:14px}}
.ft a{color:var(--ink3);display:inline-flex;align-items:center;min-height:24px}.ft a:hover{color:var(--ink)}
.cwl{list-style:none;display:grid;gap:40px}
.cwl .art{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--surface);margin-bottom:18px}
.cwl .art img{width:100%;height:100%;object-fit:cover;display:block}
.cwl h3{font-size:24px;margin-bottom:4px}
.cwl .cw-built{font-size:14px;color:var(--ink3);margin-bottom:8px}
.cwl p{color:var(--ink2);max-width:44ch;margin-bottom:10px}
@media(min-width:900px){.cwl{grid-template-columns:1fr 1fr;gap:48px 40px}.cwl h3{font-size:28px}}
/* client work: compact cards (small thumbnail) */
.cwl{gap:28px}
.cwl li{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start}
.cwl .art{aspect-ratio:16/10;border-radius:8px;border:1px solid var(--hair);margin:0;background:var(--surface)}
.cwl h3{font-size:18px;line-height:1.25;margin-bottom:2px}
.cwl .cw-built{font-size:13px;margin-bottom:6px}
.cwl p{font-size:15px;margin-bottom:8px}
.cwl .link{font-size:15px}
@media(min-width:900px){
 .cwl{grid-template-columns:1fr 1fr;gap:40px}
 .cwl li{grid-template-columns:1fr;gap:16px}
 .cwl .art{width:180px}
 .cwl h3{font-size:20px}
}
/* projects + GitHub section */
.pt{font-size:28px;margin:0 0 24px}
.pform{max-width:560px;display:flex;flex-direction:column}
.pform input{height:48px;border-radius:12px;border:1px solid var(--hair2);background:#fff;color:var(--ink);padding:0 14px;font:16px var(--body)}
.ghbox{border:0;border-top:1px solid var(--hair);padding:22px 0 0;margin:8px 0 0;min-width:0}
.ghbox legend{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;padding:0 0 4px}
.ghbox>.hint:first-of-type{margin:0 0 16px}
.ghstate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 6px;font-size:15px}
.ghstate p{margin:0;flex-basis:100%}
.ghstate .mono{font-family:var(--mono);font-size:14px}
.ghrep summary{list-style:none;cursor:pointer;display:inline-flex;min-height:24px;align-items:center}.ghrep summary::-webkit-details-marker{display:none}
.ghrep[open]{flex-basis:100%}.ghrep[open] summary{margin-bottom:10px}
.ghstate button.link{min-height:24px}
.hint.ok{color:var(--ok)}.hint.bad{color:var(--bad)}
.ghbtns{margin-top:16px}
.pfoot{margin-top:32px;padding-top:22px;border-top:1px solid var(--hair)}
.ghsend{margin-top:14px}.ghsend .hint{margin-top:8px}
button[disabled]{opacity:.5;cursor:not-allowed}
.projl .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair)}
.projl .row span:first-child{display:flex;flex-direction:column;min-width:0}.projl small{color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph .btn-sm{flex:none}
.mem .menu a{color:var(--ink);font-size:15px}
@media(min-width:900px){.pt{font-size:34px}}
/* issue tracker picker: only the chosen provider's fields show (CSS :has, no script needed) */
.tsel{height:48px;border-radius:12px;border:1px solid var(--hair2);background:#fff;color:var(--ink);padding:0 12px;font:16px var(--body);width:100%}
.tp{display:none}.tp .tkh{margin:0 0 14px}
.ghbox:has(.tsel option[value=""]:checked) .tok{display:none}
.ghbox:has(.tsel option[value="github"]:checked) .tp-github,.ghbox:has(.tsel option[value="gitlab"]:checked) .tp-gitlab,.ghbox:has(.tsel option[value="gitea"]:checked) .tp-gitea,.ghbox:has(.tsel option[value="azure"]:checked) .tp-azure,.ghbox:has(.tsel option[value="jira"]:checked) .tp-jira{display:block}
@supports not selector(:has(*)){.tp{display:block}}
/* Turnstile on /start: sits as the last field of step 4, full width, no extra chrome */
.ts .cf-turnstile{min-height:65px;max-width:100%;overflow:hidden;border-radius:10px}
.ts .ts-h{margin:8px 0 0}
/* signed-in portal footer + site issues */
.pft{margin-top:56px;padding-top:18px;border-top:1px solid var(--hair);font-size:14px}
.pft a{min-height:24px;display:inline-flex;align-items:center}
.sub2{max-width:560px;margin:-8px 0 24px}
.bug h1.sit{font-size:26px;margin-bottom:16px}
.bug h2.lab2,.siu h2.lab2{font:600 13px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin:28px 0 10px}
.pform input.file{height:auto;padding:12px 14px}
.pform .pfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sikv{margin:0 0 8px}
.sih li{padding:12px 0;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:4px}
.sih small{color:var(--ink3);font-size:13px}.sih p{margin:0}
.siu{margin-top:8px}
.bug .shot{margin-top:18px}
@media(min-width:900px){.bug h1.sit{font-size:28px}}
.bug img.shot{max-width:min(100%,520px);border:1px solid var(--hair2);border-radius:12px;display:block}
/* on-brand file picker: the real input stays focusable (visually hidden); its label is the button */
.filepick{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;position:relative}
.fp-in,.pform .fp-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp-btn{cursor:pointer;min-height:44px}
.fp-in:focus-visible+.fp-btn{outline:2px solid var(--ink);outline-offset:3px}
.fp-name{font-size:15px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fp-name.none{color:var(--dim)}
.fp-x{min-height:24px}
#shot-l{display:flex;flex-direction:column;gap:8px}

/* token help (?): inline disclosure under the Token field; hidden when Tracker is None */
.toklab{display:flex;align-items:center;gap:8px}
.toklab label{margin:0}
.thlp{flex:none;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border-radius:999px;border:1px solid var(--hair2);background:#fff;color:var(--ink2);font:600 13px/1 var(--body);cursor:pointer;display:inline-grid;place-items:center;-webkit-tap-highlight-color:transparent}
.thlp:hover{border-color:var(--ink3);color:var(--ink)}
.thlp:focus:not(:focus-visible){outline:none}
.thlp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.thlp[aria-expanded="true"]{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.tokhelp{margin-top:4px;padding:14px 16px;border:1px solid var(--hair);border-radius:12px;background:var(--surface)}
.thp{display:none}
.th-steps{margin:0;padding:0 0 0 1.15em;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink2);line-height:1.45}
.th-steps li::marker{color:var(--ink3);font-weight:600}
.th-link{margin:12px 0 0;font-size:14px}
.ghbox:has(.tsel option[value=""]:checked) .thlp,.ghbox:has(.tsel option[value=""]:checked) .tokhelp{display:none}
.ghbox:has(.tsel option[value="github"]:checked) .thp-github,
.ghbox:has(.tsel option[value="gitlab"]:checked) .thp-gitlab,
.ghbox:has(.tsel option[value="gitea"]:checked) .thp-gitea,
.ghbox:has(.tsel option[value="azure"]:checked) .thp-azure,
.ghbox:has(.tsel option[value="jira"]:checked) .thp-jira{display:block}
/* auth pages: quiet Home link near the logo */
.si-home{display:inline-flex;align-items:center;min-height:24px;margin:0 0 18px;font-size:14px;color:var(--ink3)}
.si-home:hover{color:var(--ink)}
.si .logo{margin-top:0}
@media(min-width:900px){.si .si-home{position:absolute;top:40px;left:44px}.si .logo{top:68px}}

/* footer links group, form confidentiality line, /terms */
.ft .ftl{display:inline-flex;gap:20px;flex-wrap:wrap}
.cfnote{margin:20px 0 0;font-size:13px;line-height:1.5;color:var(--ink3);max-width:560px}
.cfnote a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px;display:inline-flex;min-height:24px;align-items:center}
.legal{padding:48px 0 80px}.legal .wrap{max-width:680px}
.legal h1{font-size:34px;margin:0 0 8px}.legal .upd{color:var(--ink3);font-size:14px;margin:0 0 36px}
.legal h2{font-size:19px;margin:32px 0 8px}.legal p{color:var(--ink2);line-height:1.6;margin:0 0 12px}
@media(min-width:900px){.legal{padding:72px 0 112px}.legal h1{font-size:44px}}

/* /terms v2: section rhythm, numbered labels, readable measure */
.legal{padding:40px 0 64px;counter-reset:lsec}
.legal .wrap{max-width:680px}
.legal .lhead{margin:0 0 8px}
.legal h1{font-size:32px;line-height:1.15;margin:0 0 12px;text-wrap:balance}
.legal .upd{font-size:14px;color:var(--ink3);margin:0 0 32px}
.lsec{counter-increment:lsec;border-top:1px solid var(--hair);padding:28px 0 4px}
.lsec h2{font-size:20px;font-weight:650;line-height:1.3;margin:0 0 10px;text-wrap:balance}
.lsec h2::before{content:counter(lsec,decimal-leading-zero);display:block;font:600 12px/1 var(--body);letter-spacing:.12em;color:var(--ember);margin:0 0 10px}
.lsec p{font-size:16px;line-height:1.6;color:var(--ink2);margin:0 0 14px;max-width:62ch}
.ft .ftl{gap:8px 24px}
@media(max-width:899px){.ft .wrap{flex-direction:column;gap:6px}.ft .ftl a{min-height:44px}}
@media(min-width:900px){.legal{padding:72px 0 112px}.legal h1{font-size:44px}.lsec{padding:32px 0 8px}.lsec h2{font-size:22px}.legal .upd{margin-bottom:40px}}

/* /start confidentiality: muted sentence, clear link on its own line */
.cfnote{font-size:12.5px;line-height:1.5;color:var(--ink3);margin:20px 0 0}
.cflink{margin:2px 0 0}
.cflink a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ember);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cflink a:hover{text-decoration-thickness:2px}

/* /privacy request form */
.h5 .pvw{max-width:620px;padding-top:40px;padding-bottom:72px}
.pvw h1{font-size:32px;line-height:1.15;margin:0 0 12px;text-wrap:balance}
.pvi{font-size:16px;line-height:1.6;color:var(--ink2);margin:0 0 28px;max-width:56ch}
.pvf .f legend{margin-bottom:10px}
.pvf fieldset.f{border:0;margin:0;padding:0;min-width:0}
@media(min-width:900px){.h5 .pvw{padding-top:72px;padding-bottom:112px}.pvw h1{font-size:44px}}

/* admin privacy requests */
.tag{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ember);background:rgba(165,64,26,.08);padding:4px 7px;border-radius:6px;margin-right:4px;vertical-align:1px}
.pvd .kicker .tag{margin:0}
.pvkv{max-width:420px}
.pvact{margin-top:20px}.pvact .hint{margin:0}
.pvdel{color:var(--bad);border-color:rgba(180,35,24,.35)}
.pvnote{margin:0;color:var(--ink2);white-space:pre-wrap;max-width:560px}
.pvlist{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:6px;color:var(--ink2);max-width:560px}
.pvconf{margin-top:28px}.pvconf input{max-width:260px;font-family:var(--mono)}
.pvgo{background:var(--bad)}
.pvst{margin-top:4px}.pvst textarea{border:1px solid var(--hair2);border-radius:12px;padding:12px 14px;font:16px var(--body);background:#fff;color:var(--ink)}
/* Two-step sign-in */
.mfabar{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;border:1px solid var(--hair);border-left:3px solid var(--ember);border-radius:12px;padding:12px 16px;margin:0 0 22px;font-size:15px;color:var(--ink);background:#fff}
.mfabar a{color:var(--ember);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.side .me a.sec,.me .sec{font-size:13px;color:var(--ink3);margin:0;padding:0;display:block;line-height:1.5}
.mfasteps{list-style:none;counter-reset:st;padding:0;margin:8px 0 0}
.mfasteps>li{counter-increment:st;position:relative;padding:0 0 26px 40px;line-height:1.55}
.mfasteps>li::before{content:counter(st);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ember)}
.qrbox{margin:14px 0 12px;padding:12px;background:#fff;border:1px solid var(--hair);border-radius:14px;width:max-content}
.qr{display:block;width:196px;height:196px}
.mkey code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.06em;background:var(--surface);padding:8px 10px;border-radius:8px;display:inline-block;word-break:break-all}
.mfasteps form{margin-top:10px}.mfasteps .btn{margin-top:4px}
.rcodes{list-style:none;padding:0;margin:6px 0 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;max-width:380px;counter-reset:rc}
.rcodes li{counter-increment:rc;display:flex;gap:10px;align-items:baseline;background:#fff;border:1px solid var(--hair);border-radius:10px;padding:9px 12px}
.rcodes li::before{content:counter(rc);font-size:12px;color:var(--ink3);min-width:1.2em}
.rcodes code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.03em}
.mfaon{display:flex;align-items:center;gap:8px;font-weight:600;margin:0 0 14px}.mfaon .dot{width:9px;height:9px;border-radius:50%;background:#2f7d4f}
.doc .mfapol label.chk{display:flex;flex-direction:row;gap:10px;align-items:center;max-width:none;font-weight:500;color:var(--ink);text-align:left;margin:0}.doc .mfapol label.chk input{width:20px;height:20px;margin:0;flex:none}
.mfapol .hint{margin:6px 0 12px}
.side .me a.sec,.me .so button{min-height:24px;display:inline-flex;align-items:center}
.pgback{margin:0 0 14px;min-height:44px}
@media(min-width:900px){.pgback{min-height:24px;margin-bottom:18px}}
.mfahelp .toklab{align-items:flex-start;gap:10px}.mfahelp .toklab p{margin:0;flex:0 1 auto;min-width:0}
.mfahelp .thlp{margin-top:-2px}
.mfahelp .tokhelp{margin:12px 0 0}
.th-sub{margin:14px 0 6px;font:600 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.th-guides{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.th-guides a{display:inline-flex;align-items:center;min-height:32px}
@media(max-width:899px){.th-guides a{min-height:44px}}

/* ===== Shared layout rules (v6): one back control, one title scale, one document layout ===== */
/* Back control: every page, same spot (top of content), same type, 44px tap target on phone. */
.bk{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px;font:500 14px/1.2 var(--body);color:var(--ink3);text-decoration:none}
.bk:hover{color:var(--ink)}
.bk:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.si .bk{align-self:flex-start}
@media(min-width:900px){.bk{min-height:32px;margin-bottom:14px}.si .bk{position:absolute;top:36px;left:44px;margin:0}.si .logo{top:76px}}
/* Page titles: one scale everywhere (the /terms scale). */
.ph h1,.pt,.doc h1,.legal h1,.pvw h1,.guide h1,.ph-greet{font-size:32px;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
@media(min-width:900px){.ph h1,.pt,.doc h1,.legal h1,.pvw h1,.guide h1,.ph-greet{font-size:40px}}
/* Document layout (two-step pages and other focused flows), modelled on /terms. */
.doc{max-width:680px;counter-reset:lsec}
.doc h1{margin:0 0 12px}
.doc .lede{font-size:16px;line-height:1.6;color:var(--ink2);max-width:62ch;margin:0 0 28px}
.doc .lsec:first-of-type{margin-top:0}
.doc .lsec p{margin:0 0 14px}
.doc form label:not(.chk){display:flex;flex-direction:column;align-items:stretch;gap:6px;max-width:none}.doc form label:not(.chk) input{width:100%}
.doc .notice{margin:4px 0 14px}
.acts{display:flex;flex-direction:column;gap:10px;margin:18px 0 8px}
.acts .btn{width:100%;justify-content:center}
@media(min-width:600px){.acts{flex-direction:row;flex-wrap:wrap;align-items:center}.acts .btn{width:auto}}
.doc .mfahelp{margin:0 0 24px}.doc .mfahelp .lede{margin:0}
.doc .qrbox{margin:6px auto 10px;padding:14px;width:max-content}
.doc .qr{width:208px;height:208px}
@media(min-width:600px){.doc .qrbox{margin-left:0}}
.mkey{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px}
.mkey code{flex:1 1 220px;min-width:0;display:block;font:500 15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px 14px;word-break:break-word;user-select:all;color:var(--ink)}
.mkey .btn{flex:none}
.doc .rcodes{max-width:420px;margin:0 0 6px}
.doc .mfaon{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.doc .mfapol .hint{margin:6px 0 0}
/* Slim two-step note: one line on desktop, wraps neatly on phone. */
.mnote{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:8px 6px 8px 14px;border:1px solid var(--hair);border-radius:12px;background:#fff;font-size:14px;line-height:1.45;color:var(--ink2)}
.mnote>svg{flex:none;width:18px;height:18px;color:var(--ember)}
.mnote p{flex:1;margin:0;min-width:0}
.mnote p a{color:var(--ember);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mnote form{flex:none;margin:0}
.mnx{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:10px;font-size:20px;line-height:1;color:var(--ink3);cursor:pointer}
.mnx:hover{color:var(--ink);background:var(--surface)}
.mnx:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media(min-width:900px){.mnx{width:32px;height:32px}}
/* Shared form footer: /start and /privacy use the same bar, Turnstile gap and terms line. */
.cfbar.inl{position:static;padding:34px 0 0;border:0;background:none;justify-content:flex-start}
.cfbar.inl .btn{flex:1}
@media(min-width:900px){.cfbar.inl .btn{flex:none;padding:0 32px}}
.cff .cflink{margin-top:2px}
/* Profile menu on public pages (same component as the portal top bar). */
.hmem .mem summary{display:grid;place-items:center;min-width:44px;min-height:44px}
.hmem .mem .menu{top:48px}
.mem summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}
.mem .menu .so button{min-height:32px;padding:0;font-size:15px;color:var(--ink2)}
.doc .ink{color:var(--ink);font-weight:600}
.cfbar.inl+.cflink{margin-top:20px}
@media(min-width:900px){.h5 .pvw{padding-bottom:72px}}
/* ---------- v7: one site header + one Back slot on every public/auth page ---------- */
.hn{border-bottom:1px solid var(--hair);background:var(--bg)}
.hn .wrap{height:72px}
.bkbar{max-width:680px;margin:0 auto;padding:16px 24px 0;box-sizing:border-box}
.bkbar .bk,.bk{min-height:44px;margin:0}
@media(min-width:900px){.bkbar .bk,.bk{min-height:44px;margin:0}}
/* pages that follow the Back slot start their column right under it */
.bkbar+.legal{padding-top:8px}
.bkbar+.pvw{padding-top:8px}
.bkbar+.hx{padding-top:24px}
.legal .wrap,.h5 .pvw{max-width:680px}
/* auth-style pages: header on top, single column like /terms, no logo block, no split art */
.signin.h5{display:block;min-height:100vh;min-height:100dvh}
.signin.h5 .si{display:block;padding:0 0 72px}
.signin.h5 .si-in{max-width:680px;margin:0 auto;padding:8px 24px 0;box-sizing:border-box}
.signin.h5 .si-in>*:not(h1):not(.si-eb):not(.rcard){max-width:420px}
.signin.h5 .si h1{margin:0 0 24px;font-size:32px;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.si-eb{margin:0 0 8px;font:600 12px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ember)}
.signin.h5 .si-alt{text-align:left}
.signin.h5 .si-note{text-align:left;margin-top:32px}
.signin.h5 .si-art{display:none}
@media(min-width:900px){.signin.h5 .si{display:block;padding:0 0 112px}.signin.h5 .si h1{font-size:40px;margin:0 0 28px}}
/* portal: phone top bar matches the site header (72px + hairline); Back slot same offset as public pages */
.portal .topbar{height:73px;box-sizing:border-box;padding:0 24px;border-bottom:1px solid var(--hair);background:var(--bg)}
.portal .page>.bk:first-child,.portal .page>.bkbar:first-child,.portal .doc>.bk:first-child{display:inline-flex;margin:0 0 8px}
.signin.h5 .si .bk{position:static}
.bkbar+.hx .wrap{max-width:680px}
/* portal Back slot: phone 24px sides like the site; Back at the same x/y as on public pages (phone) and same y (desktop) */
@media(max-width:899px){.portal main.page{padding-left:24px;padding-right:24px}.portal main.page.has-bk{padding-top:16px}}
@media(min-width:900px){.portal main.page.has-bk{padding-top:89px}}
.portal main.page.has-bk>.bk:first-child{display:inline-flex;margin:0 0 8px}
/* /privacy uses the /start bottom bar: fixed on phone (leave room under the footer), inline on desktop */
@media(max-width:899px){.pvp .ft{padding-bottom:128px}}
.pvp .cfbar+.cflink{margin-top:20px}

/* ---------- v8: portal Home ---------- */
.ph-greet{margin:0 0 6px}
.hsecs>section{border-top:1px solid var(--hair);padding:26px 0 8px}
.hsecs h2{font:600 13px var(--body);color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
.hsecs .resume{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--hair);background:#fff;border-radius:14px;padding:14px 16px}
.hsecs .resume b{display:block;font-size:16px;color:var(--ink)}.hsecs .resume small{color:var(--ink3);font-size:13px}
.hsecs .resume .bar{height:4px;background:var(--hair);border-radius:2px;margin-top:8px;width:160px}.hsecs .resume .bar i{display:block;height:4px;width:33%;background:var(--ink);border-radius:2px}
.cards{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:0;padding:0}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards li a{display:block;border:1px solid var(--hair);border-radius:14px;padding:14px 16px;background:#fff;color:var(--ink);height:100%}
.cards li a b{display:block;font-weight:600;margin-bottom:4px}.cards li a small{font-size:13px;color:var(--ink3)}
.cards .stt{float:right;font-size:12px;font-weight:600}.stt.inc{color:#9a5800}.stt.new{color:var(--ink3)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
@media(min-width:900px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tiles a{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);border-radius:14px;padding:14px 16px;background:#fff;color:var(--ink);min-height:96px}
.tiles b{font:600 28px/1 var(--display);letter-spacing:-.02em}.tiles span{font-size:13px;color:var(--ink2);line-height:1.35}
.tiles a.zero b{color:var(--ink3)}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:12px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink)}
.feed li:last-child{border-bottom:0}
.feed time{flex:none;font-size:13px;color:var(--ink3)}
.feed a{color:var(--ink)}
@media(min-width:900px){.hgrid2{display:grid;grid-template-columns:1.3fr 1fr;gap:48px}.hgrid2>section{border-top:1px solid var(--hair);padding:26px 0 8px}}
.hlede{color:var(--ink2);margin:0 0 22px}
.hsecs .resume+.resume{margin-top:10px}
.hsecs .resume form{margin:0;flex:none}
.hsecs .resume .bar i{width:0}
.hsecs .resume .bar i.w0{width:0%}.hsecs .resume .bar i.w1{width:10%}.hsecs .resume .bar i.w2{width:20%}.hsecs .resume .bar i.w3{width:30%}.hsecs .resume .bar i.w4{width:40%}.hsecs .resume .bar i.w5{width:50%}.hsecs .resume .bar i.w6{width:60%}.hsecs .resume .bar i.w7{width:70%}.hsecs .resume .bar i.w8{width:80%}.hsecs .resume .bar i.w9{width:90%}.hsecs .resume .bar i.w10{width:100%}
.tiles span small{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.hsecs .more{margin:12px 0 0;font-size:14px}
.hsecs .empty{margin:0}
.cards .stt.done{color:#17784a}


/* ---------- v9: Profile ---------- */
.meter{display:flex;gap:4px;margin:-6px 0 6px}.meter i{flex:1;height:4px;border-radius:2px;background:var(--hair)}.meter i.on{background:#2f7d4f}
.meterl{font-size:13px;color:#2f7d4f;font-weight:600;margin:0 0 16px}
.devs{list-style:none;margin:0 0 6px;padding:0;border-top:1px solid var(--hair)}
.devs li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink)}
.devs li small{display:block;color:var(--ink3);font-size:13px;margin-top:2px}
.devs .now{font-size:12px;font-weight:600;color:#2f7d4f;white-space:nowrap}
.devs .ago{font-size:13px;color:var(--ink3);white-space:nowrap}
.role{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);background:var(--surface);padding:5px 8px;border-radius:6px;vertical-align:4px;margin-left:8px}
/* deleted accounts */
.dacc{margin-top:44px}
.dacc h2{font:600 13px var(--body);color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;margin:0 0 6px}
.dacc p.hint2{margin:0 0 12px}
.dlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.dlist li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:center}
.dlist .who b{display:block;font-weight:600;color:var(--ink)}.dlist .who small{color:var(--ink3);font-size:13px}
.dlist .when{font-size:13px;color:var(--ink2)}
.dlist .left{font-size:13px;color:var(--ink3)}
.dlist .acts{grid-column:1/-1;margin:4px 0 0;flex-direction:row}
.dlist .acts .btn{width:auto}
@media(min-width:900px){.dlist li{grid-template-columns:1.4fr 1fr 1fr auto}.dlist .acts{grid-column:auto;margin:0}}
.dlink{font-size:13px;color:var(--ink3)}

.pf2{max-width:720px}
.pf-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 0 28px}
.pf-head .who b{display:block;font:600 22px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pf-head .who small{display:block;color:var(--ink3);font-size:14px;margin-top:4px}
.pf-head .role{margin:8px 0 0;vertical-align:0}
.avwrap{position:relative}
.avbtn{position:relative;width:104px;height:104px;border-radius:50%;border:0;padding:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;font:600 34px/1 var(--display);color:var(--ink);cursor:pointer}
.avbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.avbtn .cam{position:absolute;right:0;bottom:0;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg)}
.avbtn .cam svg{width:17px;height:17px}
.avmenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:210px;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 12px 32px rgba(22,22,26,.14);padding:6px;z-index:5;text-align:left}
.avmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;background:none;border-radius:10px;font:500 15px var(--body);color:var(--ink);cursor:pointer}
.avmenu button:hover{background:var(--surface)}
.avmenu button svg{width:18px;height:18px;color:var(--ink2)}
.avmenu .rm{color:var(--bad)}.avmenu .rm svg{color:var(--bad)}
.avmenu small{display:block;padding:8px 12px 6px;font-size:12px;color:var(--ink3);border-top:1px solid var(--hair);margin-top:4px}
.sgrp{margin:0 0 28px}
.sgrp h2{font:600 13px var(--body);color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px}
.sgrp .rows{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--hair);border-radius:16px;overflow:hidden}
.sgrp .rows li+li{border-top:1px solid var(--hair)}
.srow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;width:100%;min-height:64px;padding:12px 16px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.srow:hover{background:#fbfaf7}
.srow:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.srow .lab{font-size:13px;color:var(--ink3);grid-column:1}
.srow .val{font-size:16px;color:var(--ink);grid-column:1;overflow-wrap:anywhere}
.srow .val.none{color:var(--ink3)}
.srow .go{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink2)}
.srow .go svg{width:18px;height:18px;color:var(--ink3)}
.srow.danger .val{color:var(--bad);font-weight:600}
.srow.danger .lab{color:var(--ink3)}
.srow .pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.srow .pill i{width:8px;height:8px;border-radius:50%}
.srow .pill.on{color:#17784a}.srow .pill.on i{background:#17784a}
.srow .pill.off{color:var(--ink2)}.srow .pill.off i{border:1.5px solid var(--ink3)}
.sgrp .after{font-size:14px;color:var(--ink3);margin:10px 4px 0}
.sgrp .after a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){
 .pf-head{flex-direction:row;text-align:left;gap:22px;padding:4px 0 32px}
 .pf-head .avmenu{left:0;transform:none}
 .srow{grid-template-columns:200px 1fr auto;min-height:60px;padding:10px 20px}
 .srow .lab{font-size:15px;color:var(--ink2);grid-row:1}
 .srow .val{grid-column:2;grid-row:1}
 .srow .go{grid-column:3;grid-row:1}
}
/* edit dialog: bottom sheet on phone, centered modal on desktop */
.scrim{position:fixed;inset:0;background:rgba(22,22,26,.42);z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--bg);border-radius:20px 20px 0 0;padding:10px 24px 28px;box-shadow:0 -10px 40px rgba(22,22,26,.18)}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--hair2);margin:0 auto 14px}
.sheet .step{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ember);margin:0 0 8px}
.sheet h2{font:600 22px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.sheet p.sub{color:var(--ink2);font-size:15px;line-height:1.5;margin:0 0 18px}
.sheet .f2{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;font-size:15px;font-weight:500;color:var(--ink)}
.sheet .f2 input{width:100%;height:48px;border:1px solid var(--hair2);border-radius:12px;padding:0 14px;font:400 16px var(--body);background:#fff;color:var(--ink);box-sizing:border-box}
.sheet .f2 input:focus{outline:2px solid var(--ink);outline-offset:1px}
.sheet .who2{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);margin:0 0 16px}
.sheet .who2 .avatar{width:28px;height:28px;font-size:12px}
.sheet .btns{display:flex;flex-direction:column-reverse;gap:10px;margin-top:8px}
.sheet .btns .btn{width:100%}
.sheet .x{position:absolute;top:14px;right:16px;width:44px;height:44px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--ink2);font-size:22px}
.sheet .forgot{display:inline-block;font-size:14px;color:var(--ink2);margin:-6px 0 12px;text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){
 .sheet{left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);width:460px;border-radius:18px;padding:28px 32px 28px;box-shadow:0 24px 64px rgba(22,22,26,.22)}
 .sheet .grab{display:none}
 .sheet .btns{flex-direction:row;justify-content:flex-end}
 .sheet .btns .btn{width:auto;min-width:120px}
}
.srow.one{min-height:56px}.srow.one .val{grid-column:1/-2;grid-row:1}
@media(min-width:900px){.srow.one .val{grid-column:1/3}}
.srow .pill{background:none;padding:0}

details.pop>summary{list-style:none}details.pop>summary::-webkit-details-marker{display:none}
.avbtn{overflow:visible}.avbtn img{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block}
.avmenu .mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;background:none;border-radius:10px;font:500 15px var(--body);color:var(--ink);cursor:pointer;position:relative}
.avmenu .mi:hover,.avmenu .mi:focus-within{background:var(--surface)}
.avmenu .mi svg{width:18px;height:18px;color:var(--ink2)}
.avmenu .mi.rm{color:var(--bad)}.avmenu .mi.rm svg{color:var(--bad)}
.avmenu form{margin:0}
.avmenu .fp-in{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.avmenu .mi:focus-within{outline:2px solid var(--ink);outline-offset:-2px}
.avmenu .nojs-up{margin:4px 12px 6px}
.ui-js .avmenu .nojs-up{display:none}
.avatar.has-img{padding:0;overflow:hidden}.avatar.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
a.srow{text-decoration:none}
.sgrp .after.first{margin-top:0}
.sheet .err{margin:0 0 14px}
.sheet .hint2{font-size:13px;color:var(--ink3);margin:-8px 0 16px;line-height:1.5}
.sheet .f2 select{width:100%;height:48px;border:1px solid var(--hair2);border-radius:12px;padding:0 14px;font:400 16px var(--body);background:#fff;color:var(--ink)}
.sheet .f2 small{font-weight:400;color:var(--ink3);font-size:13px;margin-left:6px}
.sheet .f2 label,.sheet label.f2{align-items:stretch}
.sheet .devs{max-height:46vh;overflow:auto;margin-bottom:12px}
.sheet .devs .dv-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sheet .devs form{margin:0}.sheet .devs .link{min-height:32px}
.sheet .x{text-decoration:none}
.meter i.on{background:#2f7d4f}
.sheet .btn-p.pvdel{background:var(--bad);border-color:var(--bad);color:#fff}
.dacc{margin-top:36px}
.dlist .acts form{margin:0;display:inline-flex}
.dlist .acts{display:flex;gap:8px;flex-wrap:wrap}


.sgrp .rows li a.srow{display:grid;justify-content:normal;gap:4px 12px;padding:12px 16px;border-bottom:0}
.dacc .dlist li{grid-template-columns:1fr auto}.dacc .dlist .meta{grid-column:1;font-size:13px;color:var(--ink3)}.dacc .dlist .acts{grid-column:2;grid-row:1/span 2;margin:0}
@media(max-width:899px){.dacc .dlist .acts{grid-column:1/-1;grid-row:auto}}
/* ---------- v10: ONE shared section component (every page) ----------
   .psec = a section: 1px divider on top, --sec-before from the content above, --sec-above from divider to heading.
   .psec-h = its heading: --sec-head to the first content. Flat markup puts both classes on the heading itself.
   The same gap (--sec-before) separates the last content from the footer divider. */
:root{--sec-line:1px solid var(--hair);--sec-before:40px;--sec-above:32px;--sec-head:16px}
.psec{border-top:var(--sec-line)!important;margin-top:var(--sec-before)!important;padding-top:var(--sec-above)!important;padding-bottom:0!important;margin-bottom:0!important}
.psec-h{margin-bottom:var(--sec-head)!important;line-height:1.25!important}
.psec>.psec-h:first-child,.psec>.wrap>.psec-h:first-child,.psec>.psec-hr:first-child{margin-top:0!important}
.psec>.psec-hr{margin-bottom:var(--sec-head)!important;padding:0!important;border:0!important}
.psec-hr .psec-h{margin:0!important;padding:0!important;border:0!important}
.psec-h+*,.psec-hr+*,.psec-h+[hidden]+*{margin-top:0!important}
*:has(+.psec),*:has(+.pft){margin-bottom:0!important}
.psec>:last-child,.psec>.wrap>:last-child{margin-bottom:0!important}
.pft{margin-top:var(--sec-before)!important}
/* v10 page-level spacing so the shared gaps hold: no hidden padding before a section or the footer */
.pf-head{padding-bottom:0!important}
.hx{padding-bottom:0!important}
.legal,.h5 .pvw{padding-bottom:0!important}
.ft{margin-top:var(--sec-before)!important}
.siu{margin-top:0!important;padding-top:0!important}
.psec-h+ul,.psec-h+ol,.psec-hr+ul,.psec-hr+ol,.psec-h+.cl2{padding-top:0!important;margin-top:0!important}
@media(min-width:900px){.tgrid{margin-top:var(--sec-before)}.tgrid>div>.psec:first-child{margin-top:0!important}*:has(+.tgrid){margin-bottom:0!important}}
.psec-h+.cl2>li:first-child,.psec-h+.list>li:first-child{padding-top:0!important}
@media(min-width:900px){.rgrid>div:first-child{margin-bottom:0!important}.ggrid>*>.psec:first-child{margin-top:0!important}}
@media(max-width:899px){.portal main.page{padding-bottom:136px!important}}
@media(max-width:899px){.portal main.page:has(.dfoot){padding-bottom:200px!important}}

/* ---------- v11: test session fits the visible viewport (Android/iOS dynamic toolbars) ----------
   Recording bar on top (with our Report pill) + game frame filling exactly the rest. No page scroll, nothing floats over the game. */
html:has(body.session){height:100%;overflow:hidden;overscroll-behavior:none}
.session{height:100vh;height:100svh;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
.session.vvh{height:var(--app-h,100vh)}
.session .sbar{flex:none;min-height:60px;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 8px calc(12px + env(safe-area-inset-left,0px))}
.session .stitle{min-width:0}
.session .sstage{flex:1 1 auto;min-height:0;position:relative}
.session .gwrap{position:absolute;top:0;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px)}
.session .sacts{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.session .sacts form{margin:0;display:flex}
.spill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 16px;border-radius:999px;font:600 15px/1 var(--body);white-space:nowrap;cursor:pointer;text-decoration:none;box-sizing:border-box}
.spill svg{width:16px;height:16px;flex:none}
.spill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sp-pause,.sp-resume{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.sp-report{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.session .rec.off{color:var(--ink3)}.session .rec.off i{background:var(--ink3)}
.session .spaused{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center;padding:24px}
.session .spaused .big{font:700 28px/1.2 var(--display);margin:0 0 6px;color:var(--ink)}
.session .spaused p{margin:0;color:var(--ink2);max-width:36ch}
@media(max-width:420px){.session .sbar{gap:8px}.spill{padding:0 12px}}
@media(max-width:380px){.session .rec{font-size:0;gap:0}.session .rec i{width:10px;height:10px}.spill{padding:0 11px;font-size:14px;gap:5px}}
@media(min-width:900px){.session .gwrap{position:relative;top:auto;left:auto;right:auto;bottom:auto}.session .spaused{position:static;margin:auto}}

/* ---------- v11: shared "Continue where you left off" card (Tests + Home) ---------- */
.ccard{display:grid;gap:8px;min-width:0;max-width:100%;box-sizing:border-box;border:1px solid var(--hair);background:#fff;border-radius:14px;padding:16px}
.ccard+.ccard{margin-top:10px}
.ccard-eb{margin:0;font:600 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--ink3)}
.ccard .ccard-t{margin:0;font:600 17px/1.3 var(--body);letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.ccard-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:13px;color:var(--ink3);min-width:0}
.ccard-m .ver{flex:none}
.ccard-bar{width:100%;height:6px;border-radius:3px;background:var(--hair);overflow:hidden}
.ccard-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:3px}
.ccard-bar i.w1{width:10%}.ccard-bar i.w2{width:20%}.ccard-bar i.w3{width:30%}.ccard-bar i.w4{width:40%}.ccard-bar i.w5{width:50%}.ccard-bar i.w6{width:60%}.ccard-bar i.w7{width:70%}.ccard-bar i.w8{width:80%}.ccard-bar i.w9{width:90%}.ccard-bar i.w10{width:100%}
.ccard form{margin:6px 0 0}
.ccard .btn{width:100%}
@media(min-width:900px){.ccard form{display:flex;justify-content:flex-end}.ccard .btn{width:auto}}
/* ---------- v12: Inbox archive ---------- */
.btn svg{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.rows li.hasact{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.rows li.hasact>a{flex:1;min-width:0;border-bottom:0}
.rowarc{display:none}
.rows li.hasact .rowarc{align-items:center;min-height:36px;padding:0 10px;border:1px solid var(--hair2);border-radius:999px;background:transparent;color:var(--ink2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.rows li.hasact .rowarc svg{width:14px;height:14px;margin-right:5px}
.rows li.hasact .rowarc:hover{color:var(--ink);border-color:var(--ink3)}
.archlist li.hasact .rowarc{display:inline-flex;min-height:44px;padding:0 14px}
@media(min-width:900px){.rows li.hasact .rowarc{display:inline-flex}.archlist li.hasact .rowarc{min-height:36px;padding:0 10px}}
.archl{margin:18px 0 0;font-size:14px}
.archh{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:30;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 18px;font-size:15px;box-shadow:0 8px 24px rgba(22,22,26,.18);animation:toastin .2s ease-out}
.toast form{margin:0}.toast .link{color:#fff;font-weight:700;text-decoration:underline;background:none;border:0;padding:0 2px;min-height:32px;font:inherit;cursor:pointer}
@media(max-width:899px){.toast{bottom:calc(92px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}
/* ---------- v12: admin nav (6 phone tabs, grouped sidebar, Inbox unread dot) ---------- */
.tabbar .ti{position:relative;display:inline-flex}
.tabbar .tdot{position:absolute;top:-2px;right:-4px;width:9px;height:9px;border-radius:50%;background:#c2410c;box-shadow:0 0 0 2px var(--bg)}
@media(max-width:899px){.tabbar a{min-height:44px;justify-content:center;padding:0 2px;white-space:nowrap}}
@media(min-width:900px){.side .navg{margin:18px 0 4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}}
.side .navg{display:none}@media(min-width:900px){.side .navg{display:block}}
.morel .srow .lab{font-size:16px;font-weight:600;color:var(--ink);grid-column:1;grid-row:1}
.morel .srow .val{font-size:14px;color:var(--ink3);grid-column:1;grid-row:2}
/* ---------- v13: sheets stay usable with the on-screen keyboard (sizes from assets/ui.js visualViewport) ---------- */
.sheet{max-height:calc(var(--vvh,100dvh) - env(safe-area-inset-top) - 12px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet .btns{position:sticky;bottom:0;z-index:1;background:var(--bg);margin:8px -24px 0;padding:12px 24px calc(16px + env(safe-area-inset-bottom))}
.kb-open .sheet .btns{padding-bottom:12px}
/* room to scroll a page form above the keyboard (the layout viewport doesn't shrink) */
.kb-open body{padding-bottom:var(--kb,0px)}
@media(max-width:899px){
 .sheet{bottom:var(--kb,0px);padding-bottom:0}
 .kb-open .sheet{border-radius:16px 16px 0 0}
}
@media(min-width:900px){
 .sheet{max-height:calc(var(--vvh,100dvh) - 48px)}
 .sheet{padding-bottom:0}.sheet .btns{margin:8px -32px 0;padding:14px 32px 28px}
}
/* ---------- v14: ONE pressed / hover / focus language for every interactive control ----------
   Outlined / white / ghost controls: pressed = warm grey fill (--press, the portal surface tint), border unchanged;
   hover (hover devices only) = a lighter tint. Filled dark controls: pressed = slightly lighter dark, hover between.
   Everything pressed scales to .98 (not with reduced motion). :active fires on touch because the site scripts register
   a passive touchstart listener. Current page (aria-current) on the header Contact pill = inverted (dark fill). */
:root{--press:#f2f0eb;--hover:#f7f6f2;--ink-hover:#26262c;--ink-press:#34343b}
html{-webkit-tap-highlight-color:transparent}
:where(.btn,button,.cta,.hsign,.spill,.rowarc,.tabbar a,.side .nav,.seg a,.mem summary,.avbtn,.rows a,.sess li a,.srow,.tiles a,.chips label span,.opt label,.sevpick label span,.pk span,.report,.link,.bk,.archl a,.mnx,.x){transition:transform .1s ease,background-color .1s ease,color .1s ease,opacity .1s ease}
.hn .cta{background:#fff}
.hn .cta[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* pressed: filled dark */
.btn-p:active,button.btn-p:active,.sp-pause:active,.sp-resume:active,.hn .cta[aria-current=page]:active{background-color:var(--ink-press)!important;border-color:var(--ink-press)!important;transform:scale(.98)}
/* pressed: outlined / white / ghost pills and buttons */
.btn-s:active,button.btn-s:active,.hn .cta:not([aria-current=page]):active,.sp-report:active,.rowarc:active,.hsign:active,.seg a:active,.mem summary:active,.avbtn:active,.chips label:active span,.opt label:active,.sevpick label:active span,.pk:active span,.report:active,.mnx:active,.sheet .x:active,.tabbar a:active{background-color:var(--press)!important;transform:scale(.98)}
.tabbar a:active{border-radius:12px}
/* pressed: tappable rows and cards */
.rows a:active,.sess li a:active,.sgrp .rows li a.srow:active,.tiles a:active,.side .nav:active{background-color:var(--press)!important;transform:scale(.98)}
.link:active,.bk:active,.archl a:active,.toast .link:active{opacity:.6;transform:scale(.98)}
.btn:disabled:active,button:disabled:active{transform:none!important}
@media(hover:hover){
 .btn-p:hover,button.btn-p:hover,.sp-pause:hover,.sp-resume:hover,.hn .cta[aria-current=page]:hover{background-color:var(--ink-hover);border-color:var(--ink-hover)}
 .btn-s:hover,button.btn-s:hover,.hn .cta:not([aria-current=page]):hover,.sp-report:hover,.rows li.hasact .rowarc:hover,.rowarc:hover,.seg a:hover,.mem summary:hover,.avbtn:hover{background-color:var(--hover)}
 .rows a:hover,.sess li a:hover,.sgrp .rows li a.srow:hover,.tiles a:hover{background-color:var(--hover)}
 .side .nav:hover,.hsign:hover{color:var(--ink)}
}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn:focus-visible,.cta:focus-visible,.spill:focus-visible,.rowarc:focus-visible,.seg a:focus-visible{outline-offset:3px}
@media(prefers-reduced-motion:reduce){
 *:active{transform:none!important}
 :where(.btn,button,.cta,.hsign,.spill,.rowarc,.tabbar a,.side .nav,.seg a,.mem summary,.avbtn,.rows a,.sess li a,.srow,.tiles a){transition:background-color .1s ease,color .1s ease}
}

/* v15: sheets = fixed header (title + close) + scrolling body + sticky footer; account-style re-auth. */
.sheet{display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:calc(var(--vvh,100dvh) - env(safe-area-inset-top) - 24px)}
.sheet .sh-hd{flex:none;padding:8px 12px 10px 24px;border-bottom:1px solid transparent}
.sheet .sh-hd .grab{margin:0 auto 8px}
.sheet .sh-tr{display:flex;align-items:flex-start;gap:8px}
.sheet .sh-t{flex:1;min-width:0;padding-top:6px}
.sheet .sh-t h2{margin:0;overflow-wrap:anywhere}
.sheet .sh-t .step{margin:0 0 6px}
.sheet .sh-hd .x{position:static;flex:none;margin:0 -2px 0 0}
.sheet .sh-bd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 24px 0}
.sheet.scrolled .sh-hd{border-bottom-color:var(--hair)}
.sheet .btns{margin:12px -24px 0;padding:12px 24px calc(14px + env(safe-area-inset-bottom));gap:4px}
.kb-open .sheet .btns{padding-bottom:10px}
/* One clear primary; Cancel/Close is a quiet text action. */
.sheet .btns .btn-s{background:none;border-color:transparent;color:var(--ink2);min-height:44px;font-weight:600}
@media(max-width:899px){.sheet .btns .btn-s{width:auto;align-self:center;padding:0 18px}}
@media(hover:hover){.sheet .btns .btn-s:hover{background:var(--hover);border-color:transparent}}
.sheet .btns .btn-s:active{background:var(--press)!important;border-color:transparent}
.sheet .who2{background:#fff;border:1px solid var(--hair);border-radius:999px;padding:4px 14px 4px 4px;width:max-content;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:900px){
 .sheet{padding:0;max-height:calc(var(--vvh,100dvh) - 48px)}
 .sheet .sh-hd{padding:20px 20px 8px 32px}
 .sheet .sh-bd{padding:8px 32px 0}
 .sheet .btns{margin:12px -32px 0;padding:14px 32px 24px;gap:8px}
}
/* Password requirements checklist */
.sheet .pwrules{list-style:none;margin:-6px 0 16px;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink2)}
.pwrules li{display:flex;align-items:center;gap:8px}
.pwrules .pk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair2);box-sizing:border-box;flex:none;display:grid;place-items:center;transition:background-color .12s,border-color .12s}
.pwrules li.ok{color:#17603b}
.pwrules li.ok .pk{background:#2f7d4f;border-color:#2f7d4f}
.pwrules li.ok .pk::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translate(0,-1px) rotate(-45deg)}
.pwrules li.bad{color:var(--bad)}
.pwrules li.bad .pk{border-color:var(--bad)}
@media(prefers-reduced-motion:reduce){.pwrules .pk{transition:none}}
/* Privacy form: calm "no data for this email" note under the Email field */
.fnote{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--surface,#f2f0eb);color:var(--ink);font-size:15px;font-weight:400;line-height:1.5}
.fnote .fni{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink2);color:var(--ink2);display:grid;place-items:center;font:700 12px/1 var(--body);margin-top:2px;box-sizing:border-box}

/* v16: session Time card + vertical Timeline (v3), payments, account pause, pause overlay */
.tb{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--hair);margin:0 0 16px}
.tb i{display:block;height:100%}.tb .a{background:#1f7a4d}.tb .i{background:#d9b25c}.tb .p{background:#c9c6bf}
.trows{list-style:none;margin:0;padding:0;border:1px solid var(--hair);border-radius:14px;background:#fff;overflow:hidden}
.trows li{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:10px;padding:12px 16px;font-size:15px;color:var(--ink)}
.trows li+li{border-top:1px solid var(--hair)}
.trows li.sub{padding:6px 16px 6px 36px;border-top:0;font-size:14px;color:var(--ink2)}
.trows li.sub .sw{visibility:hidden}.trows li.sub b{font-weight:500;color:var(--ink2)}
.trows .sw{width:10px;height:10px;border-radius:3px;margin-top:6px}.trows .sw.a{background:#1f7a4d}.trows .sw.i{background:#d9b25c}.trows .sw.p{background:#c9c6bf}.trows .sw.t{background:var(--ink)}
.trows small{display:block;color:var(--ink3);font-size:13px}.trows b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
.tlv{list-style:none;margin:0;padding:0;border:1px solid var(--hair);border-radius:14px;background:#fff;overflow:hidden}
.tlv li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:15px;color:var(--ink)}
.tlv li+li{border-top:1px solid var(--hair)}
.tlv li.lk{padding:0}.tlv .tla{flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;min-height:44px;color:inherit;text-decoration:none}.tlv .tla:hover .link{text-decoration:underline}.tlv .tla:focus-visible{outline-offset:-3px}
.tlv b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tlv .tev{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0}
.tlv .tdt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hair2)}
.tlv .summit .tdt,.tlv .best .tdt{background:#1f7a4d}.tlv .pause .tdt{background:#9b978d}.tlv .rep .tdt,.tlv .fall .tdt{background:#a12a14}
.tlv img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.cols>.rcol{min-width:0}
@media(min-width:900px){.cols:has(>.rcol){align-items:start;margin-top:var(--sec-before)}.cols>.rcol>.psec:first-child{margin-top:0!important}}
.ptot{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ptot li{border:1px solid var(--hair);border-radius:14px;background:#fff;padding:14px 16px;display:grid;gap:4px}
.ptot .top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.ptot b{font-weight:600}.ptot .amt{font:700 20px var(--display);font-variant-numeric:tabular-nums}
.ptot small{color:var(--ink3);font-size:13px}.ptot .since{font-size:14px;color:var(--ink2);background:var(--surface,#f2f0eb);border-radius:10px;padding:8px 10px;margin-top:6px}
@media(min-width:900px){.ptot{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
.plist{list-style:none;margin:0;padding:0}.plist li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--hair)}
.plist b{font-weight:600}.plist .amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.plist small{color:var(--ink3);font-size:13px;grid-column:1/-1}
.setl1{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--hair);border-radius:14px;background:#fff}
.setl1 .lab{display:block;font-size:16px;color:var(--ink)}.setl1 small{display:block;color:var(--ink3);font-size:13px}
.ph .btn{margin-left:auto}
.payf .row2f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.payf select,.payf input,.payf textarea{width:100%;box-sizing:border-box}
.pbanner{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#fff4d6;color:#5c3d00;font-size:15px;line-height:1.5}
.rows li.hasact .pact{flex:none;align-self:center}
.rows li.hasact .pact .btn{min-height:36px}
/* Pause overlay over the closed game */
.session .gclosed{background:linear-gradient(160deg,#25324a,#121a2b);filter:saturate(.6)}
.pov{position:absolute;inset:0;z-index:5;background:rgba(250,249,246,.97);overflow:auto;display:flex;flex-direction:column}
.pov .card{display:flex;flex-direction:column;min-height:100%}
.pov .in{flex:1;padding:22px 20px 0;max-width:720px;width:100%;margin:0 auto;box-sizing:border-box}
.pov .proj{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px}
.pov h2{font:600 24px/1.2 var(--display);margin:0 0 8px;color:var(--ink)}
.pov .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--ink2);margin:0 0 14px}
.pov .ver{font:500 12px ui-monospace,monospace;background:var(--hair);border-radius:6px;padding:2px 6px;color:var(--ink)}
.pov .about{font-size:15px;line-height:1.5;color:var(--ink2);margin:0 0 18px}
.pov h3{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.pov ol{list-style:none;margin:0 0 18px;padding:0;border:1px solid var(--hair);border-radius:14px;background:#fff;overflow:hidden}
.pov ol li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:start;padding:12px 14px;font-size:15px;color:var(--ink)}
.pov ol li+li{border-top:1px solid var(--hair)}
.pov ol .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}
.pov .ok .ic{background:#e5f3ea;color:#17603b}.pov .bad .ic{background:#fde8e4;color:#a12a14}.pov .blk .ic{background:var(--hair);color:var(--ink2)}.pov .todo .ic,.pov .next .ic{border:1.5px solid var(--hair2);box-sizing:border-box}
.pov .st{font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap}.pov .ok .st{color:#17603b}.pov .bad .st{color:#a12a14}
.pov .next{background:#fff8ec;box-shadow:inset 3px 0 0 var(--ember)}.pov .next .st{color:var(--ember)}.pov .next .ic{border-color:var(--ember)}
.pov li small{display:block;color:var(--ink2);font-size:13px;margin-top:2px}
.pov .time{display:flex;gap:22px;font-size:14px;color:var(--ink2);margin:0 0 18px}.pov .time dt{margin:0}.pov .time dd{margin:0;font:700 20px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.pov .acts{position:sticky;bottom:0;background:rgba(250,249,246,.98);border-top:1px solid var(--hair);padding:12px 20px calc(14px + env(safe-area-inset-bottom));display:grid;gap:10px}
.pov .acts .rsm .btn{width:100%;min-height:52px;font-size:17px;gap:8px}
.pov .acts .prow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pov .acts .prow .btn,.pov .acts .prow form .btn{width:100%;min-height:46px;font-size:15px}
.pov ol li{max-width:none;width:auto;margin:0}
.trows+.hint2{font-size:13px;color:var(--ink3);margin:10px 0 0;line-height:1.5}
.pov .acts form{margin:0}
.pov .btn-end{color:#a12a14;border-color:#e8c4bc}
@media(min-width:900px){
 .pov{position:fixed;top:var(--sbar-h,56px);background:rgba(22,22,26,.55);align-items:center;justify-content:center;padding:24px}
 .pov .card{background:var(--bg);border-radius:18px;max-width:760px;width:100%;min-height:0;max-height:calc(100dvh - 120px);overflow:auto;box-shadow:0 24px 64px rgba(0,0,0,.3)}
 .pov .in{padding:28px 32px 0}
 .pov .acts{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 32px 22px}
 .pov .acts .prow{display:flex;flex-direction:row;gap:10px;order:-1}.pov .acts .prow .btn,.pov .acts .prow form .btn{width:auto;padding:0 22px}
 .pov .acts .rsm .btn{width:auto;min-width:180px;min-height:48px;font-size:16px}
}
/* checklist-only session (project has no game link) */
.gwrap.nogame{display:flex;align-items:center;justify-content:center;background:var(--surface,#f4f1ec);padding:24px}
.ngm{max-width:440px;text-align:center;color:var(--ink,#1b1a17);line-height:1.5}
.ngm .big{font-size:1.15rem;font-weight:650;margin:0 0 8px}
.ngm p{margin:0 0 10px}
.hint.nogl{margin:4px 0 12px}
@media(min-width:900px){.session .gwrap.nogame{width:min(560px,92vw);min-height:320px;margin:auto;border-radius:16px;border:1px solid var(--hair)}}
/* Change password / Change email pages (full pages, no sheet) */
.acctf form{max-width:480px}
.acctf .f2{margin:0 0 16px}
.acctf .pwrules{list-style:none;margin:-6px 0 18px;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink2)}
.acctf .hint2{margin:-6px 0 16px}
.acctf .acts{margin-top:8px}
.acctf .f2{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--ink)}
.acctf .f2 input{width:100%;height:48px;border:1px solid var(--hair2);border-radius:12px;padding:0 14px;font:400 16px var(--body);background:#fff;color:var(--ink);box-sizing:border-box}
.acctf .f2 input:focus{outline:2px solid var(--ink);outline-offset:1px}
/* Delete project: quiet danger section on the edit page + its own confirm page */
.dzone{max-width:640px}
.dzone .hint2{margin:0 0 12px}
.dz-btn{color:var(--bad)!important;border-color:var(--hair2)!important}
.pdel .dlist{margin:0 0 16px;padding-left:20px;line-height:1.6;color:var(--ink)}
.pdel .pname{font-weight:700;overflow-wrap:anywhere}
.pdel .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-danger{background:#b3261e;color:#fff;border:1px solid #b3261e}
.btn-danger:disabled{background:#f1dcda;color:#6b2a25;border-color:#e6c4c0;cursor:not-allowed;transform:none!important}
@media(hover:hover){.btn-danger:not(:disabled):hover{background:#9a1f18;border-color:#9a1f18}}
.btn-danger:not(:disabled):active{background:#c8463e!important;border-color:#c8463e!important}
/* v2 pause overlay (phone): header + checklist scroll, action bar fixed at the bottom of the visible stage.
   Resume full width; Report + End session one 2-column grid row, identical boxes (anchor and button share .pbtn). */
.pov{overflow:hidden}
.pov .card{height:100%;min-height:0}
.pov .in{overflow:auto;min-height:0;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.pov .acts{position:static;flex:none;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.pov .acts .prow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.pov .acts .prow>form{display:block;margin:0;min-width:0}
.pov .pbtn{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:48px!important;min-height:48px!important;margin:0!important;padding:0 12px!important;border-radius:999px;border:1.5px solid var(--ink)!important;font:600 15px/1 var(--body)!important;vertical-align:top;text-decoration:none}
.pov .pbtn.btn-end{color:#a12a14;border-color:#a12a14!important;background:#fff}
@media(min-width:900px){.pov{overflow:auto}.pov .card{height:auto}.pov .in{overflow:visible}.pov .acts .prow{display:flex}.pov .pbtn{width:auto;padding:0 22px!important}}
/* Chip / tab rows (project switcher, segment tabs): horizontal pan on phones, fade edge hint, no scrollbar; wrap on desktop.
   touch-action pan-x pan-y: the row pans sideways, and a vertical swipe that starts on it still scrolls the page. */
@media(max-width:899px){
 .projsw,.seg{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;scroll-padding-left:24px}
 .projsw::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
 .projsw>*,.seg>*{flex:none;scroll-snap-align:start;white-space:nowrap}
 .projsw.fade-r,.seg.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
 .projsw.fade-l,.seg.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
 .projsw.fade-l.fade-r,.seg.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
}
@media(min-width:900px){.projsw{flex-wrap:wrap;overflow:visible}.seg{flex-wrap:wrap}}
/* ---------- one shared field style for every portal form control (input, date, number, select, textarea) ---------- */
.portal :is(.fl,.f2,.f)>:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea),
.portal .tsel{display:block;box-sizing:border-box;width:100%;max-width:100%;height:48px;min-height:48px;margin:0;border:1px solid var(--hair2);border-radius:12px;padding:0 14px;font:400 16px/1.25 var(--body);background-color:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.portal :is(.fl,.f2,.f)>textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.portal :is(.fl,.f2,.f)>select,.portal .tsel{padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316161a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.portal :is(.fl,.f2,.f)>input[type=date]{line-height:46px;text-align:left}
.portal :is(.fl,.f2,.f)>input[type=date]::-webkit-date-and-time-value{text-align:left}
.portal :is(.fl,.f2,.f)>input[type=date]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer}
.portal :is(.fl,.f2,.f)>:is(input,select,textarea):focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
.portal :is(.fl,.f2,.f)>:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea)[aria-invalid=true]{border-color:var(--bad)}.portal :is(.fl,.f2,.f)>:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea)[aria-invalid=true]:focus{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.portal .fl>.lt{color:var(--ink);font-weight:500}
.portal .lt .lopt,.portal .f2 .lopt{color:var(--ink3);font-weight:400}
.portal .fl{color:var(--ink);font-weight:500}.portal .fl>.lt{font-weight:500}
.trkwarn{margin:-14px 0 18px;color:var(--warn);font-size:14px}
/* Session detail: "Session #N" label between the meta line and the title (same style as section labels) */
.rhead .slabel{display:block;margin:10px 0 4px;font:600 12px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left}
.rhead .slabel .link{color:var(--ink3);text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* Sessions filters (admin): inline dropdowns (shared field style), side by side on phone; chips, count, pager, empty */
.sfbar{margin:0 0 18px}
.sffilt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.sffilt .fl{margin:0;min-width:0}.sffilt .fl>span{display:block;font:500 14px/1.3 var(--body);color:var(--ink);margin:0 0 6px}
.sffilt select{width:100%;min-width:0;text-overflow:ellipsis}
/* narrow side-by-side dropdowns: a long name must not run under the chevron (Chrome paints select text into the padding) */
.sffilt .fl{position:relative}.sffilt .fl::after{content:'';position:absolute;right:1px;bottom:1px;width:40px;height:46px;border-radius:0 11px 11px 0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316161a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;pointer-events:none}
@media(min-width:900px){.sffilt{grid-template-columns:minmax(220px,300px) minmax(220px,340px)}}
.sfmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.sfcount{margin:0;font-size:14px;color:var(--ink2)}
.fchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 6px 0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--hair2);color:var(--ink);font-size:14px;text-decoration:none}
.fchip>span[aria-hidden]{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:16px;color:var(--ink2)}
.fchip:active{background:var(--panel2)}
.sfclear{font-size:14px}
.sfempty{padding:24px 0}.sfempty p{margin:0 0 6px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;font-size:14px}
.slist{max-width:760px}
.sess .sid{display:block;font:600 11px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 2px}
/* Checklist auto-tick: rules editor (one card per step, rule fields on their own rows) + From game notes + Levels stats */
.trules .arules{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.trules .arule{border:1px solid var(--line,#e4ded6);border-radius:14px;padding:14px 14px 4px;background:#fff}
.trules .atxt{display:flex;gap:10px;align-items:baseline;margin:0 0 10px;font-weight:600;line-height:1.35}
.trules .anum{flex:none;min-width:1.6em;height:1.6em;border-radius:50%;background:var(--surface);display:inline-grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--muted,#6b645c)}
.trules .arow{display:grid;gap:10px;margin-bottom:10px}
.trules .arow>.fl{margin:0}
.trules .arow>[hidden]{display:none}
@media(min-width:900px){.trules .arow{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.trules .arow>.alb{grid-column:1/-1}}
.cl2 .fromg,.cl2 .arl,.pov .fromg{display:block;font-size:.78rem;color:var(--muted,#6b645c);font-weight:400;margin-top:2px}
.cl2 .arl{font-style:italic}
.cl2 li.hasun{align-items:center}
.cl2 .unt{margin-left:auto;flex:none}
.cl2 .unt button{font-size:.85rem;min-height:36px;padding:0 6px}
.arlink{margin-top:10px}
.lvl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lvc,.lvsum{border:1px solid var(--line,#e4ded6);border-radius:12px;padding:10px 12px;background:#fff}
.lvh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:0 0 6px}
.lvo{font-size:.8rem;font-weight:600}
.lvo.ok{color:#1d6b40}.lvo.bad{color:#a3361f}.lvo.dim{color:var(--muted,#6b645c);font-weight:500}
.lvkv{margin:0}
.lvkv+.lvkv{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line,#e4ded6)}
.lvday{margin-top:14px;display:grid;gap:10px}
.lvsub{margin:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b645c);font-weight:600}
.pov .fromg .unt{display:inline}.pov .fromg .unt button{font-size:inherit;min-height:32px;padding:0 4px;text-decoration:underline}
.pov .pnote{margin:4px 0 10px;font-size:.88rem;color:var(--muted);line-height:1.4}
/* Theme: one section-label style for every portal section heading (as Profile / Two-step / Project edit legends).
   The Guide keeps its document headings. */
.portal :is(h2,h3).psec-h:not(.ggrid *){font:600 13px/1.25 var(--body);color:var(--ink3);text-transform:uppercase;letter-spacing:.1em}
/* Log a payment: Profile structure (section labels + divider), shared fields, one primary button at the end */
.payp form{max-width:560px}
.payp .psec .fl{margin:0 0 18px}
.payp .row2f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.payp .row2f .fl{margin:0}
.payp .psec+.psec{margin-top:28px}
.payp .hint2{margin:-10px 0 18px}
.payp .acts{margin-top:28px}
/* Date fields: the shared field look with a matching calendar icon instead of the native glyph (still opens the picker) */
.portal :is(.fl,.f2,.f)>input[type=date]{position:relative;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316161a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none;min-width:0}
.portal :is(.fl,.f2,.f)>input[type=date]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:44px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.auth .pwrules,.authc .pwrules,form>.pwrules{list-style:none;margin:-4px 0 16px;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink2)}

/* Field-level error under a field (Current password): same .ferr type, tucked under its field like the rule lines */
.acctf .fe2{margin:-8px 0 16px;font-size:14px;line-height:1.4}

/* ---------- Keyboard-safe bottom bars (standing rule, every page) ----------
   One scroll container per screen: the page. Bottom action bars are position:sticky inside it (never fixed), so they
   sit just above the keyboard on Android (interactive-widget=resizes-content) and are lifted by --kb on iOS. Content
   below the focused field stays reachable by scrolling; nothing re-scrolls it (assets/ui.js). */
@media(max-width:899px){
 .rform{padding-bottom:0}
 .rsend{position:sticky;left:auto;right:auto;bottom:var(--kb,0px);z-index:5;margin:8px -22px 0;padding:14px 22px calc(14px + env(safe-area-inset-bottom))}
 .cfbar:not(.inl){position:sticky;left:auto;right:auto;bottom:var(--kb,0px);z-index:5;margin:24px -24px 0;padding:14px 24px calc(14px + env(safe-area-inset-bottom))}
 .dfoot.sticky{position:sticky;left:auto;right:auto;bottom:calc(78px + var(--kb,0px));z-index:5;margin:22px -24px 0;padding:14px 24px}
 .portal main.page:has(.dfoot){padding-bottom:136px!important}
 .kb-open .tabbar{display:none}
 .kb-open .dfoot.sticky{bottom:var(--kb,0px)}
 .kb-open .portal main.page{padding-bottom:24px!important}
}

/* Report while paused: full-screen panel over the paused session (the game stays covered underneath) */
.rpanel{position:fixed;inset:0;z-index:60;background:var(--bg)}
.rpanel iframe{display:block;width:100%;height:100%;border:0}

/* Manual checklist steps: Pass / Fail / Blocked on every not-done manual step (live checklist, pause overlay, test page).
   Outlined pills like the rest of the portal, 44px targets, own row under the step text on phones. */
.ck2.mkrow{flex-wrap:wrap;align-items:flex-start}
.ck2.mkrow>.ic{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hair2);box-sizing:border-box;flex:none;margin-top:1px}
.ck2.mkrow>.res{flex:1 1 0;min-width:0}
.mk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1 0 100%;margin-top:8px}
.mk form{display:flex;margin:0}
.mk .mkb{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--hair2);background:#fff;font:600 14px/1 var(--body);color:var(--ink);cursor:pointer;padding:0 10px}
.mk .mk-p{color:var(--ok)}.mk .mk-f{color:var(--bad)}.mk .mk-b{color:var(--ink2)}
.mk .mkb:disabled{opacity:.55}
@media(min-width:900px){.spanel .mk,.cl2 .mk{grid-template-columns:repeat(3,minmax(0,96px))}}
.shint{display:block;font-size:13px;line-height:1.4;color:var(--ink3);font-weight:400;margin-top:2px}
.pov ol li.mkrow{grid-template-columns:24px 1fr auto}
.pov ol li .mk{grid-column:1/-1;margin-top:4px}
.pov .fromg .unt.inl,.pov .fromg form.inl{display:inline}
.pov .fromg .unt button{min-height:44px;padding:0 4px}
@media(min-width:900px){
 .ck2.mkrow{flex-wrap:nowrap;align-items:center}
 .ck2.mkrow>.ic{margin-top:0}
 .mk,.spanel .mk,.cl2 .mk{display:flex;flex:none;width:auto;margin-top:0;gap:6px}
 .mk .mkb{min-width:76px;padding:0 12px}
 .pov ol li.mkrow{grid-template-columns:24px 1fr auto auto;align-items:center}
 .pov ol li .mk{grid-column:auto;margin-top:0}
}
.spanel .ck2.mkrow{flex-wrap:wrap}.spanel .mk{flex:1 0 100%;margin-top:6px;display:grid;grid-template-columns:repeat(3,1fr)}
/* Desktop pause card: the content keeps its full height (the card scrolls) and Report / End / Resume stay pinned to
   the card's bottom. Before, .in shrank to the card and longer checklists ran underneath the static action bar. */
@media(min-width:900px){.pov .card>.in{flex:none}.pov .card>.acts{position:sticky;bottom:0;z-index:1;margin-bottom:0}}
/* The current step keeps its highlight but uses the same row layout as the other markable steps. */
.ck2.mkrow.cur{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 14px}
.ck2.mkrow.cur .mk{margin-top:10px}
@media(min-width:900px){.cl2:not(.spanel *) .ck2.mkrow.cur{flex-wrap:nowrap;align-items:center}.ck2.mkrow.cur .mk{margin-top:0}}
.ck2 .res small.shint,.pov li small.shint{display:block;color:var(--ink3);font-style:normal;font-weight:400}
/* Visually hidden form fields (the username for password managers): beat the shared field padding/border. */
input.sr{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
/* Pass / Fail / Blocked: one element type (button), identical box; the label is centered by flex, never by line boxes. */
.mk .mkb{display:inline-flex;align-items:center;justify-content:center;flex-direction:row;gap:0;line-height:1;padding:0 12px;min-height:44px;margin:0;vertical-align:middle;box-sizing:border-box}
.mk .mkb::before,.mk .mkb::after{content:none}
/* Continue card: the whole card opens the test page; Continue (above the overlay) launches the game. */
.ccard{position:relative}
.ccard-a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:inherit;text-decoration:none}
.ccard-a::after{content:"";position:absolute;inset:0;border-radius:14px}
.ccard-a:focus-visible{outline:none}.ccard-a:focus-visible::after{outline:2px solid var(--ink);outline-offset:2px}
.ccard-a .chev,.list.rows a .chev{flex:none;color:var(--ink3)}
.ccard:has(.ccard-a:hover){border-color:var(--hair2)}
.ccard form,.ccard .ccard-m,.ccard .ccard-bar{position:relative}.ccard form{z-index:1}.ccard .ccard-m,.ccard .ccard-bar{pointer-events:none}
.list.rows a:has(> .chev){gap:10px}.list.rows a > .chev{margin-left:-2px}
.dprog{display:grid;gap:8px;margin:14px 0 4px}
.ccard .ccard-go{position:relative;z-index:1;margin:6px 0 0}
@media(min-width:900px){.ccard .ccard-go{display:flex;justify-content:flex-end}}
/* Keyboard open (phones): nothing below the public forms' action bar, so it rests flush on the keyboard instead of
   stopping at its natural spot above the Terms link and the footer (sticky can only move it up). */
@media(max-width:899px){.kb-open .cfbar:not(.inl)~*,.kb-open:has(.cfbar:not(.inl)) body>footer.ft,.kb-open body:has(.cfbar:not(.inl))>footer.ft{display:none}}
/* Desktop test page: Resume test / Start test stays in view (pinned to the window bottom while the checklist scrolls),
   same hairline-topped bar as on phones. */
@media(min-width:900px){.portal .detail>.dfoot{position:sticky;bottom:0;z-index:2;background:var(--bg);border-top:1px solid var(--hair);margin:22px 0 0;padding:16px 0 20px}}
/* Current (next) step on a not-started test: same row layout as the others (circle beside the text), highlight kept. */
.ck2.cur:not(.mkrow){flex-direction:row;align-items:flex-start;gap:14px}
/* I (rev): one row style for every checklist step (test page + live session panel). Same grid, same padding and the
   same rhythm for done / to-do / auto / markable rows; the 'Do next' row only adds the tint. Hint lines sit right under
   the title (2px), the Pass / Fail / Blocked group 10px under the text on phones, on the right on wide lists. */
.cl2>li.ck2,.cl2>li.ck2.cur,.cl2>li.ck2.mkrow,.cl2>li.ck2.mkrow.cur,.cl2>li.ck2.cur:not(.mkrow){display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:14px;row-gap:10px;align-items:start;padding:12px 14px;margin:0 -14px;border-radius:14px;min-height:44px;flex-direction:initial;flex-wrap:initial;background:transparent}
.cl2>li.ck2.cur{background:var(--surface)}
.cl2>li.ck2>.ic{grid-column:1;grid-row:1;margin-top:1px}
.cl2>li.ck2>.res{grid-column:2;grid-row:1;min-width:0;font-weight:400}
.cl2>li.ck2.cur>.res{font-weight:600}
.cl2>li.ck2 .res small{margin-top:2px}
.cl2>li.ck2>.unt{grid-column:3;grid-row:1;align-self:center;margin:0}
.cl2>li.ck2>.mk,.spanel .cl2>li.ck2>.mk{grid-column:2/-1;grid-row:2;margin:0;width:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:900px){.cl2:not(.spanel *)>li.ck2>.mk{grid-column:3;grid-row:1;align-self:center;display:flex;gap:6px}}
.tlv li.na span{color:var(--warn,#9a5b00)}
/* Q: every avatar is a fixed square box (never squeezed by flex), the photo fills it and is cropped to the circle */
.avatar,.avbtn{aspect-ratio:1;flex:none;border-radius:50%;overflow:hidden;box-sizing:border-box;min-width:0;min-height:0;position:relative}
.avbtn{overflow:visible}
.avbtn>span:first-child{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.avatar>img,.avbtn>span:first-child>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* Testers list (v39): one row pattern for invites, joined and paused people. Phone: text + badge top-right, actions in a
   row underneath. Desktop: text | badge column | actions column. Long names/emails truncate with an ellipsis. */
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.tlist .trow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main st" "acts acts";gap:10px 12px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:start}
.tr-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:2px}
.tr-name,.tr-email{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-name{font-weight:600;color:var(--ink);font-size:15px;line-height:1.35}
.tr-email{font-size:14px;color:var(--ink2);line-height:1.35}
.tr-meta .nw{white-space:nowrap}
.tr-meta{font-size:13px;color:var(--ink3);line-height:1.4;margin-top:2px}
.tbadge{grid-area:st;justify-self:end;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:600 12px/1 var(--body);white-space:nowrap;margin-top:1px}
.tbadge.inv{color:var(--info);background:rgba(47,95,158,.09)}
.tbadge.join{color:var(--ok);background:rgba(23,120,74,.09)}
.tbadge.pau{color:var(--warn);background:rgba(154,88,0,.1)}
.tr-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.tr-acts form{margin:0;display:inline-flex}
.tr-acts .btn{height:44px;padding:0 18px;font-size:14px;width:auto;margin:0}
@media(min-width:900px){
 .tlist .trow{grid-template-columns:minmax(0,1fr) 76px 200px;grid-template-areas:"main st acts";align-items:center;gap:0 16px}
 .tbadge{justify-self:start;margin:0}
 .tr-acts{justify-content:flex-end}
}
.srow.ro{cursor:default}.srow.ro:hover{background:none}.srow.ro .go{font-weight:500;color:var(--ink3)}
/* Password reset (v42): auth-page lede, success notice, resend with cooldown, the Change password form in the auth column */
.lede2{color:var(--ink2);margin:0 0 22px;font-size:16px;line-height:1.5}
.notice.ok{border:1px solid #cfe6d9;background:#eef7f1;color:#155c3a;border-radius:10px;padding:12px 14px;font-size:15px;margin:0 0 18px}
.rsend2{margin-top:18px}.rsend2 button[disabled]{opacity:.55;cursor:default}.si-alt.rback{margin-top:22px;text-align:left}
.si .pwform .f2{display:block;margin:0 0 4px}.si .pwform input:not([type=hidden]):not(.sr){width:100%;max-width:none;box-sizing:border-box}.si .pwform .acts{margin-top:18px}.si .pwform .acts .btn{width:100%}
@media (prefers-color-scheme:dark){.notice.ok{background:rgba(52,168,103,.12);border-color:rgba(52,168,103,.35);color:#8fd9ae}}
/* v43: field character counter; invite result (sent / failed) */
.fl .cnt{display:block;text-align:right;font-size:13px;color:var(--ink3,#6b6b72);margin-top:4px}.fl .cnt.near{color:var(--warn)}
.invlink.bad{border-color:rgba(154,88,0,.35);background:rgba(154,88,0,.07)}.invlink .invcopy{margin-top:8px}.invlink .invcopy summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
/* v43: bug review action bar ("Confirm and send to …"). Phone: pinned to the viewport bottom right above the tab bar
   (above the keyboard when it is open, tab bar hidden), never in flow, so it can't float mid-page or jump on scroll.
   The page reserves exactly the bar height (--dfh, measured in assets/ui.js) plus the tab bar. Desktop: in flow. */
@media(max-width:899px){
 .portal .dfoot.sticky{position:fixed;left:0;right:0;bottom:calc(var(--tabh,79px) + var(--kb,0px));margin:0;padding:12px 24px;gap:8px;z-index:6;background:var(--bg);border-top:1px solid var(--hair);box-shadow:0 -6px 18px rgba(0,0,0,.04)}
 .portal .dfoot.sticky .dfl{font-size:13px}
 .portal main.page:has(.dfoot.sticky){padding-bottom:calc(var(--dfh,170px) + var(--tabh,79px) + 20px)!important}
 .kb-open .portal .dfoot.sticky{bottom:var(--kb,0px);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .kb-open .portal main.page:has(.dfoot.sticky){padding-bottom:calc(var(--dfh,170px) + 20px)!important}
}
@media(max-width:899px){
 .portal .dfoot.sticky .dfl{flex-wrap:wrap;row-gap:6px}
 .portal .dfoot.sticky details.dup[open]{flex:1 0 100%;order:2;text-align:center}
 .portal .dfoot.sticky details.dup form{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
 .portal .dfoot.sticky details.dup .fl{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
 .portal .dfoot.sticky details.dup input{width:96px}
}

.pfig{margin:6px 0 2px;display:grid;gap:0;border-top:1px solid var(--hair)}.pfig>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:14px}.pfig dt{color:var(--ink3)}.pfig dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}.pfig .none dd{color:var(--ink3);font-weight:500}.pfig .bal{border-bottom:0}.pfig .bal dd{font:700 18px var(--display)}.ratef{margin:6px 0 2px}.ratef .fl{display:grid;gap:6px;margin:0}.ratef .fl>span:first-child{font-size:13px;color:var(--ink3)}.ratef .rrow{display:flex;align-items:center;gap:8px;position:relative}.ratef .cur{position:absolute;left:12px;color:var(--ink3);font-size:16px;pointer-events:none}.ratef input{flex:1;min-width:0;width:0;height:44px;box-sizing:border-box;padding:0 12px 0 26px;font-size:16px;border:1px solid var(--hair2);border-radius:10px;background:#fff;color:var(--ink)}.ratef .btn{height:44px;min-height:44px;padding:0 18px;margin:0;flex:none}.ratef .btn:disabled{opacity:.45;cursor:default}.ratef .hint2{display:block;margin-top:4px;font-size:12.5px}
.ptot.mine{display:block;border:1px solid var(--hair);border-radius:14px;background:#fff;padding:6px 16px 4px;margin-bottom:12px}.ptot.mine .pfig{border-top:0;margin:0}
.mtp .picks{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}.mtp .acts+.hint2{margin-top:12px}.mtp .acts form{margin:0}
.mtp [hidden]{display:none!important}@media(max-width:480px){.mtp .row2f{grid-template-columns:1fr}}
.mtp .hiredonly .hint2{margin-top:8px}