/* ============================================================
   RiskMind — Public site (riskmind.net)
   Brand per Site Spec v2: monochrome-led, single bronze accent,
   IBM Plex Sans body · Archivo display · IBM Plex Mono data.
   Overrides tokens.css brand vars; reuses styleguide.css + landing.css.
   ============================================================ */

:root, [data-mode="light"] {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Archivo", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;

  /* Slate — cool, neutral grays */
  --bg:            #F5F6F8;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBFC;
  --surface-sunken:#EFF1F4;
  --ink:           #14171C;
  --ink-strong:    #05070A;
  --ink-muted:     #565C66;
  --ink-faint:     #8A909B;
  --line:          #E5E7EB;
  --line-strong:   #D3D6DC;
  --line-faint:    #EFF0F3;

  /* single restrained cobalt accent */
  --accent:        #2D5BD6;
  --accent-strong: #2247AE;
  --accent-soft:   #EAF0FD;
  --accent-line:   #C5D6F7;
  --accent-ink:    #FFFFFF;
  --focus-ring:    rgba(45,91,214,.34);

  --nav-bg:    #0B0D11;
  --nav-bg-2:  #151921;
  --nav-ink:   #E7E9ED;
  --nav-ink-muted: #8A909B;
  --nav-line:  rgba(255,255,255,0.08);
  --logo-invert: 0;
  --nav-logo-invert: 1;
}

[data-mode="dark"] {
  --bg:            #0A0C0F;
  --surface:       #14171C;
  --surface-2:     #181C22;
  --surface-sunken:#0E1015;
  --ink:           #F2F4F7;
  --ink-strong:    #FFFFFF;
  --ink-muted:     #9BA2AD;
  --ink-faint:     #6A7079;
  --line:          #262B33;
  --line-strong:   #353B45;
  --line-faint:    #1D2128;

  --accent:        #6A92F2;
  --accent-strong: #87A8F6;
  --accent-soft:   rgba(106,146,242,.16);
  --accent-line:   rgba(106,146,242,.4);
  --accent-ink:    #0A0C0F;
  --focus-ring:    rgba(106,146,242,.45);

  --nav-bg:    #050608;
  --nav-bg-2:  #0E1116;
  --logo-invert: 1;
  --nav-logo-invert: 1;
}

/* ---------- i18n visibility ---------- */
[data-locale="en"] .l-es { display: none !important; }
[data-locale="es"] .l-en { display: none !important; }

/* ---------- locale toggle ---------- */
.loc-toggle { display:inline-flex; align-items:center; border:1px solid var(--line-strong);
  border-radius: var(--radius-pill); overflow:hidden; background: var(--surface); }
.loc-toggle button { border:0; background:transparent; cursor:pointer; padding:6px 11px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing:0.12em; color: var(--ink-muted); }
.loc-toggle button[aria-pressed="true"] { background: var(--ink-strong); color: var(--bg); }

/* ---------- hero refinement ---------- */
.lp-hero h1 { max-width: 19ch; }
.site-hero__brain { position:absolute; inset:0; z-index:-1; display:grid; place-items:center; pointer-events:none; overflow:hidden; }
.site-hero__brain img { width: min(900px, 120%); opacity: .05; filter: invert(var(--logo-invert)); transform: translateY(-6%); }

/* ---------- "Why now" editorial statement ---------- */
.site-statement { max-width: 900px; margin: 0 auto; text-align:center; }
.site-statement .lp-h2 { margin-bottom: var(--space-5); }
.site-statement p { font-size: clamp(1.1rem, 2.1vw, var(--text-xl)); line-height: var(--leading-relaxed);
  color: var(--ink-muted); text-wrap: pretty; }
.site-statement p b { color: var(--ink-strong); font-weight: 600; }
.site-kicker { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  color: var(--ink-strong); }

/* ---------- capability list (refined cards w/ index) ---------- */
.cap-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
@media (max-width: 900px){ .cap-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .cap-grid{ grid-template-columns: 1fr;} }
.cap { border:1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--space-6); position:relative; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2), border-color var(--dur-2); }
.cap:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); }
.cap__n { position:absolute; top: var(--space-5); right: var(--space-5); font-family: var(--font-mono);
  font-size: var(--text-2xs); color: var(--ink-faint); }
.cap__ic { width: 40px; height: 40px; border-radius: var(--radius-md); display:grid; place-items:center;
  border:1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); margin-bottom: var(--space-4); }
[data-mode="dark"] .cap__ic { color: var(--accent); }
.cap__ic svg { width: 20px; height: 20px; }
.cap h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: var(--text-lg); color: var(--ink-strong); margin-bottom: var(--space-2); }
.cap p { color: var(--ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* ---------- reasons (why riskmind) ---------- */
.reasons { display:grid; gap: 0; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; background: var(--surface); }
.reason { display:grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding: var(--space-6);
  border-bottom: 1px solid var(--line-faint); }
.reason:last-child { border-bottom:0; }
.reason__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); padding-top: 4px; }
[data-mode="dark"] .reason__n { color: var(--accent); }
.reason h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: var(--text-xl); color: var(--ink-strong); margin-bottom: var(--space-2); }
.reason p { color: var(--ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 64ch; }

/* ---------- deploy tiers ---------- */
.deploy { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
@media (max-width: 760px){ .deploy{ grid-template-columns:1fr; } }
.deploy__card { border:1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface); }
.deploy__card--feature { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 60%); }
.deploy__tag { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-3); }
.deploy__card--feature .deploy__tag { color: var(--accent-strong); }
[data-mode="dark"] .deploy__card--feature .deploy__tag { color: var(--accent); }
.deploy h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: var(--text-lg); color: var(--ink-strong); margin-bottom: var(--space-2); }
.deploy p { color: var(--ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* ---------- security FAQ accordion ---------- */
.faq { border-top: 1px solid var(--nav-line); }
.faq details { border-bottom: 1px solid var(--nav-line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-5) 0; display:flex; align-items:flex-start; gap: var(--space-4);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: #fff; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .q { flex:1; }
.faq summary .pm { width: 22px; height:22px; flex-shrink:0; position:relative; margin-top:3px; }
.faq summary .pm::before, .faq summary .pm::after { content:""; position:absolute; background: var(--accent); border-radius: 2px; transition: transform var(--dur-2) var(--ease); }
.faq summary .pm::before { top:10px; left:2px; right:2px; height:2px; }
.faq summary .pm::after { left:10px; top:2px; bottom:2px; width:2px; }
.faq details[open] summary .pm::after { transform: scaleY(0); }
.faq__a { padding: 0 0 var(--space-5) calc(var(--space-4) + 22px); }
.faq__a p { color: var(--nav-ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 70ch; }
.faq__a .spec { display:inline-block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.04em; color: var(--accent); background: rgba(198,163,92,.12); border:1px solid var(--accent-line);
  padding: 4px 10px; border-radius: var(--radius-pill); }
.faq__a em { color: #e8e2d4; font-style: italic; }

/* ---------- cautionary quote ---------- */
.caution { max-width: 820px; margin: 0 auto; text-align:center; }
.caution p { font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.3rem, 3vw, var(--text-2xl)); line-height: var(--leading-snug); color: var(--ink-strong); text-wrap: balance; }
.caution .mark { color: var(--accent); font-size: var(--text-4xl); font-style: normal; display:block; margin-bottom: var(--space-3); font-family: var(--font-display); }

/* ---------- pricing band ---------- */
.price-band { text-align:center; }

/* ============================================================
   MODAL (pricing) — generic overlay
   ============================================================ */
.rm-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.rm-modal[data-open="true"] { display: block; }
.rm-modal__scrim { position:absolute; inset:0; background: var(--overlay); backdrop-filter: blur(3px); }
.rm-modal__panel { position: relative; width: min(560px, 92%); margin: 8vh auto 0; max-height: 84vh; overflow:auto;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.rm-modal__body { padding: var(--space-7); }
.rm-modal__close { position:absolute; top: var(--space-4); right: var(--space-4); }
.rm-modal h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: var(--text-2xl); color: var(--ink-strong); margin-bottom: var(--space-3); max-width: 22ch; }
.rm-modal__lede { color: var(--ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.rm-modal__lede b { color: var(--ink-strong); font-weight: 600; }
.rm-modal__q { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); margin: var(--space-6) 0 var(--space-3); }
.door { border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-3);
  cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); }
.door:hover { border-color: var(--accent); }
.door[data-active="true"] { border-color: var(--accent); background: var(--accent-soft); }
.door__t { font-weight: 600; color: var(--ink-strong); display:flex; align-items:center; gap: var(--space-2); }
.door__d { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 4px; }
.door__body { margin-top: var(--space-4); display:none; }
.door[data-active="true"] .door__body { display:block; }
.bands { display:flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.band-opt { font-family: var(--font-mono); font-size: var(--text-xs); padding: 7px 12px; border-radius: var(--radius-pill);
  border:1px solid var(--line-strong); background: var(--surface); color: var(--ink-muted); cursor:pointer; }
.band-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
[data-mode="dark"] .band-opt[aria-pressed="true"] { color: var(--accent); }
.rm-input { width:100%; border:1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 11px 14px; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); }
.rm-input:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.rm-foot-note { color: var(--ink-faint); font-size: var(--text-sm); margin-top: var(--space-4); }
.field-row { display:flex; gap: var(--space-2); margin-top: var(--space-2); }
.field-row .rm-input { flex:1; }

/* ============================================================
   ASSESSMENT engine
   ============================================================ */
.assess { border:1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface);
  box-shadow: var(--shadow-md); overflow:hidden; max-width: 760px; margin: 0 auto; }
.assess__bar { height: 4px; background: var(--surface-sunken); }
.assess__bar > i { display:block; height:100%; background: var(--accent); width: 0; transition: width var(--dur-3) var(--ease); }
.assess__in { padding: var(--space-7); }
.assess__meta { display:flex; justify-content: space-between; align-items:center; margin-bottom: var(--space-5); }
.assess__step { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); }
.assess__q { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(1.3rem, 2.6vw, var(--text-2xl)); color: var(--ink-strong); line-height: var(--leading-snug); margin-bottom: var(--space-5); text-wrap: balance; }
.assess__opts { display:grid; gap: var(--space-3); }
.opt { display:flex; align-items:center; gap: var(--space-3); width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
  padding: var(--space-4) var(--space-5); font-family: var(--font-sans); font-size: var(--text-md); color: var(--ink);
  transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1); }
.opt:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px); }
.opt .dot { width: 16px; height:16px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0; }
.opt:hover .dot { border-color: var(--accent); }
.assess__nav { display:flex; justify-content: space-between; align-items:center; margin-top: var(--space-6); }

/* result */
.result__band { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; display:inline-flex; align-items:center; gap:7px; padding: 5px 12px; border-radius: var(--radius-pill); }
.result__band--high { background: var(--crit-soft); color: var(--crit-ink); }
.result__band--partial { background: var(--warn-soft); color: var(--warn-ink); }
.result__band--strong { background: var(--ok-soft); color: var(--ok-ink); }
[data-mode="dark"] .result__band { color: var(--ink); }
.result__score { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(3.5rem, 9vw, 6rem); color: var(--ink-strong); margin: var(--space-4) 0; }
.result__score span { font-size: .26em; color: var(--ink-faint); font-weight: 500; }
.gap-list { display:grid; gap: var(--space-3); margin: var(--space-5) 0; }
.gap { display:grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items:center;
  padding: var(--space-4); border:1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.gap__name { font-weight: 600; color: var(--ink-strong); font-size: var(--text-base); }
.gap__fix { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 2px; }
.gate { text-align:center; padding: var(--space-3) 0; }
.blur-lock { filter: blur(7px); opacity:.5; pointer-events:none; user-select:none; }
.gate-card { border:1px dashed var(--accent-line); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--accent-soft); text-align:center; margin-top: var(--space-5); }
[data-mode="dark"] .gate-card { background: var(--accent-soft); }

/* --- CTA accent buttons: always legible white text on a solid cobalt fill,
   in both light and dark mode (dark-mode --accent-ink was near-black). --- */
.btn--accent { color: #fff; }
[data-mode="dark"] .btn--accent { background: #2D5BD6; color: #fff; }
[data-mode="dark"] .btn--accent:hover { background: #2247AE; }