/* ========================================================================
   LaunchAudit V2 Renderer — Stylesheet
   ========================================================================
   Extends the existing design system in index.html.
   All V2 classes prefixed with .v2- to prevent collisions with V1.
   Uses the existing CSS variables (--accent, --ink, --surface, etc.).
======================================================================== */

/* --------- LAYOUT PRIMITIVES --------- */

.v2-report {
  font-family: var(--font-b);
  color: var(--ink);
  max-width: 100%;
}

.v2-report * {
  box-sizing: border-box;
}

/* STAGE 3.5 A — universal section spacing so it works across wrapper boundaries */
.v2-section {
  margin-top: 40px;
}

/* First section in the report, first section in either visibility wrapper */
.v2-report > .v2-section:first-child,
.v2-focus-only > .v2-section:first-child,
.v2-full-only > .v2-section:first-child {
  margin-top: 0;
}

/* Each top-level Full/Focus mode section is wrapped in its own visibility
   div — give those wrappers the same 40px top gap that naked .v2-section
   already has. Scoped to direct children of .v2-report so nested
   .v2-focus-only/.v2-full-only blocks (e.g. inside Priority Fixes) don't
   pick up the extra margin. */
.v2-report > .v2-full-only,
.v2-report > .v2-focus-only {
  margin-top: 40px;
}

.v2-card {
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.v2-card-soft {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.v2-card-compact {
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

/* --------- TYPOGRAPHY --------- */

.v2-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink3);
  margin-bottom: 8px;
}

.v2-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  min-height: 24px;
  background: linear-gradient(90deg, var(--accent-bg, #fdf1ec) 0%, var(--surface) 60%);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid transparent;
}

/* Color-matched section titles by accent-bar color — subtle wash on the left
   that fades to the cream background. Adds visual chunking between sections
   so the eye can find anchor points in a long report, without making the
   page look like a rainbow textbook. Uses :has() for zero markup change. */
.v2-section-title:has(.v2-accent-bar.blue) {
  background: linear-gradient(90deg, var(--blue-bg, #e3f2fd) 0%, var(--surface) 60%);
}
.v2-section-title:has(.v2-accent-bar.green) {
  background: linear-gradient(90deg, var(--green-bg, #e8f5e9) 0%, var(--surface) 60%);
}
.v2-section-title:has(.v2-accent-bar.purple) {
  background: linear-gradient(90deg, #ede7f6 0%, var(--surface) 60%);
}

/* If ever nested inside a soft-tinted card, bump contrast so title stays visible */
.v2-card-soft > .v2-section-title {
  background: var(--surface2);
}

.v2-section > .v2-section-title:first-child,
.v2-card > .v2-section-title:first-child,
.v2-card-soft > .v2-section-title:first-child,
.v2-card-compact > .v2-section-title:first-child {
  margin-top: 0;
}

.v2-section-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}

.v2-accent-bar {
  width: 3px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  align-self: center;
}

.v2-accent-bar.blue { background: var(--blue); }
.v2-accent-bar.green { background: var(--green); }
.v2-accent-bar.purple { background: #6d4c9e; }

.v2-section-heading {
  font-family: var(--font-b);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 22px;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.v2-section-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--accent-bg);
  color: var(--accent);
}

.v2-section-pill.blue { background: var(--blue-bg); color: var(--blue); }
.v2-section-pill.green { background: var(--green-bg); color: var(--green-dark); }
.v2-section-pill.purple { background: #ede7f6; color: #6d4c9e; }

/* --------- HEADER STRIP --------- */

.v2-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--surface3);
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.v2-header-meta {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink3);
  margin-bottom: 4px;
}

.v2-header-title {
  font-family: var(--font-d);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}

.v2-header-subtitle {
  font-size: 12px;
  color: var(--ink3);
}

.v2-header-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--white);
  white-space: nowrap;
}

/* --------- SCORECARD --------- */

.v2-scorecard {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--surface3);
  margin-bottom: 18px;
}

.v2-grade-block {
  text-align: center;
  padding-right: 28px;
  border-right: 1px solid var(--surface3);
}

.v2-grade-letter {
  font-family: var(--font-d);
  font-size: 72px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -2px;
}

.v2-grade-letter.good { color: var(--green); }
.v2-grade-letter.mid { color: var(--accent); }
.v2-grade-letter.bad { color: #b03a1e; }

.v2-grade-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 6px;
}

.v2-grade-score .divisor {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink3);
}

.v2-grade-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink3);
  margin-top: 5px;
}

.v2-subscores {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.v2-subscore {
  text-align: center;
}

.v2-subscore-label {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 5px;
  font-weight: 600;
}

.v2-subscore-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-d);
  line-height: 1;
}

.v2-subscore-bar {
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  margin-top: 7px;
  overflow: hidden;
}

.v2-subscore-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.v2-subscore-bar-fill.good { background: var(--green); }
.v2-subscore-bar-fill.mid { background: var(--accent); }
.v2-subscore-bar-fill.bad { background: #b03a1e; }

.v2-keystats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding-top: 14px;
}

.v2-keystat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  margin-bottom: 3px;
}

.v2-keystat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.v2-oneliner {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--surface3);
  font-size: 13px;
  color: var(--ink2);
  font-style: italic;
  line-height: 1.5;
}

/* --------- TOP WINS --------- */

.v2-wins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.v2-win-card {
  background: var(--green-bg);
  border: 1px solid rgba(45, 138, 94, 0.15);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.v2-win-card:hover {
  border-color: var(--green);
  transform: translateY(-1px);
}

.v2-win-headline {
  font-size: 22px;
  font-weight: 700;
  color: var(--green-dark);
  font-family: var(--font-d);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.v2-win-metric {
  font-size: 12px;
  color: var(--green-dark);
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.4;
}

.v2-win-timeline {
  font-size: 10px;
  color: var(--green);
  margin-top: 5px;
  opacity: 0.85;
}

/* --------- IMPACT × EFFORT MATRIX --------- */

.v2-matrix {
  position: relative;
  height: 320px;
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 24px;
}

.v2-matrix-axis-label {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
}

.v2-matrix-axis-top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.v2-matrix-axis-bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.v2-matrix-axis-left {
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.v2-matrix-axis-right {
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}

.v2-matrix-hline {
  position: absolute;
  top: 50%;
  left: 42px;
  right: 42px;
  height: 1px;
  background: var(--surface3);
}

.v2-matrix-vline {
  position: absolute;
  left: 50%;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: var(--surface3);
}

.v2-matrix-quadrant-label {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green);
  opacity: 0.7;
}

.v2-matrix-dot {
  position: absolute;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  transform: translate(-50%, -50%);
}

.v2-matrix-dot:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.v2-matrix-dot.quick-win { background: var(--green-bg); color: var(--green-dark); border: 1px solid rgba(45, 138, 94, 0.2); }
.v2-matrix-dot.major-project { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(58, 107, 170, 0.2); }
.v2-matrix-dot.fill-in { background: var(--accent-bg); color: var(--accent); border: 1px solid rgba(200, 80, 42, 0.2); }
.v2-matrix-dot.thankless { background: var(--white); color: var(--ink3); border: 1px solid var(--surface3); }

/* --------- PRIORITY FIX CARD --------- */

.v2-fixcard {
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}

.v2-fixcard:hover {
  border-color: var(--accent-light);
}

.v2-fixcard-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.v2-fixcard-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v2-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--surface2);
  color: var(--ink3);
}

.v2-tag.when-today { background: var(--accent); color: var(--white); }
.v2-tag.when-week { background: #f0c75a; color: #5a3e00; }
.v2-tag.when-month { background: var(--blue-bg); color: var(--blue); }

.v2-tag.lift {
  margin-left: auto;
  background: var(--green-bg);
  color: var(--green-dark);
}

.v2-fixcard-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  line-height: 1.35;
}

.v2-fixcard-tldr {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  margin: 0 0 14px;
}

.v2-fixcard-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

.v2-fixcard-panel {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.v2-fixcard-panel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  margin-bottom: 8px;
}

.v2-fixcard-panel ul {
  margin: 0;
  padding-left: 16px;
  list-style-type: none;
}

.v2-fixcard-panel li {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
  margin-bottom: 6px;
  padding-left: 4px;
  position: relative;
}

.v2-fixcard-panel li::before {
  content: "·";
  position: absolute;
  left: -12px;
  color: var(--accent);
  font-weight: 700;
}

/* --------- COPY-PASTE BLOCK --------- */

.v2-copyblock {
  background: var(--surface2);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0;
}

.v2-copyblock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.v2-copyblock-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
}

.v2-copy-btn {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: 100px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.v2-copy-btn:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.v2-copyblock-text {
  font-family: var(--font-b);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

.v2-copyblock-text.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
}

.v2-copyblock-hint {
  font-size: 10px;
  color: var(--ink3);
  margin-top: 6px;
}

/* --------- TITLE REWRITE (BEFORE/AFTER) --------- */

.v2-rewrite-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.v2-rewrite-panel {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

.v2-rewrite-panel.before {
  background: var(--accent-bg);
  border: 1px solid rgba(200, 80, 42, 0.2);
}

.v2-rewrite-panel.after {
  background: var(--green-bg);
  border: 1px solid rgba(45, 138, 94, 0.2);
}

.v2-rewrite-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 7px;
}

.v2-rewrite-panel.before .v2-rewrite-label { color: var(--accent); }
.v2-rewrite-panel.after .v2-rewrite-label { color: var(--green-dark); }

.v2-rewrite-text {
  font-size: 12px;
  line-height: 1.55;
}

.v2-rewrite-panel.before .v2-rewrite-text { color: #5a1a0a; }
.v2-rewrite-panel.after .v2-rewrite-text { color: var(--green-dark); }

/* --------- BULLET REWRITE CARD --------- */

.v2-bulletcard {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 3px solid var(--accent);
}

.v2-bulletcard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-bulletcard-index {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.v2-bulletcard-theme {
  font-size: 11px;
  color: var(--ink3);
  font-style: italic;
}

.v2-bulletcard-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.v2-signal-chip {
  font-size: 10px;
  color: var(--green-dark);
  background: var(--green-bg);
  padding: 2px 8px;
  border-radius: 100px;
}

/* --------- KEYWORDS TABLE --------- */

.v2-keyword-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.v2-keyword-table thead {
  background: var(--surface2);
}

.v2-keyword-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface3);
}

.v2-keyword-table td {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--surface3);
}

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

.v2-placement-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.v2-placement-pill.title { background: var(--blue-bg); color: var(--blue); }
.v2-placement-pill.bullet { background: var(--accent-bg); color: var(--accent); }
.v2-placement-pill.backend { background: var(--green-bg); color: var(--green-dark); }

.v2-matched-yes { color: var(--green); font-weight: 700; }
.v2-matched-no { color: var(--accent); font-weight: 700; }

.v2-demand-high { color: var(--green-dark); font-weight: 700; }
.v2-demand-medium { color: var(--accent); font-weight: 600; }
.v2-demand-low { color: var(--ink3); }

/* --------- IMAGE AUDIT GRID --------- */

.v2-image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.v2-image-slot {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  position: relative;
}

.v2-image-slot.present { background: var(--green-bg); color: var(--green-dark); }
.v2-image-slot.partial { background: #fef0d9; color: #8a5a00; }
.v2-image-slot.missing { background: var(--accent-bg); color: var(--accent); border: 1px dashed var(--accent); }

.v2-image-slot-label {
  font-size: 12px;
  font-weight: 700;
}

.v2-image-slot-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.v2-image-details {
  margin-top: 14px;
}

.v2-image-detail-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface3);
}

.v2-image-detail-row:last-child {
  border-bottom: none;
}

.v2-image-detail-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: 100px;
  flex-shrink: 0;
  height: fit-content;
}

.v2-image-detail-status.missing { background: var(--accent); color: var(--white); }
.v2-image-detail-status.partial { background: #e9a53b; color: var(--white); }
.v2-image-detail-status.present { background: var(--green); color: var(--white); }

.v2-image-detail-current {
  font-size: 11px;
  color: var(--ink3);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 4px;
}

.v2-image-detail-content {
  flex: 1;
}

.v2-image-detail-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.v2-image-detail-brief {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.55;
}

/* --------- COMPETITOR TABLE --------- */

.v2-comp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.v2-comp-table th,
.v2-comp-table td {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  border-bottom: 1px solid var(--surface3);
}

.v2-comp-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  background: var(--surface2);
}

.v2-comp-table th.you-col {
  color: var(--blue);
  background: var(--blue-bg);
}

.v2-comp-table td.you-col {
  background: var(--blue-bg);
  font-weight: 700;
}

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

.v2-comp-label {
  color: var(--ink3);
}

.v2-comp-winner {
  color: var(--green-dark);
  font-weight: 700;
}

.v2-comp-loser {
  color: var(--accent);
  font-weight: 700;
}

/* --------- FORECAST CARDS --------- */

.v2-forecast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.v2-forecast-card {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.v2-forecast-card.do-nothing {
  background: var(--surface2);
  border-color: var(--surface3);
}

.v2-forecast-card.quick-wins {
  background: var(--blue-bg);
  border-color: rgba(58, 107, 170, 0.2);
}

.v2-forecast-card.full-plan {
  background: var(--green-bg);
  border-color: rgba(45, 138, 94, 0.2);
}

.v2-forecast-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

.v2-forecast-card.do-nothing .v2-forecast-label { color: var(--ink3); }
.v2-forecast-card.quick-wins .v2-forecast-label { color: var(--blue); }
.v2-forecast-card.full-plan .v2-forecast-label { color: var(--green-dark); }

.v2-forecast-grade {
  font-family: var(--font-d);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 10px;
}

.v2-forecast-card.do-nothing .v2-forecast-grade { color: var(--ink3); }
.v2-forecast-card.quick-wins .v2-forecast-grade { color: var(--blue); }
.v2-forecast-card.full-plan .v2-forecast-grade { color: var(--green-dark); }

.v2-forecast-summary {
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 10px;
}

.v2-forecast-card.do-nothing .v2-forecast-summary { color: var(--ink2); }
.v2-forecast-card.quick-wins .v2-forecast-summary { color: var(--blue); }
.v2-forecast-card.full-plan .v2-forecast-summary { color: var(--green-dark); }

.v2-forecast-metrics {
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 11px;
  line-height: 1.6;
}

.v2-forecast-metric-label {
  color: var(--ink3);
  font-weight: 600;
}

.v2-forecast-metric-value {
  font-weight: 700;
}

.v2-forecast-disclaimer {
  font-size: 10px;
  color: var(--ink3);
  font-style: italic;
  margin-top: 10px;
  text-align: center;
}

/* --------- ACTION PLAN --------- */

.v2-plan-table {
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.v2-plan-week {
  border-bottom: 1px solid var(--surface3);
}

.v2-plan-week:last-child {
  border-bottom: none;
}

.v2-plan-week.reaudit {
  background: var(--blue-bg);
}

.v2-plan-week-header {
  padding: 12px 16px;
  background: var(--surface2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  border-bottom: 1px solid var(--surface3);
}

.v2-plan-week.reaudit .v2-plan-week-header {
  background: rgba(58, 107, 170, 0.1);
  color: var(--blue);
}

.v2-plan-task {
  display: grid;
  grid-template-columns: 24px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--surface3);
  font-size: 13px;
}

.v2-plan-task:first-of-type {
  border-top: none;
}

.v2-plan-task input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.v2-plan-task-text {
  color: var(--ink);
  line-height: 1.5;
}

.v2-plan-task-time {
  font-size: 11px;
  color: var(--ink3);
  text-align: right;
  font-weight: 600;
}

.v2-plan-task.reaudit-placeholder .v2-plan-task-text {
  font-weight: 700;
  color: var(--blue);
}

.v2-plan-task.reaudit-placeholder .v2-plan-task-time {
  color: var(--blue);
}

.v2-cross-sell-btn {
  display: inline-block;
  margin-left: 8px;
  background: var(--blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border-radius: 100px;
  text-decoration: none;
}

/* --------- GLOSSARY --------- */

.v2-glossary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  font-size: 12px;
  line-height: 1.55;
}

.v2-glossary-term {
  font-weight: 700;
  color: var(--ink);
}

.v2-glossary-def {
  color: var(--ink3);
}

/* --------- DEEP ANALYSIS GRID (4 up) --------- */

.v2-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v2-deep-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.v2-deep-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  margin-bottom: 8px;
}

.v2-deep-card-text {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.65;
}

/* --------- MARKET INTEL (same pattern) --------- */

.v2-market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v2-keyword-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.v2-keyword-chip {
  background: var(--white);
  border: 1px solid var(--surface3);
  border-radius: 100px;
  padding: 4px 11px;
  font-size: 11px;
  color: var(--ink2);
}

/* --------- AI READINESS (preserve existing pattern) --------- */

.v2-ai-score-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--surface3);
}

.v2-ai-score {
  text-align: center;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.v2-ai-score-num {
  font-family: var(--font-d);
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
}

.v2-ai-score-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  margin-top: 5px;
}

.v2-ai-score-bar {
  height: 5px;
  background: var(--surface3);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.v2-ai-score-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.v2-ai-readiness-label {
  background: var(--accent-bg);
  border: 1px solid rgba(200, 80, 42, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.v2-ai-readiness-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--font-d);
}

.v2-ai-readiness-hint {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 4px;
}

.v2-rufus-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.v2-rufus-panel {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.v2-rufus-panel.current {
  background: #ede7f6;
  border: 1px solid #d1c4e9;
}

.v2-rufus-panel.target {
  background: var(--green-bg);
  border: 1px solid rgba(45, 138, 94, 0.2);
}

.v2-rufus-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 7px;
}

.v2-rufus-panel.current .v2-rufus-label { color: #6d4c9e; }
.v2-rufus-panel.target .v2-rufus-label { color: var(--green-dark); }

.v2-rufus-text {
  font-family: var(--font-d);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
}

.v2-rufus-panel.current .v2-rufus-text { color: #4a3860; }
.v2-rufus-panel.target .v2-rufus-text { color: var(--green-dark); }

.v2-ai-question-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 12px;
}

.v2-ai-question {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.v2-ai-question-mark {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.3;
}

.v2-ai-question-mark.yes { color: var(--green); }
.v2-ai-question-mark.no { color: var(--accent); }

/* --------- FOOTER --------- */

.v2-footer {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--surface3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink3);
  flex-wrap: wrap;
  gap: 12px;
}

.v2-footer-cta {
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.15s;
}

.v2-footer-cta:hover {
  background: #a53f20;
}

/* --------- RESPONSIVE --------- */

@media (max-width: 720px) {
  .v2-scorecard { grid-template-columns: 100px 1fr; gap: 14px; }
  .v2-grade-block { padding-right: 14px; }
  .v2-grade-letter { font-size: 52px; }
  .v2-subscores { grid-template-columns: repeat(3, 1fr); gap: 10px; row-gap: 14px; }
  .v2-keystats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .v2-wins-grid { grid-template-columns: 1fr; }
  .v2-forecast-grid { grid-template-columns: 1fr; }
  .v2-fixcard-split { grid-template-columns: 1fr; }
  .v2-rewrite-diff { grid-template-columns: 1fr; }
  .v2-image-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-deep-grid, .v2-market-grid { grid-template-columns: 1fr; }
  .v2-glossary { grid-template-columns: 1fr; }
  .v2-rufus-compare { grid-template-columns: 1fr; }
  .v2-ai-score-row { grid-template-columns: 120px 1fr; }
  .v2-ai-question-list { grid-template-columns: 1fr; }
  .v2-matrix { height: 280px; }
}

/* ========================================================================
   STAGE 2C ADDITIONS — Start Here, How To Read modal, Collapsible sections
======================================================================== */

/* --------- "HOW TO READ" LINK (in header meta) --------- */
.v2-howto-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  margin-left: 10px;
  font-size: 10px;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}
.v2-howto-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --------- "START HERE" CARD --------- */
.v2-starthere {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--surface) 100%);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  position: relative;
  box-shadow: 0 4px 20px rgba(200, 80, 42, 0.12);
}

.v2-starthere-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.v2-starthere-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-d);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.v2-starthere-rank {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-b);
  margin-top: 2px;
}

.v2-starthere-tldr {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  margin-bottom: 14px;
  padding-left: 44px;
}

.v2-starthere-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-left: 44px;
}

.v2-starthere-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  margin-left: 44px;
  transition: all 0.15s;
}

.v2-starthere-btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

/* --------- COLLAPSIBLE SECTIONS --------- */
.v2-collapsible {
  margin: 0;
  padding: 0;
}

.v2-collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  padding: 12px 16px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s, color 0.15s;
  min-height: 24px;
  background: linear-gradient(90deg, var(--accent-bg, #fdf1ec) 0%, var(--surface) 60%);
  border-radius: 10px;
}

/* Color-matched collapsibles — same gradient logic as section titles */
.v2-collapsible-summary:has(.v2-accent-bar.blue) {
  background: linear-gradient(90deg, var(--blue-bg, #e3f2fd) 0%, var(--surface) 60%);
}
.v2-collapsible-summary:has(.v2-accent-bar.green) {
  background: linear-gradient(90deg, var(--green-bg, #e8f5e9) 0%, var(--surface) 60%);
}
.v2-collapsible-summary:has(.v2-accent-bar.purple) {
  background: linear-gradient(90deg, #ede7f6 0%, var(--surface) 60%);
}

.v2-collapsible-summary::-webkit-details-marker {
  display: none;
}

.v2-collapsible-summary::after {
  content: '▸';
  font-size: 14px;
  color: var(--ink3);
  transition: transform 0.2s;
  margin-left: auto;
  padding-left: 8px;
}

.v2-collapsible[open] .v2-collapsible-summary::after {
  transform: rotate(90deg);
}

.v2-collapsible-summary:hover .v2-section-heading {
  color: var(--accent);
}

.v2-collapsible > *:not(summary) {
  margin-top: 14px;
  animation: v2-expand 0.2s ease-out;
}

@keyframes v2-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------- "HOW TO READ" MODAL --------- */
.v2-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 14, 13, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: v2-fade 0.15s ease-out;
}

@keyframes v2-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.v2-modal {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 36px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: v2-slide 0.2s ease-out;
}

@keyframes v2-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.v2-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--ink3);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.v2-modal-close:hover {
  background: var(--surface2);
  color: var(--ink);
}

.v2-modal-title {
  font-family: var(--font-d);
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}

.v2-modal-intro {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  margin: 0 0 18px;
}

.v2-howto-steps {
  margin-bottom: 16px;
}

.v2-howto-step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--surface3);
  font-size: 13px;
}

.v2-howto-step:first-child {
  border-top: none;
}

.v2-howto-step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}

.v2-howto-step-text {
  color: var(--ink);
  line-height: 1.55;
}

.v2-modal-tip {
  background: var(--blue-bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.6;
  margin-top: 10px;
}

.v2-modal-tip strong {
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------- RESPONSIVE --------- */
@media (max-width: 720px) {
  .v2-starthere { padding: 16px 18px; }
  .v2-starthere-title { font-size: 18px; gap: 10px; }
  .v2-starthere-rank { width: 28px; height: 28px; min-width: 28px; font-size: 13px; }
  .v2-starthere-tldr, .v2-starthere-chips, .v2-starthere-btn { padding-left: 0; margin-left: 0; }
  .v2-modal { padding: 24px 20px; }
  .v2-modal-title { font-size: 18px; }
  .v2-howto-step { grid-template-columns: 1fr; gap: 4px; }
  .v2-howto-step-label { padding-top: 0; }
}

/* --------- PRINT --------- */
@media print {
  .v2-howto-link, .v2-starthere-btn, .v2-modal-backdrop { display: none !important; }
  .v2-collapsible[open] > *:not(summary) { animation: none; }
  .v2-collapsible-summary::after { display: none; }
}

/* ========================================================================
   STAGE 2D ADDITIONS — Mode Toggle (Focus vs Full Report)
======================================================================== */

/* --------- MODE TOGGLE BAR (sticky wrapper) --------- */
.v2-mode-toggle-bar {
  position: sticky;
  top: 56px; /* sits below the main nav (56px high) */
  z-index: 90;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  margin: 0 0 18px;
  border-radius: 8px;
  /* Attention-pulse: when the paid report first renders, the bar pulses
     an orange ring 3 times to draw the eye to the Focus/Full toggle.
     CSS animation only fires when the element is mounted (renderModeToggle
     produces fresh HTML each report render), so it won't replay on every
     scroll or visibility change. ~6s total runtime, then stops. */
  animation: v2-toggle-attention 2s ease-in-out 3;
}

@keyframes v2-toggle-attention {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 80, 42, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(200, 80, 42, 0.42),
                0 0 28px 0 rgba(200, 80, 42, 0.32);
  }
}

/* Respect users who prefer reduced motion — no flash for them. */
@media (prefers-reduced-motion: reduce) {
  .v2-mode-toggle-bar { animation: none; }
}

.v2-mode-toggle-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.v2-mode-toggle-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------- MODE TOGGLE CONTROL --------- */
.v2-mode-toggle {
  display: inline-flex;
  background: transparent;
  border-radius: 100px;
  padding: 0;
  gap: 6px;
  margin: 0;
  align-self: flex-start;
}

.v2-mode-toggle button {
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 100px;
  border: none;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.v2-mode-toggle-hint {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0;
  text-transform: lowercase;
}

.v2-mode-toggle button.active .v2-mode-toggle-hint { opacity: 0.9; }

.v2-mode-toggle button:hover {
  background: var(--surface2);
  color: var(--ink);
}

.v2-mode-toggle button.active:hover {
  background: var(--accent);
  color: var(--white);
}

.v2-mode-toggle button.active {
  background: var(--accent);
  color: var(--white);
  /* Stronger selected affordance — soft outer glow + a tight white ring
     against the dark bar, so the active button reads as "lit up" rather
     than just "filled in". */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 2px 10px rgba(200, 80, 42, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateY(-0.5px);
}

.v2-mode-toggle button.active .v2-mode-toggle-hint {
  /* The hint text on the active button now reads as a brighter
     subtitle, not the dim grey it inherits otherwise. */
  opacity: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* --------- MODE VISIBILITY RULES --------- */
/* Default (no mode set yet): show everything. Focus mode hides full-only. Full mode hides focus-only. */
body[data-v2-mode="focus"] .v2-full-only { display: none !important; }
body[data-v2-mode="full"] .v2-focus-only { display: none !important; }

/* Visibility wrappers should not add their own spacing — let the .v2-section inside control margins */
.v2-full-only,
.v2-focus-only {
  margin: 0;
  padding: 0;
}

/* --------- FIRST-VIEW TOOLTIP --------- */
.v2-mode-tooltip {
  position: relative;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: -10px 0 20px;
  max-width: 420px;
  cursor: pointer;
  animation: v2-tooltip-pop 0.3s ease-out;
  box-shadow: 0 4px 16px rgba(15, 14, 13, 0.18);
}

@keyframes v2-tooltip-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.v2-mode-tooltip-arrow {
  position: absolute;
  top: -8px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--ink);
}

.v2-mode-tooltip-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v2-mode-tooltip-body strong {
  font-size: 12px;
  color: var(--white);
}

.v2-mode-tooltip-body span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.v2-mode-tooltip-dismiss {
  color: var(--accent-light) !important;
  font-weight: 700;
  font-size: 11px !important;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Auto-hide tooltip when in full mode */
body[data-v2-mode="full"] .v2-mode-tooltip { display: none; }

/* --------- "SHOW ALL" PROMPT INSIDE FOCUS MODE --------- */
.v2-showall-prompt {
  text-align: center;
  padding: 14px 0 4px;
}

.v2-showall-btn {
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 100px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.15s;
}

.v2-showall-btn:hover {
  background: var(--accent);
  color: var(--white);
}

/* --------- FOCUS MODE UPSELL CARD (bottom of Focus Mode) --------- */
.v2-focus-upsell {
  margin: 28px 0 20px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px dashed var(--accent-light);
  border-radius: var(--radius);
  text-align: center;
}

.v2-focus-upsell-label {
  font-family: var(--font-d);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}

.v2-focus-upsell-text {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 14px;
}

.v2-focus-upsell-btn {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border: none;
  border-radius: 100px;
  padding: 10px 22px;
  cursor: pointer;
  transition: all 0.15s;
}

.v2-focus-upsell-btn:hover {
  background: #a53f20;
  transform: translateY(-1px);
}

/* --------- PRINT: always show everything, hide toggle --------- */
@media print {
  .v2-mode-toggle-bar,
  .v2-mode-toggle,
  .v2-mode-tooltip,
  .v2-focus-upsell,
  .v2-showall-prompt { display: none !important; }
  .v2-full-only,
  .v2-focus-only { display: block !important; }
  /* When printing from Focus Mode, beforeprint handler flips body to full — this is backup */
  body[data-v2-mode="focus"] .v2-full-only { display: block !important; }
}

/* --------- RESPONSIVE --------- */
@media (max-width: 720px) {
  .v2-mode-toggle { width: 100%; }
  .v2-mode-toggle button { flex: 1; padding: 8px 10px; font-size: 11px; }
  .v2-mode-tooltip { margin: -6px 0 16px; padding: 12px 14px; }
  .v2-focus-upsell { padding: 16px 18px; }
}

/* ========================================================================
   STAGE 2F ADDITIONS — Free Preview Redesign
======================================================================== */

.fp-preview { font-family: var(--font-b); color: var(--ink); padding-bottom: 80px; }

/* --------- HEADER --------- */
.fp-header { padding-bottom: 14px; border-bottom: 1px solid var(--surface3); margin-bottom: 20px; }
.fp-header-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fp-free-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 11px; border-radius: 100px; background: var(--accent-bg); color: var(--accent); }
.fp-asin { font-size: 10px; color: var(--ink3); background: var(--surface2); padding: 2px 7px; border-radius: 4px; }
.fp-header-title { font-family: var(--font-d); font-size: 22px; line-height: 1.25; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.3px; }
.fp-oneliner { font-size: 13px; color: var(--ink3); font-style: italic; line-height: 1.5; }

/* --------- SCORECARD --------- */
.fp-score-wrap { background: var(--white); border: 1px solid var(--surface3); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 28px; }
.fp-scorecard { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--surface3); margin-bottom: 14px; }
.fp-score-wrap .fp-keystats { padding-top: 14px; padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.fp-grade-block { text-align: center; padding-right: 24px; border-right: 1px solid var(--surface3); }
.fp-grade-letter { font-family: var(--font-d); font-size: 64px; font-weight: 400; line-height: 0.95; letter-spacing: -2px; }
.fp-grade-letter.good { color: var(--green); }
.fp-grade-letter.mid { color: var(--accent); }
.fp-grade-letter.bad { color: #b03a1e; }
.fp-grade-score { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.fp-grade-score .divisor { font-size: 11px; font-weight: 400; color: var(--ink3); }
.fp-grade-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink3); margin-top: 5px; }

/* --------- SUB-SCORES --------- */
.fp-subscores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.fp-subscore { text-align: center; position: relative; cursor: help; }
.fp-subscore-label { font-size: 11px; color: var(--ink3); margin-bottom: 5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 3px; }
.fp-info-icon { font-size: 10px; color: var(--ink4); transition: color 0.15s; }
.fp-subscore:hover .fp-info-icon { color: var(--accent); }
.fp-subscore-value { font-size: 18px; font-weight: 700; color: var(--ink); font-family: var(--font-d); line-height: 1; }
.fp-subscore-bar { height: 4px; background: var(--surface3); border-radius: 2px; margin-top: 7px; overflow: hidden; }
.fp-subscore-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.fp-subscore-bar-fill.good { background: var(--green); }
.fp-subscore-bar-fill.mid { background: var(--accent); }
.fp-subscore-bar-fill.bad { background: #b03a1e; }

/* Tooltip on hover */
.fp-subscore[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  width: 220px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.fp-subscore[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
}
.fp-subscore:hover::after,
.fp-subscore:hover::before { opacity: 1; }

/* --------- KEY STATS --------- */
.fp-keystats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--surface3); margin-bottom: 28px; }
.fp-keystat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink3); margin-bottom: 3px; }
.fp-keystat-value { font-size: 14px; font-weight: 700; color: var(--ink); }

/* --------- SECTION HEADERS --------- */
.fp-section { margin-bottom: 28px; }
.fp-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 24px; flex-wrap: wrap; }
.fp-accent-bar { width: 3px; height: 22px; background: var(--accent); border-radius: 2px; flex-shrink: 0; align-self: center; }
.fp-accent-bar.blue { background: var(--blue); }
.fp-section-heading { font-family: var(--font-b); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; line-height: 22px; letter-spacing: -0.1px; }
.fp-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 11px; border-radius: 100px; background: var(--accent-bg); color: var(--accent); margin-left: auto; }
.fp-pill.blue { background: var(--blue-bg); color: var(--blue); }

/* --------- BULLET CARD --------- */
.fp-bulletcard { background: var(--white); border: 1px solid var(--surface3); border-radius: var(--radius-sm); padding: 14px 16px; border-left: 3px solid var(--accent); }
.fp-bulletcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.fp-bulletcard-index { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.07em; }
.fp-bulletcard-theme { font-size: 11px; color: var(--ink3); font-style: italic; margin-right: auto; margin-left: 10px; }
.fp-copy-btn { font-family: var(--font-b); font-size: 11px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--surface3); border-radius: 100px; padding: 4px 12px; cursor: pointer; transition: all 0.15s; }
.fp-copy-btn:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }
.fp-bulletcard-text { font-size: 13px; color: var(--ink); line-height: 1.6; }
.fp-bulletcard-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fp-signal-chip { font-size: 10px; color: var(--green-dark); background: var(--green-bg); padding: 2px 8px; border-radius: 100px; }
.fp-bulletcard-meta { font-size: 10px; color: var(--ink3); margin-top: 8px; }

/* --------- KEYWORD TABLE --------- */
.fp-keyword-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--surface3); border-radius: var(--radius-sm); overflow: hidden; }
.fp-keyword-table thead { background: var(--surface2); }
.fp-keyword-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink3); padding: 10px 14px; border-bottom: 1px solid var(--surface3); }
.fp-keyword-table td { padding: 10px 14px; font-size: 12px; color: var(--ink); border-bottom: 1px solid var(--surface3); }
.fp-keyword-table tr:last-child td { border-bottom: none; }
.fp-placement-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; }
.fp-placement-pill.title { background: var(--blue-bg); color: var(--blue); }
.fp-placement-pill.bullet { background: var(--accent-bg); color: var(--accent); }
.fp-placement-pill.backend { background: var(--green-bg); color: var(--green-dark); }
.fp-matched-yes { color: var(--green); font-weight: 700; }
.fp-matched-no { color: var(--accent); font-weight: 700; }
.fp-demand-high { color: var(--green-dark); font-weight: 700; }
.fp-demand-medium { color: var(--accent); font-weight: 600; }

/* --------- IMAGE CARD --------- */
.fp-imagecard { display: flex; gap: 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--surface3); border-radius: var(--radius-sm); align-items: flex-start; }
.fp-image-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 9px; border-radius: 100px; flex-shrink: 0; height: fit-content; }
.fp-image-status.missing { background: var(--accent); color: var(--white); }
.fp-image-status.partial { background: #e9a53b; color: var(--white); }
.fp-image-content { flex: 1; }
.fp-image-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.fp-image-brief { font-size: 12px; color: var(--ink2); line-height: 1.6; }

/* --------- BOTTOM UNLOCK CTA --------- */
.fp-unlock-card { margin-top: 32px; padding: 28px 24px; background: linear-gradient(135deg, var(--accent-bg) 0%, var(--surface) 100%); border: 2px solid var(--accent); border-radius: var(--radius); text-align: center; }
.fp-unlock-title { font-family: var(--font-d); font-size: 22px; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.3px; }
.fp-unlock-sub { font-size: 13px; color: var(--ink2); line-height: 1.65; max-width: 520px; margin: 0 auto 18px; }
.fp-unlock-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--white); font-family: var(--font-b); font-size: 14px; font-weight: 700; padding: 12px 26px; border-radius: 100px; border: none; cursor: pointer; transition: all 0.15s; }
.fp-unlock-btn:hover { background: #a53f20; transform: translateY(-1px); }
.fp-unlock-hint { font-size: 11px; color: var(--ink3); margin-top: 10px; font-style: italic; }
.fp-unlock-sub-link { display: block; margin-top: 14px; font-size: 11px; color: var(--ink3); text-decoration: none; }
.fp-unlock-sub-link strong { color: var(--accent); }

/* --------- STICKY CTA BAR --------- */
.fp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); color: var(--white); padding: 12px 20px; z-index: 100; transform: translateY(100%); transition: transform 0.25s ease; box-shadow: 0 -4px 20px rgba(15,14,13,0.25); }
.fp-sticky-cta.visible { transform: translateY(0); }
.fp-sticky-inner { max-width: 1020px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fp-sticky-text { display: flex; flex-direction: column; gap: 2px; }
.fp-sticky-text strong { font-size: 13px; color: var(--white); }
.fp-sticky-text span { font-size: 11px; color: rgba(255,255,255,0.7); }
.fp-sticky-btn { background: var(--accent); color: var(--white); font-family: var(--font-b); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 100px; border: none; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.fp-sticky-btn:hover { background: #a53f20; }

/* --------- RESPONSIVE --------- */
@media (max-width: 720px) {
  .fp-scorecard { grid-template-columns: 90px 1fr; gap: 14px; }
  .fp-grade-block { padding-right: 14px; }
  .fp-grade-letter { font-size: 44px; }
  .fp-subscores { grid-template-columns: repeat(3, 1fr); gap: 10px; row-gap: 14px; }
  .fp-keystats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fp-header-title { font-size: 18px; }
  .fp-subscore[data-tooltip]::after { width: 180px; font-size: 10px; }
  .fp-sticky-inner { flex-direction: column; gap: 8px; text-align: center; }
  .fp-sticky-text { align-items: center; }
  .fp-sticky-btn { width: 100%; }
}

/* Hide sticky CTA on print */
@media print {
  .fp-sticky-cta { display: none !important; }
}

/* ========================================================================
   STAGE 2N — Print layout hardening for 30-Day Action Plan
   (replaces Stage 2m task rules — flex-based, explicit text-wrap)
======================================================================== */

@media print {
  /* STAGE 2N — Switch from grid to flex to avoid min-width:auto gotcha
     that was causing character-by-character line wrapping in PDFs */
  .v2-plan-task {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    page-break-inside: avoid;
  }

  /* Explicit size so checkbox doesn't grow and eat text space */
  .v2-plan-task input[type="checkbox"] {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-top: 2px;
  }

  /* Critical fix: force sane text-wrapping regardless of cascade */
  .v2-plan-task-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none;
    line-height: 1.45;
  }

  /* Hardened with !important in case specificity is lost elsewhere */
  .v2-plan-task-time {
    display: none !important;
  }

  /* Keep week headers readable but compact */
  .v2-plan-week-header {
    padding: 8px 12px;
    font-size: 10px;
    page-break-after: avoid;
  }

  /* Don't let a week get split across pages if possible */
  .v2-plan-week {
    page-break-inside: avoid;
  }

  /* Remove hover/interactive UI that doesn't apply to paper */
  .v2-cross-sell-btn {
    background: transparent !important;
    color: var(--ink) !important;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
  }
}

/* ========================================================================
   STAGE 3.5 B — Launch Plan image plan clean list
======================================================================== */
.v2-image-plan-list .v2-image-brief {
  padding: 18px 0;
  border-bottom: 1px solid var(--surface3);
}
.v2-image-plan-list .v2-image-brief:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.v2-image-plan-list .v2-image-label {
  display: inline-block;
  font-family: var(--font-b);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink3);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.v2-image-plan-list h4 {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: normal;
  color: var(--ink);
  margin: 2px 0 6px 0;
}
.v2-image-plan-list p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.55;
  margin: 0;
}

/* ========================================================================
   STAGE 3.5 E — Forecast caveat callout at top of forecast sections
======================================================================== */
.v2-forecast-caveat {
  font-size: 13px;
  color: var(--ink3);
  padding: 14px 18px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  line-height: 1.55;
}
.v2-forecast-caveat em {
  font-style: italic;
}

/* ========================================================================
   PHASE 3 MOBILE WIRING — Mock R + Mock S full-report mobile aesthetic.
   Pure CSS additions at <=760px. The existing @media(max-width:720px) block
   above already handles structural adaptation (grid stacking, column counts).
   This block layers Mock R/S's tighter mobile aesthetic on top: hero-feel
   scorecard, tap-friendly fix cards, tighter section titles, thumb-friendly
   copy blocks, mobile-optimized priority rank cards. No HTML or JS changes —
   safe to ship without modifying the renderer engine.
======================================================================== */
@media (max-width: 760px) {
  /* Overflow-safety on mobile: clip any wide chips/links that don't wrap, and
     force flex children to be allowed to shrink (default min-width:auto can
     prevent shrinking and cause horizontal overflow on narrow viewports). */
  .v2-report { overflow-x: hidden; min-width: 0; }
  .v2-report * { min-width: 0; }
  .v2-report p, .v2-report li, .v2-report .v2-fix-tldr, .v2-report .v2-card,
  .v2-report .v2-section-title, .v2-report .v2-fix-title { overflow-wrap: break-word; word-wrap: break-word; }

  /* CRITICAL — iOS Safari zoom-out fix.
     Inline-styled chips/buttons/cells with white-space:nowrap force
     their parent's scrollWidth wider than viewport at narrow widths.
     iOS Safari interprets that as "page wider than device" and ZOOMS OUT
     to fit, which makes the page look like the desktop version. Force-wrap
     all inline elements inside the report so scrollWidth never exceeds viewport. */
  .v2-report span,
  .v2-report a,
  .v2-report button,
  .v2-report td,
  .v2-report th,
  .v2-report .v2-tag {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  /* Inline flex children with flex-shrink:0 also fight viewport. Let them shrink. */
  .v2-report [style*="flex-shrink:0"],
  .v2-report [style*="flex-shrink: 0"] {
    flex-shrink: 1 !important;
  }

  /* Tighten section padding throughout the report on mobile */
  .v2-section { margin-bottom: 24px; padding: 0 4px; }
  .v2-card { padding: 18px 18px; border-radius: 16px; }
  .v2-card-soft { padding: 16px 16px; border-radius: 14px; }

  /* Mock R/S "hero card" feel — make scorecard more dramatic on mobile */
  .v2-scorecard { padding: 18px 16px !important; border-radius: 18px; }
  .v2-grade-letter { font-size: 60px !important; line-height: 1 !important; }
  .v2-grade-band { font-size: 11px; letter-spacing: 0.1em; }

  /* Section titles — tighter, more visual hierarchy on mobile */
  .v2-section-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
  }
  .v2-section-title-left { font-size: 22px !important; }
  .v2-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 8px;
  }

  /* Mock R/S "priority rank card" — make .v2-fix-card pop on mobile.
     Status: tighter padding, larger title, clearer rank circle. */
  .v2-fix-card {
    padding: 16px 16px !important;
    border-radius: 14px;
    margin-bottom: 10px;
  }
  .v2-fix-rank,
  .v2-priority-rank {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
  .v2-fix-title { font-size: 15px !important; line-height: 1.25 !important; }
  .v2-fix-tldr { font-size: 12.5px !important; line-height: 1.55 !important; }

  /* Mock R/S impact/effort/lift chips — slightly larger tap targets */
  .v2-chip {
    font-size: 10px !important;
    padding: 4px 9px !important;
    letter-spacing: 0.04em;
  }

  /* Mock R/S copy block — thumb-friendly with breathing room */
  .v2-copy-block {
    padding: 16px 16px !important;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .v2-copy-label { font-size: 10px !important; letter-spacing: 0.1em; }
  .v2-copy-text { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* Mock R/S keyword rows — list-style instead of grid */
  .v2-keyword-row {
    padding: 10px 0 !important;
    font-size: 13px !important;
    gap: 10px;
  }

  /* Mock R/S image audit slot — left-edge color border for status */
  .v2-image-slot {
    padding: 12px 12px !important;
    border-radius: 12px;
    border-left-width: 3px;
  }
  .v2-image-num {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  /* Mock R/S week cards — tighter on mobile */
  .v2-plan-week,
  .v2-action-week {
    padding: 14px 14px !important;
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .v2-plan-week-num,
  .v2-action-week-num {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  /* Mock R/S forecast scenarios — tighter, mid-case still highlighted */
  .v2-forecast-row {
    padding: 14px 14px !important;
    border-radius: 12px;
    gap: 12px;
  }

  /* Mock R/S AI Search Readiness card — purple gradient on mobile */
  .v2-ai-card {
    padding: 16px 16px !important;
    border-radius: 14px;
  }

  /* Mock R/S competitor benchmark — tighter row layout */
  .v2-competitor-row {
    padding: 14px 14px !important;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  /* Tighten focus/full mode toggle bar on mobile (already sticky) */
  .v2-mode-toggle-bar {
    padding: 8px 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  /* Subscores 3-up stays from 720 rule but tighten cell padding */
  .v2-subscore-cell { padding: 10px 8px !important; }
  .v2-subscore-num { font-size: 22px !important; }
  .v2-subscore-label { font-size: 9.5px !important; letter-spacing: 0.06em; }
}