/* Hyperdot account, in the hand of hyperdot.com.au (Oct 2026): square corners,
   thin hairlines, Inter for headings and text, JetBrains Mono for capital
   labels and buttons, coral as the only accent. No gradients, glows, pill
   badges or soft shadows.
   Two tones, as on the website (src/styles/global.css "Section tones"): black
   for the top bar, page headings, the score card and pop ups; warm paper for
   the forms and the body of each page. Every colour below reads the tone's
   variables, so a part flips tone by joining one of the two lists. */

/* black: the default, and the parts that stay black inside a paper page */
:root,header.top,.band,.toast,.scrim,.preview-bar,.gate-logo{
  --ground:#000;--panel:#0A0A0A;--raise:#141414;--ink:#fff;--ink-inv:#000;
  --brand:#F1593F;--brand-text:#F1593F;--bad:#F8A696;--warn:#FCD34D;
  --text:color-mix(in oklab,var(--ink) 80%,transparent);--muted:color-mix(in oklab,var(--ink) 60%,transparent);--faint:color-mix(in oklab,var(--ink) 45%,transparent);
  --line:color-mix(in oklab,var(--ink) 10%,transparent);--line-mid:color-mix(in oklab,var(--ink) 18%,transparent);--line-strong:color-mix(in oklab,var(--ink) 30%,transparent);
  --field:color-mix(in oklab,var(--ink) 4%,transparent);--field-line:color-mix(in oklab,var(--ink) 15%,transparent);--hover:color-mix(in oklab,var(--ink) 6%,transparent);
  /* the score chart: one colour per assistant, the overall score in ink */
  --c-overall:#fff;--c-claude:#F1593F;--c-chatgpt:#199E70;--c-perplexity:#C98500;--c-google:#3987E5;
  color-scheme:dark;
}
/* warm paper: everything in the page body (the black parts above override it) */
main{
  --ground:#F3F0EA;--panel:#EAE5DC;--raise:#E0DACF;--ink:#0B0B0B;--ink-inv:#F3F0EA;
  --brand:#D9472F;--brand-text:#B5301E;--bad:#B5301E;--warn:#8A5A00;
  --text:color-mix(in oklab,var(--ink) 82%,transparent);--muted:color-mix(in oklab,var(--ink) 66%,transparent);--faint:color-mix(in oklab,var(--ink) 58%,transparent);
  --line:color-mix(in oklab,var(--ink) 12%,transparent);--line-mid:color-mix(in oklab,var(--ink) 20%,transparent);--line-strong:color-mix(in oklab,var(--ink) 32%,transparent);
  --field:color-mix(in oklab,var(--ink) 4%,transparent);--field-line:color-mix(in oklab,var(--ink) 18%,transparent);--hover:color-mix(in oklab,var(--ink) 5%,transparent);
  --c-overall:#0B0B0B;--c-claude:#D9472F;--c-chatgpt:#1A8A63;--c-perplexity:#A86B00;--c-google:#2A6FCC;
  color-scheme:light;
}
:root{
  --display:"Inter Variable","Inter",system-ui,sans-serif;
  --body:"Inter Variable","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono Variable","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* hidden means hidden, whatever display a rule gives the element */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:#000;scrollbar-width:thin;scrollbar-color:#3a3a3a #000}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:#F1593F;color:#fff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#3a3a3a;border:2px solid #000}::-webkit-scrollbar-thumb:hover{background:#5a5a5a}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.03em;line-height:1.1;margin:0;color:inherit}
h1 strong,h2 strong{font-weight:700}
h1{font-size:clamp(32px,4.2vw,54px)}h2{font-size:26px;letter-spacing:-.025em}h3{font-size:18px;font-weight:400;letter-spacing:-.015em}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--brand-text);text-decoration-color:var(--brand)}
strong{font-weight:600;color:var(--ink)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;color:#000;padding:8px 12px}
main{display:block;outline:none;min-height:calc(100vh - 72px);background:var(--ground);color:var(--ink)}
.loading{padding:96px 20px;text-align:center;color:var(--faint);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.dim{color:var(--muted)}.hint{color:var(--faint);font-size:13px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1400px;margin:0 auto;padding:0 40px}
/* the bold half of a light heading, as on the website (no gradient text) */
.grad{font-weight:700;color:inherit}

/* labels: small mono capitals, as the website's hd-label; .rule adds the coral dot */
.kicker{display:inline-block;font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rule{display:inline-flex;align-items:center;gap:10px;font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.rule::before{content:"";flex:none;width:7px;height:7px;background:var(--brand)}

/* ---------- top bar and the black band every page starts with ---------- */
header.top{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);color:var(--ink)}
.top-in{max-width:1400px;margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:600 18px/1.1 var(--display);letter-spacing:-.03em}
.brand:hover{color:var(--ink)}
.brand img{width:26px;height:26px;border-radius:50%}
.brand small{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{padding:6px 0;border:0;background:none;color:color-mix(in oklab,var(--ink) 65%,transparent);text-decoration:none;font:400 13px var(--body);letter-spacing:-.01em;cursor:pointer;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.nav .link{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s}
.nav .link:hover{border-color:var(--ink);background:var(--hover);color:var(--ink)}
.preview-bar{background:#F1593F;color:#0B0B0B;padding:10px 40px;font:500 13px var(--body);text-align:center}

.band{background:var(--ground);color:var(--ink);padding:72px 0 64px}
.band h1{margin:20px 0 14px;max-width:960px}
.band p{margin:0;color:var(--muted);max-width:600px;font-size:16px}
.band .hint{color:var(--faint);font-size:13px}
.page{padding-top:48px;padding-bottom:96px}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:32px;transition:border-color .25s}
.section{margin-top:24px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.section-head p{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:660px}
section.section:not(.panel)>.section-head{padding-top:40px;border-top:1px solid var(--line);margin-top:16px}

/* ---------- controls: square buttons, mono capitals ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);border-radius:0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--ink);background:var(--hover);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none;stroke-width:1.8}
.btn.primary,.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--ink-inv)}
.btn.primary:hover,.btn.dark:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--hover);border-color:transparent}
.btn.on-dark{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn.small{height:38px;padding:0 14px;font-size:11px}
.btn.wide{width:100%;height:52px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary:disabled:hover{background:var(--ink);border-color:var(--ink);color:var(--ink-inv)}
.btn.danger{color:var(--bad);border-color:color-mix(in oklab,var(--brand) 50%,transparent)}
.link{background:none;border:0;padding:0;color:var(--text);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;font-size:14px;transition:color .15s,text-decoration-color .15s}
.link:hover{color:var(--brand-text);text-decoration-color:var(--brand)}
label.f{display:grid;gap:7px;font-size:14px;font-weight:500;color:var(--text)}
label.f .opt{font-weight:400;color:var(--faint)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input:not([type]),textarea,select{width:100%;height:48px;padding:10px 16px;border:1px solid var(--field-line);background:var(--field);border-radius:0;font-size:16px;font-weight:400;color:var(--ink);outline:none;transition:border-color .15s,background-color .15s}
textarea{height:auto;min-height:104px;resize:vertical;padding-top:12px}
input::placeholder,textarea::placeholder{color:color-mix(in oklab,var(--ink) 40%,transparent)}
input:focus,textarea:focus,select:focus{border-color:var(--ink);background:var(--ground)}
input:not([type=checkbox]):focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
input:disabled{color:var(--faint);background:transparent;border-color:var(--line)}
.btn:focus-visible,.cell:focus-visible,.chip:focus-visible,.link:focus-visible,.nav a:focus-visible,.choice button:focus-visible,.todo>button:focus-visible,.plan-pick:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.msg{font-size:14px;min-height:20px}.msg:empty{display:none}.msg.bad{color:var(--bad)}.msg.ok{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--field-line);background:transparent;color:var(--muted);padding:0 12px;height:32px;border-radius:0;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ink-inv)}
.tag{display:inline-block;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--field-line);color:var(--muted);white-space:nowrap}
.tag.hi{border-color:color-mix(in oklab,var(--brand) 60%,transparent);color:var(--brand-text)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);padding:14px 20px;font:500 14px var(--body);z-index:60;max-width:90vw}
.toast::before{content:"";flex:none;width:7px;height:7px;background:var(--brand)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:400;color:var(--muted);line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:1px 0 0;flex:none;border:1.5px solid var(--line-strong);background:var(--ground);border-radius:0;cursor:pointer;display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:5px;height:9px;border:solid var(--ink-inv);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.check input:disabled{opacity:.5;cursor:default}
.check a{color:var(--ink)}

/* ---------- sign in, sign up and the first steps: paper, under a black bar ---------- */
.gate-page{position:relative;min-height:100vh;background:var(--ground);padding:120px 16px 72px}
.gate-page::before{content:"";position:absolute;top:0;left:0;right:0;height:72px;background:#000;border-bottom:1px solid rgba(255,255,255,.1)}
.gate-in{max-width:520px;margin:0 auto}
.gate-in.wide{max-width:580px}
.gate-logo{position:absolute;top:0;left:max(40px,calc((100% - 1400px) / 2 + 40px));height:72px;display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:600 18px var(--display);letter-spacing:-.03em}
.gate-logo:hover{color:var(--ink)}
.gate-logo img{width:26px;height:26px;border-radius:50%}
.gate{background:var(--panel);border:1px solid var(--line);padding:40px}
.gate h1{font-size:34px;line-height:1.05;letter-spacing:-.035em;margin:0 0 12px}
.gate h2{font-size:24px;margin:0}
.gate .kicker{margin-bottom:12px}
.gate p.lead{color:var(--muted);margin:0 0 26px;font-size:15px}
.gate-foot{margin:24px 0 0;text-align:center;color:var(--faint);font-size:14px}
.gate-foot a,.gate-foot .link{color:var(--ink);font-weight:500}
.gate-foot a:hover,.gate-foot .link:hover{color:var(--brand-text)}
.or{display:flex;align-items:center;gap:14px;color:var(--faint);font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:4px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.code-input{font:500 26px/1 var(--mono)!important;letter-spacing:.35em;text-align:center;height:64px!important}
.qr{display:grid;place-items:center;padding:14px;background:#fff;border:1px solid var(--line);width:max-content;margin:8px auto}
.qr img{width:184px;height:184px;image-rendering:pixelated}
.secret{font:500 14px var(--mono);letter-spacing:.05em;word-break:break-all;background:var(--field);border:1px solid var(--line);padding:12px 14px;text-align:center}
.choice{display:grid;gap:10px}
.choice button{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;text-align:left;padding:20px;border:1px solid var(--field-line);background:transparent;border-radius:0;cursor:pointer;color:var(--ink);transition:border-color .15s,background-color .15s}
.choice button:hover{border-color:var(--ink);background:var(--hover)}
.choice .ic{grid-row:span 2;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-mid);color:var(--ink);transition:color .15s,border-color .15s}
.choice button:hover .ic{color:var(--brand-text);border-color:var(--brand)}
.choice .ic svg{width:19px;height:19px;stroke-width:1.8}
.choice b{font:500 16px var(--display);letter-spacing:-.01em}.choice span{color:var(--muted);font-size:13px}
.plan-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--field);border:1px solid var(--field-line);font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan-pick b{font:300 22px/1.2 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.plan-pick .dim{font:400 13px var(--body);letter-spacing:0;text-transform:none}
.plan-pick .link{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.steps{display:flex;gap:9px;align-items:center;margin:0 0 26px;font:500 10.5px/1.3 var(--mono);color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
.steps span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.steps span::before{content:"";flex:none;width:7px;height:7px;background:var(--line-mid)}
.steps i{flex:1;min-width:10px;max-width:40px;height:1px;background:var(--line-mid)}
.steps .on{color:var(--ink)}.steps .on::before{background:var(--brand)}
.steps .done{color:var(--muted)}.steps .done::before{background:var(--ink)}
/* four steps (sign up with a payment): only the current one is named */
.steps:has(span:nth-of-type(4)) span:not(.on){font-size:0;gap:0}
.sent{display:grid;justify-items:center;text-align:center;gap:8px}
.sent .ring{width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--line-mid);color:var(--brand-text);margin-bottom:12px}
.sent .ring svg{width:24px;height:24px;stroke-width:1.8}

/* choosing a plan on sign up: the plan box as a choice, in the same hand */
.plans{display:grid;gap:8px}
button.plan-pick{width:100%;text-align:left;cursor:pointer;font-family:var(--mono);transition:border-color .15s,background-color .15s}
button.plan-pick:hover{border-color:var(--line-strong)}
.plan-pick[aria-checked="true"]{border-color:var(--ink);background:var(--hover)}
.plan-pick[aria-checked="true"] b::after{content:"";display:inline-block;width:7px;height:7px;background:var(--brand);margin-left:10px;vertical-align:middle}
.plan-pick .price{display:block;margin-top:4px;font:400 14px var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.plan-pick .dim{display:block;margin-top:2px}

/* ---------- report: the band's score card ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:end}
.scorecard{background:var(--panel);color:var(--ink);border:1px solid var(--line-mid);padding:26px}
.scorecard .top-row{display:grid;grid-template-columns:116px 1fr;gap:20px;align-items:center}
.scorecard .hint{margin-top:2px}
.gauge{position:relative;width:116px;height:116px}
.gauge svg{width:116px;height:116px;transform:rotate(-90deg)}
.gauge .track{fill:none;stroke:color-mix(in oklab,var(--ink) 12%,transparent);stroke-width:6}
.gauge .val{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:butt}
.gauge b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:300 40px/1 var(--display);letter-spacing:-.04em}
.gauge b small{display:block;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.engbars{display:grid;gap:11px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.engbar{display:grid;grid-template-columns:84px 1fr 30px;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.engbar i{display:block;height:4px;background:var(--line);overflow:hidden}
.engbar i em{display:block;height:100%;background:var(--ink)}
.engbar b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.delta{display:inline-block;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--line-strong);color:var(--text);margin-top:10px}
.delta.up{border-color:color-mix(in oklab,var(--ink) 50%,transparent);color:var(--ink)}.delta.down{border-color:color-mix(in oklab,var(--brand) 55%,transparent);color:var(--bad)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--panel);padding:24px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:132px}
.tile b{display:block;font:300 44px/1 var(--display);letter-spacing:-.04em}
.tile b.word{font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:400;padding-top:4px}
.tile span{color:var(--muted);font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tile b span.dim{color:var(--faint);text-transform:none;letter-spacing:0}

/* chart */
.vc-ranges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.vc-plot{position:relative;margin-left:30px}
.vc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vc-plot .grid{stroke:color-mix(in oklab,var(--ink) 10%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.vc-plot .ln{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.vc-ylab{position:absolute;left:-30px;width:24px;text-align:right;font:500 10px var(--mono);color:var(--faint);transform:translateY(-50%);line-height:1}
.vc-dot{position:absolute;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 2px var(--panel)}
.vc-x{position:relative;height:16px;margin:10px 0 0 30px}
.vc-xlab{position:absolute;top:0;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transform:translateX(-50%)}
.vc-xlab.first{transform:none}.vc-xlab.last{transform:translateX(-100%)}
.vc-hit{position:absolute;inset:0;touch-action:pan-y;cursor:crosshair;outline:none}
.vc-hit:focus-visible{box-shadow:0 0 0 2px var(--brand)}
.vc-guide{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in oklab,var(--ink) 40%,transparent);pointer-events:none;display:none}
.vc-tip{position:absolute;top:0;z-index:5;min-width:180px;max-width:260px;background:var(--ground);border:1px solid var(--line-strong);padding:12px 14px;font-size:12.5px;pointer-events:none;display:none}
.vc-tip .h{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;white-space:nowrap}
.vc-tip .r{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--text)}
.vc-tip .r i{width:12px;height:2px;flex:none}
.vc-tip .r b{margin-left:auto;padding-left:10px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.chartkey{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.chartkey span{display:flex;align-items:center;gap:7px}.chartkey i{width:16px;height:2px;display:inline-block}
/* Perplexity's line is dashed, so it never relies on colour alone next to Claude's */
.vc-tip .r i.dash,.chartkey i.dash{background:transparent!important;border-top:2px dashed}

/* where you stand: the question grid */
.matrix{display:grid;gap:1px;background:var(--line);background-attachment:local;border:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.matrix .mh{background:var(--panel);padding:12px 10px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:center}
.matrix .mh.q{text-align:left;padding-left:16px}
.matrix .mq{background:var(--panel);padding:14px 16px;font-size:14px;color:var(--text)}
.cell{background:var(--panel);border:0;border-radius:0;display:grid;place-items:center;align-content:center;gap:3px;padding:10px 4px;cursor:pointer;font-size:11.5px;color:var(--muted);min-height:64px;transition:background-color .15s}
.cell:hover{background:var(--raise)}
.cell b{font:600 16px var(--display);letter-spacing:-.01em;color:var(--ink)}
.cell.top{background:color-mix(in srgb,var(--brand) 16%,var(--panel))}
.cell.top:hover{background:color-mix(in srgb,var(--brand) 22%,var(--panel))}
.cell.top b{color:var(--brand-text)}
.cell.named{background:color-mix(in srgb,var(--ink) 7%,var(--panel))}
.cell.named:hover{background:color-mix(in srgb,var(--ink) 11%,var(--panel))}
.cell.none b{color:var(--faint);font:500 13px var(--body)}
.cell.err b{color:color-mix(in oklab,var(--ink) 35%,transparent);font:500 13px var(--body)}
.cell[aria-pressed="true"]{outline:1px solid var(--ink);outline-offset:-1px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:7px}.legend i{width:12px;height:12px;display:inline-block;border:1px solid var(--line-mid);background:var(--panel)}
.said{margin-top:16px;border-left:2px solid var(--brand);padding:16px 20px;background:var(--hover);color:var(--text)}
.said strong{color:var(--ink)}
.said q{display:block;font-style:normal;color:var(--ink);margin-top:10px;quotes:none}

/* who gets named instead */
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:minmax(120px,230px) 1fr 44px;gap:14px;align-items:center;font-size:14px;color:var(--text)}
.bar .track{height:6px;background:var(--line);position:relative;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;background:color-mix(in oklab,var(--ink) 32%,transparent);transition:width .5s var(--ease)}
.bar.me .fill{background:var(--brand)}
.bar.me span{font-weight:600;color:var(--ink)}
.bar b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}

/* this month and to do */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:14px;color:var(--text)}
.timeline li:first-child{border-top:0}
.timeline time{color:var(--faint);font:500 11px/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.todo{border:1px solid var(--line);background:var(--panel);margin-bottom:-1px;transition:border-color .2s}
.todo:hover{border-color:var(--line-strong);position:relative}
.todo>button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;text-align:left;padding:20px 22px;border:0;background:none;cursor:pointer;color:var(--ink)}
.todo>button[aria-expanded="true"]{background:var(--hover)}
.todo .st{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border:1px solid;white-space:nowrap;min-width:118px;text-align:center}
.st.prog{border-color:color-mix(in oklab,var(--brand) 60%,transparent);color:var(--brand-text)}.st.plan{border-color:var(--line-strong);color:var(--ink)}.st.rec{border-color:var(--field-line);color:var(--muted)}
.todo .t{font:400 17px/1.3 var(--display);letter-spacing:-.015em}
.todo .body{padding:4px 22px 22px;display:grid;gap:14px;font-size:14px;color:var(--text);background:var(--hover)}
.todo .body h4{margin:0 0 4px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.todo .body p{margin:0}
#todo{margin-bottom:1px}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc article{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);padding:26px;transition:border-color .25s}
.svc article:hover{border-color:var(--line-strong)}
.svc h3{margin:10px 0 10px;font-size:21px;font-weight:300;letter-spacing:-.02em}.svc p{margin:0 0 22px;color:var(--muted);font-size:14px;flex:1}
.svc article .btn{align-self:flex-start}
h3.kicker{font-weight:500}
.footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13px}
.footer a{color:var(--text)}

/* the welcome page, before the first audit is published */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.next article{background:var(--panel);border:1px solid var(--line);padding:28px;transition:border-color .25s}
.next article:hover{border-color:var(--line-strong)}
.next .n{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-mid);color:var(--brand-text);font:500 12px var(--mono);margin-bottom:22px}
.next h3{font-size:21px;font-weight:300;letter-spacing:-.02em;margin-bottom:10px}.next p{margin:0;color:var(--muted);font-size:14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0;font-size:14px}
.facts dt{color:var(--faint);font:500 10.5px/2.1 var(--mono);letter-spacing:.14em;text-transform:uppercase}.facts dd{margin:0;font-weight:500;color:var(--ink);overflow-wrap:anywhere}

/* dialog: black, like the website's sign up pop up */
.scrim{position:fixed;inset:0;background:rgba(11,11,11,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:40;display:grid;place-items:center;padding:16px;color:var(--ink)}
.dialog{background:var(--ground);border:1px solid var(--line-mid);width:min(540px,100%);padding:32px;display:grid;gap:16px}

/* account pages */
.rows{display:grid;gap:12px}
.crow{display:grid;grid-template-columns:1.2fr 1fr 1.4fr 1fr auto;gap:14px;align-items:end;padding:20px;border:1px solid var(--line);background:var(--panel)}
.crow label.f{font-size:13px}
.seclist{display:grid;margin-top:8px}
.secrow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.secrow:first-child{border-top:0}
.secrow h3{margin-bottom:6px}
.ok-badge,.off-badge{display:inline-flex;align-items:center;gap:8px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ok-badge{color:var(--ink)}.ok-badge::before{content:"";width:7px;height:7px;background:var(--ink)}
.off-badge{color:var(--warn)}.off-badge::before{content:"";width:7px;height:7px;border:1px solid var(--warn)}
.secrow .hint{margin-top:6px}

@media (max-width:1024px){
  .wrap,.top-in{padding-left:32px;padding-right:32px}
  .nav{gap:20px}
  .gate-logo{left:32px}
}
@media (max-width:960px){
  .hero,.grid2{grid-template-columns:minmax(0,1fr)}.hero{gap:32px;align-items:start}
  .svc,.next{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .wrap,.top-in{padding:0 20px}
  .top-in{position:relative;height:auto;min-height:60px;flex-wrap:wrap;gap:4px 12px;padding-top:12px;padding-bottom:0}
  .nav{margin-left:0;width:calc(100% + 20px);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-right:-20px;padding:2px 20px 8px 0;gap:22px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:8px 0}
  .nav .link{position:absolute;top:13px;right:20px;height:34px;padding:0 12px}
  .brand{min-height:34px;padding-right:120px}
  .preview-bar{padding:10px 20px}
  main{min-height:calc(100vh - 100px)}
  .band{padding:44px 0 40px}
  .band h1{margin:16px 0 12px}
  .band p{font-size:15px}
  .page{padding-top:24px;padding-bottom:72px}
  .panel{padding:22px 20px}
  h2{font-size:23px}
  .svc,.next{grid-template-columns:minmax(0,1fr)}
  .crow,.row2{grid-template-columns:minmax(0,1fr)}.bar{grid-template-columns:minmax(90px,130px) 1fr 34px;gap:10px}
  .scorecard{padding:20px}
  .scorecard .top-row{grid-template-columns:96px 1fr;gap:16px}.gauge,.gauge svg{width:96px;height:96px}.gauge b{font-size:32px}
  .tile{padding:18px;min-height:112px}.tile b{font-size:36px}.tile b.word{font-size:17px}
  .vc-ranges .chip{padding:0 10px;font-size:10px;letter-spacing:.08em}
  .panel .matrix{margin:0 -20px;border-left:0;border-right:0}
  .matrix .mh{padding:10px 4px;font-size:9.5px;letter-spacing:.06em}
  .matrix .mh.q{padding-left:12px}
  .matrix .mq{padding:12px;font-size:13px}
  .gate{padding:28px 20px}
  .gate h1{font-size:30px}
  .gate-page{padding:92px 16px 48px}
  .gate-page::before{height:60px}
  .gate-logo{left:20px;height:60px}
  .steps{gap:8px}
  .steps span:not(.on){font-size:0;gap:0}
  .steps i{max-width:24px}
  .todo>button{grid-template-columns:1fr;gap:10px;padding:18px}
  .todo .st{justify-self:start;min-width:0}
  .todo .tag{justify-self:start}
  .todo .body{padding:4px 18px 18px}
  section.section:not(.panel)>.section-head{padding-top:32px}
  .dialog{padding:24px 20px}
  .secrow{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* choosing a plan on sign up: the plans side by side, each with its price
   and what it includes; the details sit under them at a readable width */
.gate-in.plans-wide{max-width:1080px}
.bill-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bill-row .kicker{margin:0}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:stretch}
button.plan-card{display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:left;padding:22px;background:var(--field);border:1px solid var(--field-line);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,background-color .15s}
button.plan-card:hover{border-color:var(--line-strong)}
.plan-card[aria-checked="true"]{border-color:var(--ink);background:var(--hover)}
.plan-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.plan-card .kicker{margin:0}
.plan-card .pc-name{font:400 24px/1.15 var(--display);letter-spacing:-.02em}
.plan-card .pc-price b{display:block;font:300 36px/1 var(--display);letter-spacing:-.035em}
.plan-card .pc-price span{display:block;margin-top:6px;font:400 13px/1.4 var(--body);color:var(--muted)}
.plan-card .pc-desc{font:400 14px/1.5 var(--body);color:var(--muted)}
.plan-card .pc-feats{display:grid;gap:9px;padding-top:14px;border-top:1px solid var(--line)}
.plan-card .pc-feat{display:flex;gap:10px;align-items:baseline;font:400 14px/1.45 var(--body);color:var(--text)}
.plan-card .pc-feat::before{content:"";flex:none;width:6px;height:6px;background:var(--brand);transform:translateY(-2px)}
.plan-card .pc-pick{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan-card[aria-checked="true"] .pc-pick{color:var(--ink)}
.plan-card[aria-checked="true"] .pc-pick::before{content:"";display:inline-block;width:7px;height:7px;background:var(--brand);margin-right:9px}
.form.with-plans>label,.form.with-plans>.row2,.form.with-plans>.btn,.form.with-plans>.msg,.form.with-plans>.hint,.form.with-plans>p{max-width:680px}