/* Delvii. Editorial warmth (feather canvas, serif display) with conversion utility
   (one electric-lime action colour), alternating light and midnight sections on marketing pages.
   No inline styles anywhere: the CSP has no 'unsafe-inline', so every visual lives here. */
:root {
  /* brand palette */
  --maroon: #4A0C19; --midnight: #141412; --lime: #D8BF8A; --lime-deep: #C9AE74;
  --sky: #D8BF8A; --ocean: #4A0C19; --berry: #D8BF8A; --forrest: #6E8B6A; --forrest-rich: #004842;
  --cherry: #ff6038; --cherry-rich: #de2d02; --twilight: #5f5c53; --dusk: #b2ada1;
  --feather: #f6f3ed; --stone: #e5e0d6;

  /* semantic tokens (light) */
  --paper: var(--feather);   /* page ground */
  --sheet: #ffffff;          /* cards, tables */
  --ink: var(--midnight);    /* body text */
  --ink-2: var(--twilight);  /* secondary text */
  --rule: var(--stone);      /* hairlines */
  --accent: var(--maroon);   /* links, focus, emphasis */
  --accent-soft: #f1e6e9;
  --cta: var(--lime); --cta-ink: var(--midnight);
  --met: #037a53; --likely: #6F6140; --unknown: #6F6140; --fail: var(--cherry-rich);
  --met-bg: #ddf6ec; --likely-bg: #EFE6D2; --unknown-bg: #fbeedb; --fail-bg: #fde6e0;

  /* dark canvas (marketing sections that stay dark in both themes) */
  --night: var(--midnight); --night-2: #2a2c2f; --night-ink: #f6f3ed; --night-ink-2: #b2ada1; --night-rule: #3a3c40;

  --display: "Source Serif 4", "Lyon Display", Georgia, "Times New Roman", serif;
  --body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --radius: 8px; --radius-card: 12px;
  --shadow: 0 1px 3px rgba(11, 11, 10, 0.06);
  --shadow-up: 0 10px 40px rgba(11, 11, 10, 0.10);
  --wrap: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161719; --sheet: #141412; --ink: #f6f3ed; --ink-2: #b2ada1; --rule: #34363a;
    --accent: #f3a6c0; --accent-soft: #3a1a26;
    --met: #4fe0aa; --likely: #EFE6D2; --unknown: #f2c063; --fail: #ff8a6b;
    --met-bg: #0f2e23; --likely-bg: #0B0B0A; --unknown-bg: #33280f; --fail-bg: #3a1a12;
    --night: #0f1011; --night-2: #141412;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-up: 0 10px 40px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161719; --sheet: #141412; --ink: #f6f3ed; --ink-2: #b2ada1; --rule: #34363a;
  --accent: #f3a6c0; --accent-soft: #3a1a26;
  --met: #4fe0aa; --likely: #EFE6D2; --unknown: #f2c063; --fail: #ff8a6b;
  --met-bg: #0f2e23; --likely-bg: #0B0B0A; --unknown-bg: #33280f; --fail-bg: #3a1a12;
  --night: #0f1011; --night-2: #141412;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-up: 0 10px 40px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--body); }
body.app-body { font-size: 15px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; margin: 0; font-weight: 600; }
h1 { font-size: 2rem; line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: 1.25rem; line-height: 1.25; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
li + li { margin-top: var(--s1); }
code { font-family: var(--mono); }

.eyebrow { font: 600 0.72rem/1 var(--body); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 0.86rem; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- frame ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) max(var(--s4), calc((100% - var(--wrap)) / 2));
  background: color-mix(in srgb, var(--sheet) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar.on-dark { background: color-mix(in srgb, var(--night) 94%, transparent); border-bottom-color: var(--night-rule); }
.topbar.on-dark .brand, .topbar.on-dark nav a, .topbar.on-dark nav button.link { color: var(--night-ink); }
.topbar.on-dark .brand-sub { color: var(--night-ink-2); }
.topbar.on-dark nav a:hover, .topbar.on-dark nav button.link:hover { background: var(--night-2); color: var(--night-ink); }
.topbar.on-dark nav a.current { background: var(--night-2); color: var(--lime); }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
/* Delvii mark: a capped V in lime on a maroon tile (same artwork as /static/favicon.svg). */
.brand-mark { display: block; width: 36px; height: 36px; flex: none; }
.brand-mark .tile { fill: var(--maroon); }
.brand-mark .d { fill: var(--lime); }
.brand-mark .lens { fill: var(--sky); }
.brand-mark .spark { fill: var(--berry); }
.brand-name { font: 600 1.2rem/1.1 var(--display); letter-spacing: -0.01em; }
.brand-sub { display: block; font: 500 0.7rem/1.3 var(--body); color: var(--ink-2); letter-spacing: 0.02em; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
nav a, nav button.link {
  padding: 7px 12px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: 0.93rem; font-weight: 500;
}
nav a:hover, nav button.link:hover { background: var(--accent-soft); color: var(--ink); }
nav a.current { color: var(--ink); background: var(--accent-soft); }
nav a.button.cta, .topbar.on-dark nav a.button.cta { color: var(--cta-ink); }
nav a.button.cta:hover { background: var(--lime-deep); }
.who { font-family: var(--mono); font-size: 0.82rem; }
.nav-sep { width: 1px; height: 22px; background: var(--rule); margin-inline: var(--s2); }
.topbar.on-dark .nav-sep { background: var(--night-rule); }
@media (max-width: 720px) { .nav-public { display: none; } .nav-sep { display: none; } }

main.app { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--s4); padding-block: var(--s6) var(--s7);
           display: flex; flex-direction: column; gap: var(--s5); }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.row-between > div { min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.page-head > div { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.page-head > .actions { flex-direction: row; align-items: center; }
.section { display: flex; flex-direction: column; gap: var(--s3); }
.section-head { display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.count { font: 500 0.8rem/1 var(--mono); color: var(--ink-2); }

.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--s5); box-shadow: var(--shadow); }
.panel > * + * { margin-top: var(--s3); }
.narrow { max-width: 440px; width: 100%; margin-inline: auto; }

/* ---------- controls ---------- */
form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 600; font-size: 0.92rem; }
.field .hint { font-weight: 400; color: var(--ink-2); }
.fields { display: grid; gap: var(--s4); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }
/* Every place a client types looks like the Quick search box: a soft rounded panel with a light shadow and a glow
   when in use. One-line boxes are pills; boxes inside a composer (Quick, plain-text Deep, Devi) reset this themselves. */
input, textarea, select {
  width: 100%; padding: 13px 20px; font: inherit; color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 999px;
  box-shadow: 0 14px 32px -26px rgba(11, 11, 10, 0.45); transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink-2);
  box-shadow: 0 18px 40px -24px rgba(11, 11, 10, 0.5), 0 0 0 4px color-mix(in srgb, var(--lime) 55%, transparent); }
textarea { resize: vertical; line-height: 1.5; border-radius: 26px; padding: 18px 20px; font-size: 1.05rem; min-height: 96px; }
select { border-radius: 20px; }
input[type=radio], input[type=checkbox], input[type=range], input[type=file] { box-shadow: none; border-radius: revert; }
.check { display: flex; align-items: center; gap: var(--s2); font-weight: 500; }
.check input { width: auto; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 18px; font: 600 0.93rem/1.2 var(--body); border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
button:hover, .button:hover { border-color: var(--ink-2); }
.primary, .cta { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.primary:hover, .cta:hover { background: var(--lime-deep); border-color: var(--lime-deep); }
.button.lg { padding: 14px 24px; font-size: 1rem; }
.button.ghost { background: transparent; border-color: currentColor; color: inherit; }
.button.ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.button.dark { background: var(--midnight); border-color: var(--midnight); color: var(--feather); }
.button.dark:hover { background: #000; }
/* In dark mode a midnight button would vanish into the midnight cards, so invert it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button.dark { background: var(--feather); border-color: var(--feather); color: var(--midnight); }
  :root:not([data-theme="light"]) .button.dark:hover { background: #fff; border-color: #fff; }
}
:root[data-theme="dark"] .button.dark { background: var(--feather); border-color: var(--feather); color: var(--midnight); }
:root[data-theme="dark"] .button.dark:hover { background: #fff; border-color: #fff; }
.danger { color: var(--fail); }
.danger:hover { border-color: var(--fail); }
button.link { border: 0; background: none; font: inherit; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
form.inline { display: inline-flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
form.inline input { width: 180px; }

.alert { padding: var(--s3) var(--s4); border-radius: var(--radius); border: 1px solid; }
.alert.error { color: var(--fail); background: var(--fail-bg); border-color: transparent; }
.alert.ok { color: var(--met); background: var(--met-bg); border-color: transparent; }
.alert.info { color: var(--likely); background: var(--likely-bg); border-color: transparent; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font: 600 0.7rem/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); background: var(--paper); }
tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
td.role a { font-weight: 600; text-decoration: none; color: var(--ink); }
td.role a:hover { color: var(--accent); }

/* ---------- status + ratings ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font: 500 0.76rem/1.5 var(--mono); white-space: nowrap; background: var(--paper); color: var(--ink-2);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.done, .chip.met { color: var(--met); background: var(--met-bg); }
.chip.running, .chip.queued, .chip.likely { color: var(--likely); background: var(--likely-bg); }
.chip.running::before { animation: pulse 1.4s ease-in-out infinite; }
.chip.stopped, .chip.notfound { color: var(--unknown); background: var(--unknown-bg); }
.chip.failed, .chip.fails { color: var(--fail); background: var(--fail-bg); }
.chip.likely::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.chip.notfound::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip.fails::before { border-radius: 1px; transform: rotate(45deg); }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .chip.running::before { animation: none; } }

.flag {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: var(--radius);
  background: var(--unknown-bg); color: var(--unknown); font-size: 0.84rem; font-weight: 500;
}

/* ---------- verdict ---------- */
.verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: start; }
@media (max-width: 760px) { .verdict { grid-template-columns: 1fr; } }
.verdict-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.headline { font: 600 1.4rem/1.3 var(--display); text-wrap: balance; }
.verdict-line { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.verdict-tag { font: 600 0.82rem/1.4 var(--mono); padding: 3px 10px; border-radius: var(--radius); }
.verdict-tag.ready { background: var(--met-bg); color: var(--met); }
.verdict-tag.checks { background: var(--unknown-bg); color: var(--unknown); }
.verdict-tag.notready { background: var(--fail-bg); color: var(--fail); }
.tally { display: flex; gap: var(--s5); }
.tally div { display: flex; flex-direction: column; gap: 2px; }
.tally .n { font: 600 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.tally .l { font: 600 0.7rem/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }

/* ---------- candidate file ---------- */
.file { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow); }
.file-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); }
.file-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.file-id { font: 500 0.72rem/1 var(--mono); color: var(--ink-2); letter-spacing: 0.08em; }
.file-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--rule); }
.fact { padding: var(--s3) var(--s5); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fact + .fact { border-left: 1px solid var(--rule); }
@media (max-width: 600px) { .fact + .fact { border-left: 0; border-top: 1px solid var(--rule); } }
.fact .v { font-size: 0.92rem; }
.fact .big { font: 600 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.ledger { border-top: 1px solid var(--rule); overflow-x: auto; }
.ledger table td:first-child { width: 30%; font-weight: 500; }
.ledger table td:nth-child(2) { width: 1%; }
.ledger th { background: var(--sheet); }
.pref { font: 400 0.75rem var(--mono); color: var(--ink-2); }
.src { font: 500 0.72rem var(--mono); margin-left: 4px; text-decoration: none; }
.file-notes { border-top: 1px solid var(--rule); padding: var(--s4) var(--s5); display: grid; gap: var(--s3);
              grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.note { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.meter i { width: 12px; height: 6px; border-radius: 2px; background: var(--rule); }
.meter[data-level="3"] i, .meter[data-level="2"] i:nth-child(-n+2), .meter[data-level="1"] i:first-child { background: var(--maroon); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .meter[data-level] i { background: var(--rule); }
  :root:not([data-theme="light"]) .meter[data-level="3"] i, :root:not([data-theme="light"]) .meter[data-level="2"] i:nth-child(-n+2),
  :root:not([data-theme="light"]) .meter[data-level="1"] i:first-child { background: var(--lime); } }

.partial-list { display: grid; gap: var(--s3); }
.partial { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--s4) var(--s5);
           display: flex; flex-direction: column; gap: var(--s2); }
.ruled { display: grid; gap: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.ruled div { padding: 10px var(--s5); display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: var(--s4); }
.ruled div + div { border-top: 1px solid var(--rule); }
@media (max-width: 600px) { .ruled div { grid-template-columns: 1fr; gap: 2px; } }

.notes-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

details > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: var(--s2); align-items: center; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; font-size: 0.8em; color: var(--ink-2); transition: transform 0.15s; }
details[open] > summary::before { transform: rotate(90deg); }
details[open] > summary { margin-bottom: var(--s3); }

/* ---------- progress ---------- */
.progress-bar { height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--maroon); width: 0; transition: width 0.4s; }
ol.log { list-style: none; padding: 0; font-size: 0.9rem; max-height: 460px; overflow-y: auto;
         border-left: 2px solid var(--rule); margin-left: 4px; }
ol.log li { position: relative; padding: 3px 0 3px var(--s4); margin: 0; }
ol.log li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%;
                    background: var(--sheet); border: 2px solid var(--maroon); }
ol.log li:last-child::before { background: var(--maroon); }
ol.log .t { font: 400 0.75rem var(--mono); color: var(--ink-2); margin-right: var(--s2); }

/* ---------- login ---------- */
.login { min-height: 70vh; display: grid; place-items: center; }
.login .panel { display: flex; flex-direction: column; gap: var(--s4); }
.login .panel > * + * { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* sign-in card: social buttons, "or work email", pill fields */
.signin-stage { min-height: 72vh; display: grid; place-items: center; padding: var(--s5, 32px) 0; border-radius: 28px;
  background: radial-gradient(700px 380px at 15% 0%, rgba(216, 191, 138,0.35), transparent 70%),
              radial-gradient(600px 360px at 100% 100%, rgba(216, 191, 138,0.18), transparent 70%); }
.signin-card { width: min(440px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-radius: 28px;
  padding: 40px 36px 28px; box-shadow: 0 30px 70px -36px rgba(11, 11, 10,0.45); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 480px) { .signin-card { padding: 30px 20px 22px; } }
.signin-card h1 { font: 600 clamp(1.8rem, 5vw, 2.2rem)/1.1 var(--display); letter-spacing: -0.01em; margin: 0; }
.signin-card h1 em { font-style: italic; color: var(--accent); }
.signin-sub { color: var(--ink-2); margin: -8px 0 4px; }
.social { display: grid; gap: 12px; }
.social-btn { display: grid; grid-template-columns: 26px 1fr 14px; align-items: center; gap: 12px; padding: 15px 20px;
  border-radius: 999px; border: 1.5px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none;
  font-weight: 600; transition: border-color .15s, box-shadow .15s, transform .15s; }
.social-btn span:nth-child(2) { text-align: center; }
.social-btn svg { width: 24px; height: 24px; }
.social-btn .chev { color: var(--ink-2); font-size: 1.3rem; line-height: 1; }
.social-btn:hover { border-color: var(--ink-2); box-shadow: 0 8px 20px -12px rgba(11, 11, 10,0.4); transform: translateY(-1px); }
.or-rule { display: flex; align-items: center; gap: 14px; color: var(--ink-2); font-size: 0.88rem; margin: 4px 0; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.signin-form { display: grid; gap: 12px; }
.pill-input { width: 100%; min-height: 54px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--rule);
  background: var(--sheet); color: var(--ink); font: 400 1rem var(--body); }
.pill-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74, 12, 25,0.14); }
.pill-submit { min-height: 54px; border-radius: 999px; border: 0; cursor: pointer; background: var(--lime); color: var(--midnight);
  font: 600 1.02rem var(--body); transition: background .15s, transform .15s; }
.pill-submit:hover { background: var(--lime-deep); transform: translateY(-1px); }
.signin-alt { text-align: center; font-size: 0.9rem; margin: 0; }
.signin-alt a, .signin-sub a { color: var(--ink-2); }
.signin-foot { text-align: center; font-size: 0.9rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 16px; margin: 4px 0 0; }
.signin-foot a { color: var(--accent); font-weight: 600; }
.nothing h1 em { font-family: var(--display); font-style: italic; color: var(--accent); }
.nothing .button { align-self: flex-start; }

.footnote { font-size: 0.82rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: var(--s3); }
code.code { font: 600 1.4rem var(--mono); letter-spacing: 0.1em; }

/* =====================================================================
   Marketing pages: full-bleed canvases alternating feather and midnight.
   ===================================================================== */
.canvas { padding: var(--s9) max(var(--s4), calc((100% - var(--wrap)) / 2)); }
.canvas.tight { padding-block: var(--s7); }
.canvas.light { background: var(--paper); }
.canvas.white { background: var(--sheet); }
.canvas.dark { background: var(--night); color: var(--night-ink); }
.canvas.dark h1, .canvas.dark h2, .canvas.dark h3 { color: var(--night-ink); }
.canvas.dark .muted, .canvas.dark .eyebrow { color: var(--night-ink-2); }
.canvas.maroon { background: var(--maroon); color: var(--feather); }
.canvas.maroon h2 { color: var(--feather); }
.canvas.lime { background: var(--lime); color: var(--midnight); }
.canvas.lime h2 { color: var(--midnight); }
@media (max-width: 720px) { .canvas { padding-block: var(--s8); } }

.display { font: 600 clamp(2.6rem, 6.4vw, 4.6rem)/1.02 var(--display); letter-spacing: -0.025em; }
.display em { font-style: italic; font-weight: 500; color: var(--lime); }
.section-title { font: 600 clamp(2rem, 4.2vw, 3.1rem)/1.08 var(--display); letter-spacing: -0.02em; max-width: 18ch; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; max-width: 56ch; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.centered { text-align: center; align-items: center; margin-inline: auto; }
.centered .section-title, .centered .lede { margin-inline: auto; }

.pill {
  display: inline-flex; align-items: center; gap: var(--s2); padding: 5px 12px; border-radius: 999px;
  font: 600 0.78rem/1.2 var(--body); background: color-mix(in srgb, var(--lime) 18%, transparent); color: var(--lime);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent); width: fit-content;
}
.pill.on-light { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s7); align-items: center; padding-top: var(--s8); }
@media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero .lede { color: var(--night-ink-2); }
.hero-tag { font: 500 1.05rem/1.4 var(--display); font-style: italic; color: var(--night-ink); }
.hero-note { font-size: 0.85rem; color: var(--night-ink-2); }
.hero-art { position: relative; min-height: 800px; }
.hero-art .bingo { width: min(100%, 400px); }
.hero-art .bingo-head { gap: var(--s3); }
.hero-art .bingo-head strong { white-space: nowrap; }
.hero-art .team-board { background: var(--sheet); color: var(--ink); margin-bottom: var(--s4); }
.team-board.compact { padding: var(--s3) var(--s4); gap: var(--s2); }
.team-board.compact .team-head { font-size: 0.98rem; }
.team-board.compact ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.team-board.compact li { padding: 6px 10px; font-size: 0.82rem; }
.team-board.compact em { font-size: 0.68rem; padding: 3px 8px; }
@media (max-width: 520px) { .team-board.compact ul { grid-template-columns: minmax(0, 1fr); } }
.hero-team { display: inline-block; align-self: flex-start; padding: 6px 14px; border-left: 3px solid var(--lime); background: var(--night-2); font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.3 var(--display); color: var(--lime); }
@media (max-width: 960px) { .hero-art { min-height: 0; } }

/* bingo card: 3x3, no free square (bingo.SIZE); the landing demo art and the real cards share these classes */
.bingo {
  background: var(--feather); color: var(--midnight); border-radius: 16px; padding: var(--s4);
  box-shadow: var(--shadow-up); width: min(100%, 420px);
}
.bingo-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); }
.bingo-head strong { font: 600 1.1rem var(--display); }
.bingo-head span { font: 600 0.72rem var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--twilight); }
.bingo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bingo-grid > div {
  aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 8px;
  border-radius: 10px; background: #fff; border: 1px solid var(--stone);
  font: 600 clamp(0.78rem, 1.7vw, 0.98rem)/1.2 var(--body); color: var(--twilight);
}
.bingo-grid > .hit { background: var(--forrest); border-color: var(--forrest); color: var(--midnight); }  /* white on this green fails contrast */
.bingo-grid > .part { background: #fff3cc; border-color: #f0d77a; color: #6b5300; }
.bingo-grid > .line { box-shadow: inset 0 0 0 2px var(--lime); }
.bingo-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font: 500 0.74rem var(--body); color: var(--twilight); }
.bingo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bingo-legend i { width: 10px; height: 10px; border-radius: 3px; background: #fff; border: 1px solid var(--stone); }
.bingo-legend i.hit { background: var(--forrest); border-color: var(--forrest); }
.bingo-legend i.part { background: #fff3cc; border-color: #f0d77a; }
@media (prefers-reduced-motion: no-preference) {
  .bingo.animate .bingo-grid > .hit, .bingo.animate .bingo-grid > .part { animation: light-up 0.5s ease-out backwards; }
  .bingo.animate .bingo-grid > :nth-child(3n+1) { animation-delay: 0.15s; }
  .bingo.animate .bingo-grid > :nth-child(3n+2) { animation-delay: 0.35s; }
  .bingo.animate .bingo-grid > :nth-child(3n) { animation-delay: 0.55s; }
}
@keyframes light-up { from { background: #fff; color: var(--twilight); transform: scale(0.92); } }

/* floating candidate card in hero */
.float-card {
  position: absolute; right: 0; bottom: 0; width: min(78%, 330px);
  background: var(--sheet); color: var(--ink); border-radius: var(--radius-card); padding: var(--s4);
  box-shadow: var(--shadow-up); border: 1px solid var(--rule);
}
@media (max-width: 960px) { .float-card { position: static; margin-top: var(--s4); width: 100%; } }
.rank { display: flex; align-items: center; gap: var(--s3); }
.rank .medal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
               background: var(--lime); color: var(--midnight); font: 700 0.9rem var(--display); flex: none; }
.rank .who-name { font-weight: 700; }
.rank .who-role { font-size: 0.82rem; color: var(--ink-2); }
.rank .score { margin-left: auto; font: 600 1.6rem/1 var(--display); }
.rank .score small { font: 500 0.7rem var(--body); color: var(--ink-2); }

/* dimension bars: SVG so widths need no inline style */
.dims { display: grid; gap: 7px; margin-top: var(--s3); }
.dim { display: grid; grid-template-columns: 104px minmax(0, 1fr) 34px; align-items: center; gap: var(--s2); font-size: 0.78rem; }
.dim span:first-child { color: var(--ink-2); }
.dim svg { width: 100%; height: 6px; display: block; }
.dim svg .track { fill: var(--rule); }
.dim svg .fill { fill: var(--maroon); }
.dim svg .fill.bingo { fill: var(--forrest); }
.dim .v { font: 500 0.76rem var(--mono); text-align: right; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dim svg .fill:not(.bingo) { fill: var(--lime); } }
:root[data-theme="dark"] .dim svg .fill:not(.bingo) { fill: var(--lime); }

/* proof strip */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 820px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proof div { display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--maroon); padding-top: var(--s3); }
.proof .n { font: 600 clamp(2rem, 4vw, 2.8rem)/1 var(--display); letter-spacing: -0.02em; }
.proof .l { font-size: 0.92rem; color: var(--ink-2); }

/* bento grid */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.cell {
  grid-column: span 2; border-radius: 16px; padding: var(--s5); border: 1px solid var(--rule);
  background: var(--sheet); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; overflow: hidden;
}
.cell.wide { grid-column: span 4; }
.cell.half { grid-column: span 3; }
.cell.dark { background: var(--night); border-color: var(--night-rule); color: var(--night-ink); }
.cell.dark h3 { color: var(--night-ink); }
.cell.dark p { color: var(--night-ink-2); }
.cell.maroon { background: var(--maroon); border-color: var(--maroon); color: var(--feather); }
.cell.maroon h3 { color: var(--feather); }
.cell.maroon p { color: #e8cfd8; }
.cell.lime { background: var(--lime); border-color: var(--lime); color: var(--midnight); }
.cell.lime h3, .cell.lime p { color: var(--midnight); }
.cell h3 { font: 600 1.45rem/1.15 var(--display); letter-spacing: -0.01em; }
.cell p { color: var(--ink-2); }
.cell .art { margin-top: auto; padding-top: var(--s3); }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cell, .cell.wide, .cell.half { grid-column: span 2; } }
.cell-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
@media (max-width: 700px) { .cell-row { grid-template-columns: 1fr; } }

.prompt-bar { display: flex; align-items: center; gap: var(--s2); padding: 10px 12px; border-radius: 10px;
              background: var(--paper); border: 1px solid var(--rule); font-size: 0.86rem; color: var(--ink-2); }
.prompt-bar b { color: var(--ink); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.tag { padding: 4px 10px; border-radius: 999px; font: 600 0.74rem/1.3 var(--body); background: var(--accent-soft); color: var(--accent); }
.cell.dark .tag { background: var(--night-2); color: var(--lime); }
.cell.dark .prompt-bar { background: var(--night-2); border-color: var(--night-rule); color: var(--night-ink-2); }
.cell.dark .prompt-bar b { color: var(--night-ink); }

.mini-stack { display: grid; gap: 6px; }
.mini-stack div { display: flex; align-items: center; gap: var(--s2); padding: 8px 10px; border-radius: 9px;
                  background: color-mix(in srgb, var(--feather) 10%, transparent); border: 1px solid color-mix(in srgb, var(--feather) 18%, transparent);
                  font-size: 0.85rem; }
.mini-stack b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--midnight); font-size: 0.75rem; flex: none; }
.mini-stack em { margin-left: auto; font: 600 0.82rem var(--mono); font-style: normal; color: var(--lime); }

.toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); width: fit-content; }
.toggle span { padding: 5px 14px; border-radius: 999px; font: 600 0.8rem var(--body); color: var(--ink-2); }
.toggle span.on { background: var(--midnight); color: var(--feather); }
.mini-table { width: 100%; font-size: 0.78rem; margin-top: var(--s2); }
.mini-table th, .mini-table td { padding: 6px 8px; }
.mini-table th { font-size: 0.64rem; }

.file-badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
.file-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
                    background: color-mix(in srgb, var(--midnight) 8%, transparent); font: 600 0.82rem var(--body); }
.file-badges small { font-weight: 500; opacity: 0.7; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: var(--s5); border-radius: 16px; background: var(--night-2); border: 1px solid var(--night-rule);
        display: flex; flex-direction: column; gap: var(--s3); }
.step::before { counter-increment: step; content: "0" counter(step); font: 600 2.6rem/1 var(--display); color: var(--lime); }
.step h3 { font: 600 1.4rem/1.2 var(--display); }
.step p { color: var(--night-ink-2); }
.step .chips .tag { background: var(--night); color: var(--feather); }

.quote-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
@media (max-width: 860px) { .quote-card { grid-template-columns: 1fr; } }
.quote-card blockquote { margin: 0; font: 500 clamp(1.3rem, 2.4vw, 1.75rem)/1.35 var(--display); font-style: italic; }
.summary-box { padding: var(--s5); border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s3); }
.summary-box p { font-size: 0.93rem; }

/* full hiring process (/process): a horizontal line of milestones, vertical on small screens */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s2); }
.milestone { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 0; }
.milestone h3 { font: 600 0.98rem/1.2 var(--display); margin-top: 4px; }
.milestone p { font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }
.dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; position: relative; z-index: 1;
       border: 2px solid var(--ink-2); background: var(--sheet); }
.milestone.done .dot, .dot.done { background: var(--maroon); border-color: var(--maroon); }
.milestone.done .dot::after, .dot.done::after { content: "✓"; color: var(--lime); font: 700 0.8rem/1 var(--body); }
/* The line: each milestone draws the segment to the next one; solid between finished steps, dashed after. */
.milestone:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 14px); width: calc(100% - 28px + var(--s2));
                                     border-top: 2px dashed var(--rule); }
.milestone.done:has(+ .done)::after { border-top: 2px solid var(--maroon); }
.timeline.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timeline.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* /process: dark hero, a maroon card for Delvii's stages, an ocean-accented card for the consultants' stages */
.process-hero .lede { color: var(--night-ink-2); max-width: 62ch; }
.process-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.process-legend span { padding: 6px 14px; border-radius: 999px; font: 500 0.8rem var(--mono); letter-spacing: 0.02em; }
.process-legend .tag-delvii { background: var(--maroon); color: var(--lime); }
.process-legend .tag-consult { border: 1px solid var(--sky); color: var(--sky); }
.process-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s5); }
@media (max-width: 1100px) { .process-split { grid-template-columns: minmax(0, 1fr); } }
.process-part { display: flex; flex-direction: column; gap: var(--s6); padding: var(--s6) var(--s5); border-radius: 22px; }
.process-head { display: flex; flex-direction: column; gap: 6px; }
.process-head .badge { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font: 500 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.process-head h2 { font: 600 clamp(1.8rem, 3vw, 2.4rem)/1 var(--display); letter-spacing: -0.02em; }
.process-head p { font: italic 500 1.02rem var(--display); }
.milestone .stage { font: 500 0.72rem var(--mono); letter-spacing: 0.08em; }
.milestone h3 { font-size: 1.08rem; }

.process-part.delvii { background: var(--maroon); color: var(--feather); box-shadow: var(--shadow-up); }
.process-part.delvii .badge { background: var(--lime); color: var(--midnight); }
.process-part.delvii .process-head h2 { color: var(--feather); }
.process-part.delvii .process-head p { color: var(--lime); }
.process-part.delvii .milestone h3 { color: var(--feather); }
.process-part.delvii .milestone p { color: color-mix(in srgb, var(--feather) 72%, transparent); }
.process-part.delvii .milestone .stage { color: var(--lime); }
.process-part.delvii .milestone.done .dot { background: var(--lime); border-color: var(--lime); }
.process-part.delvii .milestone.done .dot::after { color: var(--maroon); }
.process-part.delvii .milestone.done:has(+ .done)::after { border-color: var(--lime); }

.process-part.consultants { background: var(--sheet); border: 2px dashed color-mix(in srgb, var(--ocean) 45%, transparent); }
.process-part.consultants .badge { background: color-mix(in srgb, var(--sky) 35%, transparent); color: var(--ocean); }
.process-part.consultants .process-head h2 { color: var(--ocean); }
.process-part.consultants .process-head p { color: var(--ink-2); }
.process-part.consultants .milestone .dot { border-color: var(--ocean); background: color-mix(in srgb, var(--sky) 25%, var(--sheet)); }
.process-part.consultants .milestone::after { border-color: color-mix(in srgb, var(--ocean) 55%, transparent); }
.process-part.consultants .milestone .stage { color: var(--ocean); }

h2 em.accent { font-style: italic; color: var(--ocean); }
#how .steps-more { color: var(--ink-2); }
h2 em.accent-lime { font-style: italic; color: var(--lime); }
.adds.plus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .adds.plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .adds.plus-grid { grid-template-columns: minmax(0, 1fr); } }
.adds.plus-grid > div { border: 0; color: var(--midnight); padding: var(--s5); border-radius: 20px; }
.adds.plus-grid > div p { color: color-mix(in srgb, var(--midnight) 78%, transparent); }
.adds.plus-grid h3 { font-size: 1.35rem; }
.adds.plus-grid .olive { background: #dfe3b8; }  /* matte olive: calmer than lime, so the text reads easily */
.adds.plus-grid .sky { background: var(--sky); }
.adds.plus-grid .berry { background: var(--berry); }
.adds.plus-grid .mint { background: color-mix(in srgb, var(--forrest) 55%, #fff); }
.plus { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s4); border-radius: 50%; background: var(--midnight); color: var(--lime); font: 600 1.6rem/1 var(--display); }
.timeline-key { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 0.88rem; color: var(--ink-2); }
.timeline-key span { display: inline-flex; align-items: center; gap: 8px; }
.timeline-key .dot { width: 18px; height: 18px; }
.timeline-key .dot.done::after { font-size: 0.6rem; }
@media (max-width: 900px) {
  .timeline, .timeline.cols-4, .timeline.cols-6 { grid-template-columns: 1fr; gap: var(--s4); }
  .milestone { align-items: flex-start; text-align: left; padding-left: 44px; min-height: 28px; }
  .milestone .dot { position: absolute; left: 0; top: 0; }
  .milestone h3 { margin-top: 3px; }
  .milestone:not(:last-child)::after { top: 30px; left: 13px; width: 0; height: calc(100% - 30px + var(--s4));
                                       border-top: 0; border-left: 2px dashed var(--rule); }
  .milestone.done:has(+ .done)::after { border-top: 0; border-left: 2px solid var(--maroon); }
}
.handover { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
@media (max-width: 860px) { .handover { grid-template-columns: 1fr; } }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.promises li { margin: 0; padding: var(--s4); border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-rule); color: var(--night-ink-2); }
.promises strong { color: var(--night-ink); }
.handover-note { margin-top: var(--s4); }
.steps-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); color: var(--night-ink-2); }

/* what automation adds (home page) */
.adds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 900px) { .adds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .adds { grid-template-columns: 1fr; } }
.adds > div { padding: var(--s4); border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); }
.adds h3 { font: 600 1.1rem/1.25 var(--display); margin-bottom: 6px; }
.adds p { font-size: 0.93rem; color: var(--ink-2); }

/* comparison table and pricing (home page) */
.compare table { font-size: 0.93rem; background: var(--sheet); }
.compare th[scope="row"] { width: 18%; background: transparent; }
.compare .us { background: color-mix(in srgb, var(--lime) 22%, transparent); }
.compare thead .us { color: var(--midnight); }
.price-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s6); align-items: start; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { display: flex; flex-direction: column; gap: var(--s3); }
.price { font: 500 1.05rem var(--body); color: var(--ink-2); }
.price span { font: 600 clamp(2.4rem, 5vw, 3.2rem)/1 var(--display); color: var(--ink); letter-spacing: -0.02em; margin-right: 4px; }
.ticks { display: grid; gap: 6px; padding-left: 1.2em; margin: 0; }
.savings h3 { font: 600 1.15rem/1.3 var(--display); margin-bottom: 4px; }
.sources { padding-left: 1.4em; margin: 0; display: grid; gap: 2px; }

/* refer a friend (home page) */
.refer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 900px) { .refer-layout { grid-template-columns: 1fr; } }
.refer-layout .eyebrow { color: var(--midnight); }
.refer-card { color: var(--ink); box-shadow: var(--shadow-up); }

/* private pricing page: make the value impossible to miss */
.value-big { font: 600 clamp(2.6rem, 7vw, 5.2rem)/1.02 var(--display); letter-spacing: -0.02em; color: var(--night-ink); }
.value-big span { color: var(--lime); }
.value-sub { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--night-ink-2); max-width: 60ch; }
.value-sub strong { color: var(--lime); font-weight: 700; }
.value-bars { display: flex; flex-direction: column; gap: var(--s4); max-width: 900px; }
.value-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s3); align-items: baseline; }
.value-bar svg { grid-column: 1 / -1; width: 100%; height: 18px; }
.value-bar .track { fill: var(--night-2); }
.canvas.value { padding-top: 0; }
.value-bar .who { font: 600 1rem var(--body); color: var(--night-ink); }
.value-bar .amount { font: 600 1.1rem var(--display); color: var(--night-ink-2); }
.value-bar.senior .fill { fill: var(--cherry); }
.value-bar.person .fill { fill: var(--dusk); }
.value-bar.delvii .fill { fill: var(--lime); }
.value-bar.delvii .who { color: var(--lime); font-size: 1.15rem; }
.value-bar.delvii .amount { color: var(--lime); font-size: 1.25rem; }
.value-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 860px) { .value-tiles { grid-template-columns: minmax(0, 1fr); } }
.value-tiles .tile { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: 16px; color: var(--midnight); }
.value-tiles .tile .n { font: 600 clamp(2.2rem, 4.5vw, 3.4rem)/1 var(--display); letter-spacing: -0.02em; }
.value-tiles .tile .l { font-size: 0.95rem; line-height: 1.4; }
.value-tiles .lime { background: var(--lime); }
.value-tiles .sky { background: var(--sky); }
.value-tiles .berry { background: var(--berry); }
.bonus { list-style: none; margin: 0; padding: var(--s3) var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s3);
         border-radius: var(--radius); background: color-mix(in srgb, var(--lime) 35%, transparent); font-weight: 600; font-size: 0.92rem; }
.bonus b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--midnight); color: var(--lime); font-size: 0.85rem; }

/* Poster type: heavy condensed capitals, stacked tight like a T-shirt print; serif italics as the contrast. */
:root { --poster: "Anton", Impact, "Arial Narrow", sans-serif; }
.poster { font-family: var(--poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; }
.poster em { font-family: var(--display); text-transform: none; font-style: italic; letter-spacing: -0.01em; }
.display.poster { font-size: clamp(3.2rem, 7.6vw, 6.4rem); line-height: 0.92; }
.display.poster span { display: block; }
.display.poster .hl { color: var(--lime); }
.marketing-body .section-title { font-family: var(--poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em;
                                 line-height: 0.98; font-size: clamp(2.3rem, 5.2vw, 4rem); max-width: 16ch; }
.marketing-body .section-title em { font-family: var(--display); text-transform: none; letter-spacing: -0.01em; }
.eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: 0.16em; }
.hero-sub { font: 500 clamp(1.25rem, 2.2vw, 1.6rem)/1.3 var(--display); color: var(--night-ink); }
.hero-sub em { color: var(--lime); }
/* "Not your average recruiting tool": the hero's why, as the same coloured tiles and poster type used across the site. */
.not-average { max-width: 54ch; display: flex; flex-direction: column; gap: var(--s3); }
.not-average h2 { margin: 0; font: 400 clamp(1.7rem, 2.9vw, 2.3rem)/1 var(--poster); text-transform: uppercase;
                  letter-spacing: 0.01em; color: var(--night-ink); }
.not-average h2 em { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--lime); }
.na-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.na-tiles li { display: flex; flex-direction: column; gap: 4px; padding: var(--s3) var(--s4) var(--s4); border-radius: 16px;
               color: var(--midnight); font-size: 0.86rem; line-height: 1.4; }
.na-tiles li:nth-child(odd) { transform: rotate(-1deg); }
.na-tiles li:nth-child(even) { transform: rotate(1deg) translateY(6px); }
.na-tiles .sky { background: var(--sky); }
.na-tiles .lime { background: var(--lime); }
.na-tiles .berry { background: var(--berry); }
.na-tiles .mint { background: color-mix(in srgb, var(--forrest) 55%, #fff); }
.na-tiles svg { width: 26px; height: 26px; fill: none; stroke: var(--midnight); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.na-tiles b { font: 400 1.2rem/1.05 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.na-tiles span { color: color-mix(in srgb, var(--midnight) 82%, transparent); }
@media (max-width: 560px) { .na-tiles { grid-template-columns: minmax(0, 1fr); } .na-tiles li { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .na-tiles li { transform: none !important; } }
.hero-art .stamp { position: absolute; z-index: 3; top: 205px; right: 0; width: 132px; height: 132px; animation: stamp-turn 28s linear infinite; }
.stamp .disc { fill: var(--lime); }
.stamp .ring-text { font: 500 14.5px var(--mono); letter-spacing: 2.4px; fill: var(--midnight); }
.stamp .tile { fill: var(--maroon); }
.stamp .d { fill: var(--lime); }
.stamp .lens { fill: var(--sky); }
.stamp .spark { fill: var(--berry); }
@keyframes stamp-turn { to { transform: rotate(360deg); } }
@media (max-width: 960px) { .hero-art .stamp { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-art .stamp { animation: none; } }

/* search page: a dark banner header in poster type, and colour on the verdict and the numbers */
.search-hero { padding: var(--s6) var(--s5); border-radius: 22px; color: var(--night-ink);
               background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--maroon) 85%, transparent) 0%, transparent 55%), var(--midnight); }
.search-hero h1 { color: var(--night-ink); font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 22ch; }
.search-hero .eyebrow { color: var(--lime); }
.search-hero .muted { color: var(--night-ink-2); }
.search-hero .button:not(.cta) { background: transparent; color: var(--night-ink); border-color: var(--night-rule); }
#progress h2.poster { font-size: 2rem; }
.verdict .headline { font: 600 clamp(1.4rem, 2.4vw, 1.9rem)/1.25 var(--display); }
.tally .n { font-family: var(--poster); font-weight: 400; color: var(--maroon); }
.section-head h2 { font-family: var(--poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.9rem; }

/* live search progress: a status ring that turns anticlockwise, and a step tracker for the stages */
.live-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s4);
                 padding: var(--s4) var(--s5); border-radius: 16px; background: var(--midnight); color: var(--feather); }
.stage-ring { display: inline-flex; align-items: center; gap: var(--s3); min-width: 200px;
              font: 400 1.7rem/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; color: var(--lime); }
.stage-ring svg { width: 52px; height: 52px; flex: none; animation: spin-ccw 1.2s linear infinite; }
.stage-ring .track { fill: none; stroke: var(--night-rule); stroke-width: 5; }
.stage-ring .arc { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 38 88; }
.live-progress[data-status="queued"] .stage-ring .arc { stroke: var(--dusk); }
.live-progress[data-status="queued"] .stage-ring { color: var(--night-ink); }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
.stage-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.stage-steps li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--night-rule); color: var(--night-ink-2);
                  font: 500 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.stage-steps li.done { background: color-mix(in srgb, var(--forrest) 55%, #fff); border-color: transparent; color: var(--midnight); }
.stage-steps li.done::before { content: "✓ "; }
.stage-steps li.current { background: var(--lime); border-color: var(--lime); color: var(--midnight); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .stage-ring svg { animation-duration: 6s; } }

.added-info { margin-top: var(--s5); padding: var(--s4); border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--rule); }
.note-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.note-list:empty { display: none; }
.note-list li { font-size: 0.92rem; }

.internal-only { border: 2px dashed var(--maroon); background: var(--accent-soft); }
.internal-only .eyebrow { color: var(--maroon); }

/* Devi: floating hiring assistant (app pages) and the "Ask Devi" bar under search results */
.vv-nav { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 0;
          background: var(--maroon); color: var(--lime); font: 600 0.88rem var(--body); cursor: pointer; }
.vv-nav:hover { filter: brightness(1.15); }
.vv-fab { position: fixed; z-index: 60; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px;
          padding: 12px 18px 12px 14px; border: 0; border-radius: 999px; cursor: pointer; background: var(--maroon); color: var(--feather);
          font: 600 1rem "Fredoka", var(--body); box-shadow: 0 12px 30px rgba(74, 12, 25, 0.35); }
.vv-fab:hover { transform: translateY(-1px); }
.vv-spark, .vv-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
                        background: var(--lime); color: var(--maroon); font-size: 1rem; flex: none; }
.vv-panel { position: fixed; z-index: 61; right: 22px; bottom: 86px; width: min(400px, calc(100vw - 32px));
            height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden;
            background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow-up); }
.vv-panel[hidden] { display: none; }
.vv-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--midnight); color: var(--feather); }
.vv-head div { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.vv-head strong { font: 600 1.15rem "Fredoka", var(--body); }
.vv-head span:not(.vv-avatar) { font-size: 0.78rem; color: var(--night-ink-2); }
.vv-icon { border: 0; background: transparent; color: inherit; font-size: 1.05rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.vv-icon:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.vv-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); }
.vv-msg { margin: 0; max-width: 88%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; font-size: 0.94rem; line-height: 1.45; }
.vv-msg.assistant { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 4px; }
.vv-msg.user { align-self: flex-end; background: var(--maroon); color: var(--feather); border-bottom-right-radius: 4px; }
.vv-msg.error { background: var(--fail-bg); color: var(--fail); }
.vv-msg.typing::after { content: "Devi is thinking…"; color: var(--ink-2); font-style: italic; }
.vv-request { margin-top: var(--s3); padding: var(--s3); border-radius: 12px; background: color-mix(in srgb, var(--lime) 40%, var(--sheet));
              display: flex; flex-wrap: wrap; gap: var(--s2); white-space: normal; }
.vv-request p { flex-basis: 100%; margin: 0 0 4px; font-size: 0.88rem; }
.vv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s4) var(--s2); }
.devi.has-chat .vv-chips { display: none; }
.vv-form { display: flex; gap: var(--s2); align-items: flex-end; padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); }
.vv-form textarea { flex: 1; resize: none; min-height: 44px; }
@media (max-width: 560px) { .vv-fab span:last-child { display: none; } .vv-panel { right: 16px; bottom: 80px; } }

.vv-results { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; margin-top: var(--s5);
              border: 2px solid var(--maroon); }
.vv-results-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--midnight); color: var(--feather); }
.vv-results-head div { flex: 1; }
.vv-results-head h2 { color: var(--feather); font-size: 1.9rem; }
.vv-results-head .muted { color: var(--night-ink-2); }
.vv-results .vv-log { max-height: 460px; min-height: 0; }
.vv-results .vv-log:empty { display: none; }
.vv-results .vv-chips { padding-top: var(--s4); }

/* admin: client pricing links */
.copy-link { width: 100%; min-width: 260px; font: 0.8rem var(--mono); }
.offer-hero { padding-top: var(--s7); }

/* the three outcomes on the home page */
.outcomes > div { border-top: 3px solid var(--maroon); border-radius: 0 0 16px 16px; }
.outcomes h3 { font-size: 1.7rem; letter-spacing: -0.01em; margin-bottom: var(--s2); }
.hero-note a { color: var(--lime); }
.hero-label { font: 500 0.95rem/1.3 var(--body); color: var(--night-ink-2); letter-spacing: 0.01em; }
.hero-label strong { font: 600 1.05rem var(--display); color: var(--lime); margin-right: 2px; }

/* build a team */
.team-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
@media (max-width: 900px) { .team-layout { grid-template-columns: minmax(0, 1fr); } }
.team-board { display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--shadow-up); }
.team-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font: 600 1.1rem var(--display); }
.team-board ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.team-board li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); font-weight: 500; }
.team-board em { font: 600 0.78rem var(--body); font-style: normal; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.team-board em.ready { background: var(--met-bg); color: var(--met); }
.team-board em.running { background: var(--likely-bg); color: var(--likely); }
.refer-reward { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--midnight); color: var(--lime); font: 500 1.05rem/1.3 var(--display); }
.refer-reward strong { color: #fff; font-weight: 700; }

/* testimonial */
.testimonial { margin: 0 auto; max-width: 46rem; display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.testimonial .stars { color: var(--maroon); font-size: 1.25rem; letter-spacing: 0.15em; }
.testimonial blockquote { margin: 0; font: 500 clamp(1.5rem, 3vw, 2.2rem)/1.3 var(--display); font-style: italic; }
.testimonial figcaption { color: var(--ink-2); font-size: 0.92rem; }
.testimonial figcaption::before { content: "— "; }

/* request access (contact) */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: var(--s5); } }
.contact-steps { display: grid; gap: var(--s3); padding-left: 1.3em; }
.contact-steps li { margin: 0; color: var(--ink-2); }
.contact-steps strong { color: var(--ink); }
.contact-card { box-shadow: var(--shadow-up); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* referral strip */
.referral { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
.referral h2 { font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--display); max-width: 22ch; }
.referral .code-box { display: inline-flex; align-items: center; gap: var(--s3); padding: 10px 10px 10px 18px; border-radius: 12px;
                      background: var(--midnight); color: var(--lime); font: 600 1rem var(--mono); letter-spacing: 0.06em; }

/* footer */
.site-footer { background: var(--night); color: var(--night-ink-2); padding: var(--s7) max(var(--s4), calc((100% - var(--wrap)) / 2)) var(--s5); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: span 2; } }
.site-footer h4 { margin: 0 0 var(--s3); font: 600 0.74rem var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-ink); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.site-footer li { margin: 0; }
.site-footer a { color: var(--night-ink-2); text-decoration: none; font-size: 0.92rem; }
.site-footer a:hover { color: var(--lime); }
.site-footer .brand { color: var(--night-ink); margin-bottom: var(--s3); }
.site-footer .brand-sub { color: var(--night-ink-2); }
.footer-base { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--night-rule); font-size: 0.82rem;
               display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); }

/* =====================================================================
   Intake questionnaire + Quality Bingo review
   ===================================================================== */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr; } }
select {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
select:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocean) 22%, transparent); }
.field-error { color: var(--fail); font-size: 0.84rem; font-weight: 500; }

.callout { display: flex; flex-direction: column; gap: 4px; padding: var(--s4) var(--s5); border-radius: var(--radius-card);
           background: var(--lime); color: var(--midnight); }
.callout strong { font: 600 1.15rem/1.2 var(--display); }

.intake { display: flex; flex-direction: column; gap: var(--s4); }
.step-panel { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.step-panel[hidden] { display: none; }
.step-panel > * + * { margin-top: 0; }
.step-panel legend { float: left; width: 100%; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.step-panel legend + * { clear: both; }
.step-panel h2 { font-size: 1.6rem; }

.stepper { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.stepper li { margin: 0; }
.stepper button {
  width: 100%; justify-content: flex-start; gap: var(--s2); padding: 10px 12px; background: var(--sheet);
  font-weight: 500; color: var(--ink-2); text-align: left;
}
.stepper b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
             background: var(--paper); border: 1px solid var(--rule); font-size: 0.78rem; color: var(--ink); }
.stepper li.current button { border-color: var(--ink); color: var(--ink); }
.stepper li.current b { background: var(--midnight); border-color: var(--midnight); color: var(--lime); }
.stepper li.done b { background: var(--forrest); border-color: var(--forrest); color: #fff; }
.intake:not(.js) .stepper { display: none; }
@media (max-width: 760px) { .stepper span { display: none; } .stepper button { justify-content: center; } }

.step-nav { display: flex; gap: var(--s2); justify-content: flex-end; }
.intake:not(.js) .step-back, .intake:not(.js) .step-next { display: none; }
.intake.js.first-step .step-back { visibility: hidden; }
.intake.js.last-step .step-next, .intake.js:not(.last-step) .step-submit { display: none; }
.step-nav .step-back { margin-right: auto; }
form.busy button { cursor: progress; opacity: 0.75; }

.word-count { font: 500 0.84rem var(--body); color: var(--ink-2); }
.word-count[data-state="good"] { color: var(--met); }
.word-count[data-state="high"] { color: var(--unknown); }
details.example { padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); }
details.example p { color: var(--ink-2); font-size: 0.93rem; }

.bingo-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 880px) { .bingo-review { grid-template-columns: 1fr; } }
.bingo.big { width: 100%; max-width: 480px; padding: var(--s5); }
.bingo.big .bingo-grid > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
                               gap: 4px; font-size: clamp(0.72rem, 1.4vw, 0.9rem); color: var(--midnight); border-top-width: 4px; }
.bingo .n { position: absolute; top: 4px; left: 7px; font: 500 0.66rem var(--mono); color: var(--dusk); }
.bingo .w { font-size: 0.7rem; letter-spacing: 1px; color: var(--maroon); }
.bingo .cat-experience { border-top-color: var(--ocean); }
.bingo .cat-skills { border-top-color: var(--forrest); }
.bingo .cat-leadership { border-top-color: var(--maroon); }
.bingo .cat-culture { border-top-color: var(--berry); }
.bingo .cat-logistics { border-top-color: var(--cherry); }
.bingo-legend i.cat-experience { background: var(--ocean); border-color: var(--ocean); }
.bingo-legend i.cat-skills { background: var(--forrest); border-color: var(--forrest); }
.bingo-legend i.cat-leadership { background: var(--maroon); border-color: var(--maroon); }
.bingo-legend i.cat-culture { background: var(--berry); border-color: var(--berry); }
.bingo-legend i.cat-logistics { background: var(--cherry); border-color: var(--cherry); }

.cell-edits { display: grid; gap: var(--s2); }
.cell-edit { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 2fr) 140px 180px; gap: var(--s2); align-items: center; }
.review-form { display: flex; flex-direction: column; gap: var(--s5); }
::placeholder { color: var(--dusk); opacity: 1; }
.cell-edit .n { font: 500 0.8rem var(--mono); color: var(--ink-2); text-align: right; }
.cell-edit input, .cell-edit select { padding: 7px 10px; font-size: 0.9rem; }
@media (max-width: 860px) {
  .cell-edit { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
  .cell-edit > .n { grid-row: 1; grid-column: 1; }
  .cell-edit > :nth-child(2) { grid-row: 1; grid-column: 2 / -1; }
  .cell-edit > :nth-child(3) { grid-row: 2; grid-column: 2 / -1; }
  .cell-edit > :nth-child(4) { grid-row: 3; grid-column: 2; }
  .cell-edit > :nth-child(5) { grid-row: 3; grid-column: 3; }
}
.chip.draft { color: var(--accent); background: var(--accent-soft); }

/* =====================================================================
   Expert Recommendation results
   ===================================================================== */
.searched-for { align-items: center; margin-top: 0; }
.searched-for .eyebrow { margin-right: var(--s2); }

.atc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: start;
       padding: var(--s6); border-radius: 16px; background: var(--night); color: var(--night-ink); }
@media (max-width: 880px) { .atc { grid-template-columns: 1fr; padding: var(--s5); } }
.atc .eyebrow { color: var(--lime); }
.atc .muted { color: var(--night-ink-2); }
.atc-text { font: 500 clamp(1.1rem, 1.8vw, 1.3rem)/1.5 var(--display); }

.bingo.mini { width: 100%; max-width: 360px; padding: var(--s3); box-shadow: none; border: 1px solid var(--stone); }
.bingo.mini .bingo-grid { gap: 5px; }
.bingo.mini .bingo-grid > div { font-size: clamp(0.68rem, 1.2vw, 0.8rem); padding: 5px; border-radius: 8px; }
.bingo .bingo-grid > .empty { background: #fff; border-style: dashed; border-color: var(--cherry); color: var(--cherry-rich); }
.bingo .cov { display: block; font: 600 0.66rem var(--mono); opacity: 0.85; margin-bottom: 2px; }
.coverage .bingo-grid > div { flex-direction: column; display: flex; align-items: center; justify-content: center; }

.expert-card { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px;
               box-shadow: var(--shadow); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.expert-card.first { border: 2px solid var(--midnight); box-shadow: var(--shadow-up); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .expert-card.first { border-color: var(--lime); } }
:root[data-theme="dark"] .expert-card.first { border-color: var(--lime); }
.expert-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }
.expert-head h3 { font-size: 1.35rem; }
.medal { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
         background: var(--paper); border: 1px solid var(--rule); font: 700 1rem var(--display); color: var(--ink); }
.expert-card.first .medal { background: var(--lime); border-color: var(--lime); color: var(--midnight); }
.expert-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.expert-score .big { font: 600 2.4rem/1 var(--display); letter-spacing: -0.02em; }
.expert-score small { font: 500 0.8rem var(--body); color: var(--ink-2); }
.ribbon { position: absolute; top: -12px; left: var(--s5); padding: 4px 12px; border-radius: 999px; background: var(--midnight);
          color: var(--lime); font: 700 0.72rem var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.lines-badge { padding: 3px 10px; border-radius: 999px; background: var(--forrest); color: #fff; font: 700 0.76rem var(--body); white-space: nowrap; }
.lines-badge.quiet { background: var(--paper); color: var(--ink-2); font-weight: 600; }
.expert-body { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr); gap: var(--s6); align-items: start; }
.expert-body .dims { margin-top: 0; }
.expert-body .dim { grid-template-columns: 110px minmax(0, 1fr) 30px; font-size: 0.84rem; }
@media (max-width: 760px) {
  .expert-body { grid-template-columns: 1fr; }
  .expert-head { grid-template-columns: auto minmax(0, 1fr); }
  .expert-score { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
.expert-summary { margin: 0; padding-left: var(--s4); border-left: 3px solid var(--lime-deep); font: 500 1.05rem/1.5 var(--display); }
.pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); font-size: 0.9rem; }
@media (max-width: 600px) { .pros-cons { grid-template-columns: 1fr; } }
.pros, .cons { list-style: none; padding: 0; margin-top: 6px; display: grid; gap: 4px; }
.pros li, .cons li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; margin: 0; }
.pros li::before { content: "✓"; color: var(--met); font-weight: 700; }
.cons li::before { content: "!"; color: var(--unknown); font-weight: 800; text-align: center; }

details.review { border-top: 1px solid var(--rule); padding-top: var(--s3); }
details.review > summary { color: var(--accent); }
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.reasons { margin: 0; display: grid; gap: var(--s2); font-size: 0.88rem; }
.reasons dt { font-weight: 600; display: flex; justify-content: space-between; }
.reasons dd { margin: 0; color: var(--ink-2); }

.compact-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--s4) var(--s5);
                display: flex; flex-direction: column; gap: var(--s2); }
.compact-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; }
.rank-n { font: 600 0.9rem var(--mono); color: var(--ink-2); }
.score-sm { font: 600 1.5rem/1 var(--display); }

.results-views .section-head { align-items: center; }
.view-switch { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); }
.view-switch label { padding: 5px 14px; border-radius: 999px; font: 600 0.82rem var(--body); color: var(--ink-2); cursor: pointer; }
.view-switch input:checked + label { background: var(--midnight); color: var(--feather); }
.view-switch input:focus-visible + label { outline: 2px solid var(--ocean); outline-offset: 2px; }
.results-views .view-table { display: none; }
.results-views:has(#view-table:checked) .view-table { display: block; }
.results-views:has(#view-table:checked) .view-cards { display: none; }
.compare-table td.num, .compare-table th { white-space: nowrap; }
.compare-table tr.top td { background: color-mix(in srgb, var(--lime) 10%, transparent); }
.compare-table .score-cell { font: 600 1.05rem var(--display); }

/* =====================================================================
   Referrals
   ===================================================================== */
.referral-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s6); align-items: center;
                 padding: var(--s6); border-radius: 16px; background: var(--lime); color: var(--midnight); }
@media (max-width: 860px) { .referral-hero { grid-template-columns: 1fr; padding: var(--s5); } }
.referral-hero h2 { font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--display); color: var(--midnight); }
.code-card { background: #fff; color: var(--midnight); border-radius: var(--radius-card); padding: var(--s5);
             display: flex; flex-direction: column; gap: var(--s4); box-shadow: var(--shadow-up); }
.code-card .eyebrow, .code-card .field > span { color: var(--twilight); }
.code-card input { background: var(--feather); color: var(--midnight); border-color: var(--stone); }
.code-card .button:not(.dark) { background: #fff; color: var(--midnight); border-color: var(--stone); }
.code-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.code-row input { flex: 1; min-width: 0; }
.ref-code { font: 600 clamp(1.3rem, 3vw, 1.8rem) var(--mono); letter-spacing: 0.06em; color: var(--maroon); flex: 1; }
.ref-code.small-code { font-size: 1.1rem; color: var(--accent); }
.referred-strip { margin: 0; padding: 10px max(var(--s4), calc((100% - var(--wrap)) / 2)); background: var(--lime);
                  color: var(--midnight); font-size: 0.93rem; text-align: center; }

.referred-strip a { color: var(--midnight); font-weight: 700; }

/* =====================================================================
   Quick search
   ===================================================================== */
.quick-form { display: flex; flex-direction: column; gap: var(--s4); }
.quick-form > * + * { margin-top: 0; }
.quick-input { font: 500 clamp(1.15rem, 2vw, 1.4rem)/1.4 var(--display); padding: var(--s4); }
.tag-button { border: 0; cursor: pointer; font: 600 0.8rem/1.3 var(--body); padding: 6px 12px; }
.tag-button:hover { background: var(--lime); color: var(--midnight); }
.chips .eyebrow { align-self: center; margin-right: var(--s2); }

.checklist-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 880px) { .checklist-layout { grid-template-columns: 1fr; } }
.checklist-preview { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--s3);
                     padding: var(--s5); border-radius: 16px; background: var(--night); color: var(--night-ink); }
.checklist-preview h2 { color: var(--night-ink); font-size: 1.4rem; }
.checklist-preview .eyebrow { color: var(--lime); }
.checklist-preview .muted { color: var(--night-ink-2); }
ul.checklist { list-style: none; padding: 0; display: grid; gap: var(--s2); }
ul.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s2); margin: 0; }
ul.checklist li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
                          background: var(--lime); color: var(--midnight); font-weight: 800; font-size: 0.75rem; }
ul.checklist li.nice::before { background: transparent; border: 1.5px solid var(--night-ink-2); color: var(--night-ink-2); }

/* legal placeholder pages */
.prose { max-width: 720px; display: flex; flex-direction: column; gap: var(--s4); }
.prose h2 { margin-top: var(--s4); }

/* =====================================================================
   Briefing: Devi's format pop-up and follow-up questions
   ===================================================================== */
.format-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); }
.format-switch a { padding: 6px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.format-switch a:hover { color: var(--ink); }
.format-switch a.current { background: var(--midnight); color: var(--lime); }

body.modal-open { overflow: hidden; }
body.modal-open .vv-fab { display: none; }
.vv-modal-q:focus, .q-card h2:focus { outline: none; }
.vv-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
            background: rgba(15, 16, 17, 0.62); }
.vv-modal[hidden] { display: none; }
.vv-modal-card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--radius-card);
                 background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-up); }
.vv-modal-q { margin: 0; padding: var(--s5) var(--s5) var(--s3); font: 600 1.35rem/1.25 var(--display); }
.choice-list { display: grid; gap: var(--s2); padding: 0 var(--s5); }
.choice-card { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--rule);
               border-radius: var(--radius); color: var(--ink); text-decoration: none; background: var(--paper); }
.choice-card strong { font-size: 1rem; }
.choice-card span { font-size: 0.86rem; color: var(--ink-2); }
.choice-card:hover, .choice-card:focus-visible { border-color: var(--ink); background: var(--sheet); }
.choice-card strong { display: flex; align-items: center; gap: var(--s2); }
/* Recommended: lime-tinted fill as well as the dark outline, so it doesn't blend into the white pop-up. */
.choice-card.recommended { border: 2px solid var(--midnight); background: color-mix(in srgb, var(--lime) 35%, var(--sheet)); }
.choice-card.recommended:hover, .choice-card.recommended:focus-visible { background: color-mix(in srgb, var(--lime) 55%, var(--sheet)); }
.choice-card.recommended .rec-tag { background: var(--midnight); color: var(--lime); }
.rec-tag { padding: 2px 8px; border-radius: 999px; background: var(--lime); color: var(--midnight);
           font: 500 0.68rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.rec-dot { color: var(--unknown); font-size: 0.8em; }
.format-switch a.current .rec-dot { color: var(--lime); }
.vv-other { display: grid; gap: var(--s2); margin: var(--s4) var(--s5) 0; padding-top: var(--s4); border-top: 1px dashed var(--rule); }
.vv-other .button { justify-self: start; }
.vv-modal-foot { display: flex; justify-content: flex-end; padding: var(--s4) var(--s5) var(--s5); }

/* "While you wait, run another search": a small pill on a running search's page that opens upward into a card,
   so it never covers the progress. */
.wait-pop { position: fixed; z-index: 55; left: 22px; bottom: 22px; }
.wait-pop[hidden] { display: none; }
.wait-pop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
                    padding: 10px 16px; border-radius: 999px; background: var(--midnight); color: var(--feather);
                    border: 2px solid var(--lime); box-shadow: 3px 3px 0 var(--lime); font: 600 0.9rem var(--body); }
.wait-pop summary::-webkit-details-marker { display: none; }
.wait-pop summary::before { content: none; }
.wait-plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime);
             color: var(--midnight); font-weight: 700; transition: transform 0.2s; }
.wait-pop[open] .wait-plus { transform: rotate(45deg); }
.wait-card { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 44px));
             display: flex; flex-direction: column; gap: 6px; padding: var(--s4) var(--s5); border-radius: 18px;
             background: var(--midnight); color: var(--feather); border: 2px solid var(--lime); box-shadow: 5px 5px 0 var(--lime); }
.wait-card p { margin: 0; }
.wait-card .small { color: var(--night-ink-2); }
.wait-title { font: 400 1.6rem/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.wait-card .actions { margin-top: var(--s2); }
.wait-card .button:not(.cta) { background: transparent; color: var(--feather); border-color: var(--night-rule); }
.wait-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border-radius: 50%;
          background: transparent; border: 1px solid var(--night-rule); color: var(--feather); font-size: 0.75rem; }
@media (prefers-reduced-motion: no-preference) { .wait-pop { animation: wait-in 0.5s ease-out 1.5s backwards; } }
@keyframes wait-in { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 560px) { .wait-pop { left: 16px; bottom: 84px; } }

.inline-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.inline-fields .field { flex: 0 1 240px; }

/* First-visit welcome: the page blurs behind a poster-style card. */
.welcome { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
           background: rgba(15, 16, 17, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.welcome[hidden] { display: none; }
.welcome-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
                display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); border-radius: 24px;
                background: var(--midnight); color: var(--feather); border: 2px solid var(--lime); box-shadow: 8px 8px 0 var(--lime);
                background-image: radial-gradient(circle at 100% 0, rgba(216, 191, 138, 0.14), transparent 45%); }
.welcome-card .eyebrow { color: var(--lime); margin: 0; }
.welcome-card h2 { margin: 0; font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: 0.95; color: var(--feather); }
.welcome-card h2 span { display: block; }
.welcome-card h2 em { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--lime); }
.welcome-lede { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--night-ink-2); }
.welcome-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
#welcome-title:focus { outline: none; }
.welcome-chips li { margin: 0; padding: 6px 12px; border-radius: 999px; color: var(--midnight); font: 600 0.82rem/1.3 var(--body); }
.welcome-chips .sky { background: var(--sky); }
.welcome-chips .lime { background: var(--lime); }
.welcome-chips .berry { background: var(--berry); }
.welcome-card .button.ghost { color: var(--feather); }
.welcome-note { margin: 0; font-size: 0.8rem; color: var(--night-ink-2); }
.welcome-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; border-radius: 50%;
             background: transparent; border: 1px solid var(--night-rule); color: var(--feather); }
.welcome-x:hover { border-color: var(--lime); color: var(--lime); }
body.modal-open .site-footer, body.modal-open .vv-fab { pointer-events: none; }
@media (max-width: 560px) { .welcome-card { padding: var(--s5); box-shadow: 4px 4px 0 var(--lime); } }

.vv-intro { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5); border-radius: var(--radius-card);
            background: var(--midnight); color: var(--feather); }
.vv-intro p { margin: 0; }
.vv-intro strong { font-family: "Fredoka", var(--body); color: var(--lime); }
.questions { display: flex; flex-direction: column; gap: var(--s4); }
.q-card { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.q-card[hidden] { display: none; }
.q-card legend { float: left; width: 100%; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.q-card legend + * { clear: both; }
.q-card h2 { font-size: 1.35rem; }
.q-options { display: flex; flex-wrap: wrap; gap: var(--s2); }
.q-option { position: relative; display: inline-flex; cursor: pointer; }
.q-option input { position: absolute; opacity: 0; pointer-events: none; }
.q-option span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper);
                 font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.q-option:hover span { border-color: var(--ink-2); }
.q-option input:checked + span { background: var(--midnight); border-color: var(--midnight); color: var(--lime); }
.q-option input:focus-visible + span { outline: 3px solid var(--ocean); outline-offset: 2px; }
.q-skip span { color: var(--ink-2); border-style: dashed; }
.q-card.required { border: 2px solid var(--midnight); }
.req-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--lime); color: var(--midnight); letter-spacing: 0.06em; }
.q-why { margin: 0; }
.form-sub { margin: var(--s2) 0 calc(-1 * var(--s2)); }
.form-sub .hint { text-transform: none; letter-spacing: 0; font-family: var(--body); }
/* Skip picked: a filled grey chip, quieter than a real answer but clearly selected (an outline alone blended in). */
.q-skip input:checked + span { background: var(--stone); border-color: var(--twilight); color: var(--midnight); }
.q-nav { display: flex; gap: var(--s2); align-items: center; justify-content: flex-end; }
.q-nav .step-back { margin-right: auto; }
.q-nav button.link { color: var(--ink-2); text-decoration: underline; padding: 8px; }
.q-list { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s3); }
.q-list li { display: flex; flex-direction: column; gap: 2px; }
.one-at-a-time .q-skip { display: none; }
.one-at-a-time:not(.on-last) .q-submit .primary { display: none; }
.q-progress { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.q-progress span { display: block; height: 100%; width: 0; background: var(--lime-deep); transition: width 0.3s ease; }
.q-options input[type=checkbox]:checked + span::before { content: "✓ "; }
.skip-nudge-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s5) 0; }
.skip-nudge-body p { margin: 0; }
.skip-nudge-title { font: 600 1.35rem/1.25 var(--display); }
.skip-nudge .vv-modal-foot { gap: var(--s2); }
@media (max-width: 560px) { .format-switch { width: 100%; } .format-switch a { flex: 1; text-align: center; padding: 6px 8px; } }

/* =====================================================================
   Home page: "Why Delvii" on maroon, with illustrated tiles
   ===================================================================== */
.canvas.maroon { background: var(--maroon); color: var(--feather);
                 background-image: radial-gradient(circle at 88% 12%, rgba(216, 191, 138, 0.10), transparent 42%); }
.canvas.maroon .eyebrow { color: var(--lime); }
.canvas.maroon .section-title { color: var(--feather); max-width: 15ch; }
.canvas.maroon .section-title em { display: block; color: var(--lime); font-style: italic; }
.why-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.why-art { width: 100%; max-width: 320px; justify-self: end; }
.why-art .src rect { fill: rgba(246, 243, 237, 0.10); stroke: rgba(246, 243, 237, 0.35); }
.why-art .src text { fill: var(--feather); font: 500 11px var(--body); text-anchor: middle; }
.why-art .flow { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.8; }
.why-art .sheet { fill: var(--feather); }
.why-art .rows rect { fill: var(--stone); }
.why-art .ticks circle { fill: var(--forrest); }
@media (max-width: 760px) { .why-head { grid-template-columns: minmax(0, 1fr); } .why-art { justify-self: start; max-width: 260px; } }

.why-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 900px) { .why-tiles { grid-template-columns: minmax(0, 1fr); } }
.why-tile { padding: var(--s5); border-radius: 20px; color: var(--midnight); display: flex; flex-direction: column; gap: var(--s2); }
.why-tile.sky { background: var(--sky); }
.why-tile.lime { background: var(--lime); }
.why-tile.berry { background: var(--berry); }
.why-tile svg { width: 44px; height: 44px; fill: none; stroke: var(--midnight); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.canvas.maroon .why-tile h3 { margin: 0; color: var(--midnight); font: 400 clamp(1.7rem, 2.6vw, 2.1rem)/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.why-tile p { margin: 0; font-size: 0.95rem; color: color-mix(in srgb, var(--midnight) 82%, transparent); }

/* Stale-data strip between the hero and "Why Delvii": one huge sourced number against what Delvii does. */
.stale-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s6); align-items: center;
              padding: var(--s7) max(var(--s4), calc((100% - var(--wrap)) / 2)); background: var(--lime); color: var(--midnight); }
.stale-stat { display: flex; flex-direction: column; gap: var(--s2); }
.stale-num { font: 400 clamp(5rem, 13vw, 9rem)/0.85 var(--poster); letter-spacing: -0.01em; color: var(--maroon); }
.stale-stat p { margin: 0; max-width: 26ch; font: 600 1.15rem/1.35 var(--body); }
.stale-stat sup a { margin-left: 4px; font: 500 0.7rem var(--mono); color: var(--maroon); }
.stale-copy { display: flex; flex-direction: column; gap: var(--s3); }
.stale-copy h2 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 0.95; color: var(--midnight); }
.stale-copy h2 span { display: block; }
.stale-copy h2 em { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--maroon); }
.stale-copy p { margin: 0; max-width: 54ch; font-size: 1.05rem; line-height: 1.5; color: color-mix(in srgb, var(--midnight) 85%, transparent); }
@media (max-width: 760px) { .stale-band { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

.footer-slogan { margin: var(--s3) 0 var(--s2); font: 400 1.6rem/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; color: var(--feather); }
.footer-slogan em { font-family: var(--display); font-style: italic; text-transform: none; color: var(--lime); }
.source-list summary { color: var(--lime); font: 500 0.82rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.source-list summary::before { color: var(--lime); }
.source-list ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.source-list li { margin: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(246, 243, 237, 0.25);
                  color: var(--feather); font-size: 0.8rem; }
.canvas.maroon .compare { color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); }
.canvas.maroon .compare thead .us { background: var(--lime); }

/* Home page face-off: database tool vs senior researcher vs Delvii */
.versus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
@media (max-width: 900px) { .versus { grid-template-columns: minmax(0, 1fr); } }
.vs-card { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border-radius: 20px;
           background: rgba(246, 243, 237, 0.07); border: 1px solid rgba(246, 243, 237, 0.18); color: var(--feather); }
.vs-card header h3 { margin: 0; font: 400 clamp(1.5rem, 2.3vw, 1.9rem)/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; color: inherit; }
.canvas.maroon .vs-card h3 { color: inherit; }
.vs-card header p { margin: 4px 0 0; font: 500 0.78rem var(--mono); color: rgba(246, 243, 237, 0.62); }
.vs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.vs-card li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s2); font-size: 0.9rem; line-height: 1.4; }
.vs-card li b { display: block; font: 500 0.7rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.vs-card sup { font-size: 0.68em; margin-left: 2px; opacity: 0.8; }
.vs-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 0.8rem/1 var(--body); }
.vs-card li.yes .vs-mark { background: var(--forrest); color: var(--midnight); }
.vs-card li.part .vs-mark { background: #f0d77a; color: var(--midnight); }
.vs-card li.no .vs-mark { background: var(--cherry); color: var(--midnight); }
.vs-card.us { background: var(--lime); border-color: var(--lime); color: var(--midnight); transform: translateY(-10px);
              box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35); }
.vs-card.us header p { color: color-mix(in srgb, var(--midnight) 70%, transparent); }
.vs-card.us li { font-weight: 500; }
.vs-card.us li.yes .vs-mark { background: var(--midnight); color: var(--lime); }
.vs-badge { position: absolute; top: -12px; right: var(--s5); padding: 4px 12px; border-radius: 999px; background: var(--midnight);
            color: var(--lime); font: 500 0.7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 900px) { .vs-card.us { transform: none; } }
.vs-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 0.76rem; color: rgba(246, 243, 237, 0.62); }
.vs-sources a { color: inherit; }

/* ---------- dashboard: same poster style as the home page ---------- */
.dash-hero { position: relative; overflow: hidden; display: grid; gap: 28px; padding: 40px 32px; border-radius: 28px; color: var(--feather);
  background: radial-gradient(900px 480px at 90% -20%, rgba(74, 12, 25,0.95), transparent 60%), #0B0B0A; }
.dash-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.dash-hero > * { position: relative; min-width: 0; }
@media (min-width: 980px) { .dash-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; padding: 48px 44px; gap: 40px; } }
@media (max-width: 560px) { .dash-hero { padding: 28px 20px; border-radius: 22px; } }
.dash-hero .eyebrow { color: var(--lime); }
.dash-hero h1.poster { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 0.92; margin: 10px 0 0; color: var(--feather); }
.dash-hero h1.poster span { display: block; }
.dash-hero h1 .hl { color: var(--lime); }
.dash-stats { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dash-stats li { display: flex; flex-direction: column; gap: 2px; min-width: 110px; padding: 12px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.dash-stats b { font: 400 1.9rem/1 var(--poster); color: var(--feather); }
.dash-stats span { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #b2ada1; }
.dash-stats li.live b { color: var(--lime); }
.dash-stats li.live span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--lime); animation: pulse 1.4s ease-in-out infinite; vertical-align: 1px; }
.dash-stats li.admin-only { border-style: dashed; }
.dash-start { display: grid; gap: 14px; }
@media (min-width: 640px) { .dash-start { grid-template-columns: 1fr 1fr; } }
.start-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 54px; border-radius: 22px;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; min-height: 190px; }
.start-card .eyebrow { font-size: 0.7rem; }
.start-card strong.poster { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.start-card > span:not(.eyebrow):not(.go) { font-size: 0.95rem; line-height: 1.45; }
.start-card .go { position: absolute; right: 18px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.15rem; transition: transform .18s ease; }
.start-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(0,0,0,0.75); }
.start-card:hover .go { transform: translateX(3px); }
.start-card.quick { background: var(--lime); color: var(--midnight); }
.start-card.quick .eyebrow { color: var(--maroon); }
.start-card.quick .go { background: var(--midnight); color: var(--lime); }
.start-card.deep { background: var(--feather); color: var(--midnight); box-shadow: inset 0 0 0 2px var(--berry); }
.start-card.deep .eyebrow { color: var(--maroon); }
.start-card.deep strong.poster { color: var(--maroon); }
.start-card.deep .go { background: var(--maroon); color: var(--lime); }

.dash-list { margin-top: 36px; }
.dash-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.dash-list-head h2 { font: 400 clamp(1.6rem, 3vw, 2.1rem)/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-filters label { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--rule); background: var(--sheet); font: 600 0.86rem var(--body); color: var(--ink); }
.dash-filters label i { font: 500 0.72rem var(--mono); font-style: normal; color: var(--ink-2); }
#df-all:checked ~ .dash-list-head label[for="df-all"], #df-running:checked ~ .dash-list-head label[for="df-running"],
#df-done:checked ~ .dash-list-head label[for="df-done"], #df-attention:checked ~ .dash-list-head label[for="df-attention"],
#df-draft:checked ~ .dash-list-head label[for="df-draft"] { background: var(--midnight); border-color: var(--midnight); color: var(--lime); }
#df-all:checked ~ .dash-list-head label[for="df-all"] i, #df-running:checked ~ .dash-list-head label[for="df-running"] i,
#df-done:checked ~ .dash-list-head label[for="df-done"] i, #df-attention:checked ~ .dash-list-head label[for="df-attention"] i,
#df-draft:checked ~ .dash-list-head label[for="df-draft"] i { color: var(--feather); }
.dfilter:focus-visible ~ .dash-list-head .dash-filters { outline: 3px solid var(--sky); outline-offset: 4px; border-radius: 999px; }
#df-running:checked ~ .s-list .s-row:not([data-group="running"]),
#df-done:checked ~ .s-list .s-row:not([data-group="done"]),
#df-attention:checked ~ .s-list .s-row:not([data-group="attention"]),
#df-draft:checked ~ .s-list .s-row:not([data-group="draft"]) { display: none; }
.s-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 18px;
  border-radius: 18px; background: var(--sheet); border: 1px solid var(--rule); text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.s-link:has(.s-cost) { grid-template-columns: 44px minmax(0, 1fr) auto auto auto; }
.s-link:hover { border-color: var(--ink-2); transform: translateY(-1px); box-shadow: 0 14px 30px -22px rgba(11, 11, 10,0.6); }
.s-kind { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 400 1.25rem var(--poster); }
.s-kind.deep { background: var(--maroon); color: var(--lime); }
.s-kind.quick { background: var(--lime); color: var(--midnight); }
.s-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.s-main strong { font: 600 1.08rem/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.82rem; color: var(--ink-2); }
.s-meta span + span::before { content: "\00b7"; margin-right: 14px; margin-left: -8px; opacity: 0.6; }
.s-cost { font: 500 0.85rem var(--mono); color: var(--ink-2); }
.s-go { font-size: 1.1rem; color: var(--ink-2); transition: transform .15s ease; }
.s-link:hover .s-go { transform: translateX(3px); color: var(--ink); }
@media (max-width: 640px) {
  .s-link, .s-link:has(.s-cost) { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .s-kind { width: 40px; height: 40px; }
  .s-go, .s-cost { display: none; }
  .s-main strong { white-space: normal; }
}
.dash-empty { margin-top: 28px; padding: 36px 32px; border-radius: 24px; background: var(--sheet); border: 1.5px dashed var(--rule); display: grid; gap: 14px; }
.dash-empty .eyebrow { color: var(--accent); }
.dash-empty h2.poster { font-size: clamp(2rem, 4.6vw, 3rem); margin: 0; }
.dash-empty h2.poster span { display: block; }
.dash-empty h2.poster em { color: var(--accent); }
.dash-empty p { max-width: 70ch; color: var(--ink-2); margin: 0; }
/* ---------- Devi fills the brief from a document ---------- */
.vv-attach { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--sheet);
  display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.vv-attach svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vv-attach:hover { background: var(--lime); border-color: var(--midnight); color: var(--midnight); }
.vv-chip-doc { background: var(--lime); color: var(--midnight); }
.vv-chip-doc::before { content: "\2726  "; }
.vv-open-brief { display: inline-flex; margin-top: var(--s3); }
.doc-drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  margin-bottom: var(--s4); padding: var(--s4) var(--s5); border-radius: 22px; border: 2px dashed var(--rule);
  background: color-mix(in srgb, var(--lime) 22%, var(--sheet)); transition: border-color .15s, background .15s; }
.doc-drop > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-drop strong { font: 600 1.12rem/1.25 var(--display); }
.doc-drop span:not(.vv-avatar) { font-size: 0.9rem; color: var(--ink-2); }
.doc-drop.over { border-color: var(--midnight); background: color-mix(in srgb, var(--lime) 45%, var(--sheet)); }
.doc-drop.busy { border-style: solid; border-color: var(--accent); }
.doc-drop .field-error { color: var(--fail); }
@media (max-width: 680px) { .doc-drop { grid-template-columns: auto minmax(0, 1fr); } .doc-drop .button { grid-column: 1 / -1; } }
.doc-choice { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; align-items: stretch;
  border: 2px dashed var(--midnight); background: var(--sheet); }
.doc-choice strong { justify-content: flex-start; }
.new-tag { padding: 2px 8px; border-radius: 999px; background: var(--berry); color: var(--midnight); font: 600 0.7rem/1.4 var(--body); }
.devi-filled { position: relative; border-radius: 12px; box-shadow: 0 0 0 2px var(--lime), 0 0 0 4px var(--midnight); }
.q-options.devi-filled { padding: 6px; }
.devi-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--lime); color: var(--midnight);
  font: 600 0.68rem/1.4 var(--body); letter-spacing: 0.02em; text-transform: none; }
/* ---------- ways out of a deep search being set up ---------- */
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cancel-link, .cancel-draft .button { min-height: 40px; padding: 8px 16px; font-size: 0.9rem; }
.modal-x { text-decoration: none; color: var(--feather); line-height: 1; }
.vv-modal-foot { gap: var(--s2); }
/* ---------- quick search composer ---------- */
.qs-stage { max-width: 760px; margin: var(--s5) auto 0; display: flex; flex-direction: column; gap: var(--s3); }
.qs-stage > .eyebrow { color: var(--accent); }
.qs-stage h1.poster { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 0.92; margin: 0 0 var(--s3); }
.qs-stage h1.poster span { display: block; }
.qs-stage h1 .hl { color: var(--accent); }
.qs { display: flex; flex-direction: column; }
.qs-box { position: relative; z-index: 1; background: var(--sheet); border: 1px solid var(--rule); border-radius: 26px;
  padding: 20px 20px 14px; box-shadow: 0 18px 40px -26px rgba(11, 11, 10,0.45); transition: border-color .15s, box-shadow .15s; }
.qs-box:focus-within { border-color: var(--ink-2); box-shadow: 0 22px 48px -24px rgba(11, 11, 10,0.5), 0 0 0 4px color-mix(in srgb, var(--lime) 55%, transparent); }
.qs-box textarea { width: 100%; border: 0; outline: none; resize: none; background: transparent; min-height: 84px; padding: 2px 4px;
  font: 400 1.12rem/1.5 var(--body); color: var(--ink); box-shadow: none; }
.qs-box textarea::placeholder { color: var(--ink-2); opacity: 0.8; }
.qs-hint { margin: 4px 4px 0; font-size: 0.85rem; color: var(--ink-2); }
.qs-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.qs-spacer { flex: 1; }
.qs-mode { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper, #f3f1ec); border: 1px solid var(--rule); }
.qs-mode > * { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font: 600 0.95rem var(--body);
  text-decoration: none; color: var(--ink-2); }
.qs-mode svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qs-mode .qs-mode-on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.qs-mode .qs-mode-on svg { color: var(--ocean); }
.qs-mode a:hover { color: var(--ink); }
.qs-icon, .qs-go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.qs-icon { border: 0; background: transparent; color: var(--ink-2); }
.qs-icon:hover, .qs-icon.on { background: var(--paper, #f3f1ec); color: var(--ink); }
.qs-icon.on { color: var(--fail); }
.qs-go { border: 0; background: var(--lime); color: var(--midnight); transition: transform .15s, background .15s; }
.qs-go:hover { background: var(--lime-deep); transform: translateX(2px); }
.qs-icon svg, .qs-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.qs-tray { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: -22px; padding: 30px 14px 12px; border-radius: 0 0 24px 24px;
  background: color-mix(in srgb, var(--rule) 70%, var(--paper, #f3f1ec)); }
.qs-tray > button, .qs-tray > a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-2); font: 500 0.95rem var(--body); text-decoration: none; cursor: pointer; }
.qs-tray > button:hover, .qs-tray > a:hover { background: var(--sheet); color: var(--ink); }
.qs-tray svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qs-status { margin: 10px 4px 0; font-size: 0.9rem; color: var(--ink-2); }
.qs-status.error { color: var(--fail); }
.qs-extra { display: grid; gap: var(--s3); margin-top: var(--s5); }
.qs-extra .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qs-foot { margin-top: var(--s3); }
@media (max-width: 560px) {
  .qs-mode > * { padding: 8px 12px; }
  .qs-tray > button, .qs-tray > a { padding: 8px 10px; font-size: 0.9rem; }
}
.page-head > .head-actions { flex-direction: row; align-items: center; }

/* ---------- contact enrichment ---------- */
.contact-cell { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.contact-menu { position: relative; }
.contact-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 12px;
  border-radius: 999px; border: 1.5px solid var(--rule); background: var(--sheet); font: 600 0.82rem var(--body); color: var(--ink); }
.contact-menu > summary::-webkit-details-marker { display: none; }
.contact-menu > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-menu > summary:hover, .contact-menu[open] > summary { background: var(--lime); border-color: var(--midnight); color: var(--midnight); }
.contact-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, 86vw); padding: 12px; display: grid; gap: 6px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.5); }
.contact-pop p { margin: 0 0 4px; }
.contact-pop button { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; }
.contact-pop button strong { font-size: 0.92rem; display: flex; align-items: center; gap: 6px; }
.contact-pop button span:not(.rec-tag) { font-size: 0.8rem; color: var(--ink-2); }
.contact-pop button:hover { border-color: var(--ink); }
.contact-pop button.rec { border: 2px solid var(--midnight); background: color-mix(in srgb, var(--lime) 35%, var(--sheet)); }
.contact-found { display: grid; gap: 4px; }
.contact-found:empty { display: none; }
.contact-found .ch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.86rem; padding: 6px 10px;
  border-radius: 10px; background: var(--paper, #f3f1ec); }
.contact-found .ch b { font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.contact-found .ch.best { background: color-mix(in srgb, var(--lime) 45%, var(--sheet)); }
.contact-found .ch.best b::after { content: " \2605 best"; color: var(--accent); }
.contact-found .src { font-size: 0.76rem; color: var(--ink-2); }
.contact-found p { margin: 2px 0 0; }
.contact-busy::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.contact-busy.error::before { display: none; }
.contact-busy.error { color: var(--fail); }
.contact-cell.busy .contact-menu > summary { opacity: 0.6; pointer-events: none; }
/* ---------- outreach drafter: ocean, sky and lime ---------- */
.outreach-btn { background: var(--ocean); border-color: var(--ocean); color: #fff; }
.outreach-btn:hover { background: #6F6140; border-color: #6F6140; }
.dash-outreach { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 22px 26px; border-radius: 22px; text-decoration: none; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(115deg, #4A0C19, var(--ocean) 45%, #D8BF8A); transition: transform .18s, box-shadow .18s; }
.dash-outreach::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.dash-outreach > * { position: relative; z-index: 1; }
.dash-outreach:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -24px rgba(74, 12, 25,0.8); }
.dash-outreach .or-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--midnight); color: var(--lime); font-size: 1.35rem; }
.dash-outreach-copy { display: flex; flex-direction: column; gap: 4px; }
.dash-outreach-copy .eyebrow { color: var(--lime); }
.dash-outreach-copy strong { font: 400 clamp(1.5rem, 2.8vw, 2rem)/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.dash-outreach-copy span:last-child { font-size: 0.93rem; max-width: 70ch; color: #EFE6D2; }
.dash-outreach .go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--midnight); font-weight: 700; }
@media (max-width: 640px) { .dash-outreach { grid-template-columns: auto minmax(0, 1fr); } .dash-outreach .go { display: none; } }

.or-hero { position: relative; overflow: hidden; display: grid; gap: 24px; padding: 36px 32px; border-radius: 28px; color: var(--feather); margin-bottom: 24px;
  background: radial-gradient(900px 460px at 100% -30%, rgba(74, 12, 25,0.75), transparent 60%),
              radial-gradient(500px 300px at 0% 120%, rgba(216, 191, 138,0.18), transparent 70%), #121417; }
.or-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.or-hero > * { position: relative; }
@media (min-width: 980px) { .or-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; padding: 42px 40px; } }
.or-hero .eyebrow { color: var(--sky); }
.or-hero h1.poster { font-size: clamp(2.5rem, 5.8vw, 4.2rem); line-height: 0.9; margin: 10px 0 14px; color: var(--feather); }
.or-hero h1.poster span { display: block; }
.or-hero h1 .hl { color: var(--sky); }
.or-hero h1 .hl em { font-family: var(--display); font-style: italic; text-transform: none; color: var(--lime); letter-spacing: -0.01em; }
.or-lede { color: #EFE6D2; max-width: 52ch; margin: 0; font-size: 1.02rem; }
.or-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.or-steps li > * { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 15px; text-align: left;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #9ea7b8; font: 500 0.9rem var(--body); }
.or-steps button { cursor: pointer; }
.or-steps button:hover { border-color: var(--sky); color: var(--feather); }
.or-steps b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); font: 400 1rem var(--poster); }
.or-steps li.done > * { color: var(--feather); }
.or-steps li.done b { background: var(--lime); color: var(--midnight); }
.or-steps li.on > * { border-color: var(--sky); background: rgba(216, 191, 138,0.12); color: #fff; }
.or-steps li.on b { background: var(--sky); color: var(--midnight); }

.or-panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: 26px; padding: 28px; margin-bottom: 20px; display: grid; gap: 18px;
  box-shadow: 0 24px 50px -40px rgba(18,20,23,0.6); }
@media (max-width: 560px) { .or-panel { padding: 20px 16px; } }
.or-title { display: flex; align-items: center; gap: 16px; }
.or-title .n { font: 400 clamp(2.4rem, 5vw, 3.2rem)/0.85 var(--poster); color: var(--ocean); }
.or-title .eyebrow { color: var(--ocean); }
.or-title h2, .or-panel > h2 { margin: 2px 0 0; font: 600 clamp(1.4rem, 2.6vw, 1.75rem)/1.15 var(--display); }
.or-title h2 em { font-style: italic; color: var(--ocean); }
.or-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.or-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.or-tools > * { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); font: 600 0.82rem var(--body);
  color: var(--ink); text-decoration: none; cursor: pointer; }
.or-tools > *:hover { border-color: var(--ink-2); }
.or-hint { margin: -6px 0 0; color: var(--ink-2); font-size: 0.92rem; }
.or-searches { display: grid; gap: 10px; }
.or-searches a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px;
  border: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.or-searches a::before { content: "\2726"; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--midnight); color: var(--lime); }
.or-searches a:hover { border-color: var(--ocean); transform: translateY(-1px); }
.or-searches strong { font: 600 1.05rem var(--display); }
.or-searches span { font: 500 0.78rem var(--mono); color: var(--ink-2); }

.or-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.or-people li { display: grid; gap: 8px 18px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--rule); align-items: center;
  transition: border-color .15s, background .15s; }
.or-people li:has(input:checked) { border-color: var(--ocean); background: color-mix(in srgb, var(--sky) 12%, var(--sheet)); }
@media (min-width: 860px) { .or-people li { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } .or-people .contact-cell { margin-top: 0; } }
.or-person { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; cursor: pointer; }
.or-person input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.or-person .tick { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--rule); display: grid; place-items: center; background: var(--sheet); transition: all .15s; }
.or-person input:checked ~ .tick { background: var(--ocean); border-color: var(--ocean); }
.or-person input:checked ~ .tick::after { content: ""; width: 10px; height: 6px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.or-person input:focus-visible ~ .tick { outline: 3px solid var(--sky); outline-offset: 2px; }
.or-person .initial { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 1.1rem var(--poster);
  background: var(--midnight); color: var(--sky); }
.or-person .who { display: flex; flex-direction: column; min-width: 0; }
.or-person .who strong { font: 600 1.02rem var(--display); }
.tier { font: 600 0.7rem var(--body); padding: 4px 10px; border-radius: 999px; background: var(--paper, #f3f1ec); color: var(--ink-2); white-space: nowrap; }
.tier.strong { background: var(--forrest); color: var(--midnight); }
.tier.partial { background: #fff3cc; color: #5c4700; }
.or-bar { position: sticky; bottom: 14px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--midnight); color: var(--feather); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6); }
.or-bar .count { font: 500 0.85rem var(--mono); letter-spacing: 0.04em; }
.or-bar .count b { color: var(--lime); font-size: 1.05rem; }
.or-bar .back { background: transparent; border: 0; color: #EFE6D2; font: 600 0.92rem var(--body); cursor: pointer; padding: 8px 12px; }
.or-bar .back:hover { color: #fff; }
.or-bar .go { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px;
  background: var(--lime); color: var(--midnight); font: 600 1rem var(--body); transition: transform .15s, background .15s; }
.or-bar .go:hover { background: var(--lime-deep); transform: translateX(2px); }
.or-bar .go[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.or-choices { display: grid; gap: 14px; }
@media (min-width: 860px) { .or-choices { grid-template-columns: 1fr 1fr; } }
.or-choice { margin: 0; min-width: 0; padding: 18px; border-radius: 20px; border: 1px solid var(--rule); background: var(--paper, #f6f3ed); display: flex; flex-wrap: wrap; gap: 8px; }
.or-choice legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; font: 600 1.08rem var(--display); }
.or-choice legend + * { clear: both; }
.or-choice legend i { font-style: normal; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem;
  background: var(--midnight); color: var(--sky); }
.or-pill { position: relative; cursor: pointer; }
.or-pill input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.or-pill span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 14px; border: 1.5px solid var(--rule);
  background: var(--sheet); font: 500 0.92rem var(--body); color: var(--ink); transition: all .15s; }
.or-pill span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rule); transition: all .15s; }
.or-pill:hover span { border-color: var(--ink-2); transform: translateY(-1px); }
.or-pill input:checked + span { background: var(--midnight); border-color: var(--midnight); color: #fff; box-shadow: 0 10px 20px -14px rgba(0,0,0,0.7); }
.or-pill input:checked + span::before { background: var(--lime); border-color: var(--lime); }
.or-pill input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.or-extra { display: grid; gap: 14px; padding: 18px; border-radius: 20px; border: 1px dashed var(--rule); }
.or-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.95rem; }
.or-switch input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.or-switch .track { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--rule); position: relative; transition: background .15s; }
.or-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform .15s; }
.or-switch input:checked + .track { background: var(--ocean); }
.or-switch input:checked + .track::after { transform: translateX(20px); }
.or-switch input:focus-visible + .track { outline: 3px solid var(--sky); outline-offset: 2px; }
.js-wizard .or-step:not(.on) { display: none; }

.or-drafts-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.or-drafts-head h2 { margin: 6px 0 4px; font: 400 clamp(1.9rem, 3.6vw, 2.6rem)/1 var(--poster); text-transform: uppercase; }
.or-drafts-head h2 em { font-family: var(--display); font-style: italic; text-transform: none; color: var(--ocean); }
.or-drafts-head .eyebrow { color: var(--ocean); }
.or-draft { background: var(--sheet); border: 1px solid var(--rule); border-radius: 22px; padding: 0; margin-bottom: 16px; overflow: hidden;
  box-shadow: 0 20px 40px -36px rgba(18,20,23,0.7); }
.or-draft header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 20px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sky) 22%, var(--sheet)), var(--sheet)); border-bottom: 1px solid var(--rule); }
.or-draft .who { display: flex; align-items: center; gap: 12px; }
.or-draft .who > span:last-child { display: flex; flex-direction: column; }
.or-draft .who strong { font: 600 1.05rem var(--display); }
.or-draft .initial { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 1.1rem var(--poster); background: var(--ocean); color: #fff; }
.or-draft-body { padding: 16px 20px 18px; display: grid; gap: 12px; }
.or-reach { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.or-reach .contact-cell { align-items: flex-end; margin-top: 0; }
.reach-best { font-size: 0.86rem; padding: 5px 11px; border-radius: 999px; background: var(--midnight); color: var(--lime); }
.or-draft textarea { font: 400 1rem/1.6 var(--body); background: var(--sheet); }
.or-draft-foot { display: flex; justify-content: flex-end; }

/* ---------- Devi's question cards, everywhere (brief, follow-ups, outreach) ---------- */
.vv-intro { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; padding: 20px 24px; border-radius: 22px;
  background: radial-gradient(500px 200px at 100% 0%, rgba(74, 12, 25,0.55), transparent 70%), #121417; color: #EFE6D2; border: 0; }
.vv-intro .vv-avatar { flex: none; width: 46px; height: 46px; font-size: 1.2rem; box-shadow: 0 0 0 6px rgba(216, 191, 138,0.15), 0 0 24px rgba(216, 191, 138,0.35); }
.vv-intro p { font-size: 1rem; line-height: 1.5; }
.vv-intro strong { font: 600 1.1rem "Fredoka", var(--body); color: var(--lime); }
.q-card { padding: 26px 28px; border-radius: 26px; border: 1px solid var(--rule); background: var(--sheet); position: relative; overflow: hidden;
  box-shadow: 0 24px 50px -42px rgba(18,20,23,0.7); }
.q-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--ocean), var(--sky)); }
.q-card.required::before { background: linear-gradient(180deg, var(--midnight), var(--lime-deep)); }
.q-card legend .eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--sky) 22%, var(--sheet)); color: #4A0C19; font: 500 0.72rem var(--mono); letter-spacing: 0.1em; }
.q-card h2 { font: 600 clamp(1.35rem, 2.6vw, 1.75rem)/1.2 var(--display); letter-spacing: -0.01em; margin-top: 6px; }
.q-options { counter-reset: opt; gap: 10px; }
.q-option span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; border-radius: 14px; border: 1.5px solid var(--rule);
  background: var(--sheet); font: 500 0.95rem var(--body); transition: transform .15s, border-color .15s, background .15s; }
.q-option span::before { counter-increment: opt; content: counter(opt, upper-alpha); flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font: 600 0.78rem var(--mono); background: var(--paper, #f3f1ec); color: var(--ink-2); border: 1px solid var(--rule); }
.q-option:hover span { border-color: var(--ocean); transform: translateY(-1px); }
.q-option input:checked + span { background: var(--midnight); border-color: var(--midnight); color: #fff; box-shadow: 0 12px 22px -16px rgba(0,0,0,0.8); }
.q-option input:checked + span::before { background: var(--lime); color: var(--midnight); border-color: var(--lime); }
.q-skip span { border-style: dashed; color: var(--ink-2); }
.q-skip span::before { content: "\2014"; counter-increment: none; }
.q-skip input:checked + span { background: var(--paper, #f3f1ec); color: var(--ink); border-color: var(--ink-2); box-shadow: none; }
.q-skip input:checked + span::before { background: var(--rule); color: var(--ink); border-color: var(--rule); }
.q-options input[type=checkbox] + span::before { content: ""; counter-increment: none; }
.q-options input[type=checkbox]:checked + span::before { content: "\2713"; }
.q-other input { border-radius: 14px; padding: 12px 14px; }
.q-progress { height: 8px; }
.q-progress span { background: linear-gradient(90deg, var(--ocean), var(--sky)); }

.contact-menu > summary::marker { content: ""; }
.or-bar a.back { text-decoration: none; }
.or-form.stack { display: grid; gap: 16px; }

.or-person .who .muted { font: 400 0.86rem/1.4 var(--body); }
.or-choice { display: block; }
.or-choice legend { float: none; margin-bottom: 12px; }
.or-pill { display: inline-block; margin: 0 6px 8px 0; }
.or-steps li > * { min-height: 52px; margin: 0; box-sizing: border-box; }
.or-choice legend { float: left; width: 100%; margin-bottom: 12px; }
.or-choice legend + * { clear: none; }

/* ---------- poster headers on every app page (deep search, questions, bingo, checklist, admin, settings) ---------- */
.app .page-head, .page-hero { position: relative; overflow: hidden; padding: 34px 32px; border-radius: 28px; color: var(--feather);
  background: radial-gradient(900px 460px at 100% -30%, rgba(74, 12, 25,0.6), transparent 60%),
              radial-gradient(520px 300px at 0% 130%, rgba(216, 191, 138,0.12), transparent 70%), #121417; margin-bottom: 22px; }
.app .page-head::before, .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.app .page-head > *, .page-hero > * { position: relative; }
.app .page-head .eyebrow, .page-hero .eyebrow { color: var(--lime); }
.app .page-head h1 { font: 400 clamp(2.2rem, 5vw, 3.6rem)/0.92 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; color: var(--feather); margin: 6px 0 0; }
.app .page-head .muted { color: #b9c0cd; }
.app .page-head .button:not(.cta):not(.primary), .app .page-head .cancel-draft .button { color: var(--feather); border-color: rgba(255,255,255,0.35); background: transparent; }
.app .page-head .button:not(.cta):not(.primary):hover { border-color: var(--lime); color: var(--lime); }
.app .page-head .format-switch { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.app .page-head .format-switch a { color: #EFE6D2; }
.app .page-head .format-switch a.current { background: var(--lime); color: var(--midnight); }
@media (max-width: 560px) { .app .page-head, .page-hero { padding: 26px 20px; border-radius: 22px; } }
.page-hero h1.poster { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 0.9; margin: 8px 0 12px; color: var(--feather); }
.page-hero h1.poster span { display: block; }
.page-hero h1 .hl { color: var(--sky); }
.page-hero h1 .hl em { font-family: var(--display); font-style: italic; text-transform: none; color: var(--lime); }
.page-hero .lede { color: #EFE6D2; margin: 0; max-width: 60ch; }
.callout { border-radius: 22px; }
.panel { border-radius: 22px; }

/* ---------- settings ---------- */
.settings-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .settings-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.set-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 24px; padding: 24px; display: grid; gap: 14px;
  box-shadow: 0 24px 50px -42px rgba(18,20,23,0.7); }
.set-card .primary, .set-card .button { justify-self: start; }
.set-head { display: flex; gap: 14px; align-items: flex-start; }
.set-head h2 { margin: 0; font: 600 1.3rem/1.2 var(--display); }
.set-head p { margin: 4px 0 0; }
.set-icon { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--midnight); color: var(--lime); font-size: 1.15rem; }
.set-row { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--rule); }
.set-row > span:last-child { display: flex; flex-direction: column; }
.set-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.set-reports li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--rule); }
.set-reports li > span:last-child { display: flex; flex-direction: column; }
.help-kind { flex: none; font: 600 0.7rem/1 var(--body); padding: 6px 10px; border-radius: 999px; background: var(--paper, #f3f1ec); color: var(--ink-2); white-space: nowrap; }
.help-kind.safe, .help-item.safe .help-kind { background: var(--forrest); color: var(--midnight); }
.help-kind.risky, .help-item.risky .help-kind { background: #fde2c4; color: #7a3d00; }
.set-out { align-content: start; }

/* ---------- help button and form ---------- */
.help-fab { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); font: 600 0.9rem var(--body); cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.5); }
.help-fab span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ocean); color: #fff; font-weight: 700; }
.help-fab:hover { border-color: var(--ocean); }
.help-head { background: linear-gradient(110deg, #121417, #4A0C19); }
.help-head .vv-avatar { background: var(--sky); color: var(--midnight); }
.help-body { display: grid; gap: 14px; padding: 18px 20px 4px; }
.help-cats { border: 0; margin: 0; padding: 0; }
.help-cats legend { font: 600 0.9rem var(--body); margin-bottom: 8px; padding: 0; }
.help-result { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--paper, #f3f1ec); font-size: 0.92rem; }
.help-result.ok { background: color-mix(in srgb, var(--forrest) 25%, var(--sheet)); }
.help-result.sent { background: color-mix(in srgb, var(--sky) 30%, var(--sheet)); }
.help-result.error { background: #fbe1e4; color: var(--fail); }
.help-list { display: grid; gap: 10px; }
.help-item { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rule); display: grid; gap: 6px; }
.help-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.help-item p { margin: 0; }
.help-item.done { opacity: 0.6; }
.help-item .inline { justify-self: start; }

/* ---------- each person's display preferences ---------- */
html:has(body.pref-large) { font-size: 112.5%; }
/* Higher contrast: secondary text takes its surroundings' full text colour (dark on light surfaces, light on dark
   ones, in either theme), never a fixed colour, so it can't end up dark-on-dark. Lines and outlines get stronger. */
body.pref-contrast { --ink-2: var(--ink); --twilight: var(--ink); --rule: color-mix(in srgb, var(--ink) 45%, var(--sheet)); }
body.pref-contrast .muted, body.pref-contrast .hint, body.pref-contrast .small.muted, body.pref-contrast .lede,
body.pref-contrast .eyebrow, body.pref-contrast .count { color: inherit !important; opacity: 1 !important; }
body.pref-contrast a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
body.pref-contrast input, body.pref-contrast textarea, body.pref-contrast select { border-width: 2px; }
body.pref-contrast :focus-visible { outline-width: 4px !important; outline-offset: 3px; }
body.pref-contrast .chip, body.pref-contrast .tag, body.pref-contrast .src-chip { box-shadow: inset 0 0 0 1.5px currentColor; }
body.pref-calm *, body.pref-calm *::before, body.pref-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* ---------- finished search: the #1 candidate as a dark, glowing card ---------- */
.expert-card.first .medal { width: 56px; height: 56px; font: 400 1.35rem var(--poster); border: 0; }
.expert-card.first .expert-score .big { font: 400 3.2rem/0.9 var(--poster); letter-spacing: 0; }
.expert-card.first .pros li::before { color: var(--lime); }
.expert-card.first { border: 0; border-left: 6px solid var(--lime); color: var(--feather);
  background: radial-gradient(800px 380px at 100% 0%, rgba(74, 12, 25,0.45), transparent 60%), #121417; box-shadow: 0 34px 70px -40px rgba(18,20,23,0.9); }
.expert-card.first .medal { background: var(--lime); color: var(--midnight); box-shadow: 0 0 0 6px rgba(216, 191, 138,0.15), 0 0 26px rgba(216, 191, 138,0.35); }
.expert-card.first h3 { color: #fff; }
.expert-card.first .muted, .expert-card.first .dim span:first-child, .expert-card.first .expert-score small { color: #b9c0cd; }
.expert-card.first a { color: var(--lime); }
.expert-card.first .expert-score .big { color: var(--lime); }
.expert-card.first .dim svg .track { fill: rgba(255,255,255,0.14); }
.expert-card.first .dim svg .fill { fill: var(--sky); }
.expert-card.first .dim svg .fill.bingo { fill: var(--lime); }
.expert-card.first .expert-summary { color: #EFE6D2; border-left-color: var(--lime); }
.expert-card.first .eyebrow { color: var(--sky); }
.expert-card.first .lines-badge.quiet { background: rgba(255,255,255,0.1); color: #EFE6D2; }
.expert-card.first .review { border-color: rgba(255,255,255,0.12); }
.expert-card.first .review > summary { color: #fff; }
.expert-card.first .review[open] .split { background: var(--sheet); color: var(--ink); border-radius: 18px; padding: 16px; }
.expert-card.first .contact-menu > summary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.expert-card.first .contact-menu > summary:hover, .expert-card.first .contact-menu[open] > summary { background: var(--lime); color: var(--midnight); }
.expert-card.first .contact-pop, .expert-card.first .contact-found { color: var(--ink); }
.expert-card.first .contact-found .ch { background: rgba(255,255,255,0.92); }
.expert-card.first .ribbon { background: var(--lime); color: var(--midnight); }

/* fixed colours so these stay readable in light and dark mode */
.q-card legend .eyebrow { background: #EFE6D2; color: #4A0C19; }


/* ---------- dashboard: search history ---------- */
.s-list { gap: 12px; }
.s-row { position: relative; }
.s-link { position: relative; overflow: hidden; padding: 18px 20px 18px 26px; border-radius: 22px; gap: 18px;
  background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 18px 40px -36px rgba(0,0,0,0.6); }
.s-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--rule); }
.s-row[data-group="done"] .s-link::before { background: linear-gradient(180deg, var(--forrest), #4fe0b0); }
.s-row[data-group="running"] .s-link::before { background: linear-gradient(180deg, var(--ocean), var(--sky)); animation: pulse 1.6s ease-in-out infinite; }
.s-row[data-group="attention"] .s-link::before { background: linear-gradient(180deg, #f5b74e, #e46a6a); }
.s-row[data-group="draft"] .s-link::before { background: repeating-linear-gradient(180deg, var(--ink-2) 0 6px, transparent 6px 12px); }
.s-link:hover { transform: translateY(-2px); border-color: var(--sky);
  box-shadow: 0 24px 50px -30px rgba(74, 12, 25,0.55), 0 0 0 1px color-mix(in srgb, var(--sky) 40%, transparent); }
.s-kind { width: 52px; height: 52px; border-radius: 16px; font-size: 1.45rem; position: relative; }
.s-kind.deep { background: linear-gradient(140deg, #6F6140, #121417 75%); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.s-kind.quick { background: linear-gradient(140deg, var(--lime), #6F6140); color: var(--midnight); }
.s-kind::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--sheet); background: var(--rule); }
.s-row[data-group="done"] .s-kind::after { background: var(--forrest); }
.s-row[data-group="running"] .s-kind::after { background: var(--sky); animation: pulse 1.4s ease-in-out infinite; }
.s-row[data-group="attention"] .s-kind::after { background: #f5b74e; }
.s-main { gap: 8px; }
.s-main strong { font: 600 1.18rem/1.25 var(--display); letter-spacing: -0.005em; }
.s-meta { gap: 6px; }
.s-meta span + span::before { content: none; }
.s-meta span { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.s-meta span:first-child { color: var(--ink); font-weight: 600; }
.s-meta .num { font: 500 0.74rem var(--mono); }
.s-cost { padding: 5px 11px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); font-size: 0.82rem; }
.s-link .chip { padding: 6px 12px; font-size: 0.8rem; }
.s-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); transition: transform .15s, background .15s, color .15s; }
.s-link:hover .s-go { background: var(--lime); color: var(--midnight); transform: translateX(3px); }
.dash-list-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); position: relative; padding-bottom: 10px; }
.dash-list-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--ocean), var(--lime)); }
@media (max-width: 640px) { .s-link { padding: 14px 14px 14px 20px; } .s-kind { width: 44px; height: 44px; } }

/* ---------- deep search, plain text: the quick-search composer, inverted ---------- */
.ds-stage { max-width: 880px; margin: 0 auto 18px; display: flex; flex-direction: column; }
.ds-box { position: relative; z-index: 1; padding: 20px 20px 14px; border-radius: 28px; color: #EFE6D2;
  background: radial-gradient(700px 320px at 100% 0%, rgba(74, 12, 25,0.5), transparent 65%),
              radial-gradient(400px 220px at 0% 100%, rgba(216, 191, 138,0.10), transparent 70%), #121417;
  box-shadow: 0 30px 60px -34px rgba(18,20,23,0.8); border: 1px solid rgba(255,255,255,0.08); transition: box-shadow .15s; }
.ds-box:focus-within { box-shadow: 0 30px 60px -30px rgba(74, 12, 25,0.7), 0 0 0 4px rgba(216, 191, 138,0.25); }
.ds-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ds-pill { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.ds-pill > span { font: 500 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); flex: none; }
.ds-pill input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; padding: 8px 6px; font: 600 1rem var(--body); box-shadow: none; }
.ds-pill input::placeholder { color: #7f8899; font-weight: 400; }
.ds-pill:focus-within { border-color: var(--sky); }
.ds-box textarea { width: 100%; border: 0; outline: none; resize: vertical; background: transparent; color: #EFE6D2; min-height: 190px;
  padding: 6px 4px; font: 400 1.08rem/1.6 var(--body); box-shadow: none; }
.ds-box textarea::placeholder { color: #7f8899; }
.ds-box textarea:focus { box-shadow: none; }
.ds-box .field-error { color: #ffb3b3; display: block; margin: 2px 4px 6px; }
.ds-meter { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 6px 4px 0; }
.ds-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #e46a6a, #f5b74e); transition: width .25s; }
.ds-meter i.enough { background: linear-gradient(90deg, var(--sky), var(--lime)); }
.ds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ds-mode { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.ds-mode > a { color: #9ea7b8; }
.ds-mode > a:hover { color: #fff; }
.ds-mode .qs-mode-on { background: var(--sky); color: var(--midnight); }
.ds-mode .qs-mode-on svg { color: var(--midnight); }
.ds-count { font: 500 0.78rem var(--mono); color: #9ea7b8; }
.ds-icon { color: #EFE6D2; }
.ds-icon:hover, .ds-icon.on { background: rgba(255,255,255,0.1); color: #fff; }
.ds-go { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px 12px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lime); color: var(--midnight); font: 600 0.98rem var(--body); transition: transform .15s, background .15s; }
.ds-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-go:hover { background: var(--lime-deep); transform: translateX(2px); }
@media (max-width: 560px) { .ds-go span { display: none; } }
.ds-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -24px; padding: 34px 14px 12px; border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, #4A0C19, #6F6140); color: #EFE6D2; }
.ds-tray-label { font: 500 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin: 0 6px 0 4px; }
.ds-tray > button, .ds-tray > a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font: 500 0.88rem var(--body); text-decoration: none; }
.ds-tray > button[data-insert]::before { content: "+"; color: var(--lime); font-weight: 700; }
.ds-tray > button:hover, .ds-tray > a:hover { background: rgba(255,255,255,0.16); border-color: var(--lime); }
.ds-tray-sep { flex: 0 0 1px; height: 22px; background: rgba(255,255,255,0.25); margin: 0 4px; }
/* ---------- pricing page (offer): poster type, bright bands; fixed colours so it reads the same in light and dark mode ---------- */
:root { --op-hi: #D8BF8A; --op-sky: #D8BF8A; --op-berry: #D8BF8A; --op-wine: #4A0C19; --op-green: #6E8B6A; --op-ocean: #4A0C19;
  --op-olive: var(--op-olive); --op-ink: var(--op-ink); }  /* the pricing page's palette, as tokens so a look can restyle it */
.op-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .op-wrap { padding: 0 32px; } }
.op-eyebrow { font: 500 0.78rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--op-wine); margin: 0 0 12px; }
.op-eyebrow.lime { color: var(--op-hi); }
.op-h2 { font: 400 clamp(2.3rem, 6vw, 4rem)/0.95 var(--poster); text-transform: uppercase; letter-spacing: 0.005em; color: var(--op-ink); margin: 0 0 28px; }
.op-h2 span { display: block; }
.op-h2 em, .op-title em, .op-final-title em { font-family: var(--display); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -0.01em; }
.op-lede { font: 400 clamp(1.05rem, 1.6vw, 1.2rem)/1.55 var(--body); max-width: 56ch; }
.op-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 16px 30px; border-radius: 999px;
  background: var(--op-hi); color: var(--op-ink); font: 700 1.05rem/1 var(--body); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.op-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(216, 191, 138, 0.7); color: var(--op-ink); }

/* hero */
.op-hero { position: relative; overflow: hidden; color: #f6f3ed; padding: 72px 0 96px;
  background: radial-gradient(1100px 560px at 88% -10%, rgba(74, 12, 25, 0.95), transparent 62%),
              radial-gradient(700px 420px at -5% 110%, rgba(74, 12, 25, 0.35), transparent 70%), #0B0B0A; }
.op-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.op-hero-grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .op-hero-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.op-hero-copy { display: grid; gap: 18px; min-width: 0; }
.op-tag { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px; border-radius: 999px;
  background: rgba(216, 191, 138, 0.12); border: 1px solid rgba(216, 191, 138, 0.4); color: var(--op-hi); font: 500 0.82rem/1.3 var(--mono); letter-spacing: 0.04em; }
.op-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--op-hi); box-shadow: 0 0 0 4px rgba(216, 191, 138, 0.2); }
.op-title { font: 400 clamp(3.2rem, 10vw, 7.4rem)/0.9 var(--poster); text-transform: uppercase; letter-spacing: 0.005em; margin: 0; color: #f6f3ed; }
.op-title span { display: block; }
.op-title span:last-child { color: var(--op-hi); }
.op-motto { font: 500 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--display); color: #f6f3ed; }
.op-motto em { color: var(--op-berry); }
.op-hero .op-lede { color: #d9d5cc; }
.op-note { font: 500 0.85rem/1.4 var(--mono); color: #b2ada1; }
.op-sticker { justify-self: center; width: min(300px, 78vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 6px;
  background: var(--op-hi); color: var(--op-ink); transform: rotate(-7deg); box-shadow: 0 0 0 10px rgba(216, 191, 138, 0.14), 0 30px 70px -20px rgba(216, 191, 138, 0.45); }
.op-sticker-top, .op-sticker-sub { font: 500 0.78rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--op-wine); }
.op-sticker-price { font: 400 clamp(2.6rem, 6vw, 3.6rem)/1 var(--poster); letter-spacing: 0.01em; }

/* value: lime band with a dark bar card and three bright tiles */
.op-value { background: var(--op-hi); color: var(--op-ink); padding: 88px 0; }
.op-value-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .op-value-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.op-value-copy, .op-bars { min-width: 0; }
.op-value .value-big { font: 400 clamp(3rem, 8vw, 6rem)/0.92 var(--poster); text-transform: uppercase; letter-spacing: 0.005em; color: var(--op-ink); margin: 0 0 18px; }
.op-value .value-big span { display: block; color: var(--op-wine); font-family: var(--display); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: -0.02em; }
.op-value-sub { font: 400 1.15rem/1.5 var(--body); max-width: 46ch; color: #2b2c2e; }
.op-value-sub strong { background: var(--op-ink); color: var(--op-hi); padding: 1px 8px; border-radius: 6px; }
.op-bars { display: grid; gap: 18px; background: var(--op-ink); border-radius: 24px; padding: 28px; box-shadow: 0 34px 60px -34px rgba(11, 11, 10, 0.75); }
.op-bars-title { font: 500 0.78rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #b2ada1; }
.op-bars .value-bar .track { fill: #2a2c2f; }
.op-bars .value-bar .who { color: #f6f3ed; }
.op-bars .value-bar .amount { color: #b2ada1; }
.op-bars .value-bar.senior .fill { fill: var(--op-berry); }
.op-bars .value-bar.person .fill { fill: var(--op-sky); }
.op-bars .value-bar.delvii .who, .op-bars .value-bar.delvii .amount { color: var(--op-hi); }
.op-tiles { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 760px) { .op-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.op-tile { display: grid; gap: 8px; align-content: start; border-radius: 22px; padding: 26px; min-width: 0; transition: transform 0.2s ease; }
.op-tile:hover { transform: translateY(-4px) rotate(-0.6deg); }
.op-tile .n { font: 400 clamp(2.4rem, 4.4vw, 3.4rem)/1 var(--poster); letter-spacing: 0.01em; }
.op-tile .l { font: 500 0.98rem/1.45 var(--body); }
.op-tile.sky { background: var(--op-sky); color: var(--op-ink); }
.op-tile.berry { background: var(--op-berry); color: var(--op-wine); }
.op-tile.ink { background: var(--op-ink); color: #f6f3ed; }
.op-tile.ink .n { color: var(--op-hi); }

/* the plan card and the sums */
.op-plan { background: #f6f3ed; color: var(--op-ink); padding: 96px 0; }
.op-plan-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .op-plan-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; } }
.op-card { position: relative; min-width: 0; background: var(--op-ink); color: #f6f3ed; border-radius: 28px; padding: 34px; display: grid; gap: 18px;
  box-shadow: 0 40px 80px -40px rgba(74, 12, 25, 0.8); overflow: hidden; }
.op-card::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 191, 138, 0.4), transparent 70%); pointer-events: none; }
.op-price { font: 500 1.05rem var(--body); color: #b2ada1; }
.op-price span { display: block; font: 400 clamp(3.6rem, 8vw, 5.4rem)/0.95 var(--poster); color: var(--op-hi); letter-spacing: 0.01em; }
.op-fine { font-size: 0.88rem; color: #b2ada1; }
.op-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.op-ticks li { position: relative; padding-left: 30px; font-size: 1rem; }
.op-ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--op-green); color: #0f1011; font: 700 0.72rem/1 var(--body); }
.op-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.op-chips li { padding: 8px 14px; border-radius: 999px; font: 700 0.85rem/1 var(--body); color: var(--op-ink); }
.op-chips li::before { content: "+ "; }
.op-chips .lime { background: var(--op-hi); } .op-chips .sky { background: var(--op-sky); }
.op-chips .berry { background: var(--op-berry); } .op-chips .green { background: var(--op-green); }
.op-card .op-btn { justify-self: start; }
.op-sums { min-width: 0; display: grid; gap: 14px; }
.op-sums .op-h2 { margin-bottom: 10px; }
.op-sums .op-h2 em { color: var(--op-ocean); }
.op-sum { background: #fff; border-radius: 18px; padding: 20px 22px 20px 26px; border-left: 8px solid; box-shadow: 0 18px 40px -30px rgba(11, 11, 10, 0.5); }
.op-sum.sky { border-color: var(--op-ocean); } .op-sum.berry { border-color: var(--op-berry); } .op-sum.lime { border-color: var(--op-olive); }
.op-sum h3 { font: 600 1.2rem/1.2 var(--display); margin: 0 0 6px; color: var(--op-ink); }
.op-sum p { color: #3d3e40; line-height: 1.55; }
.op-sum strong { color: var(--op-wine); }

/* steps: sky band with giant numbers */
.op-steps { background: var(--op-sky); color: var(--op-ink); padding: 96px 0; }
.op-steps .op-eyebrow { color: var(--op-ink); }
.op-steps .op-h2 { color: var(--op-ink); }
.op-steps .op-h2 em { color: var(--op-ink); }
.op-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .op-step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.op-step-list li { background: #fff; border-radius: 24px; padding: 28px; display: grid; gap: 10px; align-content: start; min-width: 0;
  box-shadow: 0 24px 50px -34px rgba(11, 11, 10, 0.7); }
.op-step-list .num { font: 400 3.6rem/0.9 var(--poster); color: var(--op-ocean); }
.op-step-list li:nth-child(2) .num { color: var(--op-berry); }
.op-step-list li:nth-child(3) .num { color: var(--op-green); }
.op-step-list h3 { font: 600 1.35rem/1.2 var(--display); margin: 0; color: var(--op-ink); }
.op-step-list p { color: #3d3e40; }

/* small print + the referral card */
.op-terms { background: #fff; color: var(--op-ink); padding: 88px 0 64px; }
.op-term-grid { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .op-term-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); } }
.op-term { background: #f6f3ed; border-radius: 22px; padding: 26px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.op-term h3 { font: 600 1.25rem/1.2 var(--display); margin: 0; }
.op-term p { color: #3d3e40; }
.op-term a { color: var(--op-wine); font-weight: 600; }
.op-refer { background: var(--op-berry); transform: rotate(-1deg); box-shadow: 0 30px 60px -36px rgba(74, 12, 25, 0.8); }
.op-refer .op-eyebrow { margin: 0; }
.op-refer p { color: #2b0a18; }
.op-refer-big { font: 600 1.15rem/1.3 var(--body); color: var(--op-ink) !important; }
.op-refer-big span { display: block; font: 400 clamp(2.2rem, 4vw, 3rem)/1 var(--poster); color: var(--op-wine); letter-spacing: 0.01em; }
.op-refer-big span + span { color: var(--op-ink); }
.op-sources { margin: 40px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.85rem; color: #5f5c53; }
.op-sources a { color: #5f5c53; }

/* final call to action */
.op-final { text-align: center; color: #f6f3ed; padding: 110px 0;
  background: radial-gradient(900px 500px at 50% 120%, rgba(74, 12, 25, 0.95), transparent 70%), #0B0B0A; }
.op-final .op-wrap { display: grid; gap: 22px; justify-items: center; }
.op-final-title { font: 400 clamp(2.6rem, 8vw, 6rem)/0.92 var(--poster); text-transform: uppercase; margin: 0; color: #f6f3ed; }
.op-final-title span { display: block; }
.op-final-title em { display: block; color: var(--op-hi); }
.op-final .op-lede { color: #d9d5cc; }
@media (prefers-reduced-motion: reduce) { .op-tile, .op-btn { transition: none; } .op-tile:hover, .op-btn:hover { transform: none; } }

/* ---------- "More like this person": a pill next to Contact, a pop-up form, and a banner on the new search ---------- */
.person-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.like-menu { position: relative; }
.like-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid #4A0C19; background: #EFE6D2; color: #4A0C19; font: 600 0.82rem var(--body); }
.like-menu > summary::-webkit-details-marker { display: none; }
.like-menu > summary::marker { content: ""; }
.like-menu > summary:hover, .like-menu[open] > summary { background: #4A0C19; color: #fff; }
.like-pop { position: absolute; z-index: 31; top: calc(100% + 6px); left: 0; width: min(360px, 88vw); padding: 16px; display: grid; gap: 10px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-top: 5px solid #4A0C19; border-radius: 16px;
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.55); }
.like-pop p { margin: 0; }
.like-title { font: 400 1.15rem/1.15 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.like-title em { font-family: var(--display); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: #4A0C19; }
.like-pop fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.like-pop legend { padding: 0; margin-bottom: 6px; }
.like-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.like-chips label { cursor: pointer; }
.like-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.like-chips span { display: inline-block; padding: 7px 11px; border-radius: 999px; border: 1.5px solid var(--rule); font: 600 0.8rem/1.2 var(--body); }
.like-chips input:checked + span { background: #D8BF8A; border-color: #4A0C19; color: #0B0B0A; }
.like-chips input:focus-visible + span { outline: 3px solid #4A0C19; outline-offset: 2px; }
.like-pop label.small { display: grid; gap: 4px; }
.like-pop textarea { width: 100%; border-radius: 10px; border: 1.5px solid var(--rule); padding: 8px 10px; font: 400 0.9rem var(--body);
  background: var(--sheet); color: var(--ink); resize: vertical; }
.like-pop .button { justify-self: start; }
.like-banner { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 18px; padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(120deg, #EFE6D2, #f3e8ff); color: #0B0B0A; border: 1.5px solid #D8BF8A; }
.like-banner .like-title em { color: #4A0C19; }
.like-banner p { margin: 4px 0 0; }
.like-banner a { color: #4A0C19; font-weight: 600; }
.like-badge { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #4A0C19; color: #D8BF8A; font-size: 1.2rem; }

/* ---------- beyond the card, wildcards, live sources read, and the "keep Devi's questions?" pop-up ---------- */
.beyond { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #f3e8ff; color: #2e1452; font-size: 0.93rem; line-height: 1.5; }
.beyond .eyebrow { display: block; margin-bottom: 4px; color: #6b2fb3; }
.expert-card.first .beyond { background: rgba(243, 232, 255, 0.12); color: #f6f3ed; }
.expert-card.first .beyond .eyebrow { color: #d9b8ff; }
.wild-tag { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px;
  background: #D8BF8A; color: #141412; font: 700 0.78rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.wild-tag.inline { margin: 0; }
.wildcards .wild-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .wildcards .wild-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.wild-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: #141412; color: #f6f3ed;
  border: 2px dashed #D8BF8A; }
.wild-card h3 { margin: 0 0 2px; font: 600 1.2rem/1.2 var(--display); color: #f6f3ed; }
.wild-card .muted { color: #b2ada1; }
.wild-card a { color: #D8BF8A; }
.wild-card p { margin: 6px 0 0; }
.wild-badge { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #D8BF8A; color: #141412; font-size: 1.1rem; }
.sources-read { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.sources-read .eyebrow { margin-right: 4px; }
.src-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: #EFE6D2; color: #4A0C19; font: 600 0.78rem/1.2 var(--body); }
.src-chip b { font: 700 0.72rem var(--mono); background: #fff; border-radius: 999px; padding: 1px 6px; }
dialog.keep-devi { max-width: min(460px, 92vw); border: 0; border-radius: 24px; padding: 28px; background: #fff; color: #141412;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); border-top: 6px solid #D8BF8A; }
dialog.keep-devi::backdrop { background: rgba(11, 11, 10, 0.55); backdrop-filter: blur(3px); }
.keep-devi h2 { margin: 10px 0 8px; font: 400 1.7rem/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.keep-devi p, .keep-devi li { color: #3d3e40; }
.keep-devi ul { padding-left: 18px; margin: 10px 0 18px; }
.keep-devi .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.keep-devi-face { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #D8BF8A; color: #141412; font-size: 1.3rem; }

/* first search: the "More like" tip, a thought bubble pointing up at the button on the #1 candidate */
.like-hint { position: relative; display: flex; gap: 12px; align-items: center; margin: 16px 0 6px 72px; padding: 14px 16px;
  border-radius: 18px; background: #D8BF8A; color: #141412; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55); max-width: 640px;
  animation: like-hint-bob 2.4s ease-in-out infinite; }
.like-hint::before { content: ""; position: absolute; top: -10px; left: 150px; width: 20px; height: 20px; background: #D8BF8A; transform: rotate(45deg); border-radius: 3px; }
.like-hint::after { content: ""; position: absolute; top: -26px; left: 176px; width: 10px; height: 10px; border-radius: 50%; background: #D8BF8A; }
.like-hint p { margin: 0; font-size: 0.93rem; line-height: 1.45; }
.like-hint b { background: #4A0C19; color: #fff; padding: 1px 8px; border-radius: 999px; font-size: 0.82rem; }
.like-hint-face { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #141412; color: #D8BF8A; }
.like-hint-x { flex: none; border: 0; border-radius: 999px; padding: 8px 12px; background: #141412; color: #D8BF8A; font: 700 0.8rem var(--body); cursor: pointer; }
.like-hint[hidden] { display: none; }
@keyframes like-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 640px) { .like-hint { margin-left: 0; } .like-hint::before { left: 40px; } .like-hint::after { left: 64px; } }
@media (prefers-reduced-motion: reduce) { .like-hint { animation: none; } }
.pref-calm .like-hint { animation: none; }

/* settings: switches save themselves; a clear on/off state that holds up in high contrast */
.or-switch { position: relative; }
.set-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.set-saved { margin: 0; font-weight: 600; color: var(--ink); }
body.pref-contrast .or-switch .track { background: color-mix(in srgb, var(--ink) 35%, var(--sheet)); box-shadow: inset 0 0 0 2px var(--ink); }
body.pref-contrast .or-switch input:checked + .track { background: var(--ocean); box-shadow: inset 0 0 0 2px var(--ink); }
body.pref-contrast .or-switch .track::after { box-shadow: 0 0 0 2px var(--ink); }

/* the checked / strong / partial tally stays readable in dark mode */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tally .n { color: var(--lime); } }
:root[data-theme="dark"] .tally .n { color: var(--lime); }
body.pref-contrast .tally .n { color: var(--ink); }

/* ---------- likes ---------- */
.like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #D8BF8A; background: var(--sheet); color: #7a5000; font: 600 0.82rem var(--body); }
.like-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.like-btn:hover { background: #fbf1d9; }
.like-btn.on { background: #D8BF8A; color: #141412; border-color: #D8BF8A; }
.like-btn.on svg { fill: currentColor; }
.like-btn:disabled { opacity: 0.6; }
.expert-card.first .like-btn:not(.on) { background: transparent; color: #D8BF8A; }
.liked-outreach { background: #fbf1d9; color: #5c3d00; border-color: #D8BF8A; }
.liked-outreach[hidden] { display: none; }
.liked-mark { color: #b07a12; }

/* ---------- search memory ---------- */
.memory-used { margin: 0 0 18px; padding: 14px 18px; border-radius: 18px; background: #EFE6D2; color: #0B0B0A; border: 1.5px solid #D8BF8A; }
.memory-used summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.memory-used .muted { color: #4A0C19; }
.memory-used ul { margin: 10px 0 6px; padding-left: 20px; }
.memory-used a { color: #4A0C19; font-weight: 600; }
.memory-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #4A0C19; color: #fff; }
.memory-state { display: inline-block; margin: 4px 0 10px; padding: 4px 12px; border-radius: 999px; font: 700 0.8rem var(--body); }
.memory-state.on { background: #d7f7ea; color: #004842; }
.memory-state.off { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); }
.memory-lines { margin: 4px 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 0.92rem; }
.memory-card .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.memory-card .actions form { margin: 0; }

/* ---------- first search: three things to try ---------- */
.first-reminder { display: grid; gap: 14px; margin: 0 0 22px; padding: 20px 22px; border-radius: 22px;
  background: linear-gradient(120deg, #D8BF8A, #E4CFA2 45%, #fbe6b5); color: #141412; }
.first-reminder[hidden] { display: none; }
.first-reminder .eyebrow { color: #4A0C19; margin: 0; }
.first-reminder h2 { margin: 4px 0 0; font: 400 1.9rem/1 var(--poster); text-transform: uppercase; }
.first-reminder h2 em { font-family: var(--display); font-style: italic; text-transform: none; color: #4A0C19; }
.first-reminder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 860px) { .first-reminder-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.first-reminder-list li { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, 0.75); border-radius: 16px; padding: 12px 14px; }
.first-reminder-list li > span { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #141412; color: #D8BF8A; }
.first-reminder-list strong { display: block; }
.first-reminder-list li div span { font-size: 0.88rem; color: #3d3e40; }
.first-reminder .button { justify-self: start; color: #141412; border-color: #141412; }

/* ---------- first login: welcome and tour, over a blurred page ---------- */
body.touring > *:not(.tour):not(script) { filter: blur(6px); pointer-events: none; user-select: none; }
.tour { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(11, 11, 10, 0.45); overflow-y: auto; }
.tour-card { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 28px; padding: 30px;
  background: #fff; color: #141412; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.8); border-top: 8px solid #D8BF8A; }
.tour .eyebrow { color: #4A0C19; }
.tour-title { margin: 6px 0 18px; font: 400 clamp(2rem, 5vw, 3rem)/0.95 var(--poster); text-transform: uppercase; }
.tour-title span { display: block; }
.tour-title em { display: block; font-family: var(--display); font-style: italic; text-transform: none; color: #4A0C19; }
.tour-facts { display: grid; gap: 10px; }
@media (min-width: 680px) { .tour-facts { grid-template-columns: 1fr 1fr; } }
.tour-facts div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #f6f3ed; }
.tour-facts b { font: 400 1.05rem var(--poster); text-transform: uppercase; letter-spacing: 0.02em; }
.tour-facts span { font-size: 0.9rem; line-height: 1.45; color: #3d3e40; }
.tour-step { display: flex; gap: 18px; align-items: flex-start; margin: 14px 0 6px; }
.tour-icon { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: #141412; color: #D8BF8A;
  font: 400 1.7rem var(--poster); }
.tour-step-title { margin: 0 0 8px; font: 400 2rem/1 var(--poster); text-transform: uppercase; }
.tour-step p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #3d3e40; }
.tour-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.tour-skip { margin-left: auto; border: 0; background: none; color: #5f5c53; text-decoration: underline; cursor: pointer; font: 600 0.9rem var(--body); }
.tour-dots { list-style: none; display: flex; gap: 6px; justify-content: center; margin: 20px 0 0; padding: 0; }
.tour-dots li { width: 8px; height: 8px; border-radius: 50%; background: #d8d2c5; }
.tour-dots li.on { width: 24px; border-radius: 999px; background: #4A0C19; }
.tour-page[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour-card { background: #fff; color: #141412; } }

/* the first-search tip points at "More like", which now sits after the heart */
.like-hint::before { left: 282px; }
.like-hint::after { left: 308px; }
@media (max-width: 640px) { .like-hint::before { left: 40px; } .like-hint::after { left: 64px; } }

/* tour: a dark card with bright accents, so it stands out from the light page behind it */
.tour { background: rgba(11, 11, 10, 0.6); }
.tour-card, :root .tour-card { background: radial-gradient(700px 360px at 100% -10%, rgba(74, 12, 25, 0.45), transparent 65%),
  radial-gradient(600px 320px at -10% 110%, rgba(74, 12, 25, 0.9), transparent 70%), #0B0B0A;
  color: #f6f3ed; border-top: 0; box-shadow: 0 0 0 2px #D8BF8A, 0 50px 120px -40px rgba(0, 0, 0, 0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour-card { color: #f6f3ed; } }
.tour .eyebrow { color: #D8BF8A; }
.tour-title { color: #f6f3ed; }
.tour-title em { color: #D8BF8A; }
.tour-facts div { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.tour-facts div:nth-child(1) b { color: #D8BF8A; }
.tour-facts div:nth-child(2) b { color: #D8BF8A; }
.tour-facts div:nth-child(3) b { color: #D8BF8A; }
.tour-facts div:nth-child(4) b { color: #6E8B6A; }
.tour-facts div:nth-child(5) b { color: #D8BF8A; }
.tour-facts div:nth-child(6) b { color: #D8BF8A; }
.tour-facts span { color: #d9d5cc; }
.tour-facts strong { color: #fff; }
.tour-icon { background: #D8BF8A; color: #141412; }
.tour-step-title { color: #f6f3ed; }
.tour-step p { color: #d9d5cc; }
.tour .button.primary { background: #D8BF8A; color: #141412; border-color: #D8BF8A; }
.tour .button.ghost { background: transparent; color: #f6f3ed; border: 1.5px solid rgba(246, 243, 237, 0.5); }
.tour .button.ghost:hover { background: rgba(255, 255, 255, 0.08); }
.tour-skip { color: #b2ada1; }
.tour-dots li { background: rgba(255, 255, 255, 0.25); }
.tour-dots li.on { background: #D8BF8A; }

/* tour, matched to the home page (port 3000): the hero's dark night + maroon glow for the welcome, cream cards with
   dark text for the facts, and the lime band for the tutorial steps. Fixed colours, so it reads the same in every mode. */
.tour { background: rgba(10, 10, 12, 0.72); }
.tour .tour-card { color: #f6f3ed; border: 0;
  background: radial-gradient(900px 480px at 85% -10%, rgba(74, 12, 25, 0.9), transparent 60%), #0B0B0A;
  box-shadow: 0 0 0 2px rgba(216, 191, 138, 0.85), 0 50px 120px -30px rgba(0, 0, 0, 0.95); }
.tour .tour-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.tour .tour-page { position: relative; }
.tour .eyebrow { color: #D8BF8A !important; opacity: 1 !important; }
.tour .tour-title { color: #f6f3ed; }
.tour .tour-title em { color: #D8BF8A; }
.tour .tour-facts div { background: #f6f3ed; border: 0; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.8); }
.tour .tour-facts b { color: #141412 !important; }
.tour .tour-facts div:nth-child(1) { box-shadow: inset 6px 0 0 #D8BF8A; }
.tour .tour-facts div:nth-child(2) { box-shadow: inset 6px 0 0 #D8BF8A; }
.tour .tour-facts div:nth-child(3) { box-shadow: inset 6px 0 0 #D8BF8A; }
.tour .tour-facts div:nth-child(4) { box-shadow: inset 6px 0 0 #6E8B6A; }
.tour .tour-facts div:nth-child(5) { box-shadow: inset 6px 0 0 #4A0C19; }
.tour .tour-facts div:nth-child(6) { box-shadow: inset 6px 0 0 #4A0C19; }
.tour .tour-facts span { color: #2b2c2e !important; }
.tour .tour-facts strong { color: #4A0C19; }
/* tutorial steps: the lime band */
.tour .tour-page:not([data-tour-page="0"]) { margin: -30px; padding: 30px; border-radius: 28px; background: #D8BF8A; color: #141412; }
.tour .tour-page:not([data-tour-page="0"]) .eyebrow { color: #4A0C19 !important; }
.tour .tour-page:not([data-tour-page="0"]) .tour-step-title { color: #141412; }
.tour .tour-page:not([data-tour-page="0"]) .tour-step p { color: #2b2c2e; }
.tour .tour-page:not([data-tour-page="0"]) .tour-icon { background: #141412; color: #D8BF8A; }
.tour .tour-page:not([data-tour-page="0"]) .button.primary { background: #141412; color: #D8BF8A; border-color: #141412; }
.tour .tour-page:not([data-tour-page="0"]) .button.ghost { color: #141412; border-color: #141412; }
.tour .tour-page:not([data-tour-page="0"]) .tour-skip { color: #4A0C19; }
.tour .button.primary { background: #D8BF8A; color: #141412; border-color: #D8BF8A; }
.tour .button.ghost { color: #f6f3ed; border-color: rgba(246, 243, 237, 0.6); }
.tour .tour-dots li { background: rgba(255, 255, 255, 0.3); }
.tour .tour-dots li.on { background: #D8BF8A; }

/* tutorial steps: the whole card turns lime (not just the page inside it) */
.tour .tour-page:not([data-tour-page="0"]) { margin: 0; padding: 0; border-radius: 0; background: none; }
.tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) { background: #D8BF8A; color: #141412; box-shadow: 0 0 0 2px #141412, 0 50px 120px -30px rgba(0, 0, 0, 0.95); }
.tour .tour-card:has(.tour-page.on:not([data-tour-page="0"]))::before { display: none; }
.tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .tour-dots li { background: rgba(11, 11, 10, 0.25); }
.tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .tour-dots li.on { background: #141412; }

/* =====================================================================================================================
   LIGHT LOOK (Settings > Look > Light). Inspired by a navy-and-cream varsity print: cream paper, navy panels with cream
   type, a heavy wide sans for headlines with a flowing script for the accent word, and small, widely tracked capitals.
   ===================================================================================================================== */
body.theme-light {
  --navy: #0B0B0A; --navy-deep: #0B0B0A; --cream: #f3efe6; --script-on-navy: #EFE6D2; --script-on-cream: #4A0C19;
  --feather: #f3efe6; --stone: #ddd6c6; --twilight: #4A473F; --dusk: #B9B4A8;
  --midnight: #0B0B0A; --maroon: #4A0C19; --lime: #EFE6D2; --lime-deep: #EFE6D2; --sky: #EFE6D2;
  --paper: #f3efe6; --sheet: #fbf9f3; --ink: #0B0B0A; --ink-2: #4A473F; --rule: #dcd5c5;
  --accent: #4A0C19; --accent-soft: #EFE6D2; --cta: #0B0B0A; --cta-ink: #f3efe6;
  --night: #0B0B0A; --night-2: #1D1D1A; --night-ink: #f3efe6; --night-ink-2: #D9D4C7; --night-rule: #4A0C19;
  --poster: "Archivo Black", "Archivo", "Arial Black", Impact, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  --caps: "Archivo", "DM Sans", sans-serif;
  --script-ink: var(--script-on-cream);
  background: var(--paper); color: var(--ink);
}
/* headlines: heavy and wide; the accent word turns into the script, like the print */
body.theme-light .poster, body.theme-light .section-title, body.theme-light h1.display, body.theme-light .op-h2 {
  font-family: var(--poster); letter-spacing: 0.005em; }
body.theme-light .poster em, body.theme-light .section-title em, body.theme-light h1 em, body.theme-light h2 em,
body.theme-light .like-title em {
  font-family: var(--script); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 1.18em; line-height: 0.9; color: var(--script-ink); }
/* small labels: widely tracked capitals */
body.theme-light .eyebrow, body.theme-light .op-eyebrow {
  font-family: var(--caps); font-weight: 600; font-stretch: 125%; letter-spacing: 0.24em; font-size: 0.7rem; }
/* navy panels with cream type (every dark hero and highlight card) */
body.theme-light .app .page-head, body.theme-light .page-hero, body.theme-light .dash-hero, body.theme-light .or-hero,
body.theme-light .search-hero, body.theme-light .atc, body.theme-light .expert-card.first, body.theme-light .ds-box,
body.theme-light .wild-card, body.theme-light .canvas.dark {
  --script-ink: var(--script-on-navy);
  background: radial-gradient(900px 460px at 100% -30%, rgba(216, 191, 138, 0.22), transparent 60%),
              radial-gradient(520px 300px at 0% 130%, rgba(243, 239, 230, 0.08), transparent 70%), var(--navy);
  color: var(--cream); box-shadow: inset 0 0 0 1px rgba(243, 239, 230, 0.14), 0 30px 60px -40px rgba(11, 11, 10, 0.6); }
body.theme-light .page-hero h1.poster, body.theme-light .dash-hero h1.poster, body.theme-light .search-hero h1,
body.theme-light .expert-card.first h3 { color: var(--cream); }
body.theme-light .page-hero h1 .hl, body.theme-light .dash-hero h1 .hl, body.theme-light .display.poster .hl { color: var(--script-on-navy); }
body.theme-light .page-hero .eyebrow, body.theme-light .dash-hero .eyebrow, body.theme-light .search-hero .eyebrow,
body.theme-light .atc .eyebrow, body.theme-light .or-hero .eyebrow { color: var(--script-on-navy); }
body.theme-light .expert-card.first { border-left-color: var(--script-on-navy); }
body.theme-light .expert-card.first .medal { background: var(--cream); color: var(--navy); box-shadow: 0 0 0 6px rgba(243, 239, 230, 0.15); }
body.theme-light .wild-card { border-color: var(--script-on-navy); }
body.theme-light .wild-badge, body.theme-light .wild-tag { background: var(--script-on-navy); color: var(--navy); }
/* a quiet signature line on page headers, like the small print around the logo */
@media (min-width: 760px) {
  body.theme-light .page-hero::after, body.theme-light .dash-hero::after {
    content: "Curated shortlists \00B7  Designed in Sydney"; position: absolute; right: 28px; bottom: 18px; pointer-events: none;
    font: 600 0.62rem/1 var(--caps); font-stretch: 125%; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(243, 239, 230, 0.45); }
}
/* buttons: navy on cream, pale blue on navy */
body.theme-light .button.primary, body.theme-light button.primary, body.theme-light .button.cta {
  background: var(--navy); color: var(--cream); border-color: var(--navy); }
body.theme-light .button.primary:hover, body.theme-light button.primary:hover, body.theme-light .button.cta:hover { background: var(--navy-deep); }
body.theme-light .page-hero .button.cta, body.theme-light .dash-hero .button.cta, body.theme-light .search-hero .button.cta,
body.theme-light .page-hero .button.primary, body.theme-light .dash-hero .button.primary {
  background: var(--script-on-navy); color: var(--navy); border-color: var(--script-on-navy); }
/* cards and lists: cream paper with navy hairlines */
body.theme-light .set-card, body.theme-light .panel, body.theme-light .s-link, body.theme-light .compact-card, body.theme-light .expert-card:not(.first) {
  background: var(--sheet); border-color: var(--rule); }
body.theme-light .set-icon { background: var(--navy); color: var(--script-on-navy); }
body.theme-light .topbar { background: rgba(243, 239, 230, 0.92); border-bottom: 1px solid var(--rule); }
body.theme-light .like-btn.on { background: var(--navy); color: var(--cream); border-color: var(--navy); }
body.theme-light .first-reminder { background: linear-gradient(120deg, #EFE6D2, var(--cream) 50%, #efe4d6); }

/* ---------- Settings: the look picker ---------- */
.look-pick { border: 0; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 520px) { .look-pick { grid-template-columns: 1fr 1fr; } }
.look-pick legend { margin-bottom: 8px; }
.look-card { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--rule); background: var(--sheet); }
.look-card input { position: absolute; opacity: 0; }
.look-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.look-card:has(input:focus-visible) { outline: 3px solid var(--ocean); outline-offset: 2px; }
.look-card > span:last-child { display: grid; }
.look-swatch { flex: none; display: flex; width: 54px; height: 40px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.look-swatch i { flex: 1; }
.look-card.classic .look-swatch i:nth-child(1) { background: #0B0B0A; }
.look-card.classic .look-swatch i:nth-child(2) { background: #D8BF8A; }
.look-card.classic .look-swatch i:nth-child(3) { background: #D8BF8A; }
.look-card.light .look-swatch i:nth-child(1) { background: #0B0B0A; }
.look-card.light .look-swatch i:nth-child(2) { background: #f3efe6; }
.look-card.light .look-swatch i:nth-child(3) { background: #EFE6D2; }

/* ---------- Settings: cancel and suspend, behind a mandatory review ---------- */
.button.danger-ghost { background: transparent; color: #b4233a; border: 1.5px solid #e6a3ae; }
.button.danger-ghost:hover { background: #fdecef; }
.button.danger { background: #b4233a; color: #fff; border-color: #b4233a; }
.button.danger:disabled { opacity: 0.45; cursor: not-allowed; }
dialog.cancel-dialog { max-width: min(520px, 94vw); border: 0; border-radius: 24px; padding: 28px; background: #fff; color: #141412;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); border-top: 6px solid #b4233a; }
dialog.cancel-dialog::backdrop { background: rgba(11, 11, 10, 0.6); backdrop-filter: blur(4px); }
.cancel-dialog h2 { margin: 6px 0 6px; font: 400 2rem/1 var(--poster); text-transform: uppercase; }
.cancel-dialog h2 em { font-family: var(--display); font-style: italic; text-transform: none; color: #b4233a; }
body.theme-light .cancel-dialog h2 em { font-family: var(--script); font-style: normal; color: #b4233a; }
.cancel-dialog .eyebrow { color: #b4233a; }
.cancel-form { display: grid; gap: 14px; }
.cancel-form .req { font-size: 0.72rem; font-weight: 700; color: #b4233a; text-transform: uppercase; letter-spacing: 0.06em; }
.star-pick { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2.2rem; line-height: 1; cursor: pointer; color: #d9d3c7; transition: color 0.12s, transform 0.12s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #f5b301; }
.stars label:hover { transform: scale(1.12); }
.stars input:focus-visible + label { outline: 3px solid #4A0C19; outline-offset: 2px; border-radius: 6px; }
.star-word { min-height: 1.2em; color: #5f5c53; }
.cancel-form textarea { width: 100%; border-radius: 12px; border: 1.5px solid #cfc8bb; padding: 10px 12px; font: 400 0.95rem var(--body); }
.confirm-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; }
.confirm-row input { margin-top: 3px; }
.cancel-form .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stars-show { color: #f5b301; letter-spacing: 2px; white-space: nowrap; }
.stars-show .off { color: #d9d3c7; }
.suspended-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.suspended-page h1 span { display: block; }
.suspended-page .actions { justify-content: center; }

/* fixes: the confirm tick sits with its text; room for the header signature; readable labels on pale cards */
.cancel-form label.confirm-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.cancel-form .confirm-row input { width: 18px; height: 18px; margin: 2px 0 0; }
@media (min-width: 760px) { body.theme-light .page-hero, body.theme-light .dash-hero { padding-bottom: 52px; } }
body.theme-light .start-card .eyebrow { color: var(--navy); opacity: 0.75; }

/* first-login tour, step 0: pick a look (dark card like the welcome, not the lime of the tutorial steps) */
.tour .tour-card:has(.tour-page.on[data-tour-page="look"]) {
  background: radial-gradient(900px 480px at 85% -10%, rgba(74, 12, 25, 0.9), transparent 60%), #0B0B0A; color: #f6f3ed;
  box-shadow: 0 0 0 2px rgba(216, 191, 138, 0.85), 0 50px 120px -30px rgba(0, 0, 0, 0.95); }
.tour .tour-card:has(.tour-page.on[data-tour-page="look"])::before { display: block; }
.tour .tour-card:has(.tour-page.on[data-tour-page="look"]) .tour-dots li { background: rgba(255, 255, 255, 0.3); }
.tour .tour-card:has(.tour-page.on[data-tour-page="look"]) .tour-dots li.on { background: #D8BF8A; }
.tour .tour-page[data-tour-page="look"] .eyebrow { color: #D8BF8A !important; }
.tour .tour-page[data-tour-page="look"] .tour-title { color: #f6f3ed; }
.tour .tour-page[data-tour-page="look"] .button.primary { background: #D8BF8A; color: #141412; border-color: #D8BF8A; }
.tour-look-lede { margin: -8px 0 16px; color: #d9d5cc; }
.tour-looks { display: grid; gap: 14px; }
@media (min-width: 620px) { .tour-looks { grid-template-columns: 1fr 1fr; } }
.tour-look { position: relative; display: grid; gap: 10px; padding: 12px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.14); transition: border-color 0.15s, transform 0.15s; }
.tour-look:hover { transform: translateY(-2px); }
.tour-look input { position: absolute; opacity: 0; }
.tour-look:has(input:checked) { border-color: #D8BF8A; box-shadow: 0 0 0 4px rgba(216, 191, 138, 0.18); }
.tour-look:has(input:focus-visible) { outline: 3px solid #D8BF8A; outline-offset: 3px; }
.tour-look-badge { position: absolute; top: -11px; right: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  background: #D8BF8A; color: #141412; font: 700 0.68rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.tour-look-name { display: grid; gap: 2px; padding: 0 4px 4px; }
.tour-look-name strong { font-size: 1.05rem; color: #f6f3ed; }
.tour-look-name span { font-size: 0.86rem; color: #d9d5cc; }
/* the mini previews */
.tour-look-preview { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; align-items: end; height: 120px;
  padding: 14px; border-radius: 14px; overflow: hidden; }
.pv-head { align-self: start; display: grid; line-height: 0.95; }
.pv-head b { font-size: 1.15rem; text-transform: uppercase; }
.pv-head i { font-style: normal; }
.pv-card { height: 62px; border-radius: 10px; }
.pv-card.two { height: 62px; }
.tour-look.classic .tour-look-preview { background: radial-gradient(240px 140px at 100% 0%, rgba(74, 12, 25, 0.95), transparent 70%), #0B0B0A; }
.tour-look.classic .pv-head b { font-family: "Anton", Impact, sans-serif; font-weight: 400; color: #f6f3ed; }
.tour-look.classic .pv-head i { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 1.15rem; color: #D8BF8A; }
.tour-look.classic .pv-card { background: #D8BF8A; }
.tour-look.classic .pv-card.two { background: #fff; box-shadow: inset 0 0 0 2px #D8BF8A; }
.tour-look.light .tour-look-preview { background: radial-gradient(240px 140px at 100% 0%, rgba(216, 191, 138, 0.3), transparent 70%), #0B0B0A; }
.tour-look.light .pv-head b { font-family: "Archivo Black", "Arial Black", sans-serif; color: #f3efe6; font-size: 1.05rem; }
.tour-look.light .pv-head i { font-family: "Great Vibes", "Segoe Script", cursive; font-size: 1.6rem; color: #EFE6D2; margin-top: -2px; }
.tour-look.light .pv-card { background: #EFE6D2; }
.tour-look.light .pv-card.two { background: #f3efe6; }

/* ---------- Light look: the dashboard's search history, in the cream-and-navy print style ---------- */
body.theme-light .dash-list-head { padding-bottom: 14px; border-bottom: 1.5px solid var(--navy); box-shadow: 0 4px 0 -2.5px var(--rule); }
body.theme-light .dash-list-head h2 { font-family: var(--poster); color: var(--navy); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.35em; }
body.theme-light .dash-list-head h2::after { content: "& shortlists"; font-family: var(--script); font-size: 1.25em; text-transform: none;
  letter-spacing: 0; color: var(--script-on-cream); line-height: 0.8; }
body.theme-light .dash-filters label { background: transparent; border: 1.5px solid var(--navy); color: var(--navy);
  font: 600 0.72rem/1 var(--caps); font-stretch: 115%; letter-spacing: 0.14em; text-transform: uppercase; }
body.theme-light .dash-filters label i { font: 600 0.7rem var(--caps); color: var(--twilight); letter-spacing: 0; }
body.theme-light #df-all:checked ~ .dash-list-head label[for="df-all"], body.theme-light #df-running:checked ~ .dash-list-head label[for="df-running"],
body.theme-light #df-done:checked ~ .dash-list-head label[for="df-done"], body.theme-light #df-attention:checked ~ .dash-list-head label[for="df-attention"],
body.theme-light #df-draft:checked ~ .dash-list-head label[for="df-draft"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
body.theme-light #df-all:checked ~ .dash-list-head label[for="df-all"] i, body.theme-light #df-running:checked ~ .dash-list-head label[for="df-running"] i,
body.theme-light #df-done:checked ~ .dash-list-head label[for="df-done"] i, body.theme-light #df-attention:checked ~ .dash-list-head label[for="df-attention"] i,
body.theme-light #df-draft:checked ~ .dash-list-head label[for="df-draft"] i { color: var(--script-on-navy); }

body.theme-light .s-list { gap: 14px; }
body.theme-light .s-link { background: var(--sheet); border: 1.5px solid var(--navy); border-radius: 20px; color: var(--navy);
  box-shadow: 4px 4px 0 var(--navy); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
body.theme-light .s-link:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--navy); background: #f7f3ea; border-color: var(--navy); }
body.theme-light .s-link::before { width: 7px; }
body.theme-light .s-row[data-group="done"] .s-link::before { background: linear-gradient(180deg, #2f8f6b, #7cc7a8); }
body.theme-light .s-row[data-group="running"] .s-link::before { background: linear-gradient(180deg, var(--script-on-cream), var(--script-on-navy)); }
/* the badge: a navy tile with a script initial, like the flourish on the print */
body.theme-light .s-kind { border-radius: 14px; font-family: var(--script); font-size: 2.1rem; line-height: 1; padding-top: 4px; }
body.theme-light .s-kind.deep { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 2px rgba(243, 239, 230, 0.25); }
body.theme-light .s-kind.quick { background: var(--script-on-navy); color: var(--navy); box-shadow: inset 0 0 0 2px rgba(11, 11, 10, 0.25); }
body.theme-light .s-kind::after { border-color: var(--sheet); }
body.theme-light .s-main strong { font-family: var(--caps); font-weight: 750; font-stretch: 108%; color: var(--navy); letter-spacing: -0.005em; }
/* details: small, tracked capitals */
body.theme-light .s-meta span { background: transparent; border: 1px solid var(--rule); color: var(--twilight);
  font: 600 0.64rem/1.4 var(--caps); font-stretch: 115%; letter-spacing: 0.14em; text-transform: uppercase; }
body.theme-light .s-meta span:first-child { background: var(--navy); border-color: var(--navy); color: var(--cream); }
body.theme-light .s-meta .num { font: 500 0.7rem var(--mono); letter-spacing: 0; text-transform: none; }
body.theme-light .s-link .chip { background: transparent; border: 1.5px solid currentColor; font-weight: 700; }
body.theme-light .s-link .chip.done { color: #2f8f6b; }
body.theme-light .s-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy);
  color: var(--cream); border: 0; transition: background 0.15s, transform 0.15s; }
body.theme-light .s-link:hover .s-go { background: var(--script-on-cream); color: var(--cream); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { body.theme-light .s-link, body.theme-light .s-link:hover { transform: none; } }

/* Light look: the heading flourish replaces the classic underline bar, so reset that bar's shape */
body.theme-light .dash-list-head h2::after { position: static; width: auto; height: auto; border-radius: 0; background: none;
  white-space: nowrap; padding-bottom: 0; }

/* The five home-page links (live site) need more room than the two local ones. */
@media (max-width: 1100px) { .nav-public-wide { display: none; } .nav-public-wide + .nav-sep { display: none; } }

/* ---------- candidate stages (shared with the team) and teammates' likes ---------- */
.stage-pick { position: relative; display: inline-flex; }
.stage-pick select { appearance: none; -webkit-appearance: none; font: 600 0.82rem var(--body); color: var(--ink-2);
  background: transparent; border: 1.5px dashed var(--rule); border-radius: 999px; padding: 7px 28px 7px 12px; min-height: 36px;
  cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.stage-pick select:hover { border-color: var(--ink-2); }
.stage-pick.set select { border-style: solid; border-color: var(--accent); color: var(--accent); background-color: var(--accent-soft); }
.stage-pick select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.team-liked { margin: 6px 0 0; color: var(--accent); font-weight: 600; }
.stage-by { margin: 4px 0 0; }
.team-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.team-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent); font: 700 0.85rem var(--body); }
.stage-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.stage-sum li { font: 600 0.78rem var(--body); padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* ---------- share with a hiring manager ---------- */
.share-box { margin-top: 16px; border: 1.5px solid var(--rule); border-radius: 16px; padding: 12px 16px; background: var(--sheet); }
.share-box summary { cursor: pointer; font-weight: 700; }
.share-box[open] summary { margin-bottom: 8px; }
.share-links { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px; }
.share-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-links li.new input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.share-links input { flex: 1 1 280px; min-width: 0; font: 500 0.85rem var(--mono); padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); }
.share-page { max-width: 860px; margin: 0 auto; padding: 32px 0 56px; }
.share-head { padding-bottom: 20px; border-bottom: 1.5px solid var(--rule); margin-bottom: 24px; }
.share-head h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; margin: 8px 0 10px; }
.share-meta { font: 500 0.85rem var(--mono); color: var(--ink-2); margin: 0; }
.share-note { margin: 12px 0 14px; color: var(--ink-2); max-width: 62ch; }
.share-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.share-card { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 18px; padding: 20px 22px; break-inside: avoid; }
.share-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.share-card-head h2 { margin: 0; font-size: 1.2rem; }
.share-letter { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent); color: var(--paper); font: 800 1.2rem var(--body); }
.share-fit { margin: 2px 0 0; font: 600 0.78rem var(--body); text-transform: uppercase; letter-spacing: 0.08em; }
.share-fit.strong { color: var(--met); } .share-fit.partial { color: var(--likely); }
.share-facts { font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }
.share-reqs { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.share-reqs li { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 0.93rem; }
.share-foot { margin-top: 28px; color: var(--ink-2); }
@media print {
  .topbar, .site-footer, .share-print, .help-fab, .devi-fab, [data-devi-open] { display: none !important; }
  .share-page { padding: 0; } .share-card { border-color: #bbb; }
}

/* ---------- refresh this search ---------- */
.refresh-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.refresh-box { margin: 18px 0; padding: 20px 22px; border-radius: 18px; border: 1.5px solid var(--accent); background: var(--sheet); }
.refresh-box h2 { margin: 4px 0 12px; }
.refresh-box h3 { margin: 16px 0 6px; font-size: 1rem; }
.rf-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rf-stats li { padding: 8px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rf-stats b { font-size: 1.2rem; margin-right: 4px; }
.rf-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- notifications ---------- */
.notify-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 16px; padding: 16px 18px;
  border-radius: 18px; background: var(--accent-soft); border: 1.5px solid var(--accent); }
.notify-ask > div:nth-child(2) { flex: 1 1 280px; }
.notify-ask p { margin: 0; }
.notify-ask .small { margin-top: 4px; color: var(--ink-2); }
.notify-bell { font-size: 1.6rem; }
.notify-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* =====================================================================================================================
   ONE DESIGN, TWO LIGHTINGS. Light (cream paper, navy panels) is the standard look for everyone; the original
   night-and-lime look is retired. Dark (Settings > Look) keeps the same type, shapes and navy panels, on a deep-navy
   page with pale-blue accents: navy used as *ink* on paper is switched to the light ink below.
   ===================================================================================================================== */
.look-card.light .look-swatch i:nth-child(1) { background: #f3efe6; }
.look-card.light .look-swatch i:nth-child(2) { background: #0B0B0A; }
.look-card.light .look-swatch i:nth-child(3) { background: #EFE6D2; }
.look-card.dark .look-swatch i:nth-child(1) { background: #0B0B0A; }
.look-card.dark .look-swatch i:nth-child(2) { background: #1D1D1A; }
.look-card.dark .look-swatch i:nth-child(3) { background: #EFE6D2; }

body.theme-light.theme-dark {
  /* brand constants (navy panels with cream type, pale-blue chips) stay as in Light; only the page and its ink change */
  --stone: #4A0C19; --twilight: #D8BF8A; --dusk: #8189ab; --script-on-cream: #EFE6D2;
  --paper: #0B0B0A; --sheet: #0B0B0A; --ink: #EFE6D2; --ink-2: #D8BF8A; --rule: #4A0C19;
  --accent: #EFE6D2; --accent-soft: #4A0C19; --cta: #EFE6D2; --cta-ink: #0B0B0A;
  --met: #4fe0aa; --likely: #EFE6D2; --unknown: #f2c063; --fail: #ff8a6b;
  --met-bg: #0f2e23; --likely-bg: #0B0B0A; --unknown-bg: #33280f; --fail-bg: #3a1a12;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-up: 0 10px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
body.theme-dark .like-banner { background: linear-gradient(120deg, #4A0C19, #4A0C19); color: var(--ink); border-color: #4A0C19; }
body.theme-dark .like-banner .like-title em { color: #EFE6D2; }
body.theme-dark .topbar { background: rgba(11, 11, 10, 0.92); }
body.theme-dark .button.primary, body.theme-dark button.primary, body.theme-dark .button.cta {
  background: #EFE6D2; color: #0B0B0A; border-color: #EFE6D2; }
body.theme-dark .button.primary:hover, body.theme-dark button.primary:hover, body.theme-dark .button.cta:hover { background: #EFE6D2; }
body.theme-dark .first-reminder { background: linear-gradient(120deg, #4A0C19, #0B0B0A 50%, #0B0B0A); }
body.theme-dark .start-card .eyebrow, body.theme-dark .dash-list-head h2, body.theme-dark .s-main strong { color: var(--ink); }
body.theme-dark .dash-list-head { border-bottom-color: var(--ink-2); }
body.theme-dark .dash-filters label { border-color: var(--rule); color: var(--ink-2); }
body.theme-dark .s-link { border-color: var(--rule); color: var(--ink); }
body.theme-dark .s-link:hover { background: #0B0B0A; border-color: var(--ink-2); box-shadow: 7px 7px 0 #000; }
body.theme-dark .s-kind.quick { color: #0B0B0A; }
body.theme-dark .s-meta span:first-child { background: #4A0C19; border-color: #4A0C19; }
body.theme-dark .like-btn.on { background: #EFE6D2; color: #0B0B0A; border-color: #EFE6D2; }
body.theme-dark .cancel-dialog h2 em { color: #D8BF8A; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background-color: #0B0B0A; color: var(--ink); border-color: var(--rule); }
body.theme-dark .app .page-head, body.theme-dark .page-hero, body.theme-dark .dash-hero, body.theme-dark .or-hero,
body.theme-dark .search-hero, body.theme-dark .atc, body.theme-dark .expert-card.first, body.theme-dark .ds-box,
body.theme-dark .wild-card, body.theme-dark .canvas.dark { box-shadow: inset 0 0 0 1px rgba(216, 191, 138, 0.18), 0 30px 60px -40px rgba(0, 0, 0, 0.8); }

/* the first-login welcome and tour, in the Light design: a navy card with cream type and pale-blue accents */
body.theme-light .tour { background: rgba(11, 11, 10, 0.55); }
body.theme-light .tour .tour-card { background: radial-gradient(700px 360px at 100% -10%, rgba(216, 191, 138, 0.28), transparent 65%), #0B0B0A;
  color: #f3efe6; box-shadow: 0 0 0 1px rgba(243, 239, 230, 0.16), 0 50px 120px -30px rgba(11, 11, 10, 0.9); }
body.theme-light .tour .eyebrow { color: #EFE6D2 !important; font-family: var(--caps); font-stretch: 125%; letter-spacing: 0.24em; font-size: 0.7rem; }
body.theme-light .tour .tour-title { font-family: var(--poster); color: #f3efe6; }
body.theme-light .tour .tour-title em { font-family: var(--script); font-style: normal; text-transform: none; color: #EFE6D2; font-size: 1.25em; line-height: 1; }
body.theme-light .tour .tour-facts div { background: #f3efe6; }
body.theme-light .tour .tour-facts b { font-family: var(--caps); font-weight: 750; font-stretch: 110%; color: #0B0B0A !important; }
body.theme-light .tour .tour-facts span { color: #4A473F !important; }
body.theme-light .tour .tour-facts div:nth-child(n) { box-shadow: inset 6px 0 0 #EFE6D2; }
body.theme-light .tour .tour-facts div:nth-child(2n) { box-shadow: inset 6px 0 0 #4A0C19; }
body.theme-light .tour .button.primary { background: #EFE6D2; color: #0B0B0A; border-color: #EFE6D2; }
body.theme-light .tour .button.ghost { color: #f3efe6; border-color: rgba(243, 239, 230, 0.5); }
body.theme-light .tour .tour-dots li { background: rgba(243, 239, 230, 0.28); }
body.theme-light .tour .tour-dots li.on { background: #EFE6D2; }
body.theme-light .tour .tour-skip { color: #D9D4C7; }
/* tutorial steps: the whole card turns cream with navy type (it was lime) */
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) { background: #f3efe6; color: #0B0B0A;
  box-shadow: 0 0 0 2px #0B0B0A, 0 50px 120px -30px rgba(11, 11, 10, 0.9); }
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .eyebrow { color: #4A0C19 !important; }
body.theme-light .tour .tour-step-title { font-family: var(--poster); color: #0B0B0A; }
body.theme-light .tour .tour-step p { color: #4A473F; }
body.theme-light .tour .tour-icon { background: #0B0B0A; color: #EFE6D2; }
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .button.primary { background: #0B0B0A; color: #f3efe6; border-color: #0B0B0A; }
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .button.ghost { color: #0B0B0A; border-color: rgba(11, 11, 10, 0.45); }
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .tour-skip { color: #4A473F; }
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .tour-dots li { background: rgba(11, 11, 10, 0.22); }
body.theme-light .tour .tour-card:has(.tour-page.on:not([data-tour-page="0"])) .tour-dots li.on { background: #0B0B0A; }
body.theme-dark .like-banner a { color: #EFE6D2; }

.retry-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 18px; }
.alert.credit-low { background: var(--unknown-bg); color: var(--unknown); border: 1.5px solid currentColor; }

.contact-public { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--ink-2); }

/* =====================================================================================================================
   SEARCHES LIST: a board (where everything is up to) over a ledger (every search, one line). Light design tokens;
   Dark follows through the same tokens. Filtering stays CSS-only: the board's column counts are labels for the radios.
   ===================================================================================================================== */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 26px; }
.bcol { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 18px; padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.bcol-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; cursor: pointer; padding: 2px 4px 6px;
  border-bottom: 1.5px solid var(--rule); font: 600 0.7rem var(--caps, var(--body)); font-stretch: 120%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.bcol-head b { font: 400 1.5rem/1 var(--poster, var(--display)); letter-spacing: 0; color: var(--ink); }
.bcol-head:hover { color: var(--ink); }
.bcol[data-group="running"] .bcol-head b { color: var(--likely); }
.bcol[data-group="attention"] .bcol-head b { color: var(--fail); }
.bcol[data-group="attention"]:has(.btile) { border-color: var(--fail); }
.btile { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1.5px solid transparent;
  color: var(--ink); text-decoration: none; min-width: 0; }
.btile strong { font-weight: 700; font-size: 0.9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btile span { font-size: 0.78rem; color: var(--ink-2); }
.btile:hover { border-color: var(--ink); }
.bcol[data-group="running"] .btile { box-shadow: inset 4px 0 0 var(--likely); }
.bcol-empty { margin: 4px; font-size: 0.84rem; color: var(--ink-2); }
.bcol-more { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--accent); padding: 2px 4px; }
#df-running:checked ~ .board .bcol[data-group="running"], #df-done:checked ~ .board .bcol[data-group="done"],
#df-attention:checked ~ .board .bcol[data-group="attention"], #df-draft:checked ~ .board .bcol[data-group="draft"] {
  border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }

.ledger { display: grid; border-top: 1.5px solid var(--ink); }
.lg-head, .lg-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 92px 70px 64px 34px; gap: 12px; align-items: center; padding: 12px 10px; }
.ledger.admin .lg-head, .ledger.admin .lg-row { grid-template-columns: minmax(0, 1fr) 70px 110px 92px 70px 64px 64px 34px; }
.lg-head { font: 600 0.64rem var(--caps, var(--body)); font-stretch: 120%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); padding-block: 10px; }
.lg-row { border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; border-radius: 12px; }
.lg-row:hover { background: var(--accent-soft); }
.lg-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lg-title { min-width: 0; } .lg-title strong { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-title span { display: block; font-size: 0.82rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-kind { font: 600 0.66rem var(--caps, var(--body)); font-stretch: 120%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.ledger .r { text-align: right; } .ledger .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.86rem; }
.lg-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy, var(--midnight)); color: var(--cream, var(--feather)); }
.lg-row[data-group="running"] .chip { animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lg-row[data-group="running"] .chip { animation: none; } }
.bar5 { display: inline-flex; gap: 3px; vertical-align: middle; }
.bar5 i { width: 10px; height: 18px; border-radius: 3px; background: var(--rule); }
.bar5 i.s { background: var(--met); } .bar5 i.p { background: var(--sky); }
.lg-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.lg-key .bar5 i { width: 8px; height: 12px; }
.chip.failed, .chip.stopped { color: var(--fail); background: var(--fail-bg); }
#df-running:checked ~ .ledger .lg-row:not([data-group="running"]),
#df-done:checked ~ .ledger .lg-row:not([data-group="done"]),
#df-attention:checked ~ .ledger .lg-row:not([data-group="attention"]),
#df-draft:checked ~ .ledger .lg-row:not([data-group="draft"]) { display: none; }
@media (max-width: 760px) {
  .lg-head { display: none; }
  .lg-row, .ledger.admin .lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .lg-title { flex: 1 1 100%; }
  .lg-kind, .ledger .lg-row .r:not(.lg-date) { display: none; }
  .lg-go { margin-left: auto; }
}

/* Rose: the third colour of the Light look, used sparingly. The script flourishes (the accent word in headings, set in
   Great Vibes) are rose on cream and soft pink on navy; liked hearts and teammates' likes are rose too. */
body.theme-light { --rose: #6F6140; --rose-soft: #D8BF8A; --script-ink: var(--rose); }
body.theme-light .app .page-head, body.theme-light .page-hero, body.theme-light .dash-hero, body.theme-light .or-hero,
body.theme-light .search-hero, body.theme-light .atc, body.theme-light .expert-card.first, body.theme-light .ds-box,
body.theme-light .wild-card, body.theme-light .canvas.dark { --script-ink: var(--rose-soft); }
body.theme-light.theme-dark { --rose: #D8BF8A; --script-ink: var(--rose-soft); }
body.theme-light .dash-list-head h2::after { color: var(--rose); }
body.theme-light .tour .tour-title em { color: var(--rose-soft); }
body.theme-light .like-btn.on { background: var(--rose); border-color: var(--rose); color: #fff; }
body.theme-light.theme-dark .like-btn.on { background: var(--rose-soft); border-color: var(--rose-soft); color: #0B0B0A; }
body.theme-light .team-liked { color: var(--rose); }
@media (min-width: 760px) {
  body.theme-light .page-hero::after, body.theme-light .dash-hero::after { color: rgba(216, 191, 138, 0.6); }
}
/* the Outreach banner is about reaching people: saffron gold, with navy text */
body.theme-light .dash-outreach { background: linear-gradient(110deg, #C9AE74 0%, #D8BF8A 45%, #f8d98f 100%); color: #0B0B0A; }
body.theme-light .dash-outreach:hover { box-shadow: 0 22px 44px -24px rgba(138, 90, 0, 0.55); }
body.theme-light .dash-outreach-copy .eyebrow { color: #4a3000; }
body.theme-light .dash-outreach-copy span:last-child { color: #0B0B0A; }
body.theme-light .dash-outreach .or-icon { background: var(--navy); color: var(--rose-soft); }
body.theme-light .dash-outreach .go { background: #0B0B0A; color: #D8BF8A; }
body.theme-light .start-card.deep { border-color: var(--rose-soft); }

/* ---------- the questionnaire, in the Light design ---------- */
body.theme-light .q-progress { height: 10px; background: var(--rule); }
body.theme-light .q-progress span { background: linear-gradient(90deg, var(--navy), var(--rose)); }
body.theme-light .q-card { position: relative; padding: 30px 32px 26px; border-radius: 26px; border: 1.5px solid var(--rule);
  background: radial-gradient(520px 260px at 100% 0%, rgba(216, 191, 138, 0.22), transparent 70%), var(--sheet);
  box-shadow: 0 30px 60px -44px rgba(11, 11, 10, 0.45); gap: 18px; }
body.theme-light .q-card.required { border: 1.5px solid var(--rule); box-shadow: inset 6px 0 0 var(--rose), 0 30px 60px -44px rgba(11, 11, 10, 0.45); }
body.theme-light .q-card legend { gap: 8px; padding-right: 110px; }
body.theme-light .q-num { position: absolute; top: 16px; right: 24px; font: 400 clamp(3.4rem, 8vw, 5.2rem)/1 var(--poster);
  color: transparent; -webkit-text-stroke: 2px var(--rose-soft); pointer-events: none; }
body.theme-light .q-card h2 { font: 400 clamp(1.5rem, 3.2vw, 2.15rem)/1.05 var(--poster); text-transform: uppercase; letter-spacing: 0.005em; color: var(--ink); text-wrap: balance; }
body.theme-light .q-card .req-tag { background: var(--rose); color: #fff; }
body.theme-light .q-card .q-why { font-size: 0.95rem; }
body.theme-light .q-stack { display: grid; gap: 16px; }
body.theme-light .q-card .field > span { font-weight: 700; }
body.theme-light .q-card input:not([type=radio]):not([type=checkbox]), body.theme-light .q-card select, body.theme-light .q-card textarea {
  width: 100%; min-height: 58px; padding: 14px 22px; font-size: 1.08rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--sheet); color: var(--ink); }
body.theme-light .q-card textarea { min-height: 200px; line-height: 1.55; border-radius: 26px; padding: 18px 20px; }
body.theme-light .q-card input:focus, body.theme-light .q-card select:focus, body.theme-light .q-card textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(138, 90, 0, 0.18); }
body.theme-light .q-options { gap: 10px; }
body.theme-light .q-option span { padding: 14px 20px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--paper); font-weight: 600; font-size: 0.98rem; }
body.theme-light .q-option:hover span { border-color: var(--navy); transform: translateY(-1px); }
body.theme-light .q-option input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--cream); box-shadow: 4px 4px 0 var(--rose-soft); }
body.theme-light .q-option input:checked + span::before { content: "✓ "; color: var(--rose-soft); }
body.theme-light .q-nav { padding-top: 6px; border-top: 1px solid var(--rule); }
body.theme-light .q-nav .primary, body.theme-light .q-submit .primary { min-height: 50px; padding: 12px 26px; border-radius: 999px; font-size: 1rem; }
body.theme-light .q-nav .primary::after, body.theme-light .q-submit .primary::after { content: " →"; }
body.theme-light.theme-dark .q-num { -webkit-text-stroke-color: rgba(216, 191, 138, 0.55); }
body.theme-light.theme-dark .q-card { background: radial-gradient(520px 260px at 100% 0%, rgba(216, 191, 138, 0.12), transparent 70%), var(--sheet); }
@media (max-width: 600px) { body.theme-light .q-card { padding: 22px 18px; } body.theme-light .q-card legend { padding-right: 64px; }
  body.theme-light .q-num { font-size: 3rem; right: 16px; } }

/* outreach: liked people, everywhere */
.or-search-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.or-search-row > a:first-child { flex: 1 1 320px; }
.or-liked-n { color: var(--rose, var(--accent)); }
.or-liked-go { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 14px; font-weight: 700; text-decoration: none;
  background: var(--rose, var(--accent)); color: #fff; }
.or-liked-go:hover { filter: brightness(1.08); }
.or-tools button[disabled] { opacity: 0.5; cursor: not-allowed; }
.or-searches a.or-liked-go { color: #fff; justify-content: center; font-family: var(--body); }
.or-searches a.or-liked-go::before, .or-searches a.or-liked-go::after { display: none; }

/* scoring: "check on a call" squares, and the plain-words fit label beside each score */
.bingo-grid > .unk { background: transparent; border: 1.5px dashed var(--ink-2); color: var(--ink-2); }
.bingo-legend i.unk { background: transparent; border: 1.5px dashed var(--ink-2); }
.fit-label { display: inline-block; margin-top: 4px; font: 400 1.25rem/1 var(--script, var(--display)); color: var(--rose, var(--accent)); white-space: nowrap; }
.expert-card.first .fit-label { color: var(--rose-soft, var(--lime)); }
.fit-label.fit-long-shot, .fit-label.fit-worth-a-call { color: var(--ink-2); }

.flag.confirm { background: var(--likely-bg); color: var(--likely); border-color: currentColor; }

/* quick search: go deeper into a deep search */
.go-deeper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(120deg, var(--accent-soft), var(--sheet)); border: 1.5px solid var(--accent); }
.go-deeper > div { flex: 1 1 320px; display: grid; gap: 4px; }
.go-deeper span { font-size: 0.9rem; color: var(--ink-2); }
.from-quick { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; padding: 16px 18px; border-radius: 18px;
  background: var(--accent-soft); border: 1.5px solid var(--accent); }
.from-quick > div { display: grid; gap: 4px; } .from-quick span { color: var(--ink-2); font-size: 0.93rem; }
.fq-badge { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--navy, var(--midnight)); color: var(--rose-soft, var(--lime)); }

/* ---------- pick a call time (after confirming an access request) ---------- */
.call-pick { max-width: 880px; margin: 0 auto; padding: 36px 0 56px; }
.call-pick h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; margin: 8px 0 12px; }
.call-lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 18px; }
.call-tz { margin: 0 0 10px; font-weight: 600; color: var(--accent); }
.call-days { display: grid; gap: 14px; margin-bottom: 18px; }
.call-day { border: 1.5px solid var(--rule); border-radius: 18px; padding: 12px 14px 14px; margin: 0; background: var(--sheet); }
.call-day legend { padding: 0 6px; font-weight: 700; }
.call-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.call-slot { position: relative; cursor: pointer; }
.call-slot input { position: absolute; opacity: 0; }
.call-slot span { display: inline-block; min-width: 86px; text-align: center; padding: 9px 12px; border-radius: 12px;
  border: 1.5px solid var(--rule); background: var(--paper); font: 600 0.9rem var(--body); }
.call-slot:hover span { border-color: var(--ink); }
.call-slot input:checked + span { background: var(--navy, var(--midnight)); border-color: var(--navy, var(--midnight)); color: var(--cream, #fff); box-shadow: 3px 3px 0 var(--rose-soft, var(--accent)); }
.call-slot input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.call-form .field { margin-bottom: 14px; }

/* =====================================================================================================================
   ROUNDED ANSWER BOXES. Every text box is a soft, rounded panel; Devi's boxes are full composers (text on top, a row of
   round buttons below: attach, dictate, send), in navy with a rose glow when in use.
   ===================================================================================================================== */
.vv-form.composer { display: block; margin: var(--s3) var(--s4) var(--s4); padding: 16px 16px 12px; border: 1px solid var(--rule);
  border-radius: 26px; background: var(--sheet); box-shadow: 0 18px 40px -26px rgba(11, 11, 10, 0.45); transition: border-color .15s, box-shadow .15s; }
.vv-form.composer:focus-within { border-color: var(--ink-2); box-shadow: 0 22px 48px -24px rgba(11, 11, 10, 0.5), 0 0 0 4px color-mix(in srgb, var(--lime) 55%, transparent); }
.vv-form.composer textarea { display: block; width: 100%; min-height: 56px; max-height: 180px; padding: 2px 4px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; resize: none; font: 400 1.05rem/1.5 var(--body); }
.vv-form.composer textarea:focus { box-shadow: none; }
.composer-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.composer-gap { flex: 1; }
.composer-hint { color: var(--ink-2); padding-left: 4px; }
.composer-btn, .composer-send { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.composer-btn { border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); }
.composer-btn:hover { border-color: var(--navy, var(--ink)); }
.composer-btn.on { background: var(--rose, var(--accent)); border-color: var(--rose, var(--accent)); color: #fff; }
.composer-send { border: 0; background: var(--navy, var(--midnight)); color: var(--cream, #fff); }
.composer-send:hover { background: var(--rose, var(--accent)); }
.composer-send:disabled { opacity: 0.45; cursor: default; }
.composer-btn svg, .composer-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.theme-dark .composer-send { background: #EFE6D2; color: #0B0B0A; }
/* dropdowns match the rounded boxes: our own arrow instead of the browser's square one */
select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 24px) 52%, calc(100% - 18px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.stage-pick select { padding-right: 28px; box-shadow: none; }

/* ---------- pricing page: senior researcher, recruiter and Delvii side by side; fixes for the Light look ---------- */
body.theme-light .topbar.on-dark .brand, body.theme-light .topbar.on-dark nav a, body.theme-light .topbar.on-dark nav button.link { color: var(--ink); }
body.theme-light .topbar.on-dark .brand-sub { color: var(--ink-2); }
.op-sticker-price { font-size: clamp(2rem, 4.4vw, 2.8rem); white-space: nowrap; }
.op-price span { font-size: clamp(2.8rem, 6vw, 4.2rem); white-space: nowrap; }
.op-value .op-value-copy { max-width: 760px; }
.op-face { display: grid; gap: 16px; margin-top: 34px; align-items: stretch; }
@media (min-width: 900px) { .op-face { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.op-face-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 24px 22px; border-radius: 26px;
  background: #fbf9f3; color: #0B0B0A; border: 1.5px solid rgba(11, 11, 10, 0.14); box-shadow: 0 24px 50px -36px rgba(11, 11, 10, 0.55); }
.op-face-card header h3 { margin: 0; font: 400 1.5rem/1 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; }
.op-face-card header p { margin: 6px 0 0; font: 500 0.8rem var(--mono); color: #4A473F; }
.op-face-price { margin: 8px 0 0; font: 600 0.95rem var(--body); color: #4A473F; }
.op-face-price span { display: block; font: 400 clamp(2.2rem, 4vw, 2.8rem)/1 var(--poster); color: #0B0B0A; white-space: nowrap; letter-spacing: 0.01em; }
.op-face-month { margin: 0; font-size: 0.86rem; color: #4A473F; }
.op-face-card ul { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(11, 11, 10, 0.12); display: grid; gap: 10px; }
.op-face-card li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 0.93rem; line-height: 1.4; }
.op-face-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 0.9rem/1 var(--body); }
.op-face-card li.yes .op-face-mark { background: var(--op-green); color: #0B0B0A; }
.op-face-card li.part .op-face-mark { background: #fff3cc; color: #5c4700; border: 1px solid #e4c65a; }
.op-face-card li.no .op-face-mark { background: #f3dfe3; color: #7d1631; }
.op-face-card.us { background: #0B0B0A; color: #f3efe6; border-color: #0B0B0A; box-shadow: 0 30px 60px -30px rgba(11, 11, 10, 0.7), inset 0 0 0 2px var(--op-berry); }
.op-face-card.us header p, .op-face-card.us .op-face-price, .op-face-card.us .op-face-month { color: #D9D4C7; }
.op-face-card.us .op-face-price span { color: var(--op-berry); }
.op-face-card.us ul { border-top-color: rgba(243, 239, 230, 0.18); }
.op-face-badge { position: absolute; top: -13px; right: 20px; padding: 7px 12px; border-radius: 999px; background: var(--op-berry); color: #0B0B0A;
  font: 600 0.7rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 899px) { .op-face-card.us { order: -1; margin-top: 10px; } }
.op-face-note { margin: 18px 0 0; max-width: 72ch; font-size: 0.92rem; }
.op-face-card.us header h3 { color: #f3efe6; }

/* ---------- pricing page: Start the plan posts to Stripe Checkout ---------- */
.op-start { margin: 0; display: inline-block; }
.op-btn:disabled { opacity: 0.6; cursor: not-allowed; }
button.op-btn { border: 0; cursor: pointer; }
.op-started { background: var(--op-green); color: #0B0B0A; padding: 16px 0; }
.op-started p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* ---------- pricing page: team rate and the "how many people" picker ---------- */
.op-team { margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(216, 191, 138, 0.12); color: var(--op-hi); font-size: 0.95rem; line-height: 1.45; }
.op-team strong { color: var(--op-hi); }
.op-seats-form { display: grid; gap: 14px; justify-items: start; }
.op-seats { display: grid; gap: 8px; }
.op-seats label { font: 600 0.78rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #D9D4C7; }
.op-stepper { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.18); }
.op-stepper input { width: 64px; padding: 8px 4px; text-align: center; border: 0; background: transparent; color: #fff; font: 700 1.2rem var(--body); box-shadow: none; -moz-appearance: textfield; }
.op-stepper input::-webkit-outer-spin-button, .op-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.op-stepper input:focus { box-shadow: none; }
.op-step { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--op-hi); color: var(--op-ink); font: 700 1.3rem/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.op-step:hover { background: #fff; }
.op-seat-total { margin: 0; font-size: 0.95rem; color: #f3efe6; }
.code-input { text-align: center; letter-spacing: 0.4em; font-size: 1.3rem; }
.code-input::placeholder { letter-spacing: normal; font-size: 1rem; }

/* ---------- logo in the navy, cream and rose palette (rose rim where it sits on a dark background) ---------- */
.brand-mark .tile, .stamp .tile { fill: #0B0B0A; }
.brand-mark .d, .stamp .d { fill: #f3efe6; }
.brand-mark .lens, .brand-mark .spark, .stamp .lens, .stamp .spark { fill: #D8BF8A; }
.brand-mark .rim { fill: none; stroke: none; stroke-width: 1.5; }
.site-footer .brand-mark .rim, body.theme-dark .brand-mark .rim { stroke: #D8BF8A; }

/* =====================================================================================================================
   CV FORMATTER (Outreach): tabs between the two outreach tools, the intake form, and the formatted CV beside Devi.
   ===================================================================================================================== */
.or-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 999px; background: var(--sheet); border: 1.5px solid var(--rule); }
.or-tabs a { padding: 9px 18px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 0.93rem; }
.or-tabs a:hover { color: var(--ink); }
.or-tabs a.on { background: var(--navy, var(--ink)); color: var(--cream, #fff); }
.cv-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cv-promises li { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #EFE6D2; font-size: 0.94rem; line-height: 1.45; }
.cv-promises b { color: #D8BF8A; }
.cv-start textarea { min-height: 220px; }
.cv-files input[type=file] { padding: 14px 16px; border-style: dashed; background: var(--paper); cursor: pointer; }
.cv-go { display: flex; justify-content: flex-end; }
.cv-go .primary { min-height: 52px; padding: 0 30px; border-radius: 999px; font-size: 1.02rem; }

.cv-layout { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1040px) { .cv-layout { grid-template-columns: minmax(0, 1fr) 360px; } .cv-side { position: sticky; top: 16px; } }
.cv-paper { background: #fff; color: #0B0B0A; border-radius: 6px; padding: clamp(22px, 5vw, 56px) clamp(18px, 5vw, 60px);
  box-shadow: 0 30px 60px -38px rgba(11, 11, 10, 0.55), 0 0 0 1px rgba(11, 11, 10, 0.08); font-size: 0.95rem; line-height: 1.5; }
.cv-paper header { border-bottom: 2px solid var(--cv-accent, #0B0B0A); padding-bottom: 14px; margin-bottom: 6px; }
.cv-name { margin: 0; font: 700 clamp(1.7rem, 4vw, 2.3rem)/1.1 var(--body); letter-spacing: -0.01em; color: #0B0B0A; }
.cv-headline { margin: 6px 0 0; color: var(--cv-accent, #0B0B0A); font-weight: 600; font-size: 1.05rem; }
.cv-contact { margin: 6px 0 0; color: #4A473F; font-size: 0.86rem; overflow-wrap: anywhere; }
.cv-paper section { margin-top: 18px; }
.cv-paper h3 { margin: 0 0 8px; font: 700 0.78rem/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cv-accent, #0B0B0A); }
.cv-paper p { margin: 0 0 6px; }
.cv-paper ul { margin: 2px 0 8px; padding-left: 18px; }
.cv-paper li { margin: 2px 0; }
.cv-role { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cv-role strong { display: block; }
.cv-role span { display: block; color: #4A473F; font-size: 0.9rem; }
.cv-role time { flex: none; color: #4A473F; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 520px) { .cv-role { flex-direction: column; gap: 0; } .cv-role time { white-space: normal; } }
.cv-classic { --cv-accent: #0B0B0A; }
.cv-modern { --cv-accent: #6F6140; }
.cv-modern header { border-bottom-width: 0; padding-bottom: 0; }
.cv-modern header::after { content: ""; display: block; height: 4px; width: 72px; margin-top: 14px; border-radius: 4px; background: #6F6140; }
.cv-compact { --cv-accent: #4A0C19; font-size: 0.88rem; line-height: 1.42; }
.cv-compact section { margin-top: 12px; }

.cv-side { display: grid; gap: 16px; }
.cv-side > section { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 22px; padding: 18px; }
.cv-side h3 { margin: 0 0 10px; font: 700 0.78rem/1.2 var(--mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cv-devi { background: var(--navy, #0B0B0A) !important; border-color: var(--navy, #0B0B0A) !important; color: #f3efe6; }
.cv-devi-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.cv-devi-head b { display: block; font-size: 1.05rem; }
.cv-devi-head span { font-size: 0.82rem; color: #D9D4C7; }
.devi-dot { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #D8BF8A; color: #0B0B0A; }
.cv-reply { margin: 14px 0 12px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #1D1D1A; line-height: 1.45; font-size: 0.94rem; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cv-chips .chip { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: #f3efe6; cursor: pointer; font-size: 0.8rem; }
.cv-chips .chip:hover { border-color: #D8BF8A; color: #D8BF8A; }
.cv-devi .vv-form.composer { margin: 0; background: #fbf9f3; }
.cv-devi .composer-hint { color: #4A473F; }
.cv-undo { margin-top: 10px; }
.cv-undo .link { color: #D8BF8A; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.9rem; }
.cv-confirm { border-color: #e4c65a !important; background: #fff8dc !important; }
.cv-confirm h3 { color: #5c4700 !important; }
.cv-confirm ul { margin: 0; padding-left: 18px; color: #3d3300; font-size: 0.92rem; }
.cv-dl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cv-dl button { border-radius: 999px; padding: 10px 20px; }
.cv-restyle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-2); margin-bottom: 8px; }
.cv-restyle .chip { cursor: pointer; }
.cv-restyle .chip.on { background: var(--navy, #0B0B0A); color: #f3efe6; border-color: var(--navy, #0B0B0A); }
.dash-cv { margin-top: 12px; }
.or-tabs { width: max-content; max-width: 100%; }
.cv-devi-head .devi-dot { color: #0B0B0A; font-size: 1rem; }
.cv-chips .chip, .cv-restyle .chip { font-family: var(--body); letter-spacing: 0; }
.cv-chips .chip::before, .cv-restyle .chip::before { display: none; }
.cv-files input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 16px; border-radius: 999px; border: 0;
  background: var(--navy, #0B0B0A); color: #f3efe6; font: 600 0.9rem var(--body); cursor: pointer; }
.cv-jump { display: none; margin: 0 0 12px; font-weight: 600; color: var(--rose, #6F6140); }
@media (max-width: 1039px) { .cv-jump { display: inline-block; } }
/* Dashboard: the CV formatter as a quiet strip under the searches, not a second big banner above them. */
.dash-cv { margin-top: 0; }
.dash-cv-strip { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; padding: 14px 18px; border-radius: 18px;
  background: var(--sheet); border: 1.5px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.4; }
.dash-cv-strip:hover { border-color: var(--navy, var(--ink)); }
.dash-cv-strip b { margin-right: 6px; }
.dash-cv-strip .cv-strip-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--navy, #0B0B0A); color: #D8BF8A; font-size: 1.1rem; }
.dash-cv-strip .go { margin-left: auto; flex: none; font-size: 1.2rem; color: var(--ink-2); }
/* Phones: long search titles wrap instead of running off the edge. */
@media (max-width: 700px) { .lg-title strong, .lg-title span { white-space: normal; overflow: visible; overflow-wrap: anywhere; } }
/* Rotating dashboard greetings: longer ones step down a size so the hero keeps its height. */
.dash-hero h1.poster.long { font-size: clamp(2.3rem, 5vw, 3.6rem); }

/* Score transparency: what each score means (tap the i), and which come from evidence vs estimates. */
.dim { position: relative; grid-template-columns: 138px minmax(0, 1fr) 34px; }
.dim-l { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-2); }
.dim .k, .dim-key .k { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.k.kev { background: var(--navy, #0B0B0A); }
.k.kes { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.dim-i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; opacity: 0.55;
  font: italic 700 9.5px/13px Georgia, serif; text-align: center; padding: 0; cursor: help; display: inline-block; }
.dim-i:hover, .dim-i:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 3px rgba(138, 90, 0, 0.25); }
.dim-tip { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 10px 12px; border-radius: 12px;
  background: #0B0B0A; color: #f3efe6; font: 400 0.8rem/1.45 var(--body); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
.dim-tip b { color: #D8BF8A; font-weight: 600; }
.dim-i:hover + .dim-tip, .dim-i:focus + .dim-tip { display: block; }
.dim-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 0.74rem; color: var(--ink-2); }
.dim-key span { display: inline-flex; align-items: center; gap: 6px; }
.dim-key .dim-i { cursor: default; opacity: 0.7; }
.est-tag { font: 600 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-2); vertical-align: 1px; }
body.theme-dark .k.kev { background: #EFE6D2; }
.dim { grid-template-columns: 9.6rem minmax(60px, 1fr) 34px; }
.dim-l { white-space: nowrap; }
.k.kev { background: currentColor; }
.k.kes { box-shadow: inset 0 0 0 1.5px currentColor; }
.dims-wrap { min-width: 0; }
.dim-tip { background: #fbf9f3; color: #0B0B0A; border: 1px solid #dcd5c5; box-shadow: 0 16px 34px -16px rgba(11, 11, 10, 0.55); }
.dim-tip b { color: #6F6140; }
.dim-key { color: inherit; opacity: 0.78; }
.dim-tip { white-space: normal; }

/* Devi full screen: the floating panel or the results-page panel fills the window, chat kept to a readable width. */
.vv-panel.full, .vv-results.full { position: fixed; inset: 16px; z-index: 70; width: auto; height: auto; max-height: none; margin: 0;
  border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(11, 11, 10, 0.6); background: var(--sheet); }
.vv-panel.full .vv-log, .vv-results.full .vv-log, .vv-panel.full .vv-chips, .vv-panel.full .vv-form,
.vv-results.full .vv-chips, .vv-results.full .vv-form { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
.vv-results.full .vv-log { flex: 1; overflow-y: auto; }
body.devi-full { overflow: hidden; }
body.devi-full::after { content: ""; position: fixed; inset: 0; z-index: 65; background: rgba(11, 11, 10, 0.45); }
body.devi-full .vv-fab { display: none; }
@media (max-width: 560px) { .vv-panel.full, .vv-results.full { inset: 0; border-radius: 0; } }
.vv-panel.full .vv-form.composer, .vv-results.full .vv-form.composer { width: auto; max-width: min(860px, calc(100% - 32px)); }

/* Saffron accent: white text is fine on the deep gold (#6F6140, 5.8:1) but not on the bright gold used in dark mode. */
body.theme-dark .composer-btn.on, body.theme-dark .or-liked-go, body.theme-dark .q-card .req-tag, body.theme-dark .like-btn.on { color: #0B0B0A; }
body.theme-light .dash-outreach-copy strong { color: #0B0B0A; }
/* Dark mode: the search cards stay light, so their small labels need a dark colour too. */
body.theme-dark .start-card .eyebrow { color: #0B0B0A; }
/* Freshness check on each Top 5 card */
.fresh { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0 4px; padding: 5px 11px; border-radius: 12px; font-size: 0.82rem; line-height: 1.4; }
.fresh-current { background: #DCEBE1; color: #1F5E3F; }
.fresh-moved { background: #F6E9CF; color: #5C3D00; }
.fresh-unclear { background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); }
.fresh a { color: inherit; font-weight: 600; }
body.theme-dark .fresh-current { background: #1C3A2B; color: #9FDDB5; }
body.theme-dark .fresh-moved { background: #3A3015; color: #F0C766; }

/* Brief-format pop-up: rows with icons, and the "something else" box styled like the quick search bar. */
.fc-body { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.fc-q { margin: 0; font: 600 1.45rem/1.25 var(--display); color: var(--ink); }
.fc-list { display: flex; flex-direction: column; gap: 8px; }
.fc-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--rule);
  background: var(--sheet); color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.fc-opt:hover, .fc-opt:focus-visible { border-color: var(--ink-2); box-shadow: 0 14px 30px -22px rgba(11, 11, 10, 0.55); transform: translateY(-1px); outline: none; }
.fc-opt.on { border-color: var(--navy, var(--ink)); box-shadow: inset 0 0 0 1px var(--navy, var(--ink)); }
.fc-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); color: var(--navy, var(--ink)); }
.fc-opt.on .fc-ic { background: var(--navy, var(--ink)); color: #D8BF8A; }
.fc-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-txt strong { font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fc-txt > span { font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.fc-pill { padding: 3px 9px; border-radius: 999px; background: var(--navy, var(--ink)); color: var(--cream, #fff); font: 600 0.68rem/1.3 var(--body); letter-spacing: .02em; }
.fc-pill.gold { background: #D8BF8A; color: #0B0B0A; }
.fc-go { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: transform .15s, color .15s; }
.fc-opt:hover .fc-go { color: var(--ink); transform: translateX(3px); }
.fc-other { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.fc-label { font-size: 0.88rem; font-weight: 600; color: var(--ink-2); padding-left: 4px; }
.fc-box { padding: 14px 14px 10px 18px; }
.fc-box textarea { min-height: 56px; font-size: 1rem; }
.fc-box .qs-go { background: var(--navy, var(--midnight)); color: #D8BF8A; }
.fc-box .qs-go:hover { background: #1D1D1A; }
.fc-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; font-size: 0.9rem; }
.fc-foot a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.fc-foot a:hover { color: var(--ink); }
.fc-foot a:last-child { color: var(--navy, var(--ink)); }
/* Motivation & working style on each Top 5 card */
.motive { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #D8BF8A 14%, var(--sheet)); border: 1px solid color-mix(in srgb, #D8BF8A 45%, var(--rule)); }
.motive .eyebrow { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.motive p { margin: 0 0 6px; }
.motive ul { margin: 2px 0 0; padding-left: 18px; }
.motive-q { margin-top: 8px !important; }
.vv-disclaimer { margin: -6px 0 10px; text-align: center; font-size: 0.74rem; color: var(--ink-2); }
.ai-note { margin: 4px 0 14px; font-size: 0.86rem; color: var(--ink-2); }
.footer-note { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.8; }
/* Devi's tap-to-answer options */
.vv-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; white-space: normal; }
.vv-option { padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--sheet); color: var(--ink); font: 600 0.84rem var(--body); cursor: pointer; text-align: left; }
.vv-option:hover:not(:disabled) { border-color: var(--navy, var(--ink)); }
.vv-option.other { border-style: dashed; color: var(--ink-2); }
.vv-option:disabled { cursor: default; opacity: 0.55; }
.vv-option.on { opacity: 1; background: var(--navy, var(--ink)); border-color: var(--navy, var(--ink)); color: #D8BF8A; }
/* Actions under each of Devi's replies */
.vv-actions { display: flex; gap: 2px; margin: -2px 0 6px 2px; align-self: flex-start; }
.vv-act { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.vv-act:hover { background: var(--paper); color: var(--ink); }
.vv-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vv-act.done, .vv-act.on, .vv-act.rated { color: var(--navy, var(--ink)); background: color-mix(in srgb, #D8BF8A 30%, transparent); }
/* Full-screen Devi: the message box takes the full readable width, and a bit more height */
.vv-panel.full .vv-form.composer, .vv-results.full .vv-form.composer { width: calc(100% - 48px); max-width: 960px; box-sizing: border-box; align-self: center; margin: 12px auto 22px; }
.vv-panel.full .vv-form.composer textarea, .vv-results.full .vv-form.composer textarea { min-height: 96px; font-size: 1.05rem; }
.vv-panel.full .vv-log, .vv-results.full .vv-log, .vv-panel.full .vv-chips, .vv-results.full .vv-chips { max-width: 960px; }
.vv-panel.full .vv-disclaimer { align-self: center; }
.vv-chunk { display: block; }
.vv-chunk + .vv-chunk, .vv-options + .vv-chunk { margin-top: 12px; }
.vv-msg .vv-options { margin-top: 8px; }
/* A clear heading above the brief form, so the page doesn't run together */
.intake-title { margin: 34px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.intake-title .eyebrow { margin: 0; color: #6F6140; }
.intake-title h2 { margin: 0; font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--display); color: var(--ink); }
.intake-title h2 em { font-style: italic; color: var(--rose, #6F6140); }
.intake-title p { margin: 0; max-width: 70ch; }
.callout { margin-bottom: 8px; }

/* Dashboard: open layout like Quick search: a big title, the search box with its Quick/Deep switch, no boxed hero */
.dash-stage { margin: var(--s5) 0 var(--s6); display: flex; flex-direction: column; gap: 14px; }
.dash-stage > .eyebrow { margin: 0; color: var(--accent); }
.dash-stage h1.poster { margin: 0 0 10px; font-size: clamp(2.8rem, 7.4vw, 5.6rem); line-height: 0.92; color: var(--ink); }
.dash-stage h1.poster span { display: block; }
.dash-stage h1 .hl { color: var(--accent); }
.dash-qs { max-width: 1140px; }
.dash-stats-inline { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.95rem; color: var(--ink-2); }
.dash-stats-inline b { color: var(--ink); font-family: var(--poster); margin-right: 4px; }
.dash-stats-inline li.live b { color: #1f7a4d; }

/* Go button: solid, high-contrast so it never blends into the composer */
.qs-go { background: #0B0B0A; color: #D8BF8A; box-shadow: 0 2px 8px rgba(11, 11, 10,.25); }
.qs-go:hover { background: #4A0C19; color: #f7cd73; }
.qs-go:focus-visible { outline: 3px solid #D8BF8A; outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qs-go { background: #D8BF8A; color: #0B0B0A; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
  :root:not([data-theme="light"]) .qs-go:hover { background: #f7cd73; color: #0B0B0A; }
  :root:not([data-theme="light"]) .qs-go:focus-visible { outline-color: #fff; }
}
:root[data-theme="dark"] .qs-go { background: #D8BF8A; color: #0B0B0A; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
:root[data-theme="dark"] .qs-go:hover { background: #f7cd73; color: #0B0B0A; }
:root[data-theme="dark"] .qs-go:focus-visible { outline-color: #fff; }

/* "Notify me when it's finished" on a running search */
.notify-ask .notify-actions { align-items: center; gap: 6px 12px; }
.notify-promise { font-size: 0.82rem; color: var(--ink-2); }

/* tour: Quick vs Deep page */
.tour-modes { margin-top: 14px; }
.tour-modes .tour-mode-tag { font-size: 0.8rem; font-weight: 600; letter-spacing: .02em; color: #6F6140; }
.tour-modes .deep { background: #0B0B0A; }
.tour-modes .deep b, .tour-modes .deep span { color: #f6f3ed; }
.tour-modes .deep .tour-mode-tag { color: #D8BF8A; }
.tour-modes-foot { margin: 12px 0 0; font-size: 0.95rem; }

/* Hybrid brief: notes first, then only the questions Devi couldn't answer */
.intake.hy-notes .q-card, .intake.hy-notes .q-progress, .intake.hy-notes .q-submit, .intake.hy-notes .footnote { display: none !important; }
.hy-stage { margin-bottom: 8px; }
.hy-stage textarea { min-height: 170px; }
.hy-hint { white-space: normal; }
.hy-skip { margin: 10px 0 0; text-align: right; }
.hy-stage[hidden] { display: none; }

/* Document read by Devi: the file on top of the brief box, then Devi's summary as its own slide */
.doc-sum { display: grid; gap: 12px; margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; background: var(--sheet, #fff);
  border: 1px solid var(--rule, #e4ded2); box-shadow: 0 10px 30px -18px rgba(11, 11, 10,.35); outline: none; }
.doc-chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; padding: 8px 14px;
  border-radius: 999px; background: #0B0B0A; color: #f6f3ed; font-size: 0.92rem; }
.doc-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.doc-chip-ok { color: #D8BF8A; font-size: 0.82rem; white-space: nowrap; }
.doc-sum-head { display: flex; gap: 12px; align-items: flex-start; }
.doc-sum-head > div { display: grid; gap: 2px; }
.doc-sum-head span:not(.vv-avatar) { color: var(--ink-2); font-size: 0.92rem; }
.doc-sum-bar { height: 6px; border-radius: 99px; background: var(--rule, #e4ded2); overflow: hidden; }
.doc-sum-bar i { display: block; height: 100%; background: #D8BF8A; border-radius: inherit; transition: width .4s; }
.doc-sum-lists { display: grid; gap: 10px; }
@media (min-width: 640px) { .doc-sum-lists { grid-template-columns: 1fr 1fr; } }
.doc-sum-lists b { display: block; font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.doc-sum-lists ul { margin: 0; padding-left: 18px; font-size: 0.9rem; color: var(--ink-2); }
.doc-sum-lists .got b { color: #1d7a4f; }
.doc-sum-lists .open b { color: #6F6140; }
.doc-sum-go { justify-self: end; }
.doc-sum.done .doc-sum-go, .doc-sum.done .doc-sum-lists { display: none; }
.intake.doc-sum-on .q-card, .intake.doc-sum-on .q-progress, .intake.doc-sum-on .q-submit, .intake.doc-sum-on .footnote { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .doc-sum-lists .got b { color: #5fd49a; } :root:not([data-theme="light"]) .doc-sum-lists .open b { color: #D8BF8A; } }
:root[data-theme="dark"] .doc-sum-lists .got b { color: #5fd49a; }
:root[data-theme="dark"] .doc-sum-lists .open b { color: #D8BF8A; }
.qs-doc { margin: 0 0 10px; }
.tour .tm-title { color: #0B0B0A; }
.tour .tm-title em { display: block; margin-top: 4px; font-family: var(--display); font-style: italic; text-transform: none; color: #6F6140; }
.tour .tour-modes .deep { background: #0B0B0A; border-color: #0B0B0A; }
.tour .tour-modes .deep b, .tour .tour-modes .deep span { color: #f6f3ed; }
.tour .tour-modes .deep .tour-mode-tag { color: #D8BF8A; }
body .tour .tour-facts.tour-modes div.deep { background: #0B0B0A; box-shadow: inset 6px 0 0 #D8BF8A; }
body .tour .tour-facts.tour-modes div.deep b, body .tour .tour-facts.tour-modes div.deep span { color: #f6f3ed; }
body .tour .tour-facts.tour-modes div.deep .tour-mode-tag { color: #D8BF8A; }
.tour .tour-modes .deep b, .tour .tour-modes .deep span { color: #f6f3ed !important; }
.tour .tour-modes .deep .tour-mode-tag { color: #D8BF8A !important; }
body.theme-light .tour .tour-facts .deep b, body.theme-light .tour .tour-facts .deep span, body .tour .tour-facts .deep b, body .tour .tour-facts .deep span { color: #f6f3ed !important; }
body.theme-light .tour .tour-facts .deep .tour-mode-tag, body .tour .tour-facts .deep .tour-mode-tag { color: #D8BF8A !important; }

/* LinkedIn / profile button on each person: easy to spot, LinkedIn blue */
.li-row { margin: 6px 0 4px; }
.li-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #0a66c2;
  color: #fff !important; font-size: 0.85rem; font-weight: 600; text-decoration: none !important; line-height: 1; transition: background .15s; }
.li-btn:hover { background: #004182; }
.li-btn:focus-visible { outline: 3px solid #D8BF8A; outline-offset: 2px; }
.li-in { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; color: #0a66c2;
  font: 800 0.8rem/1 Arial, sans-serif; }
.li-btn.other { background: #0B0B0A; }
.li-btn.other .li-in { color: #0B0B0A; }
.li-btn.find { background: transparent; color: #0a66c2 !important; box-shadow: inset 0 0 0 1.5px #0a66c2; }
.li-btn.find .li-in { background: #0a66c2; color: #fff; }
.li-btn.compact { padding: 3px; }
.li-btn.compact .li-in { width: 20px; height: 20px; }
.pool-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .li-btn.find { color: #D8BF8A !important; box-shadow: inset 0 0 0 1.5px #D8BF8A; } }
:root[data-theme="dark"] .li-btn.find { color: #D8BF8A !important; box-shadow: inset 0 0 0 1.5px #D8BF8A; }

/* Score rows: room for the longest label plus its dot and ⓘ, so nothing runs into the bar */
.expert-body .dim, .dim { grid-template-columns: 11.5rem minmax(60px, 1fr) 34px; column-gap: 10px; }
.dim-l { white-space: nowrap; overflow: visible; }
.dim-l .dim-i { margin-left: 2px; }
@media (max-width: 420px) { .expert-body .dim, .dim { grid-template-columns: 10.5rem minmax(48px, 1fr) 30px; font-size: 0.8rem; } }

/* Role re-check: the source is a clear link, and the badge sits quietly on the dark #1 card */
.fresh a.fresh-src { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 999px;
  background: rgba(255,255,255,.75); color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fresh a.fresh-src:hover { background: #fff; }
.expert-card.first .fresh-current { background: rgba(159,221,181,.14); color: #9FDDB5; box-shadow: inset 0 0 0 1px rgba(159,221,181,.35); }
.expert-card.first .fresh-moved { background: rgba(240,199,102,.14); color: #F0C766; box-shadow: inset 0 0 0 1px rgba(240,199,102,.35); }
.expert-card.first .fresh-unclear { background: rgba(255,255,255,.06); color: #d9d5cc; border-color: rgba(255,255,255,.2); }
.expert-card.first .fresh a.fresh-src, body.theme-dark .fresh a.fresh-src { background: rgba(255,255,255,.12); }
.expert-card.first .fresh a.fresh-src:hover, body.theme-dark .fresh a.fresh-src:hover { background: rgba(255,255,255,.22); }

/* Motivation: same voice as Strengths / Concerns, no box of its own */
.motive { margin-top: 4px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none;
  display: grid; gap: 14px; }
@media (min-width: 760px) { .motive { grid-template-columns: 1fr 1fr; gap: 24px; } }
.motive .eyebrow { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.motive p { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.5; }
.motive .motive-style { color: var(--ink-2); font-size: 0.86rem; }
.motive-qs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.9rem; line-height: 1.45; }
.motive-qs li { position: relative; padding-left: 20px; }
.motive-qs li::before { content: "?"; position: absolute; left: 0; top: 1px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.66rem/1 var(--mono, monospace); color: #fff; background: #6F6140; }
.expert-card.first .motive { border-top-color: rgba(255,255,255,.14); }
.expert-card.first .motive .motive-style { color: #b9c0cd; }
.expert-card.first .motive-qs li::before { background: #D8BF8A; color: #0B0B0A; }
.fresh { display: inline-block; }
.fresh a.fresh-src { margin-left: 4px; white-space: nowrap; }
.fresh .nw { white-space: nowrap; }
/* No LinkedIn found: the same badge, greyed and crossed out, not a link */
.li-btn.none { position: relative; background: transparent; color: var(--ink-2) !important; box-shadow: inset 0 0 0 1.5px var(--rule); cursor: default; }
.li-btn.none:hover { background: transparent; }
.li-btn.none .li-in { background: var(--rule); color: var(--ink-2); position: relative; }
.li-btn.none .li-in::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #b3261e; transform: rotate(-35deg); }
.li-btn.none s { text-decoration-thickness: 2px; text-decoration-color: #b3261e; }
.li-btn.other + .li-btn.none { margin-left: 6px; }
.expert-card.first .li-btn.none { color: #b9c0cd !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.expert-card.first .li-btn.none .li-in { background: rgba(255,255,255,.18); color: #d9d5cc; }

/* "What level should they be at today?" before a search starts */
.level-fit { border: 0; padding: 0; margin: 14px 0; min-width: 0; }
.level-fit legend { padding: 0; margin-bottom: 8px; display: grid; gap: 2px; }
.level-fit legend .eyebrow { margin: 0; }
.level-opts { display: grid; gap: 8px; }
.level-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--rule); background: var(--sheet, #fff); transition: border-color .15s, background .15s; }
.level-opt:hover { border-color: var(--ink-2); }
.level-opt input { margin-top: 3px; accent-color: #0B0B0A; flex: none; }
.level-opt span { display: grid; gap: 2px; }
.level-opt b { font-size: 0.95rem; }
.level-opt small { color: var(--ink-2); font-size: 0.82rem; line-height: 1.4; }
.level-opt:has(input:checked) { border-color: #0B0B0A; background: color-mix(in srgb, #D8BF8A 14%, var(--sheet, #fff)); box-shadow: inset 0 0 0 1px #0B0B0A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .level-opt:has(input:checked) { border-color: #D8BF8A; box-shadow: inset 0 0 0 1px #D8BF8A; } :root:not([data-theme="light"]) .level-opt input { accent-color: #D8BF8A; } }
:root[data-theme="dark"] .level-opt:has(input:checked) { border-color: #D8BF8A; box-shadow: inset 0 0 0 1px #D8BF8A; }
:root[data-theme="dark"] .level-opt input { accent-color: #D8BF8A; }
.level-opt input[type="radio"] { width: 18px; height: 18px; min-width: 0; min-height: 0; padding: 0; margin: 2px 0 0; border-radius: 50%; box-shadow: none; appearance: auto; -webkit-appearance: radio; }
.level-opt span { flex: 1 1 auto; min-width: 0; }
@media (min-width: 760px) { .checklist-preview .level-opts { grid-template-columns: 1fr; } }
/* On the dark quick-search panel: dark option cards with light text, and a bright Start button */
.checklist-preview .level-opt { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.checklist-preview .level-opt b { color: #f6f3ed; }
.checklist-preview .level-opt small { color: #c9cfdb; }
.checklist-preview .level-opt:hover { border-color: rgba(255,255,255,.5); }
.checklist-preview .level-opt:has(input:checked) { background: rgba(216, 191, 138,.14); border-color: #D8BF8A; box-shadow: inset 0 0 0 1px #D8BF8A; }
.checklist-preview .level-opt input { accent-color: #D8BF8A; }
.checklist-preview button.primary { background: #D8BF8A; color: #0B0B0A; border: 0; width: 100%; }
.checklist-preview button.primary:hover { background: #f7cd73; }
body .checklist-preview button.primary, body.theme-light .checklist-preview button.primary, body.theme-dark .checklist-preview button.primary { background: #D8BF8A; color: #0B0B0A; border: 0; min-height: 50px; border-radius: 999px; font-weight: 700; }
body .checklist-preview button.primary:hover, body.theme-light .checklist-preview button.primary:hover, body.theme-dark .checklist-preview button.primary:hover { background: #f7cd73; }

/* Brief-format pop-up, v2: an upload drop zone, then three light cards. No icon tiles. */
#format-chooser .vv-modal-card { width: min(720px, 100%); }
#format-chooser .fc-body { padding: 26px 28px 20px; gap: 14px; }
#format-chooser .fc-q { font-size: 1.6rem; letter-spacing: -0.01em; }
.fc-drop { display: grid; gap: 4px; width: 100%; padding: 18px 20px; border-radius: 18px; text-align: left; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, #D8BF8A 70%, var(--rule)); background: color-mix(in srgb, #D8BF8A 9%, var(--sheet, #fff));
  color: var(--ink); font: inherit; transition: background .15s, border-color .15s, transform .15s; }
.fc-drop:hover, .fc-drop:focus-visible { border-style: solid; border-color: #D8BF8A; background: color-mix(in srgb, #D8BF8A 16%, var(--sheet, #fff)); transform: translateY(-1px); outline: none; }
.fc-drop-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fc-drop-main strong { font-size: 1.05rem; }
.fc-drop-sub { font-size: 0.88rem; color: var(--ink-2); }
.fc-or { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; color: var(--ink-2); font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; }
.fc-or::before, .fc-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.fc-grid { display: grid; gap: 10px; }
@media (min-width: 620px) { .fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fc-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; border: 1px solid var(--rule);
  background: var(--sheet, #fff); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.fc-card:hover, .fc-card:focus-visible { border-color: var(--ink-2); box-shadow: 0 16px 32px -24px rgba(11, 11, 10, 0.6); transform: translateY(-2px); outline: none; }
.fc-card.on { border-color: #0B0B0A; box-shadow: inset 0 3px 0 #D8BF8A, 0 0 0 1px #0B0B0A; }
.fc-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.fc-card-top strong { font-size: 1.02rem; }
.fc-tag { font-size: 0.72rem; color: var(--ink-2); letter-spacing: .02em; }
.fc-card-txt { font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); flex: 1; }
.fc-card-go { font-size: 0.85rem; font-weight: 700; color: var(--navy, var(--ink)); transition: transform .15s; }
.fc-card:hover .fc-card-go { transform: translateX(3px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc-card.on { border-color: #D8BF8A; box-shadow: inset 0 3px 0 #D8BF8A, 0 0 0 1px #D8BF8A; } :root:not([data-theme="light"]) .fc-card-go { color: #D8BF8A; } }
:root[data-theme="dark"] .fc-card.on { border-color: #D8BF8A; box-shadow: inset 0 3px 0 #D8BF8A, 0 0 0 1px #D8BF8A; }
:root[data-theme="dark"] .fc-card-go { color: #D8BF8A; }

/* "Devi is working" panel over the page while something slow runs */
.dw { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px;
  background: rgba(11, 11, 10, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: dw-in .2s ease-out; }
body.dw-on { overflow: hidden; }
.dw-card { width: min(420px, 100%); padding: 28px 26px 22px; border-radius: 26px; background: #0B0B0A; color: #f6f3ed; text-align: center;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.dw-orb { position: relative; width: 76px; height: 76px; margin: 0 auto 14px; display: grid; place-items: center; }
.dw-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(216, 191, 138,.2); border-top-color: #D8BF8A; animation: dw-spin 1s linear infinite; }
.dw-star { font-size: 1.9rem; color: #D8BF8A; animation: dw-pulse 1.6s ease-in-out infinite; }
.dw-title { margin: 0 0 14px; font: 600 1.25rem/1.3 var(--display, inherit); overflow-wrap: anywhere; }
.dw-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px; text-align: left; max-width: 320px; }
.dw-steps li { position: relative; padding-left: 28px; font-size: 0.93rem; color: rgba(246,243,237,.45); transition: color .3s; }
.dw-steps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(246,243,237,.25); }
.dw-steps li.now { color: #f6f3ed; font-weight: 600; }
.dw-steps li.now::before { border-color: rgba(216, 191, 138,.3); border-top-color: #D8BF8A; animation: dw-spin .8s linear infinite; }
.dw-steps li.done { color: rgba(246,243,237,.8); }
.dw-steps li.done::before { content: "✓"; display: grid; place-items: center; border: 0; background: #2fae73; color: #fff; font-size: 0.65rem; font-weight: 800; }
.dw-time { margin: 16px 0 2px; font: 600 0.95rem var(--mono, monospace); color: #D8BF8A; }
.dw-note { margin: 0; font-size: 0.8rem; color: rgba(246,243,237,.6); }
@keyframes dw-spin { to { transform: rotate(360deg); } }
@keyframes dw-pulse { 50% { transform: scale(1.15); opacity: .75; } }
@keyframes dw-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dw-ring, .dw-steps li.now::before { animation-duration: 3s; } .dw-star { animation: none; } }

/* Brief-format pop-up fixes: upload box text starts at the left; tags sit under each title */
.fc-drop { justify-content: stretch; justify-items: start; align-content: start; }
.fc-card-top { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.fc-tag { padding: 2px 8px; border-radius: 999px; background: var(--paper, #efeae0); font-weight: 600; }
.level-hint { font-size: 0.82rem; color: var(--ink-2); font-weight: 400; }
.checklist-preview .level-hint { color: #c9cfdb; }
.level-opt input[type="checkbox"] { width: 18px; height: 18px; min-width: 0; min-height: 0; padding: 0; margin: 2px 0 0; box-shadow: none; appearance: auto; -webkit-appearance: checkbox; flex: none; }
@media (min-width: 620px) { .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Results: act on several people at once */
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet, #fff); position: sticky; top: 8px; z-index: 5; }
.pick-count { font-weight: 600; margin-right: 6px; }
.pick-spacer { flex: 1 1 auto; }
.pick-box { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #0B0B0A; cursor: pointer; align-self: center; }
.expert-card.picked { box-shadow: 0 0 0 2px #D8BF8A; }
.expert-card.first .pick-box { accent-color: #D8BF8A; }
/* Details on demand */
.ec-why { margin: 10px 0 6px; }
.ec-more { margin-top: 8px; }
.ec-more > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 8px 0; color: var(--ink-2); list-style-position: inside; }
.ec-more > summary:hover { color: var(--ink); }
.expert-card.first .ec-more > summary { color: #c9cfdb; }
.ec-more[open] > summary { margin-bottom: 8px; }
/* Keyboard */
.kb-on { outline: 3px solid #D8BF8A; outline-offset: 3px; }
.kb-help { position: fixed; right: 20px; bottom: 90px; z-index: 300; display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: #0B0B0A; color: #f6f3ed; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); font-size: 0.9rem; }
.kb-help p { margin: 0; }
.kb-help kbd { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.12); font-family: var(--mono, monospace); text-align: center; }
.medal-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---------- Calmer summary blocks (Oct 2026): verdict, all-things-considered, coverage, dashboard board ---------- */
/* Verdict: the numbers first, one primary action, matching secondary buttons, a plain-type status pill. */
.verdict { display: flex; flex-direction: column; gap: 18px; }
.verdict .tally { order: -1; align-self: stretch; gap: 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.verdict .tally div { padding: 0 28px; border-left: 1px solid var(--rule); }
.verdict .tally div:first-child { padding-left: 0; border-left: 0; }
.verdict .tally .n { font: 600 2rem/1 var(--display); color: var(--ink); }
.verdict .tally .l { margin-top: 4px; }
.verdict .headline { max-width: 46ch; }
.verdict-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 0.82rem/1.3 var(--body); padding: 5px 12px; border-radius: 999px; }
.verdict-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.verdict .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verdict .actions .button { border-radius: 999px; padding: 10px 18px; }
body.theme-light .verdict .actions .button:not(.primary):not(.liked-outreach) { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); }
body.theme-light .verdict .actions .button:not(.primary):not(.liked-outreach):hover { background: var(--navy); color: var(--cream); }
.go-deeper { border-radius: 16px; }
@media (max-width: 560px) { .verdict .tally div { padding: 0 16px; } }

/* All things considered: the first sentence leads, the rest reads as body text. */
.atc-text { font: 400 1rem/1.65 var(--body); max-width: 62ch; }
.atc-lead { display: block; margin-bottom: 8px; font: 500 clamp(1.15rem, 2vw, 1.4rem)/1.4 var(--display); }

/* Coverage: a readable list instead of a grid of truncated, red-dashed squares. */
.cov-card { width: 100%; padding: 18px 20px; border-radius: 16px; background: var(--cream, #f3efe6); color: var(--navy, #0B0B0A); }
.cov-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cov-head strong { font: 600 1.15rem/1.2 var(--display); }
.cov-head span { font-size: 0.8rem; color: #4A473F; }
.cov-list { list-style: none; margin: 0; padding: 0; }
.cov-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #dcd5c5; }
.cov-label { font-size: 0.86rem; line-height: 1.35; }
.cov-dots { display: flex; gap: 4px; }
.cov-dots i { width: 9px; height: 9px; border-radius: 50%; background: #dcd5c5; }
.cov-dots i.on { background: #0B0B0A; }
.cov-n { font: 600 0.8rem var(--body); text-align: right; font-variant-numeric: tabular-nums; }
.cov-list li.none .cov-label, .cov-list li.none .cov-n { color: #6a6f86; }
.cov-list li.hit .cov-dots i.on { background: #037a53; }
.cov-key { margin: 10px 0 0; font-size: 0.76rem; color: #4A473F; }

/* Dashboard board: columns sit at their own height, empty ones shrink, "Needs you" is an accent, not an alarm. */
.board { align-items: start; }
.bcol.is-empty { background: transparent; border-style: dashed; }
.bcol.is-empty .bcol-head b { color: var(--ink-2); }
.bcol[data-group="attention"]:has(.btile) { border-color: var(--rule); }
.bcol[data-group="attention"] .btile { box-shadow: inset 4px 0 0 var(--unknown); }
.bcol[data-group="attention"] .bcol-head b { color: var(--unknown); }
.bcol[data-group="done"] .btile { box-shadow: inset 4px 0 0 var(--met); }
.btile { padding: 11px 14px; }
.btile strong { -webkit-line-clamp: 3; }
body.theme-light .dash-list-head h2 { font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--display); text-transform: none; letter-spacing: 0; }
body.theme-light .dash-list-head h2::after { content: none; }

/* ---------- Results page, in the quick-search language (Oct 2026): cream page, soft rounded sheets,
   one navy action per block, pale chips. No full navy panels. Scoped to .res-page. ---------- */
.res-page { --res-tray: color-mix(in srgb, var(--rule) 55%, var(--paper, #f3efe6)); --res-shadow: 0 18px 40px -28px rgba(11, 11, 10, 0.45);
  display: flex; flex-direction: column; gap: 22px; }
.res-page > * { margin-top: 0; margin-bottom: 0; }

/* Hero: text on the page itself, like "Who are you looking for?" */
.res-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; padding: 8px 0 4px; background: none; box-shadow: none; color: var(--ink); }
.res-hero > div:first-child { min-width: 0; flex: 1 1 520px; }
.res-hero .eyebrow { color: var(--accent); }
.res-hero h1.poster { color: var(--ink); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 0.95; max-width: 20ch; margin: 6px 0 10px; }
.res-hero .muted { color: var(--ink-2); }
.res-hero .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.res-hero .actions .button { border-radius: 999px; }
.res-hero .actions .button.cta { background: var(--navy, var(--ink)); border-color: var(--navy, var(--ink)); color: var(--cream, var(--paper)); }
.res-hero .actions .button:not(.cta) { background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); }
body.theme-light .app .res-page .page-head { background: none; box-shadow: none; color: var(--ink); }

/* Every block is a sheet, the same as the quick-search box. */
.res-page .panel, .res-page .res-atc, .res-page .expert-card, .res-page .compact-card, .res-page .pick-bar {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 26px; box-shadow: var(--res-shadow); }
.res-page .panel { padding: 22px 24px; }

/* Ask Devi: a light header instead of a navy bar. */
.res-page .vv-results { overflow: hidden; padding: 0; }
.res-page .vv-head { background: transparent; color: var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 22px; }
.res-page .vv-head h2.poster { font: 600 1.3rem/1.2 var(--display); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.res-page .vv-head .muted, .res-page .vv-head span:not(.vv-avatar) { color: var(--ink-2); }
.res-page .vv-head .vv-icon { color: var(--ink); background: var(--res-tray); border: 0; }

/* All things considered: a sheet with the coverage list sitting in the beige tray colour. */
.res-atc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 28px; color: var(--ink); }
@media (max-width: 880px) { .res-atc { grid-template-columns: 1fr; padding: 20px; } }
.res-atc .eyebrow { color: var(--accent); }
.res-atc .muted { color: var(--ink-2); }
.res-atc .cov-card { background: var(--res-tray); color: var(--ink); }
.res-atc .cov-card .cov-head span, .res-atc .cov-key { color: var(--ink-2); }
.res-atc .cov-list li { border-top-color: color-mix(in srgb, var(--ink) 12%, transparent); }
.res-atc .cov-dots i { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.res-atc .cov-dots i.on { background: var(--ink); }
.res-atc .cov-list li.hit .cov-dots i.on { background: var(--met); }
.res-atc .cov-list li.none .cov-label, .res-atc .cov-list li.none .cov-n { color: var(--ink-2); }
.res-atc .src-chip { background: var(--accent-soft); color: var(--ink); }

/* Section titles: the poster face, but at a calmer size. */
.res-page .section-head { border-bottom: 0; padding-bottom: 0; }
.res-page .section-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--ink); }
.res-page .section-head .count { font-size: 0.85rem; color: var(--ink-2); }

/* Tick-and-act bar: a floating pill like the quick-search box. */
.res-page .pick-bar { border-radius: 22px; padding: 10px 12px 10px 18px; background: color-mix(in srgb, var(--sheet) 92%, transparent); backdrop-filter: blur(8px); }
.res-page .pick-bar .button { border-radius: 999px; }

/* Candidate cards: all light; #1 gets a navy ring, a navy rank badge and a pale chip ribbon. */
.res-page .expert-card { padding: 26px 28px; gap: 18px; }
.res-page .expert-card.top { border: 1.5px solid var(--ink); box-shadow: 0 26px 56px -30px rgba(11, 11, 10, 0.55); }
.res-page .expert-card.top .medal { background: var(--navy, var(--ink)); border-color: var(--navy, var(--ink)); color: var(--cream, var(--paper)); width: 52px; height: 52px; }
.res-page .expert-card .ribbon { background: var(--accent-soft); color: var(--accent); top: -12px; font-weight: 600; letter-spacing: 0.08em; }
.res-page .expert-card.top .ribbon { background: var(--navy, var(--ink)); color: var(--cream, var(--paper)); }
.res-page .expert-card .expert-summary { border-left: 3px solid var(--accent-soft); padding-left: 16px; }
.res-page .expert-card .review, .res-page .expert-card .ec-more { border-top: 1px solid var(--rule); }
.res-page .expert-card.picked { box-shadow: 0 0 0 2px var(--accent), var(--res-shadow); }
/* (the general .app .page-head rules paint every page head navy; undo that here) */
.app .res-page .res-hero { padding: 8px 0 4px; border-radius: 0; background: none; box-shadow: none; color: var(--ink); overflow: visible; }
.app .res-page .res-hero::before, .app .res-page .res-hero::after { content: none; }
.app .res-page .res-hero .eyebrow { color: var(--accent); }
.app .res-page .res-hero h1 { color: var(--ink); font-size: clamp(2rem, 4.6vw, 3.4rem); }
.app .res-page .res-hero .muted { color: var(--ink-2); }
.app .res-page .res-hero .button:not(.cta):not(.primary) { background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); }
.app .res-page .res-hero .button:not(.cta):not(.primary):hover { border-color: var(--ink); color: var(--ink); }
.res-page .vv-results-head { background: transparent; color: var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 22px; }
.res-page .vv-results-head h2, .res-page .vv-results-head h2.poster { font: 600 1.35rem/1.2 var(--display); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.res-page .vv-results-head .muted { color: var(--ink-2); }
.res-page .vv-results-head .vv-icon { color: var(--ink); background: var(--res-tray); border: 0; }
.res-page .vv-results { margin-top: 0; }

/* ---------- Hiring gap analysis (beta), in the quick-search language ---------- */
.beta-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font: 600 0.62rem/1.5 var(--body); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
nav .beta-tag { margin-left: 2px; font-size: 0.56rem; }
.gap-stage.wide { max-width: 980px; }
.gap-lede { margin: 0 0 6px; font-size: 1.05rem; color: var(--ink-2); max-width: 60ch; }
.gap-sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 26px; padding: 22px 24px;
  box-shadow: 0 18px 40px -28px rgba(11, 11, 10, 0.45); display: flex; flex-direction: column; gap: 14px; }
.gap-go { align-self: flex-start; border-radius: 999px; padding: 12px 22px; }
.gap-h2 { margin: 0; font: 600 1.25rem/1.25 var(--display); color: var(--ink); }
.gap-list { max-width: 760px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 10px; }
.gap-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gap-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 18px; border-radius: 18px;
  background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.gap-rows a:hover { border-color: var(--ink); }
.gap-rows strong { font: 600 1.05rem var(--display); }
.gap-rows span:not(.go) { grid-column: 1; font-size: 0.86rem; color: var(--ink-2); }
.gap-rows .go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.gap-company .gap-co-head { display: flex; gap: 14px; align-items: center; }
.gap-co-head strong { display: block; font: 600 1.4rem/1.2 var(--display); }
.gap-co-head span { font-size: 0.9rem; color: var(--ink-2); }
.gap-company p { margin: 0; }
.gap-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--rule); flex: none; }
.gap-logo.empty { display: grid; place-items: center; font: 600 1.4rem var(--display); color: var(--ink); background: var(--accent-soft); }
.gap-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gap-actions .button, .gap-actions button { border-radius: 999px; }
.gap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; }
.gap-steps .q-card { border-radius: 26px; }
.gap-tasks { display: flex; flex-direction: column; gap: 8px; }
.gap-task { display: grid; grid-template-columns: minmax(0, 2fr) 80px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.gap-task[hidden] { display: none; }
@media (max-width: 640px) { .gap-task { grid-template-columns: minmax(0, 1fr) 80px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
  .gap-task > :first-child { grid-column: 1 / -1; } }
.gap-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gap-compare p { margin: 0; }
.gap-quote { margin: 0; font: 500 1.15rem/1.45 var(--display); color: var(--ink); border-left: 3px solid var(--accent-soft); padding-left: 14px; }
.gap-stage-pill { align-self: flex-start; margin: 0; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--rule) 55%, var(--paper)); font-weight: 600; }
.gap-stage-pill.strong { background: var(--navy, var(--ink)); color: var(--cream, var(--paper)); font: 600 1.15rem var(--display); }
.gap-evidence { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.gap-evidence.tagged { list-style: none; padding: 0; }
.gap-verdict { margin: 16px 0; padding: 14px 18px; border-radius: 18px; font-weight: 500; }
.gap-verdict.agree { background: var(--met-bg); color: var(--met); }
.gap-verdict.differ { background: var(--unknown-bg); color: var(--unknown); }
.gap-stages { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gap-stages legend { padding: 0; margin-bottom: 8px; }
.gap-stage-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) 120px 22px; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1.5px solid var(--rule); border-radius: 16px; cursor: pointer; }
.gap-stage-opt:has(input:checked) { border-color: var(--ink); background: var(--accent-soft); }
.gap-stage-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.gap-stage-name small { display: block; color: var(--ink-2); font-size: 0.8rem; }
.gap-stage-name em { font-style: normal; font-size: 0.72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--rule) 55%, var(--paper)); margin-left: 4px; }
.gap-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.gap-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); }
.gap-bar i.w1 { width: 10%; } .gap-bar i.w2 { width: 20%; } .gap-bar i.w3 { width: 30%; } .gap-bar i.w4 { width: 40%; } .gap-bar i.w5 { width: 50%; }
.gap-bar i.w6 { width: 60%; } .gap-bar i.w7 { width: 70%; } .gap-bar i.w8 { width: 80%; } .gap-bar i.w9 { width: 90%; } .gap-bar i.w10 { width: 100%; }
@media (max-width: 560px) { .gap-stage-opt { grid-template-columns: auto minmax(0, 1fr) 22px; } .gap-stage-opt .gap-bar { display: none; } }

.gap-report { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.gap-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.gap-head h1.poster { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 0.95; margin: 6px 0 8px; color: var(--ink); }
.gap-head .eyebrow { color: var(--accent); }
.gap-head p { margin: 0; }
.gap-big { margin: 0; font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--display); }
.gap-sheet > p { margin: 0; }
.gap-summary { font-size: 1.02rem; line-height: 1.6; max-width: 70ch; }
.gap-costs ul, .gap-fixes ol, .gap-later ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.gap-costs { border-color: color-mix(in srgb, var(--fail) 35%, var(--rule)); }
.gap-plan { display: flex; flex-direction: column; gap: 14px; }
.gap-role { background: var(--sheet); border: 1px solid var(--rule); border-radius: 26px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 40px -28px rgba(11, 11, 10, 0.45); }
.gap-role.first { border: 1.5px solid var(--ink); box-shadow: 0 26px 56px -30px rgba(11, 11, 10, 0.55); }
.gap-role.approved { border-left: 5px solid var(--met); }
.gap-role p { margin: 0; }
.gap-role-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.gap-pos { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--rule) 55%, var(--paper)); font: 600 1.1rem var(--display); }
.gap-role.first .gap-pos { background: var(--navy, var(--ink)); color: var(--cream, var(--paper)); }
.gap-role-title h3 { margin: 2px 0; font: 600 1.4rem/1.2 var(--display); }
.gap-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--navy, var(--ink)); color: var(--cream, var(--paper)); font-size: 0.74rem; font-weight: 600; }
.gap-badge.buyback { background: var(--met-bg); color: var(--met); }
.gap-score { text-align: right; } .gap-score b { font: 600 2.2rem/1 var(--display); } .gap-score small { color: var(--ink-2); }
.src-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.src-tag.estimate { background: var(--unknown-bg); color: var(--unknown); }
.gap-money { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; }
.gap-money em { font-style: normal; color: var(--ink-2); font-size: 0.8rem; }
.gap-warn { color: var(--unknown); } .gap-note { color: var(--ink-2); }
.gap-factors summary, .gap-add summary, .gap-outcomes summary { cursor: pointer; font-weight: 600; }
.gap-factors dl { display: grid; gap: 8px; margin: 10px 0; }
.gap-factors dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; }
.gap-factors dt { font-weight: 600; font-size: 0.88rem; } .gap-factors dd { margin: 0; font-size: 0.9rem; }
@media (max-width: 560px) { .gap-factors dl div { grid-template-columns: 1fr; gap: 2px; } .gap-role-head { grid-template-columns: auto minmax(0, 1fr); } .gap-score { grid-column: 2; text-align: left; } }
.gap-outcomes { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--rule) 55%, var(--paper)); display: flex; flex-direction: column; gap: 8px; }
.gap-outcomes .eyebrow { margin: 0; }
.gap-outcomes ul { margin: 0; padding-left: 18px; }
.gap-outcomes form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; align-items: flex-start; }
.gap-outcomes textarea { width: 100%; }
.gap-role-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--rule); }
.gap-role-actions form { display: inline-flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.gap-role-actions .button, .gap-role-actions .primary { border-radius: 999px; }
.gap-approved { font-weight: 600; color: var(--met); }
.gap-hired { font-size: 0.86rem; color: var(--ink-2); }
.gap-edit > summary { list-style: none; border-radius: 999px; }
.gap-edit > summary::-webkit-details-marker { display: none; }
.gap-edit[open] { flex-basis: 100%; }
.gap-edit[open] form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); align-items: stretch; }
.gap-add form { margin-top: 12px; }
.gap-later li span { color: var(--ink-2); }
.gap-later form.inline { display: inline; }
.gap-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.gap-extras > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gap-extras p { margin: 0; }
.gap-foot form.inline { display: inline; }
.gap-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.gap-table th, .gap-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rule); }
.table-scroll { overflow-x: auto; }
.gap-method .gap-sheet p { margin: 0 0 6px; line-height: 1.6; }

/* Hire Finder: lettered multiple choice (A, B, C...), one tap per answer */
.mc { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-q { padding: 0; font: 600 1.15rem/1.35 var(--display); color: var(--ink); margin-bottom: 4px; }
.gap-steps .q-card .mc-q { font-size: clamp(1.1rem, 2.6vw, 1.35rem); }
.mc-list { display: flex; flex-direction: column; gap: 6px; }
.mc-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: background .15s, border-color .15s; }
.mc-opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mc-key { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--rule);
  font: 600 0.9rem var(--body); color: var(--ink); background: var(--sheet); }
.mc-opt:has(input:checked) { background: var(--navy, var(--ink)); color: var(--cream, var(--paper)); }
.mc-opt:has(input:checked) .mc-key { background: var(--navy, var(--ink)); color: var(--cream, var(--paper)); border-color: rgba(243, 239, 230, 0.5); }
.mc-opt:has(input:focus-visible) { border-color: var(--accent); }
.gap-steps .q-card .mc + .mc, .gap-steps .q-card .mc + .field, .gap-steps .q-card .field + .mc, .gap-steps .q-card .gap-grid + .mc,
.gap-steps .q-card .gap-churn + .mc { margin-top: 14px; }
.gap-churn { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.gap-churn[hidden] { display: none; }
.gap-task .field-error { grid-column: 1 / -1; }
.gap-big small { font: 500 1rem var(--body); color: var(--ink-2); }
.gap-known { margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--unknown-bg); color: var(--ink); }


/* fair scoring: the score by requirement, and what an interview must confirm */
.fair { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.fair-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.fair-link { font-size: 0.82rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.section-head .fair-link { margin-left: auto; }
.fair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fair-list li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
.fair-list li:first-child { border-top: 0; }
.fair-list p { margin: 4px 0 0; }
.fair-list .must { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.fair-rating { align-self: start; justify-self: start; padding: 3px 10px; border-radius: 2px; font-size: 0.78rem; font-weight: 600; }
.fair-rating.met { background: var(--met-bg); color: var(--met); }
.fair-rating.likely { background: var(--likely-bg); color: var(--likely); }
.fair-rating.unknown { background: var(--unknown-bg); color: var(--unknown); }
.fair-rating.fail { background: var(--fail-bg); color: var(--fail); }
.fair-confirm { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-card, 8px); background: var(--sheet); }
.fair-confirm ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 560px) { .fair-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.gap-working { border-color: color-mix(in srgb, var(--met) 30%, var(--rule)); }
.gap-working-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gap-working-list li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--rule); }
.gap-working-list li:first-child { border-top: 0; padding-top: 0; }
.gap-working-list b { font-weight: 600; }
.gap-working-list span { color: var(--ink-2); }


/* =====================================================================================================================
   SIMPLENOVA (Nov 2026). The original app design and its big lettering, kept; only the colours change.
   Mostly white, creams and beiges, and near-black through charcoal to silver. Khaki only now and then, in the script
   accent words. Contrast: ink #111 on cream 18:1; #555 on cream 7:1; khaki text #6F6140 on cream 5.6:1.
   ===================================================================================================================== */
body.theme-light {
  --navy: #111111; --navy-deep: #000000; --cream: #FAF7F0; --feather: #FAF7F0;
  --script-on-navy: #CDBE96; --script-on-cream: #6F6140; --script-ink: #6F6140; --rose: #6F6140; --rose-soft: #CDBE96;
  --stone: #E6DCC8; --twilight: #555555; --dusk: #A9A9A9;
  --midnight: #111111; --maroon: #111111; --lime: #EFE8DA; --lime-deep: #E6DCC8; --sky: #F1EBDD;
  --paper: #FAF7F0; --sheet: #FFFFFF; --ink: #111111; --ink-2: #555555; --rule: #E6DCC8;
  --accent: #111111; --accent-soft: #F1EBDD; --cta: #111111; --cta-ink: #FFFFFF;
  --night: #151515; --night-2: #222222; --night-ink: #FAF7F0; --night-ink-2: #C9C9C9; --night-rule: #333333;
  --met: #2F5D3A; --met-bg: #E7EFE5; --likely: #333333; --likely-bg: #EEEEEE;
  --unknown: #6F6140; --unknown-bg: #F3EDDD; --fail: #8E2F2F; --fail-bg: #F5E3E0; --forrest: #3A3A3A;
  --ocean: #111111; --cherry: #8E2F2F; --cherry-rich: #8E2F2F;
  --op-hi: #EFE8DA; --op-sky: #F1EBDD; --op-berry: #CDBE96; --op-wine: #111111; --op-green: #3A3A3A;
  --op-ocean: #111111; --op-olive: #A3906A; --op-ink: #111111;
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3 3 6.6-7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background: var(--paper); color: var(--ink);
}
body.theme-light :focus-visible { outline-color: #111111; }
body.theme-light .ico-check { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; }
body.theme-light.theme-dark {
  --paper: #0E0E0E; --sheet: #171717; --ink: #F3F0EA; --ink-2: #B5B5B5; --rule: #2E2E2E; --accent: #E6DCC8; --accent-soft: #262420;
  --cta: #F3F0EA; --cta-ink: #0E0E0E; --script-on-cream: #CDBE96; --script-ink: #CDBE96;
}

/* Simplenova: logo, banner and start button in the plain palette */
body.theme-light .brand-mark .tile, body.theme-light .stamp .tile { fill: #111111; }
body.theme-light .brand-mark .d, body.theme-light .stamp .d { fill: #FAF7F0; }
body.theme-light .brand-mark .spark, body.theme-light .stamp .spark { fill: #CDBE96; }
body.theme-light .brand-mark .rim { stroke: transparent; }
body.theme-light .dash-outreach { background: #F1EBDD; color: #111111; border: 1px solid #E6DCC8; box-shadow: none; }
body.theme-light .dash-outreach::after { opacity: 0; }
body.theme-light .dash-outreach:hover { box-shadow: none; border-color: #111111; transform: none; }
body.theme-light .dash-outreach-copy .eyebrow { color: #555555; }
body.theme-light .dash-outreach-copy span:last-child { color: #111111; }
body.theme-light .dash-outreach .or-icon { background: #111111; color: #CDBE96; }
body.theme-light .qs-go, body.theme-light .dash-qs .qs-go { background: #111111; color: #FAF7F0; }
body.theme-light .qs-go:hover { background: #333333; }
body.theme-light .dash-outreach strong, body.theme-light .dash-outreach-copy strong, body.theme-light .dash-outreach h2 { color: #111111; }
body.theme-light .dash-outreach .go { background: #111111; color: #FAF7F0; }

/* ---------- Simplenova loading screen: once per sign-in. Visible without JavaScript only until the CSS timer hides it. ---------- */
.sn-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #0E0E0E; color: #FAF7F0;
  padding: 24px max(20px, env(safe-area-inset-left, 0px)); animation: sn-failsafe .5s ease 8.5s forwards; transition: opacity .6s ease, visibility .6s; }
.sn-loader.sn-out { opacity: 0; visibility: hidden; }
@keyframes sn-failsafe { to { opacity: 0; visibility: hidden; } }
.sn-loader-inner { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
/* Classic look, like the homepage hero: ink, a soft gold glow, tall glowing serif capitals, gold italic */
.sn-loader { background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(216,191,138,.10), transparent 70%), #0B0B0A; }
.sn-loader-tag { margin: 0; font: 600 .74rem/1.4 "Inter Tight", system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #BDB6A6; }
.sn-loader-tag span { color: #D8BF8A; }
.sn-loader-name { margin: 0; font: 400 clamp(3.4rem, 13vw, 8rem)/.9 "Instrument Serif", Georgia, serif; text-transform: uppercase;
  letter-spacing: -.01em; color: #FFFDF6; text-shadow: 0 0 18px rgba(255,253,246,.35), 0 0 60px rgba(216,191,138,.22); }
.sn-loader-slogan { margin: 0; font: italic 400 clamp(1.4rem, 3.4vw, 2.1rem)/1.2 "Instrument Serif", Georgia, serif; color: #D8BF8A; }
.sn-bar-row { width: min(520px, 100%); display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.sn-bar { flex: 1; min-width: 0; height: 4px; }
.sn-bar svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sn-bar path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sn-wave-bg { stroke: rgba(251,248,240,.14); } .sn-wave { stroke: #D8BF8A; }
.sn-pct { flex: none; min-width: 4ch; text-align: right; font: 600 .8rem/1 "Inter Tight", system-ui, sans-serif; letter-spacing: .14em; color: #D8BF8A; font-variant-numeric: tabular-nums; }
.sn-loader-by { margin: 6px 0 0; font: 600 .64rem/1.4 "Inter Tight", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #8E897D; }
@media (max-width: 440px) { .sn-loader-tag { font-size: .62rem; letter-spacing: .14em; } .sn-loader-by { font-size: .56rem; letter-spacing: .12em; } }
@media (prefers-reduced-motion: reduce) { .sn-loader { animation-delay: .4s; } }

/* ---------- your company (company.html): required once; Devi's research on the business ---------- */
.co-reading{display:grid;gap:8px}
.co-profile{display:grid;gap:12px}
.co-name{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.co-facts{display:grid;gap:6px;margin:4px 0 0}
.co-facts div{display:grid;grid-template-columns:minmax(90px,130px) 1fr;gap:10px}
.co-facts dt{font-weight:600;opacity:.75}
.co-facts dd{margin:0}
.co-level fieldset{border:0;padding:0;margin:8px 0 0;display:grid;gap:8px}
.co-level legend{display:grid;gap:4px;margin-bottom:6px}
.level-devi{display:block;margin:6px 0 10px;padding:8px 12px;border-radius:10px;background:rgba(127,127,127,.1)}
@media(max-width:520px){.co-facts div{grid-template-columns:1fr;gap:2px}}

/* ---------- explore in detail (explore.html) and test accounts ---------- */
.explore-form{display:inline}
.explore-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:.85rem;cursor:pointer}
.explore-btn:hover{opacity:.8}
.ex-sheet{display:grid;gap:12px}
.ex-sheet .gap-h2{margin-top:14px}
.ex-identity{padding:8px 12px;border-radius:10px;background:rgba(127,127,127,.1)}
.ex-fit,.ex-career{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ex-fit li,.ex-career li{display:grid;grid-template-columns:minmax(96px,130px) 1fr;gap:12px;align-items:start}
.ex-fit li div,.ex-career li div{display:grid;gap:2px}
.ex-verdict{justify-self:start;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600;border:1px solid currentColor}
.ex-verdict.v-met{background:#1f5e3f;color:#fff;border-color:#1f5e3f}
.ex-verdict.v-fails{background:#7d1631;color:#fff;border-color:#7d1631}
.ex-list{margin:0;padding-left:20px;display:grid;gap:6px}
.src-link{margin-left:4px;white-space:nowrap}
.ex-sources ul{padding-left:18px;overflow-wrap:anywhere}
.trial-banner{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:rgba(127,127,127,.12);font-size:.9rem}
.admin-trials{display:grid;gap:16px;max-width:980px}
@media(max-width:560px){.ex-fit li,.ex-career li{grid-template-columns:1fr;gap:4px}}
.explore .eyebrow{line-height:1.7}

.co-agency{margin:-4px 0 4px}
.link-button{background:none;border:0;padding:0;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit}

/* =====================================================================================================================
   CLASSIC look (Settings > Look), based on the delvii.online homepage: ink-black bar, paper-cream pages, champagne
   gold for accents and the main buttons, oxblood for italic accent words, tall Instrument Serif capitals for headings,
   Inter Tight for reading, and small spaced capitals for labels. Contrast: ink #0B0B0A on paper #F2EFE7 18:1;
   oxblood #4A0C19 on paper 12:1; ink on gold #D8BF8A 11:1.
   ===================================================================================================================== */
body.theme-light.theme-classic {
  --navy: #0B0B0A; --navy-deep: #000; --cream: #F2EFE7; --feather: #FBF8F0; --paper: #F2EFE7; --sheet: #FBF8F0;
  --ink: #0B0B0A; --ink-2: #4A473F; --rule: #CFC8B8; --stone: #E9E4D8; --twilight: #6B675E; --dusk: #B9B4A8;
  --accent: #4A0C19; --accent-soft: #EFE6D2; --cta: #D8BF8A; --cta-ink: #0B0B0A;
  --script-ink: #4A0C19; --script-on-cream: #4A0C19; --script-on-navy: #D8BF8A; --rose: #4A0C19; --rose-soft: #D8BF8A;
  --night: #0B0B0A; --night-2: #141412; --night-ink: #FBF8F0; --night-ink-2: #B9B4A8; --night-rule: #2A2A26;
  --lime: #EFE6D2; --sky: #E9E4D8; --midnight: #0B0B0A; --maroon: #4A0C19;
  background: var(--paper); color: var(--ink);
  font-family: "Inter Tight", "DM Sans", system-ui, sans-serif;
}
/* the top bar: ink, like the homepage */
body.theme-classic .topbar { background: rgba(11,11,10,.96); border-bottom: 1px solid rgba(251,248,240,.08); color: #FBF8F0; }
body.theme-classic .topbar a, body.theme-classic .topbar .brand, body.theme-classic .topbar nav a { color: #FBF8F0; }
body.theme-classic .topbar nav a { font: 600 .72rem/1 "Inter Tight", sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
body.theme-classic .topbar nav a:hover, body.theme-classic .topbar nav a[aria-current] { opacity: 1; background: transparent; color: #D8BF8A; }
body.theme-classic .topbar .brand-name { font: 400 1.7rem/1 "Instrument Serif", Georgia, serif; color: #FBF8F0; text-shadow: none; }
body.theme-classic .topbar .brand-sub { color: #B9B4A8; }
body.theme-classic .brand-mark .tile { fill: #D8BF8A; } body.theme-classic .brand-mark .d { fill: #0B0B0A; } body.theme-classic .brand-mark .spark { fill: #4A0C19; }
/* headings: tall serif capitals, the accent word in italic oxblood (gold on dark) */
body.theme-classic :is(.poster, .section-title, h1, h1.display, .op-h2) {
  font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; text-transform: uppercase !important;
  letter-spacing: -.02em !important; line-height: .92 !important; color: var(--ink); }
body.theme-classic :is(h2, h3, .gap-h2, .card-title) { font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important;
  letter-spacing: -.01em !important; text-transform: none !important; }
body.theme-classic :is(.poster, .section-title, h1, h2, h3) :is(em, .hl), body.theme-classic .hl em {
  font-family: "Instrument Serif", Georgia, serif !important; font-style: italic !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: -.01em !important; color: var(--accent) !important; }
/* labels: small spaced capitals with a short rule, like the homepage */
body.theme-classic .eyebrow { font: 600 .72rem/1.35 "Inter Tight", sans-serif !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: var(--twilight) !important; display: inline-flex; align-items: center; gap: 10px; }
body.theme-classic .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
/* buttons: champagne-gold pills for the main action, outlined ink pills for the rest */
body.theme-classic :is(button.primary, .button.primary, .qs-go, .btn-cta, .gap-go) {
  background: #D8BF8A !important; color: #0B0B0A !important; border: 1px solid #D8BF8A !important; border-radius: 999px !important;
  font-family: "Inter Tight", sans-serif !important; font-weight: 600 !important; box-shadow: none !important; }
body.theme-classic :is(button.primary, .button.primary, .qs-go, .gap-go):hover { background: #E4CFA2 !important; }
body.theme-classic :is(.button:not(.primary), button.secondary) { border-radius: 999px; border-color: var(--ink); color: var(--ink); background: transparent; }
/* cards and sheets: cream paper, hairline rules, generous rounding */
body.theme-classic :is(.card, .gap-sheet, .set-card, .sheet, .result-card, .person-card, .tile, .qs-box, .dash-qs) {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 28px; box-shadow: none; }
/* dark panels (page heroes, outreach banner): ink with a warm glow and gold accents */
body.theme-classic .page-hero { background: radial-gradient(60% 80% at 92% 0%, rgba(196,120,70,.22), transparent 70%), #0B0B0A !important;
  color: #FBF8F0; border-radius: 32px; }
body.theme-classic .page-hero :is(h1, .poster) { color: #FBF8F0 !important; }
body.theme-classic .page-hero :is(h1, .poster) :is(em, .hl), body.theme-classic .page-hero .hl em { color: #D8BF8A !important; }
body.theme-classic .page-hero .eyebrow { color: #D8BF8A !important; }
body.theme-classic .dash-outreach { background: #0B0B0A !important; color: #FBF8F0 !important; border: 0 !important; border-radius: 28px; }
body.theme-classic .dash-outreach :is(strong, .dash-outreach-copy strong) { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.05 "Instrument Serif", Georgia, serif !important;
  text-transform: none !important; letter-spacing: -.01em !important; color: #FBF8F0 !important; }
body.theme-classic .dash-outreach-copy span:last-child, body.theme-classic .dash-outreach-copy .eyebrow { color: #B9B4A8 !important; }
body.theme-classic .dash-outreach :is(.or-icon, .go) { background: #D8BF8A !important; color: #0B0B0A !important; }
/* inputs */
body.theme-classic :is(input, select, textarea) { font-family: "Inter Tight", sans-serif; border-color: var(--rule); background: #FBF8F0; }
body.theme-classic :is(input, select, textarea):focus { border-color: #4A0C19; box-shadow: 0 0 0 3px rgba(74,12,25,.12); }
body.theme-classic :focus-visible { outline-color: #4A0C19; }
body.theme-classic ::selection { background: #D8BF8A; color: #0B0B0A; }
/* the settings card that previews it */
.look-card.classic .look-swatch i:nth-child(1) { background: #0B0B0A; } .look-card.classic .look-swatch i:nth-child(2) { background: #F2EFE7; }
.look-card.classic .look-swatch i:nth-child(3) { background: #D8BF8A; }
.look-card.classic .classic-sample { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.25em; text-transform: uppercase; letter-spacing: -.01em; }
body.theme-classic .topbar nav a.current, body.theme-classic .topbar nav a.current:hover { background: rgba(216,191,138,.16) !important; color: #D8BF8A !important; opacity: 1; border-radius: 999px; }
body.theme-classic .topbar :is(.user-pill, .account-link, nav .me, nav a[href="/settings"]) { color: #FBF8F0; }
/* Classic: the homepage glow. White halo on dark panels; a soft gold halo on the big headings on cream. */
body.theme-classic .topbar .brand-name { text-shadow: 0 0 10px rgba(255,255,255,.45), 0 0 30px rgba(255,240,210,.2); }
body.theme-classic .page-hero :is(h1, .poster), body.theme-classic .dash-outreach strong {
  text-shadow: 0 0 10px rgba(255,255,255,.42), 0 0 38px rgba(255,240,210,.18) !important; }
body.theme-classic .page-hero :is(h1, .poster) :is(em, .hl), body.theme-classic .page-hero .hl em { text-shadow: 0 0 22px rgba(216,191,138,.45) !important; }
body.theme-classic :is(.poster, .section-title, h1, h1.display):not(.page-hero *) {
  text-shadow: 0 0 1px rgba(11,11,10,.2), 0 0 22px rgba(216,191,138,.55), 0 0 60px rgba(216,191,138,.3) !important; }
body.theme-classic :is(.poster, h1) :is(em, .hl):not(.page-hero *) { text-shadow: 0 0 20px rgba(216,191,138,.5) !important; }
body.theme-classic .brand-mark .tile { filter: drop-shadow(0 0 8px rgba(216,191,138,.55)); }
/* Classic: every dark header panel (admin, CV, outreach, offer) reads like the Settings one: cream glowing text, gold accents */
body.theme-classic :is(.page-head, .or-hero, .op-hero, .page-hero) { color: #FBF8F0 !important; }
body.theme-classic :is(.page-head, .or-hero, .op-hero) :is(h1, .poster, h2) { color: #FBF8F0 !important;
  text-shadow: 0 0 10px rgba(255,255,255,.42), 0 0 38px rgba(255,240,210,.18) !important; }
body.theme-classic :is(.page-head, .or-hero, .op-hero, .page-hero) :is(h1, .poster, h2) :is(em, .hl) { color: #D8BF8A !important; text-shadow: 0 0 22px rgba(216,191,138,.45) !important; }
body.theme-classic :is(.page-head, .or-hero, .op-hero, .page-hero) .eyebrow { color: #D8BF8A !important; }
body.theme-classic :is(.page-head, .or-hero, .op-hero, .page-hero) :is(p, .small, .lede, li) { color: #D9D4C7 !important; }
body.theme-classic :is(.page-head, .or-hero, .op-hero, .page-hero) a { color: #D8BF8A !important; text-decoration-color: rgba(216,191,138,.6); }
/* ---------- the welcome tour in Simplenova colours (was Delvii navy, blue and lime): ink, cream and gold ---------- */
.tour { background: rgba(11, 11, 10, 0.62) !important; }
.tour-card, :root .tour-card {
  background: radial-gradient(640px 340px at 100% -10%, rgba(196, 120, 70, 0.26), transparent 65%),
              radial-gradient(520px 300px at -10% 110%, rgba(74, 12, 25, 0.55), transparent 70%), #0B0B0A !important;
  color: #FBF8F0 !important; border: 1px solid rgba(251, 248, 240, 0.12) !important; }
.tour .eyebrow { color: #D8BF8A !important; }
.tour-title { color: #FFFDF6 !important; font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important;
  letter-spacing: -0.02em !important; text-shadow: 0 0 10px rgba(255,255,255,.35), 0 0 34px rgba(255,240,210,.15); }
.tour-title em { color: #D8BF8A !important; font-family: "Instrument Serif", Georgia, serif !important; text-shadow: 0 0 20px rgba(216,191,138,.4); }
.tour-facts div { background: rgba(251, 248, 240, 0.05) !important; border: 1px solid rgba(251, 248, 240, 0.12) !important; }
.tour-facts b, .tour-step-title { color: #FBF8F0 !important; font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; }
.tour-facts span, .tour-step p { color: #C9C3B6 !important; }
.tour-facts span b, .tour-facts span strong { color: #D8BF8A !important; font-family: inherit !important; }
.tour-icon { background: #D8BF8A !important; color: #0B0B0A !important; }
.tour-dots li { background: rgba(251, 248, 240, 0.25) !important; }
.tour-dots li.on { background: #D8BF8A !important; }
.tour-skip { color: #B9B4A8 !important; }
.tour .tour-actions button.primary, .tour .tour-actions .primary { background: #D8BF8A !important; color: #0B0B0A !important; border-color: #D8BF8A !important; }
.tour .tour-actions button:not(.primary):not(.tour-skip) { background: transparent !important; color: #FBF8F0 !important; border: 1px solid rgba(251,248,240,.4) !important; }
body .tour .tour-card .eyebrow, body.theme-light .tour .tour-card .eyebrow { color: #D8BF8A !important; }
body .tour .tour-card .tour-facts div, body.theme-light .tour .tour-card .tour-facts div:nth-child(n),
body .tour .tour-card .tour-facts.tour-modes div.deep { box-shadow: none !important; background: rgba(251,248,240,.05) !important; border: 1px solid rgba(251,248,240,.12) !important; }
body .tour .tour-card .tour-facts.tour-modes div.deep { background: rgba(216,191,138,.08) !important; border-color: rgba(216,191,138,.45) !important; }
body .tour .tour-card .tour-facts b, body.theme-light .tour .tour-card .tour-facts b, body .tour .tour-card .tour-facts .deep b {
  color: #FBF8F0 !important; font: 400 1.35rem/1.1 "Instrument Serif", Georgia, serif !important; text-transform: none !important; letter-spacing: 0 !important; }
body .tour .tour-card .tour-facts span, body.theme-light .tour .tour-card .tour-facts span, body .tour .tour-card .tour-facts .deep span { color: #D9D4C7 !important; }
body .tour .tour-card .tour-facts strong, body .tour .tour-card .tour-mode-tag, body .tour .tour-card .tour-facts .deep .tour-mode-tag { color: #D8BF8A !important; }
body .tour .tour-card :is(p, li, .tour-modes-foot) { color: #D9D4C7; }
body .tour .tour-card .tour-step-title em, body .tour .tour-card .tm-title em { color: #D8BF8A !important; font-family: "Instrument Serif", Georgia, serif !important; font-style: italic !important; }

.lock-tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: .62rem; letter-spacing: .06em; background: rgba(216,191,138,.18); color: #D8BF8A; white-space: nowrap; }

/* ---------- readability fixes found by the contrast check (both looks unless marked Classic) ---------- */
/* deep search brief box: typed and document-filled text must be readable */
body.theme-classic .ds-box :is(input, textarea) { color: #0B0B0A !important; background: #FBF8F0 !important; }
body.theme-classic .ds-box :is(input, textarea)::placeholder { color: #6B675E !important; }
body.theme-classic .ds-pill > span { color: #D8BF8A; }
/* "Add a section" buttons under the brief */
.ds-tray button { color: #0B0B0A !important; background: #FBF8F0 !important; border: 1px solid #CFC8B8 !important; }
.ds-tray-label { color: #6B675E !important; }
/* search results header sits on cream: ink text with a gold halo, not cream */
body.theme-classic .page-head.res-hero :is(h1, .poster) { color: #0B0B0A !important;
  text-shadow: 0 0 22px rgba(216,191,138,.55), 0 0 60px rgba(216,191,138,.3) !important; }
body.theme-classic .page-head.res-hero .eyebrow { color: #6B675E !important; }
body.theme-classic .page-head.res-hero :is(p, .muted, .num) { color: #4A473F !important; }
body.theme-classic .page-head.res-hero a { color: #4A0C19 !important; }
/* dark header links (admin and others) in either look */
.page-head:not(.res-hero) a { color: #D8BF8A; }
/* the selected option in a dark header's switcher: ink on gold */
body .page-head a.current, body.theme-classic .page-head a.current { color: #0B0B0A !important; background: #D8BF8A !important; }
/* call-to-action buttons everywhere in Classic, including the top bar */
body.theme-classic :is(.button.cta, a.button.cta) { background: #D8BF8A !important; color: #0B0B0A !important; border-color: #D8BF8A !important; }
/* matched squares on the fit checklist: cream text on the dark fill */
body div.hit { color: #FBF8F0 !important; }
/* the recommended star on dark */
.rec-dot { color: #D8BF8A !important; }
/* footer tagline in the serif */
body.theme-classic .footer-slogan { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 "Instrument Serif", Georgia, serif !important; text-transform: none !important; letter-spacing: -.01em; }
body.theme-classic .footer-slogan em { color: #D8BF8A; font-style: italic; }
.ds-tray a { color: #0B0B0A !important; background: #FBF8F0 !important; border: 1px solid #CFC8B8 !important; }
.ds-tray { background: #141412 !important; color: #FBF8F0 !important; }
.ds-tray-label { color: #D8BF8A !important; }
.ds-tray-sep { background: rgba(251,248,240,.25) !important; }

.atc-more { margin: 4px 0 8px; }
.atc-more summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Temporary test-set marks (goldset.py): dashed so they read as an internal tool, not part of the product */
.gold-marks{display:inline-flex;gap:6px;flex-wrap:wrap}
.gold-btn{font:inherit;font-size:.8rem;padding:5px 11px;border-radius:999px;border:1px dashed #b69a5e;background:transparent;color:inherit;cursor:pointer}
.gold-btn:hover{border-style:solid}
.gold-btn.best.on{background:#D8BF8A;border:1px solid #D8BF8A;color:#0B0B0A}
.gold-btn.miss.on{background:#5a1f24;border:1px solid #5a1f24;color:#FBF8F0}