/* AI Threat Spectrum — DivergeIT brand */

:root{
  /* DivergeIT primary palette (sampled from logo) */
  --di-red: #D7261E;
  --di-red-deep: #A81913;
  --di-yellow: #F5C518;
  --di-yellow-deep: #C99A0A;
  --di-green: #1F8A3C;
  --di-green-deep: #126628;
  --di-black: #0E0E0E;
  --di-ink: #141414;
  --di-ink-2: #2B2B2B;
  --di-paper: #FAFAF7;
  --di-paper-2: #F1EFE9;
  --di-line: #DCD8CE;
  --di-mute: #6E6A60;
  --di-mute-2: #9B9689;

  /* SEMANTIC threat colors — fixed, never re-mapped by accent tweak */
  --threat-red:    #D7261E;
  --threat-orange: #E8771A;
  --threat-yellow: #F5C518;
  --threat-yellow-deep: #C99A0A;
  --threat-green:  #1F8A3C;
  --threat-green-deep: #126628;

  /* stage colors */
  --stage-at-risk: var(--threat-red);
  --stage-exposed: var(--threat-orange);
  --stage-aware:   var(--threat-yellow);
  --stage-governed:var(--threat-green);

  /* type */
  --serif: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--sans);
  background: var(--di-paper);
  color: var(--di-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* App stage — fills viewport with letterboxing on very narrow screens */
.app-stage{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  background: var(--di-paper);
  position: relative;
  overflow: hidden;
}

/* HEADER */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px 56px;
  border-bottom: 1px solid var(--di-line);
  background: var(--di-paper);
  position: sticky;
  top:0;
  z-index: 5;
}
.app-header .brand{
  display:flex; align-items:center; gap:14px;
}
.app-header .brand img{
  height: 28px; width:auto; display:block;
}
.app-header .crumbs{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-mute);
  display:flex; gap:14px; align-items:center;
}
.app-header .crumbs .dot{ width:4px; height:4px; background:var(--di-mute-2); border-radius:50%; display:inline-block; }
.app-header .progress-meta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--di-ink);
  text-transform: uppercase;
}

/* progress bar */
.progress-rail{
  height: 3px;
  background: var(--di-line);
  position: relative;
  overflow: hidden;
}
.progress-fill{
  position:absolute; left:0; top:0; bottom:0;
  background: linear-gradient(90deg, var(--threat-red) 0%, var(--threat-red) 25%, var(--threat-orange) 40%, var(--threat-yellow) 60%, var(--threat-green) 100%);
  transition: width 480ms cubic-bezier(.65,.05,.36,1);
  width:0%;
}

/* MAIN CONTENT */
.app-main{
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding: 56px;
}
.screen{
  width: 100%;
  max-width: 1180px;
  display:flex;
  flex-direction:column;
}

/* TYPE SCALE */
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--di-mute);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow .tick{ width:18px; height:1px; background:var(--di-mute); }

h1.display{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 18px 0 0;
  color: var(--di-ink);
}
h1.display em{
  font-style: italic;
  font-weight: 400;
  color: var(--di-red);
}
h2.q-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  color: var(--di-ink);
  text-wrap: pretty;
  max-width: 22ch;
}
h3.section{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--di-mute);
  margin: 0 0 10px;
}

.lead{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--di-ink-2);
  font-weight: 400;
  max-width: 60ch;
  text-wrap: pretty;
}
.body{
  font-size: 16px;
  line-height: 1.55;
  color: var(--di-ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 26px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border:none;
  cursor:pointer;
  border-radius: 0;
  transition: all 180ms ease;
  text-decoration:none;
}
.btn-primary{
  background: var(--di-ink);
  color: var(--di-paper);
}
.btn-primary:hover{ background: var(--di-red); }
.btn-ghost{
  background: transparent;
  color: var(--di-ink);
  border: 1px solid var(--di-line);
}
.btn-ghost:hover{ border-color: var(--di-ink); }
.btn .arrow{ transition: transform 180ms ease; }
.btn:hover .arrow{ transform: translateX(4px); }
.btn:disabled{ opacity:0.35; cursor: not-allowed; }
.btn:disabled:hover{ background: var(--di-ink); }

/* INTRO */
.intro-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: stretch;
  flex: 1;
}
.intro-left{ display:flex; flex-direction:column; justify-content:center; }
.intro-meta{
  display:flex; flex-wrap:wrap; gap: 26px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--di-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--di-mute);
}
.intro-meta .item{ display:flex; align-items:center; gap:8px; }
.intro-meta .num{ color: var(--di-red); font-weight:600; }
.intro-actions{ margin-top: 44px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.intro-actions .hint{
  font-family: var(--mono); font-size:11px; letter-spacing: 0.12em;
  color: var(--di-mute); text-transform:uppercase;
}

/* The "spectrum" visual */
.spectrum-card{
  background: var(--di-ink);
  color: var(--di-paper);
  padding: 38px 36px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  position: relative;
  overflow:hidden;
}
.spectrum-card .label-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--di-mute-2);
}
.spectrum-bar{
  height: 18px;
  display:flex;
  margin-top: 28px;
  border: 1px solid #2A2A2A;
}
.spectrum-bar .seg{ flex:1; }
.spectrum-bar .s1{ background: var(--threat-red); }
.spectrum-bar .s2{ background: var(--threat-orange); }
.spectrum-bar .s3{ background: var(--threat-yellow); }
.spectrum-bar .s4{ background: var(--threat-green); }
.spectrum-stages{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 16px;
}
.spectrum-stages .stage{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--di-paper);
  padding: 4px 0;
}
.spectrum-stages .stage .range{
  display:block;
  font-size: 9px;
  color: var(--di-mute-2);
  margin-top: 4px;
}
.spectrum-card .big-stat{
  margin-top: 56px;
}
.spectrum-card .big-stat .num{
  font-family: var(--serif);
  font-size: 96px;
  line-height: 1;
  font-weight: 400;
  color: var(--di-red);
  letter-spacing: -0.03em;
}
.spectrum-card .big-stat .num em{ color: var(--di-yellow); font-style:normal;}
.spectrum-card .big-stat .desc{
  font-size: 13px;
  line-height: 1.5;
  color: #C9C5BA;
  max-width: 36ch;
  margin-top: 14px;
}
.spectrum-card .big-stat .src{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--di-mute-2);
  margin-top: 18px;
}

/* QUESTION SCREEN */
.q-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  flex:1;
  align-items: stretch;
}
.q-left{ display:flex; flex-direction:column; justify-content:flex-start; padding-top: 8px;}
.q-counter{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--di-mute);
  display:flex; align-items:center; gap: 14px;
}
.q-counter .pip-row{ display:flex; gap:6px; }
.q-counter .pip{
  width: 22px; height: 3px; background: var(--di-line);
}
.q-counter .pip.done{ background: var(--di-ink); }
.q-counter .pip.current{ background: var(--di-red); }

.q-meaning{
  margin-top: 38px;
  padding: 26px 0;
  border-top: 1px solid var(--di-line);
  border-bottom: 1px solid var(--di-line);
}

.q-right{ display:flex; flex-direction:column; gap:14px; padding-top: 8px;}
.q-right h3.section{ margin-bottom: 4px; }

.score-card{
  border: 1px solid var(--di-line);
  background: #fff;
  padding: 22px 24px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  cursor: pointer;
  transition: all 180ms ease;
  position: relative;
}
.score-card:hover{
  border-color: var(--di-ink);
  transform: translateX(4px);
}
.score-card.selected{
  border-color: var(--di-ink);
  background: var(--di-ink);
  color: var(--di-paper);
}
.score-card.selected .badge{ background: var(--di-paper); color: var(--di-ink); }
.score-card.selected .label{ color: var(--di-paper); }
.score-card.selected .desc{ color: #C9C5BA; }
.score-card.selected.s-1{ border-color: var(--threat-red); background: var(--threat-red); }
.score-card.selected.s-1 .badge{ background:#fff; color: var(--threat-red);}
.score-card.selected.s-2{ border-color: var(--threat-yellow-deep); background: var(--threat-yellow); color:var(--di-ink);}
.score-card.selected.s-2 .badge{ background:var(--di-ink); color: var(--threat-yellow);}
.score-card.selected.s-2 .label{ color: var(--di-ink); }
.score-card.selected.s-2 .desc{ color: var(--di-ink-2); }
.score-card.selected.s-3{ border-color: var(--threat-green-deep); background: var(--threat-green); color: var(--di-paper);}
.score-card.selected.s-3 .badge{ background:#fff; color: var(--threat-green);}

.score-card .badge{
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  background: var(--di-paper-2);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--di-ink);
}
.score-card .label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-mute);
  display:block;
  margin-bottom: 4px;
}
.score-card .desc{
  font-size: 15px;
  line-height: 1.45;
  color: var(--di-ink-2);
}
.score-card .key{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--di-mute);
  border:1px solid var(--di-line);
  padding: 3px 7px;
}
.score-card.selected .key{ border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); }
.score-card.selected.s-2 .key{ border-color: rgba(0,0,0,0.3); color: rgba(0,0,0,0.7); }

.q-actions{
  margin-top: auto;
  padding-top: 36px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 16px;
}

/* RESULT SCREEN */
.result-screen{ width:100%; max-width: 1240px; }
.result-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
  margin-bottom: 60px;
}
.result-score-card{
  background: var(--di-ink);
  color: var(--di-paper);
  padding: 44px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  position:relative;
  overflow:hidden;
  min-height: 460px;
}
.result-score-card .stage-eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--di-mute-2);
}
.result-score-card .stage-name{
  font-family: var(--serif);
  font-size: 88px;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 12px 0 6px;
}
.result-score-card .stage-name.atrisk{ color: var(--threat-red); }
.result-score-card .stage-name.exposed{ color: #F08641; }
.result-score-card .stage-name.aware{ color: var(--threat-yellow); }
.result-score-card .stage-name.governed{ color: #4DCB66; }

.result-score-card .stage-tagline{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  color: #DDD9CD;
  margin-top: 18px;
  max-width: 30ch;
}

.score-display{
  display:flex; align-items:flex-end; gap: 16px;
  margin-top: 36px;
}
.score-display .total{
  font-family: var(--serif);
  font-size: 140px;
  line-height: 0.85;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--di-paper);
}
.score-display .of{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-mute-2);
  padding-bottom: 14px;
}

/* spectrum visualization on result */
.result-spectrum{
  display:flex; flex-direction:column;
  background: #fff;
  border: 1px solid var(--di-line);
  padding: 36px;
}
.result-spectrum h3.section{ margin-bottom: 22px; }
.spectrum-viz{
  position: relative;
  margin: 16px 0 28px;
  height: 80px;
}
.spectrum-viz .bar{
  position: absolute;
  left:0; right:0; top: 30px;
  height: 18px;
  display:flex;
}
.spectrum-viz .bar .seg{ flex: 1; }
.spectrum-viz .bar .seg.atrisk{ background: var(--threat-red); }
.spectrum-viz .bar .seg.exposed{ background: var(--threat-orange); }
.spectrum-viz .bar .seg.aware{ background: var(--threat-yellow); }
.spectrum-viz .bar .seg.governed{ background: var(--threat-green); }
.spectrum-viz .marker{
  position:absolute;
  top: 0;
  width: 2px; background: var(--di-ink);
  height: 78px;
  transform: translateX(-1px);
  transition: left 1200ms cubic-bezier(.65,.05,.36,1);
}
.spectrum-viz .marker .pin{
  position:absolute; top:-6px; left:-7px;
  width: 16px; height: 16px;
  background: var(--di-ink);
  border-radius: 50%;
  border: 3px solid var(--di-paper);
}
.spectrum-viz .marker .you{
  position:absolute;
  bottom:-2px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-ink);
  background: var(--di-paper);
  padding: 2px 6px;
  white-space: nowrap;
}
.spectrum-labels{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.spectrum-labels .stage{
  text-align: left;
  padding-right: 12px;
}
.spectrum-labels .stage .name{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-ink);
  display:block;
}
.spectrum-labels .stage .range{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--di-mute);
  margin-top: 2px;
  display:block;
}
.spectrum-labels .stage .gloss{
  display:block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--di-ink-2);
}
.spectrum-labels .stage.you .name{ color: var(--threat-red); font-weight:600; }

.score-breakdown{
  display:flex; flex-direction:column; gap: 8px;
  margin-top: 16px;
}
.score-row{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--di-line);
  align-items: center;
  font-size: 14px;
}
.score-row:first-child{ border-top: none; }
.score-row .num{
  font-family: var(--mono); font-size: 11px; color: var(--di-mute);
}
.score-row .q{ color: var(--di-ink-2); }
.score-row .pts{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.score-row.s-1 .pts{ color: var(--threat-red); }
.score-row.s-2 .pts{ color: var(--threat-yellow-deep); }
.score-row.s-3 .pts{ color: var(--threat-green); }
.score-row .pts em{
  font-style:normal; font-family: var(--mono);
  font-size: 11px; color: var(--di-mute);
  margin-left: 2px;
}

/* Actions section */
.actions-section{ margin-top: 80px; }
.actions-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 32px; gap: 30px;
}
.actions-header h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
  max-width: 22ch;
}
.actions-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.action-card{
  background: #fff;
  border: 1px solid var(--di-line);
  padding: 36px 30px;
  display:flex; flex-direction:column;
  position: relative;
  transition: all 220ms ease;
}
.action-card:hover{ border-color: var(--di-ink); }
.action-card .num{
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--di-red);
}
.action-card.targeted .num{ color: var(--di-red); }
.action-card.targeted{
  background: var(--di-ink); color: var(--di-paper);
  border-color: var(--di-ink);
}
.action-card.targeted .num{ color: var(--di-yellow); }
.action-card.targeted .label{ color: var(--di-mute-2); }
.action-card.targeted .copy{ color: #C9C5BA; }
.action-card.targeted h4{ color: var(--di-paper); }

.action-card .targeted-flag{
  position:absolute;
  top: 24px; right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--di-yellow);
  display:flex; align-items:center; gap: 6px;
}
.action-card .targeted-flag .dot{
  width: 6px; height: 6px; background: var(--di-yellow); border-radius:50%;
  box-shadow: 0 0 0 4px rgba(245,197,24,0.18);
}
.action-card h4{
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 18px 0 24px;
  color: var(--di-ink);
  text-wrap: pretty;
}
.action-card .block{
  margin-top: 16px;
}
.action-card .label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-mute);
  display:block; margin-bottom: 6px;
}
.action-card .copy{
  font-size: 14px;
  line-height: 1.5;
  color: var(--di-ink-2);
}
.action-card .first-move{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--di-line);
}
.action-card.targeted .first-move{ border-top-color: rgba(255,255,255,0.15);}
.action-card .first-move .copy{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
}

/* Result CTA strip */
.result-cta{
  margin-top: 64px;
  padding: 36px 40px;
  background: var(--di-paper-2);
  border: 1px solid var(--di-line);
  display:flex; align-items:center; justify-content:space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.result-cta .text{ flex:1 1 300px;}
.result-cta h3{
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  line-height: 1.1;
}
.result-cta p{
  font-size: 14px;
  color: var(--di-mute);
  margin: 0;
}
.result-cta .actions{ display:flex; gap: 12px; flex-wrap:wrap;}

/* SHADOW AI strip on intro */
.shadow-strip{
  margin-top: 14px;
  padding: 10px 14px;
  display:inline-flex;
  align-items:center; gap:12px;
  background: rgba(215,38,30,0.06);
  border-left: 3px solid var(--di-red);
}
.shadow-strip .pct{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--di-red);
  letter-spacing: -0.01em;
}
.shadow-strip .note{
  font-size: 12px;
  color: var(--di-ink-2);
}

/* keyboard hint */
.kbd-hint{
  position:fixed;
  bottom: 20px;
  left: 56px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--di-mute);
  display:flex; gap: 16px; align-items:center;
  z-index: 4;
  pointer-events:none;
}
.kbd-hint .key{
  border:1px solid var(--di-line);
  padding: 3px 7px;
  background: var(--di-paper);
  margin-right: 4px;
}

/* Animations */
@keyframes fadeUp {
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}
.anim-fade-up{ animation: fadeUp 520ms cubic-bezier(.2,.7,.2,1) both; }
.stagger-1{ animation-delay: 60ms; }
.stagger-2{ animation-delay: 140ms; }
.stagger-3{ animation-delay: 220ms; }
.stagger-4{ animation-delay: 300ms; }
.stagger-5{ animation-delay: 380ms; }

@keyframes scoreCount {
  from{ opacity: 0; transform: scale(0.92);}
  to{ opacity:1; transform: scale(1);}
}
.score-display .total{ animation: scoreCount 700ms cubic-bezier(.2,.7,.2,1) both; }

/* ============ EMAIL GATE ============ */
.gate-overlay{
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 32px;
  animation: fadeUp 280ms ease both;
}
.gate-card{
  background: var(--di-paper);
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--di-line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  max-height: calc(100vh - 64px);
  overflow: auto;
}
.gate-left{
  background: var(--di-ink);
  color: var(--di-paper);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gate-left .eyebrow{ color: var(--di-mute-2); }
.gate-left .eyebrow .tick{ background: var(--di-mute-2); }
.gate-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
  color: var(--di-paper);
  text-wrap: pretty;
}
.gate-title em{ font-style: italic; font-weight: 400; color: var(--threat-red); }
.gate-lead{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: #DDD9CD;
  margin: 0 0 22px;
}
.gate-bullets{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.gate-bullets li{
  font-size: 13px;
  line-height: 1.45;
  color: #C9C5BA;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gate-bullets li .dot{
  flex: 0 0 6px;
  width: 6px; height: 6px;
  background: var(--threat-green);
  border-radius: 50%;
  margin-top: 7px;
}

.gate-form{
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gate-field{ display: flex; flex-direction: column; gap: 6px; }
.gate-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-mute);
}
.gate-label em{ font-style: normal; color: var(--threat-red); margin-left: 2px;}
.gate-opt{
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--di-mute-2);
  text-transform: none;
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.gate-form input[type="text"],
.gate-form input[type="email"]{
  background: #fff;
  border: 1px solid var(--di-line);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--di-ink);
  border-radius: 0;
  transition: border-color 160ms ease;
}
.gate-form input:focus{
  outline: none;
  border-color: var(--di-ink);
}
.gate-form input.invalid{
  border-color: var(--threat-red);
}
.gate-err{
  font-size: 11px;
  color: var(--threat-red);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.gate-consent{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--di-ink-2);
  margin-top: 4px;
}
.gate-consent input{
  margin-top: 3px;
  accent-color: var(--di-ink);
  flex: 0 0 auto;
}
.gate-consent a{ color: var(--di-ink); text-decoration: underline; }
.gate-actions{
  display: flex; align-items: center; gap: 16px;
  margin-top: 8px;
}
.gate-back{
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-mute);
  cursor: pointer;
  padding: 8px;
}
.gate-back:hover{ color: var(--di-ink); }

@media (max-width: 820px){
  .gate-card{ grid-template-columns: 1fr; }
  .gate-left{ padding: 28px; }
  .gate-form{ padding: 28px; }
  .gate-title{ font-size: 30px; }
}

/* Responsive — letterboxing-ish behaviour: keep working below 980 */
@media (max-width: 980px){
  .app-header{ padding: 18px 24px;}
  .app-main{ padding: 28px 24px;}
  .intro-grid, .q-grid, .result-hero{ grid-template-columns: 1fr; gap: 36px;}
  .actions-grid{ grid-template-columns: 1fr; }
  .kbd-hint{ display:none; }
  .spectrum-card{ padding: 28px;}
}

/* ============ MOBILE / TABLET ============ */
/* Small tablet & large phone */
@media (max-width: 720px){
  html, body{ -webkit-text-size-adjust: 100%; }

  .app-stage{ overflow-x: hidden; }
  .app-header{
    padding: 14px 18px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .app-header .crumbs{
    order: 3;
    flex-basis: 100%;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .app-header .brand img{ height: 24px; }
  .app-header .progress-meta{ font-size: 10px; }

  .app-main{ padding: 24px 18px; }

  .intro-grid, .q-grid, .result-hero{ gap: 28px; }

  /* Spectrum card on intro — tone down padding & numbers */
  .spectrum-card{ padding: 24px; }
  .spectrum-card .big-stat{ margin-top: 36px; }
  .spectrum-card .big-stat .num{ font-size: 72px; }
  .spectrum-bar{ margin-top: 20px; }
  .spectrum-stages{ gap: 4px; }
  .spectrum-stages .stage{ font-size: 10px; }
  .spectrum-stages .stage .range{ font-size: 8.5px; }

  /* Intro */
  .lead{ font-size: 18px; }
  .intro-actions{ margin-top: 28px; }
  .intro-actions .hint{ display: none; }
  .intro-meta{
    margin-top: 28px;
    padding-top: 20px;
    gap: 16px 20px;
    font-size: 10px;
  }

  /* Question screen */
  .q-meaning{ margin-top: 24px; padding: 18px 0; }
  .q-actions{ flex-wrap: wrap; gap: 12px; }
  .q-actions .btn{ flex: 1 1 auto; justify-content: center; }
  .score-card{
    padding: 16px 18px;
    grid-template-columns: auto 1fr;
    gap: 14px;
  }
  .score-card .key{ display: none; }

  /* Result hero */
  .result-screen{ max-width: 100%; }
  .result-hero{ gap: 24px; margin-bottom: 40px; }
  .result-score-card{
    padding: 28px 24px;
    min-height: auto;
  }
  .result-score-card .stage-name{ font-size: 60px; }
  .result-score-card .stage-tagline{ font-size: 18px; margin-top: 14px; }
  .score-display{ margin-top: 28px; gap: 12px; }
  .score-display .total{ font-size: 96px; }

  /* Result spectrum visualization */
  .result-spectrum{ padding: 24px 20px; }
  .spectrum-viz{ height: 70px; margin: 12px 0 20px; }
  .spectrum-labels{
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-top: 6px;
  }
  .spectrum-labels .stage{ padding-right: 0; }

  /* Score breakdown rows */
  .score-row{
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    font-size: 13px;
    padding: 10px 0;
  }
  .score-row .pts{ font-size: 18px; }

  /* Actions section */
  .actions-section{ margin-top: 48px; }
  .actions-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
  }
  .action-card{ padding: 26px 22px; }
  .action-card .num{ font-size: 52px; }
  .action-card h4{ font-size: 22px; margin: 14px 0 18px; }
  .action-card .targeted-flag{ top: 18px; right: 18px; }

  /* CTA bar */
  .result-cta{
    flex-direction: column;
    align-items: stretch;
    padding: 24px 22px;
    gap: 18px;
    margin-top: 40px;
  }
  .result-cta h3{ font-size: 22px; }
  .result-cta .actions{ width: 100%; }
  .result-cta .actions .btn{ flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* Email gate */
  .gate-overlay{ padding: 0; align-items: stretch; }
  .gate-card{
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border: none;
    box-shadow: none;
    overflow: auto;
  }
  .gate-left{ padding: 24px 22px; }
  .gate-form{ padding: 24px 22px; }
  .gate-title{ font-size: 26px; }
  .gate-lead{ font-size: 15px; }
  .gate-actions{ flex-direction: column; align-items: stretch; gap: 8px; }
  .gate-actions .btn{ width: 100%; justify-content: center; }
  .gate-back{ width: 100%; padding: 12px; }

  /* Buttons — make tappable */
  .btn{ padding: 14px 20px; font-size: 15px; }

  /* Keyboard hint never shown on mobile */
  .kbd-hint{ display: none !important; }
}

/* Phone */
@media (max-width: 480px){
  .app-header .crumbs{ display: none; }
  .app-header{ padding: 12px 16px; }
  .app-main{ padding: 18px 14px; }

  .spectrum-card{ padding: 20px; }
  .spectrum-card .big-stat .num{ font-size: 60px; }
  .spectrum-card .big-stat .desc{ font-size: 12px; }

  .intro-meta .item{ font-size: 10px; }
  .intro-actions .btn{ width: 100%; justify-content: center; }

  .q-counter{ flex-wrap: wrap; gap: 10px; font-size: 11px; }
  .q-counter .pip{ width: 18px; }

  .score-card{ padding: 14px 14px; }
  .score-card .badge{ flex-shrink: 0; }
  .score-card .label{ font-size: 14px; }
  .score-card .desc{ font-size: 13px; }

  .result-score-card{ padding: 24px 20px; }
  .result-score-card .stage-name{ font-size: 48px; }
  .score-display .total{ font-size: 80px; }
  .score-display .of{ font-size: 11px; padding-bottom: 8px; }

  .result-spectrum{ padding: 20px 16px; }

  .action-card{ padding: 22px 18px; }
  .action-card .num{ font-size: 44px; }
  .action-card h4{ font-size: 20px; margin: 12px 0 16px; }

  .result-cta{ padding: 20px 18px; }
  .result-cta h3{ font-size: 20px; }
  .result-cta .actions{ flex-direction: column; }
  .result-cta .actions .btn{ width: 100%; }

  .gate-title{ font-size: 22px; }
  .gate-bullets li{ font-size: 12px; }
}

/* Prevent input zoom on iOS */
@media (hover: none) and (pointer: coarse){
  .gate-form input[type="text"],
  .gate-form input[type="email"]{
    font-size: 16px;
  }
}