/* KinMatch — Nintendo.com 2001 design system (see DESIGN-nintendo-2001.md) */

:root {
  --primary: #e60012;
  --signal: #f68d1f;
  --amber: #ecab37;
  --nav-gold: #e48600;
  --chrome-canvas: #7a8aba;
  --canvas-soft: #9fbee7;
  --lavender: #acace7;
  --periwinkle: #8ba1d4;
  --chrome-indigo: #3d4f97;
  --muted-indigo: #60619c;
  --platinum: #dedede;
  --surface: #ffffff;
  --carbon: #21242e;
  --hairline: #5a5f8c;
  --ink: #21242e;
  --ink-soft: #3d4f97;
  --on-primary: #ffffff;
  --systems-teal: #206479;
  --games-red: #a7282b;
  --ice: #c0d5e6;
  --bevel-highlight: #9fbee7;
  --error: #e60012;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;
  --spacing-section: 48px;
  --text-base: 16px;
  --section-headline-size: clamp(1.875rem, 2.5vw + 0.65rem, 2.5rem);
  --line-body: 1.5;
  --line-body-relaxed: 1.55;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-display: "Arial Black", Arial, sans-serif;
  --site-header-h: 3.5rem;
  --bevel-plate:
    inset 0 1px 0 var(--bevel-highlight),
    inset 1px 0 0 var(--bevel-highlight),
    0 2px 0 var(--chrome-indigo);

  /* Legacy aliases */
  --canvas: var(--chrome-canvas);
  --cream: var(--chrome-canvas);
  --cream-deep: var(--platinum);
  --terracotta: var(--signal);
  --terracotta-deep: var(--nav-gold);
  --forest: var(--carbon);
  --surface-dark: var(--carbon);
  --surface-soft: var(--platinum);
  --surface-elevated: var(--periwinkle);
  --primary-dark: var(--nav-gold);
  --muted: var(--ink-soft);
  --body-text: var(--ink);
  --on-dark: var(--on-primary);
  --on-dark-mute: var(--canvas-soft);
  --link-blue: var(--ink-soft);
  --stone: var(--muted-indigo);
  --ash: var(--muted-indigo);
}

body::before {
  display: none !important;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--line-body);
  background: var(--chrome-canvas);
  color: var(--ink);
}

/* ─── Typography ─── */
.serif,
.display,
.section-title,
.hero-headline,
.problems-header h2,
.how-header h2,
.cta-header h2,
.proof-header h2,
.stats-band-header h2,
.problem h3,
.step h4,
.cta-card h3,
.quote p,
.mosaic-card.text-card p,
.problem p,
.step p,
.hero-tagline,
.hero-sub {
  font-family: var(--font-sans);
  font-style: normal;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-primary);
  -webkit-text-stroke: 1.5px var(--chrome-indigo);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--carbon);
}

.section-title,
.problems-header h2,
.how-header h2,
.cta-header h2,
.proof-header h2,
.stats-band-header h2,
.find-your-people-header h2 {
  font-family: var(--font-display);
  font-size: var(--section-headline-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.hero-tagline,
.hero-sub,
.problems-header p {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: var(--line-body-relaxed);
}

.problems-header p {
  color: var(--ink-soft);
}

.problem p,
.step p,
.mosaic-card.text-card p,
.cta-card.pilot .lede,
.cta-card.pilot .perks li {
  font-size: 1rem;
  line-height: var(--line-body);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  border: 1px solid var(--nav-gold);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}

.knockout,
.hero-headline .em,
.section-title em,
.problem-num,
.step::before,
.proof-header h2 em,
.cta-header h2 em,
.stats-band-header h2 em,
.find-your-people-header h2 em,
.how-header h2 em,
.quote-meta,
.mosaic-card.text-card .accent,
.cta-badge,
.perks li::before,
.visual-caption {
  font-style: normal;
}

.knockout,
.for-whom .knockout,
.proof .knockout,
.stats-band .knockout,
.find-your-people .knockout,
.how .knockout,
.hero-headline .em {
  background: transparent;
  color: var(--signal);
  padding: 0;
  border-radius: 0;
  font-weight: 900;
  -webkit-text-stroke: 1.5px var(--carbon);
  text-shadow: 2px 2px 0 var(--chrome-indigo);
}

/* ─── Nav bar (carbon + halftone) ─── */
nav {
  background-color: var(--carbon);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1px
  );
  background-size: 4px 4px;
  border-bottom: 2px solid var(--chrome-indigo);
  height: 56px;
}

.nav-inner {
  height: 56px;
  padding: 0 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--on-primary);
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  -webkit-text-stroke: 1px var(--chrome-indigo);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--carbon);
}

.brand .wordmark {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.brand .em {
  color: var(--signal);
  font-style: normal;
  font-weight: 900;
  -webkit-text-stroke: 1px var(--carbon);
  text-shadow: 2px 2px 0 var(--chrome-indigo);
}

.brand-mark {
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
}

.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-links {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nav-gold);
}

.nav-links a:hover {
  color: var(--amber);
}

.nav-links a:not(.nav-cta)::after {
  background: var(--signal);
  height: 2px;
  bottom: -0.35rem;
}

.nav-links a:not(.nav-cta).is-active {
  color: var(--amber);
}

.nav-links a:not(.nav-cta).is-active::after {
  background: var(--signal);
}

.nav-links a.nav-cta {
  background: var(--amber);
  color: var(--carbon);
  padding: 8px 16px;
  height: auto;
  min-height: 32px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid #f5d78a;
  border-bottom: 2px solid var(--nav-gold);
  display: inline-flex;
  align-items: center;
}

.nav-links a.nav-cta:hover {
  background: var(--nav-gold);
  color: var(--carbon);
}

/* ─── Hero (lavender hero-panel) ─── */
.hero {
  --hero-orange: #ff880b;
  --hero-slate-ink: #15203a;
  --hero-slate: #2b3450;
  --hero-bg: #acace8;
  --hero-node-blue: #6070a4;
  --hero-node-dark: #15203a;
  background: var(--hero-bg);
  color: var(--ink);
  padding: calc(2rem + var(--site-header-h)) 0 var(--spacing-section);
  border-bottom: 2px solid var(--chrome-indigo);
  box-shadow: var(--bevel-plate);
}

.hero .hero-headline {
  margin-top: 0.75rem;
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.hero .hero-headline .em {
  color: var(--hero-orange);
  -webkit-text-stroke: 2px var(--hero-slate-ink);
  paint-order: stroke fill;
  text-shadow: 0 0 1px var(--hero-slate-ink);
}

.hero-tagline,
.hero-sub {
  color: var(--carbon);
}

.hero-sub strong {
  color: var(--ink);
  font-weight: 700;
}

.hero-credibility {
  color: var(--hero-slate);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.hero-credibility strong {
  color: var(--hero-slate-ink);
  font-weight: 700;
}

.hero-visual {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
  border: none;
  background: transparent;
}

.hero .btn-primary {
  background: var(--hero-orange);
  color: var(--hero-slate-ink);
  border: none;
}

.hero .btn-primary:hover {
  background: #e07a0a;
  color: var(--hero-slate-ink);
  transform: none;
}

.hero .btn-ghost {
  background: transparent;
  color: var(--hero-slate-ink);
  border: 1.5px solid var(--hero-slate);
  border-top-color: var(--hero-slate);
}

.hero .btn-ghost:hover {
  background: rgba(21, 32, 58, 0.06);
  color: var(--hero-slate-ink);
  border-color: var(--hero-slate);
}

.visual-caption {
  color: var(--ink-soft);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── Buttons ─── */
.btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-xs);
}

.btn-primary {
  background: var(--signal);
  color: var(--on-primary);
  border-top: 1px solid #ffab5c;
  border-bottom: 2px solid var(--nav-gold);
}

.btn-primary:hover {
  background: var(--nav-gold);
  color: var(--on-primary);
  transform: none;
}

.btn-ghost {
  background: var(--amber);
  color: var(--carbon);
  border: 1px solid var(--nav-gold);
  border-top-color: #f5d78a;
}

.btn-ghost:hover {
  background: var(--nav-gold);
  color: var(--carbon);
  border-color: var(--nav-gold);
}

/* ─── Sections ─── */
.for-whom,
.problems,
.how,
.cta-section,
.proof,
.quotes-carousel,
.sources,
.stats-band {
  padding: var(--spacing-section) 0;
}

.for-whom {
  --for-whom-ink: #1a2233;
  --for-whom-emphasis: #b35200;
  --for-whom-badge-bg: #ff880b;
  --for-whom-badge-text: #15203a;
  background: var(--chrome-canvas);
  border-bottom: 2px solid var(--chrome-indigo);
}

.for-whom .for-whom-layout {
  align-items: start;
}

.for-whom .for-whom-title.section-title {
  margin-top: clamp(0.25rem, 1.5vw, 1rem);
  padding-right: 0.75rem;
  max-width: 100%;
}

.for-whom .knockout {
  color: #ff880b;
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

/* ─── For whom bento cards ─── */
.for-whom .mosaic-card {
  border-radius: var(--radius-sm);
  transition: none;
}

.for-whom .mosaic-card.text-card {
  background: #ffffff;
  border: 1px solid var(--chrome-indigo);
  padding: 1.25rem 1.375rem 1.5rem;
  box-shadow: var(--bevel-plate);
  min-height: 0;
  height: auto;
  max-height: none;
  align-self: start;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.for-whom .for-whom-layout .mosaic-area-04.mosaic-card {
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: visible;
}

.for-whom .mosaic-card.text-card:hover {
  box-shadow: var(--bevel-plate);
  transform: none;
}

.for-whom .mosaic-card.photo-card {
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid var(--chrome-indigo);
  background: var(--surface);
  box-shadow: var(--bevel-plate);
  min-height: 280px;
  height: 100%;
  align-self: stretch;
  padding: 0;
  overflow: hidden;
}

.for-whom .for-whom-layout .mosaic-area-photo-c.mosaic-card {
  min-height: 280px;
  max-height: none;
  height: 100%;
}

.for-whom .mosaic-card.photo-card picture {
  position: absolute;
  inset: 0;
  display: block;
}

.for-whom .mosaic-card.photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.for-whom .mosaic-area-photo-b img {
  object-position: center 25%;
}

.for-whom .for-whom-layout .mosaic-area-photo-c.mosaic-card img {
  object-position: center 12%;
}

.for-whom .mosaic-card.photo-card:hover img {
  transform: none;
}

.for-whom .mosaic-num {
  border-radius: var(--radius-full);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  width: 2rem;
  height: 2rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.for-whom .mosaic-num.num-1,
.for-whom .mosaic-num.num-2,
.for-whom .mosaic-num.num-3,
.for-whom .mosaic-num.num-4 {
  background: var(--for-whom-badge-bg);
  color: var(--for-whom-badge-text);
  border: 1px solid #e07a0a;
}

.for-whom .mosaic-card.text-card p {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--for-whom-ink);
  margin: 0;
}

.for-whom .mosaic-card.text-card .accent {
  color: var(--for-whom-emphasis);
  font-weight: 700;
  font-style: normal;
}

.mosaic-card.text-card::before,
.quote::after,
.cta-card::before,
.problem::before {
  display: none;
}

.problems {
  background: var(--platinum);
  border-top: 1px solid var(--bevel-highlight);
  border-bottom: 2px solid var(--chrome-indigo);
}

.problems-header h2 em,
.problems .knockout {
  color: var(--signal);
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

.section-bridge,
.stats-band-illustration,
.footer-illustration {
  display: none;
}

.problem {
  border-top: 1px solid var(--hairline);
}

.problem-num {
  background: transparent;
  color: var(--signal);
  font-weight: 700;
}

.problem h3 {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.problem h3 .stat,
.problem .data {
  color: var(--ink);
  font-weight: 700;
}

.problem .data-caption {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ─── Stats band ─── */
.stats-band {
  --stats-orange: #f08a24;
  --stats-slate-ink: #15203a;
  --stats-citation: #243152;
  --stats-divider: rgba(21, 32, 58, 0.28);
  --stats-bg: #faf7f2;
  background: var(--stats-bg);
  color: var(--stats-slate-ink);
  border-top: none;
  border-bottom: 2px solid var(--chrome-indigo);
  box-shadow: var(--bevel-plate);
  padding: clamp(2rem, 3.5vw, 2.75rem) 0;
}

.stats-band .wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.stats-band::before {
  display: none;
}

.stats-band-header {
  text-align: center;
  margin: 0 auto;
  max-width: 38rem;
}

.stats-band-header h2 {
  font-weight: 900;
  margin: 0;
  color: var(--stats-slate-ink);
}

.stats-band .knockout {
  color: var(--stats-orange);
  -webkit-text-stroke: 1.5px var(--stats-slate-ink);
  paint-order: stroke fill;
  text-shadow: 0 0 1px var(--stats-slate-ink);
}

.stats-band-header .eyebrow {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--chrome-indigo);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.stat-card {
  text-align: center;
  padding: 0 1rem;
}

.stat-card:nth-child(n + 2) {
  border-left: 1px solid var(--stats-divider);
}

.stat-card:not(:last-child)::after {
  display: none;
}

.stat-trend {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 0.5rem;
}

.stat-trend svg {
  display: block;
  width: 20px;
  height: 20px;
}

.stat-trend svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-trend svg path.stat-trend__outline {
  stroke: #15203a;
  stroke-width: 3.5;
}

.stat-trend svg path.stat-trend__line {
  stroke: #f08a24;
  stroke-width: 1.75;
}

.stat-card .number {
  color: var(--stats-orange);
  font-weight: 900;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 1rem;
  -webkit-text-stroke: 1.5px var(--stats-slate-ink);
  paint-order: stroke fill;
  text-shadow: 0 0 1px var(--stats-slate-ink);
}

.stat-card .number .unit {
  color: var(--stats-orange);
  font-style: normal;
  font-weight: 900;
  -webkit-text-stroke: 1.5px var(--stats-slate-ink);
  paint-order: stroke fill;
  text-shadow: 0 0 1px var(--stats-slate-ink);
}

.stat-card .stat-label {
  color: var(--stats-slate-ink);
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 700;
}

.stat-card .source {
  color: var(--stats-citation);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Quotes carousel ─── */
.quotes-carousel {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  background: var(--surface);
  border-top: none;
  border-bottom: none;
  overflow: visible;
}

.quotes-carousel .carousel-stage::before {
  content: none;
}

.quotes-carousel .carousel-stage {
  max-width: 760px;
  padding-top: 0;
  overflow: visible;
}

.quotes-carousel .carousel-quote-mark {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: block;
  width: fit-content;
  margin: 0 auto clamp(0.75rem, 1.5vw, 1.25rem);
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.85;
  color: #ff880b;
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
  pointer-events: none;
}

.quotes-carousel .carousel-track {
  display: grid;
  min-height: 0;
  padding-top: 0.25rem;
  overflow: visible;
}

.quotes-carousel .carousel-slide {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.quotes-carousel .carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.quotes-carousel .carousel-slide blockquote {
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: 640px;
}

.quotes-carousel .carousel-slide blockquote p {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 3rem);
  line-height: 1.3;
  color: #1a2233;
  letter-spacing: -0.01em;
  margin: 0;
}

.quotes-carousel .carousel-slide cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3a4a78;
}

.quotes-carousel .carousel-slide cite::before {
  content: "— ";
  margin-right: 0.15rem;
}

.quotes-carousel .carousel-dots {
  gap: 0.5rem;
  margin-top: 1.75rem;
  flex-wrap: nowrap;
  max-width: none;
}

.quotes-carousel .carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #c7ccda;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    width 0.2s ease,
    border-radius 0.2s ease;
}

.quotes-carousel .carousel-dot:hover {
  background: #a8afc2;
}

.quotes-carousel .carousel-dot:focus-visible {
  outline: 2px solid #ff880b;
  outline-offset: 3px;
}

.quotes-carousel .carousel-dot.is-active {
  width: 1.5rem;
  border-radius: 9999px;
  background: #ff880b;
  transform: none;
}

@media (max-width: 640px) {
  .quotes-carousel {
    padding: clamp(2.75rem, 7vw, 3.25rem) 0 clamp(2.25rem, 6vw, 2.75rem);
  }

  .quotes-carousel .carousel-quote-mark {
    font-size: clamp(2.75rem, 10vw, 3.5rem);
    margin-bottom: 0.65rem;
  }

  .quotes-carousel .carousel-slide blockquote {
    padding: 0 1rem;
  }

  .quotes-carousel .carousel-slide blockquote p {
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.875rem);
  }

  .quotes-carousel .carousel-slide cite {
    margin-top: 1rem;
  }

  .quotes-carousel .carousel-dots {
    margin-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quotes-carousel .carousel-slide {
    transition: none;
  }
}

/* ─── How ─── */
.how {
  background: var(--chrome-canvas);
  color: var(--ink);
  border-top: 2px solid var(--bevel-highlight);
}

.how-header h2 em,
.how .knockout {
  color: var(--signal);
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

.step {
  border-top: 1px solid var(--hairline);
}

.step::before {
  color: var(--signal);
  font-weight: 700;
}

.step h4 {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.step p {
  color: var(--ink);
}

/* ─── Find your people (demo + pillars) ─── */
.find-your-people {
  --stats-orange: #f08a24;
  --stats-slate-ink: #15203a;
  --demo-scale: 0.675;
  --demo-width: 257px;
  --demo-height: 581px;
  background: #7a8bb9;
  color: var(--stats-slate-ink);
  border-top: 2px solid var(--bevel-highlight);
  border-bottom: 2px solid var(--chrome-indigo);
  padding: clamp(2rem, 3.5vw, 2.75rem) 0;
}

.find-your-people .wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.find-your-people-header {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

.find-your-people-header h2 {
  font-weight: 900;
  margin: 0;
  color: var(--stats-slate-ink);
}

.find-your-people .knockout,
.find-your-people-pillar .pillar-numeral.knockout {
  color: var(--stats-orange);
  -webkit-text-stroke: 1.5px var(--stats-slate-ink);
  paint-order: stroke fill;
  text-shadow: 0 0 1px var(--stats-slate-ink);
}

.find-your-people-grid {
  display: grid;
  grid-template-columns: var(--demo-width) minmax(0, 1fr);
  align-items: start;
  column-gap: 48px;
  row-gap: 20px;
}

.find-your-people-demo {
  position: relative;
  width: var(--demo-width);
  height: var(--demo-height);
  overflow: hidden;
  flex-shrink: 0;
}

.find-your-people-demo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 380px;
  height: 860px;
  border: 0;
  background: transparent;
  transform: scale(var(--demo-scale));
  transform-origin: top left;
}

.find-your-people-pillars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.find-your-people-pillar {
  border-top: 1px solid rgba(28, 28, 46, 0.22);
  padding-top: 12px;
}

.find-your-people-pillar .pillar-numeral {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.find-your-people-pillar h3 {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.18;
  text-transform: uppercase;
  color: #1e2230;
}

.find-your-people-pillar .pillar-body {
  margin-top: 9px;
  max-width: none;
  font-size: 15px;
  line-height: 1.5;
  color: #2a2e3d;
}

@media (min-width: 1120px) {
  .find-your-people-grid {
    grid-template-columns: var(--demo-width) minmax(0, 1fr);
    column-gap: clamp(24px, 2.5vw, 40px);
  }

  .find-your-people-pillar .pillar-body {
    max-width: 47em;
  }
}

@media (max-width: 1119px) {
  .find-your-people-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .find-your-people-demo {
    width: var(--demo-width);
    height: var(--demo-height);
    margin: 0 auto;
  }

  .pillar-desktop-break {
    display: none;
  }
}

/* ─── CTA (form-panel) ─── */
.cta-section {
  background: #faf7f2;
  color: #1c1813;
  padding: var(--spacing-section) 0;
  border-top: none;
  border-bottom: none;
}

.cta-header h2 {
  color: #1c1813;
}

.cta-header h2 em,
.cta-header .knockout {
  color: #f78a0c;
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

.cta-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--chrome-indigo);
  padding: 16px;
  background: var(--platinum);
  color: var(--ink);
  box-shadow: var(--bevel-plate);
}

.cta-card:hover {
  transform: none;
}

.cta-card.pilot {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(28, 24, 19, 0.1);
  box-shadow: 0 16px 40px rgba(28, 24, 19, 0.12);
}

.cta-card.pilot .cta-badge {
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.cta-card.pilot .lede,
.cta-card.pilot .signup-hint {
  color: var(--ink);
  font-size: 1rem;
}

.cta-card.pilot .perks li {
  border-color: var(--hairline);
  color: var(--ink);
}

.cta-card.pilot .perks li::before {
  color: var(--signal);
}

.cta-card h3 {
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--ink);
}

/* ─── Forms ─── */
.signup input[type="email"],
.signup select,
.contact-modal .signup input,
.contact-modal .signup select {
  height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--carbon);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
}

.signup input:focus,
.signup select:focus {
  border: 2px solid var(--signal);
  outline: none;
}

.cta-card.pilot .signup input {
  border-color: var(--carbon);
  color: var(--ink);
  background: var(--surface);
}

.cta-card.pilot .signup input::placeholder {
  color: var(--muted-indigo);
}

.cta-card.pilot .signup input:focus {
  border-color: var(--signal);
}

.signup button,
.cta-card.pilot .signup button {
  background: var(--signal);
  color: var(--on-primary);
  border-radius: var(--radius-xs);
  min-height: 44px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid #ffab5c;
  border-bottom: 2px solid var(--nav-gold);
}

.signup button:hover,
.cta-card.pilot .signup button:hover {
  background: var(--nav-gold);
  color: var(--on-primary);
}

.signup-hint {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

/* ─── Proof ─── */
.proof {
  background: var(--platinum);
  border-top: none;
  border-bottom: none;
}

.proof-header h2 em,
.proof .knockout {
  color: var(--signal);
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

.proof-testimonials {
  --testimonial-ink: #2b3344;
  --testimonial-slate: #5f7696;
  --testimonial-divider: #bcc1cc;
  --testimonial-accent: #f08a24;
  --testimonial-meta: #8a93a6;
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.proof-testimonial {
  margin: 0;
}

.proof-testimonial__quote {
  margin: 0;
  padding: 0;
}

.proof-testimonial__quote p {
  margin: 0;
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--testimonial-ink);
}

.proof-testimonial--featured .proof-testimonial__quote p {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.3;
}

.proof-testimonial__mark {
  display: block;
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 0;
  color: var(--testimonial-accent);
  margin-bottom: 0.75rem;
}

.proof-testimonials__supporting {
  display: flex;
  flex-direction: column;
}

.proof-testimonials__supporting .proof-testimonial__quote p {
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.45;
}

.proof-testimonial__caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 1.5rem;
}

.proof-testimonial__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testimonial-slate);
}

.proof-testimonial__meta {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  font-style: normal;
  color: var(--testimonial-meta);
}

.proof-testimonials__divider {
  border: none;
  border-top: 1px solid var(--testimonial-divider);
  margin: 2rem 0;
}

.proof-findings .big {
  color: #f08a24;
  font-weight: 900;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

.proof-findings .big .unit {
  font-style: normal;
  color: #f08a24;
  font-weight: 900;
  -webkit-text-stroke: 1.5px #15203a;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #15203a;
}

.proof-findings .label {
  font-style: normal;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 700;
}

.proof-source {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Footer (carbon bar) ─── */
footer {
  background-color: var(--carbon);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1px
  );
  background-size: 4px 4px;
  color: var(--canvas-soft);
  padding: 48px 0 24px;
  border-top: 2px solid var(--chrome-indigo);
}

.footer-brand {
  display: inline-block;
  background: transparent;
  color: var(--on-primary);
  padding: 0;
  border: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: 0;
  line-height: 1;
  -webkit-text-stroke: 1px var(--chrome-indigo);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--carbon);
  margin-bottom: 1rem;
}

.footer-brand .em {
  color: var(--signal);
  font-style: normal;
  font-weight: 900;
  -webkit-text-stroke: 1px var(--carbon);
  text-shadow: 2px 2px 0 var(--chrome-indigo);
}

.footer-tag {
  color: var(--canvas-soft);
  font-size: 0.9375rem;
}

.footer-col h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--on-primary);
}

.footer-col a {
  color: var(--canvas-soft);
  font-size: 0.9375rem;
  font-weight: 700;
}

.footer-col a:hover {
  color: var(--amber);
}

.footer-bottom {
  border-top: 1px solid var(--muted-indigo);
  color: var(--canvas-soft);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
}

/* ─── Sources ─── */
.sources {
  background: var(--chrome-canvas);
  border-top: none;
}

.sources h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.sources h4::before {
  background: var(--signal);
}

.sources a {
  color: var(--ink-soft);
  font-weight: 700;
  border-bottom-color: rgba(61, 79, 151, 0.35);
}

.sources a:hover {
  color: var(--signal);
}

.sources li {
  font-size: 1rem;
  line-height: var(--line-body);
  color: var(--ink);
}

.sources li::before {
  color: var(--signal);
}

/* ─── Contact modal ─── */
.contact-modal {
  border-radius: var(--radius-md);
  background: var(--platinum);
  box-shadow: var(--bevel-plate);
  border: 2px solid var(--chrome-indigo);
}

.contact-modal::backdrop {
  background: rgba(33, 36, 46, 0.65);
}

.contact-modal-close {
  border-radius: var(--radius-xs);
}

.contact-modal h2 {
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
}

.contact-modal .signup button {
  background: var(--signal);
  color: var(--on-primary);
}

.contact-modal .signup button:hover {
  background: var(--nav-gold);
}

/* ─── Signup feedback ─── */
.signup-success .success-headline {
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
}

.signup-success .success-sub {
  color: var(--ink);
}

.signup-error {
  color: var(--error);
  border-top-color: var(--hairline);
}

@media (max-width: 960px) {
  .for-whom,
  .problems,
  .how,
  .cta-section,
  .proof,
  .quotes-carousel {
    padding: 40px 0;
  }
}

@media (max-width: 768px) {
  .proof-testimonials {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stat-card:nth-child(n + 2) {
    border-left: none;
  }

  nav,
  .nav-inner {
    height: 56px;
  }

  :root {
    --site-header-h: 3.5rem;
  }
}

@media (max-width: 980px) {
  .for-whom .for-whom-layout .mosaic-area-photo-c.mosaic-card img {
    object-position: center 10%;
  }
}

@media (max-width: 640px) {
  .for-whom .mosaic-card.text-card,
  .for-whom .for-whom-layout .mosaic-area-04.mosaic-card {
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .for-whom .mosaic-card.photo-card,
  .for-whom .for-whom-layout .mosaic-area-photo-c.mosaic-card {
    min-height: 240px;
    height: 240px;
  }
}

@media (max-width: 480px) {
  .hero-headline {
    font-size: 1.75rem;
  }
}

/* ─── Borderless sections (consistent flat layout) ─── */
nav,
.hero,
.for-whom,
.problems,
.stats-band,
.find-your-people,
.how,
.cta-section,
.proof,
.quotes-carousel,
.sources,
footer,
.footer-bottom,
.problem,
.step,
.find-your-people-pillar,
.proof-testimonials__divider,
.signup-error {
  border-top: none;
  border-bottom: none;
}

.stat-card:nth-child(n + 2) {
  border-left: none;
}

.stats-band-header .eyebrow,
.eyebrow,
.for-whom .mosaic-card.text-card,
.for-whom .mosaic-card.photo-card,
.for-whom .mosaic-num,
.cta-card,
.cta-card.pilot,
.contact-modal {
  border: none;
}

.perks li,
.perks li:last-child {
  border-top: none;
  border-bottom: none;
}

.sources a,
.sources a:hover {
  border-bottom: none;
}