:root {
  --ink: #0f1419;
  --ink-2: #1f2530;
  --body: #4a5161;
  --muted: #7a818e;
  /* Page surface tokens (2026-05-02 — switched cream to clean white). */
  --line: #e7e8ec;
  --line-2: #f2f3f6;
  --paper: #ffffff;
  --surface-soft: #f7f8fa;
  --card: #ffffff;
  --midnight: #0b1018;
  /* Brand tokens (Eastbound Brand Guide Option 01).
     Signal Indigo #6366F1 → Vector Blue #60A5FA, left-to-right "eastbound". */
  --accent: #6366F1;
  --accent-mid: #6c81f6;
  --accent-blue: #60A5FA;
  --brand-gradient: linear-gradient(90deg, #6366F1 0%, #60A5FA 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(96,165,250,0.10) 100%);
  --accent-soft: #eef0fe;
  --positive: #1b8e55;
  --warning: #a56a00;
  --negative: #c8553d;
  --shadow: 0 24px 60px -34px rgba(15, 20, 25, 0.28);
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Merriweather", Georgia, serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: 0;
  overflow-x: hidden;
}

body.homepage {
  background: var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.page-shell {
  min-height: 100vh;
  background: var(--paper);
}

.homepage .page-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.ticker {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 36px;
  padding: 9px 48px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.ticker strong {
  color: var(--ink);
  font-weight: 500;
}

.ticker-lang {
  margin-left: auto;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 48px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.homepage .site-header {
  gap: clamp(16px, 2.4vw, 24px);
  padding-right: clamp(28px, 4vw, 48px);
  padding-left: clamp(28px, 4vw, 48px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  gap: 4px;
}

.brand-mark span {
  display: block;
  width: 18px;
  height: 3px;
  background: var(--ink);
}

.brand-mark span:nth-child(2) {
  width: 13px;
  background: var(--brand-gradient);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  color: var(--body);
  font-size: 14px;
}

.nav-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.button.dark {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.button.ghost {
  background: var(--card);
}

.button.large {
  min-height: 54px;
  padding: 0 24px;
  font-size: 15px;
}

.button.light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.button.outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.button.full {
  width: 100%;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.95fr);
  gap: 64px;
  padding: 86px 48px 96px;
  border-bottom: 1px solid var(--line);
}

.homepage .hero {
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr);
  gap: clamp(40px, 4.4vw, 56px);
  padding-right: clamp(32px, 4vw, 48px);
  padding-left: clamp(32px, 4vw, 48px);
}

.hero > *,
.report-preview,
.report-preview * {
  min-width: 0;
}

.hero-copy {
  align-self: center;
}

.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-flex;
  margin-right: 10px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 690px;
  margin: 22px 0 0;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.homepage h1 {
  font-size: clamp(52px, 5vw, 74px);
}

h1 em,
h2 em {
  color: var(--accent);
  font-style: normal;
}

.lede {
  max-width: 640px;
  margin: 28px 0 0;
  color: var(--body);
  font-size: 18px;
  line-height: 1.58;
}

.lede strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-actions {
  margin-top: 36px;
  flex-wrap: wrap;
}

.microcopy {
  margin: 16px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-preview {
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.report-head p {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
}

.report-head span,
.report-badge,
.answer-sample p,
.answer-sample small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-badge {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.score-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  padding: 28px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.score {
  margin: 0;
  font-size: 82px;
  line-height: 0.88;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.score span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
}

.score-label {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.score-delta {
  display: inline-flex;
  margin: 12px 0 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: #fcede9;
  color: var(--negative);
  font-family: var(--font-mono);
  font-size: 11px;
}

.benchmarks {
  display: grid;
  gap: 13px;
}

.metric-row {
  display: grid;
  grid-template-columns: 120px 1fr 42px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.metric-row span {
  color: var(--ink);
  font-weight: 600;
}

.metric-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
}

.metric-row i,
.mini-chart b {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-2);
}

.metric-row b,
.mini-chart b::before {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
  content: "";
}

.metric-row strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}

.answer-sample {
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.answer-sample h3 {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.answer-sample h3 span {
  display: block;
  color: var(--body);
  font-weight: 400;
}

.sample-answer {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--body);
  font-size: 13px;
  line-height: 1.6;
}

.sample-answer mark {
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.sample-answer span {
  color: var(--negative);
  border-bottom: 1px dashed var(--negative);
}

.deepseek-output {
  display: grid;
  gap: 10px;
}

.deepseek-output p,
.deepseek-output ol {
  margin: 0;
}

.deepseek-output ol {
  display: grid;
  gap: 7px;
  padding-left: 22px;
}

.deepseek-output li {
  padding-left: 2px;
}

.answer-sample small {
  display: block;
  margin-top: 10px;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stats-strip div {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}

.stats-strip div:last-child {
  border-right: 0;
}

.stats-strip span,
.stats-strip small,
.service-grid span,
.challenge-grid article > span,
.pillars span,
.insight-grid span,
.tile-index {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stats-strip strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.stats-strip small {
  color: var(--negative);
  letter-spacing: 0;
  text-transform: none;
}

.section {
  padding: 112px 48px;
  border-bottom: 1px solid var(--line);
}

.section-heading {
  max-width: 900px;
  margin-bottom: 56px;
}

.section-heading.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 56px;
  align-items: end;
}

.execution-head {
  display: grid;
  gap: 18px;
  place-items: center;
  width: min(100%, 980px);
  min-height: clamp(360px, 48vh, 540px);
  margin: 0 auto;
  padding: clamp(44px, 7vw, 92px) clamp(18px, 4vw, 64px);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 250, 247, 0.96)),
    var(--paper);
  text-align: center;
}

/* Simplified Section 02 head — no box, no background, just stacked
 * heading + flow line. 2026-05-03. Updated 2026-05-04 to align with
 * other section headings (e.g. 05 — Website check) by zeroing padding
 * across breakpoints and forcing left alignment over inherited grid
 * centering from .execution-head. */
.execution-head--simple {
  display: block;
  width: 100%;
  max-width: 980px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  place-items: start;
  justify-items: start;
  align-items: start;
}

.execution-head--simple .section-kicker {
  display: block;
  margin: 0 0 14px;
  text-align: left;
  align-self: start;
  justify-self: start;
}

.execution-head--simple h2 {
  margin: 0 0 22px;
  text-align: left;
}

.execution-head--simple .flow {
  margin: 0;
}

.execution-head > div {
  width: min(100%, 760px);
}

.section-heading h2,
.execution h2,
.faq h2 {
  margin: 14px 0 0;
  font-size: clamp(36px, 4.5vw, 58px);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.028em;
}

.section-heading p,
.execution p {
  margin: 18px 0 0;
  color: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

.execution-head p {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}

.cred-grid,
.challenge-grid,
.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* Two-card variant for the curated blog list (real articles only).
 * 2026-05-03. */
.insight-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

/* Three-card variant — same purpose as --two, used once we have three real
 * articles. 2026-05-04. */
.insight-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.insight-card-desc {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .insight-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .insight-grid--two,
  .insight-grid--three {
    grid-template-columns: 1fr;
  }
}

.cred-grid article,
.challenge-grid article,
.insight-grid article {
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.insight-grid .insight-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.insight-grid .insight-card article {
  height: 100%;
  position: relative;
  cursor: pointer;
}
.insight-grid .insight-card article::after {
  content: "Read →";
  position: absolute;
  bottom: 22px;
  left: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform: translateX(-4px);
}
.insight-grid .insight-card:hover {
  transform: translateY(-2px);
}
.insight-grid .insight-card:hover article {
  box-shadow: var(--shadow);
}
.insight-grid .insight-card:hover article::after {
  opacity: 1;
  transform: translateX(0);
}

.cred-grid h3,
.service-grid h3,
.challenge-grid h3,
.checks-list h3,
.steps h3,
.ecosystem-grid h3,
.pillars h3,
.insight-grid h3 {
  margin: 14px 0 10px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.cred-grid h3,
.service-grid h3 {
  margin-top: 0;
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border: 1px solid rgba(98, 92, 240, 0.2);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(98, 92, 240, 0.12), rgba(91, 131, 240, 0.08));
  color: var(--accent);
}

.tile-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cred-grid p,
.service-grid p,
.challenge-grid p,
.checks-list p,
.steps p,
.ecosystem-grid p,
.pillars p,
.insight-grid p {
  margin-bottom: 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.58;
}

.dark-band {
  background: #fff;
}

.iso-visual {
  position: relative;
  min-height: 360px;
  margin-top: 52px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(98, 92, 240, 0.12), rgba(91, 131, 240, 0.05)),
    var(--midnight);
  box-shadow: var(--shadow);
}

.iso-visual::before {
  position: absolute;
  inset: 70px 12% auto;
  height: 2px;
  background: var(--brand-gradient);
  box-shadow: 0 0 28px rgba(98, 92, 240, 0.65);
  content: "";
  transform: skewY(-13deg);
}

.iso-card,
.iso-panel,
.iso-core {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.55);
  transform: rotateX(58deg) rotateZ(-34deg);
  transform-style: preserve-3d;
}

.iso-card {
  width: 170px;
  height: 94px;
  padding: 16px;
  border-radius: 12px;
}

.iso-card::after,
.iso-panel::after {
  position: absolute;
  inset: auto 0 -18px 18px;
  height: 18px;
  border-radius: 0 0 12px 12px;
  background: rgba(98, 92, 240, 0.28);
  content: "";
  transform: skewX(-45deg);
  transform-origin: top;
}

.iso-card span,
.iso-panel span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iso-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
}

.iso-card i {
  display: block;
  width: 72%;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--brand-gradient);
}

.iso-card-a {
  left: 14%;
  top: 74px;
}

.iso-card-b {
  left: 41%;
  top: 128px;
}

.iso-card-c {
  right: 13%;
  top: 70px;
}

.iso-core {
  left: 50%;
  top: 54%;
  display: grid;
  place-items: center;
  width: 210px;
  height: 124px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(15, 20, 25, 0.78);
  color: #fff;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-34deg);
}

.iso-core .orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 34px rgba(111, 114, 245, 0.75);
}

.iso-core p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.iso-panel {
  right: 18%;
  bottom: 44px;
  width: 220px;
  padding: 18px;
  border-radius: 12px;
}

.iso-panel b {
  display: block;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--line);
}

.iso-panel b:nth-child(2) {
  width: 86%;
}

.iso-panel b:nth-child(3) {
  width: 64%;
  background: var(--brand-gradient);
}

.iso-panel b:nth-child(4) {
  width: 74%;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-grid article {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.service-animation-picker {
  display: grid;
  gap: 54px;
  margin-top: 38px;
}

.service-option-set {
  display: grid;
  gap: 18px;
}

.service-option-head {
  display: grid;
  grid-template-columns: minmax(100px, 0.18fr) minmax(220px, 0.34fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.service-option-head span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.service-option-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.service-option-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.service-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-option-card {
  min-height: 274px;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.service-demo {
  width: 100%;
  height: 132px;
  margin-bottom: 18px;
}

.service-demo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.service-option-card h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.service-option-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .service-demo animate,
  .service-demo animateMotion,
  .service-demo animateTransform {
    display: none;
  }
}

.service-iso {
  position: relative;
  width: 92px;
  height: 70px;
  margin-bottom: 24px;
  transform: skewY(-12deg);
}

.service-iso span,
.service-iso b,
.service-iso i {
  position: absolute;
  display: block;
  border-radius: 8px;
  transform: rotate(-24deg);
}

.service-iso span {
  left: 10px;
  top: 24px;
  width: 74px;
  height: 34px;
  background: var(--midnight);
  box-shadow: 0 16px 30px -20px rgba(15, 20, 25, 0.75);
}

.service-iso b {
  left: 24px;
  top: 4px;
  width: 42px;
  height: 46px;
  background: linear-gradient(180deg, #f7f7ff, #dce4ff);
}

.service-iso i {
  left: 34px;
  top: 35px;
  width: 54px;
  height: 8px;
  background: var(--brand-gradient);
  box-shadow: 0 0 18px rgba(111, 114, 245, 0.55);
}

.service-iso::before,
.service-iso::after {
  position: absolute;
  z-index: 2;
  display: block;
  background: var(--brand-gradient);
  content: "";
}

.service-iso::before {
  left: 42px;
  top: 13px;
  width: 5px;
  height: 28px;
  border-radius: 999px;
  opacity: 0.8;
}

.service-iso::after {
  left: 50px;
  top: 13px;
  width: 5px;
  height: 22px;
  border-radius: 999px;
  opacity: 0.45;
}

.service-iso.variant-2 b,
.service-iso.variant-5 b {
  width: 58px;
  height: 38px;
}

.service-iso.variant-3 span,
.service-iso.variant-7 span {
  background: #161c2a;
}

.service-iso.variant-4 i,
.service-iso.variant-8 i {
  left: 18px;
  width: 68px;
}

.service-visual {
  position: relative;
  width: 132px;
  height: 106px;
  margin-bottom: 26px;
  isolation: isolate;
}

.service-visual::before {
  left: 10px;
  right: 8px;
  bottom: 6px;
  height: 16px;
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.08);
  filter: blur(3px);
  transform: skewX(-24deg);
  z-index: -1;
  position: absolute;
  display: block;
  content: "";
}

.service-visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.service-card--crawler .service-visual {
  width: 132px;
  height: 106px;
  margin-bottom: 26px;
}

.service-visual--audit .audit-panel {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.4;
}

.service-visual--audit .audit-line {
  fill: var(--line-2);
}

.service-visual--audit .audit-line-a {
  fill: var(--accent-soft);
}

.service-visual--audit .audit-trend {
  fill: none;
  stroke: var(--accent-blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-visual--audit .audit-ring {
  fill: #fff;
  stroke: rgba(99, 102, 241, 0.3);
  stroke-width: 8;
}

.service-visual--audit .audit-needle {
  fill: none;
  stroke: var(--midnight);
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: 154px 85px;
  animation: service-audit-needle 4.2s ease-in-out infinite;
}

.service-visual--audit .audit-core {
  fill: var(--accent);
}

.service-visual--audit .audit-ping {
  fill: var(--accent-blue);
  animation: service-audit-ping 2.3s ease-in-out infinite;
}

.service-visual--audit .audit-ping-b {
  fill: var(--accent);
  animation-delay: 0.8s;
}

.service-visual--crawler .crawler-stage {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.4;
}

.service-visual--crawler .source-point {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 5px 8px rgba(15, 20, 25, 0.14));
  transform-box: fill-box;
  transform-origin: center;
  animation: crawler-source-pulse 2.6s ease-in-out infinite;
}

.service-visual--crawler .source-point--violet {
  fill: #6366f1;
}

.service-visual--crawler .source-point--blue {
  fill: #60a5fa;
  animation-delay: 0.28s;
}

.service-visual--crawler .source-point--mint {
  fill: #31c7a9;
  animation-delay: 0.56s;
}

.service-visual--crawler .source-point--delay-a {
  animation-delay: 0.74s;
}

.service-visual--crawler .source-point--delay-b {
  animation-delay: 1.12s;
}

.service-visual--crawler .source-point--delay-c {
  animation-delay: 1.46s;
}

.service-visual--crawler .source-link {
  fill: none;
  stroke: rgba(99, 102, 241, 0.18);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-visual--crawler .crawler-hub {
  fill: #fff;
  stroke: rgba(99, 102, 241, 0.42);
  stroke-width: 2.4;
  filter: drop-shadow(0 7px 10px rgba(99, 102, 241, 0.14));
}

.service-visual--crawler .crawl-route {
  fill: none;
  stroke: rgba(96, 165, 250, 0.62);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-visual--crawler .crawler-robot {
  animation: service-crawler-float 4.8s ease-in-out infinite;
}

.service-visual--crawler .crawler-head {
  fill: var(--midnight);
  stroke: rgba(96, 165, 250, 0.52);
  stroke-width: 1.5;
  filter: drop-shadow(0 12px 14px rgba(15, 20, 25, 0.18));
}

.service-visual--crawler .crawler-ear,
.service-visual--crawler .crawler-body {
  fill: #60a5fa;
}

.service-visual--crawler .crawler-eye {
  fill: var(--accent-soft);
}

.service-visual--crawler .crawler-antenna,
.service-visual--crawler .crawler-mouth,
.service-visual--crawler .crawler-base {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 2;
  stroke-linecap: round;
}

.service-visual--crawler .crawler-antenna-dot {
  fill: #6366f1;
  stroke: #fff;
  stroke-width: 1.5;
}

.service-visual--crawler .crawler-base {
  stroke: rgba(15, 20, 25, 0.18);
  stroke-width: 3;
}

.service-visual--crawler .crawler-output rect {
  fill: var(--accent-soft);
  opacity: 0.72;
  animation: crawler-output-pulse 2.6s ease-in-out infinite;
}

.service-visual--crawler .crawler-output rect:nth-child(2) {
  fill: rgba(96, 165, 250, 0.18);
  animation-delay: 0.4s;
}

.service-visual--crawler .crawler-output rect:nth-child(3) {
  fill: rgba(49, 199, 169, 0.16);
  animation-delay: 0.8s;
}

.service-visual--crawler .crawl-token {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1;
  filter: drop-shadow(0 3px 6px rgba(99, 102, 241, 0.26));
}

.service-visual--crawler .crawl-token path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.service-visual--crawler .crawl-token--violet {
  fill: #6366f1;
}

.service-visual--crawler .crawl-token--blue {
  fill: #60a5fa;
}

.service-visual--crawler .crawl-token--mint {
  fill: #31c7a9;
}

.service-visual--source .source-stage {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.4;
}

.service-visual--source .source-lang {
  fill: var(--surface-soft);
  stroke: var(--line);
  stroke-width: 1.2;
}

.service-visual--source .source-lang-en {
  fill: rgba(96, 165, 250, 0.1);
}

.service-visual--source .source-lang-cn {
  fill: rgba(99, 102, 241, 0.1);
}

.service-visual--source .source-line {
  fill: rgba(15, 20, 25, 0.18);
}

.service-visual--source .source-line-b,
.service-visual--source .source-line-d {
  fill: rgba(15, 20, 25, 0.1);
}

.service-visual--source .source-hub {
  fill: var(--midnight);
  stroke: var(--accent-blue);
  stroke-width: 2;
}

.service-visual--source .source-hub-mark {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.service-visual--source .source-bridge,
.service-visual--source .source-lift {
  fill: none;
  stroke: rgba(99, 102, 241, 0.75);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.service-visual--source .source-seal {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}

.service-visual--source .source-seal-check {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-visual--source .source-sync {
  fill: var(--accent-blue);
  animation: service-source-pulse 2.2s ease-in-out infinite;
}

.service-visual--source .source-sync-b {
  fill: var(--accent-mid);
  animation-delay: 0.6s;
}

.service-visual--source .source-sync-c {
  fill: var(--accent);
  animation-delay: 0.3s;
}

.service-visual--timeline .timeline-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 6;
  stroke-linecap: round;
}

.service-visual--timeline .timeline-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: service-timeline-fill 5.2s linear infinite;
}

.service-visual--timeline .timeline-step circle {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 2;
}

.service-visual--timeline .timeline-step path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.service-visual--timeline .step-a circle {
  animation: service-step-a 5.2s infinite;
}

.service-visual--timeline .step-b circle {
  animation: service-step-b 5.2s infinite;
}

.service-visual--timeline .step-c circle {
  animation: service-step-c 5.2s infinite;
}

.service-visual--timeline .step-d circle {
  animation: service-step-d 5.2s infinite;
}

.service-visual--timeline .step-a path {
  animation: service-check-a 5.2s infinite;
}

.service-visual--timeline .step-b path {
  animation: service-check-b 5.2s infinite;
}

.service-visual--timeline .step-c path {
  animation: service-check-c 5.2s infinite;
}

.service-visual--timeline .step-d path {
  animation: service-check-d 5.2s infinite;
}

.service-visual--timeline .timeline-card {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.4;
  opacity: 0.35;
}

.service-visual--timeline .card-a {
  animation: service-card-a 5.2s infinite;
}

.service-visual--timeline .card-b {
  animation: service-card-b 5.2s infinite;
}

.service-visual--timeline .card-c {
  animation: service-card-c 5.2s infinite;
}

.service-visual--timeline .card-d {
  animation: service-card-d 5.2s infinite;
}

.service-visual--timeline .timeline-runner {
  fill: var(--accent-blue);
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
}

@keyframes service-audit-needle {
  0%,
  100% { transform: rotate(-30deg); }
  50% { transform: rotate(26deg); }
}

@keyframes service-audit-ping {
  0%,
  100% { transform: scale(0.82); opacity: 0.58; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes service-crawler-float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes crawler-source-pulse {
  0%,
  100% { transform: scale(0.92); opacity: 0.82; }
  48% { transform: scale(1.08); opacity: 1; }
}

@keyframes crawler-output-pulse {
  0%,
  100% { opacity: 0.42; transform: translateX(0); }
  45% { opacity: 0.92; transform: translateX(3px); }
}

@keyframes service-source-pulse {
  0%,
  100% { transform: scale(0.84); opacity: 0.66; }
  45% { transform: scale(1.12); opacity: 1; }
}

@keyframes service-timeline-fill {
  0% { stroke-dashoffset: 152; }
  80%,
  100% { stroke-dashoffset: 0; }
}

@keyframes service-step-a {
  0%,
  12% {
    fill: #fff;
    stroke: var(--line);
  }
  16%,
  100% {
    fill: var(--accent);
    stroke: var(--accent);
  }
}

@keyframes service-step-b {
  0%,
  31% {
    fill: #fff;
    stroke: var(--line);
  }
  37%,
  100% {
    fill: var(--accent);
    stroke: var(--accent);
  }
}

@keyframes service-step-c {
  0%,
  50% {
    fill: #fff;
    stroke: var(--line);
  }
  56%,
  100% {
    fill: var(--accent);
    stroke: var(--accent);
  }
}

@keyframes service-step-d {
  0%,
  69% {
    fill: #fff;
    stroke: var(--line);
  }
  76%,
  100% {
    fill: var(--accent);
    stroke: var(--accent);
  }
}

@keyframes service-check-a {
  0%,
  12% { opacity: 0; }
  16%,
  100% { opacity: 1; }
}

@keyframes service-check-b {
  0%,
  31% { opacity: 0; }
  37%,
  100% { opacity: 1; }
}

@keyframes service-check-c {
  0%,
  50% { opacity: 0; }
  56%,
  100% { opacity: 1; }
}

@keyframes service-check-d {
  0%,
  69% { opacity: 0; }
  76%,
  100% { opacity: 1; }
}

@keyframes service-card-a {
  0%,
  12% {
    opacity: 0.35;
    fill: #fff;
  }
  16%,
  100% {
    opacity: 1;
    fill: var(--accent-soft);
  }
}

@keyframes service-card-b {
  0%,
  31% {
    opacity: 0.35;
    fill: #fff;
  }
  37%,
  100% {
    opacity: 1;
    fill: var(--accent-soft);
  }
}

@keyframes service-card-c {
  0%,
  50% {
    opacity: 0.35;
    fill: #fff;
  }
  56%,
  100% {
    opacity: 1;
    fill: var(--accent-soft);
  }
}

@keyframes service-card-d {
  0%,
  69% {
    opacity: 0.35;
    fill: #fff;
  }
  76%,
  100% {
    opacity: 1;
    fill: var(--accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-visual--audit .audit-needle,
  .service-visual--audit .audit-ping,
  .service-visual--crawler .source-point,
  .service-visual--crawler .crawler-robot,
  .service-visual--crawler .crawler-output rect,
  .service-visual--source .source-sync,
  .service-visual--timeline .timeline-progress,
  .service-visual--timeline .timeline-step circle,
  .service-visual--timeline .timeline-step path,
  .service-visual--timeline .timeline-card {
    animation: none !important;
  }
}

.service-details {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.service-details li {
  position: relative;
  padding-left: 18px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.38;
}

.service-details li::before {
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-gradient);
  content: "";
}

.flow {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.challenge-grid {
  grid-template-columns: repeat(3, 1fr);
}

.mini-chart,
.fact-list {
  display: grid;
  gap: 11px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.mini-chart p {
  display: grid;
  grid-template-columns: 96px 1fr 36px;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
}

.mini-chart b {
  height: 5px;
}

.mini-chart strong {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
}

.fact-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
}

.fact-list strong {
  font-family: var(--font-mono);
  font-size: 11px;
}

.good {
  color: var(--positive);
}

.warn {
  color: var(--warning);
}

.bad {
  color: var(--negative);
}

.free-report {
  background: #fff;
}

.audit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 80px;
  align-items: start;
}

.audit-evidence {
  display: grid;
  gap: 30px;
}

.pending-panel {
  padding: 30px;
  border: 1px dashed rgba(98, 92, 240, 0.32);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(98, 92, 240, 0.08), rgba(91, 131, 240, 0.04));
}

.pending-panel h3 {
  margin: 10px 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.pending-panel p {
  max-width: 560px;
  margin: 0;
  color: var(--body);
  line-height: 1.55;
}

.pending-panel .button {
  margin-top: 22px;
}

.checks-list {
  display: grid;
}

.checks-list article {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.checks-list article:first-child {
  border-top: 1px solid var(--line);
}

.checks-list span,
.steps span {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.checks-list h3 {
  margin-top: 0;
  font-size: 17px;
}

.audit-form {
  display: grid;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.audit-form h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.audit-form p {
  margin-bottom: 22px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.5;
}

.audit-form label {
  margin: 16px 0 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.audit-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.audit-form button {
  margin-top: 22px;
}

.form-note,
.form-success {
  margin: 14px 0 0 !important;
  color: var(--muted) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  text-align: center;
}

/* ===================================================================
 * Long-bar audit form — sits underneath the methodology grid.
 * 3 fields side-by-side with the CTA at the right. 2026-05-03.
 * =================================================================== */
.audit-form-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin: 32px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.audit-form-bar-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.audit-bar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.audit-bar-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.audit-form-bar input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.audit-form-bar input::placeholder {
  color: var(--muted);
}

.audit-form-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.audit-bar-cta {
  height: 48px;
  padding: 0 22px;
  white-space: nowrap;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.audit-form-bar .form-note,
.audit-form-bar .form-success {
  grid-column: 1 / -1;
  margin: 4px 0 0 !important;
  text-align: left;
}

/* ===================================================================
 * Section 05 — gradient form-bar variant (2026-05-04).
 * Background uses the brand gradient; CTA flips to white pill so it
 * stands out against the gradient. Title sits above the fields.
 * =================================================================== */
.audit-form-bar--gradient {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 28px 28px 22px;
  background: var(--brand-gradient);
  border: 0;
  color: #fff;
  box-shadow: 0 18px 50px -22px rgba(99, 102, 241, 0.55);
}

.audit-form-bar-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.audit-form-bar--gradient .audit-form-bar-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.audit-form-bar--gradient .audit-bar-label {
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

.audit-form-bar--gradient input {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
}

.audit-form-bar--gradient input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* Black button against gradient background — high contrast CTA. 2026-05-04. */
.audit-bar-cta--white {
  background: var(--ink);
  color: #fff;
  align-self: start;
  width: fit-content;
  min-width: 180px;
}

.audit-bar-cta--white:hover {
  background: #000;
  transform: translateY(-1px);
}

.form-note--on-gradient {
  color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 880px) {
  .audit-form-bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .audit-form-bar-fields {
    grid-template-columns: 1fr;
  }
  .audit-bar-cta {
    width: 100%;
  }
  .audit-form-bar--gradient .audit-form-bar-fields {
    grid-template-columns: 1fr;
  }
  .audit-bar-cta--white {
    width: 100%;
  }
}

.form-success {
  color: var(--positive) !important;
}

.form-note.error {
  color: var(--negative) !important;
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.process-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.6fr);
  gap: 28px;
  margin-bottom: 46px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--midnight);
  color: #fff;
  overflow: hidden;
}

.code-window {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 44px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 13px;
}

.code-window::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  height: 1px;
  background: var(--brand-gradient);
  box-shadow: 0 0 26px rgba(111, 114, 245, 0.8);
  content: "";
  animation: scanline 3.2s linear infinite;
}

.window-dots {
  position: absolute;
  left: 18px;
  top: 16px;
  display: flex;
  gap: 7px;
}

.window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.code-window p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}

.code-window b {
  color: #fff;
  font-weight: 500;
}

.code-window span {
  color: #8fa3ff;
}

.processing-stack {
  position: relative;
  display: grid;
  place-items: center;
}

.processing-stack span {
  position: absolute;
  width: 220px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  transform: skewY(-12deg);
  animation: floatCard 3.8s ease-in-out infinite;
}

.processing-stack span:nth-child(2) {
  width: 180px;
  background: var(--brand-gradient);
  animation-delay: -1.1s;
}

.processing-stack span:nth-child(3) {
  width: 150px;
  transform: translateY(90px) skewY(-12deg);
  animation-delay: -2.2s;
}

@keyframes scanline {
  0% {
    transform: translateY(-86px);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(86px);
    opacity: 0;
  }
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(-50px) skewY(-12deg);
  }
  50% {
    transform: translateY(-34px) skewY(-12deg);
  }
}

.steps article {
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* ===================================================================
 * Methodology — variation A (terminal) + variation B (dashboard preview)
 * 2026-05-02. Replaces the old single .process-visual GIF.
 * =================================================================== */
.methodology .method-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* 3-then-2 layout (row 1 = 3 cards each spanning 2/6, row 2 = 2 cards each
 * spanning 3/6). 2026-05-02. */
.methodology .method-grid--3-2 {
  grid-template-columns: repeat(6, 1fr);
}

.methodology .method-grid--3-2 > .method-step:nth-child(-n+3) {
  grid-column: span 2;
}

.methodology .method-grid--3-2 > .method-step:nth-child(n+4) {
  grid-column: span 3;
}

.method-step {
  position: relative;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.method-step .method-step-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-step h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

.method-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.method-visual {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
}

/* ===================================================================
 * Section 05 — CONTINUOUS / LOOPING animations for the dashboard-preview
 * cards. 2026-05-02 (v2 — replaces the one-shot entry animations with
 * always-on motion so each card feels live while the user reads).
 *
 *   01 Crawl    — "current row" highlight rolls down the status list,
 *                 dots pulse continuously
 *   02 Extract  — entity chips light up one at a time on a loop
 *   03 Prompt   — LLM bars grow → hold → reset on a 4s loop, plus a
 *                 shimmer sweep across each track
 *   04 Compare  — big score number runs a slow gradient shimmer;
 *                 sub-stat rows highlight one at a time
 *   05 Recommend — focus indicator + counter circle highlight roll
 *                  down the fix list
 * =================================================================== */

/* Card-level entry (kept) */
.methodology .method-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.methodology .method-step.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
 * 01 Crawl — sweeping current-row highlight + dot pulse
 * --------------------------------------------------------- */
.methodology .method-step:nth-child(1) .method-dash > ul > li {
  position: relative;
  border-radius: 4px;
  padding-left: 6px;
  margin-left: -6px;
  animation: methodRowSweep 4.2s ease-in-out infinite;
}

.methodology .method-step:nth-child(1) .method-dash > ul > li:nth-child(1) { animation-delay: 0s; }
.methodology .method-step:nth-child(1) .method-dash > ul > li:nth-child(2) { animation-delay: 1.4s; }
.methodology .method-step:nth-child(1) .method-dash > ul > li:nth-child(3) { animation-delay: 2.8s; }

@keyframes methodRowSweep {
  0%, 14%, 100% { background: transparent; }
  4%, 10%      { background: rgba(99, 102, 241, 0.10); }
}

.methodology .method-step:nth-child(1) .method-dash .dot {
  animation: methodDotPulse 2.4s ease-in-out infinite;
}

.methodology .method-step:nth-child(1) .method-dash > ul > li:nth-child(2) .dot { animation-delay: 0.4s; }
.methodology .method-step:nth-child(1) .method-dash > ul > li:nth-child(3) .dot { animation-delay: 0.8s; }

@keyframes methodDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.20); }
}

/* ---------------------------------------------------------
 * 02 Extract — chips light up one at a time, looping
 * --------------------------------------------------------- */
.methodology .method-step:nth-child(2) .method-dash-tags li {
  animation: methodTagFlash 5.4s ease-in-out infinite;
  transition: none;
}

.methodology .method-step:nth-child(2) .method-dash-tags li:nth-child(1) { animation-delay: 0s; }
.methodology .method-step:nth-child(2) .method-dash-tags li:nth-child(2) { animation-delay: 0.6s; }
.methodology .method-step:nth-child(2) .method-dash-tags li:nth-child(3) { animation-delay: 1.2s; }
.methodology .method-step:nth-child(2) .method-dash-tags li:nth-child(4) { animation-delay: 1.8s; }
.methodology .method-step:nth-child(2) .method-dash-tags li:nth-child(5) { animation-delay: 2.4s; }
.methodology .method-step:nth-child(2) .method-dash-tags li:nth-child(6) { animation-delay: 3.0s; }

@keyframes methodTagFlash {
  0%, 12%, 100% {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
    transform: translateY(0);
  }
  4%, 8% {
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.10);
    color: var(--accent);
    transform: translateY(-1px);
  }
}

/* ---------------------------------------------------------
 * 03 Prompt — LLM bars roll continuously + shimmer sweep
 * --------------------------------------------------------- */
.methodology .method-step:nth-child(3) .method-dash-llms .bar {
  position: relative;
  overflow: hidden;
}

.methodology .method-step:nth-child(3) .method-dash-llms .bar i {
  transform-origin: left center;
  animation: methodBarRoll 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.methodology .method-step:nth-child(3) .method-dash-llms li:nth-child(1) .bar i { animation-delay: 0s; }
.methodology .method-step:nth-child(3) .method-dash-llms li:nth-child(2) .bar i { animation-delay: 0.3s; }
.methodology .method-step:nth-child(3) .method-dash-llms li:nth-child(3) .bar i { animation-delay: 0.6s; }

@keyframes methodBarRoll {
  0%             { transform: scaleX(0); }
  35%, 75%       { transform: scaleX(1); }
  92%, 100%      { transform: scaleX(0); }
}

.methodology .method-step:nth-child(3) .method-dash-llms .bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: methodBarShimmer 4s linear infinite;
  pointer-events: none;
}

.methodology .method-step:nth-child(3) .method-dash-llms li:nth-child(2) .bar::after { animation-delay: 0.5s; }
.methodology .method-step:nth-child(3) .method-dash-llms li:nth-child(3) .bar::after { animation-delay: 1.0s; }

@keyframes methodBarShimmer {
  0%   { left: -40%; }
  100% { left: 140%; }
}

/* ---------------------------------------------------------
 * 04 Compare — score gradient shimmer + sub-stat rolling highlight
 * --------------------------------------------------------- */
.methodology .method-step:nth-child(4) .score-num {
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--accent) 50%,
    var(--ink) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: methodScoreShine 3.6s linear infinite;
}

@keyframes methodScoreShine {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

.methodology .method-step:nth-child(4) .score-list li {
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: -6px;
  animation: methodRowSweep 4.5s ease-in-out infinite;
}

.methodology .method-step:nth-child(4) .score-list li:nth-child(1) { animation-delay: 0s; }
.methodology .method-step:nth-child(4) .score-list li:nth-child(2) { animation-delay: 1.5s; }
.methodology .method-step:nth-child(4) .score-list li:nth-child(3) { animation-delay: 3.0s; }

/* ---------------------------------------------------------
 * 05 Recommend — focus indicator rolls down the fix list
 * --------------------------------------------------------- */
.methodology .method-step:nth-child(5) .method-dash-fixes li {
  position: relative;
  animation: methodFixHighlight 4.5s ease-in-out infinite;
}

.methodology .method-step:nth-child(5) .method-dash-fixes li:nth-child(1) { animation-delay: 0s; }
.methodology .method-step:nth-child(5) .method-dash-fixes li:nth-child(2) { animation-delay: 1.5s; }
.methodology .method-step:nth-child(5) .method-dash-fixes li:nth-child(3) { animation-delay: 3.0s; }

@keyframes methodFixHighlight {
  0%, 22%, 100% { background: transparent; }
  6%, 16%       { background: rgba(99, 102, 241, 0.08); }
}

.methodology .method-step:nth-child(5) .method-dash-fixes li::before {
  animation: methodCounterPulse 4.5s ease-in-out infinite;
}

.methodology .method-step:nth-child(5) .method-dash-fixes li:nth-child(2)::before { animation-delay: 1.5s; }
.methodology .method-step:nth-child(5) .method-dash-fixes li:nth-child(3)::before { animation-delay: 3.0s; }

@keyframes methodCounterPulse {
  0%, 22%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    transform: scale(1);
  }
  10% {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
    transform: scale(1.08);
  }
}

/* Card-head pill subtle continuous pulse on every card */
.methodology .method-dash-pill {
  animation: methodPillPulse 3.2s ease-in-out infinite;
}

@keyframes methodPillPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .methodology .method-step,
  .methodology .method-step *,
  .methodology .method-step::before,
  .methodology .method-step::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .methodology .method-step:nth-child(4) .score-num {
    background: none;
    -webkit-text-fill-color: var(--ink);
  }
}

/* --- Variation A: Terminal --- */
.method-terminal {
  background: #0b111b;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.method-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.method-terminal-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.method-terminal-bar b {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.method-terminal pre {
  margin: 0;
  padding: 12px 14px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Variation B: Dashboard preview --- */
.method-dash {
  background: #f7f8fa;
  border: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.method-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.method-dash-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.method-dash-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.method-dash-pill.ok {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.method-dash-pill.warn {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.method-dash ul,
.method-dash ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.55;
}

.method-dash > ul:not(.method-dash-tags):not(.method-dash-llms) li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.method-dash .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 8px;
}

.method-dash .dot.ok {
  background: #22c55e;
}

.method-dash .dot.warn {
  background: #f59e0b;
}

.method-dash-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.method-dash-tags li {
  padding: 3px 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink);
}

.method-dash-llms li {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11.5px;
}

.method-dash-llms strong {
  font-weight: 600;
}

.method-dash-llms .bar {
  height: 5px;
  border-radius: 999px;
  background: #e7e8ec;
  overflow: hidden;
}

.method-dash-llms .bar i {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  border-radius: 999px;
}

.method-dash-llms em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

.method-dash-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.method-dash-score .score-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.method-dash-score .score-num small {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  font-weight: 400;
}

.method-dash-score .score-list {
  display: grid;
  gap: 3px;
}

.method-dash-score .score-list li {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.method-dash-score .score-list span {
  color: var(--muted);
}

.method-dash-score .score-list strong {
  font-weight: 600;
}

.method-dash-fixes {
  counter-reset: fixstep;
}

.method-dash-fixes li {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 6px 8px 6px 26px;
  border-bottom: 1px dashed var(--line);
  font-size: 11.5px;
}

.method-dash-fixes li:last-child {
  border-bottom: 0;
}

.method-dash-fixes li::before {
  counter-increment: fixstep;
  content: counter(fixstep);
  position: absolute;
  left: 4px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}

.method-dash-fixes em {
  font-style: normal;
  color: var(--accent);
  font-size: 10.5px;
  font-family: var(--font-mono);
}

@media (max-width: 1100px) {
  .methodology .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .methodology .method-grid--3-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .methodology .method-grid--3-2 > .method-step:nth-child(-n+3),
  .methodology .method-grid--3-2 > .method-step:nth-child(n+4) {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .methodology .method-grid,
  .methodology .method-grid--3-2 {
    grid-template-columns: 1fr;
  }
  .methodology .method-grid--3-2 > .method-step {
    grid-column: span 1;
  }
}

.ecosystem {
  background: #fff;
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Single-card variant — centred, max-width capped, used for the trimmed
 * Section 06 (Core AI platforms only). 2026-05-02. */
.ecosystem-grid--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}

/* ===================================================================
 * Section 06 — THREE REDESIGN VARIANTS (2026-05-03). User to pick one.
 * All variants use looping animations themed to the Chinese-AI-ecosystem
 * narrative ("each LLM behaves differently, we keep tracking each").
 * =================================================================== */

/* ---------- Shared variant header chip ---------- */
.ecosystem--variant-a .section-kicker,
.ecosystem--variant-b .section-kicker,
.ecosystem--variant-c .section-kicker {
  font-weight: 600;
}

/* =====================================================
   VARIANT A — Orbital constellation
   Brand-at-centre + 6 LLMs orbiting; concentric pulse
   rings emanate outward continuously.
   ===================================================== */
.orbital-stage {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1 / 1;
  margin: 32px auto 0;
}

.orbital-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(99, 102, 241, 0.20);
}

.orbital-ring--inner {
  width: 56%;
  height: 56%;
  animation: orbitalRotate 38s linear infinite;
}

.orbital-ring--outer {
  width: 90%;
  height: 90%;
  animation: orbitalRotate 56s linear infinite reverse;
}

@keyframes orbitalRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orbital-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 20px 60px -24px rgba(99, 102, 241, 0.55);
  animation: orbitalCenterPulse 3.6s ease-in-out infinite;
}

.orbital-center-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.8;
}

.orbital-center-name {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

@keyframes orbitalCenterPulse {
  0%, 100% { box-shadow: 0 20px 60px -24px rgba(99, 102, 241, 0.55); }
  50%      { box-shadow: 0 20px 60px -8px  rgba(99, 102, 241, 0.85); }
}

.orbital-orbit {
  position: absolute;
  inset: 0;
}

.orbital-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 122px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
  font-size: 13px;
  /* Trig: place at 45% radius from centre, angle from --angle var */
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(0, -245px)
    rotate(calc(var(--angle) * -1));
  animation: orbitalNodePulse 3.6s ease-in-out infinite;
}

.orbital-node strong,
.orbital-node span {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.orbital-node small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* Stagger so they pulse one-by-one around the orbit */
.orbital-orbit .orbital-node:nth-child(1) { animation-delay: 0s; }
.orbital-orbit .orbital-node:nth-child(2) { animation-delay: 0.6s; }
.orbital-orbit .orbital-node:nth-child(3) { animation-delay: 1.2s; }
.orbital-orbit .orbital-node:nth-child(4) { animation-delay: 1.8s; }
.orbital-orbit .orbital-node:nth-child(5) { animation-delay: 2.4s; }
.orbital-orbit .orbital-node:nth-child(6) { animation-delay: 3.0s; }

@keyframes orbitalNodePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    border-color: var(--line);
  }
  20% {
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.55);
  }
}

.orbital-pulse-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.orbital-pulse {
  fill: none;
  stroke: rgba(99, 102, 241, 0.45);
  stroke-width: 1.5;
  transform-origin: center;
  animation: orbitalPulse 3.6s ease-out infinite;
}

.orbital-pulse--delay-1 { animation-delay: 1.2s; }
.orbital-pulse--delay-2 { animation-delay: 2.4s; }

@keyframes orbitalPulse {
  0% {
    r: 90;
    opacity: 0.7;
    stroke-width: 2;
  }
  100% {
    r: 285;
    opacity: 0;
    stroke-width: 0.5;
  }
}

@media (max-width: 760px) {
  .orbital-stage {
    transform: scale(0.78);
    transform-origin: center top;
    margin-bottom: -14%;
  }
}

/* =====================================================
   VARIANT B — Strategy lanes
   Per-LLM horizontal "river" of source chips flowing
   right-to-left at different paces.
   ===================================================== */
.lane-stage {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.lane {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.lane-label strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.lane-label small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.lane-track {
  position: relative;
  overflow: hidden;
  height: 38px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.lane-river {
  display: flex;
  gap: 12px;
  white-space: nowrap;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: laneScroll 32s linear infinite;
}

.lane-river[data-pace="fast"]   { animation-duration: 18s; }
.lane-river[data-pace="medium"] { animation-duration: 26s; }
.lane-river[data-pace="slow"]   { animation-duration: 36s; }

.lane-river span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.06);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid rgba(99, 102, 241, 0.15);
  flex-shrink: 0;
}

@keyframes laneScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .lane {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =====================================================
   VARIANT C — Live tracker
   Weekly drift heatmap (3 LLMs × 8 weeks) with a wave
   pulse moving across cells, plus a marquee of trending
   citations underneath.
   ===================================================== */
.tracker-stage {
  display: grid;
  place-items: center;
  margin-top: 32px;
}

.tracker-card {
  width: min(100%, 820px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 24px;
}

.tracker-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.tracker-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tracker-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tracker-card-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: trackerLiveBlink 1.4s ease-in-out infinite;
}

@keyframes trackerLiveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.tracker-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.tracker-row {
  display: grid;
  grid-template-columns: 110px repeat(8, 1fr);
  gap: 6px;
  align-items: center;
}

.tracker-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.tracker-cell {
  height: 28px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.08);
  animation: trackerCellWave 3.8s ease-in-out infinite;
  animation-delay: calc(var(--idx) * 0.18s);
}

.tracker-row[data-llm="Doubao"] .tracker-cell { animation-delay: calc(var(--idx) * 0.18s + 0.4s); }
.tracker-row[data-llm="Qwen"] .tracker-cell   { animation-delay: calc(var(--idx) * 0.18s + 0.8s); }

@keyframes trackerCellWave {
  0%, 100% {
    background: rgba(99, 102, 241, 0.08);
    transform: scaleY(0.85);
  }
  10% {
    background: rgba(99, 102, 241, 0.55);
    transform: scaleY(1);
  }
  25% {
    background: rgba(99, 102, 241, 0.18);
    transform: scaleY(0.9);
  }
}

.tracker-marquee {
  position: relative;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  overflow: hidden;
}

.tracker-marquee-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.tracker-marquee-track {
  display: flex;
  gap: 12px;
  white-space: nowrap;
  animation: trackerMarquee 24s linear infinite;
  width: max-content;
}

.tracker-marquee-track span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  flex-shrink: 0;
}

@keyframes trackerMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .orbital-ring,
  .orbital-center,
  .orbital-node,
  .orbital-pulse,
  .lane-river,
  .tracker-cell,
  .tracker-marquee-track,
  .tracker-card-pill::before {
    animation: none !important;
  }
}

/* ===================================================================
 * Section 06 — 3 HYBRID variants (2026-05-03 v2). Pulse-ring base
 * (carried over from the original Variant A) + sources arrayed three
 * different ways. User picks one.
 *
 *   1 · Halo source rings    — LLM nodes on inner ring, source chips
 *                              on an outer halo behind each LLM
 *   2 · Constellation cards  — LLM cards positioned around the orbit,
 *                              each card lists its top sources inside
 *   3 · Source atoms orbit   — source chips literally orbit the brand
 *                              on two ring paths, LLM anchors fixed
 *                              at compass points
 * =================================================================== */

/* ---------- Shared kicker chip styling ---------- */
.ecosystem--hybrid-1 .section-kicker,
.ecosystem--hybrid-2 .section-kicker,
.ecosystem--hybrid-3 .section-kicker {
  font-weight: 600;
}

/* =====================================================
   Variant 1 · Halo source rings
   ===================================================== */
.halo-stage {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  margin: 32px auto 0;
}

.halo-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(99, 102, 241, 0.20);
}
.halo-ring--inner { width: 50%; height: 50%; animation: ecoOrbitRotate 38s linear infinite; }
.halo-ring--outer { width: 95%; height: 95%; animation: ecoOrbitRotate 60s linear infinite reverse; }

@keyframes ecoOrbitRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.halo-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 20px 60px -24px rgba(99, 102, 241, 0.55);
  animation: ecoCenterPulse 3.6s ease-in-out infinite;
  z-index: 2;
}
.halo-center-eyebrow,
.constel-center-eyebrow,
.atom-center-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.8;
}
.halo-center-name,
.constel-center-name,
.atom-center-name {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
@keyframes ecoCenterPulse {
  0%, 100% { box-shadow: 0 20px 60px -24px rgba(99, 102, 241, 0.55); }
  50%      { box-shadow: 0 20px 60px -8px  rgba(99, 102, 241, 0.85); }
}

.halo-pulse-svg,
.constel-pulse-svg,
.atom-pulse-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.halo-pulse,
.constel-pulse,
.atom-pulse {
  fill: none;
  stroke: rgba(99, 102, 241, 0.40);
  stroke-width: 1.5;
  transform-origin: center;
  animation: ecoPulse 3.6s ease-out infinite;
}
.halo-pulse--d1, .constel-pulse--d1, .atom-pulse--d1 { animation-delay: 1.2s; }
.halo-pulse--d2, .constel-pulse--d2, .atom-pulse--d2 { animation-delay: 2.4s; }

@keyframes ecoPulse {
  0%   { r: 80; opacity: 0.7; stroke-width: 2; }
  100% { r: 290; opacity: 0; stroke-width: 0.5; }
}

.halo-cluster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  /* Place cluster at 33% radius from centre */
  transform: translate(-50%, -50%) rotate(var(--cluster-angle)) translate(0, -180px) rotate(calc(var(--cluster-angle) * -1));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.halo-llm {
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 22px -10px rgba(99, 102, 241, 0.40);
}
.halo-llm small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

.halo-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.halo-chips span {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.18);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  animation: ecoChipFlash 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.4s);
}

@keyframes ecoChipFlash {
  0%, 8%, 100% {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.18);
    color: var(--ink);
    transform: translateY(0);
  }
  3% {
    background: rgba(99, 102, 241, 0.20);
    border-color: rgba(99, 102, 241, 0.55);
    color: var(--accent);
    transform: translateY(-1px);
  }
}

@media (max-width: 760px) {
  .halo-stage { transform: scale(0.78); transform-origin: center top; margin-bottom: -14%; }
}

/* =====================================================
   Variant 2 · Constellation cards
   ===================================================== */
/* Stage: square aspect, sized so cards clear the centre disc with breathing
 * room (no overlap), pulse rings fill the inner area. 2026-05-03 v4 — fixed
 * the disc-vs-card overlap by shrinking the disc and pushing cards out. */
.constel-stage {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  margin: 32px auto 0;
}
.constel-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(99, 102, 241, 0.22);
}
.constel-ring--inner { width: 56%; height: 56%; animation: ecoOrbitRotate 42s linear infinite; }
/* Outer ring removed in v3 to reduce empty-space. Pulse rings cover that
 * visual layer instead. */

.constel-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 18px;
  box-shadow: 0 22px 70px -22px rgba(99, 102, 241, 0.55);
  animation: ecoCenterPulse 3.6s ease-in-out infinite;
  z-index: 2;
}

/* "YOUR BRAND ×" eyebrow on top */
.constel-center-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* White Eastbound logo (3-bar mark, mirrors .brand-mark) */
.constel-center-logo {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}
.constel-center-logo span {
  display: block;
  width: 26px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
}
.constel-center-logo span:nth-child(2) {
  width: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.constel-center-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 2px;
  color: #fff;
}

/* LLM cards — bigger, more breathing room, clearer hierarchy. Card centre
 * sits at radius 260px from stage centre, leaving room for the 168px disc
 * (radius 84px) without overlap. 2026-05-03 v4. */
.constel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 232px;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 46px -22px rgba(11, 17, 27, 0.22);
  transform: translate(-50%, -50%) rotate(var(--c-angle)) translate(0, -260px) rotate(calc(var(--c-angle) * -1));
  z-index: 1;
}

.constel-card strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.constel-card strong small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.constel-card ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.constel-card li {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.15);
  animation: ecoChipFlash 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.32s);
}
.constel-card li .zh {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.constel-card li .en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Tablet: shrink stage, tighten radius, slightly smaller cards. */
@media (max-width: 1080px) {
  .constel-stage {
    width: min(100%, 600px);
  }
  .constel-card {
    width: 200px;
    padding: 14px;
    transform: translate(-50%, -50%) rotate(var(--c-angle)) translate(0, -220px) rotate(calc(var(--c-angle) * -1));
  }
  .constel-center { width: 144px; height: 144px; }
}

/* Mobile: brand pill pinned LEFT, LLM card sits right next to it (no
 * gap-to-the-far-right). Two CSS pulse rings emanate from the brand
 * pill so the background still feels alive. The three LLM cards
 * overlap at the same slot and cycle DeepSeek → Doubao → Qwen on a
 * slow 12-second loop (4 s per card, ~2.4 s of clearly readable time
 * each). 2026-05-04 v7 (was: grid layout pushing card too far right). */
@media (max-width: 720px) {
  .constel-stage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    min-height: 168px;
    margin-top: 18px;
    overflow: visible;
  }
  .constel-ring,
  .constel-pulse-svg {
    display: none;
  }
  .constel-center {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    margin: 0;
    padding: 10px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    transform: none;
    z-index: 2;
  }
  /* Two staggered pulse rings emanate from the brand pill (CSS-only,
   * scaled outward via transform). z-index: -1 keeps them behind the
   * pill's gradient so we only see the part outside the pill. */
  .constel-center::before,
  .constel-center::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.4px solid rgba(99, 102, 241, 0.55);
    box-sizing: border-box;
    pointer-events: none;
    animation: brand-ring-pulse 2.8s ease-out infinite;
    z-index: -1;
  }
  .constel-center::after {
    animation-delay: 1.4s;
  }
  /* Cards: absolutely positioned right next to the brand pill. All
   * three stack at the same slot; the cycle keyframes show one at a
   * time. */
  .constel-card {
    position: absolute;
    top: 50%;
    left: calc(96px + 14px);                 /* pill width + gap */
    width: calc(100% - 96px - 14px);
    max-width: 220px;
    padding: 11px 13px;
    transform: translateY(-50%);
    opacity: 0;
    animation: eco-card-roll 12s ease-in-out infinite;
    animation-fill-mode: backwards;
    z-index: 1;
  }
  /* DOM order inside .constel-stage: [ring, center, pulse-svg, card×3]. */
  .constel-card:nth-child(4) { animation-delay: 0s; }   /* DeepSeek */
  .constel-card:nth-child(5) { animation-delay: 4s; }   /* Doubao   */
  .constel-card:nth-child(6) { animation-delay: 8s; }   /* Qwen     */
  .constel-card ul {
    display: grid;
    gap: 5px;
  }
  .constel-card li {
    flex: none;
  }
  .constel-card li:nth-child(n+4) {
    display: none;
  }
}

/* "Roll" animation — slow: slide in from below, hold steady ~2.4 s for
 * reading, slide up and out. Composed with the base translateY(-50%)
 * via calc() so the card stays vertically centered on its slot. */
@keyframes eco-card-roll {
  0%   { opacity: 0; transform: translateY(calc(-50% + 14px)); }
  5%   { opacity: 0; transform: translateY(calc(-50% + 14px)); }
  10%  { opacity: 1; transform: translateY(-50%); }
  30%  { opacity: 1; transform: translateY(-50%); }
  35%  { opacity: 0; transform: translateY(calc(-50% - 14px)); }
  100% { opacity: 0; transform: translateY(calc(-50% - 14px)); }
}

@keyframes brand-ring-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Reduced motion: no cycling, no pulses — show DeepSeek statically. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .constel-card {
    animation: none;
    opacity: 0;
    transform: translateY(-50%);
  }
  .constel-card:nth-child(4) {
    opacity: 1;
  }
  .constel-center::before,
  .constel-center::after {
    animation: none;
    opacity: 0;
  }
}

/* =====================================================
   Variant 3 · Source atoms orbiting
   ===================================================== */
.atom-stage {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  margin: 32px auto 0;
}
.atom-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(99, 102, 241, 0.20);
}
.atom-ring--inner { width: 56%; height: 56%; }
.atom-ring--outer { width: 96%; height: 96%; }

.atom-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 20px 60px -24px rgba(99, 102, 241, 0.55);
  animation: ecoCenterPulse 3.6s ease-in-out infinite;
  z-index: 2;
}

.atom-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  /* Sit on inner ring (~28% radius) */
  transform: translate(-50%, -50%) rotate(var(--a-angle)) translate(0, -156px) rotate(calc(var(--a-angle) * -1));
  z-index: 3;
  box-shadow: 0 6px 20px -8px rgba(99, 102, 241, 0.45);
}

.atom-orbit {
  position: absolute;
  inset: 0;
  margin: auto;
}
.atom-orbit--inner {
  width: 60%;
  height: 60%;
  animation: ecoOrbitRotate 36s linear infinite;
}
.atom-orbit--outer {
  width: 96%;
  height: 96%;
  animation: ecoOrbitRotate 52s linear infinite reverse;
}

.atom-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.20);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  /* Counter-rotate so chip text reads upright while the orbit parent spins */
  animation: ecoOrbitRotate 36s linear infinite reverse;
}

/* Inner orbit radius ~ 200px (60% of 720px stage / 2 minus chip height).
 * Outer orbit radius ~ 320px (96% of 720px / 2 minus chip height). */
.atom-orbit--inner .atom-chip {
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(var(--angle) * -1));
}
.atom-orbit--outer .atom-chip {
  animation: ecoOrbitRotate 52s linear infinite;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-320px) rotate(calc(var(--angle) * -1));
}

@media (max-width: 760px) {
  .atom-stage { transform: scale(0.78); transform-origin: center top; margin-bottom: -14%; }
}

@media (prefers-reduced-motion: reduce) {
  .halo-ring, .halo-pulse, .halo-chips span, .halo-center,
  .constel-ring, .constel-pulse, .constel-card li, .constel-center,
  .atom-orbit, .atom-pulse, .atom-center {
    animation: none !important;
  }
}

.ecosystem-grid article {
  min-width: 0;
}

.ecosystem-grid h3 {
  margin-top: 0;
}

.ecosystem-grid h3 small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}

.eco-list {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.eco-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.eco-list small {
  margin-left: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}

.eco-list strong {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.why-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) 1fr;
  gap: 80px;
}

/* Founder-block — quote + animation variants stacked in col 1.
 * 2026-05-04. */
.founder-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.founder-anim-set {
  display: grid;
  gap: 20px;
}

.founder-anim {
  position: relative;
  margin: 24px -10px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* Blockquote that hosts the founder animation — 2026-05-04. The
 * blockquote already has a 1px border + radius, so the inline
 * <figure> sits inside the same box visually. The negative side
 * margins on .founder-anim let the animation breathe slightly past
 * the blockquote inner padding. */
blockquote.founder-quote .founder-anim {
  margin-top: 28px;
}

.founder-anim figcaption {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.82);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.founder-anim svg {
  display: block;
  width: 100%;
  height: auto;
}

.founder-anim-note {
  margin: 4px 2px 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.founder-anim-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
}

blockquote {
  margin: 0;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

blockquote em {
  color: var(--accent);
}

blockquote cite {
  display: block;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pillars {
  display: grid;
}

.pillars article {
  position: relative;
  padding: 22px 0 22px 56px;
  border-bottom: 1px solid var(--line);
}

.pillars article:first-child {
  border-top: 1px solid var(--line);
}

.pillars h3 {
  margin-top: 7px;
  font-size: 17px;
}

/* SVG icon for each pillar — sits at the left, vertically aligned with
 * the kicker label. 2026-05-03. */
.pillar-icon {
  position: absolute;
  left: 0;
  top: 22px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent);
}
.pillar-icon svg {
  width: 20px;
  height: 20px;
}

.insight-grid article {
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}

.insight-grid div {
  display: flex;
  align-items: flex-end;
  min-height: 172px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(99, 104, 241, 0.12), rgba(27, 142, 85, 0.06)),
    repeating-linear-gradient(45deg, transparent 0 13px, rgba(15, 20, 25, 0.035) 13px 14px);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insight-grid span,
.insight-grid h3 {
  display: block;
  padding: 0 20px;
}

.insight-grid span {
  margin-top: 20px;
}

.insight-grid h3 {
  margin-top: 10px;
  margin-bottom: 22px;
  font-size: 17px;
}

.faq {
  background: #fff;
}

.faq h2 {
  margin-bottom: 44px;
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  list-style: none;
}

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

.faq summary::after {
  color: var(--accent);
  font-family: var(--font-mono);
  content: "+";
}

.faq details[open] summary::after {
  content: "-";
}

.faq details p {
  max-width: 760px;
  margin: -4px 0 22px;
  color: var(--body);
  line-height: 1.6;
}

.final-cta {
  padding: 104px 48px;
  background: var(--ink);
  color: #fff;
}

.final-cta > div {
  max-width: 980px;
}

.final-cta .section-kicker {
  color: rgba(255, 255, 255, 0.55);
}

.final-cta h2 {
  margin: 14px 0 22px;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.final-cta p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.58;
}

/* Section 10 — Contact form ----------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.1fr);
  gap: 56px;
  align-items: start;
  max-width: 1200px;
  width: 100%;
}

.contact-intro h2 {
  margin: 14px 0 22px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.contact-intro p {
  max-width: 460px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.contact-intro .contact-direct {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.contact-intro .contact-direct a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.contact-intro .contact-direct a:hover {
  border-bottom-color: #fff;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 32px;
  background: var(--brand-gradient);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-field {
  display: grid;
  gap: 6px;
}

.contact-field > span {
  font: 500 12px/1.2 var(--font-sans, "Inter", system-ui, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.contact-field > span [aria-hidden="true"] {
  margin-left: 3px;
  color: rgba(255, 255, 255, 0.7);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  font: 400 15px/1.4 var(--font-sans, "Inter", system-ui, sans-serif);
  color: var(--ink);
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
}

.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}

.contact-field select {
  /* Custom caret since we removed appearance */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f1419' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 38px;
}

.contact-checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font: 400 13px/1.5 var(--font-sans, "Inter", system-ui, sans-serif);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.contact-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #fff;
  cursor: pointer;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.contact-actions .button.light {
  background: #fff;
  color: var(--ink);
  border: 1px solid transparent;
}

.contact-actions .button.light:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.contact-actions .button.light[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.contact-status {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  min-height: 1em;
}

.contact-status[data-state="error"] {
  color: #fff7d6;
}

.contact-status[data-state="success"] {
  color: #ecfffd;
}

.contact-form[data-submitted="true"] {
  /* Subtle visual lock once a successful submission has occurred */
  opacity: 0.92;
}

@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-form {
    padding: 24px;
  }
  .contact-row {
    grid-template-columns: 1fr;
  }
}

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: 36px;
  padding: 64px 48px 48px;
  background: #fff;
}

.site-footer p,
.site-footer a {
  color: var(--body);
  font-size: 14px;
  line-height: 1.7;
}

.site-footer h3 {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.dashboard-page .page-shell {
  background: #fbfbf8;
}

.dashboard-hero {
  padding: 0 48px 96px;
}

.state-bar {
  position: sticky;
  top: 87px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -48px;
  padding: 12px 48px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: blur(14px);
}

.state-bar p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.state-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.state-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.state-tab.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.state-tab.locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.dashboard-state {
  display: none;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 74px;
  scroll-margin-top: 170px;
}

.dashboard-state.active {
  display: grid;
}

/* The 2-column split now lives on `.input-layout` (inside .dashboard-intro)
   so the form sits to the right of the copy. The parent state container is
   single-column ONLY when active — when inactive it stays display:none from
   the base `.dashboard-state` rule above. Without the `.active` qualifier,
   the input panel was leaking visible behind processing/results. */
.dashboard-state.active[data-state-panel="input"] {
  grid-template-columns: none;
  gap: 0;
}

.dashboard-intro h1,
.result-head h1 {
  max-width: 850px;
  font-size: clamp(48px, 5.8vw, 78px);
}

.promise-grid {
  display: grid;
  gap: 0;
  max-width: 850px;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.promise-grid article {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}

.promise-grid article:last-child {
  border-bottom: 0;
}

.promise-grid span,
.pipeline-list > li > span,
.fixes-card article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.promise-grid p {
  margin: 0;
  color: var(--body);
  line-height: 1.55;
}

.promise-grid strong {
  color: var(--ink);
}

.dashboard-form,
.pipeline-card,
.score-panel,
.platform-panel,
.topics-panel,
.improve-panel,
.evidence-panel,
.pressure-panel,
.audience-pulse-panel,
.website-audit-panel,
.fixes-card,
.locked-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.dashboard-form {
  position: sticky;
  top: 166px;
  display: grid;
  padding: 30px;
}

.dashboard-form h2,
.pipeline-card h2,
.panel-head h2,
.fixes-card h2,
.locked-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.dashboard-form p {
  margin: 0 0 22px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.5;
}

.dashboard-form label {
  margin: 15px 0 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-form input {
  min-height: 48px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dashboard-form .consent-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin: 18px 0 0;
  color: var(--body);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.dashboard-form .consent-check input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.dashboard-form .consent-check span {
  padding-top: 1px;
}

.dashboard-form .button {
  margin-top: 22px;
}

.optional-grid {
  display: grid;
}

.processing-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 42px;
  max-width: 980px;
}

.pipeline-card {
  overflow: hidden;
}

.loading-title {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 100%;
  margin: 16px 0 22px;
}

.loading-orb {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(98, 92, 240, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.loading-orb::after {
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: var(--brand-gradient);
  box-shadow: 0 0 28px rgba(98, 92, 240, 0.28);
  content: "";
}

.loading-phrases {
  min-height: auto;
  overflow: visible;
}

.loading-phrases b {
  display: block;
  width: 100%;
  opacity: 1;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px;
}

.pipeline-head p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pipeline-head strong {
  color: var(--accent);
  font-family: var(--font-mono);
}

.loading-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 9px;
  border: 1px solid rgba(98, 92, 240, 0.22);
  border-radius: 999px;
  background: rgba(98, 92, 240, 0.08);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.pipeline-percent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.mini-loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(98, 92, 240, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.progress-track {
  height: 7px;
  background: var(--line-2);
}

.progress-track span {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
}

.pipeline-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline-list li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 28px;
  border-top: 1px solid var(--line);
}

.pipeline-list h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.pipeline-list p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.pipeline-list strong {
  justify-self: end;
}

.pipeline-status {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.pipeline-status.done {
  border-color: rgba(48, 184, 126, 0.35);
  background: rgba(48, 184, 126, 0.1);
}

.pipeline-status.done i {
  width: 13px;
  height: 8px;
  border-bottom: 2px solid var(--positive);
  border-left: 2px solid var(--positive);
  transform: rotate(-45deg) translate(1px, -1px);
}

.pipeline-status.running {
  border-color: rgba(98, 92, 240, 0.28);
  background: rgba(98, 92, 240, 0.08);
}

.pipeline-status.running i {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(98, 92, 240, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.pipeline-status.pending i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.42;
}

.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 32px;
  align-items: start;
}

/* Mobile sticky CTA bar — desktop hidden, mobile media query reveals it. */
.mobile-sticky-cta {
  display: none;
}

.results-main {
  display: grid;
  gap: 28px;
  min-width: 0;
}

.result-summary {
  max-width: 820px;
  margin: 18px 0 0;
  color: var(--body);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45;
}

.result-head p:last-child {
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.score-panel {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 34px;
  padding: 30px;
  align-items: center;
}

.score-ring {
  --score-color: var(--negative);
  --score-angle: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--score-color) var(--score-angle), var(--line-2) 0);
}

.score-ring::before {
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  background: #fff;
  content: "";
}

.score-ring.score-green {
  --score-color: var(--positive);
}

.score-ring.score-yellow {
  --score-color: var(--warning);
}

.score-ring.score-red {
  --score-color: var(--negative);
}

.score-ring strong {
  position: relative;
  z-index: 1;
  font-size: 54px;
  line-height: 0.9;
}

.score-ring small {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--score-color);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.score-panel h2,
.improve-panel h2 {
  margin: 12px 0 12px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.score-panel p,
.platform-panel p,
.topics-panel p,
.improve-panel p,
.evidence-panel p,
.pressure-panel p,
.results-aside p {
  color: var(--body);
  line-height: 1.55;
}

.metric-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.metric-cards article {
  padding: 17px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metric-cards span,
.prompt-grid span,
.fixes-card strong {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metric-cards strong {
  display: block;
  margin: 8px 0 3px;
  font-size: 27px;
}

.metric-cards small {
  color: var(--negative);
  font-size: 12px;
}

.improve-panel,
.platform-panel,
.topics-panel,
.evidence-panel,
.pressure-panel,
.audience-pulse-panel,
.website-audit-panel,
.fixes-card,
.locked-card {
  padding: 28px;
}

.improve-grid,
.prompt-grid,
.website-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.website-audit-grid {
  grid-template-columns: repeat(4, 1fr);
}

.improve-grid article,
.prompt-grid article,
.website-audit-grid article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.improve-grid h3,
.prompt-grid h3,
.fixes-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.prompt-grid p {
  margin: 0 0 16px;
}

.prompt-grid mark {
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--ink);
}

.prompt-grid b {
  color: var(--negative);
  font-weight: 600;
}

.prompt-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.evidence-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.evidence-card h3 {
  margin: 0;
}

.offering-tag {
  display: inline-flex;
  max-width: 100%;
  margin-top: -8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(98, 92, 240, 0.1);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.recognition-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.recognition-pill strong {
  min-width: 46px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.recognition-pill.yes strong,
.audit-status.pass {
  background: #22a06b;
}

.recognition-pill.no strong,
.audit-status.fail {
  background: #d94832;
}

.recognition-pill span {
  color: var(--body);
  font-size: 12px;
}

.product-opinion-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.product-pill {
  display: inline-flex;
  align-items: center;
}

.product-pill strong {
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.product-pill.yes strong { background: #22a06b; }
.product-pill.no strong { background: #d94832; }
.product-pill.partial strong { background: #b08300; }

.product-flag em {
  font-style: normal;
  font-size: 10px;
  color: #b08300;
  text-transform: none;
  letter-spacing: 0;
}

.product-points {
  margin-top: 6px !important;
}

.evidence-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-card li {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 13px;
  line-height: 1.45;
}

.evidence-card li:first-child {
  padding-top: 0;
  border-top: 0;
}

.evidence-card li span,
.competitor-chip-list span,
.score-sources {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.competitor-chip-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.competitor-chip-list b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.website-audit-grid article > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audit-status {
  display: inline-flex;
  width: fit-content;
  margin: 12px 0 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4b043;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
}

.website-audit-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed rgba(98, 92, 240, 0.35);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(98, 92, 240, 0.08), rgba(91, 131, 240, 0.04));
}

.website-audit-lock p {
  flex: 1;
  margin: 0;
  font-size: 13px;
}

.website-audit-lock a {
  color: var(--accent);
  font-weight: 700;
}

.panel-intro {
  max-width: 760px;
  margin: 12px 0 0;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.platform-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.platform-lock-card {
  position: relative;
  grid-column: 1 / -1;
  min-height: 218px;
  overflow: hidden;
  padding: 0 !important;
  background: linear-gradient(135deg, rgba(245, 246, 250, 0.94), rgba(238, 245, 255, 0.74)) !important;
}

.locked-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 24px;
  filter: blur(2px);
  opacity: 0.68;
}

.locked-platforms span {
  min-height: 54px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.lock-overlay {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 18px 70px rgba(17, 20, 29, 0.16);
  text-align: center;
  backdrop-filter: blur(16px);
}

.lock-overlay span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lock-overlay h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.lock-overlay p {
  max-width: 520px;
  margin: 0;
}

.lock-overlay a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 6px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.platform-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.platform-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.platform-card-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.platform-card-head em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
}

.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}

.platform-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.platform-icon.logo-fallback {
  font-family: var(--font-mono);
  font-size: 11px;
}

.platform-deepseek {
  background: #eef5ff;
  color: #1368d8;
}

.platform-doubao {
  background: #f4f0ff;
  color: #625cf0;
}

.platform-qwen {
  background: #effaf4;
  color: #16885a;
}

.platform-cell,
.platform-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.platform-grid dl {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
}

.platform-grid dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  border-bottom: 1px solid var(--line-2);
}

.platform-grid dl div:last-child {
  border-bottom: 0;
}

.platform-grid dt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.platform-grid dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.platform-grid .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.platform-grid .dot.good {
  background: var(--positive);
}

.platform-grid .dot.warn {
  background: var(--warning);
}

.platform-grid .dot.bad {
  background: var(--negative);
}

.locked-strip {
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed rgba(98, 92, 240, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(98, 92, 240, 0.08), rgba(91, 131, 240, 0.04));
}

.locked-strip span {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.locked-strip p {
  margin: 8px 0 0;
  color: var(--body);
  font-size: 13px;
}

.prompt-meta {
  display: grid;
  gap: 4px;
  margin: 12px 0 14px;
}

.prompt-meta strong {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fcede9;
  color: var(--negative);
  font-size: 11px;
}

.prompt-meta small,
.zh-prompt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.zh-prompt {
  margin-top: -4px !important;
}

.locked-prompt {
  grid-column: 1 / -1;
  border-style: dashed !important;
  background: linear-gradient(135deg, rgba(98, 92, 240, 0.08), rgba(91, 131, 240, 0.04)) !important;
}

.topic-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.topic-plan-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.topic-plan-grid span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.topic-plan-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 16px;
}

.topic-plan-grid p {
  margin: 8px 0 0;
  font-size: 13px;
}

.topic-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.topic-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: default;
}

.topic-tabs button:last-child {
  border-right: 0;
}

.topic-tabs button.active {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
  background: #eef5ff;
}

.topic-tabs span {
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.topic-tabs strong {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
}

.topic-table-card {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.topic-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.topic-toolbar div,
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--body);
  font-size: 13px;
}

.topic-toolbar strong {
  color: var(--ink);
}

.topic-toolbar span,
.filter-pill {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.topic-table {
  overflow-x: auto;
}

.topic-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) 118px 128px 118px 104px;
  align-items: center;
  min-width: 760px;
  border-bottom: 1px solid var(--line);
}

.topic-row:last-child {
  border-bottom: 0;
}

.topic-row > * {
  padding: 14px 16px;
}

.topic-head {
  min-height: 48px;
  background: var(--line-2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.topic-name strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.topic-name small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.topic-row > strong,
.topic-row > span {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.topic-opportunity-table .topic-row {
  /* Legacy fallback rule (no longer used after the 2026-05-01 card-grid
     redesign — kept for any legacy report still rendering via the table
     path). */
  grid-template-columns: 1fr 140px 80px;
  min-width: 0;
}

/* ===== Section D — Hot topics CARD GRID (new design 2026-05-01). ===== */
.topic-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.topic-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "type . heat"
    "title title title";
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topic-card.heat-high { border-color: rgba(30, 155, 107, 0.35); }
.topic-card.heat-mid  { border-color: rgba(232, 134, 21, 0.30); }
.topic-card.heat-low  { border-color: var(--line); }
.topic-card.pending   { opacity: 0.7; }

.topic-card-type {
  grid-area: type;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--line-2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topic-card-type.type-recommend    { background: rgba(11, 132, 255, 0.12); color: #0b84ff; }
.topic-card-type.type-compare      { background: rgba(138, 92, 246, 0.12); color: #6b3fea; }
.topic-card-type.type-avoid        { background: rgba(210, 74, 74, 0.12);  color: #c53b3b; }
.topic-card-type.type-educate      { background: rgba(45, 168, 247, 0.12); color: #1d8ad7; }
.topic-card-type.type-price        { background: rgba(232, 134, 21, 0.12); color: #c97309; }
.topic-card-type.type-howto        { background: rgba(30, 155, 107, 0.12); color: #1e9b6b; }
.topic-card-type.type-authenticity { background: rgba(196, 156, 0, 0.14);  color: #a87a00; }
.topic-card-type.type-aftersale    { background: rgba(116, 116, 130, 0.14);color: #5a5a66; }
.topic-card-type.type-other        { background: var(--line-2); color: var(--muted); }

.topic-card-heat {
  grid-area: heat;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 80px;
}

.topic-card-heat strong {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.topic-card-heat-bar {
  width: 80px;
  height: 5px;
  background: var(--line-2);
  border-radius: 999px;
  overflow: hidden;
}

.topic-card-heat-fill {
  display: block;
  height: 100%;
  background: var(--muted);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.topic-card-heat-fill.heat-high { background: #1e9b6b; }
.topic-card-heat-fill.heat-mid  { background: #e88615; }
.topic-card-heat-fill.heat-low  { background: #b8b8c2; }

.topic-card-title-wrap {
  grid-area: title;
  display: block;
}

.topic-card-title {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.topic-card-zh {
  /* zh-CN searchable phrase shown in brackets under the EN title. */
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-sans, inherit);
  line-height: 1.4;
}

/* Section E — Buyer pulse: market portfolio bullets with fixed-position icons. */
.market-portfolio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.market-portfolio-list .portfolio-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--line-2);
  border-radius: 12px;
  line-height: 1.45;
}

.market-portfolio-list .portfolio-icon {
  font-size: 22px;
  line-height: 1;
  width: 28px;
  flex-shrink: 0;
  text-align: center;
}

.market-portfolio-list .portfolio-body {
  display: grid;
  gap: 2px;
  flex: 1;
}

.market-portfolio-list .portfolio-label {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.market-portfolio-list .portfolio-body span {
  color: var(--ink);
  font-size: 13px;
}

.intent-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-2);
}

.intent-bar i,
.intent-bar b,
.intent-bar em,
.intent-bar u {
  display: block;
  height: 100%;
}

.intent-bar i {
  background: #2da8f7;
}

.intent-bar b {
  background: #8a5cf6;
}

.intent-bar em {
  background: #f4b043;
}

.intent-bar u {
  background: #4fd18b;
}

.topic-row button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #0b84ff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.website-audit-table .topic-row {
  /* Wider Signal column + status pill + indicators pushed right with a
     bigger gap so the visual rhythm is "what / how it's doing / why". */
  grid-template-columns: minmax(280px, 2fr) 110px minmax(280px, 1.5fr);
  column-gap: 24px;
  min-width: 640px;
}

/* F section: keep status pill text white in all states (pass/warn/fail). */
.website-audit-table .audit-status,
.website-audit-table .audit-status.pass,
.website-audit-table .audit-status.fail,
.website-audit-table .audit-status.warn {
  color: #fff;
}

.website-audit-table .audit-status {
  margin: 0;
}

.website-audit-table .topic-row > span {
  white-space: normal;
  line-height: 1.45;
}

.source-gap-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}

.source-gap-strip div {
  padding: 18px;
  border-right: 1px solid var(--line);
}

.source-gap-strip div:last-child {
  border-right: 0;
}

.source-gap-strip span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.source-gap-strip p {
  margin: 8px 0 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.5;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.panel-head p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-head p:empty {
  display: none;
}

.answer-bars {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.answer-bars p {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(180px, 1fr) 74px;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.answer-bars span {
  color: var(--ink);
  font-weight: 600;
}

.answer-bars small {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.answer-bars i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-2);
}

.answer-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
}

.answer-bars b.score-green {
  background: var(--positive);
}

.answer-bars b.score-yellow {
  background: var(--warning);
}

.answer-bars b.score-red {
  background: var(--negative);
}

.answer-bars strong {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}

.score-sources {
  grid-column: 2 / 4;
  margin-top: -7px;
}

.results-aside {
  position: sticky;
  top: 118px;
  display: grid;
  gap: 24px;
  min-width: 0;
  max-height: calc(100vh - 136px);
  overflow: auto;
  overscroll-behavior: contain;
}

.platform-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.platform-insights article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.platform-insights span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.platform-insights strong {
  display: block;
  margin: 9px 0 7px;
  color: var(--ink);
  font-size: 16px;
}

.platform-insights p {
  margin: 0;
  font-size: 13px;
}

.next-step-card {
  padding: 28px;
  border-radius: 8px;
  background: var(--midnight);
  color: #fff;
}

.next-step-card .section-kicker {
  color: rgba(255, 255, 255, 0.5);
}

.next-step-card h2 {
  margin: 14px 0;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.next-step-card p {
  color: rgba(255, 255, 255, 0.72);
}

.next-step-card .button {
  margin-top: 10px;
}

.fixes-card article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.fixes-card article:first-of-type {
  margin-top: 18px;
}

.fixes-card h3,
.fixes-card p {
  margin: 0;
}

.fixes-card p {
  margin-top: 5px;
  color: var(--body);
  line-height: 1.45;
}

.fixes-card strong {
  grid-column: 2;
  color: var(--accent);
}

.locked-card ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 18px;
  color: var(--body);
  line-height: 1.5;
}

/* Claude dashboard simplification pass: keep data hooks, simplify the visual hierarchy. */
.executive-panel {
  grid-template-columns: 280px minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 0;
  align-items: center;
  overflow: hidden;
  padding: 48px 48px 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px -34px rgba(15, 20, 25, 0.2);
}

.executive-panel .score-copy {
  min-width: 0;
}

.executive-panel .section-kicker,
.panel-head .section-kicker {
  color: var(--accent);
}

.executive-panel .score-ring {
  width: 240px;
  max-width: 240px;
  justify-self: center;
  margin-bottom: 72px;
}

.executive-panel .score-ring strong {
  font-size: clamp(72px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.06em;
}

.executive-panel .score-ring small {
  /* Status label (Strong / Mild / Weak / etc.) lives INSIDE the score
     circle just below the big number, larger and emphasised. */
  position: static;
  margin-top: 6px;
  padding: 4px 12px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent, #6366f1);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.executive-panel .score-ring small.score-status-strong {
  background: rgba(30, 155, 107, 0.16);
  color: #1e9b6b;
}
.executive-panel .score-ring small.score-status-mild {
  background: rgba(232, 134, 21, 0.18);
  color: #c97309;
}
.executive-panel .score-ring small.score-status-weak {
  background: rgba(210, 74, 74, 0.16);
  color: #c53b3b;
}

.snap-bullets {
  display: grid;
  gap: 10px;
  margin: 16px 0 20px;
  padding: 0;
  list-style: none;
  color: var(--body);
  font-size: 15px;
}

.snap-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warning);
}

.pip.strong {
  background: var(--positive);
}

.pip.warn,
.pip.moderate {
  background: var(--warning);
}

.pip.weak {
  background: var(--orange, #c8773d);
}

.pip.miss,
.pip.missing {
  background: var(--negative);
}

.snap-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.metric-cards {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 40px -48px 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.metric-cards article {
  display: grid;
  align-content: start;
  min-height: 166px;
  padding: 28px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: #fff;
}

.metric-cards article:last-child {
  border-right: 0;
}

.metric-cards strong {
  margin: 10px 0 8px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.metric-cards em {
  display: inline-flex;
  width: fit-content;
  min-height: 20px;
  align-items: center;
  margin-bottom: 9px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metric-cards small {
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.4;
}

.result-head {
  margin-bottom: 8px;
}

.result-head h1 {
  max-width: 760px;
  font-size: clamp(46px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.pressure-panel,
.platform-panel,
.topics-panel,
.audience-pulse-panel,
.website-audit-panel,
.improve-panel,
.fixes-card,
.next-step-card {
  border-radius: 18px;
}

.panel-head {
  align-items: flex-end;
}

.panel-head h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.16;
}

.favourability-panel .panel-intro,
.platform-panel .panel-intro,
.topics-panel .panel-intro,
.website-audit-panel .panel-intro {
  max-width: 720px;
  font-size: 15px;
}

.favourability-panel .answer-bars {
  gap: 13px;
  margin-top: 22px;
}

.favourability-panel .answer-bars p {
  grid-template-columns: minmax(180px, 220px) minmax(220px, 1fr) 56px;
}

.favourability-panel .answer-bars i {
  height: 24px;
  border-radius: 6px;
}

.favourability-panel .answer-bars b {
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.competitor-tag-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.competitor-tag-panel span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.competitor-tag-panel .muted-chip {
  color: var(--muted);
  font-weight: 500;
}

/* v2 — tier-tagged competitor landscape (Section B) */
.competitor-tier-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.competitor-tier-panel article {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
}

.competitor-tier-panel article > strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.competitor-tier-panel .competitor-tag-panel {
  margin-top: 6px;
  gap: 6px;
}

.competitor-tier-panel .competitor-tag-panel span.multi-provider {
  border-color: var(--ink);
}

/* v2 — audience context (Section D companion) */
.audience-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.audience-context article {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
}

.audience-context article > strong {
  /* Larger / less timid card titles per design feedback (2026-05-01). */
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 12px;
}

.audience-list {
  list-style: disc inside;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  display: grid;
  gap: 4px;
}

.audience-list li {
  line-height: 1.45;
}

.audience-persona {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Section C — surface matrix (yes/no per platform × layer). */
.surface-matrix-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.surface-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.surface-matrix thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--line-2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.surface-matrix thead .layer-label {
  display: block;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.surface-matrix thead small {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.surface-matrix tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.surface-matrix tbody td:first-child strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
}

.surface-matrix tbody td:first-child small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.surface-matrix .surface-mark {
  font-size: 22px;
  margin-right: 8px;
  vertical-align: middle;
}

.surface-matrix .surface-yes .surface-mark {
  color: #1e9b6b;
}

.surface-matrix .surface-no .surface-mark {
  color: #d24a4a;
}

.surface-matrix .surface-na .surface-mark {
  color: var(--muted);
}

.surface-matrix tbody td small {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  text-transform: lowercase;
  vertical-align: middle;
}

/* ===================================================================
 * Section D — brand explanation column (4th col).
 * Shows what each LLM says when prompted "What's [BRAND]?" — zh on top,
 * en underneath. 2026-05-02.
 * =================================================================== */
.surface-matrix--with-brand thead th.brand-explain-col {
  width: 38%;
  min-width: 280px;
}

.surface-matrix--with-brand tbody td.brand-explain-cell {
  padding: 14px 16px;
  vertical-align: top;
  text-align: left;
  text-transform: none;
}

.surface-matrix--with-brand tbody td.brand-explain-cell .muted-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(11, 17, 27, 0.05);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-explain-zh,
.brand-explain-en {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  text-transform: none;
}

.brand-explain-zh {
  font-weight: 500;
}

.brand-explain-en {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 760px) {
  .surface-matrix--with-brand thead th.brand-explain-col {
    min-width: 220px;
  }
  .brand-explain-zh,
  .brand-explain-en {
    font-size: 12px;
  }
}

.platform-card-simple {
  display: grid;
  gap: 14px;
  align-content: start;
}

.platform-card-simple .platform-card-head {
  justify-content: flex-start;
  border-bottom: 0;
  padding-bottom: 0;
}

.platform-card-simple .platform-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
}

.platform-card-simple .platform-icon img {
  width: 25px;
  height: 25px;
}

.platform-card-simple .platform-deepseek {
  background: #eef5ff;
}

.platform-card-simple .platform-doubao {
  background: #eef3ff;
}

.platform-card-simple .platform-qwen {
  background: #f0f3ff;
}

.platform-status,
.topic-stat {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platform-status.good,
.topic-stat.good {
  background: rgba(27, 142, 85, 0.11);
  color: var(--positive);
}

.platform-status.warn,
.topic-stat.warn {
  background: rgba(178, 116, 16, 0.13);
  color: var(--warning);
}

.platform-status.bad,
.topic-stat.bad {
  background: rgba(200, 85, 61, 0.12);
  color: var(--negative);
}

.platform-domain {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
}

.platform-domain small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.platform-domain span {
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.platform-domain .domain-match {
  color: var(--positive);
}

.platform-domain .domain-miss {
  color: var(--negative);
}

.platform-observation {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  line-height: 1.45;
}

.platform-lock-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, rgba(98, 92, 240, 0.08), rgba(91, 131, 240, 0.04)) !important;
}

.platform-lock-strip strong,
.platform-lock-strip small {
  display: block;
}

.platform-lock-strip small {
  margin-top: 5px;
  color: var(--muted);
}

.platform-lock-strip a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.topic-opportunity-table .topic-row {
  grid-template-columns: minmax(280px, 1.8fr) 150px 150px minmax(190px, 1fr);
}

.topic-fix {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.45;
}

.website-audit-table .topic-row {
  /* Override legacy 4-col rule — see decisive 3-col rule at top of F section CSS. */
  grid-template-columns: minmax(280px, 2fr) 110px minmax(280px, 1.5fr);
  column-gap: 24px;
}

.indicator-cell {
  color: var(--body);
  font-size: 13px;
  line-height: 1.45;
}

.indicator-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indicator-list li {
  position: relative;
  padding-left: 13px;
}

.indicator-list li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

/* === Section B Readiness Cards — total redesign 2026-05-01.
 * Two layouts:
 *   Desktop (≥760px): 4-column row, each card stacks pill-on-top + title-bottom
 *   Mobile (<760px):  1-column list, each row is horizontal (pill-LEFT + title-RIGHT)
 * Status pills: solid colour by status, white text, never overflow.
 * === */

.readiness-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.readiness-cards article {
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  min-width: 0;          /* allow content to wrap inside grid track */
  transition: background 0.18s ease, border-color 0.18s ease;
}

.readiness-cards article[data-status="pass"]    { background: #e6f6ee; border-color: rgba(30,155,107,0.32); }
.readiness-cards article[data-status="warn"]    { background: #fff4dd; border-color: rgba(232,134,21,0.32); }
.readiness-cards article[data-status="fail"]    { background: #fde8e8; border-color: rgba(210,74,74,0.32); }
.readiness-cards article[data-status="pending"] { background: var(--surface-soft); }

/* Status pill — solid coloured block, white text, comfy padding. */
.readiness-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

[data-status="pass"] .readiness-status-pill { background: #1e9b6b; }
[data-status="warn"] .readiness-status-pill { background: #c97309; }
[data-status="fail"] .readiness-status-pill { background: #c53b3b; }
[data-status="pending"] .readiness-status-pill {
  background: var(--line-2);
  color: var(--muted);
}

/* Title within readiness card. */
.readiness-title {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Hide any legacy <em> / .pip nodes that still ship in older audits. */
.readiness-cards .pip,
.readiness-cards em {
  display: none !important;
}

/* === Mobile (<760px): 1-column vertical stack — title on top, pill
 *     below it inside each card. === */
@media (max-width: 760px) {
  .readiness-cards {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .readiness-cards article {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 12px 14px;
  }
  .readiness-status-pill {
    justify-self: start;
    align-self: start;
    padding: 4px 10px;
    font-size: 10px;
  }
  .readiness-title {
    font-size: 15px;
  }
}

.improve-panel {
  background: var(--midnight);
  color: #fff;
}

.improve-panel .section-kicker,
.improve-panel p {
  color: rgba(255, 255, 255, 0.68);
}

.improve-panel h2,
.improve-panel h3 {
  color: #fff;
}

.improve-panel article {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1280px) {
  .results-layout {
    grid-template-columns: 1fr;
  }

  .results-aside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (max-width: 1100px) {
  .hero,
  .section-heading.split,
  .audit-layout,
  .why-layout,
  .dashboard-state[data-state-panel="input"],
  .processing-board,
  .results-layout {
    grid-template-columns: 1fr;
  }

  .report-preview {
    max-width: 760px;
  }

  .cred-grid,
  .service-grid,
  .service-option-grid,
  .insight-grid,
  .ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .dashboard-form,
  .results-aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .metric-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-insights,
  .results-aside,
  .topic-plan-grid {
    grid-template-columns: 1fr;
  }

  .topic-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .topic-tabs button:nth-child(2n) {
    border-right: 0;
  }

  .source-gap-strip {
    grid-template-columns: 1fr;
  }

  .source-gap-strip div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .source-gap-strip div:last-child {
    border-bottom: 0;
  }

  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .ticker {
    display: none;
  }

  .site-header {
    padding: 14px 20px;
    gap: 10px;
  }

  .homepage .site-header {
    padding: 14px 20px;
  }

  .brand {
    font-size: 18px;
  }

  .nav-links,
  .nav-actions .ghost {
    display: none;
  }

  .nav-actions .button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
  }

  .nav-actions {
    flex: 0 0 auto;
  }

  .hero,
  .section,
  .final-cta,
  .dashboard-hero {
    padding: 56px 20px;
    width: 100%;
  }

  .homepage .hero {
    grid-template-columns: 1fr;
    padding: 56px 20px;
  }

  .dashboard-hero {
    padding-top: 0;
  }

  .state-bar {
    top: 69px;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 -20px;
    padding: 12px 20px;
  }

  .dashboard-state {
    padding-top: 46px;
  }

  .hero {
    gap: 42px;
  }

  .execution-head {
    min-height: clamp(300px, 48vh, 430px);
    padding: 42px 20px;
  }

  /* Section 02 simple head must stay flush-left at all breakpoints
   * so its kicker aligns with section 05 / 06 / 07. 2026-05-04. */
  .execution-head--simple {
    min-height: 0;
    padding: 0;
  }

  h1 {
    font-size: 39px;
    line-height: 1.04;
    max-width: 100%;
  }

  .homepage h1 {
    font-size: 39px;
  }

  .dashboard-intro h1,
  .result-head h1 {
    font-size: 40px;
    line-height: 1.06;
    max-width: 100%;
  }

  .loading-title {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .loading-orb {
    width: 44px;
    height: 44px;
  }

  .loading-phrases {
    min-height: auto;
  }

  .loading-phrases b {
    font-size: 22px;
    line-height: 1.18;
  }

  .lede,
  .section-heading p,
  .execution p,
  .final-cta p {
    font-size: 15px;
  }

  .hero-actions {
    display: grid;
    width: 100%;
  }

  .button.large {
    width: 100%;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .section-heading h2,
  .execution h2,
  .faq h2 {
    font-size: 31px;
    line-height: 1.1;
  }

  .score-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .metric-row {
    grid-template-columns: 88px minmax(0, 1fr) 32px;
    gap: 8px;
  }

  .score {
    font-size: 64px;
  }

  .stats-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-strip div {
    padding: 14px 10px;
  }

  .stats-strip strong {
    font-size: 22px;
  }

  .cred-grid,
  .service-grid,
  .service-option-grid,
  .challenge-grid,
  .insight-grid,
  .ecosystem-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .cred-grid,
  .challenge-grid,
  .insight-grid,
  .service-grid,
  .service-option-grid,
  .steps {
    border-left: 0;
  }

  .cred-grid article,
  .challenge-grid article,
  .insight-grid article,
  .service-grid article,
  .service-option-card,
  .steps article {
    border-left: 1px solid var(--line);
  }

  .audit-form {
    padding: 24px;
  }

  .dashboard-form,
  .score-panel,
  .platform-panel,
  .topics-panel,
  .improve-panel,
  .evidence-panel,
  .pressure-panel,
  .website-audit-panel,
  .fixes-card,
  .locked-card,
  .next-step-card {
    padding: 22px;
  }

  .score-panel,
  .improve-grid,
  .platform-grid,
  .prompt-grid,
  .website-audit-grid,
  .readiness-cards,
  .platform-insights,
  .topic-plan-grid {
    grid-template-columns: 1fr;
  }

  .locked-platforms {
    grid-template-columns: 1fr;
  }

  .website-audit-lock {
    align-items: flex-start;
    flex-direction: column;
  }

  .topic-tabs {
    grid-template-columns: 1fr;
  }

  .topic-tabs button {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .topic-tabs button:last-child {
    border-bottom: 0;
  }

  .topic-table {
    overflow: visible;
  }

  .topic-row {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
  }

  .topic-row > * {
    padding: 0;
  }

  .topic-head {
    display: none;
  }

  .topic-name,
  .intent-bar {
    grid-column: 1 / -1;
  }

  .topic-row > strong::before,
  .topic-row > span::before,
  .intent-bar::before {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .intent-bar {
    height: auto;
    min-height: 10px;
    overflow: visible;
    background: transparent;
  }

  .intent-bar i,
  .intent-bar b,
  .intent-bar em,
  .intent-bar u {
    height: 10px;
  }

  .topic-row button {
    grid-column: 1 / -1;
  }

  .score-ring {
    max-width: 190px;
  }

  .metric-cards {
    grid-template-columns: 1fr;
  }

  .panel-head {
    display: grid;
  }

  .answer-bars p {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .executive-panel .score-ring {
    margin-bottom: 30px;
  }

  .snap-cta,
  .platform-lock-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .score-sources {
    grid-column: auto;
    margin-top: 0;
  }

  .pipeline-list li {
    grid-template-columns: 30px 1fr 34px;
  }

  .pipeline-list strong {
    grid-column: auto;
  }

  .flow {
    line-height: 1.7;
  }

  .report-preview {
    width: 100%;
    max-width: 100%;
  }

  .sample-answer,
  .answer-sample h3 {
    overflow-wrap: anywhere;
  }

  .service-demo {
    height: 126px;
  }

  .iso-visual {
    min-height: 430px;
  }

  .iso-visual::before {
    inset: 76px 8% auto;
  }

  .iso-card {
    width: 132px;
    height: 84px;
    padding: 13px;
  }

  .iso-card-a {
    left: 9%;
    top: 74px;
  }

  .iso-card-b {
    left: 38%;
    top: 148px;
  }

  .iso-card-c {
    right: 8%;
    top: 236px;
  }

  .iso-core {
    width: 174px;
    height: 110px;
    top: 55%;
  }

  .iso-panel {
    left: 10%;
    right: auto;
    bottom: 34px;
    width: 180px;
  }

  .process-visual {
    grid-template-columns: 1fr;
  }

  .process-visual {
    padding: 18px;
  }

  .processing-stack {
    min-height: 170px;
  }

  blockquote {
    padding: 26px;
    font-size: 24px;
  }

  /* === Mobile overrides for v2 sections (2026-05-01).
   * Per claude-dashboard-design-brief-v2:125 — Stacked cards · Summary
   * first · CTA sticky or repeated after summary. === */

  .results-layout { gap: 14px; }

  /* Section A: 2 metric cards stack vertically on mobile. */
  .metric-cards {
    grid-template-columns: 1fr;
  }

  /* Section A: above-the-fold CTAs stay compact + side-by-side on mobile. */
  .score-panel .snap-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .score-panel .snap-cta .button {
    flex: 1 1 calc(50% - 4px);
    min-height: 42px;
    padding: 0 12px;
    font-size: 13px;
  }

  /* Section B/C/D/E/F: tighten panel padding + breathing room. */
  .pressure-panel,
  .platform-panel,
  .topics-panel,
  .audience-pulse-panel,
  .website-audit-panel,
  .improve-panel {
    padding: 18px 16px;
    margin-bottom: 10px;
  }

  .panel-head h2 {
    font-size: 19px;
    line-height: 1.25;
  }

  .panel-intro {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Sticky bottom CTA bar — always visible during scroll so user has
     a clear next step without hunting for it (design brief §125). */
  .mobile-sticky-cta {
    display: flex;
    gap: 8px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    margin: 0 -16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--line);
    z-index: 50;
  }
  .mobile-sticky-cta .button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
    text-align: center;
  }

  /* Section C: surface-matrix table — let cells breathe vertically. */
  .surface-matrix thead th,
  .surface-matrix tbody td {
    padding: 10px 12px;
  }
  .surface-matrix .surface-mark {
    font-size: 18px;
    margin-right: 4px;
  }

  /* Section D: cards single-column on mobile. */
  .topic-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .topic-card {
    padding: 12px 14px;
  }

  /* Section E: stack the 3 audience blocks (portfolio / worries / desires). */
  .audience-context {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Section E market portfolio: items already vertical, just tighten. */
  .market-portfolio-list .portfolio-item {
    padding: 10px 12px;
    gap: 10px;
  }
  .market-portfolio-list .portfolio-icon {
    font-size: 18px;
    width: 24px;
  }

  /* Section F: readiness 3-col table → cards stack on mobile. */
  .website-audit-table .topic-row {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 6px;
    padding: 10px 0;
  }
  .website-audit-table .topic-head {
    display: none;
  }

  /* === Mobile mockup integration finish-pass (2026-05-06) ===
   * Closes the gaps between dashboard.html and dashboard-mobile-mockup.html
   * at ≤760px without touching desktop. Pure CSS — markup hooks already
   * exist (.score-ring, .metric-cards, .surface-matrix tbody, .results-aside,
   * .mobile-sticky-cta). See ~/.claude/plans/fluttering-launching-eich.md.
   */

  /* (1) Section A · Score panel: stack ring above copy. The desktop layout
     is 2-col (ring left, copy right) which crams text at 375px. */
  .executive-panel,
  .score-panel.executive-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
  }
  .executive-panel .score-ring {
    width: 132px;
    height: 132px;
    justify-self: start;
  }
  .executive-panel .score-ring strong {
    font-size: 36px;
  }
  .executive-panel .score-copy h2,
  .executive-panel .score-copy [data-score-heading] {
    font-size: 22px;
    line-height: 1.25;
  }

  /* (2) Section A · Sub-score chips → 2-col grid (was 1-col in earlier
     pass). Mockup shows a tight 2×3 chip grid — more legible than a long
     stack of 6 single-column chips. */
  .metric-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .metric-cards article {
    padding: 10px 12px;
    min-width: 0;
  }
  .metric-cards span,
  .metric-cards small {
    font-size: 10px;
  }
  .metric-cards strong {
    font-size: 22px;
  }

  /* (3) Section D · Platform snapshot table → 3 stacked cards.
     Headline change in the mockup: at 375px the 4-col table is unreadable,
     so we transform <table> rows into vertical cards. Cell ordering per
     script.js renderPlatformSnapshot (line 640):
       td:nth-child(1) = engine name + zh sub
       td:nth-child(2) = L1 / Big-category surface state
       td:nth-child(3) = L2 / Sub-category surface state
       td:nth-child(4) = .brand-explain-cell (zh + en + product opinion) */
  .surface-matrix-wrap {
    overflow: visible;
  }
  .surface-matrix {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  .surface-matrix thead {
    display: none;
  }
  .surface-matrix tbody {
    display: block;
  }
  .surface-matrix tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper, #fff);
  }
  .surface-matrix tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  /* Engine-name cell spans both columns at the top of the card. */
  .surface-matrix tbody td:first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-2, #f2f3f6);
  }
  .surface-matrix tbody td:first-child strong {
    font-size: 16px;
    color: var(--ink);
  }
  .surface-matrix tbody td:first-child small {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  /* L1 + L2 surface cells become side-by-side badge tiles. */
  .surface-matrix tbody td:nth-child(2),
  .surface-matrix tbody td:nth-child(3) {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-soft, #f7f8fa);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .surface-matrix tbody td:nth-child(2)::before {
    content: "Category · L1";
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .surface-matrix tbody td:nth-child(3)::before {
    content: "Sub-category · L2";
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .surface-matrix tbody td .surface-mark {
    font-size: 18px;
    line-height: 1;
    margin-right: 0;
  }
  .surface-matrix tbody td small {
    font-size: 11px;
  }
  /* Brand-explanation cell spans the full card width at the bottom. */
  .surface-matrix tbody td.brand-explain-cell {
    grid-column: 1 / -1;
    padding-top: 4px;
  }
  .surface-matrix tbody td.brand-explain-cell .brand-explain-zh,
  .surface-matrix tbody td.brand-explain-cell .brand-explain-en {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* (4) Hide aside on mobile. Sticky CTA + Section A's .snap-cta cover the
     two CTAs the aside duplicates. Removes vertical scroll noise. */
  .results-aside {
    display: none;
  }
  .results-layout {
    grid-template-columns: 1fr;
  }

  /* (5) Fix horizontal overflow in panels with long English bullets.
     min-width: 0 is required because grid items default to min-content. */
  .results-main,
  .results-main > section,
  .website-audit-panel,
  .topic-table-card,
  .topic-table,
  .topic-row,
  .topic-name {
    min-width: 0;
  }
  .topic-row .topic-name strong,
  .topic-row .topic-name small,
  .topic-row span,
  .topic-row [data-label] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* (6) Bottom padding on results-main so sticky CTA doesn't cover the last
     panel's content / CTA. Sticky bar height ≈ 64px + safe-area inset. */
  .results-main {
    padding-bottom: 84px;
  }
}

@media (max-width: 420px) {
  .hero,
  .section,
  .final-cta,
  .site-footer,
  .dashboard-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .homepage .hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .state-bar {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .report-head,
  .score-grid,
  .answer-sample {
    padding-left: 16px;
    padding-right: 16px;
  }

  .eco-list p {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 13px 0;
  }
}

/* ===================================================================
 * Section D platform-snapshot icon + bullet refresh (2026-05-06).
 * Replaces emoji marks (✅/❌/—) with CSS-drawn icons, bullets the brand
 * explanation EN paragraph, and reds the "No explanation" muted-chip.
 * =================================================================== */

.surface-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* Inline SVG icons (single-color stroke). Robust to font/DPR quirks and
   guaranteed to sit centered inside the 20x20 circle. The earlier
   pure-CSS rotate(45deg) check overflowed on Chrome iOS at small sizes —
   SVG strokes don't have that issue. 2026-05-06. */
.surface-icon.icon-yes {
  background-color: #1b8e55; /* --positive */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5 L8.5 14 L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.surface-icon.icon-no {
  background-color: #c8553d; /* --negative */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6 L14 14 M14 6 L6 14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>");
}

.surface-icon.icon-na {
  background-color: var(--line, #e7e8ec);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10 L15 10' fill='none' stroke='%237a818e' stroke-width='2.4' stroke-linecap='round'/></svg>");
}

/* Brand-explanation EN bullet list (Section D 4th cell). */
.brand-explain-cell ul.brand-explain-en,
.brand-explain-cell ul.brand-explain-product-en {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 4px;
}
.brand-explain-cell ul.brand-explain-en li,
.brand-explain-cell ul.brand-explain-product-en li {
  position: relative;
  padding-left: 14px;
  color: var(--body, #4a5161);
  font-size: 13px;
  line-height: 1.5;
}
.brand-explain-cell ul.brand-explain-en li::before,
.brand-explain-cell ul.brand-explain-product-en li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  background: var(--accent, #6366f1);
  border-radius: 50%;
}
.brand-explain-cell p.brand-explain-en {
  margin: 0;
  color: var(--body, #4a5161);
  font-size: 13px;
  line-height: 1.5;
}

/* "No explanation" — red emphasis instead of generic muted chip.
 * Specificity bumped to win against `.surface-matrix--with-brand tbody
 * td.brand-explain-cell .muted-chip` (line 6633). 2026-05-06. */
.surface-matrix tbody td.brand-explain-cell .muted-chip.explanation-missing,
.brand-explain-cell .muted-chip.explanation-missing {
  background: rgba(200, 85, 61, 0.10);
  color: #c8553d;
  border-color: rgba(200, 85, 61, 0.32);
  font-weight: 600;
}

/* ===================================================================
 * Section B audit-row "?" help tooltip (2026-05-06).
 * Replaces the always-on inline caption with a click-on-mobile /
 * hover-on-desktop popover so each check stays scannable.
 * Desktop hover: pure CSS via .audit-help:hover .audit-help-bubble.
 * Mobile tap: script.js toggles .is-open which forces the bubble visible.
 * =================================================================== */

.topic-row .topic-name-head {
  /* `display: flex` (block-level) so the head spans the full cell width;
     the ? button sits at the right via margin-left:auto. This makes the
     bubble (anchored to head, right:0) hug the cell's right edge — which
     is near the viewport edge on mobile, so the bubble doesn't get
     pushed past the left viewport edge. */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  position: relative;
}

.topic-row .topic-name-head > strong:first-child {
  margin-right: auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.topic-row button.audit-help,
button.audit-help {
  /* Wins over `.topic-row button` at line 5927 which solid-blue-fills any
     button inside an audit row. We want a small gray "?" pip, not a CTA. */
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  /* Intentionally NOT position:relative — we want the bubble to anchor to
     `.topic-name-head` for more horizontal room on narrow phones. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  justify-self: auto;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.topic-row button.audit-help:hover,
.topic-row button.audit-help:focus-visible,
.topic-row button.audit-help.is-open,
button.audit-help:hover,
button.audit-help:focus-visible,
button.audit-help.is-open {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--surface-soft, #f7f8fa);
  outline: none;
}

.audit-help-mark {
  pointer-events: none;
}

.audit-help-bubble {
  /* Anchored to .topic-name-head (the parent row), not the button
     itself — gives the bubble enough room on narrow phones. */
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  margin-top: 8px;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--ink, #0f1419);
  color: #fff;
  border-radius: 10px;
  font-family: var(--font-body, inherit);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
  pointer-events: none;
  z-index: 60;
}

.audit-help-bubble::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--ink, #0f1419);
}

.audit-help:hover .audit-help-bubble,
.audit-help:focus-visible .audit-help-bubble,
.audit-help.is-open .audit-help-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s, transform 0.15s, visibility 0s;
}

/* ===================================================================
 * Eastbound brand-gradient elements (2026-05-01).
 * Signal Indigo → Vector Blue per brand guide Option 01.
 * =================================================================== */

.improve-panel.brand-gradient,
.next-step-card.brand-gradient,
.locked-card.brand-gradient {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
}

.improve-panel.brand-gradient .section-kicker,
.improve-panel.brand-gradient h2,
.improve-panel.brand-gradient h3,
.improve-panel.brand-gradient p {
  color: #fff;
}

.improve-panel.brand-gradient .section-kicker {
  color: rgba(255, 255, 255, 0.85);
}

.improve-panel.brand-gradient .improve-grid article {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Inline SVG icons (Lucide-style stroke). White stroke on the brand
   gradient, currentColor inheritance keeps them in sync with the panel. */
.improve-icon,
.callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}

.improve-icon svg,
.callout-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.callout-icon svg {
  width: 18px;
  height: 18px;
}

/* Weekly callout banner — sits at the BOTTOM of the unlock block now. */
.improve-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}

.improve-callout p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.improve-callout strong {
  color: #fff;
}

.improve-callout .callout-icon {
  flex: 0 0 auto;
}

/* Section D upsell card at bottom of platform-panel. */
.section-upsell {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 8px;
}

.section-upsell strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.section-upsell p {
  margin: 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.5;
}

.section-upsell .button {
  justify-self: start;
  margin-top: 6px;
}

/* Improve-panel grid: card icons stack above title. */
.improve-grid article {
  display: grid;
  gap: 6px;
  align-content: start;
}

.improve-grid .improve-icon {
  font-size: 26px;
  margin-bottom: 4px;
}

@media (max-width: 760px) {
  .section-upsell {
    padding: 14px 16px;
  }
  .section-upsell .button {
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }
  .improve-callout {
    padding: 10px 12px;
  }
}

/* ==================================================================
 * Mobile UX refinements (2026-05-01).
 * - Readiness cards single line (4-col tight grid)
 * - Brand-coloured status label (em)
 * - Drop the STATUS / INDICATORS pseudo-labels in F audit table
 * - Step bar (01/02/03) NOT sticky on mobile
 * - Inner padding for cards so text never touches edges
 * ================================================================== */
@media (max-width: 760px) {

  /* Step bar should NOT pin to top on mobile — let it scroll with the page.
     Also force the 3 step tabs (01 / 02 / 03) onto a SINGLE LINE so they
     don't wrap to a second row. */
  .state-bar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin-left: -16px;
    margin-right: -16px;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
  .state-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }
  .state-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  /* Section B readiness rules now live in the totally-redesigned block at
     the bottom of this file (mobile = 1-col horizontal-row layout). */

  /* Section F (Website readiness) audit table on mobile: drop the pseudo
     STATUS / INDICATORS labels — they're noisy and hard to read. */
  .website-audit-table .topic-row > strong::before,
  .website-audit-table .topic-row > span::before {
    content: none !important;
  }
  .website-audit-table .topic-row {
    padding: 14px 14px;
    gap: 8px;
  }
  .website-audit-table .topic-row .topic-name strong {
    font-size: 14px;
  }
  .website-audit-table .audit-status {
    align-self: flex-start;
  }

  /* Generic spacing — make sure card text never hugs the edge. */
  .competitor-tier-panel article,
  .audience-context article,
  .readiness-cards article,
  .topic-card,
  .surface-matrix tbody td,
  .surface-matrix thead th,
  .next-step-card,
  .fixes-card article {
    padding-left: max(14px, var(--card-pad-x, 14px));
    padding-right: max(14px, var(--card-pad-x, 14px));
  }
  .competitor-tier-panel article {
    padding: 14px 16px;
  }
  .panel-intro {
    padding: 0 2px;
  }
  .result-head,
  [data-result-tagline] {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ==================================================================
 * Refinements (2026-05-01 — round 2)
 * ================================================================== */

/* Result-head — top of the dashboard above Section A (2026-05-01 redesign).
 * Generous breathing room so the eyebrow tags, headline and meta line
 * each have their own visual weight. */
.result-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
  padding-top: 8px;
}

.result-head .eyebrow,
.dashboard-intro .eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.result-head .eyebrow span,
.dashboard-intro .eyebrow span {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.result-head [data-result-tagline] {
  margin: 0;
}

.result-head [data-report-meta] {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.result-head [data-report-meta]:empty {
  display: none;
}

/* Section kicker (B · WEBSITE READINESS) — bigger, more apart from the
   h2, brand-coloured uppercase chip. h2 below also bigger. */
.panel-head .section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-head h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Section B legacy <em>-pill styles superseded by the new
   .readiness-status-pill markup. <em> is hidden via the redesign block. */

/* F audit-status pill: wider so PASS / WARN / FAIL never gets cropped. */
.audit-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Improve grid (full audit unlock): icon LEFT, text right, smaller card. */
.improve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}

.improve-panel.brand-gradient .improve-grid article {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
}

.improve-panel.brand-gradient .improve-grid .improve-icon {
  width: 36px;
  height: 36px;
  margin: 2px 0 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  flex: 0 0 36px;
}

.improve-panel.brand-gradient .improve-grid .improve-icon svg {
  width: 20px;
  height: 20px;
}

.improve-panel.brand-gradient .improve-grid h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
}

.improve-panel.brand-gradient .improve-grid p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

@media (min-width: 760px) {
  /* Desktop: 2-up grid for breathing room, still icon-on-left layout. */
  .improve-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .panel-head h2 {
    font-size: 22px;
  }
  .panel-head .section-kicker {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .result-head {
    gap: 14px;
    margin-bottom: 18px;
    padding-top: 6px;
  }
  .result-head .eyebrow {
    gap: 6px;
  }
  .result-head .eyebrow span {
    padding: 5px 11px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .result-head [data-result-tagline] {
    margin: 0;
  }
}

/* ===================================================================
 * Homepage AI Visibility Report preview — refreshed 2026-05-02 to
 * mirror the latest dashboard sections (A · Executive, B · Website
 * readiness, D · Platform snapshot, E · Audience hot topics).
 * =================================================================== */

.report-preview .report-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.report-preview .report-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.report-preview .report-section-label {
  display: block;
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.report-preview .report-section-label em {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.14);
  color: var(--accent);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.10em;
}

/* A · Executive snapshot — compact score block */
.report-preview .report-score-block {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.report-preview .report-score-ring {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.report-preview .report-score-ring strong {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 1;
}
.report-preview .report-score-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.report-preview .report-score-status-strong { background: rgba(30, 155, 107, 0.16); color: #1e9b6b; }
.report-preview .report-score-status-mild   { background: rgba(232, 134, 21, 0.18); color: #c97309; }
.report-preview .report-score-status-weak   { background: rgba(210, 74, 74, 0.16);  color: #c53b3b; }
.report-preview .report-score-tagline {
  margin: 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.4;
}

/* Generic block wrapper */
.report-preview .report-block {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

/* B · Website readiness — pill rows */
.report-preview .report-readiness {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.report-preview .report-readiness li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.report-preview .report-readiness li[data-status="pass"] { background: #e6f6ee; }
.report-preview .report-readiness li[data-status="warn"] { background: #fff4dd; }
.report-preview .report-readiness li[data-status="fail"] { background: #fde8e8; }

.report-preview .report-pill {
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.report-preview .report-pill-pass { background: #1e9b6b; }
.report-preview .report-pill-warn { background: #c97309; }
.report-preview .report-pill-fail { background: #c53b3b; }

/* D · Platform snapshot matrix */
.report-preview .report-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.report-preview .report-matrix thead th {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.report-preview .report-matrix thead th small {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.report-preview .report-matrix tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink);
}
.report-preview .report-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.report-preview .report-matrix .cell-yes { color: var(--accent); font-weight: 700; font-size: 16px; }
.report-preview .report-matrix .cell-no  { color: #94a3b8; font-weight: 700; font-size: 16px; }

/* E · Audience hot topics — chip list */
.report-preview .report-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.report-preview .report-topics li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
}
.report-preview .report-topic-type {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.report-preview .report-topics small {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  flex: 0 0 auto;
}

/* ===================================================================
 * Mobile report-preview tuning (2026-05-05). The card is shown on
 * mobile as a stacked single-column "AI Visibility Report" preview so
 * visitors immediately see what the dashboard delivers. All four
 * sections (A executive snapshot, B website readiness, D platform
 * snapshot, E audience hot topics) stay visible; nested blocks pull
 * inward from the card edges so they don't look cramped at 375–430px.
 * =================================================================== */
@media (max-width: 760px) {
  .report-preview {
    border-radius: 16px;
  }

  .report-preview .report-head {
    padding: 14px 16px;
    gap: 10px;
  }
  .report-preview .report-head p {
    font-size: 12px;
    margin-bottom: 3px;
  }
  .report-preview .report-tag {
    font-size: 9px;
    padding: 2px 8px;
    letter-spacing: 0.08em;
  }
  .report-preview .report-badge {
    font-size: 10px;
  }

  .report-preview .report-section-label {
    font-size: 9px;
    margin-bottom: 8px;
  }
  .report-preview .report-section-label em {
    font-size: 8px;
    padding: 1px 6px;
  }

  /* A · Executive snapshot — compact score block, with side margin so
   * the inner card no longer touches the outer card edge. */
  .report-preview .report-score-block {
    margin: 14px 14px 14px;
    padding: 14px;
    border-radius: 12px;
    gap: 10px;
  }
  .report-preview .report-score-ring strong { font-size: 44px; }
  .report-preview .report-score-status {
    font-size: 11px;
    padding: 3px 10px;
  }
  .report-preview .report-score-tagline {
    font-size: 12.5px;
  }

  /* Generic block wrappers (B / D / E) — tighter padding + side margin */
  .report-preview .report-block {
    margin: 14px;
    padding: 12px;
    border-radius: 12px;
  }

  /* B · Website readiness rows */
  .report-preview .report-readiness {
    gap: 6px;
  }
  .report-preview .report-readiness li {
    padding: 7px 10px;
    font-size: 12px;
  }
  .report-preview .report-pill {
    font-size: 9px;
    padding: 2px 8px;
    letter-spacing: 0.05em;
  }

  /* D · Platform snapshot matrix — narrower columns for 375px viewport */
  .report-preview .report-matrix {
    font-size: 11px;
  }
  .report-preview .report-matrix thead th {
    padding: 6px 6px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .report-preview .report-matrix thead th small {
    font-size: 10px;
    margin-top: 1px;
  }
  .report-preview .report-matrix tbody td {
    padding: 7px 6px;
    font-size: 12px;
  }
  .report-preview .report-matrix .cell-yes,
  .report-preview .report-matrix .cell-no {
    font-size: 14px;
  }

  /* E · Audience hot topics chip rows */
  .report-preview .report-topics li {
    padding: 7px 10px;
    font-size: 12px;
    gap: 8px;
  }
  .report-preview .report-topic-type {
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: 0.05em;
  }
  /* Tighten the auto-scrolling ticker windows so 3 rows fit cleanly. */
  .report-readiness-window,
  .report-topics-window {
    --ticker-row-h: 44px;
  }
}

/* ===================================================================
 * Homepage Section E ticker — auto-scrolling topic feed (2026-05-02).
 * Shows 3 topics at a time, vertically scrolls through 6 unique items
 * with a seamless duplicate-loop. Hover pauses.
 * =================================================================== */
.report-topics-window {
  --ticker-row-h: 56px;
  --ticker-gap: 8px;
  --ticker-visible: 3;
  --ticker-unique: 6;
  position: relative;
  height: calc(
    var(--ticker-row-h) * var(--ticker-visible)
    + var(--ticker-gap) * (var(--ticker-visible) - 1)
  );
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.report-topics-window .report-topics-ticker {
  display: grid;
  gap: var(--ticker-gap);
  animation: report-topics-scroll 22s linear infinite;
  will-change: transform;
}

.report-topics-window:hover .report-topics-ticker,
.report-topics-window:focus-within .report-topics-ticker {
  animation-play-state: paused;
}

.report-topics-window .report-topics-ticker li {
  height: var(--ticker-row-h);
  padding: 0 12px;
  align-items: center;
  /* keep all li children on one row visually */
  overflow: hidden;
}

.report-topics-window .report-topic-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

@keyframes report-topics-scroll {
  /* Travel from y=0 to -(unique * row + gap) so the duplicates of the
     first 3 land in the same visual position, making the loop seamless. */
  0%   { transform: translateY(0); }
  100% { transform: translateY(
    calc(
      -1 * (
        var(--ticker-row-h) * var(--ticker-unique)
        + var(--ticker-gap) * var(--ticker-unique)
      )
    )
  ); }
}

@media (prefers-reduced-motion: reduce) {
  .report-topics-window .report-topics-ticker {
    animation: none;
  }
}

@media (max-width: 760px) {
  .report-topics-window {
    --ticker-row-h: 64px;
  }
}

/* ===================================================================
 * Homepage Section B ticker — one row at a time (2026-05-02).
 * The 4 readiness rows switch with a step animation: 2.5s hold per row,
 * then a 0.4s slide to the next. Loop seamlessly via duplicate first.
 * =================================================================== */
.report-readiness-window {
  --readiness-row-h: 38px;
  --readiness-gap: 6px;
  position: relative;
  height: var(--readiness-row-h);
  overflow: hidden;
}

.report-readiness-window .report-readiness-ticker {
  display: grid;
  gap: var(--readiness-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Step + slide pattern. 4 unique rows × ~3s each ≈ 12s loop. */
  animation: report-readiness-cycle 12s steps(4, end) infinite;
  will-change: transform;
}

.report-readiness-window:hover .report-readiness-ticker,
.report-readiness-window:focus-within .report-readiness-ticker {
  animation-play-state: paused;
}

.report-readiness-window .report-readiness-ticker li {
  height: var(--readiness-row-h);
  padding: 0 12px;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

@keyframes report-readiness-cycle {
  /* Travel one full row+gap per "step", advancing 4 rows over the 4-step
     timing function. The 5th li (duplicate of row 1) covers the wrap. */
  0%   { transform: translateY(0); }
  100% { transform: translateY(
    calc(-1 * (var(--readiness-row-h) * 4 + var(--readiness-gap) * 4))
  ); }
}

@media (prefers-reduced-motion: reduce) {
  .report-readiness-window .report-readiness-ticker {
    animation: none;
  }
  .report-readiness-window {
    height: auto;
    overflow: visible;
  }
}

/* ===================================================================
 * Section 04 (free-report) "Check my website" CTA — brand gradient
 * background with a soft dotted outline (matches the upsell-box style
 * elsewhere). 2026-05-02.
 * =================================================================== */
.audit-cta-button {
  background: var(--brand-gradient);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.audit-cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px -18px rgba(99, 102, 241, 0.55);
}

.audit-cta-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===================================================================
 * Hero audit form (2026-05-02) — single URL input + CTA button.
 * =================================================================== */
.hero-audit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  max-width: 520px;
}

.hero-audit-form input[type="url"] {
  flex: 1 1 280px;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero-audit-form input[type="url"]::placeholder {
  color: var(--muted);
}

.hero-audit-form input[type="url"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.hero-audit-form .audit-cta-button {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 22px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .hero-audit-form {
    flex-direction: column;
    gap: 10px;
  }
  .hero-audit-form input[type="url"],
  .hero-audit-form .audit-cta-button {
    width: 100%;
    flex: 1 1 auto;
    height: 52px;
  }
}

/* ===================================================================
 * Step 01 (Input panel) — 2-column layout (2026-05-02).
 * Left = copy + 3 promise cards. Right = form card. Stacks on mobile.
 * =================================================================== */
.dashboard-state[data-state-panel="input"] .input-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
}

.dashboard-state[data-state-panel="input"] .input-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dashboard-state[data-state-panel="input"] .input-copy h1 {
  margin: 0;
}

/* Promise cards sit just under the H1 — closer + cleaner than before. */
.dashboard-state[data-state-panel="input"] .input-copy .promise-grid {
  margin-top: 8px;
}

/* Form card — slight elevation on its own column. */
.dashboard-state[data-state-panel="input"] .input-form-card {
  position: sticky;
  top: 32px;
}

@media (max-width: 960px) {
  .dashboard-state[data-state-panel="input"] .input-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card {
    position: static;
  }
}

/* ===================================================================
 * Section 08 — insight cards with realistic photos + Read more link.
 * 2026-05-04. Replaces the old gradient-only card header with a real
 * photo at the top and a clean body underneath.
 * =================================================================== */
.insight-grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border: 0;
  margin-top: 8px;
}

.insight-grid--three .insight-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.insight-grid--three .insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -18px rgba(11, 17, 27, 0.18);
}

.insight-grid--three .insight-card article {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

/* The "Read more →" pseudo-element from the older card style would
 * collide with the new explicit `.insight-card-cta` — neutralise it. */
.insight-grid--three .insight-card article::after {
  content: none;
}

/* Override the older `.insight-grid div` (line ~3884) and `.insight-grid span /
 * h3` rules (line ~3900) which were written for a different older layout and
 * otherwise force display:flex/min-height/padding/background on our photo +
 * body divs. Keep these resets DEDICATED PER ELEMENT so the photo's own
 * `background-size: cover` below isn't reset by a shared `background: none`. */
.insight-grid--three div.insight-card-photo,
.insight-grid--three div.insight-card-body {
  display: block;
  align-items: initial;
  min-height: 0;
  border-bottom: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.insight-grid--three div.insight-card-body {
  background: none;
}

.insight-grid--three div.insight-card-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(99, 102, 241, 0.08);
}

.insight-grid--three .insight-card-body {
  padding: 22px 22px 24px;
}

.insight-grid--three .insight-card-body > span,
.insight-grid--three .insight-card-body > h3,
.insight-grid--three .insight-card-body > p,
.insight-grid--three .insight-card-cta {
  padding-left: 0;
  padding-right: 0;
}

.insight-grid--three .insight-card-body span {
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insight-grid--three .insight-card-body h3 {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--ink);
}

.insight-grid--three .insight-card-desc {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--font-sans, inherit);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
}

.insight-grid--three .insight-card-cta {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  transition: transform 0.18s ease;
}

.insight-grid--three .insight-card:hover .insight-card-cta {
  transform: translateX(4px);
}

.insights-index-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

@media (max-width: 880px) {
  .insight-grid--three {
    grid-template-columns: 1fr;
  }
}

/* --four variant: 4 cards in a row on desktop, falls back to 2 then 1.
 * Used together with --three so all the photo+body reset rules
 * (line ~9064) still apply. Source order means the column-count
 * declaration here wins by virtue of coming after --three. */
.insight-grid--four {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1080px) {
  .insight-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .insight-grid--four {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
 * Section 08 — Photo-picker layout (2026-05-04 v2).
 * Each article gets its own row showing all 3 photo options labelled
 * A / B / C. Meta on the left, 3 options on the right.
 * =================================================================== */
.insight-picker {
  display: grid;
  gap: 56px;
  margin-top: 8px;
}

.insight-picker-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.insight-picker-row:last-child {
  border-bottom: 1px solid var(--line);
}

.insight-picker-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 96px;
}

.insight-picker-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.insight-picker-meta h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}

.insight-picker-meta p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.insight-picker-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.insight-card--option {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.insight-card--option:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -18px rgba(11, 17, 27, 0.18);
  border-color: var(--accent);
}

.insight-card--option article {
  padding: 0;
  border: 0;
  background: transparent;
}

.insight-card--option article::after {
  content: none;
}

.insight-option-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px -2px rgba(11, 17, 27, 0.18);
}

.insight-card--option .insight-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: rgba(99, 102, 241, 0.08);
}

.insight-card--option .insight-card-body {
  padding: 16px 18px 18px;
}

.insight-card--option .insight-card-body span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insight-card--option .insight-card-body h3 {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}

.insight-card--option .insight-card-cta {
  display: inline-block;
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  transition: transform 0.18s ease;
}

.insight-card--option:hover .insight-card-cta {
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .insight-picker-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .insight-picker-meta {
    position: static;
  }
}

@media (max-width: 760px) {
  .insight-picker {
    gap: 36px;
  }
  .insight-picker-options {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
 * Mobile drawer menu (left side, triggered by clicking the eastbound
 * logo on small screens). Hidden entirely on desktop. 2026-05-04.
 * =================================================================== */
.brand--toggle {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
}

.mobile-drawer:not([hidden]) {
  display: block;
}

.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 27, 0.45);
  animation: drawerFade 0.22s ease both;
}

.mobile-drawer-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(86vw, 320px);
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 32px;
  box-shadow: 18px 0 60px -28px rgba(11, 17, 27, 0.28);
  animation: drawerSlideIn 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes drawerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes drawerSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mobile-drawer-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.mobile-drawer-close svg {
  width: 18px;
  height: 18px;
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.mobile-drawer-nav a {
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.mobile-drawer-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}

.mobile-drawer-actions .button.full {
  width: 100%;
  text-align: center;
}

/* Hide drawer toggle (logo-button behaviour) on desktop — clicking the
 * logo there should still scroll to top. We do that by toggling the
 * underlying anchor vs button via JS at the right viewport. For now,
 * just suppress the cursor-pointer hint on desktop. */
@media (min-width: 761px) {
  .brand--toggle { cursor: default; }
}

/* ===================================================================
 * Section 05 — mobile-only extras inside 03 Prompt card.
 * Shows D + E demo graphics (duplicated from the hero report card,
 * which is hidden on mobile). 2026-05-04.
 *
 * Visually toned **warm-amber** to distinguish them from the indigo
 * process graphics — they show the AUDIT RESULT, not the procedure.
 * =================================================================== */
.method-mobile-extras {
  display: none;
}

.method-step .method-mobile-extra-title,
.method-mobile-extra-title {
  margin: 22px 0 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid #f59e0b;
  border-radius: 3px;
  line-height: 1.35;
}

/* Mobile-only D & E inside the Methodology section. Light-mode brand
 * purple palette — matches the rest of section 05. 2026-05-04. */
.method-mobile-extras .method-dash {
  background: var(--accent-soft);
  border-color: rgba(99, 102, 241, 0.28);
}

.method-mobile-extras .method-dash-eyebrow {
  color: var(--accent);
}

.method-mini-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.method-mini-matrix th,
.method-mini-matrix td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(99, 102, 241, 0.18);
}

.method-mini-matrix th {
  font-weight: 600;
  color: var(--ink);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.method-mini-matrix th small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1px;
}

.method-mini-matrix .cell-yes { color: var(--accent); font-weight: 700; font-size: 14px; }
.method-mini-matrix .cell-no  { color: #94a3b8; font-weight: 700; font-size: 14px; }

.method-mini-topics {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.method-mini-topics li {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
  padding: 7px 9px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.22);
}

.method-mini-topics li span {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.14);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Note: previously the hero .report-preview was display:none on mobile and
 * D + E sections were duplicated inside Section 05's 03 Prompt card via
 * .method-mobile-extras as a workaround. As of 2026-05-05 the hero card
 * is mobile-readable in its own right (see "Mobile report-preview tuning"
 * block in this file), so both the hide-rule and the duplicate markup have
 * been removed. .method-mobile-extras now stays display:none across all
 * breakpoints (its content lives in the hero card). */

/* ===================================================================
 * Section 02 — mobile spacing for current 4-card animation set.
 * =================================================================== */
@media (max-width: 760px) {
  .execution.section {
    padding-top: 40px;
  }
}

/* ===================================================================
 * Floating back-to-top button (mobile only). Appears once user has
 * scrolled past the hero. 2026-05-04.
 * =================================================================== */
.back-to-top {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 32px -14px rgba(11, 17, 27, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  margin: auto;
}

.back-to-top.is-visible {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateY(0) !important;
}

@media (max-width: 760px) {
  .back-to-top {
    display: grid;
    place-items: center;
  }
}

/* =====================================================
   Section 02 · Research-backed callout (under service grid)
   ===================================================== */
.execution-callout {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 36px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(96, 165, 250, 0.04));
}
.execution-callout-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.execution-callout-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.execution-callout h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.execution-callout p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
}
.execution-callout-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .execution-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px;
    gap: 20px;
  }
  .execution-callout-cta {
    width: 100%;
    text-align: center;
  }
}

/* =====================================================
   Section 03 · Mobile constel-center tweaks
   - Show Eastbound logo (3-bar mark + wordmark) at the centre
   - Wordmark slightly tighter so it fits the 96px circle on mobile
   ===================================================== */
@media (max-width: 720px) {
  .constel-center .constel-center-name {
    font-size: 14px;
    line-height: 1.15;
    margin-top: 4px;
  }
  .constel-center .constel-center-logo span {
    width: 22px;
    height: 3px;
  }
}

/* ===================================================================
 * Claude-design mobile finish-pass (2026-05-07)
 * Imports polish from /claude-design-mobile-dashboard.html into the
 * production dashboard at ≤760px. CSS-only — no markup or JS changes.
 * Reference design: /tmp/design-package extracted from
 * api.anthropic.com/v1/design/h/vmdTo65SCVDj6_Y9j4zpmA
 *
 * What this pass changes (mobile only):
 *  (1) Score ring status pill → soft translucent backgrounds
 *      (matches design's mild/strong/weak palette)
 *  (2) LLM logo chips in front of engine name in the surface matrix
 *      (DS / 豆 / Qw colored gradient pills, like .llm-logo in design)
 *  (3) Surface-cell badge tiles get accent-tinted borders + tighter type
 *  (4) Brand-explain bullets get indigo dot accent
 *  (5) Topic cards get prominent heat bar treatment
 *  (6) Re-shows unlock CTA card at the BOTTOM of the mobile flow,
 *      replacing what desktop has in the right-aside. The card uses
 *      the design's dark indigo radial gradient (.locked-card style).
 *  (7) Sticky CTA bar visual polish (taller buttons, soft shadow)
 * =================================================================== */
@media (max-width: 760px) {
  /* (1) Score ring — softer Mild/Strong/Weak status pill, match design */
  .score-ring small {
    background: rgba(232, 134, 21, 0.18);
    color: #c97309;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 3px 10px;
    min-height: 0;
    height: auto;
    line-height: 1.4;
    box-shadow: none;
  }
  .score-ring.score-green small {
    background: rgba(30, 155, 107, 0.16);
    color: #1e9b6b;
  }
  .score-ring.score-yellow small {
    background: rgba(232, 134, 21, 0.18);
    color: #c97309;
  }
  .score-ring.score-red small {
    background: rgba(210, 74, 74, 0.16);
    color: #c53b3b;
  }

  /* (2) LLM logo chip before engine name in the surface matrix.
     The matrix is rendered by script.js as <table class="surface-matrix">
     with three <tr> rows: DeepSeek, Doubao, Qwen — order is stable.
     We inject a small colored gradient chip via ::before. */
  .surface-matrix tbody td:first-child::before {
    content: attr(data-llm-mark);
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 9px;
    background: linear-gradient(135deg, #eef0fe, #e1ecfd);
    color: #3c40b8;
    font-family: var(--font-mono, "Roboto Mono", monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex: 0 0 32px;
  }
  /* Fallback marks per row position when data-llm-mark is absent —
     row 1 = DeepSeek, row 2 = Doubao, row 3 = Qwen. */
  .surface-matrix tbody tr:nth-child(1) td:first-child:not([data-llm-mark])::before {
    content: "DS";
    background: linear-gradient(135deg, #e8ebff, #cbd3ff);
    color: #3d3fa6;
  }
  .surface-matrix tbody tr:nth-child(2) td:first-child:not([data-llm-mark])::before {
    content: "豆";
    background: linear-gradient(135deg, #fff1e6, #fbd8b6);
    color: #995213;
  }
  .surface-matrix tbody tr:nth-child(3) td:first-child:not([data-llm-mark])::before {
    content: "Qw";
    background: linear-gradient(135deg, #e5f6f2, #bfe7dc);
    color: #0e6e5a;
  }
  /* The engine-name row needs to wrap children alongside the chip. */
  .surface-matrix tbody td:first-child {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .surface-matrix tbody td:first-child strong {
    font-size: 15px;
    margin-right: auto;
  }
  .surface-matrix tbody td:first-child small {
    flex-basis: 100%;
    margin-left: 42px;
    margin-top: -2px;
  }

  /* (3) Surface cell tiles — tighter mono kicker, accent-tinted edges
     when the cell is positive (yes), red when negative. We can't easily
     target by content, but the .surface-icon child carries icon-yes /
     icon-no / icon-na classes (lines 7848+). */
  .surface-matrix tbody td:nth-child(2):has(.surface-icon.icon-yes),
  .surface-matrix tbody td:nth-child(3):has(.surface-icon.icon-yes) {
    background: rgba(27, 142, 85, 0.06);
  }
  .surface-matrix tbody td:nth-child(2):has(.surface-icon.icon-no),
  .surface-matrix tbody td:nth-child(3):has(.surface-icon.icon-no) {
    background: rgba(200, 85, 61, 0.05);
  }

  /* (4) Brand-explain EN bullets — indigo dot prefix (already styled in
     7864-7889 with line dashes; switch to dots to match design). */
  .brand-explain-cell ul.brand-explain-en li::before,
  .brand-explain-cell ul.brand-explain-product-en li::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    top: 8px;
  }

  /* (5) Topic card heat bar — slightly thicker, colored fill matches
     intensity. Existing .topic-card-heat-bar at line 5805+. */
  .topic-card-heat-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--line-2, #f2f3f6);
    overflow: hidden;
  }

  /* (6) Mobile-only "locked unlock" card at the bottom of the flow.
     Desktop hides this via cascade above (results-aside is hidden on
     ≤760px line 7757-7762). We re-show ONLY the .next-step-card from
     the aside, push it to the end of the mobile flow via order, and
     style it with the design's dark indigo radial gradient. The
     fixes-card stays hidden because the sticky CTA + Section A bullets
     already cover that ground on mobile. */
  .results-layout {
    display: flex;
    flex-direction: column;
  }
  .results-main {
    order: 1;
  }
  .results-aside {
    display: contents;
  }
  .results-aside > * {
    display: none;
  }
  .results-aside > .next-step-card {
    display: block;
    order: 2;
    margin: 14px 0 0;
    padding: 26px 20px;
    border-radius: 14px;
    background: radial-gradient(
      120% 120% at 0% 0%,
      #2b2f8a 0%,
      #14164b 60%,
      #0b0d2e 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .results-aside > .next-step-card .section-kicker {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    letter-spacing: 0.16em;
  }
  .results-aside > .next-step-card h2 {
    margin: 10px 0 12px;
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: #fff;
  }
  .results-aside > .next-step-card p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
  }
  .results-aside > .next-step-card .button.light {
    background: #fff;
    color: var(--ink, #0f1419);
    border-color: #fff;
  }
  .results-aside > .next-step-card .button.outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  /* (7) Sticky CTA refined: slightly taller buttons + softer top shadow
     (matches design's blurred translucent bar) */
  .mobile-sticky-cta {
    box-shadow: 0 -8px 24px rgba(15, 20, 25, 0.06);
  }
  .mobile-sticky-cta .button {
    min-height: 46px;
    border-radius: 10px;
    font-weight: 600;
  }

  /* Tighten card body padding to match the design's denser mobile rhythm */
  .score-panel,
  .website-audit-panel,
  .platform-panel,
  .topics-panel,
  .audience-pulse-panel,
  .pressure-panel {
    padding: 22px 18px;
  }

  /* ===== State 01 · Input — mobile polish (2026-05-07) =====
   * Match Claude design: tighter H1, compact promise cards, clean form
   * card with mono kicker labels and full-width dark CTA. */
  .dashboard-state[data-state-panel="input"] .input-copy h1 {
    font-size: clamp(34px, 8vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: pretty;
  }
  .dashboard-state[data-state-panel="input"] .input-copy .promise-grid {
    margin-top: 18px;
    border-radius: 14px;
  }
  .dashboard-state[data-state-panel="input"] .promise-grid article {
    padding: 16px 18px;
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }
  .dashboard-state[data-state-panel="input"] .promise-grid p {
    font-size: 13.5px;
    line-height: 1.5;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card.dashboard-form {
    padding: 22px 18px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 20, 25, 0.04);
    gap: 0;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card h2 {
    font-size: 22px;
    margin: 0 0 6px;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card > p {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--body);
  }
  .dashboard-state[data-state-panel="input"] .input-form-card label {
    margin: 16px 0 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card input {
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card .consent-check {
    margin-top: 16px;
    font-size: 12.5px;
  }
  .dashboard-state[data-state-panel="input"] .audit-cta-button.full,
  .dashboard-state[data-state-panel="input"] .input-form-card .button {
    width: 100%;
    margin-top: 16px;
    height: 46px;
    border-radius: 10px;
    font-weight: 600;
  }
  .dashboard-state[data-state-panel="input"] .input-form-card .form-note {
    margin-top: 12px;
    font-size: 10.5px;
    letter-spacing: 0.10em;
  }
  /* Add a result-head-style eyebrow to the Input page so it visually
     parallels the Results state header (matches Claude design's
     "Website check" chip + serif headline). The promise-grid acts
     as the body — keep it but tighten. */

  /* ===== State 02 · Processing — mobile polish (2026-05-07) =====
   * Match Claude design: compact loading title (no oversized orb hogging
   * space), pipeline card with tighter padding, smaller stage rows. */
  .dashboard-state[data-state-panel="processing"] .loading-title {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    margin: 12px 0 14px;
  }
  .dashboard-state[data-state-panel="processing"] .loading-orb {
    width: 36px;
    height: 36px;
    border-width: 2px;
  }
  .dashboard-state[data-state-panel="processing"] .loading-orb::after {
    inset: 8px;
  }
  .dashboard-state[data-state-panel="processing"] .loading-phrases b {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.005em;
  }
  .dashboard-state[data-state-panel="processing"] .lede {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--body);
  }
  .dashboard-state[data-state-panel="processing"] .processing-board {
    margin-top: 18px;
    gap: 14px;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 20, 25, 0.04);
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-head {
    padding: 18px 18px 14px;
    gap: 12px;
    align-items: flex-start;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-head h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.12;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-head p {
    font-size: 10px;
    letter-spacing: 0.10em;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-head .pipeline-percent {
    font-size: 14px;
    gap: 6px;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-list li {
    grid-template-columns: 26px 1fr 28px;
    gap: 12px;
    padding: 14px 18px;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-list h3 {
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 2px;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-list p {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-list > li > span {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .dashboard-state[data-state-panel="processing"] .pipeline-status {
    width: 26px;
    height: 26px;
  }
  /* Make processing state also surface the sticky bottom CTA so the
     CTA contract is consistent across all three states. */
  .dashboard-state[data-state-panel="processing"] .mobile-sticky-cta,
  .dashboard-state[data-state-panel="input"] .mobile-sticky-cta {
    display: flex;
  }
}

/* ==========================================================================
 * v2 RESTRUCTURE — 2026-05-07
 * Per /docs/claude-homepage-restructure-v2-2026-05-07.md
 *   §2 — "How we do it" 3-step strip (Audit / Fix / Track)
 *   §3 — "Categories we research" chip strip
 *   §4 — Hero report-preview mobile trim (hide dense blocks ≤760px)
 *   §6 — Why-layout: pillars full-width below founder quote on desktop
 * Conventions: live token names (--accent / --ink / --line / --muted / --paper),
 * 760 px breakpoint, .section-heading.split for the right-rail lede.
 * ========================================================================== */

/* §2 · How we do it */
.how-we-do {
  background: var(--paper);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.how-grid::before {
  content: "";
  position: absolute;
  top: 132px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  z-index: 0;
}
.how-card {
  position: relative;
  z-index: 1;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
}
.how-num {
  margin-bottom: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.how-label {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.how-copy {
  margin: 0 0 18px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.55;
  /* Reserve consistent vertical space across all three cards so the
   * mini-dashboards below start at the same horizontal line on desktop.
   * 4 lines accommodates the longest body copy (Fix). */
  min-height: calc(14px * 1.55 * 4);
}
.how-dash {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  display: grid;
  gap: 10px;
}
@media (max-width: 760px) {
  .how-copy { min-height: 0; }
}
.how-dash--audit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.how-dash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 16px;
}
.how-dash-lab {
  width: 64px;
  flex-shrink: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.how-dash-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  width: var(--w, 50%);
  background: var(--brand-gradient);
  transform-origin: left;
  animation: how-grow 3s ease-out infinite;
}
.how-dash-row:nth-child(1) .how-dash-bar { animation-delay: 0s; }
.how-dash-row:nth-child(2) .how-dash-bar { animation-delay: 0.4s; }
.how-dash-row:nth-child(3) .how-dash-bar { animation-delay: 0.8s; }
@keyframes how-grow {
  0% { transform: scaleX(0); opacity: 0.4; }
  40%, 100% { transform: scaleX(1); opacity: 1; }
}
.how-dash--fix svg,
.how-dash--track svg {
  display: block;
  width: 100%;
  height: 100%;
}
.how-node-pulse { animation: how-nodepulse 2.4s ease-in-out infinite; }
.how-node-pulse:nth-of-type(2) { animation-delay: 0.6s; }
.how-node-pulse:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes how-nodepulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.how-track-line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: how-draw 3s ease-out infinite;
}
@keyframes how-draw { 0% { stroke-dashoffset: 240; } 60%, 100% { stroke-dashoffset: 0; } }
.how-track-dot { animation: how-dotpop 3s ease-out infinite; }
.how-track-dot:nth-of-type(2) { animation-delay: 0.5s; }
.how-track-dot:nth-of-type(3) { animation-delay: 1s; }
.how-track-dot:nth-of-type(4) { animation-delay: 1.5s; }
.how-track-dot:nth-of-type(5) { animation-delay: 2s; }
@keyframes how-dotpop {
  0%, 30% { r: 0; opacity: 0; }
  50% { r: 5; opacity: 1; }
  100% { r: 4; opacity: 1; }
}

/* §3 · Categories we research */
.categories-strip {
  background: var(--surface-soft);
}
.cat-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.cat-chip {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease;
  cursor: default;
}
.cat-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cat-foot {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.cat-foot a {
  color: var(--accent);
  font-weight: 500;
}
.cat-foot a:hover { text-decoration: underline; }

/* §6 · Why-layout — pillars full-width row beneath founder quote on desktop */
.why-layout {
  grid-template-columns: 1fr;
  gap: 56px;
}
.why-layout .pillars {
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.why-layout .pillars article {
  padding: 22px 22px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
/* Reposition pillar-icon as static top-left badge inside each card
   (was absolute-positioned for the old left-rail layout). */
.why-layout .pillars article .pillar-icon {
  position: static;
  margin-bottom: 14px;
  width: 36px;
  height: 36px;
}
.why-layout .pillars article:first-child {
  border-top: 1px solid var(--line);
}

/* Mobile (≤760px) — three trims and stacking */
@media (max-width: 760px) {
  /* §4 · Hide dense report-aside blocks on mobile; keep head + score */
  .report-preview .report-block { display: none; }

  /* §2 · 3-step strip stacks vertically; remove desktop connector line */
  .how-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-grid::before { display: none; }

  /* §3 · Chips become 2-column grid (per v2 mobile checklist) */
  .cat-chip-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .cat-chip { text-align: center; padding: 12px 14px; }

  /* §6 · Pillars stack one per row on mobile */
  .why-layout .pillars { grid-template-columns: 1fr; gap: 0; }
  .why-layout .pillars article { border-radius: 0; padding: 22px 0 22px 56px; }
}

/* Tablet — pillars 3-up so we don't get a single-row squish */
@media (min-width: 761px) and (max-width: 980px) {
  .why-layout .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
 * v2 PICKS — 2026-05-08 — A2 / F2 / T3 / C1 chosen
 * Methodology-card-style mini-dashboards inside the "How we do it" cards.
 * Categories: 4-up icon cards (C1) replacing flat chip strip.
 * ========================================================================== */

/* Shared dashboard head (matches .method-dash-head styling pattern) */
.how-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.how-dash-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.how-dash-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.how-dash-pill.ok {
  background: rgba(27, 142, 85, 0.12);
  color: var(--positive);
}
.how-dash-pill.warn {
  background: rgba(165, 106, 0, 0.12);
  color: var(--warning);
}

/* A2 · Audit — per-LLM bar list (mirrors methodology card 03 styling +
 * looping bar grow + shimmer, so the visual reads as the same family). */
.how-llms {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.how-llms li {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11.5px;
}
.how-llms strong {
  font-weight: 600;
  color: var(--ink-2);
}
.how-llms .bar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: #e7e8ec;
  overflow: hidden;
}
.how-llms .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-gradient);
  transform-origin: left center;
  animation: how-bar-roll 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.how-llms li:nth-child(1) .bar i { animation-delay: 0s; }
.how-llms li:nth-child(2) .bar i { animation-delay: 0.3s; }
.how-llms li:nth-child(3) .bar i { animation-delay: 0.6s; }
@keyframes how-bar-roll {
  0%        { transform: scaleX(0); }
  35%, 75%  { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}
.how-llms .bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: how-bar-shimmer 4s linear infinite;
  pointer-events: none;
}
.how-llms li:nth-child(2) .bar::after { animation-delay: 0.5s; }
.how-llms li:nth-child(3) .bar::after { animation-delay: 1.0s; }
@keyframes how-bar-shimmer {
  0%   { left: -40%; }
  100% { left: 140%; }
}
.how-llms em {
  font-style: normal;
  text-align: right;
  font-size: 10.5px;
  color: var(--ink-2);
  font-family: var(--font-mono);
}

/* Fix · scrolling checklist — sweeps top-to-bottom, each item gets
 * highlighted then "checks off". Loops infinitely. 6 items.
 * Pattern matches methodology card 01 (methodRowSweep) extended to 6 rows. */
.how-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: 11.5px;
  line-height: 1.4;
}
.how-checklist li {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: 4px;
  color: var(--ink-2);
  animation: how-fix-sweep 6s ease-in-out infinite;
}
.how-checklist li:nth-child(1) { animation-delay: 0s; }
.how-checklist li:nth-child(2) { animation-delay: 1.5s; }
.how-checklist li:nth-child(3) { animation-delay: 3s; }
.how-checklist li:nth-child(4) { animation-delay: 4.5s; }
@keyframes how-fix-sweep {
  0%, 14%, 100% {
    background: transparent;
    color: var(--muted);
  }
  4%, 10% {
    background: rgba(99, 102, 241, 0.10);
    color: var(--ink);
  }
  16%, 100% {
    color: var(--ink-2);
  }
}
.how-checklist .hfc-check {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.4px solid var(--line);
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
.how-checklist .hfc-check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.6);
  animation: how-fix-check-fill 6s ease-in-out infinite;
}
.how-checklist li:nth-child(1) .hfc-check::after { animation-delay: 0s; }
.how-checklist li:nth-child(2) .hfc-check::after { animation-delay: 1.5s; }
.how-checklist li:nth-child(3) .hfc-check::after { animation-delay: 3s; }
.how-checklist li:nth-child(4) .hfc-check::after { animation-delay: 4.5s; }
.how-checklist .hfc-check::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5.5px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  z-index: 1;
  animation: how-fix-check-mark 6s ease-in-out infinite;
}
.how-checklist li:nth-child(1) .hfc-check::before { animation-delay: 0s; }
.how-checklist li:nth-child(2) .hfc-check::before { animation-delay: 1.5s; }
.how-checklist li:nth-child(3) .hfc-check::before { animation-delay: 3s; }
.how-checklist li:nth-child(4) .hfc-check::before { animation-delay: 4.5s; }
@keyframes how-fix-check-fill {
  0%, 8%, 100% { opacity: 0; transform: scale(0.6); }
  12%, 100%    { opacity: 1; transform: scale(1); }
}
@keyframes how-fix-check-mark {
  0%, 9%, 100% { opacity: 0; }
  13%, 100%    { opacity: 1; }
}

/* T3 · Track — gauge + sparkline */
.how-gauge {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  align-items: center;
}
.how-gauge-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.how-gauge-num small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.how-gauge-delta {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--positive);
  font-family: var(--font-mono);
  font-weight: 600;
}
.how-spark {
  width: 100%;
  height: 50px;
  display: block;
}
.how-spark polyline {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: how-spark-draw 5s ease-in-out infinite;
}
.how-spark circle {
  opacity: 0;
  animation: how-spark-dot 5s ease-in-out infinite;
}
@keyframes how-spark-draw {
  0%        { stroke-dashoffset: 240; }
  45%, 80%  { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 240; }
}
@keyframes how-spark-dot {
  0%, 40%   { opacity: 0; }
  50%, 80%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* C1 · Categories — 4-up icon cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.cat-item {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.cat-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(99, 102, 241, 0.4);
}
.cat-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.cat-ico svg {
  width: 22px;
  height: 22px;
}
.cat-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cat-item p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-item { padding: 16px; }
}

/* 2026-05-09 — Align inner pages to homepage's 1180px container width.
   Homepage already has body.homepage > .page-shell { max-width: 1180px }.
   Blog articles (no body class) use .page-shell, so cap their wrappers too.
   Pillar / research-index pages have no .page-shell — cap their direct
   children (header + main) so the sticky header matches the homepage. */
body:not(.homepage):not(.dashboard-page) > .page-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.article-page > .site-header,
.article-page > main,
.research-page > .site-header,
.research-page > main {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.article-page > .site-header,
.research-page > .site-header {
  gap: clamp(16px, 2.4vw, 24px);
  padding-right: clamp(28px, 4vw, 48px);
  padding-left: clamp(28px, 4vw, 48px);
}