@font-face { font-family: Poppins; src: url("./assets/fonts/poppins-regular-full.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("./assets/fonts/poppins-medium-full.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url("./assets/fonts/poppins-semibold-full.ttf") format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  --ink: #172536;
  --navy: #122332;
  --navy-2: #1b3144;
  --blue: #247b82;
  --blue-soft: #dff2ed;
  --green: #01ad66;
  --red: var(--green);
  --red-soft: #e8f5eb;
  --amber: #b98c4a;
  --lime: #c2ff08;
  --mint: #66d09d;
  --paper: #f3f5f3;
  --white: #ffffff;
  --line: #d9dfdd;
  --muted: #6b7886;
  --soft: #e8eeec;
  --shadow: 0 20px 60px rgba(16, 42, 70, 0.1);
  --radius: 1.25rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Poppins, Arial, sans-serif;
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button,
input,
a {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  background: transparent;
}

.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.25rem;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(16, 42, 70, 0.1);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  text-decoration: none;
}

.brand img { display: block; width: 11.5rem; height: auto; }

.nav {
  display: flex;
  gap: 1.75rem;
}

.nav a {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease;
}

.nav a:hover,
.nav a:focus-visible { color: var(--red); }

.period {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.period span { color: var(--muted); }

.section-shell {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

section {
  position: relative;
  padding: 7.5rem 0;
}

.overview {
  min-height: calc(100vh - 5.25rem);
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.eyebrow,
.confidential,
.card-kicker,
.commentary-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.eyebrow > span {
  width: 1.8rem;
  height: 2px;
  background: var(--red);
}

.eyebrow.light { color: rgba(255, 255, 255, 0.66); }
.eyebrow.light > span { background: var(--lime); }

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 2rem;
}

.overview-copy { max-width: 58rem; }

.overview h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3.6rem, 7.6vw, 7.7rem);
  line-height: 0.89;
  letter-spacing: -0.065em;
  font-weight: 500;
}

.lead {
  max-width: 38rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.55;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3rem, 7vh, 5rem);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 15px 45px rgba(16, 42, 70, 0.07);
}

.kpi {
  min-width: 0;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
}

.kpi:last-child { border-right: 0; }
.kpi p, .kpi span { display: block; margin: 0; }
.kpi p { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.kpi strong { display: block; margin: 0.65rem 0 0.45rem; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.18; letter-spacing: -0.04em; white-space: nowrap; }
.kpi strong small { color: var(--muted); font-size: 0.58em; font-weight: 600; letter-spacing: 0; }
.kpi strong em { padding-inline: 0.18rem; color: var(--green); font-style: normal; }
.kpi span { color: var(--muted); font-size: 0.8rem; }
.kpi-alert strong { color: var(--red); }
.kpi-dark { background: var(--navy); color: var(--white); }
.kpi-dark p, .kpi-dark span { color: rgba(255, 255, 255, 0.62); }
.kpi-dark strong small { color: rgba(255, 255, 255, 0.58); }

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-cue span {
  position: relative;
  display: block;
  width: 1.6rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
}

.scroll-cue span::after {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 0.2rem;
  height: 0.5rem;
  border-radius: 1rem;
  background: var(--red);
  content: "";
  transform: translateX(-50%);
  animation: scrollDot 1.8s ease-in-out infinite;
}

.story,
.losses,
.plan { background: var(--white); }

.acquisition-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 14px 40px rgba(16, 42, 70, 0.05);
}

.acquisition-kpi {
  min-width: 0;
  padding: 1.45rem;
  border-right: 1px solid var(--line);
}

.acquisition-kpi:last-child { border-right: 0; }
.acquisition-kpi p, .acquisition-kpi span { display: block; margin: 0; }
.acquisition-kpi p { color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.acquisition-kpi strong { display: block; margin: 0.65rem 0 0.4rem; font-size: clamp(1.05rem, 1.55vw, 1.4rem); line-height: 1.2; letter-spacing: -0.035em; white-space: nowrap; }
.acquisition-kpi strong em { padding-inline: 0.15rem; color: var(--green); font-style: normal; }
.acquisition-kpi span { color: var(--muted); font-size: 0.76rem; }
.acquisition-kpi.is-dark { background: var(--navy); color: var(--white); }
.acquisition-kpi.is-dark p, .acquisition-kpi.is-dark span { color: rgba(255, 255, 255, 0.6); }

.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.channel-card,
.reconciliation-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 14px 40px rgba(16, 42, 70, 0.05);
}

.channel-card { padding: 1.75rem; }
.channel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.channel-name { display: inline-block; padding: 0.32rem 0.55rem; border-radius: 99rem; background: #e8f2ff; color: #1666bc; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.channel-name.google { background: #fff1d6; color: #9a6400; }
.channel-heading h3 { margin: 0.8rem 0 0; font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.035em; }
.trend-badge.positive { background: var(--blue-soft); color: var(--green); }
.channel-heading .trend-badge.negative { background: #fff1d6; color: #9a6400; }

.channel-bars { display: grid; gap: 0.8rem; margin: 2rem 0 1.5rem; }
.channel-bar { display: grid; grid-template-columns: 2rem 1fr 4.4rem; align-items: center; gap: 0.75rem; font-size: 0.78rem; }
.channel-bar > div { height: 0.75rem; overflow: hidden; border-radius: 2rem; background: var(--soft); }
.channel-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: #aab4c0; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.channel-bar.q3 i { background: var(--green); }
.channel-bar strong { text-align: right; }
[data-animate-chart].is-visible .channel-bar i { width: var(--bar); }

.channel-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.channel-stats > div { padding: 1rem 0; }
.channel-stats > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.channel-stats dt { color: var(--muted); font-size: 0.72rem; }
.channel-stats dd { margin: 0.25rem 0 0; font-size: 0.95rem; font-weight: 800; }
.channel-card > p { margin: 1.25rem 0 0; color: var(--muted); }

.reconciliation-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  margin-top: 1.25rem;
  padding: 2rem;
}

.reconciliation-copy h3 { margin: 0.7rem 0 1rem; font-size: 2rem; line-height: 1.08; letter-spacing: -0.04em; }
.reconciliation-copy > p:not(.card-kicker) { margin: 0; color: var(--muted); }
.tracking-note { margin-top: 1.25rem; padding: 1rem; border-left: 3px solid var(--blue); background: var(--paper); color: var(--muted); font-size: 0.82rem; }
.tracking-note strong { color: var(--ink); }
.reconciliation-chart { display: grid; gap: 1.2rem; }
.reconcile-quarter { padding: 1rem 1.1rem; background: var(--paper); }
.reconcile-quarter > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.reconcile-quarter > div:first-child span { font-weight: 850; }
.reconcile-quarter > div:first-child strong { color: var(--green); font-size: 0.78rem; }
.reconcile-row { display: grid; grid-template-columns: 5rem 1fr 3.6rem; align-items: center; gap: 0.7rem; margin-top: 0.5rem; font-size: 0.74rem; }
.reconcile-row > div { height: 0.55rem; overflow: hidden; border-radius: 1rem; background: #dfe5e3; }
.reconcile-row i { display: block; width: 0; height: 100%; border-radius: inherit; background: #9aa6b2; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.reconcile-row.crm i { background: var(--green); }
.reconcile-row b { text-align: right; }
[data-animate-chart].is-visible .reconcile-row i { width: var(--bar); }
.reconciliation-chart > p { margin: 0; color: var(--muted); font-size: 0.74rem; }

.section-heading {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 3.5rem;
}

.section-heading > div,
.funnel-layout > *,
.loss-layout > *,
.economics-layout > *,
.channel-grid > *,
.reconciliation-card > * { min-width: 0; }

.section-number {
  margin: 0;
  padding-top: 0.2rem;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 850;
}

.section-heading h2 {
  max-width: 21ch;
  margin: 0.65rem 0 0;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.052em;
  font-weight: 500;
}

.funnel-layout,
.loss-layout,
.economics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.55fr);
  gap: 1.5rem;
}

.funnel-card,
.commentary-card,
.comparison-card,
.donut-card,
.reasons-card,
.cost-card,
.invalid-card,
.progression-card,
.calculator {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 14px 40px rgba(16, 42, 70, 0.05);
}

.funnel-card { padding: 1.5rem; background: var(--paper); }

.funnel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.funnel-toolbar > p { margin: 0; font-weight: 800; }

.quarter-key {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.quarter-key span,
.quarter-key strong {
  padding: 0.35rem 0.55rem;
  border-radius: 99rem;
}

.quarter-key span { background: var(--soft); }
.quarter-key strong { background: var(--green); color: var(--white); }

.segmented {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
}

.segmented button,
.plan-tabs button {
  border: 0;
  cursor: pointer;
}

.segmented button {
  padding: 0.55rem 0.85rem;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.segmented button.is-active {
  background: var(--navy);
  color: var(--white);
}

.funnel {
  display: grid;
  gap: 0.65rem;
}

.funnel-step {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) minmax(11rem, 1fr) minmax(7rem, 0.72fr);
  gap: 0.8rem;
  align-items: center;
  width: var(--width);
  min-width: min(100%, 24rem);
  padding: 1.2rem 1.35rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-1.5rem);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms ease, opacity 600ms ease, filter 180ms ease;
  text-align: left;
}

[data-animate-chart].is-visible .funnel-step {
  opacity: 1;
  transform: none;
}

.funnel-step:nth-child(2) { transition-delay: 90ms; }
.funnel-step:nth-child(3) { transition-delay: 180ms; }
.funnel-step:nth-child(4) { transition-delay: 270ms; }
.funnel-step:hover, .funnel-step:focus-visible { filter: brightness(1.1); outline: 3px solid rgba(1, 173, 102, 0.24); }
.funnel-step.is-selected { box-shadow: 0 0 0 3px var(--red); }
.step-leads { --width: 100%; }
.step-contacted { --width: 86%; background: var(--blue); }
.step-qualified { --width: 72%; background: var(--red); }
.step-won { --width: 64%; background: #202833; }
.funnel-step strong { font-size: 1rem; text-align: right; }
.funnel-step small { color: rgba(255, 255, 255, 0.72); font-size: 0.76rem; }
.step-label { font-weight: 750; }
.step-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.step-pair small { padding: 0.45rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 0.45rem; }
.step-pair b { display: block; color: var(--white); font-size: 1.05rem; }

.commentary-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.6rem;
  background: var(--navy);
  color: var(--white);
}

.commentary-kicker { color: rgba(255, 255, 255, 0.55); }
.commentary-card h3 { margin: 1.6rem 0 1rem; font-size: clamp(1.58rem, 2vw, 1.78rem); line-height: 1.12; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.commentary-card > p:not(.commentary-kicker, .microcopy) { color: rgba(255, 255, 255, 0.72); }
.commentary-metric { margin-top: auto; padding-top: 2.5rem; }
.commentary-metric span { display: block; color: var(--lime); font-size: clamp(3.15rem, 5vw, 4rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.06em; overflow-wrap: anywhere; }
.commentary-metric p { margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.62); }
.microcopy { margin: 2rem 0 0; color: rgba(255, 255, 255, 0.42); font-size: 0.76rem; }

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.comparison-card { padding: 1.65rem; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-heading h3, .donut-copy h3, .calculator h3 { margin: 0.55rem 0 0; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.035em; }
.trend-badge { flex: none; padding: 0.45rem 0.6rem; border-radius: 99rem; font-size: 0.72rem; font-weight: 850; }
.trend-badge.negative { background: var(--red-soft); color: var(--red); }
.trend-badge.neutral { background: var(--soft); color: var(--muted); }

.compare-bars { display: grid; gap: 1rem; margin: 2.25rem 0 1.75rem; }
.compare-row { display: grid; grid-template-columns: 2rem 1fr 4rem; align-items: center; gap: 0.7rem; font-size: 0.8rem; }
.compare-row > div { height: 0.65rem; overflow: hidden; border-radius: 2rem; background: var(--soft); }
.compare-row i, .reason-track i, .cost-row i { display: block; width: 0; height: 100%; border-radius: inherit; background: #aab4c0; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
[data-animate-chart].is-visible .compare-row i,
[data-animate-chart].is-visible .reason-track i,
[data-animate-chart].is-visible .cost-row i { width: var(--bar); }
.compare-row.is-current i { background: var(--red); }
.compare-row.is-current.blue i { background: var(--blue); }
.compare-row strong { text-align: right; }
.card-comment { margin: 0; color: var(--muted); }

.quality-conclusion,
.economics-conclusion {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--red);
  background: var(--white);
}

.quality-conclusion span { color: var(--red); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.quality-conclusion p, .economics-conclusion p { margin: 0; font-size: 1.2rem; font-weight: 700; }

.loss-layout { grid-template-columns: 1.1fr 0.9fr; }
.invalid-card { padding: 2rem; }
.loss-compare .compare-row { grid-template-columns: 2rem 1fr 5.2rem; }
.donut-card { display: grid; grid-template-columns: 15rem 1fr; align-items: center; gap: 2rem; padding: 2rem; }
.donut { position: relative; width: 14rem; aspect-ratio: 1; }
.donut svg { width: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 22; }
.donut-track { stroke: var(--soft); }
.donut-value { stroke: var(--red); stroke-dasharray: 414.7; stroke-dashoffset: 414.7; stroke-linecap: butt; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
[data-animate-chart].is-visible .donut-value { stroke-dashoffset: 116.1; }
.donut > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut strong { color: var(--red); font-size: 2.7rem; line-height: 1; letter-spacing: -0.05em; }
.donut span { margin-top: 0.35rem; color: var(--muted); font-size: 0.82rem; font-weight: 750; }
.donut-copy p:last-child { margin-bottom: 0; color: var(--muted); }

.reasons-card { padding: 2rem; }
.reasons-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reason-row { margin-top: 1.8rem; }
.reason-row > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.reason-row span { font-weight: 700; }
.reason-track { height: 0.9rem; overflow: hidden; border-radius: 1rem; background: var(--soft); }
.reason-track i { background: var(--amber); }
.reason-row:nth-of-type(3) .reason-track i { background: var(--red); }
.reason-track.blue i { background: var(--blue); }
.method-note { margin: 2rem 0 0; color: var(--muted); font-size: 0.78rem; }

.reason-compare-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) minmax(8rem, 1.35fr) 5.3rem;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.35rem;
}

.reason-compare-row > span { font-size: 0.82rem; font-weight: 700; }
.reason-compare-row > strong { font-size: 0.82rem; text-align: right; white-space: nowrap; }
.dual-track { display: grid; gap: 0.28rem; }
.dual-track i { display: block; width: 0; height: 0.36rem; border-radius: 1rem; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.dual-track .q2 { background: #aab4c0; }
.dual-track .q3 { background: var(--green); }
[data-animate-chart].is-visible .dual-track i { width: var(--bar); }

.economics-layout { grid-template-columns: 1.15fr 0.85fr; }
.cost-card, .progression-card, .calculator { padding: 2rem; }
.cost-row { display: grid; grid-template-columns: 8rem 1fr 6.5rem; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.cost-row span { font-weight: 750; }
.cost-row > div { height: 1.25rem; overflow: hidden; border-radius: 0.4rem; background: var(--soft); }
.cost-row i { background: var(--navy); }
.cost-row strong { text-align: right; }
.cost-row.is-critical i { background: var(--red); }
.cost-row.is-critical strong { color: var(--red); }

.deal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid #aab4c0;
  background: var(--paper);
}

.deal-row div > span { display: block; font-weight: 750; }
.deal-row div > small { display: block; margin-top: 0.15rem; color: var(--muted); }
.deal-row > strong { font-size: 1.35rem; white-space: nowrap; }
.deal-row.positive { border-left-color: var(--green); }
.deal-row.positive > strong { color: var(--green); }
.deal-row.critical { border-left-color: var(--navy); }

.calculator { background: var(--navy); color: var(--white); }
.calculator .card-kicker { color: rgba(255, 255, 255, 0.55); }
.calculator h3 { font-size: 2.25rem; }
.calculator label { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; color: rgba(255, 255, 255, 0.7); }
.calculator label strong { color: var(--white); }
.calculator input { width: 100%; margin: 1.2rem 0 2rem; accent-color: var(--lime); cursor: pointer; }
.calculator-output { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.calculator-output > div { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); }
.calculator-output span { display: block; color: rgba(255, 255, 255, 0.58); font-size: 0.76rem; }
.calculator-output strong { display: block; margin-top: 0.25rem; color: var(--lime); font-size: 2rem; }
.calculator-note { margin: 1.3rem 0 0; color: rgba(255, 255, 255, 0.48); font-size: 0.78rem; }
.economics-conclusion { grid-template-columns: 1fr; border-left-color: var(--navy); }

.plan-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}

.plan-tabs button {
  padding: 1.25rem 1rem;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  text-align: left;
}

.plan-tabs button:hover,
.plan-tabs button:focus-visible,
.plan-tabs button[aria-selected="true"] { border-bottom-color: var(--red); color: var(--ink); outline: none; }

.plan-panel {
  display: grid;
  grid-template-columns: 0.35fr 1.2fr 0.65fr;
  gap: 2rem;
  align-items: center;
  min-height: 15rem;
  padding: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.plan-index { margin: 0; color: var(--red); font-size: 4rem; font-weight: 850; line-height: 1; letter-spacing: -0.06em; }
.plan-window { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
.plan-panel h3 { margin: 0; font-size: 2.5rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; }
.plan-panel > div:nth-child(2) p { margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }
.plan-proof { padding: 1.25rem; border-left: 3px solid var(--blue); background: var(--paper); }
.plan-proof span { display: block; margin-bottom: 0.55rem; color: var(--muted); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.plan-proof small { display: block; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); color: var(--green); font-weight: 700; }

.final-word {
  padding: 7rem 0;
  background: var(--navy);
  color: var(--white);
}

.final-word h2 { max-width: 22ch; margin: 1.4rem 0; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -0.055em; }
.final-word p:not(.eyebrow) { max-width: 46rem; color: rgba(255, 255, 255, 0.66); font-size: 1.15rem; }
.final-word a { display: inline-block; margin-top: 1rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--lime); color: var(--lime); font-weight: 600; text-decoration: none; }

footer { padding: 2rem 0; border-top: 1px solid var(--line); background: var(--white); color: var(--muted); }
footer .section-shell { display: grid; grid-template-columns: 11rem auto 1fr; align-items: center; gap: 2rem; }
footer img { display: block; width: 10rem; height: auto; }
footer p { margin: 0; font-size: 0.74rem; }
footer p:last-child { text-align: right; }

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

@keyframes scrollDot {
  0%, 100% { opacity: 0.35; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 0.65rem); }
}

@media (max-width: 1100px) {
  .funnel-layout,
  .loss-layout,
  .economics-layout { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .period { grid-column: 2; }
  .overview-grid, .funnel-layout, .economics-layout { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .quality-grid { grid-template-columns: 1fr; }
  .loss-layout { grid-template-columns: 1fr; }
  .funnel-step { width: 100%; }
  .acquisition-kpis { grid-template-columns: repeat(2, 1fr); }
  .acquisition-kpi:nth-child(2) { border-right: 0; }
  .acquisition-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .reconciliation-card { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 4.5rem; }
  .topbar { min-height: 4.5rem; padding-inline: 1rem; }
  .period { display: block; text-align: right; }
  .period span, .period strong { display: block; font-size: 0.7rem; }
  .section-shell { width: min(100% - 2rem, 1180px); }
  section { padding: 5rem 0; }
  .overview { min-height: auto; padding-top: 2.75rem; }
  .overview h1 { font-size: clamp(3.25rem, 17vw, 5rem); }
  .overview-grid { gap: 2.5rem; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi, .kpi:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:last-child { border-bottom: 0; }
  .acquisition-kpis, .channel-grid { grid-template-columns: 1fr; }
  .acquisition-kpi, .acquisition-kpi:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .acquisition-kpi:last-child { border-bottom: 0; }
  .channel-stats { grid-template-columns: 1fr; }
  .channel-stats > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .reconciliation-card { gap: 1.5rem; padding: 1.35rem; }
  .section-heading { grid-template-columns: 2.2rem 1fr; gap: 0.5rem; margin-bottom: 2.5rem; }
  .section-heading h2 { font-size: 2.25rem; }
  .funnel-card { padding: 1rem; }
  .funnel-step { grid-template-columns: 1fr; width: 100%; min-width: 0; }
  .funnel-step strong { text-align: left; }
  .donut-card { grid-template-columns: 1fr; }
  .donut { margin-inline: auto; }
  .quality-conclusion, .economics-conclusion { grid-template-columns: 1fr; gap: 0.75rem; }
  .cost-row { grid-template-columns: 6.4rem 1fr; }
  .cost-row strong { grid-column: 2; }
  .calculator-output { grid-template-columns: 1fr; }
  .plan-tabs { grid-template-columns: repeat(2, 1fr); }
  .plan-panel { grid-template-columns: 1fr; padding: 2rem 0; }
  .plan-index { font-size: 3rem; }
  .plan-panel h3 { font-size: 2rem; }
  .brand img { width: 9rem; }
  .commentary-card { padding: 1.45rem; }
  .commentary-card h3 { font-size: 1.68rem; }
  .reason-compare-row { grid-template-columns: 1fr auto; }
  .reason-compare-row .dual-track { grid-column: 1 / -1; grid-row: 2; }
  footer .section-shell { grid-template-columns: 1fr; }
  footer p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .funnel-step { opacity: 1; transform: none; }
  .compare-row i, .reason-track i, .cost-row i, .channel-bar i, .reconcile-row i { width: var(--bar); }
  .donut-value { stroke-dashoffset: 116.1; }
}