/* ===== InView Insights & Editorial layer — shared component styles =====
   Loaded by: insights.html, the 4 insights-*.html articles, methodology.html,
   and (for the new footer/nav-insights-item classes only) index.html and
   what-you-get.html. Reconciled against the site's own existing design
   tokens (see index.html's :root) rather than the design-reference file's
   token set — this file defines only NEW tokens the base site doesn't
   already have (the dark-panel text scale), it never redefines an
   existing one. */

:root {
  --dark-line: #2A2E2B;
  --dark-hi: #F2F3EF;
  --dark-mid: #A8AEA6;
  --dark-mid-2: #D6D9D3;
  --dark-lo: #8E948C;
  --dark-lo-2: #71776F;
  --olive-on-dark: #A3C255;
  --citron-tint: #F5FAE6;
  --citron-tint-line: #DCEBA8;
}

/* ===== Nav — "Insights" item active state ===== */
.nav-links a.is-active,
.nav-mobile-menu a.is-active {
  color: var(--ink) !important;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--citron);
}

/* ===== Footer — 3-column restructure (site-wide) =====
   Deliberately kept in the site's existing light/paper palette, not the
   design reference's dark band — the live site has no dark footer
   anywhere today, and introducing one would be a visual-identity change
   beyond "restructure the link list into three columns." Every page
   loading this file supplies its own `footer { background: var(--paper);
   border-top: 1px solid var(--line); ... }` shell, matching index.html's
   existing footer exactly; this file only styles the grid of columns
   inside it. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 36px 40px;
  margin-bottom: 36px;
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer-col-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer-col a { font-size: 15px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--ink); text-decoration: none; }
.footer-col-brand .footer-tagline { margin-top: 0; font-size: 14px; color: var(--ink-soft); max-width: 36ch; line-height: 1.6; }
.footer-disclaimer { font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; max-width: 78ch; border-top: 1px solid var(--line); padding-top: 24px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 20px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); flex-wrap: wrap; gap: 8px; }

/* ===== Article reading-column grid ===== */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
}
.reading-col { grid-column: 2; }
.wide-col { grid-column: 1 / -1; }

.article-header {
  grid-column: 2;
  padding: 44px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 640px) { .article-header { padding-top: 28px; } }
.article-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.article-kicker a { color: var(--citron-text); }
.article-kicker .sep { color: var(--line-strong); }
.article-kicker .meta { color: var(--ink-faint); }
.article-header h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.article-dek { font-size: 20px; line-height: 1.55; color: var(--ink-soft); }
.article-meta-rule {
  margin-top: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.article-body { grid-column: 2; padding-top: 34px; }
.article-body .lede { font-size: 19.5px; line-height: 1.68; color: #2E332F; margin-bottom: 26px; }
.article-body p { font-size: 18px; line-height: 1.72; color: var(--ink-body); margin-bottom: 24px; }
.article-body h2 { font-size: 29px; line-height: 1.18; letter-spacing: -0.03em; margin: 52px 0 18px; }
.article-body h3 { font-size: 21px; line-height: 1.28; letter-spacing: -0.02em; margin: 36px 0 14px; }
.article-body .q-index {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--citron-text);
  margin-bottom: 10px;
}
.article-body .pull-statement {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
  padding-left: 20px;
  border-left: 2px solid var(--citron);
}
.article-body .search-query {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.article-body .search-query .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }
.article-body .search-query .q { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }

/* Buyer question (dark) */
.buyer-question {
  grid-column: 2;
  margin-bottom: 24px;
  background: var(--ink);
  border-radius: 12px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.buyer-question .bq-label { display: flex; align-items: center; gap: 8px; }
.buyer-question .bq-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--citron); flex: none; }
.buyer-question .bq-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--dark-lo); }
.buyer-question p { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--dark-hi); margin: 0; }
.buyer-question .bq-rule { height: 1px; background: var(--dark-line); }
.buyer-question .bq-set { display: flex; flex-direction: column; gap: 12px; }
.buyer-question .bq-set-item { display: flex; gap: 12px; }
.buyer-question .bq-set-num { font-family: var(--font-mono); font-size: 11px; color: var(--dark-lo-2); padding-top: 3px; flex: none; }
.buyer-question .bq-set-text { font-size: 15.5px; line-height: 1.5; color: var(--dark-hi); }
.buyer-question .bq-tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--dark-mid); }
.buyer-question .bq-tags span { padding: 5px 10px; border: 1px solid var(--dark-line); border-radius: 99px; }

/* Key takeaway */
.key-takeaway {
  grid-column: 2;
  margin: 14px 0 34px;
  background: var(--citron-tint);
  border: 1px solid var(--citron-tint-line);
  border-radius: 12px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.key-takeaway .kt-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--citron-text); }
.key-takeaway h3 { font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); }
.key-takeaway p { font-size: 17.5px; line-height: 1.65; color: #2E332F; }

/* Wide: Figure / two-path flow */
.figure-wide {
  grid-column: 1 / -1;
  margin: 22px 0 40px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.figure-wide .figure-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 8px; display: block; }
.figure-wide .figure-caption { font-size: 17px; color: var(--ink-soft); max-width: 68ch; margin: 0; }
.flow-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.flow-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 26px; display: flex; flex-direction: column; }
.flow-card.is-ai { border-color: var(--line-strong); border-left: 2px solid var(--citron); }
.flow-card .flow-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-faint); }
.flow-card.is-ai .flow-label { color: var(--citron-text); }
.flow-steps { display: flex; flex-direction: column; margin-top: 18px; }
.flow-step {
  font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-body);
}
.flow-step.is-strong { font-weight: 600; color: var(--ink); }
.flow-step.is-end { border-color: var(--line-strong); background: var(--surface-2); font-weight: 600; color: var(--ink); }
.flow-step.is-highlight { border-color: var(--citron); background: var(--citron-tint); color: #2E332F; }
.flow-connector { width: 1px; height: 13px; background: var(--line-strong); margin-left: 22px; }
.flow-connector.is-highlight { background: var(--citron); }

/* Inline pill flow (horizontal) */
.pill-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15.5px; }
.pill-flow .pill { padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; }
.pill-flow .pill.is-highlight { border-color: var(--citron); background: var(--citron-tint); }
.pill-flow .pill.is-end { border-color: var(--line-strong); background: var(--surface-2); }
.pill-flow .arrow { color: var(--line-strong); }
.flow-card .flow-caption { font-size: 17px; line-height: 1.6; color: #2E332F; margin-top: auto; padding-top: 14px; }

/* Big stat */
.big-stat {
  grid-column: 1 / -1;
  margin: 16px 0 34px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  align-items: center;
}
.big-stat-num { display: flex; align-items: baseline; gap: 4px; }
.big-stat-num .n { font-size: clamp(60px, 7.4vw, 96px); font-weight: 700; line-height: 0.88; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.big-stat-num .u { font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.03em; color: var(--citron-text); }
.big-stat-copy { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
.big-stat-copy p { font-size: 18.5px; line-height: 1.58; color: #2E332F; margin: 0; }
.big-stat-copy .source { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-faint); }

/* Comparison pair */
.comparison-pair { grid-column: 1 / -1; margin: 20px 0 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.comparison-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.comparison-card.is-inview { border-color: var(--line-strong); border-left: 2px solid var(--citron); }
.comparison-card .cc-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-faint); }
.comparison-card.is-inview .cc-label { color: var(--citron-text); }
.comparison-card .cc-line { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.comparison-card .cc-list { display: flex; flex-direction: column; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* InView metric card */
.inview-metric {
  grid-column: 2;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 26px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  align-items: center;
}
.inview-metric .im-num-col { display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.inview-metric .im-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--citron-text); }
.inview-metric .im-num { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink); }
.inview-metric .im-num .unit { font-size: 26px; font-weight: 600; }
.inview-metric p { flex: 1; min-width: 240px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Question table */
.question-table { grid-column: 1 / -1; margin-bottom: 34px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.question-table .qt-row { padding: 18px 26px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
.question-table .qt-row:last-child { border-bottom: none; }
.question-table .qt-cat { width: 190px; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.question-table .qt-q { flex: 1; min-width: 260px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-body); }

/* Hairline wrapping-flex group — used for the seven-stage process, the
   "doesn't claim" cells, and any diagnostic-cell grid. Never a CSS grid
   with gap over a grey parent: an item count that doesn't divide evenly
   leaves empty tracks; wrapping flex cells always fill their row, and
   each cell draws its own hairlines via box-shadow. */
.hairline-group { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hairline-cell {
  flex: 1 1 260px;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hairline-cell.is-narrow { flex-basis: 150px; padding: 20px 18px 22px; }
.hairline-cell.is-marked { border-left: 2px solid var(--citron); }
.hairline-cell .hc-index { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.hairline-cell.is-marked .hc-index { color: var(--citron-text); }
.hairline-cell strong { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.hairline-cell p { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.hairline-cell .hc-title { font-size: 17.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* Pill tag row */
.pill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; font-size: 15px; }
.pill-tags span { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }

/* InView perspective (dark, wide) */
.inview-perspective {
  grid-column: 1 / -1;
  margin: 26px 0 40px;
  background: var(--ink);
  border-radius: 14px;
  padding: clamp(32px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.inview-perspective .ip-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--citron); }
.inview-perspective h3 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; color: var(--paper); max-width: 26ch; }
.inview-perspective .ip-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 40px; max-width: 900px; }
.inview-perspective .ip-body-single { display: flex; flex-direction: column; gap: 16px; max-width: 64ch; }
.inview-perspective .ip-col { display: flex; flex-direction: column; gap: 16px; }
.inview-perspective p { font-size: 17.5px; line-height: 1.68; color: var(--dark-mid); margin: 0; }
.inview-perspective .ip-close { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em; color: var(--paper); padding-top: 8px; }

/* Sources / related reading */
.article-sources {
  grid-column: 2;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-sources .as-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }
.article-sources .as-list { display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--ink-soft); }
.article-sources .as-list a { font-weight: 600; color: var(--ink); }
.related-reading { grid-column: 2; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.related-reading .rr-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }
.related-reading .rr-list { display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; }
.related-reading .rr-list a { font-weight: 600; color: var(--ink); }

/* Article / closing CTA card */
.editorial-cta {
  grid-column: 1 / -1;
  margin-top: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  padding: clamp(30px, 3.6vw, 46px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px 48px;
  align-items: center;
}
.editorial-cta .ec-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--citron-text); }
.editorial-cta h3 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; max-width: 24ch; margin: 8px 0; }
.editorial-cta p { font-size: 17px; line-height: 1.62; color: var(--ink-soft); max-width: 52ch; margin: 0; }
.editorial-cta .ec-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.editorial-cta .ec-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }

/* ===== /insights landing ===== */
.insights-hero { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.insights-hero h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch; }
.insights-hero p { font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }

.insights-columns { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.insights-col-research { flex: 1.35 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.insights-col-guides { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.insights-col-label {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.featured-artefact { background: var(--ink); border-radius: 12px; padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; }
.featured-artefact .fa-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--dark-lo); }
.featured-artefact > p { font-size: 15px; line-height: 1.5; color: var(--dark-mid-2); margin: 0; }
.featured-artefact .fa-rule { height: 1px; background: var(--dark-line); }
.featured-artefact .fa-block { display: flex; flex-direction: column; gap: 11px; }
.featured-artefact .fa-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--olive-on-dark); }
.featured-artefact .fa-label.is-muted { color: var(--dark-lo-2); }
.featured-artefact .fa-row { display: flex; align-items: baseline; gap: 12px; }
.featured-artefact .fa-row .idx { font-family: var(--font-mono); font-size: 11px; color: var(--dark-lo-2); }
.featured-artefact .fa-row .name { font-size: 14.5px; color: var(--dark-hi); }
.featured-artefact .fa-row .reason { font-size: 13px; color: var(--dark-lo); }
.featured-artefact .fa-absent { display: flex; align-items: center; gap: 12px; }
.featured-artefact .fa-absent .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--citron); flex: none; }
.featured-artefact .fa-absent .name { font-size: 14.5px; color: var(--dark-hi); }
.featured-artefact .fa-note { font-size: 13px; line-height: 1.55; color: var(--dark-lo); margin: 0; }

.research-card-copy { display: flex; flex-direction: column; gap: 14px; }
.research-card-copy .rc-meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; }
.research-card-copy .rc-meta .cat { color: var(--citron-text); }
.research-card-copy .rc-meta .sep { color: var(--line-strong); }
.research-card-copy .rc-meta .meta { color: var(--ink-faint); }
.research-card-copy h2 { font-size: clamp(26px, 3vw, 35px); font-weight: 600; line-height: 1.12; letter-spacing: -0.032em; max-width: 22ch; }
.research-card-copy p { font-size: 17px; line-height: 1.62; color: var(--ink-soft); max-width: 46ch; margin: 0; }
.research-card-copy .rc-read { font-size: 15.5px; font-weight: 600; color: var(--ink); }

.guide-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color 160ms ease;
}
.guide-card:hover { border-color: var(--line-strong); text-decoration: none; }
.guide-card .gc-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-faint); }
.guide-card h3 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.guide-card p { font-size: 16px; line-height: 1.58; color: var(--ink-soft); margin: 0; }

.guide-card.is-methodology { margin-top: 8px; border-left: 2px solid var(--citron); }
.guide-card.is-methodology .gc-meta { color: var(--citron-text); }
.methodology-chain { padding-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint); }
.methodology-chain .arrow { color: var(--line-strong); }
.methodology-chain .is-final { color: var(--citron-text); }

.insights-closing { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; justify-content: space-between; }
.insights-closing .ic-note { font-size: 16.5px; color: var(--ink-soft); max-width: 56ch; }
.insights-closing .ic-cats { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }

/* ===== /methodology ===== */
.methodology-hero { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.methodology-hero h1 { font-size: clamp(31px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch; }
.methodology-hero p { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.methodology-hero p.sub { font-size: 17px; max-width: 66ch; }
.methodology-facts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-soft); }
.methodology-facts span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }

.methodology-section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }

.methodology-prose-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px 56px; }
.methodology-prose-grid h2 { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 12px; }
.methodology-prose-grid p { font-size: 17px; line-height: 1.68; color: var(--ink-soft); margin: 0; }

.metric-cards { margin-top: 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.metric-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.metric-card .mc-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--citron-text); }
.metric-card .mc-num { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink); }
.metric-card .mc-num .unit { font-size: 28px; font-weight: 600; }
.metric-card p { font-size: 17px; line-height: 1.62; color: #2E332F; margin: 0; }
.metric-card .mc-fig { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-faint); }
.metric-card.is-held { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
.metric-card .mc-pill-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.metric-card .mc-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--citron-text); }

.measuring-change { margin-top: 60px; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 26px; }
.measuring-change .mch-head { display: flex; flex-direction: column; gap: 10px; }
.measuring-change h2 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; max-width: 26ch; }
.measuring-change p { font-size: 17px; line-height: 1.68; color: var(--ink-soft); max-width: 70ch; margin: 0; }
.rerun-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rerun-loop .glyph { font-family: var(--font-mono); font-size: 18px; color: var(--citron-text); }

.doesnt-claim { margin-top: 60px; display: flex; flex-direction: column; gap: 24px; }
.doesnt-claim .dc-head { display: flex; flex-direction: column; gap: 10px; }
.doesnt-claim h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; max-width: 28ch; }
.doesnt-claim-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 48px; padding-top: 8px; }
.doesnt-claim-notes p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ===== Homepage — "From InView" insights section ===== */
.homepage-insights { display: flex; flex-direction: column; gap: 28px; }
.homepage-insights-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 48px; align-items: end; }
.homepage-insights-head .hi-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 12px; display: block; }
.homepage-insights-head h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.14; letter-spacing: -0.03em; max-width: 24ch; margin-bottom: 12px; }
.homepage-insights-head p { font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 0; }
.homepage-insights-head .hi-explore { display: flex; justify-content: flex-end; font-size: 15.5px; font-weight: 600; }
.homepage-insights-head .hi-explore a { color: var(--ink); }
.homepage-insights-head .hi-explore a:hover { color: var(--citron-text); }
@media (max-width: 640px) { .homepage-insights-head .hi-explore { justify-content: flex-start; } }
.homepage-insights-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.hi-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  transition: border-color 160ms ease;
}
.hi-card:hover { border-color: var(--line-strong); text-decoration: none; }
.hi-card.is-research { flex: 2 1 340px; padding: 30px; gap: 14px; }
.hi-card.is-compact { flex: 1 1 220px; }
.hi-card .hc-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--citron-text); }
.hi-card.is-research h3 { font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.025em; }
.hi-card.is-compact h3 { font-size: 18.5px; font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; }
.hi-card p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin: 0; }
.hi-card .hc-note { font-size: 14px; line-height: 1.5; color: var(--ink-faint); }
.hi-card .hc-read { margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hi-card.is-compact .hc-read { font-size: 14.5px; color: var(--ink-soft); }

/* Inline contextual link, used inside existing homepage sections */
.insights-inline-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.insights-inline-link:hover { color: var(--citron-text); text-decoration: none; }

@media (max-width: 768px) {
  .article-header, .article-body, .buyer-question, .key-takeaway,
  .inview-metric, .article-sources, .related-reading {
    grid-column: 1 / -1;
  }
}