/* Sign-in, sign-up and account pages. Shares the app's palette and self-hosted fonts. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2")}
:root{--bg:#eef1f5;--panel:#fff;--ink:#101b2d;--ink-2:#46546a;--muted:#5b6779;--line:#d9dfe8;--accent:#2563eb;--accent-ink:#fff;--accent-soft:#d6e8ff;--bad:#b42828;--bad-bg:#fbe7e7;--good:#0b7a0b;--good-bg:#e5f5e5;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0d1219;--panel:#151c26;--ink:#e7ecf3;--ink-2:#aeb9c9;--muted:#8290a3;--line:#2a3443;--accent:#8ea8f2;--accent-ink:#0d1219;--accent-soft:#1f2a45;--bad:#f08a8a;--bad-bg:#321719;--good:#7fd67f;--good-bg:#132a17;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif;min-height:100vh;display:grid;place-items:start center;padding:48px 16px}
main{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px 28px}
main.wide{width:min(980px,100%)}
.brandbar{display:flex;align-items:center;gap:10px;font:700 15px "IBM Plex Sans Condensed",sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.brandbar .logo{max-height:32px;max-width:140px}
.mark{width:14px;height:14px;border-radius:3px;background:var(--accent)}
h1{font:700 24px/1.15 "IBM Plex Sans Condensed",sans-serif;margin:0 0 8px;text-wrap:balance}
h2{font:700 17px "IBM Plex Sans Condensed",sans-serif;margin:22px 0 8px}
p{margin:0 0 12px;color:var(--ink-2)}
form{display:grid;gap:12px;margin:14px 0}
.fld{display:grid;gap:4px;align-content:start}
label{font-size:13px;font-weight:600;color:var(--ink-2)}
input,select{font:inherit;color:inherit;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
input[type=checkbox],input[type=radio]{width:auto;padding:0;margin:0 8px 0 0;accent-color:var(--accent);vertical-align:-2px}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;align-items:flex-start;gap:2px;font-weight:400;color:var(--ink);font-size:14px;line-height:1.4}
label>input[type=checkbox],label>input[type=radio]{margin-top:2px;flex:none}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{font-size:12px;color:var(--muted)}
button,.btn{font:600 15px "IBM Plex Sans",sans-serif;padding:10px 14px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-align:center;text-decoration:none;display:inline-block}
.btn.secondary,button.secondary{background:transparent;color:var(--accent)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:6px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.notice{padding:9px 12px;border-radius:6px;font-size:14px}
.notice.error{background:var(--bad-bg);color:var(--bad)}
.notice.ok{background:var(--good-bg);color:var(--good)}
.notice.info{background:var(--accent-soft);color:var(--ink)}
a{color:var(--accent)}
.links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin-top:6px}
footer{margin-top:18px;font-size:12px;color:var(--muted)}
.qr{background:#fff;padding:10px;border-radius:8px;width:200px;height:200px;margin:8px 0}
.qr svg{width:100%;height:100%}
code,.code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--bg);padding:2px 6px;border-radius:4px;word-break:break-all}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.plan{border:1px solid var(--line);border-radius:8px;padding:16px;display:grid;gap:8px;align-content:start}
.plan:has(input:checked){border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.plan label{margin-top:auto;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-weight:600;cursor:pointer}
.plan:has(input:checked) label{border-color:var(--accent);background:var(--accent-soft)}
.plan h3{margin:0;font:700 18px "IBM Plex Sans Condensed",sans-serif}
.price{font:600 22px "IBM Plex Sans",sans-serif}.price small{font-size:13px;color:var(--muted);font-weight:400}
.plan ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.slug{display:flex;align-items:center;gap:6px}.slug span{color:var(--muted);white-space:nowrap}
@media (max-width:720px){.plans{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}
.cnav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13.5px;margin:-6px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cnav .who{margin-left:auto;color:var(--muted);font-size:12.5px}
.ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 16px}
.ctiles>div{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:2px}
.ctiles b{font-size:16px}.ctiles span{font-size:12px;color:var(--muted)}
.ctable{overflow-x:auto;border:1px solid var(--line);border-radius:8px;margin:8px 0 14px}
.ctable table{border-collapse:collapse;width:100%;font-size:13.5px}
.ctable th,.ctable td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable th{font-size:12px;color:var(--muted);font-weight:600;background:var(--bg)}
.ctable .sub{display:block;font-size:12px;color:var(--muted)}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border-radius:10px;background:var(--accent-soft);color:var(--ink)}
.tag.ok{background:var(--good-bg);color:var(--good)}.tag.bad{background:var(--bad-bg);color:var(--bad)}.tag.warn{background:#fdf3dc;color:#7a5200}
.csearch{display:flex;gap:8px;grid-template-columns:none;margin:0 0 8px}.csearch input{flex:1}
.cform{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.cform .wide{grid-column:1/-1}.cform button{justify-self:start}
textarea{font:13px ui-monospace,Menlo,monospace;color:inherit;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
ul{padding-left:18px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:720px){.cform{grid-template-columns:1fr}}
.bars{display:flex;gap:1px;margin-top:4px;height:18px;align-items:stretch}.bars i{flex:1;min-width:2px;border-radius:1px;background:var(--good)}.bars i.warn{background:#d9a400}.bars i.bad{background:var(--bad)}
.incident{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0}
.tag.warn{background:#fdf3dc;color:#7a5200}
/* Demonstration site: choose who to be */
ul.people{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
ul.people .btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;box-sizing:border-box;text-align:left;background:transparent;color:var(--ink,#1d2735);border-color:var(--line,#dde3ec)}
ul.people .btn:hover,ul.people .btn:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
ul.people .btn span{font-weight:400;font-size:13px;color:var(--muted,#5b6779)}
details.more{margin-top:14px}
details.more summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px}
ul.people .btn span+span{font-size:12px}
/* Plans and pricing (public) and the billing choice at sign-up */
.lede{font-size:16px;color:var(--ink-2);max-width:72ch}
.calc{display:grid;grid-template-columns:120px 1fr 1fr auto;gap:12px;align-items:end;margin:18px 0 4px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.plan.pick{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.plan .total{font-size:14px;color:var(--ink);margin:0}.plan .total.warn{color:#7a5200}
.plan>.btn{margin-top:auto}
fieldset.billing{border:1px solid var(--line);border-radius:8px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0}
fieldset.billing legend{font-size:13px;font-weight:600;color:var(--ink-2);padding:0 4px}
dl.faq{margin:0 0 16px}dl.faq dt{font-weight:600;margin-top:12px}dl.faq dd{margin:2px 0 0;color:var(--ink-2)}
@media (max-width:720px){.calc{grid-template-columns:1fr 1fr}.calc button{grid-column:1/-1}}

/* ---------- Steerline: emerald, Figtree and Source Serif 4 (same tokens as steerline.css) ---------- */
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-display:swap;src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2")}
:root{--bg:#F3F5F4;--ink:#0B0B0B;--ink-2:#3A3A3A;--muted:#6E6E6E;--line:#D9DDDB;--accent:#00875F;--accent-soft:#E6F4EE;--bad:#C4291C;--good:#00875F}
@media (prefers-color-scheme:dark){:root{--bg:#0E1311;--panel:#161D1A;--ink:#EEF2F0;--ink-2:#C4CCC8;--muted:#93A09A;--line:#2A3430;--accent:#2FBF8A;--accent-ink:#0B0B0B;--accent-soft:#12291F;--good:#2FBF8A}}
body{font-family:"Figtree",system-ui,sans-serif}
main{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 28px rgba(0,0,0,.06)}
.brandbar{font-family:"Figtree",sans-serif;text-transform:none;letter-spacing:-.02em;font-size:17px;color:var(--ink)}
h1{font:600 28px/1.15 "Source Serif 4",Georgia,serif;letter-spacing:-.01em}
h2,.plan h3{font-family:"Figtree",sans-serif}
button,.btn{font-family:"Figtree",sans-serif;border-radius:999px;padding:10px 18px}

/* Passkeys, recovery codes */
ul.keys{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
ul.keys li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
ul.keys li form{margin:0}
ul.keys li .hint{display:block}
ol.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;padding-left:22px;margin:12px 0}
ol.codes code{font-size:15px;letter-spacing:.06em}
[data-passkey-msg]:empty{display:none}
/* Trust portal (server/src/routes/trust.ts) and the sandbox banner on sign-in pages */
.sitebanner{width:min(980px,100%);margin:0 0 12px;padding:9px 14px;border-radius:8px;border:1px solid #d9a400;background:repeating-linear-gradient(135deg,#fdf3dc 0 14px,#f8e7b8 14px 28px);color:#3a2b00;font-size:13px;font-weight:600;letter-spacing:.02em;text-align:center}
.tctls{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0 18px}
.tctl{border:1px solid var(--line);border-radius:10px;padding:12px 14px}.tctl h3{margin:0 0 4px;font-size:15px}.tctl p{margin:0;font-size:14px}
.tcerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:10px 0 18px}
.tcert{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px;align-content:start}.tcert b{font-size:16px}
.tcert.achieved{border-color:var(--good)}
.tnda{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:13px;color:var(--ink-2);background:var(--bg)}
.tcert .tag{justify-self:start}
.ctable .tag,.ctable .btn{white-space:nowrap}

/* The platform's public pages (pricing, sign-up): white and light like the website, in its emerald, whatever the device's theme. */
body.site{--bg:#fff;--panel:#fff;--ink:#14211D;--ink-2:#33443D;--muted:#56665F;--line:#D6DFDB;--accent:#00875F;--accent-ink:#fff;--accent-soft:#E3F3EC;--bad:#B4322A;--bad-bg:#fbe7e7;--good:#0b7a0b;--good-bg:#e5f5e5;color-scheme:light;background:#fff;color:var(--ink)}
body.site main{border:0;border-radius:0;box-shadow:none;padding:8px 8px 26px}
body.site code,body.site .code,body.site .ctable th{background:#F1F5F3}
main.wide.full{width:min(1360px,100%)}
.plans.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.plans.p4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.plans.p4{grid-template-columns:1fr}}