/* ============================================================
   Token layer — the ONLY place raw values are allowed.
   Source: canonical-homepage-spec.md. Do not add values not in the spec.
   ============================================================ */

:root {
  /* ---- Color: "Classic" palette ---- */
  --ink:    #1a1a1a; /* all primary text */
  --bg:     #ffffff; /* page background */
  --bg-alt: #f5f5f4; /* alternating section background */
  --muted:  #6b6b70; /* subheads, captions, secondary text */
  --accent: #0a6cff; /* the ONE accent */

  /* ---- Type: default system stack ---- */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* ---- Type scale ---- */
  /* Display XL (hero head) */
  --text-display-xl:          clamp(2rem, 6vw, 4.5rem);
  --weight-display-xl:        600;
  --leading-display-xl:       1.05;
  --tracking-display-xl:      -0.02em;

  /* Display L (section head) */
  --text-display-l:           clamp(2rem, 4vw, 3rem);
  --weight-display-l:         600;
  --leading-display-l:        1.1;
  --tracking-display-l:       -0.015em;

  /* Lead (subhead/intro) — uses --muted */
  --text-lead:                clamp(1.125rem, 2vw, 1.5rem);
  --weight-lead:              400;
  --leading-lead:             1.4;
  --tracking-lead:            0;

  /* Body */
  --text-body:                1.0625rem;
  --weight-body:              400;
  --leading-body:             1.6;
  --tracking-body:            0;

  /* Caption / small, sentence case — uses --muted (all-caps labels removed 2026-07-19) */
  --text-caption:             0.875rem;
  --weight-caption:           500;
  --leading-caption:          1.4;
  --tracking-caption:         0;

  /* Stat number */
  --text-stat:                clamp(3rem, 8vw, 6rem);
  --weight-stat:              600;
  --leading-stat:             1;
  --tracking-stat:            -0.02em;

  /* ---- Spacing: 8px base scale ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;

  /* ---- Section padding (load-bearing — never reduce) ---- */
  --section-pad: clamp(5rem, 12vh, 10rem);

  /* ---- Motion (optional fade-up; spec: ~12px rise, ~500ms) ---- */
  --motion-rise: 12px;

  /* ---- Layout ---- */
  --container-max: 1120px; /* container cap */
  --text-max:      680px;  /* text-column cap — enforce everywhere */
  --card-feature:  320px;  /* strip: feature card width */
  --card-quote:    384px;  /* strip: quote card width */

  /* ---- Radii: exactly two ---- */
  --radius-pill:  999px; /* buttons */
  --radius-media: 18px;  /* media / cards */

  /* ---- Logo strip (spec: fixed height, width auto) ---- */
  --logo-height: 28px;

  /* ---- Component colors ---- */
  --accent-contrast: #ffffff; /* text on filled accent (per spec: white) */
  /* Button states — derived from --accent so every palette inherits correct values */
  --accent-hover:  color-mix(in srgb, var(--accent), #ffffff 12%);
  --accent-active: color-mix(in srgb, var(--accent), #000000 8%);
  --btn-transition: background-color 150ms ease;

  /* ---- Focus ring (quality floor) ---- */
  --focus-ring:        2px solid var(--accent);
  --focus-ring-offset: 2px;
}

/* ============================================================
   Base
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--ink);
  background: var(--bg);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Optional fade-up — OFF unless <body class="motion-fade">. The
   observer tags sections with .is-in; the effect only exists here,
   and only for users who allow motion. */
@media (prefers-reduced-motion: no-preference) {
  body.motion-fade main > section {
    opacity: 0;
    translate: 0 var(--motion-rise);
    transition: opacity 500ms ease, translate 500ms ease;
  }

  body.motion-fade main > section.is-in {
    opacity: 1;
    translate: 0 0;
  }
}

/* Section backgrounds — assigned at assembly, never via nth-child */
.s-bg  { background: var(--bg); }
.s-alt { background: var(--bg-alt); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* ============================================================
   Buttons — exactly two, forever
   ============================================================ */

.btn-primary {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: var(--btn-transition);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:active {
  background: var(--accent-active);
}

/* Compact sizing for the nav slot (same button, same style) */
.btn-compact {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
}

.link-secondary {
  color: var(--accent);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.link-secondary:hover {
  text-decoration: underline;
}

/* ============================================================
   Nav — slim, quiet, no shadow, no border. Sticky, solid --bg.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 10; /* structural, not a design value */
  padding-block: var(--space-2);
}

/* Nav reveal: the wordmark is always visible; links + CTA are hidden
   while the hero's primary CTA is on screen (class toggled by the
   sanctioned IntersectionObserver script) and fade in once it scrolls
   out. Visible by default so no-JS falls back to an always-on nav. */
.nav__right {
  transition: opacity 150ms ease, visibility 150ms;
}

.nav--hero-cta-in-view .nav__right {
  opacity: 0;
  visibility: hidden;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.nav__wordmark {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mobile: wordmark + CTA only — no hamburger, no menu JS */
.nav__links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  color: var(--ink);
  text-decoration: none;
}

.nav__link:hover {
  color: var(--accent);
}

/* ============================================================
   Hero — centered variant
   ============================================================ */

.hero {
  padding-block: var(--section-pad);
  text-align: center;
}

.hero__head {
  margin: 0 auto;
  max-width: var(--text-max);
  text-wrap: balance; /* avoid orphaned single words (definition of done) */
  font-size: var(--text-display-xl);
  font-weight: var(--weight-display-xl);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
}

.hero__lead {
  margin: var(--space-3) auto 0;
  max-width: var(--text-max);
  font-size: var(--text-lead);
  font-weight: var(--weight-lead);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
  color: var(--muted);
}

/* Mobile: actions stack vertically, primary first, centered */
.hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

.hero__media {
  margin-top: var(--space-6);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-media);
  overflow: hidden;
}

/* Neutral placeholder — CSS only, no external file */
.media-placeholder {
  display: grid;
  place-items: center;
  background: var(--bg-alt);
}

/* On alt sections the placeholder swaps to --bg so it stays visible
   (spec: the page must look intentional with zero real images) */
.s-alt .media-placeholder {
  background: var(--bg);
}

.media-placeholder::after {
  content: "";
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--muted);
  opacity: 0.25;
}

/* ============================================================
   Feature — media one side, text the other, alternating
   ============================================================ */

.feature {
  padding-block: var(--section-pad);
}

/* Mobile: text stacks above media */
.feature__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.feature__text {
  max-width: var(--text-max);
}

.feature__head {
  margin: 0;
  text-wrap: balance;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

.feature__body {
  margin: var(--space-3) 0 0;
  max-width: var(--text-max);
}

.feature__link {
  display: inline-block;
  margin-top: var(--space-3);
}

.feature__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-media);
  overflow: hidden;
}

/* Switchable variant (.feature--switch): chips swap which media shows.
   Chips are caption-size pills, not buttons — they never carry a CTA. */
.feature__toggles {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.feature__toggle {
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  transition: var(--btn-transition), color 150ms ease;
}

.feature__toggle[aria-pressed="true"] {
  color: var(--ink);
  background: var(--bg-alt);
}

/* Same swap logic as the media placeholder: keep the active fill visible
   on alt sections */
.s-alt .feature__toggle[aria-pressed="true"] {
  background: var(--bg);
}

.feature__media[hidden] {
  display: none;
}

/* ============================================================
   Strip — shared horizontal film-strip scroller.
   First card aligns with the container's left content edge; the row
   bleeds right and scrolls natively (hidden scrollbar, snap).
   ============================================================ */

.strip {
  padding-block: var(--section-pad);
}

.strip__row {
  --card: var(--card-feature);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(var(--card), 80vw);
  gap: var(--space-4);
  overflow-x: auto;
  padding-inline: max(var(--space-3), calc((100vw - var(--container-max)) / 2 + var(--space-3)));
  scroll-padding-inline: max(var(--space-3), calc((100vw - var(--container-max)) / 2 + var(--space-3)));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.strip__row::-webkit-scrollbar {
  display: none;
}

.strip__row > * {
  scroll-snap-align: start;
}

/* Feature strip card — no chrome, the media is the visual */
.strip-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-media);
  overflow: hidden;
}

.strip-card__head {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body);
  font-weight: 600;
}

.strip-card__text {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}

/* ============================================================
   Statement — one big centered line, a deliberate pause
   ============================================================ */

.statement {
  padding-block: var(--section-pad);
  text-align: center;
}

.statement__line {
  margin: 0 auto;
  max-width: var(--text-max);
  text-wrap: balance;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

/* ============================================================
   Stat row — 1–3 big numbers with short labels, centered
   ============================================================ */

.stats {
  padding-block: var(--section-pad);
  text-align: center;
}

/* Mobile: stats stack vertically */
.stats__row {
  display: grid;
  gap: var(--space-5);
}

.stat__number {
  margin: 0;
  font-size: var(--text-stat);
  font-weight: var(--weight-stat);
  line-height: var(--leading-stat);
  letter-spacing: var(--tracking-stat);
}

.stat__label {
  margin: var(--space-1) 0 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--muted);
}

/* ============================================================
   Logo strip — sentence-case muted caption + grayscale logos
   ============================================================ */

.logos {
  padding-block: var(--section-pad);
  text-align: center;
}

.logos__caption {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--muted);
}

.logos__row {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

/* Real founder logos (spec: fixed height, grayscale, dimmed) */
.logos__row img {
  height: var(--logo-height);
  width: auto;
  filter: grayscale(1);
  opacity: 0.55; /* spec value */
}

/* CSS-only placeholder marks, same treatment as media-placeholder */
.logo-placeholder {
  height: var(--logo-height);
  width: var(--space-7);
  border-radius: var(--radius-pill);
  background: var(--muted);
  opacity: 0.25;
}

.logo-placeholder--wide {
  width: var(--space-8);
}

/* ============================================================
   Testimonial — strip of quote cards (stars · quote · avatar + name)
   ============================================================ */

.testimonial {
  padding-block: var(--section-pad);
}

.testimonial .strip__row {
  --card: var(--card-quote);
}

/* Cards are the one sanctioned card surface: 18px radius, flat fill */
.quote-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-media);
  background: var(--bg-alt);
}

.s-alt .quote-card {
  background: var(--bg);
}

.quote-card__stars {
  display: inline-flex;
  color: var(--accent);
}

.quote-card__stars svg {
  width: var(--space-2);
  height: var(--space-2);
}

.quote-card__quote {
  margin: 0;
}

/* Attribution pins to the card bottom so cards in a row align */
.quote-card__attribution {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--muted);
}

/* Default avatar — CSS + inline SVG only, same neutral family as the
   other placeholders; founder photos replace it in the builder */
.quote-card__avatar {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bg);
  overflow: hidden;
  display: grid;
  place-items: end center;
  color: var(--muted);
}

.s-alt .quote-card__avatar {
  background: var(--bg-alt);
}

.quote-card__avatar svg {
  width: 65%;
  opacity: 0.55;
}

/* ============================================================
   Letter — a personal note from the founder, editorial column
   ============================================================ */

.letter {
  padding-block: var(--section-pad);
}

.letter__inner {
  max-width: var(--text-max);
  margin-inline: auto;
}

/* Left-aligned like a real letter, not a centered display head */
.letter__head {
  margin: 0;
  text-wrap: balance;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

.letter__body {
  margin: var(--space-3) 0 0;
}

.letter__signoff {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.letter__avatar {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  overflow: hidden;
  display: grid;
  place-items: end center;
  color: var(--muted);
}

.s-alt .letter__avatar {
  background: var(--bg);
}

.letter__avatar svg {
  width: 65%;
  opacity: 0.55;
}

.letter__name {
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--muted);
}

/* ============================================================
   FAQ — native details/summary, objection handling only
   ============================================================ */

.faq {
  padding-block: var(--section-pad);
}

.faq__head {
  margin: 0 auto var(--space-6);
  max-width: var(--text-max);
  text-align: center;
  text-wrap: balance;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

.faq__list {
  max-width: var(--text-max);
  margin-inline: auto;
}

.faq__item {
  padding-block: var(--space-3);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 600;
  list-style: none; /* hide default disclosure marker */
}

.faq__question::marker,
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  transition: transform 150ms ease;
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  margin: var(--space-2) 0 0;
}

/* ============================================================
   Pricing — 1–3 flat price cards, centered
   ============================================================ */

.pricing {
  padding-block: var(--section-pad);
}

.pricing__head {
  margin: 0 auto var(--space-6);
  max-width: var(--text-max);
  text-align: center;
  text-wrap: balance;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

/* Flex so any visible count (1–3) stays centered */
.pricing__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.price-card {
  /* Grow from zero so three cards share a row; min wraps them on
     mobile; max keeps one or two cards from ballooning */
  flex: 1 1 0;
  min-width: min(var(--card-feature), 100%);
  max-width: var(--card-quote);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-media);
  background: var(--bg-alt);
}

.s-alt .price-card {
  background: var(--bg);
}

.price-card[hidden] {
  display: none;
}

.price-card__name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
}

.price-card__price {
  margin: 0;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

.price-card__blurb {
  margin: 0;
  color: var(--muted);
}

.price-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-card__list li {
  margin-top: var(--space-1);
}

/* One CTA goal, same label — the button pins to the card bottom */
.price-card > .btn-primary {
  margin-top: var(--space-3);
}

/* ============================================================
   CTA band — the closer: head + ONE primary button
   ============================================================ */

.cta-band {
  padding-block: var(--section-pad);
  text-align: center;
}

.cta-band__head {
  margin: 0 auto;
  max-width: var(--text-max);
  text-wrap: balance;
  font-size: var(--text-display-l);
  font-weight: var(--weight-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
}

.cta-band__button {
  margin-top: var(--space-4);
}

/* ============================================================
   Footer — restrained; matches the CTA band's background
   ============================================================ */

.footer {
  padding-block: var(--space-6);
}

/* Mobile: stacked and centered */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer__wordmark {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

.footer__link {
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  color: var(--ink);
  text-decoration: none;
}

.footer__link:hover {
  color: var(--accent);
}

.footer__copyright {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* ============================================================
   Breakpoint: 768px (spec: mobile < 768px)
   ============================================================ */

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-5);
  }

  .nav__links {
    display: flex;
    gap: var(--space-4);
  }

  .hero__actions {
    flex-direction: row;
  }

  /* Feature splits into two columns; default is text left / media right.
     .feature--flip (assigned at assembly, like .s-bg/.s-alt) puts media left. */
  .feature__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  /* Stats sit side by side */
  .stats__row {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .feature--flip .feature__media,
  .feature--flip .feature__media-stack {
    order: -1;
  }

  /* Footer: wordmark left, links center, copyright right */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Strip inset tracks the desktop container padding */
  .strip__row {
    padding-inline: max(var(--space-5), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
    scroll-padding-inline: max(var(--space-5), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
  }
}