/* ============================================================
   Idea write-up page
   Long-form breakdown of a single business idea.
   Loaded after styles.css, so it inherits all --color-* tokens,
   the nav, footer, subscribe form, and modal.
   Every section below maps to one block of the supplied markdown
   (+ optional PNG). See idea.html for the slot comments.
   ============================================================ */

/* ---------- Shell ---------- */
/* Width mirrors the header: content caps at --maxw and the gutter sits
   outside it, so the left/right edges line up with the nav and home page. */
.idea {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(64px, 9vw, 112px);
}

/* Body prose runs the full content width so it lines up with the overview
   row, the section headings, and the rest of the site. */
.idea-prose { max-width: none; }
.steps,
.kw-scroll { max-width: 760px; }
.idea-hero__title { max-width: none; }

/* Section rhythm. Sections are not a strict sequence, so they carry a
   labelled eyebrow rather than a running number. */
.idea-section { margin-top: clamp(24px, 3.5vw, 48px); }
/* The overview row (graph + scores) continues the pitch rather than starting a
   new section, so it sits close under the disclaimer instead of taking a full
   section gap. */
.idea-section:has(> .idea-overview) { margin-top: 12px; }

.idea-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The rainbow tick is the page's signature device, repeated as a small
   brand mark ahead of every section label. */
.idea-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-stripes);
}

.idea-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 20px;
}

/* ---------- Prose ---------- */
.idea-prose p {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.idea-prose p:last-child { margin-bottom: 0; }
.idea-prose strong { font-weight: 600; }

/* Hyperlinks: the brand stripe blue, bold, to stand out in body copy. */
.idea-prose a,
.signal__quote a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.idea-prose a:hover,
.signal__quote a:hover { color: var(--color-link-hover); }

/* Educational disclaimer at the foot of the pitch. */
.idea-disclaimer {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-style: italic;
  color: var(--muted);
}
/* Sits close under the prose, overriding the section's default 24px rhythm. */
.idea-prose + .idea-disclaimer { margin-top: 10px; }

/* ---------- Trend chart (responsive, generated from trend.csv) ----------
   The plot SVG uses preserveAspectRatio="none" so the curve fills the
   column and compresses as it narrows; the line stays crisp via
   non-scaling-stroke. All text is HTML, so it never distorts. */
/* Padded on all sides; a flex column so the plot fills the whole card. */
.trend {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 18px 20px 30px;
}
.trend__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
/* The graph title uses the site's bold header face. */
.trend__kw {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  color: var(--ink);
}
/* "growth" sits centred under the number. */
.trend__growth {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  color: #61bb46; /* ebe-trend-chart green */
  white-space: nowrap;
}
.trend__growth small { font-weight: 400; font-size: 13px; color: var(--muted); }
/* Plot fills the remaining card height; left column holds the y axis. */
.trend__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 8px;
}
.trend__yaxis {
  position: relative;
  flex: none;
  width: 22px;
}
.trend__y {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.trend__chart {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.trend__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.trend__grid { stroke: #f3f3f0; stroke-width: 1; } /* ebe-trend-chart gridline */
.trend__line {
  fill: none;
  stroke: #159cd9; /* ebe-trend-chart blue */
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trend__area { stroke: none; }
.trend__x {
  position: absolute;
  bottom: -20px;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Hero / header ---------- */
.idea-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.idea-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-stripes);
}

.idea-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
}

.idea-hero__dek {
  max-width: 640px;
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--muted);
}

.idea-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.idea-tags li {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Supplied hero PNG sits full reading-width under the header. */
.idea-figure {
  margin: 32px 0 0;
}
.idea-figure img {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
}
.idea-figure figcaption {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-soft);
}

/* ---------- Generic data card ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}

/* ---------- Overview row: search trend graph + scorecard ---------- */
.idea-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: stretch;
}
/* The stacked boxes set the row height; the chart fills the space beside them
   so its top and bottom line up with the top of the first box and the bottom
   of the last. The image is positioned absolutely so it never imposes its own
   (larger) intrinsic height on the row. */
.idea-overview__chart {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.idea-overview__chart img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}
/* Right column matches the graph height exactly: scorecard keeps its
   natural size and the categorization box absorbs the remaining space. */
.idea-overview__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.idea-overview__panel .category {
  padding: 20px;
}

/* Until a real graph image is dropped into the idea folder, the chart slot
   shows a quiet placeholder that still fills the column and matches height. */
.idea-overview__chart--empty {
  min-height: 280px;
  background: var(--surface);
}
.chart-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.chart-placeholder svg {
  width: 52px;
  height: 52px;
  color: var(--accent);
  opacity: 0.55;
}
.chart-placeholder span {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Scorecard (vertical: big number on top, bars below) ---------- */
.scorecard {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
}
/* Brand stripe pinned to the top edge of the card. */
.scorecard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand-stripes);
}

.scorecard__overall {
  text-align: left;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.scorecard__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.scorecard__value span {
  font-size: 0.4em;
  color: var(--muted);
  letter-spacing: 0;
}
.scorecard__label {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.scorecard__meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.meter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
}
/* Scores never break across lines; the label is the side that wraps. */
.meter__score { font-weight: 600; color: var(--accent); white-space: nowrap; }
.meter__track {
  height: 6px;
  border-radius: 999px;
  background: #e7e9ee;
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: var(--val, 0%);
  border-radius: 999px;
  background: var(--accent);
}

/* ---------- Categorization box ---------- */
.category__title {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.category__grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.category__grid dt {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}
.category__grid dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
}
.category__trend {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.category__trend-label {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}
.category__trend-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- Stat callouts ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
}
.stat {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stat__label {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Community signals ---------- */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.signal__platform {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.signal__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.signal__handle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.signal__count {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.signal__quote {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* Smaller cards now that the strength badge is gone. */
.signal { padding: 18px 20px; }
.signal__platform { margin-bottom: 8px; }
.signal__name { margin-bottom: 8px; }

/* The title doubles as the link to the source: looks like a heading,
   reveals the link colour and underline on hover. */
a.signal__handle {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a.signal__handle:hover { color: var(--color-link-hover); }

/* ---------- Market gap matrix (2x2) ---------- */
.matrix {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
/* Centre cross-hairs. */
.matrix::before,
.matrix::after {
  content: "";
  position: absolute;
  background: var(--border);
}
.matrix::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.matrix::after { top: 50%; left: 8%; right: 8%; height: 1px; }

.matrix__axis {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix__axis--top { top: 12px; left: 50%; transform: translateX(-50%); }
.matrix__axis--bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
.matrix__axis--left { left: 14px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.matrix__axis--right { right: 14px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }

.matrix__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.matrix__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
}
.matrix__dot span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
/* The opening — where the idea sits. */
.matrix__dot--gap::before {
  width: 16px;
  height: 16px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(61, 90, 128, 0.16);
}
.matrix__dot--gap span { color: var(--accent); font-weight: 700; }

/* ---------- Value equation ---------- */
.equation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.equation__item { padding: 20px; }
.equation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.equation__name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
/* Arrow shows the lever direction: up = maximise, down = minimise. */
.equation__dir {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.equation__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Value ladder ---------- */
/* An ascending set of offers shown as numbered boxes (2x2 for four tiers),
   so the step order is explicit and the section fills the width. */
.ladder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
/* Number + fixed stage label sit together at the top of each box. */
.rung__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The step number, so readers see the ladder order at a glance. */
.rung__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  flex: none;
}
/* Fixed stage title, styled like the community-signals eyebrow labels. */
.rung__stage {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Top rung carries the brand stripe as a left edge. */
.rung--top {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: #eef1f5;
}
.rung--top::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-stripes);
}
.rung__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.rung__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
/* Price pinned to the foot of the box so prices line up across a row. */
.rung__price {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- Keyword / search table ---------- */
/* Wrapper lets the table scroll within itself on narrow screens instead
   of forcing the whole page wider than the viewport. */
.kw-scroll { overflow-x: auto; }
.kw-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.kw-table th,
.kw-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.kw-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kw-table td:first-child,
.kw-table th:first-child { padding-left: 0; }
.kw-table td { color: var(--ink); }
.kw-table tbody tr:last-child td { border-bottom: 0; }
.kw-table__num { text-align: right; white-space: nowrap; }
.kw-table__up { color: var(--accent); font-weight: 600; }

/* ---------- Execution steps ---------- */
/* A real build sequence, so steps are numbered. */
.steps { display: grid; gap: 24px; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.step__title {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.step__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- ACP triad ---------- */
.acp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.acp__role {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.acp__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- Closing CTA ---------- */
.idea-cta {
  margin-top: clamp(32px, 4.5vw, 56px);
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  background: var(--surface);
  border-radius: var(--radius-card);
  text-align: center;
}
.idea-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.idea-cta__text {
  max-width: 420px;
  margin: 0 auto 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.idea-cta .btn--primary {
  height: 48px;
  padding: 0 28px;
}

/* ---------- Categorization box in hero ---------- */
.idea-hero__category {
  margin: 32px 0 0;
  max-width: 620px;
}

.idea-target__profile { margin-top: 24px; }

/* ---------- Definition grid (target customer, execution spec) ---------- */
.profile {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.profile dt {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}
.profile dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Inline callouts (wedge, gap, revenue, strategy) ---------- */
.wedge {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin: 18px 0 0;
  padding: 14px 20px 14px 22px;
  background: var(--surface);
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.wedge::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-stripes);
}
.wedge__label { font-weight: 600; color: var(--accent); margin-right: 6px; }

.gap {
  max-width: 820px;
  margin: 20px 0 0;
  padding: 18px 20px;
  background: #eef1f5;
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.gap__label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Market gap reframed as openings: a plain lead statement (no box, no label),
   then the opportunity angles as cards. */
.gap-lead {
  max-width: none;
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.gap-angles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gap-angle { padding: 18px 20px; }
.gap-angle__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.gap-angle__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.revenue {
  max-width: 760px;
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.revenue__label { font-weight: 600; color: var(--accent); margin-right: 6px; }

/* ---------- Why now shifts ---------- */
.shifts {
  max-width: 760px;
  margin: 24px 0 0;
  display: grid;
  gap: 10px;
}
.shift {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.shift__kind {
  flex: none;
  min-width: 76px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Proof signal strength ---------- */
.signal__strength {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Scores block (six axes + composite + tier) ---------- */
.scorecard--scores {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: 32px;
}
.scorecard--scores .scorecard__overall {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* ---------- Secondary note prose ---------- */
.idea-prose--note { margin-top: 20px; }
.idea-prose--note p { font-size: 14px; color: var(--muted); }

/* ---------- Consistent in-section rhythm ----------
   One uniform gap between every stacked block in a section (intro prose to
   boxes, box to box, prose to callout) so the distance between body text and
   the cards never varies from one section to the next. Placed after the block
   rules above so it wins the equal-specificity tie and normalises their
   assorted top margins (some were 0, some 18-24px). */
.idea-section > * + * { margin-top: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  .idea-hero__title,
  .idea-section__title,
  .scorecard__value,
  .stat__value,
  .signal__handle,
  .rung__name,
  .step__title,
  .gap-angle__title,
  .idea-cta__title {
    text-shadow:
      0 0 0.8px currentColor,
      0 0 0.8px currentColor,
      0 0 0.8px currentColor;
  }

  .idea-overview { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: 1fr; }
  /* Stacked, the chart no longer stretches to match the boxes, so give the
     plot a tall floor to stay readable. */
  .trend__plot { min-height: 240px; }
  .scorecard { padding: 24px 22px; }
  .scorecard__meters { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .signal-grid { grid-template-columns: 1fr; }
  .gap-angles { grid-template-columns: 1fr; }
  .profile { grid-template-columns: 1fr; }
  .scorecard--scores { grid-template-columns: 1fr; gap: 24px; padding: 24px 22px; }
  .equation { grid-template-columns: 1fr; }
  .acp { grid-template-columns: 1fr; }

  .rung { flex-wrap: wrap; gap: 6px 16px; }

  .matrix { max-width: 100%; }
  .matrix__dot span { font-size: 10px; }

  .kw-table th,
  .kw-table td { padding: 12px 8px; font-size: 13px; }
}

/* ============================================================
   /idea-database — the Idea Database listing
   A centered grid of report cards, three across at full width.
   Each card: a live thumbnail of the report top inside a fixed
   frame, then the title and a short excerpt. The title link is
   stretched over the whole card, and the hover recolours the card
   border and title in the hyperlink blue to say so. No shadows.
   ============================================================ */
.idea-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  /* 3 x 352px + 2 x 32px gap = 1120 = --maxw, so a full desktop shows
     exactly three across; narrower screens drop to two, then one, the
     tracks flexing between the minmax bounds. */
  grid-template-columns: repeat(auto-fill, minmax(288px, 352px));
  justify-content: center;
  gap: 32px;
}
.idea-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 24px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  transition: border-color 160ms ease;
}
.idea-card:hover { border-color: var(--color-link); }
.idea-card:hover .idea-card__title { color: var(--color-link); }

/* Thumbnail: a live, scaled-down render of the report top (hero, the first
   paragraph of the pitch with a decorative Read more line, then the overview
   dashboard), reused straight from the report markup so it can never drift
   out of sync.

   Framing: the mini page lays out at one fixed natural width (940px) and one
   fixed scale on every card, so every thumbnail has identical resolution; the
   frame's white space absorbs the differences in content height between
   ideas. transform (not zoom) does the shrinking: WebKit keeps text inside a
   zoomed subtree at readable size (iOS text autosizing boosts it back up),
   which blew the preview up to near full size and cropped it on iPhones and
   in Safari. transform scales the painted result uniformly on every engine.
   The unscaled layout box overflows the frame equally on all sides under the
   flex centering, so the scaled preview stays dead centre with no crop-window
   arithmetic. The frame height fits the tallest fixture at the current scale,
   plus breathing room. */
.idea-card__thumb {
  --pv-scale: 0.24;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 248px;
  /* The image sits closer to the card edge than the text does: it pulls
     8px into the card's 16px padding on its top and sides only. */
  margin: -8px -8px 0;
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}

/* The mini report page. Pin every viewport-dependent size to its desktop
   value: the report sizes these with vw clamps and restacks them under
   680px, and the thumbnail must render identically on every device. */
.idea-card__page.idea {
  transform: scale(var(--pv-scale, 1));
  flex: none;
  width: 940px;
  max-width: none;
  margin: 0;
  padding: 24px 32px;
  pointer-events: none;
}
.idea-card__page .idea-hero__title { font-size: 64px; }
.idea-card__page .idea-overview {
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
}
.idea-card__page .trend__kw,
.idea-card__page .trend__growth { font-size: 32px; }
.idea-card__page .trend__plot { min-height: 0; }
.idea-card__page .scorecard { padding: 20px; }
.idea-card__page .scorecard__value { font-size: 54px; }
.idea-card__page .scorecard__meters { grid-template-columns: 1fr 1fr; }

/* Teaser: thumbnail-only markup. The first pitch paragraph plus a Read more
   line, so the slice reads like a cropped report page; the real report shows
   the full prose and no Read more. */
.idea-card__page .pv-teaser { margin: 24px 0 0; }
.idea-card__page .pv-more {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-link);
}

.idea-card__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* One line only: long titles end in an ellipsis instead of wrapping,
     so every card keeps the same quiet rhythm. The full title is always
     visible inside the thumbnail. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Colour lives on the h3, not the anchor: the truncation ellipsis is
     painted by this element, so this is what keeps it in step with the
     text on hover. */
  color: var(--color-ink);
  transition: color 160ms ease;
}
.idea-card__title a { color: inherit; }
/* Stretch the title link over the whole card, so anywhere on the card is
   clickable; the card hover above signals it. */
.idea-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.idea-card__excerpt {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}