/* Clarity Account. The bar follows 0000-Software/CLARITY BANNER AND HELP.md -
   the one dark bar every Clarity product shares. No inline styles anywhere:
   the Content-Security-Policy forbids them, by design. */
:root{
  --cbar-bg:#17231C; --cbar-ink:#fff; --cbar-ink-soft:rgba(255,255,255,.74);
  --cbar-accent:#49A91D; --cbar-deep:#096126;
  --ink:#1d2421; --muted:#5d6a63; --line:#d7ded9; --bg:#f4f6f5; --panel:#fff;
  --good:#1f7a3a; --good-bg:#e7f4ea; --bad:#a1281c; --bad-bg:#fbeae8; --warn-bg:#fff6dd;
  font-family:Aptos,"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:var(--cbar-deep)}
h1{font-size:26px;margin:6px 0 10px;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 6px}
h3{font-size:15px;margin:0 0 4px}
code{font-family:Consolas,ui-monospace,monospace}

/* --- the bar --- */
.cbar{display:flex;align-items:center;gap:18px;height:56px;padding:0 18px;background:var(--cbar-bg);color:var(--cbar-ink);position:sticky;top:0;z-index:5}
.cbar-prod{display:flex;align-items:center;gap:9px;color:var(--cbar-ink);text-decoration:none;font-size:17px;white-space:nowrap}
.cbar-prod img{border-radius:7px}
.cbar-prod span{font-weight:400}
.cbar-prod b{font-weight:700}
.cbar-tabs{display:flex;gap:4px;height:100%}
.cbar-tabs a{display:flex;align-items:center;padding:0 11px;color:var(--cbar-ink-soft);text-decoration:none;font-weight:600;font-size:14.5px;border-bottom:3px solid transparent;margin-bottom:-0px}
.cbar-tabs a[aria-current=page]{color:var(--cbar-ink);border-bottom-color:var(--cbar-accent)}
.cbar-tabs a:hover{color:var(--cbar-ink)}
.cbar-menu{display:none;position:relative}
.cbar-menu summary{cursor:pointer;list-style:none;color:var(--cbar-ink);font-weight:600;padding:6px 10px;border:1px solid rgba(255,255,255,.4);border-radius:6px}
.cbar-menu nav{position:absolute;top:40px;left:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px;min-width:190px}
.cbar-menu nav a{display:block;padding:8px 10px;color:var(--ink);text-decoration:none;border-radius:6px}
.cbar-menu nav a:hover{background:var(--bg)}
.cbar-side{margin-left:auto;display:flex;align-items:center;gap:14px}
.cbar-who,.cbar-acct{color:var(--cbar-ink-soft);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar-acct{color:var(--cbar-ink);font-weight:600}
.cbar-link{color:var(--cbar-ink);font-weight:600;text-decoration:none}
.cbar-out{background:none;color:var(--cbar-ink);border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer}
.cbar-side form{margin:0}
.cbar-accounts{position:relative}
.cbar-accounts summary{cursor:pointer;color:var(--cbar-ink);font-weight:600;list-style:none;padding:5px 10px;border:1px solid rgba(255,255,255,.35);border-radius:6px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar-accounts-list{position:absolute;right:0;top:38px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cbar-accounts-list button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font:inherit;border-radius:6px;cursor:pointer;color:var(--ink)}
.cbar-accounts-list button.on,.cbar-accounts-list button:hover{background:var(--bg);font-weight:600}
@media (max-width:1000px){.cbar-who{display:none}}
@media (max-width:820px){.cbar{height:52px}.cbar-tabs{display:none}.cbar-menu{display:block}}
@media (max-width:520px){.cbar-prod span,.cbar-acct{display:none}}

/* --- page --- */
.page{max-width:1080px;margin:0 auto;padding:22px 18px 40px}
.page.narrow{max-width:620px}
.foot{text-align:center;color:var(--muted);font-size:12.5px;padding:18px}
.lead{font-size:16.5px;color:#34403a;margin:0 0 16px}
.muted{color:var(--muted)}
.fine{font-size:13px;color:var(--muted)}
.section-h{margin:28px 0 10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 14px}
.card.centred{text-align:center}
.note{border-radius:8px;padding:11px 14px;margin:0 0 14px;background:var(--warn-bg);border:1px solid #f0dc9a}
.note-bad{background:var(--bad-bg);border-color:#efc2bd;color:var(--bad)}
.note-good{background:var(--good-bg);border-color:#b9dfc3;color:var(--good)}
.pill{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:#e9eeeb;color:#3b4842;margin:0 4px 4px 0}
.pill-good{background:var(--good-bg);color:var(--good)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-trial{background:#e6f0fb;color:#1f4f86}

/* --- buttons and forms --- */
.btn{display:inline-block;font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover{border-color:#b9c4bd}
.btn-go{background:var(--cbar-deep);border-color:var(--cbar-deep);color:#fff}
.btn-go:hover{background:#0b7530;border-color:#0b7530}
.btn-quiet{background:none;border-color:transparent;color:var(--muted);padding:7px 10px}
.btn-quiet:hover{color:var(--bad);border-color:transparent}
.btn-big{padding:13px 24px;font-size:16px}
.form label{display:block;font-weight:600;font-size:14px;margin:0 0 12px}
.form input[type=text],.form input:not([type]),.form input[type=email],.form input[type=password],.form input[type=number],.form select{display:block;width:100%;margin-top:5px;font:inherit;font-weight:400;padding:10px 12px;border:1px solid #c4cec8;border-radius:8px;background:#fff}
.form input:focus,.form select:focus{outline:2px solid var(--cbar-accent);outline-offset:1px;border-color:var(--cbar-accent)}
.form .check{display:flex;gap:9px;align-items:flex-start;font-weight:400}
.form .check input{margin-top:4px}
.form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form-row label{flex:1 1 180px;margin:0}
.sub{margin:16px 0 8px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.code-in{font-size:22px!important;letter-spacing:.25em;text-align:center;max-width:220px}
.inline-form{margin:0}
.inline-form select{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:6px}

/* --- landing, sign-up --- */
.hero{text-align:center;padding:26px 0 10px}
.hero h1{font-size:32px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 8px}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 16px}
@media (max-width:560px){.choose{grid-template-columns:1fr}}
.choice{display:block;background:#fff;border:2px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;color:var(--ink)}
.choice:hover{border-color:var(--cbar-accent)}
.choice-h{display:block;font-size:19px;font-weight:700;margin-bottom:6px;color:var(--cbar-deep)}
.choice-p{display:block;color:var(--muted)}

/* --- products --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:10px}
.tile{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.tile img{flex:0 0 auto;border-radius:9px}
.tile p{margin:0 0 10px;color:#45524b;font-size:14px}
.tile-soon{opacity:.72}
.prods{display:flex;flex-direction:column;gap:12px}
.prod{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.prod img{border-radius:11px;flex:0 0 auto}
.prod-main{flex:1;min-width:0}
.prod-main h2{margin:0}
.prod-state{margin:4px 0 0}
.prod-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.prod-acts form{margin:0}
@media (max-width:640px){.prod{flex-wrap:wrap}.prod-acts{width:100%;justify-content:flex-start}}

/* --- people --- */
.seat-sum{margin:0 0 10px}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
.grid{width:100%;border-collapse:collapse}
.grid th,.grid td{padding:11px 12px;border-bottom:1px solid #e7ece9;text-align:left;vertical-align:middle}
.grid th{font-size:13px;color:var(--muted);font-weight:600;background:#fafbfa}
.grid tr:last-child td{border-bottom:0}
.grid .c{text-align:center}
.grid .r{text-align:right;white-space:nowrap}
.grid td form{display:inline}
.lic{font:inherit;font-size:13px;font-weight:600;padding:6px 11px;border-radius:7px;border:1px dashed #b8c3bc;background:#fff;color:var(--muted);cursor:pointer;white-space:nowrap}
.lic:hover{border-style:solid;color:var(--ink)}
.lic-on{border:1px solid var(--cbar-accent);background:var(--good-bg);color:var(--good)}

/* --- billing --- */
.bill-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.bill-head img{border-radius:9px}
.plans{border:0;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap;flex:2 1 320px}
.plan{flex:1 1 150px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-weight:400!important;cursor:pointer}
.plan input{margin-right:6px}

/* --- two-step --- */
.mfa-enrol ol{padding-left:20px}
.mfa-enrol li{margin-bottom:12px}
.qr{margin:10px 0}
.qr svg{max-width:220px;height:auto;border:1px solid var(--line);border-radius:6px}
.key{font-size:14px;background:var(--bg);padding:2px 6px;border-radius:5px;word-break:break-all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;list-style:none;padding:12px 14px;background:var(--bg);border-radius:8px;font-family:Consolas,ui-monospace,monospace;font-size:15px}