/* Onym design system.
   Paper and ink, one restrained accent, color only where data needs it.
   Type: Newsreader for display and figures, Geist for interface, Geist Mono for data. */
:root {
  --bg:#F4F1EA; --surface:#FBFAF6; --surface-2:#ECE8DF;
  --ink:#1F1D1A; --ink-2:#47433D; --muted:#78726A; --faint:#A39D93;
  --line:rgba(31,29,26,.09); --line-strong:rgba(31,29,26,.18);
  --accent:#B4532F; --accent-soft:rgba(180,83,47,.10);
  --chat:#2F6BA8; --code:#0E8F7C; --rival:#2F6BA8; --up:#3D7A4A; --down:#A03A4A; --warn:#A8751A;
  --dark:#1F1D1A; --dark-ink:#F1EDE4; --dark-muted:#A39D93;
  --r-sm:5px; --r-md:8px; --r-lg:10px;
  --ring:0 0 0 1px var(--line);
  --lift:none;
  --float:0 1px 0 var(--line), 0 18px 40px -24px rgba(31,29,26,.22), 0 0 0 1px var(--line);
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#161512; --surface:#1C1B18; --surface-2:#25231F;
    --ink:#F1EDE4; --ink-2:#CFC9BE; --muted:#9A948A; --faint:#6A655D;
    --line:rgba(241,237,228,.08); --line-strong:rgba(241,237,228,.16);
    --accent:#D06A43; --accent-soft:rgba(208,106,67,.14);
    --chat:#5B8FCB; --code:#2BA591; --rival:#5B8FCB; --up:#6FAE7C; --down:#D9707F; --warn:#C9952E;
    --float:0 18px 40px -20px rgba(0,0,0,.6), 0 0 0 1px var(--line);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#161512; --surface:#1C1B18; --surface-2:#25231F;
  --ink:#F1EDE4; --ink-2:#CFC9BE; --muted:#9A948A; --faint:#6A655D;
  --line:rgba(241,237,228,.08); --line-strong:rgba(241,237,228,.16);
  --accent:#D06A43; --accent-soft:rgba(208,106,67,.14);
  --chat:#5B8FCB; --code:#2BA591; --rival:#5B8FCB; --up:#6FAE7C; --down:#D9707F; --warn:#C9952E;
  --float:0 18px 40px -20px rgba(0,0,0,.6), 0 0 0 1px var(--line);
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font:400 15.5px/1.6 var(--sans); color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-feature-settings:"ss01"; }
a { color:inherit; }
img, svg { max-width:100%; }
main { min-height:calc(100vh - 61px); }
::selection { background:var(--accent-soft); }

/* ---------- layout ---------- */
.wrap { max-width:1120px; margin:0 auto; padding:0 32px; }
.frame { position:relative; }
.section { border-top:1px solid var(--line); }
.section > .wrap > .frame { padding:120px 0; }
.page > .wrap > .frame { padding:64px 0 112px; }
.narrow { max-width:720px; }
@media (max-width:760px) {
  .wrap { padding:0 16px; }
  .section > .wrap > .frame { padding:72px 0; }
  .page > .wrap > .frame { padding:36px 0 72px; }
}

/* ---------- type ---------- */
h1, h2, h3, h4 { color:var(--ink); font-weight:500; margin:0; }
.display, h1 { font:400 clamp(44px, 6.4vw, 76px)/1.0 var(--serif); letter-spacing:-.025em; margin:0 0 24px; font-optical-sizing:auto; }
.page h1 { font-size:clamp(36px, 4.8vw, 54px); line-height:1.04; }
h2, .h2 { font:400 clamp(32px, 3.8vw, 46px)/1.06 var(--serif); letter-spacing:-.02em; margin:0 0 18px; }
.page h2 { font:500 20px/1.25 var(--sans); letter-spacing:-.012em; margin:56px 0 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
h3 { font-size:16px; letter-spacing:-.01em; line-height:1.35; margin:0 0 6px; }
.tone { color:var(--muted); }
.serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
p { margin:0 0 12px; }
.lead { font-size:clamp(17px, 1.5vw, 19px); line-height:1.55; color:var(--muted); max-width:560px; margin:0 0 32px; }
.muted { color:var(--muted); } .faint { color:var(--faint); }
.small { font-size:13px; line-height:1.5; }
.mono { font-family:var(--mono); font-size:.9em; }
.center { text-align:center; } .center .lead { margin-left:auto; margin-right:auto; }
.count { font:500 11px/1 var(--sans); color:var(--faint); letter-spacing:.1em; text-transform:uppercase; }
.link { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; transition:text-decoration-color .15s; }
.link:hover { text-decoration-color:var(--ink); }
.back { display:inline-flex; gap:6px; align-items:center; color:var(--muted); text-decoration:none; font-size:14px; margin-bottom:20px; }
.back:hover { color:var(--ink); }
.crumbs { font-size:13px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.crumbs > * + *::before { content:"·"; margin-right:8px; color:var(--faint); }
.num-serif { font-family:var(--serif); font-variant-numeric:lining-nums tabular-nums; }

/* ---------- eyebrow / chips / tags ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font:500 11px/1 var(--sans); letter-spacing:.14em; color:var(--muted); margin-bottom:24px; text-transform:uppercase; }
.eyebrow i { width:18px; height:1px; background:var(--accent); display:inline-block; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); font-size:13.5px; color:var(--ink-2); line-height:1.2; }
label.chip { cursor:pointer; transition:box-shadow .15s, background .15s; }
.chip input { width:auto; margin:0; accent-color:var(--ink); }
.chip:has(input:checked) { box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); background:var(--surface); }
.tag { display:inline-flex; align-items:center; gap:5px; font:500 11px/1 var(--sans); letter-spacing:.02em; padding:4px 7px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--muted); vertical-align:2px; white-space:nowrap; }
.tag.chat { color:var(--chat); background:color-mix(in srgb, var(--chat) 9%, transparent); }
.tag.code { color:var(--code); background:color-mix(in srgb, var(--code) 10%, transparent); }
.tag.good { color:var(--up); background:color-mix(in srgb, var(--up) 10%, transparent); }
.tag.bad { color:var(--down); background:color-mix(in srgb, var(--down) 9%, transparent); }
.tag.accent { color:var(--accent); background:var(--accent-soft); }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
.dot.chat { background:var(--chat); } .dot.code { background:var(--code); } .dot.accent { background:var(--accent); } .dot.rival { background:var(--rival); }
.rival { color:var(--rival); font-weight:500; } .you { color:var(--accent); font-weight:500; }

/* ---------- buttons / inputs ---------- */
.btn, button { font:500 14px/1 var(--sans); height:40px; padding:0 18px; border-radius:999px; border:0; background:var(--ink); color:var(--bg); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap; transition:transform .15s var(--ease), opacity .15s, background .15s, box-shadow .15s; }
.btn:hover, button:hover { opacity:.86; }
.btn:active, button:active { transform:translateY(1px); }
.btn.ghost, button.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn.ghost:hover, button.ghost:hover { opacity:1; box-shadow:inset 0 0 0 1px var(--ink); }
.btn.sm, button.sm { height:32px; padding:0 14px; font-size:13px; }
.btn.lg, button.lg { height:48px; padding:0 24px; font-size:15px; }
.btn.block { width:100%; }
button:disabled { opacity:.5; cursor:default; }
.btn .arrow { transition:transform .15s var(--ease); }
.btn:hover .arrow { transform:translateX(2px); }
.oauth { justify-content:center; gap:10px; }
.oauth svg { width:18px; height:18px; flex:none; }

form { margin:0; }
.form { display:grid; gap:16px; }
label.field { display:grid; gap:6px; font-size:14px; font-weight:500; color:var(--ink); }
label.field .hint { font-weight:400; color:var(--muted); }
input, select, textarea { font:inherit; font-size:15px; height:42px; padding:0 12px; border:0; box-shadow:inset 0 0 0 1px var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); width:100%; transition:box-shadow .15s; }
textarea { height:auto; padding:10px 12px; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:focus, select:focus, textarea:focus { outline:none; box-shadow:inset 0 0 0 1px var(--ink); }
input[type=checkbox] { height:auto; width:auto; box-shadow:none; }
.inline { display:flex; gap:8px; flex-wrap:wrap; }
.inline > input { flex:1; min-width:220px; }

/* The grader bar: the hero component. */
.grader { display:flex; align-items:center; gap:6px; padding:6px 6px 6px 8px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-strong); max-width:560px; transition:box-shadow .2s; }
.grader:focus-within { box-shadow:inset 0 0 0 1px var(--ink); }
.grader .pre { font:400 15px/1 var(--mono); color:var(--faint); padding-left:12px; user-select:none; }
.grader input { flex:1; min-width:0; height:46px; box-shadow:none; background:transparent; font:400 16px/1 var(--mono); padding:0 4px; }
.grader input:focus { box-shadow:none; }
.grader button { height:46px; padding:0 22px; font-size:14.5px; }
.center .grader { margin:0 auto; }
.assure { display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--faint); margin-top:18px; }
.center .assure { justify-content:center; }
.assure span::before { content:none; }
@media (max-width:560px) {
  .grader { flex-wrap:wrap; padding:8px; border-radius:18px; }
  .grader .pre { display:none; }
  .grader input { padding:0 8px; }
  .grader button { width:100%; }
}

/* ---------- cards ---------- */
.card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); padding:24px; }
.card.flat { box-shadow:var(--ring); }
.card.soft { background:var(--surface-2); box-shadow:none; }
.card.pad-sm { padding:16px 18px; }
.card.float { box-shadow:var(--float); }
.notice { display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--ring); font-size:14px; margin:0 0 20px; color:var(--ink); }
.notice::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:8px; flex:none; }
.notice.bad::before { background:var(--down); }
.grid { display:grid; gap:8px; }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.gap16 { gap:16px; } .gap24 { gap:24px; }
@media (max-width:900px) { .g3, .g4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px) { .g2, .g3, .g4 { grid-template-columns:1fr; } }
.split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split.wide-r { grid-template-columns:5fr 7fr; }
@media (max-width:900px) { .split, .split.wide-r { grid-template-columns:1fr; gap:40px; } }
.row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }

/* ---------- stats / bars ---------- */
.stat { display:grid; gap:6px; align-content:start; }
.stat .n { font:400 44px/1 var(--serif); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.stat .l { color:var(--muted); font-size:14px; line-height:1.4; }
.stat .k { font:500 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.bars { display:grid; gap:12px; }
.bar-row { display:grid; grid-template-columns:minmax(64px, 30%) 1fr 44px; gap:14px; align-items:center; font-size:14px; color:var(--ink-2); }
.bar-row > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar { height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--faint); border-radius:999px; animation:grow 1.1s var(--ease) both; }
@keyframes grow { from { width:0; } }
.bar-row.self { color:var(--ink); font-weight:500; }
.bar-row.self .bar > i { background:var(--accent); }
.bar-row.top .bar > i { background:var(--ink-2); }
.bar-row .pct { text-align:right; font:400 13px/1 var(--mono); color:var(--ink); }
.meter { height:4px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.meter > i { display:block; height:100%; background:var(--ink); border-radius:999px; transition:width .4s var(--ease); }

/* ---------- tables ---------- */
.table-wrap { overflow-x:auto; margin:0 -4px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font:500 11px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-top:4px; }
tr:last-child td { border-bottom:0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.num { font-family:var(--mono); font-size:13px; }
td a.src { display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:13px; text-decoration:none; }
td a.src:hover { color:var(--ink); }

/* ---------- accordion ---------- */
details.acc { border-bottom:1px solid var(--line); }
details.acc:first-of-type { border-top:1px solid var(--line); }
details.acc > summary { list-style:none; cursor:pointer; padding:18px 0; display:flex; gap:12px; align-items:center; color:var(--ink); font-weight:400; font-size:16px; }
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary::after { content:"+"; margin-left:auto; font:300 20px/1 var(--sans); color:var(--faint); transition:transform .2s var(--ease); flex:none; }
details.acc[open] > summary::after { transform:rotate(45deg); }
details.acc .body { padding:0 0 20px; color:var(--muted); font-size:15px; white-space:pre-wrap; max-width:620px; }
details.acc .body.prose { white-space:normal; }

/* ---------- nav / footer ---------- */
.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap { height:60px; display:flex; align-items:center; gap:36px; }
.logo { display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font:500 21px/1 var(--serif); letter-spacing:-.015em; }
.logo svg { width:20px; height:20px; }
.nav .links { display:flex; gap:26px; font-size:14px; }
.nav .links a { color:var(--muted); text-decoration:none; transition:color .15s; }
.nav .links a:hover, .nav .links a[aria-current] { color:var(--ink); }
.nav .end { margin-left:auto; display:flex; gap:10px; align-items:center; }
.nav .end .text { font-size:14px; color:var(--muted); text-decoration:none; padding:0 8px; }
.nav .end .text:hover { color:var(--ink); }
@media (max-width:860px) { .nav .links { display:none; } }
@media (max-width:420px) { .nav .end .text { display:none; } }

.band-dark { background:var(--surface-2); color:var(--ink-2); }
.band-dark h2 { color:var(--ink); }
.band-dark .tone { color:var(--muted); }
.band-dark .assure { color:var(--faint); }
footer.site { background:var(--bg); color:var(--muted); font-size:14px; border-top:1px solid var(--line); }
footer.site .wrap { padding-top:72px; padding-bottom:40px; }
footer.site .logo { color:var(--ink); }
footer.site .cols { display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:32px; }
footer.site h4 { font:500 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 16px; }
footer.site ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
footer.site a { color:var(--muted); text-decoration:none; } footer.site a:hover { color:var(--ink); }
footer.site .legal { margin-top:64px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint); }
@media (max-width:760px) { footer.site .cols { grid-template-columns:1fr 1fr; } footer.site .cols > :first-child { grid-column:1 / -1; } }

/* ---------- product fragments ---------- */
.window { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--float); overflow:hidden; text-align:left; }
.window .bar-top { height:36px; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid var(--line); font:400 12px/1 var(--mono); color:var(--faint); }
.window .bar-top b { width:8px; height:8px; border-radius:50%; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-strong); }
.window .bar-top span { margin-left:10px; }
.window .inner { padding:28px; }
.verdict { font:400 clamp(22px, 2.6vw, 30px)/1.15 var(--serif); letter-spacing:-.015em; color:var(--ink); margin:0 0 20px; }
.mask-b { -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent); mask-image:linear-gradient(to bottom, #000 70%, transparent); }
.answer { font-size:14.5px; line-height:1.65; color:var(--ink-2); min-height:9.5em; }
.answer mark { background:none; color:inherit; font-weight:500; border-radius:3px; padding:0 2px; transition:background .3s, color .3s; }
.answer mark.lit.you { background:var(--accent-soft); color:var(--accent); }
.answer mark.lit.r { background:color-mix(in srgb, var(--rival) 10%, transparent); color:var(--rival); }
.answer .caret { display:inline-block; width:7px; height:1.05em; background:var(--ink); vertical-align:-2px; margin-left:1px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.pane-h { display:flex; align-items:center; gap:8px; font:500 11px/1 var(--sans); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.q { font-size:14px; color:var(--ink); background:var(--surface-2); padding:10px 14px; border-radius:12px; margin:0 0 14px; display:inline-block; }

/* Auto-advancing tabs (legacy pages). */
.tabs { display:grid; gap:8px; }
.tab { text-align:left; display:block; height:auto; width:100%; padding:18px 20px; border-radius:var(--r-md); background:transparent; color:var(--muted); box-shadow:none; position:relative; overflow:hidden; font:inherit; white-space:normal; }
.tab:hover { opacity:1; background:var(--surface); }
.tab h3 { color:inherit; display:flex; gap:10px; align-items:center; }
.tab h3 .n { font:500 12px/1 var(--mono); color:var(--faint); }
.tab p { margin:4px 0 0 28px; font-size:14px; display:none; }
.tab[aria-selected=true] { background:var(--surface); color:var(--ink); box-shadow:var(--ring); }
.tab[aria-selected=true] p { display:block; color:var(--muted); }
.tab .prog { position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); }
.tab[aria-selected=true] .prog { animation:prog 6s linear forwards; }
.tabs.paused .tab .prog { animation-play-state:paused; }
@keyframes prog { to { width:100%; } }
.panel[hidden] { display:none; }
.panel { animation:fadeup .5s var(--ease); }

/* Prompt marquee. */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); display:grid; gap:10px; }
.marquee .track { display:flex; gap:10px; width:max-content; animation:scroll 80s linear infinite; }
.marquee .track.rev { animation-direction:reverse; animation-duration:96s; }
.marquee:hover .track { animation-play-state:paused; }
.marquee .chip { white-space:nowrap; font-size:13.5px; }
@keyframes scroll { to { transform:translateX(-50%); } }

/* Bento (legacy pages). */
.bento .card { padding:24px; min-height:220px; display:flex; flex-direction:column; overflow:hidden; }
.bento .card .viz { margin-top:auto; padding-top:20px; }
.bento .span2 { grid-column:span 2; }
@media (max-width:620px) { .bento .span2 { grid-column:auto; } }

/* Doors. */
.door { display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit; transition:box-shadow .2s; min-height:240px; }
.door:hover { box-shadow:inset 0 0 0 1px var(--line-strong); }
.door .go { margin-top:auto; font-size:14px; color:var(--ink); font-weight:500; }

/* Pricing. */
.plan { display:flex; flex-direction:column; gap:12px; }
.plan .price { font:400 44px/1 var(--serif); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:lining-nums; }
.plan ul { list-style:none; padding:0; margin:8px 0 16px; display:grid; gap:8px; font-size:14px; }
.plan li::before { content:"—"; color:var(--faint); margin-right:10px; }
.plan .btn { margin-top:auto; }
.plan.featured { box-shadow:inset 0 0 0 1px var(--ink); }

/* Trend chart. */
.chart text { font:400 11px var(--mono); fill:var(--faint); }

/* Progress page. */
.steps { display:grid; gap:2px; margin-top:20px; }
.step { display:flex; gap:12px; align-items:center; padding:10px 0; font-size:14px; color:var(--faint); transition:color .3s; }
.step .ic { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-strong); flex:none; display:grid; place-items:center; }
.step.on { color:var(--ink); } .step.on .ic { box-shadow:inset 0 0 0 1px var(--ink); }
.step.on .ic::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
.step.done { color:var(--muted); } .step.done .ic { background:var(--ink); box-shadow:none; }
.step.done .ic::after { content:"✓"; color:var(--bg); font-size:10px; line-height:1; }
@keyframes pulse { 50% { transform:scale(.6); opacity:.6; } }

/* Prompt list rows in the app. */
.prow { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }
.prow:first-of-type { border-top:0; }
.prow.dim { opacity:.5; }
.prow .t { flex:1; color:var(--ink); }
.prow .t .tag { margin-left:6px; }

/* ---------- motion ---------- */
@keyframes fadeup { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.js [data-reveal] { opacity:0; transform:translateY(10px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i, 0) * 80ms); }
.js [data-reveal].in { opacity:1; transform:none; }
.rise { animation:fadeup .9s var(--ease) both; }
.rise.d1 { animation-delay:.08s; } .rise.d2 { animation-delay:.18s; } .rise.d3 { animation-delay:.28s; } .rise.d4 { animation-delay:.4s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js [data-reveal] { opacity:1; transform:none; }
  .marquee .track { transform:none; }
}

/* ---------- auth pages ---------- */
.auth { max-width:400px; margin:40px auto 0; }
.auth h1 { font-size:32px; letter-spacing:-.03em; margin-bottom:8px; }
.or { display:flex; align-items:center; gap:12px; color:var(--faint); font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; margin:20px 0; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }

/* ======================= Product (logged-in) ======================= */
/* Series colors: validated for colorblind separation (adjacent pairs) in both modes.
   s0 is always "you" (the brand accent); competitors keep their slot when filters change. */
:root { --s0:#B4532F; --s1:#2F6BA8; --s2:#B07A12; --s3:#0E8F7C; --s4:#7E4FA0; --s5:#6E8A22; --s6:#C9607E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s0:#D06A43; --s1:#5B8FCB; --s2:#B88625; --s3:#2BA591; --s4:#9D74C2; --s5:#7A9434; --s6:#C96E89; } }
:root[data-theme="dark"] { --s0:#D06A43; --s1:#5B8FCB; --s2:#B88625; --s3:#2BA591; --s4:#9D74C2; --s5:#7A9434; --s6:#C96E89; }

body.app-body main { min-height:0; }
.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 61px); }
.side { border-right:1px solid var(--line); padding:20px 14px; position:sticky; top:61px; height:calc(100vh - 61px); overflow-y:auto; display:flex; flex-direction:column; gap:18px; background:var(--bg); }
.side .switch { width:100%; }
.side .switch select { height:40px; font-weight:500; }
.side .who { padding:4px 10px 8px; }
.side .who b { display:block; color:var(--ink); font:400 22px/1.15 var(--serif); letter-spacing:-.01em; }
.side .who span { font:400 12px/1.4 var(--mono); color:var(--muted); }
.side nav { display:grid; gap:2px; }
.side nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--muted); font-size:14px; transition:background .15s, color .15s; }
.side nav a:hover { background:var(--surface-2); color:var(--ink); }
.side nav a[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--ring); }
.side nav a svg { width:15px; height:15px; flex:none; opacity:.7; }
.side nav .sep { height:1px; background:var(--line); margin:8px 4px; }
.side .foot { margin-top:auto; font-size:12px; color:var(--faint); display:grid; gap:6px; }
.content { min-width:0; padding:36px 44px 96px; max-width:1320px; }
.content h1 { font:400 36px/1.1 var(--serif); letter-spacing:-.02em; margin:0; }
.content h2 { font:500 16px/1.3 var(--sans); letter-spacing:-.01em; margin:48px 0 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.content .sub { color:var(--muted); font-size:14px; margin-top:6px; }
.content .lede { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.content .lede .sub { max-width:640px; }
.demo-band { background:var(--surface-2); color:var(--ink-2); font-size:13px; padding:8px 16px; text-align:center; border-bottom:1px solid var(--line); }
.demo-band a { color:inherit; font-weight:600; }
@media (max-width:960px) {
  .app { grid-template-columns:1fr; }
  .side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:12px 16px; gap:10px; }
  .side nav { display:flex; overflow-x:auto; gap:4px; padding-bottom:4px; }
  .side nav a { white-space:nowrap; }
  .side nav .sep, .side .foot, .side .who { display:none; }
  .content { padding:20px 16px 64px; }
}

/* Filter bar: one row above the charts. */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); margin-bottom:28px; position:sticky; top:60px; z-index:20; }
.filters select { height:32px; width:auto; font-size:13px; padding:0 28px 0 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong); background-color:transparent; }
.filters .seg { display:inline-flex; padding:2px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong); }
.filters .seg a { font-size:13px; padding:7px 12px; border-radius:999px; text-decoration:none; color:var(--muted); line-height:1; }
.filters .seg a[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--ring); }
.filters .meta { margin-left:auto; font:400 12px/1 var(--mono); color:var(--faint); }
@media (max-width:960px) { .filters { position:static; } .filters .meta { display:none; } }

/* KPI tiles. */
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:1100px) { .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.kpi { padding:22px 24px 22px 0; display:grid; gap:10px; align-content:start; min-width:0; }
.kpi + .kpi { padding-left:24px; border-left:1px solid var(--line); }
@media (max-width:1100px) { .kpi:nth-child(3) { padding-left:0; border-left:0; } .kpi:nth-child(n+3) { border-top:1px solid var(--line); } }
.kpi .k { font:500 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; gap:7px; align-items:center; }
.kpi .v { font:400 48px/1 var(--serif); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.kpi .v small { font-size:15px; color:var(--muted); letter-spacing:0; margin-left:2px; }
.kpi .n { font:400 12px/1.4 var(--sans); color:var(--faint); }
.ci { position:relative; height:4px; border-radius:999px; background:var(--surface-2); margin:2px 0; }
.ci { --cc:var(--s0); }
.ci i { position:absolute; top:0; bottom:0; border-radius:999px; background:color-mix(in srgb, var(--cc) 35%, transparent); }
.ci b { position:absolute; top:-3px; width:2px; height:10px; border-radius:1px; background:var(--cc); transform:translateX(-50%); }

/* Deltas: significance first. */
.delta { display:inline-flex; align-items:center; gap:4px; font:500 12px/1 var(--mono); padding:3px 0; white-space:nowrap; }
.delta.up { color:var(--up); }
.delta.down { color:var(--down); }
.delta.flat { color:var(--faint); }
.delta.none { color:var(--faint); background:transparent; padding-left:0; }

/* Charts. */
.chart-card { padding:22px 24px 14px; }
.chart-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px; }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--muted); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:12px; height:2px; border-radius:1px; display:inline-block; }
.chart { position:relative; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .grid line { stroke:var(--line); stroke-width:1; }
.chart .axis text { font:400 11px var(--mono); fill:var(--faint); }
.chart .band { opacity:.12; }
.chart .ln { fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; opacity:.9; }
.chart .ln.you { stroke-width:2.25; opacity:1; }
.chart .dot { stroke:var(--surface); stroke-width:2; }
.chart .xhair { stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.chart .endlabel { font:400 12px var(--sans); fill:var(--ink-2); }
.tip { position:absolute; pointer-events:none; z-index:30; min-width:180px; padding:10px 12px; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--float); font-size:13px; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; }
.tip.on { opacity:1; transform:none; }
.tip .t { font:500 11px/1 var(--mono); color:var(--faint); margin-bottom:8px; letter-spacing:.04em; }
.tip .r { display:flex; align-items:center; gap:8px; justify-content:space-between; padding:2px 0; color:var(--ink-2); }
.tip .r i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:6px; }
.tip .r b { font:500 12px var(--mono); color:var(--ink); }
.spark { width:88px; height:24px; display:block; }
.spark path { fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* Heatmap. */
.heat { border-collapse:separate; border-spacing:2px; width:100%; font-size:13px; }
.heat th { font:500 11px/1.3 var(--mono); color:var(--faint); text-transform:none; letter-spacing:0; padding:6px 8px; border:0; vertical-align:bottom; }
.heat th.row { text-align:left; color:var(--ink-2); font:400 13px/1.3 var(--sans); max-width:220px; }
.heat td { padding:0; border:0; }
.heat .cell { display:flex; align-items:center; justify-content:center; height:36px; min-width:64px; border-radius:4px; font:400 12px var(--mono); color:var(--ink); position:relative; text-decoration:none; }
.heat .cell.hi { color:#fff; }
.heat .cell.empty { background:transparent; color:var(--faint); box-shadow:inset 0 0 0 1px var(--line); }
.heat .cell:hover { outline:2px solid var(--ink); outline-offset:1px; }

/* Tables in the app. */
.dt { width:100%; border-collapse:collapse; font-size:14px; }
.dt th { position:sticky; top:0; background:var(--surface); }
.dt td, .dt th { padding:11px 12px; }
.dt tr.row-link { cursor:pointer; transition:background .12s; }
.dt tr.row-link:hover td { background:var(--surface-2); }
.dt td.t { color:var(--ink); max-width:520px; }
.dt a.cell-link { color:inherit; text-decoration:none; }
.dt .mini { display:flex; gap:2px; }
.dt .mini span { width:18px; height:18px; border-radius:4px; display:inline-block; }
.swatch { width:10px; height:10px; border-radius:3px; display:inline-block; vertical-align:0; margin-right:8px; flex:none; }
.pill-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
.pill-tabs a { font-size:13px; padding:7px 12px; border-radius:999px; text-decoration:none; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
.pill-tabs a[aria-current] { color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--ink); }
.pill-tabs a .count { margin-left:4px; color:inherit; opacity:.7; }
.stack { display:flex; height:10px; border-radius:999px; overflow:hidden; gap:2px; background:transparent; }
.stack i { display:block; height:100%; }
.stack i:first-child { border-radius:999px 0 0 999px; } .stack i:last-child { border-radius:0 999px 999px 0; }

/* Answer viewer. */
.answer-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
@media (max-width:1100px) { .answer-layout { grid-template-columns:1fr; } }
.prose { font-size:15px; line-height:1.7; color:var(--ink-2); overflow-wrap:anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-size:16px; margin:20px 0 8px; color:var(--ink); display:block; }
.prose p { margin:0 0 12px; } .prose ul, .prose ol { padding-left:22px; margin:0 0 12px; } .prose li { margin:4px 0; }
.prose a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.prose code { font:400 13px var(--mono); background:var(--surface-2); padding:1px 5px; border-radius:4px; }
.prose pre { background:var(--surface-2); padding:12px 14px; border-radius:var(--r-md); overflow-x:auto; }
.prose pre code { background:none; padding:0; }
.prose table { font-size:13px; margin:8px 0 16px; } .prose th { text-transform:none; letter-spacing:0; font:600 13px var(--sans); color:var(--ink); }
.prose blockquote { margin:0 0 12px; padding-left:14px; border-left:2px solid var(--line-strong); color:var(--muted); }
mark.hl { background:none; color:inherit; font-weight:600; border-radius:3px; padding:0 2px; }
mark.hl.you { background:color-mix(in srgb, var(--s0) 16%, transparent); color:var(--ink); box-shadow:inset 0 -2px 0 var(--s0); }
mark.hl.comp { background:color-mix(in srgb, var(--c) 12%, transparent); box-shadow:inset 0 -2px 0 var(--c); }
.cite-list { list-style:none; padding:0; margin:0; display:grid; gap:2px; counter-reset:c; }
.cite-list li { counter-increment:c; display:grid; grid-template-columns:22px 1fr; gap:6px; padding:7px 0; border-top:1px solid var(--line); font-size:13px; }
.cite-list li::before { content:counter(c); font:500 11px/1.6 var(--mono); color:var(--faint); }
.cite-list a { color:var(--ink); text-decoration:none; overflow-wrap:anywhere; } .cite-list a:hover { text-decoration:underline; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; } .kv dt { color:var(--muted); } .kv dd { margin:0; color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.check { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
.check:first-child { border-top:0; }
.check .ic { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; flex:none; background:transparent !important; box-shadow:inset 0 0 0 1px currentColor; }
.check .ic.ok { color:var(--up); } .check .ic.bad { color:var(--down); } .check .ic.warn { color:var(--muted); }
.two-one { grid-template-columns:minmax(0,2fr) minmax(0,1fr); } @media (max-width:1100px) { .two-one { grid-template-columns:1fr; } }
.chart .mark line { stroke:var(--ink); stroke-width:1; stroke-dasharray:2 3; opacity:.5; }
.chart .mark circle { fill:var(--ink); stroke:var(--surface); stroke-width:2; }
.opp { padding:20px 22px; display:grid; gap:12px; }
.opp .top { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.opp h3 { font-size:17px; margin:0; }
.opp .why { color:var(--ink-2); font-size:14px; margin:0; }
.opp .ev { display:flex; gap:6px; flex-wrap:wrap; }
.opp details summary { cursor:pointer; font-size:13px; font-weight:500; color:var(--ink); list-style:none; }
.opp details summary::before { content:"▸ "; color:var(--faint); }
.opp details[open] summary::before { content:"▾ "; }
.opp .brief { font-size:14px; color:var(--ink-2); padding:12px 16px; border-radius:var(--r-md); background:var(--surface-2); margin-top:10px; }
.opp .brief h4 { font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:14px 0 6px; }
.opp .brief h4:first-child { margin-top:0; }
.opp .brief ul, .opp .brief ol { margin:0; padding-left:20px; } .opp .brief li { margin:3px 0; }
.opp .acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.opp .acts form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.opp .acts input, .opp .acts select { height:32px; font-size:13px; width:auto; }
.prio { font:500 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:5px 8px; border-radius:6px; white-space:nowrap; }
.prio.high { background:var(--accent-soft); color:var(--accent); } .prio.medium { background:var(--surface-2); color:var(--ink); } .prio.low { color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
.impact { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; padding:14px; border-radius:var(--r-md); background:var(--surface-2); }
.impact .stat .n { font-size:24px; } @media (max-width:620px) { .impact { grid-template-columns:1fr; } }

/* agency: white-label, pitch banner, client report */
.wl-logo { height:28px; width:auto; max-width:160px; object-fit:contain; vertical-align:middle; margin-right:10px; }
.report-head .wl-logo { height:40px; display:block; margin:0 0 14px; }
.notice.pitch { align-items:center; flex-wrap:wrap; }
.notice.pitch form { margin-left:auto; }
.portfolio td .sub { display:block; font-size:12px; color:var(--muted); }
@media print {
  .nav, footer.site, .side, .no-print, .demo-band, .notice { display:none !important; }
  .app { display:block; }
  .content { padding:0; max-width:none; }
  .card, .kpi { break-inside:avoid; box-shadow:none; border:1px solid var(--line); }
  body { background:#fff; }
}
footer.site.wl { padding:20px 0; }
footer.site.wl .legal { margin:0; padding:0; border:0; }

/* ======================= Marketing ======================= */
.hero > .wrap > .frame { padding:112px 0 96px; }
.hero-copy { max-width:760px; }
.hero-copy .display { max-width:12ch; }
.hero-viz { margin-top:88px; }
@media (max-width:760px) { .hero > .wrap > .frame { padding:56px 0 64px; } .hero-viz { margin-top:56px; } }

.viz { position:relative; margin:0; }
.viz svg { display:block; width:100%; height:auto; overflow:visible; }
.viz-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.viz-title { font:400 19px/1.2 var(--serif); color:var(--ink); letter-spacing:-.01em; }
.viz-note { font-size:12.5px; color:var(--faint); margin:14px 0 0; }
.viz .g { stroke:var(--line); stroke-width:1; }
.viz .g.row { stroke-dasharray:1 4; stroke:var(--line-strong); }
.viz .ax { font:400 11px var(--mono); fill:var(--faint); }
.viz .rl { font:400 14px var(--sans); fill:var(--ink-2); }
.viz .colh { font:500 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; fill:var(--muted); }
.viz .pt { stroke:var(--bg); stroke-width:2; transition:opacity .2s; }
.viz .hit { fill:transparent; }
.viz .whisk { stroke-width:6; stroke-linecap:round; opacity:.22; }
.viz .slope { stroke-width:1.5; opacity:.85; }
.viz .you .slope { stroke-width:2.5; opacity:1; }
.viz .sl { font:400 13px var(--sans); fill:var(--muted); }
.viz .sl.strong { fill:var(--ink); font-weight:500; }
.viz .sl .v { font-family:var(--mono); font-size:12px; fill:var(--ink-2); }
.viz .band { opacity:.12; }
.viz .trend { fill:none; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.viz .mk { stroke:var(--ink); stroke-width:1; stroke-dasharray:2 4; opacity:.45; }
.viz .mkl { font:italic 400 14px var(--serif); fill:var(--muted); }
.viz .endv { font:400 26px var(--serif); fill:var(--ink); }
.viz .endd { font:500 12px var(--mono); fill:var(--up); }
.viz [data-tip] { cursor:default; outline:none; }
.viz.hovering [data-tip]:not(.hot) { opacity:.35; }
.viz [data-tip] { transition:opacity .2s; }
.viz .tip { min-width:170px; }

.steps-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.steps-list li { display:grid; grid-template-columns:56px 1fr; gap:8px; padding:26px 0; border-bottom:1px solid var(--line); }
.steps-list .n { font:400 13px/1.9 var(--mono); color:var(--faint); }
.steps-list b { display:block; font:400 24px/1.25 var(--serif); color:var(--ink); letter-spacing:-.01em; margin-bottom:6px; }
.steps-list span:not(.n) { color:var(--muted); font-size:15px; }
.viz-head .legend i { width:8px; height:8px; border-radius:50%; }
@media (max-width:760px) {
  .viz { overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; }
  .viz svg { min-width:640px; }
  .viz-head { position:sticky; left:0; }
}
footer.site.wl .wrap { padding-top:24px; padding-bottom:24px; }

/* ======================= Product pages, editorial pass ======================= */
.content .card.flat.table-wrap { background:transparent; box-shadow:none; padding:0 !important; border-radius:0; border-top:1px solid var(--line-strong); margin:0; }
.content .dt th { background:var(--bg); padding-top:12px; }
.content .dt td:first-child, .content .dt th:first-child { padding-left:0; }
.content .dt td:last-child, .content .dt th:last-child { padding-right:0; }
.content .dt tr.row-link:hover td { background:color-mix(in srgb, var(--surface) 70%, transparent); }
.dt tr.grp td { padding:22px 0 8px; border-bottom:1px solid var(--line); font:500 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:transparent !important; }
.answer-layout > aside { display:grid; gap:0; align-content:start; }
.answer-layout > aside > .card { background:transparent; box-shadow:none; border-radius:0; padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.answer-layout > aside > .card:last-child { border-bottom:0; }
.answer-layout > article.card { padding:32px 36px !important; }
.answer-layout .prose { font-size:16px; line-height:1.75; }

/* Ruled lists (opportunities, latest answers). */
.rlist { border-top:1px solid var(--line-strong); }
.rlist > .ri { display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px 28px; padding:24px 0; border-bottom:1px solid var(--line); }
.rlist > .ri .meta { font:500 11px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); display:grid; gap:6px; align-content:start; }
.rlist > .ri .meta .p-high { color:var(--accent); } .rlist > .ri .meta .p-medium { color:var(--ink-2); }
.rlist > .ri h3 { font:400 22px/1.25 var(--serif); letter-spacing:-.01em; margin:0 0 6px; }
.rlist > .ri .why { color:var(--muted); font-size:14.5px; margin:0 0 10px; max-width:760px; }
.rlist > .ri .who { font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px; margin-bottom:12px; }
.rlist > .ri .who b { color:var(--ink-2); font-weight:400; }
.rlist > .ri .who i { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:1px; }
.rlist > .ri details { margin-top:4px; }
.rlist > .ri details summary { font-size:13px; color:var(--ink); cursor:pointer; list-style:none; display:inline-flex; gap:6px; }
.rlist > .ri details summary::before { content:"+"; color:var(--faint); }
.rlist > .ri details[open] summary::before { content:"–"; }
.rlist > .ri .links { display:flex; gap:22px; flex-wrap:wrap; }
@media (max-width:760px) { .rlist > .ri { grid-template-columns:1fr; } }

/* Latest answers on a prompt. */
.alist { border-top:1px solid var(--line-strong); }
.alist a { display:grid; grid-template-columns:180px 90px minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.alist a:hover .snip { color:var(--ink-2); }
.alist .s { color:var(--ink); font-size:14.5px; }
.alist .st { font:400 12px var(--mono); color:var(--faint); } .alist .st.on { color:var(--accent); }
.alist .snip { font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alist .dots { display:flex; gap:4px; } .alist .dots i { width:7px; height:7px; border-radius:50%; }
@media (max-width:900px) { .alist a { grid-template-columns:1fr auto; } .alist .snip { display:none; } }

/* Runs x surfaces matrix. */
.matrix { border-collapse:separate; border-spacing:0; width:auto; }
.matrix th, .matrix td { border:0; padding:0; }
.matrix th { font:400 11px/1 var(--mono); color:var(--faint); text-transform:none; letter-spacing:0; padding:0 0 10px; text-align:center; width:44px; }
.matrix th.rl { text-align:left; width:auto; padding-right:24px; }
.matrix td.rl { font-size:14px; color:var(--ink-2); padding:6px 24px 6px 0; white-space:nowrap; }
.matrix td.c { text-align:center; height:30px; }
.matrix td.c a { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; text-decoration:none; font:500 10px var(--mono); }
.matrix td.c a.y { background:var(--s0); color:var(--bg); }
.matrix td.c a.n { box-shadow:inset 0 0 0 1px var(--line-strong); }
.matrix td.c a.n.r::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--faint); }
.matrix td.c a:hover { outline:1px solid var(--ink); outline-offset:2px; }
.matrix-key { display:flex; gap:20px; font-size:12.5px; color:var(--faint); margin-top:12px; align-items:center; }
.matrix-key span { display:inline-flex; gap:7px; align-items:center; }
.matrix-key i { width:12px; height:12px; border-radius:50%; display:inline-block; }
.rlist .opp .acts { margin-top:16px; }
.rlist .opp details[open] { flex-basis:100%; }
.rlist .opp .links details[open] { width:100%; }
.rlist .opp .impact { margin:4px 0 14px; background:transparent; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; }
.swatch { width:8px; height:8px; border-radius:50%; vertical-align:1px; }
.timeline { border-top:1px solid var(--line-strong); }
.tl { display:grid; grid-template-columns:150px minmax(0,1fr) 90px; gap:28px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.tl .when .d { display:block; font:400 20px/1.2 var(--serif); color:var(--ink); }
.tl .when .vs { font:400 11px var(--mono); color:var(--faint); }
.tl.quiet .when .d { color:var(--muted); font-size:17px; }
.tl .noise { margin:0; color:var(--faint); font-size:14px; }
.tl .ev { display:grid; grid-template-columns:20px 1fr; gap:8px; padding:4px 0 10px; }
.tl .ev .mk { font-size:11px; color:var(--faint); line-height:1.9; }
.tl .ev.good .mk { color:var(--up); } .tl .ev.bad .mk { color:var(--down); }
.tl .ev b { display:block; font-weight:500; color:var(--ink); font-size:15px; }
.tl .ev b a { color:inherit; text-decoration:none; } .tl .ev b a:hover { text-decoration:underline; text-underline-offset:3px; }
.tl .ev span { font-size:13.5px; color:var(--muted); }
.tl .vis { text-align:right; font:400 22px/1 var(--serif); color:var(--ink); }
.tl.quiet .vis { color:var(--muted); font-size:18px; }
.tl .vis span { display:block; font:400 11px var(--sans); color:var(--faint); margin-top:4px; }
@media (max-width:760px) { .tl { grid-template-columns:1fr auto; } .tl .what { grid-column:1 / -1; grid-row:2; } }

/* Leaderboards index. */
.lbi { margin-top:64px; border-top:1px solid var(--line-strong); }
.lbr { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 140px; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.lbr .nm { font:400 24px/1.2 var(--serif); color:var(--ink); letter-spacing:-.01em; }
.lbr:hover .nm { text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; }
.lbr .lead-brand { font-size:14.5px; color:var(--ink-2); }
.lbr .sz { text-align:right; font:400 12px var(--mono); color:var(--faint); }
.lbr.pending .nm { color:var(--muted); }
@media (max-width:760px) { .lbr { grid-template-columns:1fr auto; } .lbr .lead-brand { grid-column:1 / -1; grid-row:2; } }

/* Long-form documents: numbered sections, heading left, text right. */
.doc { margin-top:72px; border-top:1px solid var(--line-strong); }
.doc > section { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:32px; padding:40px 0; border-bottom:1px solid var(--line); scroll-margin-top:80px; }
.doc .h { display:flex; gap:16px; align-items:baseline; }
.doc .h .n { font:400 13px var(--mono); color:var(--faint); }
.page .doc h2 { font:400 28px/1.15 var(--serif); letter-spacing:-.015em; margin:0; display:block; }
.doc .b { font-size:16px; line-height:1.7; color:var(--ink-2); max-width:640px; }
.doc .b p { margin:0 0 14px; } .doc .b p:last-child { margin:0; }
.doc .dt { border-top:1px solid var(--line-strong); }
.doc .dt td:first-child, .doc .dt th:first-child { padding-left:0; }
@media (max-width:760px) { .doc > section { grid-template-columns:1fr; gap:14px; } }
.doc .dt th { background:transparent; }
.codeblock { background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r-md); padding:16px 18px; margin:12px 0; overflow-x:auto; }
.codeblock pre { font-size:12.5px; line-height:1.65; color:var(--ink-2); }
.doc .b .dt { font-size:13.5px; }
.doc .b h4, .doc .b .k { margin-top:18px; }

/* App chrome. */
.app-nav .who-am-i { font-size:13px; color:var(--faint); margin-right:4px; }
@media (max-width:620px) { .app-nav .who-am-i { display:none; } }
footer.app-foot .legal a { color:var(--faint); text-decoration:none; } footer.app-foot .legal a:hover { color:var(--ink); }
.table-wrap.bare { border-top:1px solid var(--line-strong); }
.table-wrap.bare .dt th { background:var(--bg); }
.table-wrap.bare .dt td:first-child, .table-wrap.bare .dt th:first-child { padding-left:0; }
.table-wrap.bare .dt td:last-child, .table-wrap.bare .dt th:last-child { padding-right:0; }

/* Settings-style panes: each .card child becomes a ruled section, its first h3 on the left. */
.panes { border-bottom:1px solid var(--line); margin-top:8px; }
.panes > .card { background:none; box-shadow:none; border-radius:0; padding:32px 0; border-top:1px solid var(--line); max-width:none !important; margin:0 !important;
  display:grid; grid-template-columns:220px minmax(0,660px); column-gap:56px; row-gap:0; align-items:start; align-content:start; }
.panes > .card > * { grid-column:2; margin-top:0; margin-bottom:14px; }
.panes > .card > :last-child { margin-bottom:0; }
.panes > .card > h3:first-child { grid-column:1; grid-row:1 / span 40; font:400 22px/1.2 var(--serif); letter-spacing:-.01em; margin:0; }
.panes > .card.form > * { margin-bottom:16px; }
.panes > .card > h3:not(:first-child) { font-size:14px; font-weight:500; margin-top:8px; }
.panes > .card.soft { background:none; }
.panes .prow:first-of-type { border-top:1px solid var(--line); }
@media (max-width:900px) { .panes > .card { grid-template-columns:1fr; } .panes > .card > h3:first-child { grid-row:auto; } }
.checks { border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); }
.checks .check { padding:22px 0; }
.checks .check + .check { border-top:1px solid var(--line); }
.checks .check b { font-weight:500; font-size:15.5px; }
.pmeta { display:block; font-size:12.5px; color:var(--faint); margin-top:3px; }
.bulkbar { padding:10px 0; margin-bottom:0; }
.bulkbar .chip { box-shadow:none; padding-left:0; }
.table-wrap.bare { margin:0; }
.track-band { margin:56px 0 0; padding:36px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.track-band h3 { font:400 26px/1.2 var(--serif); letter-spacing:-.01em; }
.page .kpis { margin-top:8px; }