/* ============================================
   Props Vantage — Landing Page Styles
   ============================================ */

/* --- Reset & Base --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fafaf8;
  color: #0d0d0d;
  line-height: 1.6;
  font-size: 16px;
}

/* --- Layout --- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 100px 0;
}

/* --- Fade-in animation for scroll-triggered elements --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.19s; }
.stagger-4 { transition-delay: 0.26s; }

/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(13,13,13,0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0d0d0d;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
  margin-right: 36px;
}

.nav-link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #0d0d0d;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: #FB5D01;
  color: #0d0d0d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn-primary:hover {
  background: #D64F01;
  color: #0d0d0d;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary.btn-sm {
  padding: 8px 18px;
  font-size: 13px;
}

/* ============================================
   HERO — headline + subtitle, product panel bleeds up from below the fold
   ============================================ */
/* Normal document flow (no sticky, no scroll-linked JS). The headline,
   subtitle and CTA sit in the first viewport; the product panel follows
   directly below so its top edge sits above the fold and the rest is revealed
   by ordinary scrolling. */

.hero {
  position: relative;
  padding: 280px 0 0;
}

/* Widen the hero's shared container so the mockup card uses most of the
   viewport (~48px side margin instead of the generic 1120px container gap).
   Headline, subtitle, button and the card are all children of this one
   container, so they inherit the same left/right edges automatically. */
.hero .container {
  max-width: none;
  padding: 0 48px;
}

/* Full content width — the headline wraps across the whole column rather than
   being boxed into a narrow left rail.

   min-height holds the copy block open to the fold so the panel's top edge
   lands at ~84vh no matter how the headline wraps — i.e. the top ~16-18% of the
   card peeks above the fold at a ~900px viewport, enough to read as a real
   interface continuing below without over-revealing. Driving the crop from the
   copy block (rather than a margin on the panel) keeps the panel's top a fixed
   fraction of the viewport on every screen height: 280px is .hero's padding-top,
   so 84vh − 280px puts the panel edge at 84vh from the top of the page. */
.hero-content {
  max-width: none;
  min-height: calc(84vh - 280px);
}

/* The panel follows the copy immediately — its own height then runs past the
   bottom of the viewport, so it is cropped by the viewport edge on first load
   and revealed by ordinary scrolling. The crop is plain overflow: no fade,
   no gradient mask, no scroll-linked JS. */
.hero-mockup {
  margin-top: 0;
}

/* --- Hero entrance: staggered fade-up --- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0px); }
}

.hero-headline {
  max-width: 900px;
  font-size: clamp(34px, 4.05vw, 58px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0d0d0d;
  margin-bottom: 24px;
  opacity: 1;
  animation: heroFadeUp 1400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms backwards;
  will-change: opacity, transform;
}

.hero-subline {
  font-size: 18px;
  line-height: 1.65;
  color: #444;
  max-width: 640px;
  margin-bottom: 20px;
  font-weight: 400;
  opacity: 1;
  animation: heroFadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) 300ms backwards;
  will-change: opacity;
}

.hero-cta {
  opacity: 1;
  animation: heroFadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) 600ms backwards;
  will-change: opacity;
}

/* ============================================
   PROBLEM SECTION
   ============================================ */
.problem-section {
  padding: 120px 0;
  border-top: 1px solid rgba(13,13,13,0.06);
}

.problem-pairs {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.problem-pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.problem-have {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 400;
  color: #6B6B6B;
}

.problem-lack {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 600;
  color: #0d0d0d;
}

/* --- Problem visual contrast --- */
.problem-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 72px;
}

.contrast-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contrast-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.retailer-table {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 12.5px;
  color: #555;
  border-top: 1px solid rgba(13,13,13,0.1);
  border-bottom: 1px solid rgba(13,13,13,0.1);
}

.retailer-row {
  display: grid;
  grid-template-columns: 1.3fr 1.6fr 1fr 0.7fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(13,13,13,0.05);
  line-height: 1.4;
}

.retailer-row:last-child {
  border-bottom: none;
}

.retailer-row.retailer-head {
  color: #999;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 8px;
}

.contrast-caption {
  font-size: 12.5px;
  color: #999;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  margin-top: 4px;
}

.insight-card {
  background: #fff;
  border: 1px solid rgba(13,13,13,0.07);
  border-radius: 10px;
  padding: 20px;
}

.insight-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 10px;
}

.insight-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 14px;
}

.insight-accent {
  font-size: 12.5px;
  line-height: 1.5;
  color: #FB5D01;
  padding-top: 12px;
  border-top: 1px solid rgba(13,13,13,0.06);
}

/* ============================================
   PRODUCT PANEL (lives in the hero) — flat UI panel cropped by the fold
   ============================================ */
/* Three-zone application shell: sidebar / content / properties rail.
   Structure comes from 1px hairlines ONLY — no shadows, no gradients, no
   glows anywhere in this panel. Orange (#FB5D01) is the single accent and is
   spent on exactly two things: the active nav indicator and one status dot.

   Type ladder (four steps, used consistently):
     title  15–16px / 600 / #0d0d0d      body   14px / 400 / #3d3d3d
     meta   13px    / 400 / #8a8a85      label  11px / 600 / caps / #a8a8a2 */

.mockup-card-wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #e2e0d8;
  border-radius: 12px;
  background: #fff;
  /* Entrance: the same heroFadeUp used by the hero copy, staggered to fire
     last in the sequence (headline 0ms -> subline 300ms -> CTA 600ms ->
     card 900ms), matching the CTA's 1000ms duration and easing exactly.
     `backwards` fill (not `forwards`) means the animation leaves NO residual
     transform once it completes: the card reverts to its own style (no
     transform), so its fold-crop position and scroll behaviour are unaffected
     afterwards. Reusing the keyframes keeps it visually identical to the copy. */
  opacity: 1;
  animation: heroFadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) 900ms backwards;
  will-change: opacity, transform;
}

.mockup-mobile-cards {
  display: none;
}

/* Wrapper for the relocated mobile-only insight cards. Hidden by default so
   the block has zero effect above 768px, where the interactive panel runs. */
.mobile-insights {
  display: none;
}

.mockup-card {
  background: #fff;
  overflow: hidden;
}

/* --- Shell: three columns divided by hairlines --- */
/* Height is content-driven — the properties rail is the tallest column and
   sets it. The sidebar runs short below the nav, as app sidebars do. */
.panel-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 220px;
  align-items: stretch;
}

/* Shared: section label — step 4 of the ladder */
.panel-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a8a8a2;
  line-height: 1.3;
}

/* Shared: status dots */
.panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.panel-dot.green { background: #548164; }
.panel-dot.grey  { background: #b4b4ae; }
.panel-dot.red   { background: #c4554d; }
.panel-dot.amber { background: #FB5D01; }

/* ── ZONE 1 — SIDEBAR ───────────────────────── */
.panel-sidebar {
  border-right: 1px solid #ecebe5;
  min-width: 0;
}

.panel-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid #ecebe5;
}

.panel-switcher-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url('favicon.svg') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-switcher-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0d0d0d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-switcher-chevron {
  color: #a8a8a2;
  flex-shrink: 0;
  margin-left: auto;
}

.panel-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}

.panel-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #8a8a85;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.panel-nav-item:focus-visible {
  outline: 2px solid #FB5D01;
  outline-offset: -2px;
}

.panel-nav-item:hover {
  color: #3d3d3d;
}

.panel-nav-item.active {
  background: rgba(0, 0, 0, 0.04);
  color: #0d0d0d;
}

/* Orange left-edge indicator — one of only two accent uses in the panel */
.panel-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: #FB5D01;
}

.panel-nav-icon {
  flex-shrink: 0;
  color: currentColor;
}

/* ── ZONE 2 — CENTER CONTENT ────────────────── */
/* min-height holds the card at the same 800px it is cropped to at the fold,
   so switching to a shorter view never resizes the panel under the reader.
   The header bar is shared by every view; only its title text changes. */
.panel-main {
  min-width: 0;
  min-height: 798px;
  display: flex;
  flex-direction: column;
}

/* One container per view — only the active one renders */
.panel-view {
  display: none;
}

.panel-view.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  animation: panelViewIn 140ms ease-out;
}

@keyframes panelViewIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.panel-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid #ecebe5;
}

.panel-main-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0d0d0d;
}

.panel-main-actions {
  display: flex;
  gap: 8px;
}

.panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e2e0d8;
  border-radius: 6px;
  background: none;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  color: #3d3d3d;
  cursor: default;
  white-space: nowrap;
}

.panel-btn svg {
  color: #8a8a85;
  flex-shrink: 0;
}

/* Metric strip — three blocks split by vertical hairlines */
.panel-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #ecebe5;
}

.panel-metric {
  padding: 16px 20px;
  min-width: 0;
}

.panel-metric + .panel-metric {
  border-left: 1px solid #ecebe5;
}

.panel-metric-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0d0d0d;
  margin-top: 6px;
}

.panel-metric-sub {
  font-size: 13px;
  font-weight: 400;
  color: #8a8a85;
  line-height: 1.4;
  margin-top: 3px;
}

/* Key findings */
.panel-findings {
  padding: 16px 20px 8px;
}

.panel-finding-list {
  list-style: none;
  margin-top: 2px;
}

.panel-finding {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
}

.panel-finding:not(:last-child) {
  border-bottom: 1px solid #ecebe5;
}

.panel-finding-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #3d3d3d;
  min-width: 0;
}

.panel-trend {
  color: #a8a8a2;
  flex-shrink: 0;
  margin-left: auto;
}

/* Content blocks below the findings — each opened by a hairline */
.panel-block {
  padding: 16px 20px;
  border-top: 1px solid #ecebe5;
}

/* Buyer profile — four stat pairs across */
.panel-profile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.panel-profile-value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #0d0d0d;
}

.panel-profile-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #8a8a85;
  margin-top: 2px;
}

/* Purchase trend — 12 thin monthly bars. Flat fills, no axes or gridlines.
   Bars and month labels share one 12-column track so labels sit under the
   bar they name. */
.panel-bars,
.panel-bar-months {
  display: grid;
  grid-template-columns: repeat(12, 18px);
  gap: 8px;
}

.panel-bars {
  align-items: end;
  height: 64px;
  margin-top: 12px;
}

.panel-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: #d8d6ce;
}

.panel-bar.amber {
  background: #FB5D01;
}

.panel-bar-months {
  margin-top: 8px;
}

.panel-bar-months span {
  grid-row: 1;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
  white-space: nowrap;
}

/* Competitive position — name, share bar, percentage */
.panel-share-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.panel-share-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.panel-share-name {
  flex: none;
  width: 140px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #3d3d3d;
}

.panel-share-track {
  flex: none;
  width: 240px;
  height: 6px;
  border-radius: 3px;
  background: #f2f1ea;
  overflow: hidden;
}

/* Wide variant — track stretches to the content zone edge. Opt-in so the
   fixed-width lists elsewhere are unaffected. */
.panel-share-list-wide .panel-share-track {
  flex: 1;
  width: auto;
  min-width: 0;
}

.panel-share-list-wide .panel-share-name {
  flex: none;
  width: 140px;
}

.panel-share-list-wide .panel-share-pct {
  flex: none;
  width: 44px;
  text-align: right;
}

.panel-share-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #d8d6ce;
}

.panel-share-fill.amber {
  background: #FB5D01;
}

.panel-share-pct {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

/* Sub-heading inside a block (e.g. Gender / Age within Demographic split) */
.panel-sub-label {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
  margin-top: 14px;
}

.panel-sub-label + .panel-share-list {
  margin-top: 8px;
}

/* A block whose section label is the first thing in the view */
.panel-block-flush {
  border-top: none;
}

/* Buyer segments — stacked cards */
.panel-segments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.panel-segment {
  padding: 12px 14px;
  border: 1px solid #ecebe5;
  border-radius: 6px;
}

.panel-segment-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #0d0d0d;
}

.panel-segment-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #3d3d3d;
  margin-top: 3px;
}

.panel-segment-meta {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
  margin-top: 5px;
}

/* Stat row inside a block — Overview metric styling, but sitting under a
   section label, so the per-stat names drop to metadata to avoid stacking
   two levels of uppercase. */
.panel-statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.panel-stat {
  padding-right: 20px;
  min-width: 0;
}

.panel-stat + .panel-stat {
  padding-left: 20px;
  border-left: 1px solid #ecebe5;
}

.panel-stat .panel-sub-label {
  margin-top: 0;
}

/* A block that absorbs the leftover height of its view */
.panel-block-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
}

/* Sibling blocks that share the view's leftover height equally, each centring
   its own content, so sections keep an even rhythm down the column instead of
   stacking at the top. */
.panel-block-even {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Diverging gains/losses bars.
   Row geometry — name | gap | track (fluid) | gap | value — is fixed on the
   sides and elastic in the middle, so the chart runs the full width of the
   content zone and the track simply gets longer on wider screens. Because
   every bar is a percentage of that same track, widening it rescales all four
   equally and their relative lengths stay true to the values. */
.panel-diverge {
  --name-w: 140px;
  --val-w: 70px;
  --gap: 14px;
  --track-w: calc(100% - var(--name-w) - var(--val-w) - 2 * var(--gap));
  /* The track spans the full data range, −1.1 to +1.4 = 2.5pts, so one
     px-per-point applies to both sides and the largest bar in each direction
     reaches its edge. Zero therefore sits at 1.1/2.5 = 44%, not at halfway. */
  --zero: 44%;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

/* Rows share the height evenly, so the chart spreads down the block */
.panel-diverge-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.panel-diverge-name {
  flex: none;
  width: var(--name-w);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #3d3d3d;
}

.panel-diverge-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 44px;
}

/* One continuous zero axis over the whole chart, sitting at --zero along the
   track. The track itself starts after the name column and its gap. */
.panel-diverge-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--name-w) + var(--gap) + var(--zero) * var(--track-w) / 100%);
  width: 1px;
  background: #ecebe5;
}

.panel-diverge-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
}

.panel-diverge-bar.pos {
  left: var(--zero);
  background: #FB5D01;
}

.panel-diverge-bar.neg {
  right: calc(100% - var(--zero));
  background: #d8d6ce;
}

.panel-diverge-val {
  flex: none;
  width: var(--val-w);
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

/* Campaign achieved-vs-target */
.panel-camp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.panel-camp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 420px;
}

.panel-camp-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #3d3d3d;
}

.panel-camp-pct {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #0d0d0d;
}

.panel-camp-meta {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
  margin-top: 2px;
}

.panel-camp-track {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 6px;
  border-radius: 3px;
  background: #f2f1ea;
  margin-top: 8px;
}

.panel-camp-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #d8d6ce;
}

.panel-camp-fill.amber {
  background: #FB5D01;
}

/* Target marker sits at 100% of target — two thirds along a 150% track */
.panel-camp-target {
  position: absolute;
  left: 66.7%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: #a8a8a2;
}

/* Single-series line chart. Runs the full width of the content zone; height
   follows width through the viewBox aspect, so the plot keeps its shape. */
.panel-line {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
}

.panel-line-months {
  position: relative;
  width: 100%;
  height: 17px;
}

.panel-line-months span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
  white-space: nowrap;
}

.panel-line-caption {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #8a8a85;
  margin-top: 10px;
}

/* Paired distribution vs penetration bars */
.panel-pair-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.panel-pair-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 460px;
  margin-bottom: 8px;
}

.panel-pair-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #0d0d0d;
}

.panel-pair-gap {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

.panel-pair-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-pair-row + .panel-pair-row {
  margin-top: 6px;
}

.panel-pair-label {
  flex: none;
  width: 92px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

.panel-pair-track {
  flex: none;
  width: 300px;
  height: 6px;
  border-radius: 3px;
  background: #f2f1ea;
  overflow: hidden;
}

.panel-pair-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #d8d6ce;
}

.panel-pair-fill.amber {
  background: #FB5D01;
}

.panel-pair-val {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

/* Ask view — chat transcript above a docked composer. Visual only. */

/* The thread can only scroll if it has a bounded height to scroll inside, so
   pin the content zone to its resting height while Ask is the active view.
   Scoped with :has() so the taller Buyers view is still free to grow the card. */
.panel-main:has(.panel-view[data-view="ask"].active) {
  height: 798px;
}

.panel-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel-chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Top-anchored: the transcript flows from the top of the thread so the first
   question sits at the fold and the conversation scrolls downward inside the
   thread. No auto margin or justify-content — those would push the content off
   the top edge and make it unreachable once it overflows. */
.panel-chat-inner {
  margin-top: 0;
}

/* User turn — the only contained message */
.panel-msg-user {
  display: flex;
  justify-content: flex-end;
}

.panel-msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 6px;
  background: #f2f1ec;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #3d3d3d;
}

/* Assistant turn — full width, no bubble */
.panel-msg-assistant {
  margin-top: 20px;
}

.panel-msg-id {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.panel-msg-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: url('favicon.svg') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-msg-name {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

.panel-msg-lead {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: #0d0d0d;
}

.panel-msg-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #3d3d3d;
  margin-top: 10px;
}

/* Inline data element inside the response */
.panel-msg-stats {
  margin-top: 14px;
  border: 1px solid #ecebe5;
  border-radius: 6px;
}

.panel-msg-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
}

.panel-msg-stat:not(:last-child) {
  border-bottom: 1px solid #ecebe5;
}

.panel-msg-stat-label {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

.panel-msg-stat-value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #0d0d0d;
}

.panel-msg-stat-delta {
  width: 68px;
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

/* ── Exchange 1 — histogram ──────────────────────
   NPS score distribution among under-30 respondents. Grey bars sit on a
   single hairline baseline (no gridlines); the leftmost three run accent-orange to
   mark the detractor weight. Bars reuse the purchase-trend bar treatment. */
.panel-hist {
  margin-top: 16px;
}

.panel-hist-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 92px;
  border-bottom: 1px solid #ecebe5;
}

.panel-hist-bar {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  background: #d8d6ce;
}

.panel-hist-bar.amber {
  background: #FB5D01;
}

.panel-hist-axis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: #a8a8a2;
}

.panel-hist-axis span {
  text-align: center;
}

/* ── Exchange 2 — paired-dot (dumbbell) comparison ──
   Under-30 vs 30+ across five drivers on a shared 0–100 score axis. Every row
   uses the same three-column grid (name / track / gap) so the track — and the
   0/50/100 baseline beneath it — line up; a dot's x-position is its score, so
   a value sits at the same place in every row. Rows are pre-sorted by gap,
   widest first. Sits at a comfortable width inside the answer column. */
.panel-dumbbell {
  margin-top: 16px;
  max-width: 440px;
}

.panel-dumbbell-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.3;
  color: #a8a8a2;
}

.panel-dumbbell-gaphead {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.panel-dumbbell-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-dumbbell-row {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  align-items: center;
  column-gap: 14px;
}

.panel-dumbbell-name {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #3d3d3d;
}

.panel-dumbbell-track {
  position: relative;
  min-width: 0;
  height: 20px;
}

/* Hairline connector, a touch heavier than the axis baseline so the pairing
   reads clearly against the white card. */
.panel-dumbbell-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 1px;
  background: #ecebe5;
}

.panel-dumbbell-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.panel-dumbbell-dot.young { background: #FB5D01; }
.panel-dumbbell-dot.old   { background: #b8b6ae; }

.panel-dumbbell-gap {
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

/* Shared axis: one hairline baseline with 0 / 50 / 100 ticks, placed in the
   same track column so it labels the scale for every row above it. */
.panel-dumbbell-axis {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  column-gap: 14px;
  margin-top: 6px;
}

.panel-dumbbell-scale {
  grid-column: 2;
  border-top: 1px solid #ecebe5;
  padding-top: 5px;
}

.panel-dumbbell-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  line-height: 1.3;
  color: #a8a8a2;
}

/* Legend sits directly beneath the axis, aligned to the track's 0 tick. */
.panel-dumbbell-legend {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  padding-left: 106px;
}

.panel-dumbbell-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
}

.panel-dumbbell-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.panel-dumbbell-swatch.young { background: #FB5D01; }
.panel-dumbbell-swatch.old   { background: #b8b6ae; }

/* ── Exchange 3 — impact vs effort ───────────────
   One row per option: name + reasoning on the left, two 3-dot meters on the
   right. Filled orange dots = impact, filled grey dots = effort, faint dots
   the remainder. Bordered box with hairline row dividers. */
.panel-actions {
  margin-top: 16px;
  border: 1px solid #ecebe5;
  border-radius: 6px;
}

.panel-action {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
}

.panel-action:not(:last-child) {
  border-bottom: 1px solid #ecebe5;
}

.panel-action-main {
  flex: 1;
  min-width: 0;
}

.panel-action-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #0d0d0d;
}

.panel-action-why {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #8a8a85;
  margin-top: 3px;
}

.panel-action-meters {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}

.panel-action-meter {
  width: 52px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-action-meter-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a8a8a2;
}

.panel-action-dots {
  display: flex;
  gap: 4px;
}

.pv-lvl {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ecebe5;
}

.pv-lvl.impact.on { background: #FB5D01; }
.pv-lvl.effort.on { background: #b4b4ae; }

/* Composer — stays docked at the bottom of the content zone */
.panel-chat-dock {
  flex: none;
  padding: 14px 20px 16px;
  border-top: 1px solid #ecebe5;
}

.panel-chat-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e0d8;
  border-radius: 8px;
}

.panel-chat-placeholder {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #a8a8a2;
}

.panel-chat-send {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FB5D01;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-chat-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

/* Precision selector — visual-only pill pushed to the far right of the chips
   row, so the suggestions stay left-aligned and the control reads as separate.
   Communicates the speed vs. statistical-confidence tradeoff as a margin of
   error; matches the chip border/radius, with a chevron to signal a selector. */
.panel-chat-precision {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.panel-chat-precision-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a8a8a2;
  white-space: nowrap;
}

.panel-precision-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #e2e0d8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #3d3d3d;
  white-space: nowrap;
}

.panel-precision-pill svg {
  color: #a8a8a2;
  flex-shrink: 0;
}

/* ── ZONE 3 — PROPERTIES RAIL ───────────────── */
.panel-rail {
  border-left: 1px solid #ecebe5;
  min-width: 0;
}

.panel-rail-block {
  padding: 14px 18px;
}

.panel-rail-block:not(:last-child) {
  border-bottom: 1px solid #ecebe5;
}

.panel-rail-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #0d0d0d;
  margin-top: 6px;
}

.panel-rail-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #3d3d3d;
  margin-top: 6px;
}

.panel-rail-value-dotted {
  display: flex;
  align-items: center;
  gap: 7px;
}

.panel-rail-meta {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #8a8a85;
  margin-top: 2px;
}

.panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.panel-chip {
  padding: 4px 8px;
  border: 1px solid #e2e0d8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #8a8a85;
  white-space: nowrap;
}

/* ============================================
   WHAT YOU GET
   ============================================ */
.benefits-section {
  border-top: 1px solid rgba(13,13,13,0.06);
}

.benefits-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 48px;
  color: #0d0d0d;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.benefit-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(13,13,13,0.06);
  font-size: 17px;
  line-height: 1.6;
  color: #333;
}

.benefit-item:first-child {
  border-top: 1px solid rgba(13,13,13,0.06);
}

.benefit-number {
  display: inline-block;
  width: 28px;
  font-size: 13px;
  font-weight: 600;
  color: #FB5D01;
  font-variant-numeric: tabular-nums;
}

.benefit-item {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.benefit-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.benefit-text {
  font-size: 17px;
  line-height: 1.6;
  color: #333;
}

.benefit-card {
  background: #fff;
  border: 1px solid rgba(13,13,13,0.07);
  border-radius: 10px;
  padding: 16px 18px;
}

.benefit-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 6px;
}

.benefit-card-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #222;
}

/* ── Expandable benefit cards ── */
.benefit-card-expandable {
  position: relative;
  cursor: pointer;
}

.benefit-card-chevron {
  position: absolute;
  top: 17px;
  right: 16px;
  color: #c4c4c4;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
}

.benefit-card-expandable.expanded .benefit-card-chevron {
  transform: rotate(180deg);
  color: #FB5D01;
}

.benefit-card-expandable:focus-visible {
  outline: 2px solid rgba(251, 93, 1, 0.6);
  outline-offset: 2px;
}

/* Collapsed by default; grid-template-rows animates to the exact content
   height so the card grows vertically while keeping its column width. */
.benefit-card-insight {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card-expandable.expanded .benefit-card-insight {
  grid-template-rows: 1fr;
}

.benefit-card-insight-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease 0.05s;
}

.benefit-card-expandable.expanded .benefit-card-insight-inner {
  opacity: 1;
}

.benefit-card-divider {
  height: 1px;
  background: rgba(13,13,13,0.08);
  margin-top: 14px;
}

/* Recommendation treatment — warm tinted callout, distinct from the data above. */
.benefit-card-insight-text {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(13, 13, 13, 0.04);
  font-size: 13px;
  line-height: 1.6;
  color: #3a3a3a;
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card-insight,
  .benefit-card-insight-inner,
  .benefit-card-chevron {
    transition: none;
  }

  .panel-view.active {
    animation: none;
  }
}

/* ============================================
   PANEL CREDIBILITY
   ============================================ */
.credibility-section {
  border-top: 1px solid rgba(13,13,13,0.06);
}

.credibility-tinted {
  position: relative;
  border-top: none;
  overflow: hidden;
}

.credibility-tinted::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #f5f4f0;
  z-index: -1;
}

.credibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.credibility-numbers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.credibility-stat-label {
  font-size: 17px;
  color: #888;
  line-height: 1.5;
}

/* --- Dot grid canvas --- */
.dot-grid {
  display: block;
  width: 100%;
  height: 140px;
  margin-bottom: 48px;
}

/* --- Left-border stat row --- */
.credibility-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

.credibility-stat-item {
  border-left: 2px solid #0d0d0d;
  padding: 6px 0 6px 18px;
}

.credibility-stat-num {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0d0d0d;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.credibility-stat-num.credibility-stat-word {
  font-size: clamp(28px, 3.4vw, 36px);
}

.credibility-stat-sub {
  font-size: 13.5px;
  color: #888;
  margin-top: 8px;
  line-height: 1.4;
}

.credibility-text h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #0d0d0d;
}

.credibility-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
}

.credibility-text p:last-child {
  margin-bottom: 0;
}

/* ============================================
   WAITLIST CTA
   ============================================ */
.cta-section {
  padding: 100px 0 120px;
  border-top: 1px solid rgba(13,13,13,0.06);
}

.cta-headline {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
  color: #0d0d0d;
}

.waitlist-form {
  display: flex;
  gap: 12px;
  max-width: 560px;
  flex-wrap: wrap;
}

.waitlist-input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border: 1px solid rgba(13,13,13,0.14);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #0d0d0d;
  outline: none;
  transition: border-color 0.2s ease;
}

.waitlist-input:focus {
  border-color: rgba(13,13,13,0.35);
}

.waitlist-input::placeholder {
  color: #aaa;
}

.waitlist-submit {
  padding: 14px 28px;
  background: #FB5D01;
  color: #0d0d0d;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.waitlist-submit:hover {
  background: #D64F01;
  transform: translateY(-1px);
}

.form-success {
  display: none;
  font-size: 15px;
  color: #548164;
  font-weight: 500;
  margin-top: 12px;
}

.form-success.show {
  display: block;
}

.form-error {
  display: none;
  font-size: 15px;
  color: #c4554d;
  font-weight: 500;
  margin-top: 12px;
}

.form-error.show {
  display: block;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 32px 0;
  border-top: 1px solid rgba(13,13,13,0.06);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #aaa;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-link {
  font-size: 13px;
  color: #aaa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #0d0d0d;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  section {
    padding: 72px 0;
  }

  /* These two carry their own padding on the desktop rule, so the generic
     `section` override above never reaches them — a class selector outranks an
     element selector regardless of which media query it sits in. Restate them
     here or both keep their 100-120px desktop rhythm on a phone. */
  .problem-section {
    padding: 72px 0;
  }

  .cta-section {
    padding: 72px 0 80px;
  }

  /* --- Nav --- */
  /* .nav-inner is a flex row with no shrink guard, so at narrow widths the
     deficit was absorbed by the logo and the CTA, wrapping both onto two lines
     and pushing the button past the 64px bar. Pin both against shrinking and
     take the space out of the link group's spacing instead. */
  .nav-logo,
  .nav .btn-primary.btn-sm {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .nav-links {
    gap: 24px;
    margin-right: 24px;
  }

  /* --- Hero --- */
  .hero {
    padding-top: 96px;
  }

  /* The 48px desktop gutter exists to let the product panel run nearly
     full-bleed. That panel is hidden below this breakpoint, so the wide gutter
     only costs the copy 48px of measure — it was forcing the headline to five
     lines. Match the standard container so the hero aligns with every other
     section. Specificity is (0,1,1) here, same as the desktop rule it
     overrides, so source order decides — keep this after it. */
  .hero .container {
    padding: 0 24px;
  }

  /* On mobile the interactive panel is hidden and the insight cards show in
     its place, so the gap above them is tighter than the desktop panel gap.
     The fold-crop min-height is desktop-only — release it here or it would
     push the insight cards most of a screen down. */
  .hero-content {
    min-height: 0;
  }

  .hero-mockup {
    /* Empty at this width — the panel is hidden and the insight cards now live
       outside the hero — so its old top margin would be pure dead space.
       Kept in the DOM because it carries the nav's #product anchor. */
    margin-top: 0;
  }

  .mobile-insights {
    display: block;
    padding-top: 40px;
  }

  .hero-headline {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .hero-subline {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  /* --- Display type --- */
  /* None of these set a line-height of their own, so they were inheriting
     body's 1.6 — body-copy leading on 26-28px headings. */
  .problem-have,
  .problem-lack {
    font-size: 26px;
    line-height: 1.35;
  }

  .problem-pairs {
    gap: 48px;
  }

  .benefits-title {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 36px;
  }

  .cta-headline {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 28px;
  }

  .credibility-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .credibility-stats-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  .credibility-text h3 {
    font-size: 19px;
    line-height: 1.35;
  }

  .credibility-text p {
    font-size: 15.5px;
    line-height: 1.65;
    margin-bottom: 14px;
  }

  .benefit-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dot-grid {
    height: 100px;
    margin-bottom: 36px;
  }

  .mockup-card-wrapper {
    display: none;
  }

  .mockup-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: 0 auto;
  }

  /* Sized for the narrow column this card actually occupies, not a scaled-down
     desktop card: tighter padding so more of the width goes to text, and a
     body size that reads at arm's length rather than a shrunken caption. */
  .mobile-insight-card {
    background: #fafaf8;
    border: 1px solid rgba(13,13,13,0.1);
    border-radius: 12px;
    padding: 20px 18px;
  }

  .mobile-insight-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #888;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .mobile-insight-value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #FB5D01;
    margin-bottom: 8px;
  }

  .mobile-insight-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #555;
  }

  .waitlist-form {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  /* Keep the hero's gutter tied to the standard container at this width too —
     the (0,1,1) hero rule above would otherwise hold it at 24px and leave the
     hero copy misaligned with every section below it. */
  .hero .container {
    padding: 0 16px;
  }

  section {
    padding: 60px 0;
  }

  .problem-section {
    padding: 60px 0;
  }

  .cta-section {
    padding: 60px 0 72px;
  }

  /* --- Nav --- */
  /* At 360px the bar has 328px of usable width and the full row needs 407px
     (logo 116 + links 135 + spacing 48 + CTA 108). No combination of padding
     and type-size trimming closes an 79px gap without shrinking everything to
     an unreadable scale, so the two in-page anchors give way to the logo and
     the CTA. Both targets are section links the reader scrolls through anyway. */
  .nav-links {
    display: none;
  }

  /* The mobile hero is a standalone screen: headline + CTA and nothing else in
     view. 100svh (not 100vh) so the iOS address bar collapsing doesn't leave a
     strip of the next block showing. Centring is within the content box, i.e.
     below the 88px nav offset. Static height only — no snap, no scroll JS. */
  .hero {
    padding-top: 88px;
    min-height: 100vh;  /* fallback for engines without svh */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Bias the centred block above true centre — headline + CTA is only ~215px
       tall, so mathematical centring in an 812px screen leaves it floating low.
       A viewport-relative bottom pad lands it near the upper third at any
       height instead of pinning it to one device size. */
    padding-bottom: 20svh;
  }

  /* 29px/1.2 resolves the headline to three lines at both 360px and 375px. */
  .hero-headline {
    font-size: 29px;
    margin-bottom: 24px;
  }

  /* Mobile hero drops the subhead entirely: the headline carries the message
     and the CTA follows it directly, so there is one clear action in view. */
  .hero-subline {
    display: none;
  }

  .problem-have,
  .problem-lack {
    font-size: 22px;
  }

  .problem-pairs {
    gap: 40px;
  }

  .benefits-title {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .benefit-item {
    padding: 24px 0;
    gap: 14px;
  }

  .benefit-text {
    font-size: 16px;
  }

  .credibility-stat-num {
    font-size: 30px;
  }

  .credibility-stat-num.credibility-stat-word {
    font-size: 26px;
  }

  .cta-headline {
    font-size: 25px;
  }

  .mobile-insight-value {
    font-size: 20px;
  }

  /* The nav CTA and the hero CTA sit within ~120px of each other at this width.
     Shrink the nav one so the hero button is unambiguously the primary action. */
  .nav .btn-primary.btn-sm {
    padding: 6px 13px;
    font-size: 12px;
  }
}