/* System Snapshot result page. Matched to the real Bloomwired homepage: the
   "leak report" layout — 2px ink rules top and bottom, findings as rows with
   1px dividers — near-square corners (3/4/6px only), crisp dark borders, mono
   eyebrows with a dash mark, dark near-black buttons, left-accent panels.
   Visual only — no content changes.

   Fonts: self-hosted (latin subset) below — no runtime Google Fonts import.
   System serif/sans/mono kept as fallbacks while the woff2 loads. */

/* Self-hosted fonts (latin subset). Served from /fonts. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-400-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-sans-400-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/instrument-sans-500-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/instrument-sans-600-normal-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-normal-latin.woff2') format('woff2');}

:root {
  --bw-ink: #14141c;
  --bw-ink-soft: #1e1e2a;
  --bw-body: #3a3545;
  --bw-muted: #8a8194;
  --bw-line: #ede8eb;
  --bw-line-strong: #d8d2d6;
  --bw-bg: #f7f3f6;
  --bw-bg-warm: #faf6f8;
  --bw-paper: #ffffff;
  --bw-mauve: #b48ead;
  --bw-mauve-deep: #8e6a87;
  --bw-mauve-ink: #5e3e58;
  --bw-blush: #e8c4d4;
  --bw-blush-soft: #f4dde6;
  --bw-blush-bg: #fbeef3;
  --bw-red: #b14a4a;
  --bw-red-deep: #8a3838;
  --bw-red-bg: #f5e3e3;

  /* Status colors — one meaning each: green = good, amber = worth a look,
     grey = couldn't tell. Mauve stays the BRAND accent, never a status. */
  --good: #4f8a68;
  --good-ink: #3a6f51;
  --gap: #cf9a4a;
  --gap-ink: #93631f;

  --font-h: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-b: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-m: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-b);
  color: var(--bw-body);
  background: var(--bw-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 700px; margin: 0 auto; padding: 64px 28px 120px; }

/* mono eyebrow with a 24px ink dash before it (section labels) */
.kick {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-m); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bw-ink);
  margin: 0 0 16px;
}
.kick::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--bw-ink); flex: none; }

/* ---- intro / scan bar ---- */
.intro { margin-bottom: 52px; }
.intro .kick::before { width: 8px; height: 8px; border-radius: 50%; background: var(--bw-mauve); }
.intro h1 {
  font-family: var(--font-h); font-weight: 400; color: var(--bw-ink);
  font-size: 62px; line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 16px;
}
.intro h1 em { font-style: italic; color: var(--bw-mauve-deep); }
.sub { color: var(--bw-body); font-size: 18px; max-width: 500px; margin: 0 0 28px; }

.scan-form { display: flex; gap: 10px; max-width: 520px; }
.scan-form input {
  flex: 1; padding: 15px 16px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--bw-line-strong); border-radius: 4px; background: var(--bw-paper);
  color: var(--bw-ink); outline: none; transition: border-color 0.2s var(--ease);
}
.scan-form input:focus { border-color: var(--bw-mauve); }

/* dark near-black buttons, near-square */
.btn {
  display: inline-block; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 500; padding: 16px 32px; border-radius: 4px;
  background: var(--bw-ink); color: #fff; border: 1px solid var(--bw-ink);
  text-decoration: none; transition: background 0.18s var(--ease); white-space: nowrap;
}
.btn:hover { background: var(--bw-ink-soft); }
.btn:active { transform: translateY(1px); }
.btn-dark, .btn-primary { background: var(--bw-ink); color: #fff; border-color: var(--bw-ink); }
/* ghost = secondary action (the Setup Check door, subordinate to the gate) */
.btn-ghost { background: transparent; color: var(--bw-ink); border: 1px solid var(--bw-ink); }
.btn-ghost:hover { background: var(--bw-ink); color: #fff; }

/* ---- scanning state: monospace system panel ---- */
.scanning {
  margin: 34px 0; padding: 22px 24px; border: 1px solid var(--bw-ink);
  border-left: 3px solid var(--bw-mauve-deep); border-radius: 6px; background: var(--bw-paper);
  font-family: var(--font-m); font-size: 14.5px; color: var(--bw-ink-soft);
}
.scanning .caret { display: inline-block; width: 8px; background: var(--bw-mauve-deep); margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- result ---- */
.result-inner { animation: rise 0.5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.headline { margin: 6px 0 16px; }
.headline h2 {
  font-family: var(--font-h); font-weight: 400; color: var(--bw-ink);
  font-size: 42px; line-height: 1.06; letter-spacing: -0.018em; margin: 0 0 18px; max-width: 600px;
}
.headline h2 em { font-style: italic; color: var(--bw-mauve-deep); }
.framing { color: var(--bw-body); font-size: 17px; line-height: 1.5; max-width: 560px; margin: 0; }

/* Score meter — the at-a-glance verdict. One segment per scorable check:
   filled = good (mauve), open = a gap (calm amber). Mirrors "X of Y" exactly. */
.meter { display: flex; gap: 5px; margin: 0 0 10px; max-width: 440px; }
.meter .seg { flex: 1; height: 11px; border-radius: 2px; background: var(--bw-line-strong); }
.meter .seg.good { background: var(--good); }
.meter .seg.gap { background: var(--gap); }
/* legend so the colors are unambiguous at a glance */
.meter-legend { display: flex; gap: 18px; margin: 0 0 18px; font-family: var(--font-m); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bw-muted); }
.meter-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.meter-legend .lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.meter-legend .lg.good::before { background: var(--good); }
.meter-legend .lg.gap::before { background: var(--gap); }

.readout { margin-top: 36px; }
.readout-group { margin-bottom: 28px; }

/* THE leak-report pattern: 2px ink top + bottom, 1px line dividers between rows */
.report { border-top: 2px solid var(--bw-ink); border-bottom: 2px solid var(--bw-ink); }
.report-light { border-top: 1px solid var(--bw-ink); border-bottom: 1px solid var(--bw-ink); }

.row { padding: 15px 2px; border-top: 1px solid var(--bw-line); }
.row:first-child { border-top: none; }
.row-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 7px;
}
/* icon in a small near-square tinted chip — adds presence without a card fill */
.row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px; flex: none;
}
.row-icon svg { width: 15px; height: 15px; }
.row-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bw-ink); }

.state-good .row-status { color: var(--good-ink); }
.state-good .row-icon { background: rgba(79, 138, 104, 0.14); color: var(--good-ink); }
.state-gap .row-status { color: var(--gap-ink); }
.state-gap .row-icon { background: rgba(207, 154, 74, 0.18); color: var(--gap-ink); }
.state-neutral .row-status { color: var(--bw-muted); }
.state-neutral .row-icon { background: rgba(138, 129, 148, 0.15); color: var(--bw-muted); }

/* low-weight texture: two-column grid to cut the scroll, framed top/bottom */
.report-light {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px;
}
.report-light .row { border-top: none; padding: 11px 2px; }
.row-sm .row-status { font-size: 11.5px; margin-bottom: 5px; }
.row-sm .row-icon { width: 22px; height: 22px; }
.row-sm .row-icon svg { width: 14px; height: 14px; }
.row-sm .row-text { font-size: 14.5px; color: var(--bw-ink-soft); }

/* ---- door one: setup check — secondary "or just talk" strip, lighter than
   the gate so the email capture clearly reads as the primary action ---- */
.door {
  margin-top: 36px; padding: 22px 0 4px;
  border-top: 1px solid var(--bw-line); background: none;
}
.door p { margin: 6px 0 16px; color: var(--bw-body); font-size: 16px; line-height: 1.5; max-width: 520px; }

/* ---- the gate (locked): dark panel, mauve left accent, readable ---- */
.gate {
  margin-top: 40px; padding: 30px 30px; border-radius: 6px;
  background: var(--bw-ink); color: #efeaf3; border: 1px solid var(--bw-ink); border-left: 3px solid var(--bw-mauve);
}
.gate .kick { color: #fff; }
.gate .kick::before { background: #fff; }
.gate h3 {
  font-family: var(--font-h); font-weight: 400; font-size: 33px; line-height: 1.08;
  margin: 0 0 14px; color: #fff; letter-spacing: -0.01em;
}
.gate h3 em { font-style: italic; color: var(--bw-blush); }
.gate-pitch { color: #cfc6da; font-size: 16px; line-height: 1.5; margin: 0 0 20px; max-width: 520px; }
.gate .btn { background: #fff; color: var(--bw-ink); border-color: #fff; }
.gate .btn:hover { background: var(--bw-blush-soft); }

.locked-list { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.locked-row { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.locked-row h4 {
  margin: 0 0 7px; font-family: var(--font-m); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: #f0d9e6;
}
.locked-row .blurred { margin: 0; font-size: 15px; line-height: 1.5; color: #cfc6da; filter: blur(4px); user-select: none; pointer-events: none; }
.locked-row.revealed p { margin: 0; font-size: 15px; line-height: 1.55; color: #dcd4e6; }

.gate-form { display: flex; gap: 10px; max-width: 460px; }
.gate-form input {
  flex: 1; padding: 14px 15px; font-size: 15px; font-family: inherit;
  border: 1px solid #44404f; border-radius: 4px; background: #2a2836; color: #fff; outline: none;
}
.gate-form input::placeholder { color: #8a8298; }
.gate-form input:focus { border-color: var(--bw-mauve); }

/* blocked variant gate sits on light ground: paper panel, dark button */
.gate-primary {
  background: var(--bw-paper); color: var(--bw-body);
  border: 1px solid var(--bw-ink); border-left: 3px solid var(--bw-mauve-deep);
}
.gate-primary .kick { color: var(--bw-ink); }
.gate-primary .kick::before { background: var(--bw-ink); }
.gate-primary h3 { color: var(--bw-ink); }
.gate-primary h3 em { color: var(--bw-mauve-deep); }
.gate-primary .gate-pitch { color: var(--bw-body); }
.gate-primary .btn { background: var(--bw-ink); color: #fff; border-color: var(--bw-ink); }
.gate-primary .gate-form input { background: var(--bw-bg); border-color: var(--bw-line-strong); color: var(--bw-ink); }
.gate-primary .gate-form input::placeholder { color: var(--bw-muted); }

.revealed-gate { animation: rise 0.45s var(--ease) both; }
.revealed-gate .btn { margin-top: 6px; }

.secondary-link { margin: 20px 0 0; font-size: 14.5px; }
.secondary-link a { color: var(--bw-mauve-deep); }

.error { color: var(--bw-red-deep); padding: 24px 0; font-size: 16px; }

/* ---- quiz (self-report fallback) ---- */
.quiz { animation: rise 0.5s var(--ease) both; }
.quiz-title {
  font-family: var(--font-h); font-weight: 400; color: var(--bw-ink);
  font-size: 42px; line-height: 1.04; letter-spacing: -0.018em; margin: 0 0 14px;
}
.quiz-title em { font-style: italic; color: var(--bw-mauve-deep); }
.quiz-lead { color: var(--bw-body); font-size: 17px; line-height: 1.55; max-width: 540px; margin: 0 0 40px; }

.quiz-form { display: flex; flex-direction: column; gap: 34px; }
.quiz-q { border: none; padding: 0; margin: 0; min-width: 0; }
.quiz-legend {
  display: flex; gap: 10px; align-items: baseline; padding: 0; margin: 0 0 14px;
  font-size: 17px; font-weight: 600; color: var(--bw-ink); line-height: 1.45;
}
.quiz-num { font-family: var(--font-m); font-size: 13px; color: var(--bw-mauve-deep); flex: none; }
.quiz-optional { color: var(--bw-muted); font-weight: 400; font-size: 14px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  width: 100%; text-align: left; font-family: inherit; font-size: 16px; color: var(--bw-ink);
  background: var(--bw-paper); border: 1px solid var(--bw-line-strong); border-radius: 4px;
  padding: 14px 16px; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.quiz-option:hover { border-color: var(--bw-mauve); }
.quiz-option.selected {
  border: 1px solid var(--bw-ink); border-left: 3px solid var(--bw-mauve-deep);
  background: var(--bw-blush-bg); font-weight: 500;
}
.quiz-missing .quiz-legend { color: var(--bw-red-deep); }
.quiz-missing .quiz-option { border-color: var(--bw-red); }
#quiz-submit { align-self: flex-start; margin-top: 8px; }

@media (max-width: 560px) {
  .wrap { padding: 48px 20px 90px; }
  .intro h1 { font-size: 46px; }
  .headline h2 { font-size: 33px; }
  .scan-form, .gate-form { flex-direction: column; }
  .report-light { grid-template-columns: 1fr; column-gap: 0; }
}