/* 0daysecurity.ai - CBN AML Roadmap (Ben). Design system extracted from the 0day deck.
   Dark, security-grade hero -> calm, document-like light work area. Mobile-first. */

:root {
  /* dark */
  --bg-900: #0B0710;
  --bg-800: #110D17;
  --bg-700: #1C1726;
  --bg-600: #271F33;
  --divider: #3F0A4D;
  /* purple */
  --p-700: #6E1284;
  --p-500: #B81DCB;
  --lav: #C77DFF;
  /* text on dark */
  --d-text: #F4F2F7;
  --d-mut: #B7B1C4;
  --d-faint: #A7A1B4; /* lightened for AA on the nav/footer dark bg incl. the gradient (was #8A8398 ~3.2:1) */
  /* light work area */
  --l-bg: #F4F2F8;
  --l-card: #FFFFFF;
  --l-ink: #1A1622;
  --l-mut: #5C566B;
  --l-faint: #6B6578; /* ~5.6:1 on white - passes WCAG AA for hints/labels (was #8A8398 ~3.4:1) */
  --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; }
/* honour the [hidden] attribute even on elements with a display rule (e.g. .btn - keeps the
   PDF-only Word button and the pre-Q1 heatmap genuinely hidden). */
[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); } /* white logo on the dark nav/footer, like the deck */
.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__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%); }
.hero__in { position: relative; padding: 72px 0 84px; max-width: 880px; }
.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.5rem); 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.32rem); color: var(--d-mut); max-width: 660px; margin: 0 0 30px; }
.hero__cta { display:flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.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: 34px; 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(200,16,46,.10); border:1px solid rgba(200,16,46,.3); color:#ffd9df; padding:9px 15px; border-radius:10px; font-size:13.5px; }
.deadline-pill b { color:#fff; }

/* ---------- split first screen: value + working tool on one viewport ---------- */
.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;  /* sit above the decorative .hero__grid / .hero::before layers */
  z-index: 1;
}
/* copy and heatmap share the left cell so one cross-fades into the other */
.hero__copy, #heat-panel { grid-area: story; align-self: center; min-width: 0; }
.split__tool { grid-area: tool; align-self: stretch; }

/* The reveal is a single state class on the section, so visibility is recomputed by CSS at every
   breakpoint (resize-safe). #heat-panel starts [hidden]; JS drops that + adds .is-revealed on Q1.
   Desktop: copy fades out, heatmap takes the cell. Mobile: copy STAYS, heatmap shows below Ben. */
.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) {
  /* desktop: pin the heatmap to the viewport like Ben, scroll its grid; hide copy once revealed */
  #heat-panel { max-height: clamp(460px, calc(100svh - 120px), 660px); 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; }
}

/* mobile: stack hero -> Ben -> heatmap; copy stays, heatmap appears below Ben (no overlap/swap) */
@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 area (light) ---------- */
/* empty until Ben generates - no padding so the dark hero meets the footer with no light seam */
.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; }

/* light cards: force dark ink so text stays readable even when the card sits inside the
   dark .split/.hero section (which sets color:var(--d-text)). Without this, any label/heading
   that doesn't set its own colour inherits near-white and vanishes on the white card. */
.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); }
/* desktop: pin Ben to the viewport so the chat scrolls inside the panel, not the page */
@media (min-width: 941px) {
  /* pinned to the viewport so the chat scrolls inside; overflow-y:auto is a safety net so the
     Ask Ben input + "Powered by" tail are always reachable even with a full Q&A log open */
  .split__tool.panel--ben { height: clamp(480px, calc(100svh - 104px), 660px); 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; }
/* min-height:0 lets the chat yield height when Ben is pinned and Ask Ben is open, so the
   Ask Ben input + "Powered by" footer never overflow the fixed-height panel (they're siblings). */
.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); text-decoration: underline; }

.msg { max-width: 90%; }
.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:center; }

.fieldcard { background:#fff; border:1px solid var(--l-border2); border-radius: 12px; padding: 15px; display:flex; flex-direction:column; gap: 11px; }
/* two short fields share a row (name + role); collapses to one column when the card is narrow */
.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; } /* "(optional)" label suffix (de-inlined for CSP) */
.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 { 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__rag { width: 30px; height:30px; border-radius: 8px; flex:none; display:grid; place-items:center; font-weight:800; font-size: 14px; color:#fff; }
/* fill applies whether data-rag is on a .choice ancestor (questions) or on the badge itself
   (review-step toggles) - without the self-targeting rules the review glyphs were white-on-grey */
.choice[data-rag="R"] .choice__rag, .choice__rag[data-rag="R"] { background: var(--hi-acc); }
.choice[data-rag="A"] .choice__rag, .choice__rag[data-rag="A"] { background: var(--me-acc); }
.choice[data-rag="G"] .choice__rag, .choice__rag[data-rag="G"] { background: var(--lo-acc); }
.choice__txt b { display:block; font-size: 15px; }
.choice__txt small { color: var(--l-mut); font-size: 12.5px; }

.benbtns { display:flex; gap:10px; flex-wrap:wrap; margin-top: 4px; }
/* review-step R/A/G toggles: inactive dimmed, selected carries a ring (a non-colour cue) + opacity */
.benbtns .choice__rag { opacity: .42; transition: opacity .12s, box-shadow .12s; }
.benbtns .choice__rag.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p-500); }
/* de-inlined for CSP (no 'unsafe-inline'): review-row layout + generate button spacing */
.hcell--sb { justify-content: space-between; }
#gen-go { margin-top: 14px; }
.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; }
.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: 12px; }
.heat__head h2 { font-size: 15px; margin:0; }
.heat__head .sub { font-size: 12px; color: var(--l-faint); }
.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; }
.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); }

/* live region announcement */
.heat__live { position:absolute; }

/* ---------- 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; align-items:center; gap:10px; }
.preview-bar .pb__title small { display:block; 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); }
.docframe { background:#fff; border:1px solid var(--l-border); border-radius: 12px; margin-top: 16px; 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: 70vh; overflow-y: auto; }

/* roadmap doc styling (preview render) */
.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: 18px; }
.rm-cover__title { font-size: 1.5rem; color: var(--p-700); letter-spacing: .02em; }
.rm-cover__subtitle { color: var(--l-mut); max-width: 540px; margin: 6px auto 16px; font-size: 13px; }
.rm-cover__submit { font-size: 13px; color: var(--l-ink); margin-bottom: 16px; }
.rm-sec { margin: 22px 0; }
.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-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-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: 560px; }
.gapcell-domain { background:#faf8fd; font-weight:600; }
.gaprow--hi td, .gaprow--hi th { } .gapcell--hi { background: var(--hi-fill); } .gapcell--me { background: var(--me-fill); } .gapcell--lo { background: var(--lo-fill); }
.sev { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:11.5px; white-space:nowrap; }
.sev__glyph { font-size: 10px; }
.sev--high { color: var(--hi-acc);} .sev--med { color: var(--me-acc);} .sev--low { color: var(--lo-acc);}
.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); }
.rm-signoff { display:flex; gap: 30px; flex-wrap:wrap; margin: 24px 0 14px; font-size: 13px; }
.rm-sign { flex:1; min-width: 220px; } .rm-sign__line { border-top:1px solid var(--l-ink); margin-bottom: 6px; }

/* ---------- 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 .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 Ben ---------- */
.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 / errors ---------- */
.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);} }

/* ---------- 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__tag { font-family: var(--mono); letter-spacing:.18em; text-transform: uppercase; font-size: 11px; color: var(--d-faint); margin-top: 14px; }
.poweredby { display:inline-flex; align-items:center; gap:7px; margin-top: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(199,125,255,.10); border:1px solid rgba(199,125,255,.28); color: var(--lav); text-decoration:none; font-size: 13px; transition: background .15s, border-color .15s; }
.poweredby:hover { background: rgba(199,125,255,.18); border-color: rgba(199,125,255,.5); }
.poweredby strong { color: #fff; font-weight: 700; }
.poweredby svg { color: var(--lav); }
.foot small { color: var(--d-faint); font-size: 12px; }

/* generating overlay */
.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; }

.bookform > h3 { margin-top: 0; } /* de-inlined for CSP */

/* privacy.html document (moved out of an inline <style> so style-src can drop 'unsafe-inline') */
.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; } }