/* ============================================================
   IRQ Research Findings — Stylesheet
   ============================================================ */

/* --- Reset & base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #FAFAF7;
  --bg-alt:      #F4F3EF;
  --ink:         #1A1A1A;
  --ink-light:   #5A5550;
  --ink-muted:   #8A847C;
  --ink-faint:   #B5AFA3;
  --accent:      #C85A3A;
  --accent-bg:   #F4EDE8;
  --accent-muted:#D4856B;
  --green:       #4A8B6E;
  --green-bg:    #EBF4EF;
  --red:         #B85450;
  --red-bg:      #F5ECEA;
  --yellow:      #C9A84C;
  --yellow-bg:   #FBF6E9;
  --sidebar-w:   240px;
  --content-max: 720px;
  --border:      #E2DDD7;
  --serif:       'Fraunces', Georgia, serif;
  --sans:        'Inter', system-ui, -apple-system, sans-serif;
  --radius:      6px;
}

html { scroll-behavior: smooth; font-size: 17px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- Sidebar ----------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.25s ease;
}

.sidebar-inner {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
}

.sidebar-brand {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.sidebar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-link {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--ink-light);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}

.sidebar-link:hover {
  background: var(--bg);
  color: var(--ink);
}

.sidebar-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-bg);
  font-weight: 500;
}

.back-to-top {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0.4rem 0;
  display: none;
  transition: color 0.15s;
}

.back-to-top:hover { color: var(--accent); }
.back-to-top.visible { display: block; }

/* --- Mobile header ------------------------------------------ */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  z-index: 200;
}

.mobile-title {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.mobile-nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 90;
}

.sidebar-overlay.visible { display: block; }

/* --- Main layout -------------------------------------------- */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

/* --- Section base ------------------------------------------ */
.section {
  padding: 5rem 4rem;
}

.section-alt {
  background: var(--bg-alt);
}

.section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- Hero --------------------------------------------------- */
.hero {
  padding: 6rem 4rem 5rem;
  min-height: 90vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.hero-dare {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
}

.hero-subhead {
  font-size: 1.15rem;
  color: var(--ink-light);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: 1.25rem;
}

.hero-meta-block {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hero-byline {
  font-size: 0.88rem;
  color: var(--ink-light);
  font-weight: 500;
}

.hero-studies {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.hero-reading-time {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.hero-visual {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}

.hero-bubbles {
  width: 160px;
  height: auto;
  opacity: 0.85;
}

/* --- Typography -------------------------------------------- */
.section-heading {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 2rem;
}

.section-intro {
  font-size: 1.05rem;
  color: var(--ink-light);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 62ch;
}

.subsection-heading {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.subsection-heading:first-of-type {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: none;
}

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 600; }

/* --- TL;DR list -------------------------------------------- */
.tldr-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tldr-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.tldr-item:first-child { border-top: 1px solid var(--border); }

.tldr-number {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--ink-faint);
  line-height: 1;
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.tldr-lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 0.7rem;
}

/* --- Methodology ------------------------------------------- */
.study-diagrams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2.5rem 0;
}

.study-diagram {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
}

.diagram-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.diagram-svg {
  width: 100%;
  height: auto;
}

/* --- Callout box ------------------------------------------- */
.callout-box {
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem;
  margin: 2rem 0;
  font-size: 0.9rem;
  color: var(--ink-light);
  line-height: 1.6;
}

.callout-box strong { color: var(--ink); }

.callout-actionable {
  background: var(--accent-bg);
  border-left-color: var(--accent);
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  border-left-width: 4px;
  margin: 3rem 0;
}

.callout-heading {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.callout-list {
  margin: 1rem 0 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.97rem;
}

.callout-deadline {
  font-size: 0.88rem;
  color: var(--accent);
  border-top: 1px solid rgba(200, 90, 58, 0.2);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* --- Pull quote -------------------------------------------- */
.pull-quote {
  margin: 2.5rem 0;
  padding: 0.5rem 0 0.5rem 2rem;
  border-left: 3px solid var(--accent);
}

.pull-quote p {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.pull-quote cite {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: normal;
  font-weight: 500;
}

.pull-quote-small p {
  font-size: 1.1rem;
}

/* --- Finding blocks ---------------------------------------- */
.finding-list {
  margin: 1rem 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-left: 1.25rem;
}

.finding-list li {
  line-height: 1.65;
}

.finding-block {
  margin: 2.5rem 0;
  padding: 2rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.section-alt .finding-block {
  background: var(--bg-alt);
  border-color: var(--border);
}

.finding-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* --- Visual containers ------------------------------------- */
.visual-container {
  margin: 2rem 0;
}

.visual-caption {
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 0.75rem;
  font-style: italic;
}

.chart-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Message comparison ------------------------------------ */
.message-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: start;
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--border);
}

.message-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}

.message-bubble {
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.message-bubble.customer {
  background: #E8E4DC;
  color: var(--ink);
}

.message-bubble.pro {
  background: var(--accent-bg);
  border: 1px solid rgba(200,90,58,0.2);
  color: var(--ink);
}

.message-bubble.error {
  background: var(--red-bg);
  border: 1px solid rgba(184,84,80,0.25);
}

.message-arrow {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: var(--ink-faint);
  padding-top: 1.5rem;
}

.message-annotation {
  font-size: 0.78rem;
  color: var(--red);
  margin-top: 0.5rem;
  font-weight: 500;
}

.highlight-signal {
  background: rgba(74,139,110,0.2);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--green);
  font-weight: 600;
}

.highlight-error {
  background: rgba(184,84,80,0.15);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--red);
  font-weight: 600;
  text-decoration: line-through;
}

/* --- Scoreboard -------------------------------------------- */
.scoreboard {
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.88rem;
}

.scoreboard-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 3fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.scoreboard-row:last-child { border-bottom: none; }

.scoreboard-header {
  background: var(--bg-alt);
  padding: 0.7rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.scoreboard-header .col-archetype,
.scoreboard-header .col-pattern,
.scoreboard-header .col-outcome {
  padding: 0.7rem 1rem;
}

.col-archetype { padding: 1rem; line-height: 1.4; }
.col-pattern { padding: 1rem; color: var(--ink-light); }
.col-outcome { padding: 1rem; display: flex; align-items: center; gap: 0.75rem; }

.outcome-bar {
  display: block;
  width: 6px;
  height: 42px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bar-hardfail { background: var(--red); }
.bar-fail { background: #D4856B; }
.bar-split {
  background: linear-gradient(to bottom, var(--green) 50%, var(--red) 50%);
}
.bar-strong { background: var(--green); opacity: 0.75; }
.bar-strongest { background: var(--green); }

.outcome-hardfail { background: rgba(184,84,80,0.05); }
.outcome-fail { background: rgba(212,133,107,0.04); }
.outcome-split { background: rgba(201,168,76,0.04); }
.outcome-strong { background: rgba(74,139,110,0.04); }
.outcome-strongest { background: rgba(74,139,110,0.08); }

/* --- Concept comparison ------------------------------------ */
.concept-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 2.5rem 0;
}

.concept-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.concept-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.concept-screen {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.screen-header {
  background: var(--bg-alt);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}

.screen-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-light);
}

.screen-body {
  padding: 1rem;
}

.draft-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0;
}

.concept-toggles {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--accent-bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toggle-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  width: 40px;
}

.toggle-pills {
  display: flex;
  gap: 0.35rem;
}

.toggle-pill {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  cursor: pointer;
}

.toggle-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 500;
}

.screen-send-btn {
  margin: 0.75rem 1rem 1rem;
  background: var(--ink);
  color: white;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.concept-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  min-width: 80px;
}

.concept-annotations {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.annotation {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
}

.annotation-question {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(184,84,80,0.2);
}

.annotation-control {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(74,139,110,0.2);
}

/* --- C3 comparison ----------------------------------------- */
.c3-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 2rem 0;
}

.c3-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.c3-label-outer {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.c3-screen-dead {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.c3-screen-live {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(74,139,110,0.15);
}

.leads-list-preview {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lead-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-alt);
  border-radius: 4px;
  font-size: 0.76rem;
}

.lead-name { font-weight: 600; color: var(--ink); flex-shrink: 0; }
.lead-job { color: var(--ink-muted); flex: 1; }

.one-tap-btn {
  background: var(--ink);
  color: white;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 500;
}

.lead-detail-preview {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.detail-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.detail-key {
  font-weight: 600;
  color: var(--ink-muted);
  width: 60px;
  flex-shrink: 0;
}

.detail-val { color: var(--ink); }

.c3-caption {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-style: italic;
}

.c3-rejected .c3-caption { color: var(--red); }
.c3-preferred .c3-caption { color: var(--green); }

.c3-arrow {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: var(--ink-faint);
  padding-top: 2rem;
}

/* --- Specimen grid ----------------------------------------- */
.specimen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

.specimen-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.specimen-number {
  background: var(--ink);
  color: white;
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  display: inline-block;
}

.specimen-content {
  padding: 1rem 1.1rem;
}

.specimen-content h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.specimen-message {
  background: var(--bg-alt);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  border-left: 2px solid var(--green);
  color: var(--ink);
}

.specimen-message-bad {
  border-left-color: var(--red);
  background: var(--red-bg);
}

.specimen-annotation {
  font-size: 0.76rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.highlight-good {
  background: rgba(74,139,110,0.15);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--green);
  font-weight: 500;
}

.highlight-bad {
  background: rgba(184,84,80,0.12);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--red);
  font-weight: 500;
}

/* --- Numbered list ----------------------------------------- */
.numbered-list {
  margin: 1rem 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Implication framing ----------------------------------- */
.implication-framing {
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-style: italic;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--border);
  margin-bottom: 1.5rem;
}

/* --- Tentative note ---------------------------------------- */
.tentative-note {
  background: var(--yellow-bg);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.65;
}

.tentative-flag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  margin-bottom: 0.5rem;
}

/* --- Journey diagram --------------------------------------- */
.journey-diagram {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 120px;
}

.journey-node {
  border-radius: 6px;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

.journey-node.awareness {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--ink-light);
}

.journey-node.trust-sensitive {
  background: var(--accent-bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

.journey-zone-label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
}

.trust-label { color: var(--accent); }

.journey-arrow {
  font-size: 1.2rem;
  color: var(--ink-faint);
  padding-top: 0.55rem;
}

/* --- GTM rationales ---------------------------------------- */
.gtm-rationales {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.rationales-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}

.rationale-row {
  display: flex;
  gap: 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.55;
}

.rationale-row:last-child { border-bottom: none; }

.rationale-num {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  width: 24px;
  flex-shrink: 0;
}

/* --- Prompt diagram ---------------------------------------- */
.prompt-diagram {
  margin: 1.5rem 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.prompt-container {
  flex: 1;
}

.prompt-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}

.prompt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.prompt-pill {
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
}

.prompt-pill.existing {
  background: rgba(90,85,80,0.1);
  color: var(--ink-light);
}

.prompt-pill.new {
  background: var(--accent-bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.prompt-additions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prompt-addition {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.addition-arrow {
  color: var(--accent);
  font-weight: 600;
}

/* --- Tensions grid ----------------------------------------- */
.tensions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.tension-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  background: var(--bg);
}

.tension-scale {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.scale-left, .scale-right {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-light);
  flex: 1;
  text-align: center;
}

.scale-svg {
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.tension-text {
  font-size: 0.88rem;
  color: var(--ink-light);
  line-height: 1.6;
  margin: 0;
}

/* --- Out of scope list ------------------------------------- */
.out-of-scope-list {
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-left: 1.25rem;
}

.out-of-scope-list li { line-height: 1.65; }

/* --- Next steps -------------------------------------------- */
.next-steps-bucket {
  margin: 0 0 2.5rem 0;
}

.bucket-heading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
  display: inline-block;
}

.bucket-urgent { background: var(--accent-bg); color: var(--accent); }
.bucket-eval { background: var(--bg-alt); color: var(--ink-muted); }
.bucket-prembt { background: var(--green-bg); color: var(--green); }
.bucket-postmbt { background: var(--bg-alt); color: var(--ink-muted); }
.bucket-measurement { background: var(--yellow-bg); color: var(--yellow); }
.bucket-research { background: var(--bg-alt); color: var(--ink-muted); }

.step-list {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-light);
}

.step-list li::marker { color: var(--accent); font-weight: 600; }

/* --- Appendix table ---------------------------------------- */
.appendix-table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.appendix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.appendix-table th {
  background: var(--bg-alt);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
}

.appendix-table td {
  padding: 0.9rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
  color: var(--ink-light);
}

.appendix-table tr:last-child td { border-bottom: none; }

.row-hardfail td:first-child { border-left: 3px solid var(--red); }
.row-fail td:first-child { border-left: 3px solid #D4856B; }
.row-split td:first-child { border-left: 3px solid var(--yellow); }
.row-strong td:first-child { border-left: 3px solid var(--green); opacity: 0.75; }
.row-strongest td:first-child { border-left: 3px solid var(--green); }

.row-hardfail { background: rgba(184,84,80,0.03); }
.row-strongest { background: rgba(74,139,110,0.04); }

/* --- Quotes inventory -------------------------------------- */
.quotes-details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.quotes-summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-light);
  background: var(--bg);
  user-select: none;
  list-style: none;
}

.quotes-summary::-webkit-details-marker { display: none; }
.quotes-summary::before { content: '+ '; color: var(--accent); }
details[open] .quotes-summary::before { content: '− '; }

.quotes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

.quote-entry {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.quote-entry:nth-child(2n) { border-right: none; }
.quote-entry:nth-last-child(-n+2) { border-bottom: none; }

.quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.quote-source {
  font-size: 0.76rem;
  color: var(--ink-muted);
  font-style: normal;
}

/* --- Footer ------------------------------------------------ */
.site-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-meta {
  display: flex;
  gap: 2rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-link-placeholder {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* --- Phone-screenshot containers --------------------------- */
.phone-screenshot {
  display: block;
  max-width: 100%;
  width: 240px;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

.phone-screenshot-large {
  width: 300px;
}

.screenshot-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.screenshot-caption {
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.45;
  max-width: 260px;
}

/* --- Methodology visual update ----------------------------- */
.methodology-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2.5rem 0 2rem;
  align-items: start;
}

.method-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.method-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.customer-study-shot {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  display: block;
  width: 100%;
  height: auto;
}

.pro-concepts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.pro-concept-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pro-concept-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.pro-concept-label {
  font-size: 0.72rem;
  color: var(--ink-light);
  text-align: center;
  line-height: 1.3;
}

.pro-concept-label strong {
  display: block;
  color: var(--ink);
  margin-bottom: 0.1rem;
}

.concept-rationales {
  margin: 2rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.section-alt .concept-rationales { background: var(--bg-alt); }

.concept-rationale-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-light);
}

.concept-rationale-row strong {
  color: var(--ink);
  white-space: nowrap;
}

/* --- Methodology: abstract study diagrams ------------------ */
.study-diagram-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* --- Methodology: large prototype screenshots -------------- */
.methodology-screenshots {
  margin: 2.5rem 0 1.5rem;
}

.method-screenshot-figure {
  margin: 0 0 2.25rem;
}

.method-screenshot-wide {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 8px rgba(0,0,0,0.07);
}

.method-figcaption {
  max-width: none;
  text-align: center;
  margin-top: 0.85rem;
}

.concepts-lead {
  font-size: 0.95rem;
  color: var(--ink-light);
  margin: 0 0 1.25rem;
  font-style: italic;
}

.pro-concepts-row-large {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.pro-concept-large {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pro-concept-large img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.pro-concept-large figcaption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-light);
}

.pro-concept-large figcaption strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

/* --- C1/C2 real screenshots with annotations --------------- */
.annotated-concept {
  position: relative;
  margin-bottom: 1rem;
}

.annotated-concept img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.annotations-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* --- C3 vs Lead_Details comparison ------------------------- */
.c3-screenshot-desaturated {
  filter: grayscale(0.85) opacity(0.55);
  position: relative;
}

.c3-screenshot-desaturated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184,84,80,0.08) 0%, rgba(184,84,80,0.02) 100%);
  border-radius: 6px;
  pointer-events: none;
}

.c3-screenshot-live {
  border: 2px solid var(--green);
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(74,139,110,0.12);
}

.c3-screenshot-live img,
.c3-screenshot-desaturated img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* --- Status markers (next steps) --------------------------- */
.step-list li {
  list-style: none;
  position: relative;
  padding-left: 2rem;
  line-height: 1.55;
  color: var(--ink-light);
}

.step-list {
  list-style: none;
  padding-left: 0;
}

.step-list .status-icon {
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 0.95rem;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.step-list .status-done {
  color: var(--green);
}

.step-list .status-progress {
  color: var(--yellow);
}

.step-list .status-pending {
  color: var(--ink-faint);
}

.step-list .status-note {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* --- Status update callout (prompt inputs) ----------------- */
.status-callout .status-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(200,90,58,0.15);
  font-size: 0.94rem;
  line-height: 1.55;
}

.status-callout .status-row:last-child { border-bottom: none; }

.status-callout .status-marker {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-callout .status-marker-done { color: var(--green); }
.status-callout .status-marker-progress { color: var(--yellow); }

/* --- Inline note / aside ----------------------------------- */
.inline-aside {
  margin: 2rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--green-bg);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}

.inline-aside-heading {
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

/* --- RQI link treatment ------------------------------------ */
.rqi-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.15s, background 0.15s;
}

.rqi-link:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

/* --- Scroll fade-in ---------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .study-diagrams { grid-template-columns: 1fr; }
  .methodology-visuals { grid-template-columns: 1fr; }
  .pro-concepts-row-large { grid-template-columns: 1fr; gap: 2rem; }
  .specimen-grid { grid-template-columns: 1fr; }
  .tensions-grid { grid-template-columns: 1fr; }
  .concept-comparison {
    grid-template-columns: 1fr;
  }
  .concept-divider {
    flex-direction: row;
    justify-content: center;
    min-width: unset;
    padding: 0.5rem 0;
  }
  .c3-comparison { grid-template-columns: 1fr; }
  .c3-arrow { display: none; }
  .message-comparison {
    grid-template-columns: 1fr;
  }
  .message-arrow { display: none; }
  .quotes-grid { grid-template-columns: 1fr; }
  .quote-entry { border-right: none !important; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .mobile-header { display: flex; }

  .sidebar {
    transform: translateX(-260px);
    width: 260px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main {
    margin-left: 0;
    padding-top: 52px;
  }

  .section {
    padding: 3.5rem 1.5rem;
  }

  .hero {
    padding: 3.5rem 1.5rem 3rem;
    min-height: 80vh;
  }

  .hero-headline {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  .tldr-item {
    grid-template-columns: 36px 1fr;
    gap: 1rem;
  }

  .tldr-number { font-size: 1.4rem; }

  .scoreboard {
    font-size: 0.8rem;
    overflow-x: auto;
  }

  .scoreboard-row {
    grid-template-columns: 1.8fr 1fr 2fr;
    min-width: 560px;
  }

  .appendix-table { min-width: 600px; }

  .journey-diagram {
    flex-direction: column;
    align-items: stretch;
  }

  .journey-arrow { transform: rotate(90deg); align-self: center; }
}

@media (max-width: 480px) {
  .section { padding: 2.5rem 1.25rem; }
  .hero { padding: 2.5rem 1.25rem; }
  .section-heading { font-size: 1.6rem; }
  .pull-quote p { font-size: 1.15rem; }
  .finding-block { padding: 1.25rem; }
  .footer-meta { flex-direction: column; gap: 0.4rem; }
}