/* zerodaysecurity.org — AI / agentic-security assessment tool. Design system from the Zero Day Security brand.
   Dark, security-grade hero -> calm, document-like light work area. Mobile-first. */

:root {
  --bg-900: #0B0710;
  --bg-800: #110D17;
  --bg-700: #1C1726;
  --bg-600: #271F33;
  --divider: #3F0A4D;
  --p-700: #6E1284;
  --p-500: #B81DCB;
  --lav: #C77DFF;
  --d-text: #F4F2F7;
  --d-mut: #B7B1C4;
  --d-faint: #A7A1B4;
  --l-bg: #F4F2F8;
  --l-card: #FFFFFF;
  --l-ink: #1A1622;
  --l-mut: #5C566B;
  --l-faint: #6B6578;
  --l-border: #E5E1EC;
  --l-border2: #D7D1E2;
  /* severity (mirror of src/shared/severity.js) */
  --hi-fill: #FBE3E6; --hi-acc: #C8102E; --hi-ink: #8E0C22;
  --me-fill: #FCEFD8; --me-acc: #B45309; --me-ink: #7A4405;
  --lo-fill: #DDF2E6; --lo-acc: #157347; --lo-ink: #0E5132;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 40px -12px rgba(17,13,23,.5);
  --shadow-sm: 0 2px 10px -4px rgba(17,13,23,.25);
  --maxw: 1180px;
  --font: "Calibri", "Carlito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--l-ink);
  background: var(--l-bg); line-height: 1.55; overflow-x: clip;
  font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { line-height: 1.18; font-weight: 700; margin: 0 0 .4em; letter-spacing: -.01em; }
a { color: var(--p-700); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; border-radius: 4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--bg-800); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- top bar ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(17,13,23,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.brand__logo { height: 34px; }
.brand__txt { color: var(--d-text); font-weight: 700; letter-spacing: .02em; font-size: 15px; }
.brand__txt small { display:block; color: var(--d-faint); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: -2px; }
.nav__links { display:flex; align-items:center; gap: 22px; margin-left: auto; margin-right: 18px; }
.nav__links a { color: var(--d-mut); text-decoration:none; font-size: 14px; font-weight: 550; transition: color .14s; }
.nav__links a:hover { color: var(--d-text); }
@media (max-width: 720px) { .nav__links { display:none; } }
.nav__cta { background: var(--p-500); color:#fff; border:0; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.nav__cta:hover { background: var(--lav); color: var(--bg-900); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--bg-800); color: var(--d-text); overflow: hidden; }
.hero::before { content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(184,29,203,.30), transparent 60%),
    radial-gradient(760px 460px at 6% 8%, rgba(110,18,132,.34), transparent 62%),
    radial-gradient(900px 600px at 50% 120%, rgba(199,125,255,.10), transparent 60%);
  pointer-events:none; }
.hero__grid { position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image: linear-gradient(rgba(199,125,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(199,125,255,.6) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 70% 0%, #000, transparent 70%); }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-family: var(--mono); font-size: 12px; letter-spacing:.16em; text-transform: uppercase; color: var(--lav); border:1px solid rgba(199,125,255,.32); background: rgba(199,125,255,.07); padding:6px 13px; border-radius:999px; margin-bottom: 22px; }
.eyebrow .dot { width:7px;height:7px;border-radius:50%;background:var(--lav); box-shadow:0 0 0 4px rgba(199,125,255,.18); }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -.025em; margin-bottom: 18px; }
.hero h1 .accent { background: linear-gradient(100deg, var(--lav), var(--p-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--d-mut); max-width: 660px; margin: 0 0 30px; }
.btn { border:0; border-radius: 999px; font-weight: 650; font-size: 16px; padding: 14px 26px; display:inline-flex; align-items:center; gap:10px; text-decoration: none; transition: transform .08s ease, background .15s ease, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: linear-gradient(100deg, var(--p-500), var(--lav)); color: #190a22; box-shadow: 0 8px 26px -8px rgba(184,29,203,.7); }
.btn--primary:hover { box-shadow: 0 10px 34px -6px rgba(199,125,255,.8); }
.btn--ghost-d { background: rgba(255,255,255,.06); color: var(--d-text); border:1px solid rgba(255,255,255,.16); }
.btn--ghost-d:hover { background: rgba(255,255,255,.12); }
.hero__trust { display:flex; flex-wrap:wrap; gap: 8px 22px; margin-top: 30px; color: var(--d-faint); font-size: 13.5px; }
.hero__trust span { display:inline-flex; align-items:center; gap:7px; }
.hero__trust svg { color: var(--lav); flex: none; }
.deadline-pill { margin-top: 26px; display:inline-flex; gap:10px; align-items:center; background: rgba(180,83,9,.12); border:1px solid rgba(199,125,255,.3); color:#f3e7d6; padding:9px 15px; border-radius:10px; font-size:13.5px; }
.deadline-pill b { color:#fff; }

/* ---------- split first screen ---------- */
.split { display: flex; align-items: center; min-height: calc(100svh - 60px); scroll-margin-top: 60px; }
.split__in {
  display: grid; grid-template-columns: 1.04fr 1fr; grid-template-areas: "story tool";
  gap: clamp(24px, 3.4vw, 52px); align-items: stretch; width: 100%;
  padding: clamp(28px, 4vh, 52px) 22px; position: relative; z-index: 1;
}
.hero__copy, #heat-panel { grid-area: story; align-self: center; min-width: 0; }
.split__tool { grid-area: tool; align-self: stretch; }
.hero__copy { max-width: 560px; transition: opacity .3s ease, transform .3s ease; }
#heat-panel { opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .42s ease; }
.split.is-revealed #heat-panel { opacity: 1; transform: none; }

@media (min-width: 941px) {
  #heat-panel { max-height: clamp(460px, calc(100svh - 120px), 680px); display: flex; flex-direction: column; }
  #heat-panel .heat__grid { flex: 1; min-height: 0; overflow-y: auto; }
  .split.is-revealed #hero-copy { opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none; }
}
@media (max-width: 940px) {
  .split { min-height: 0; }
  .split__in { grid-template-columns: 1fr; grid-template-areas: "story" "tool" "heat"; gap: 18px; padding-top: 30px; padding-bottom: 30px; }
  #heat-panel { grid-area: heat; align-self: stretch; }
  .hero__copy { max-width: none; }
  .hero__copy .hero__sub { margin-bottom: 18px; }
}

/* ---------- results ---------- */
.results { background: var(--l-bg); padding: 0; scroll-margin-top: 64px; }
.results:has(.show) { padding: 8px 0 72px; }
.results .preview-wrap, .results .booking { margin-top: 40px; }

.panel { background: var(--l-card); border:1px solid var(--l-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--l-ink); }
.panel--ben { padding: 0; overflow: hidden; display:flex; flex-direction: column; width: 100%; min-height: 460px; box-shadow: var(--shadow); }
@media (min-width: 941px) {
  .split__tool.panel--ben { height: clamp(480px, calc(100svh - 104px), 680px); min-height: 0; overflow-y: auto; }
}
.ben__head { display:flex; align-items:center; gap: 12px; padding: 16px 20px; border-bottom:1px solid var(--l-border); background: linear-gradient(180deg, #faf8fd, #fff); }
.ben__avatar { width: 42px; height:42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--lav), var(--p-700)); display:grid; place-items:center; color:#fff; font-weight:700; flex:none; box-shadow: 0 0 0 4px rgba(199,125,255,.15); }
.ben__who b { display:block; font-size: 15px; }
.ben__who small { color: var(--l-mut); font-size: 12.5px; }
.ben__status { margin-left:auto; font-size:11.5px; color: var(--lo-acc); display:flex; align-items:center; gap:6px; }
.ben__status .dot { width:7px;height:7px;border-radius:50%; background: var(--lo-acc); }
.ben__progress { height: 4px; background: var(--l-border); }
.ben__progress > i { display:block; height:100%; width:0; background: linear-gradient(90deg, var(--p-500), var(--lav)); transition: width .4s ease; }
.ben__scroll { padding: 20px; flex:1; min-height: 0; overflow-y: auto; display:flex; flex-direction: column; gap: 14px; }
.ben__poweredby { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding: 8px 16px; border-top:1px solid var(--l-border); background:#faf8fd; color: #6f6880; font-size: 10.5px; letter-spacing:.02em; }
.ben__poweredby svg { color: #9c95ab; }
.ben__poweredby a { color: #6f6880; text-decoration: underline; font-weight: 500; }
.ben__poweredby a:hover { color: var(--p-700); }

.msg { max-width: 92%; }
.msg--ben { align-self: flex-start; }
.msg--ben .bubble { background: #f3effa; border:1px solid #ece5f6; border-radius: 4px 16px 16px 16px; padding: 13px 16px; color: var(--l-ink); }
.msg--user { align-self: flex-end; }
.msg--user .bubble { background: var(--p-700); color:#fff; border-radius: 16px 16px 4px 16px; padding: 11px 15px; font-weight: 550; }
.bubble p { margin: 0 0 .5em; } .bubble p:last-child { margin:0; }
.bubble .help { font-size: 12.5px; color: var(--l-mut); margin-top: 6px; display:inline-flex; gap:6px; align-items:flex-start; }

/* ---------- role picker ---------- */
.rolepick__lead { margin: 0 0 12px; font-size: 14px; color: var(--l-mut); }
.rolepick { display:flex; flex-direction: column; gap: 10px; }
.rolecard { text-align:left; width:100%; padding: 14px 16px; border:1.5px solid var(--l-border2); border-radius: 12px; background:#fff; display:flex; flex-direction:column; gap:3px; transition: border-color .12s, background .12s, transform .06s; }
.rolecard:hover { border-color: var(--p-500); background:#fcfaff; }
.rolecard:active { transform: scale(.995); }
.rolecard__name { font-weight: 700; font-size: 15.5px; color: var(--l-ink); }
.rolecard__blurb { font-size: 13px; color: var(--l-mut); }

/* ---------- intake / forms ---------- */
.fieldcard { background:#fff; border:1px solid var(--l-border2); border-radius: 12px; padding: 15px; display:flex; flex-direction:column; gap: 11px; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.field label { display:block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
.field label .req { color: var(--hi-acc); }
.field input, .field select { width:100%; min-height: 46px; padding: 10px 13px; border:1px solid var(--l-border2); border-radius: 9px; font-size: 16px; font-family: inherit; background:#fff; color: var(--l-ink); }
.field input:focus, .field select:focus { border-color: var(--p-500); outline: 2px solid rgba(199,125,255,.35); outline-offset: 0; }
.field .hint { font-size: 12px; color: var(--l-faint); margin-top: 4px; }
.optional { color: var(--l-faint); font-weight: 500; }
.field .err { font-size: 12.5px; color: var(--hi-acc); margin-top: 4px; display:none; }
.field.invalid .err { display:block; }
.field.invalid input, .field.invalid select { border-color: var(--hi-acc); }
.consent { display:flex; gap: 10px; align-items:flex-start; font-size: 13px; color: var(--l-mut); }
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 1px; flex:none; accent-color: var(--p-500); }
.consent a { color: var(--p-700); }

/* ---------- choices (questions + self-check) ---------- */
.choices { display:flex; flex-direction: column; gap: 10px; }
.choice { display:flex; gap: 13px; align-items:center; text-align:left; width:100%; padding: 13px 15px; border:1.5px solid var(--l-border2); border-radius: 11px; background:#fff; transition: border-color .12s, background .12s, transform .06s; }
.choice:hover { border-color: var(--p-500); background:#fcfaff; }
.choice:active { transform: scale(.995); }
.choice__txt b { display:block; font-size: 15px; }
.choice__txt small { color: var(--l-mut); font-size: 12.5px; }
/* self-check options carry a subtle coverage cue on the left edge (non-colour-reliant: also labelled) */
.choice--sc { border-left-width: 5px; }
.choice--sc-none { border-left-color: var(--hi-acc); }
.choice--sc-some { border-left-color: var(--me-acc); }
.choice--sc-solid { border-left-color: var(--lo-acc); }

.btn--sm { padding: 10px 18px; font-size: 14.5px; }
.btn--accent { background: var(--p-700); color:#fff; }
.btn--accent:hover { background: var(--p-500); }
.btn--soft { background:#f1ecf9; color: var(--p-700); border:1px solid #e4dbf3; margin-top: 6px; }
.btn--soft:hover { background:#e9e1f7; }
.btn--block { width:100%; justify-content:center; }
.btn[disabled] { opacity:.55; cursor: not-allowed; }

/* ---------- heatmap ---------- */
.panel--heat { padding: 18px; box-shadow: var(--shadow); }
.heat__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 10px; }
.heat__head h2 { font-size: 15px; margin:0; }
.heat__head .sub { font-size: 12px; color: var(--l-faint); }
.heat__tier { font-size: 12px; font-weight: 700; color: var(--p-700); background:#f3eefb; border:1px solid #e4dbf3; border-radius: 8px; padding: 5px 10px; margin-bottom: 12px; display:inline-block; }
.heat__counts { display:flex; gap:8px; margin-bottom: 14px; }
.cnt { flex:1; text-align:center; border-radius: 9px; padding: 8px 4px; border:1px solid; }
.cnt b { display:block; font-size: 20px; line-height:1; }
.cnt small { font-size: 10.5px; text-transform: uppercase; letter-spacing:.05em; }
.cnt--hi { background: var(--hi-fill); border-color: #f3c6cd; color: var(--hi-ink); }
.cnt--me { background: var(--me-fill); border-color: #f0dcb4; color: var(--me-ink); }
.cnt--lo { background: var(--lo-fill); border-color: #bfe6cf; color: var(--lo-ink); }
.heat__grid { display:flex; flex-direction:column; gap: 6px; }
.hcell { display:flex; align-items:center; gap: 10px; padding: 8px 11px; border-radius: 9px; border:1px solid var(--l-border); background:#fbfafd; transition: background .35s, border-color .35s, transform .2s; }
.hcell.is-set { animation: pop .4s ease; }
@keyframes pop { 0%{ transform: scale(.97);} 60%{ transform: scale(1.02);} 100%{ transform: scale(1);} }
.hcell__dot { width: 12px; height:12px; border-radius: 3px; flex:none; background: var(--l-border2); }
.hcell--hi { background: var(--hi-fill); border-color:#f3c6cd; } .hcell--hi .hcell__dot { background: var(--hi-acc); }
.hcell--me { background: var(--me-fill); border-color:#f0dcb4; } .hcell--me .hcell__dot { background: var(--me-acc); }
.hcell--lo { background: var(--lo-fill); border-color:#bfe6cf; } .hcell--lo .hcell__dot { background: var(--lo-acc); }
.hcell__name { font-size: 12.5px; flex:1; }
.hcell__name b { color: var(--l-faint); font-weight: 600; margin-right: 5px; font-variant-numeric: tabular-nums; }
.hcell__sev { font-size: 10.5px; font-weight: 800; letter-spacing:.04em; white-space:nowrap; }
.hcell--hi .hcell__sev { color: var(--hi-acc);} .hcell--me .hcell__sev { color: var(--me-acc);} .hcell--lo .hcell__sev { color: var(--lo-acc);}
.hcell--pending .hcell__sev { color: var(--l-faint); font-weight:600; }
.heat__foot { margin-top: 13px; font-size: 11.5px; color: var(--l-faint); }

/* ---------- preview ---------- */
.preview-wrap { display:none; margin-top: 30px; }
.preview-wrap.show { display:block; }
.preview-bar { position: sticky; top: 60px; z-index: 30; background: var(--bg-800); color:#fff; border-radius: 12px; padding: 14px 18px; display:flex; gap: 12px; align-items:center; flex-wrap:wrap; box-shadow: var(--shadow); }
.preview-bar .pb__title { font-weight: 650; margin-right:auto; display:flex; flex-direction: column; gap:2px; }
.preview-bar .pb__title small { color: var(--d-faint); font-weight:500; font-size:12px; }
.preview-bar .btn { font-size:14.5px; padding: 11px 18px; }
.btn--word { background:#fff; color: var(--bg-800); }
.btn--word:hover { background: var(--d-mut); }
.pb__more { background:none; border:0; color: var(--lav); font-size: 12.5px; text-decoration: underline; padding: 6px 4px; align-self:center; }
.pb__more:hover { color:#fff; }
.preview-bar .pb__note { color: var(--d-faint); font-weight: 500; font-size: 11.5px; margin-top: 2px; max-width: 52ch; }
.docframe { background:#fff; border:1px solid var(--l-border); border-radius: 12px; margin-top: 12px; box-shadow: var(--shadow); overflow:hidden; }
.docframe__edit { background:#faf8fd; border-bottom:1px solid var(--l-border); padding: 12px 18px; display:flex; gap: 14px; flex-wrap:wrap; align-items:flex-end; }
.docframe__edit .field { margin:0; } .docframe__edit .field input, .docframe__edit .field select { min-height: 40px; font-size:14px; }
.docframe__body { padding: clamp(20px, 4vw, 52px); max-height: 72vh; overflow-y: auto; }

/* ---------- roadmap document styling ---------- */
.roadmap { font-size: 14px; color: var(--l-ink); max-width: 820px; margin: 0 auto; }
.rm-cover { text-align:center; padding: 18px 0 26px; border-bottom: 2px solid var(--divider); margin-bottom: 26px; }
.rm-cover__date { color: var(--p-700); font-weight:600; margin-bottom: 12px; }
.rm-cover__org { font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--bg-800); margin: 0 0 4px; }
.rm-cover__program { color: var(--l-mut); font-size: 15px; margin-bottom: 14px; }
.rm-cover__title { font-size: 1.5rem; color: var(--p-700); letter-spacing: .02em; }
.rm-cover__subtitle { color: var(--l-mut); max-width: 560px; margin: 6px auto 14px; font-size: 13px; }
.rm-cover__hook { max-width: 600px; margin: 0 auto 18px; font-size: 13px; color: var(--l-ink); background:#f7f3fb; border:1px solid #ebe3f5; border-radius: 10px; padding: 10px 14px; }
.rm-sec { margin: 22px 0; }
.rm-exec p { font-size: 14.5px; }
.rm-h1 { font-size: 1.32rem; color: var(--bg-800); border-bottom:1px solid var(--l-border); padding-bottom: 6px; margin-top: 30px; }
.rm-h2 { font-size: 1.05rem; color: var(--p-700); margin-top: 18px; }
.rm-h3 { font-size: .98rem; color: var(--bg-800); margin-top: 16px; }
.rm-h4 { font-size: .9rem; color: var(--p-700); margin: 10px 0 4px; text-transform: uppercase; letter-spacing:.04em; }
.rm-window { color: var(--l-mut); font-weight: 500; font-size: .85em; }
.roadmap p { margin: 0 0 .8em; }
.rm-list { margin: 0 0 1em; padding-left: 20px; } .rm-list li { margin-bottom: .4em; }
.rm-maturity { font-weight: 600; }
.rm-table { width:100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 12.5px; }
.rm-table th, .rm-table td { border:1px solid #c9c2d6; padding: 7px 9px; text-align:left; vertical-align: top; }
.rm-table thead th { background: var(--p-700); color:#fff; font-size: 12px; }
.rm-table--cover thead { display:none; }
.rm-table--cover td:first-child { background:#f4f1f8; font-weight:600; width: 38%; }
.rm-table--cover { border:1px solid #c9c2d6; margin: 0 auto; max-width: 580px; }
.rm-table--maturity td:first-child { white-space:nowrap; font-weight:600; }
.gapcell-domain { background:#faf8fd; font-weight:600; }
.gapcell-flag { display:block; font-size: 10px; font-weight: 600; color: var(--me-ink); background: var(--me-fill); border:1px solid #f0dcb4; border-radius: 5px; padding: 0 5px; margin-top: 4px; width: fit-content; text-transform: uppercase; letter-spacing: .03em; }
.gapcell--hi { background: var(--hi-fill); } .gapcell--me { background: var(--me-fill); } .gapcell--lo { background: var(--lo-fill); }
.gapcell-ev { font-size: 11px; white-space:nowrap; }
.sev { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:11.5px; white-space:nowrap; }
.sev__glyph { font-size: 11px; }
.sev--high { color: var(--hi-acc);} .sev--med { color: var(--me-acc);} .sev--low { color: var(--lo-acc);}
.ev { display:inline-flex; align-items:center; gap:4px; font-size: 11px; font-weight:600; color: var(--l-mut); }
.ev__glyph { color: var(--p-500); }
.rm-heatlegend { display:flex; gap: 14px; align-items:center; flex-wrap:wrap; font-size: 12px; color: var(--l-mut); margin: 8px 0; }
.rm-heatlegend__counts { margin-left:auto; font-weight:600; color: var(--l-ink); }

/* broken-assumptions grid */
.rm-broken { display:flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.rm-broken__row { display:grid; grid-template-columns: 1fr 1.4fr; gap: 12px; align-items:start; padding: 10px 12px; border:1px solid var(--l-border); border-radius: 9px; background:#fbfafd; }
.rm-broken__old { color: var(--l-mut); font-style: italic; font-size: 13px; }
.rm-broken__now { font-size: 13px; }
@media (max-width: 620px) { .rm-broken__row { grid-template-columns: 1fr; gap: 4px; } }

/* regulatory context + evidence legend */
.rm-regctx { margin: 14px 0 6px; padding: 12px 15px; border:1px solid #ebe3f5; border-radius: 10px; background:#f7f3fb; }
.rm-regctx__lead { font-weight: 700; margin: 0 0 6px; font-size: 13px; color: var(--bg-800); }
.rm-regctx .rm-list { margin-bottom: 0; }
.rm-regctx .rm-list li { font-size: 13px; }
.rm-legend { font-size: 11.5px; color: var(--l-faint); font-style: italic; margin: 2px 0 12px; line-height: 1.5; }

/* priority gaps (ranked cards) */
.rm-prio-list { display:flex; flex-direction:column; gap: 12px; }
.rm-prio { display:flex; gap: 13px; align-items:flex-start; border:1px solid var(--l-border); border-left-width: 5px; border-radius: 10px; padding: 13px 15px; background:#fff; box-shadow: var(--shadow-sm); }
.rm-prio--high { border-left-color: var(--hi-acc); }
.rm-prio--med { border-left-color: var(--me-acc); }
.rm-prio--low { border-left-color: var(--lo-acc); }
.rm-prio__rank { flex:none; width: 28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; background: var(--p-700); margin-top: 1px; }
.rm-prio--high .rm-prio__rank { background: var(--hi-acc); }
.rm-prio--med .rm-prio__rank { background: var(--me-acc); }
.rm-prio--low .rm-prio__rank { background: var(--lo-acc); }
.rm-prio__main { flex:1; min-width:0; }
.rm-prio__head { display:flex; align-items:center; gap: 10px; flex-wrap:wrap; margin-bottom: 6px; }
.rm-prio__domain { font-weight: 700; }
.rm-prio p { margin: 0 0 .4em; font-size: 13px; }
.rm-prio p:last-child { margin-bottom: 0; }
.rm-prio__note { color: var(--me-ink); background: var(--me-fill); border-radius: 7px; padding: 6px 9px; }

/* roadmap phase timeline */
.rm-timeline { position: relative; margin: 10px 0 6px; }
.rm-timeline::before { content:""; position:absolute; left: 15px; top: 10px; bottom: 14px; width: 2px; background: linear-gradient(var(--p-500), var(--lav)); opacity:.4; }
.rm-phase { display:flex; gap: 16px; margin: 0 0 18px; position:relative; }
.rm-phase__marker { flex:none; z-index:1; }
.rm-phase__num { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background: var(--p-700); color:#fff; font-weight:800; font-size:14px; box-shadow: 0 0 0 4px var(--l-card); }
.rm-phase__body { flex:1; min-width:0; padding-top: 3px; }
.rm-phase__body .rm-h3 { margin-top: 0; }
.rm-phase__cols { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .rm-phase__cols { grid-template-columns: 1fr; gap: 4px; } .rm-phase { gap: 12px; } }

/* honesty note */
.rm-honesty { margin: 18px 0 6px; padding: 14px 16px; border:1px solid #ebe3f5; border-radius: 10px; background:#f7f3fb; }
.rm-honesty h3 { margin-top: 0; }

/* T0 */
.rm-cover--t0 { border-bottom-color: var(--hi-acc); }
.rm-t0__flag { margin: 8px 0 14px; }
.rm-t0__badge { display:inline-block; font-weight: 800; color:#fff; background: var(--hi-acc); border-radius: 8px; padding: 6px 14px; letter-spacing: .03em; }

/* ---------- booking ---------- */
.booking { display:none; margin-top: 28px; }
.booking.show { display:block; }
.booking .panel { padding: clamp(22px, 4vw, 40px); display:grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items:center; }
@media (max-width: 760px){ .booking .panel { grid-template-columns: 1fr; } }
.booking__art { background: var(--bg-800); color:#fff; border-radius: 12px; padding: 26px; position:relative; overflow:hidden; }
.booking__art::before { content:""; position:absolute; inset:0; background: radial-gradient(400px 240px at 80% 0%, rgba(199,125,255,.4), transparent 60%); }
.booking__art .date { font-family: var(--mono); color: var(--lav); font-size: 13px; letter-spacing:.1em; position:relative; }
.booking__art h3 { font-size: 1.5rem; position:relative; margin: 8px 0 10px; }
.booking__art p { color: var(--d-mut); position:relative; font-size: 14px; margin:0; }
.bookform > h3 { margin-top: 0; }
.bookform .field { margin-bottom: 13px; }
.booking__ok { display:none; background: var(--lo-fill); border:1px solid #bfe6cf; color: var(--lo-ink); border-radius: 10px; padding: 16px; }
.booking__ok.show { display:block; }

/* ---------- ask widget ---------- */
.askben { border-top:1px solid var(--l-border); background:#faf9fc; padding: 14px 20px 16px; }
.askben summary { cursor:pointer; font-size: 13.5px; font-weight:650; color: var(--p-700); list-style:none; display:flex; align-items:center; gap:8px; padding: 4px 0; user-select:none; }
.askben summary::-webkit-details-marker { display:none; }
.askben summary::after { content:"⌄"; margin-left:auto; color: var(--l-faint); font-size:15px; transition: transform .2s; }
.askben[open] summary::after { transform: rotate(180deg); }
.askben__box { margin-top: 12px; }
.askben__chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom: 12px; }
.askben__chip { font-size: 12px; padding: 7px 12px; border-radius: 999px; background:#fff; border:1px solid var(--l-border2); color: var(--p-700); cursor:pointer; transition: background .12s, border-color .12s; }
.askben__chip:hover { background:#f3eefb; border-color: var(--p-500); }
.askben__log { display:flex; flex-direction:column; gap: 10px; max-height: 180px; overflow-y:auto; margin-bottom: 12px; }
.askben__log:empty { display:none; }
.askben__row { display:flex; gap: 9px; }
.askben__q { align-self:flex-end; background: var(--p-700); color:#fff; border-radius: 13px 13px 4px 13px; padding: 8px 13px; font-size: 13px; max-width: 85%; margin-left:auto; }
.askben__a { background:#fff; border:1px solid var(--l-border); border-radius: 13px 13px 13px 4px; padding: 10px 13px; font-size: 13px; line-height:1.5; max-width: 92%; box-shadow: var(--shadow-sm); white-space: pre-wrap; }
.askben__a.err { background: var(--hi-fill); border-color:#f3c6cd; color: var(--hi-ink); box-shadow:none; }
.askben__form { display:flex; gap: 8px; }
.askben__form input { flex:1; min-height: 44px; padding: 10px 14px; border:1px solid var(--l-border2); border-radius: 10px; font-size: 14px; font-family: inherit; background:#fff; color: var(--l-ink); }
.askben__form input::placeholder { color: var(--l-faint); }
.askben__form input:focus { border-color: var(--p-500); outline: 2px solid rgba(199,125,255,.3); outline-offset: 0; }
.askben__form button { flex:none; }
.askben__hint { font-size: 11px; color: var(--l-faint); margin-top: 10px; line-height:1.4; }

/* ---------- toast / spinner ---------- */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--bg-800); color:#fff; padding: 13px 20px; border-radius: 11px; box-shadow: var(--shadow); z-index: 80; transition: transform .3s ease; font-size: 14px; max-width: 92vw; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.err { background:#5a0f1c; border:1px solid var(--hi-acc); }
.spinner { width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation: spin .7s linear infinite; display:inline-block; }
.spinner--ink { border-color: rgba(110,18,132,.3); border-top-color: var(--p-700); }
@keyframes spin { to { transform: rotate(360deg);} }
.gen { display:flex; flex-direction:column; align-items:center; gap: 14px; padding: 40px 20px; text-align:center; }
.gen h3 { margin:0; } .gen p { color: var(--l-mut); margin:0; font-size: 13.5px; }

/* ---------- footer ---------- */
.foot { background: var(--bg-800); color: var(--d-mut); padding: 40px 0 30px; }
.foot__brand img { height: 44px; }
.foot__brand .brand__txt { font-size: 17px; }
.foot__brand .brand__txt small { font-size: 11px; }
.foot__in { display:flex; flex-wrap:wrap; gap: 20px; justify-content: space-between; align-items:flex-start; }
.foot a { color: var(--lav); }
.foot small { color: var(--d-faint); font-size: 12px; }

/* privacy / docs */
.doc { max-width: 760px; margin: 30px auto 0; padding: 40px 22px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); }
.doc h1 { color: var(--bg-800); }
.doc h2 { margin-top: 26px; }
.doc p, .doc li { color: var(--l-mut); }
.doc-back { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; } }