/* Page layer for the landing page. The design system in styles.css stays
   untouched — everything here is layout/responsive glue plus the corrections
   in the accessibility block below. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page { max-width: 1120px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   Accessibility overrides on the vendored design system

   styles.css is imported verbatim from the design project and the README
   treats it as vendored, so these corrections live here rather than being
   edited into it. Push them upstream if that system is ever re-exported.

   Ratios are measured against --color-bg #f2f2f3 with #1d1f20 ink. WCAG 2.2
   AA needs 4.5:1 for text under 18.66px bold / 24px regular, and 3:1 for
   the boundaries of interactive controls (1.4.11).
   ══════════════════════════════════════════════════════════════════════ */

/* --color-accent #5980a6 measures 3.71:1 on the page background: it fails as
   link text and it fails as the primary button's fill. --color-accent-700
   #416180 is the same hue two steps down and measures 5.78:1. */
a { color: var(--color-accent-700); }

.btn-primary {
  background: var(--color-accent-700);   /* was --color-accent  */
  border-color: var(--color-accent-700);
  color: #fff;                           /* 6.47:1, was --color-bg at 3.71:1 */
}
.btn-primary:hover  { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); border-color: var(--color-accent-900); }

/* The system's `.nav a { color: inherit }` (0,1,1) outranks `.btn-primary`
   (0,1,0), and `.nav a:hover` (0,2,1) outranks it again — so inside the
   header the CTA loses its white label and lands near-black on dark blue at
   2.56:1. The previous version papered over this with an inline style
   attribute; these selectors win on specificity instead. */
.site-nav .btn-primary,
.site-nav .btn-primary:hover,
.site-nav .btn-primary:focus-visible { color: #fff; }

/* 55% ink measures 3.64:1; 70% measures 5.81:1. .text-muted carries the
   footer and several section ledes, so it is body copy, not decoration. */
.text-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.card-meta  { color: color-mix(in srgb, var(--color-text) 70%, transparent); }  /* was 50% / 3.16:1 */
.card-kicker { color: var(--color-accent-700); }

/* Control boundaries need 3:1 against their own fill (--color-surface), not
   against the page. The system's 16% divider measures 1.37:1 there. */
.input { border-color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* The focus ring inherits the same too-light accent. */
:focus-visible { outline-color: var(--color-accent-700); }

/* Registration marks are decoration; they sit at 55% ink and are exempt from
   text contrast, but they must not be announced. They carry aria-hidden in
   the markup. */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent-700); color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Tap targets. Measured at 375px, every interactive element on the previous
   version came in under 44px — nav links at 22px, contact links at 19px. */
.nav-links a,
.contact-details a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.btn-lg { min-height: 48px; }
.nav-cta { min-height: 44px; }
.contact-form .input { min-height: 44px; }
.contact-form textarea.input { min-height: 110px; }

/* ══════════════════════════════════════════════════════════════════════════
   Layout
   ══════════════════════════════════════════════════════════════════════ */

/* Section rhythm — the design pads every band with --space-8; on narrow
   viewports that comes down so copy isn't squeezed into a gutter. */
.band { padding: var(--space-8); }
.band + .band { border-top: 1px solid var(--color-divider); }
.band > h2 { margin-bottom: var(--space-4); }

.section-lede {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-bottom: var(--space-8); max-width: 56ch; text-wrap: pretty;
}
.grid-how .section-lede { margin-bottom: 0; }

/* Auto-fit grids. minmax(min(<n>px, 100%), 1fr) so a track never demands
   more width than the container has — the plain minmax(<n>px, 1fr) form
   overflows below <n>px. */
/* Exactly four subject cards, so this one is stepped rather than auto-fit:
   any auto-fit minimum leaves a band of viewport widths that fits three and
   orphans the fourth on its own row. Explicit 4 / 2 / 1 never does. */
.grid-subject { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (min-width: 1040px) { .grid-subject { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .grid-subject { grid-template-columns: 1fr; } }
.grid-how     { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-8); }
.grid-steps   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-8); }
.grid-quotes  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-6); }
.grid-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--space-8); align-items: start; }
.grid-faq     { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-8); }

.grid-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: var(--space-8); align-items: start; }

/* Spec-sheet stat row — a <dl>, so the labels are description terms rather
   than headings interrupting the h1 → h2 outline. */
.stats {
  display: grid;
  /* Four cells, stepped for the same reason as .grid-subject: auto-fit leaves
     a band of widths that fits three and orphans the fourth.

     The dividing rules are drawn by a 1px grid gap showing the container
     colour through, rather than a border on each cell. That self-corrects at
     every column count — no per-breakpoint :nth-child bookkeeping to decide
     which cell is last in its row, and no stray rule left hanging at the
     right edge when the row wraps. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin: 0;
}
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .stats { grid-template-columns: 1fr; } }
.stats > div { padding: var(--space-6) var(--space-8); background: var(--color-bg); }
.stat-label {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: 1.12; letter-spacing: -0.015em;
  margin-bottom: var(--space-2); min-height: 44px;
}
.stats dd {
  margin: 0; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Header */
.nav.site-nav {
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-4) var(--space-8);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.nav.site-nav .nav-brand { font-size: 22px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.nav-cta { white-space: nowrap; flex: none; }

/* Hero */
.hero { padding: calc(var(--space-8) * 2) var(--space-8) var(--space-8); }
.hero-body { max-width: 64ch; }
.eyebrow {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-6);
}
.hero h1 { font-size: clamp(34px, 5.6vw, 56px); margin-bottom: var(--space-6); text-wrap: balance; }
.hero-lede { font-size: 18px; max-width: 52ch; margin-bottom: var(--space-8); color: var(--color-neutral-800); text-wrap: pretty; }
.hero-actions { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: 15px; white-space: nowrap; flex: none; }
.hero-proof {
  margin-top: var(--space-6); margin-bottom: 0;
  font-size: 13px; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Hero photo */
.hero-photo { margin: 0; }
.hero-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}

/* Subject cards */
.subject-card { padding: var(--space-6); }
.subject-card .card-kicker { margin: 0; }
.subject-card .card-title { margin: 0; }

/* Steps — used by both "How it works" and "What sessions feel like" */
.step { border-top: 2px solid var(--color-accent-700); padding-top: var(--space-4); }
.step-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: var(--space-2);
}
.step h3 { font-size: 20px; margin-bottom: var(--space-2); }
.step p, .faq p { font-size: 14px; color: var(--color-neutral-800); }
.step p:last-child, .faq p:last-child { margin-bottom: 0; }

/* Testimonials — styles kept for the commented block in index.html */
.quote { margin: 0; border-left: 2px solid var(--color-accent-700); padding-left: var(--space-6); }
.quote p { font-size: 16px; color: var(--color-neutral-800); }

/* Contact */
.contact-lede { color: var(--color-neutral-800); max-width: 44ch; margin-bottom: var(--space-8); }
.contact-details { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.contact-details dt {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.contact-details dd { margin: 0; font-size: 16px; }

.contact-panel { padding: var(--space-8); gap: var(--space-3); }
.contact-panel h3 { margin: 0; font-size: 20px; }
.contact-panel p { margin: 0; font-size: 14px; color: var(--color-neutral-800); }

.contact-form { padding: var(--space-8); gap: var(--space-4); }
.form-heading { margin: 0 0 var(--space-2); font-size: 20px; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 420px) { .name-row { grid-template-columns: 1fr; } }
.field-opt { font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-consent {
  font-size: 12px; margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* Honeypot: off-screen rather than display:none — some bots skip hidden
   fields, and screen readers skip it via aria-hidden on the wrapper. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* FAQ */
.faq h3 { font-size: 20px; margin-bottom: var(--space-2); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-6) var(--space-8);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.site-footer p {
  margin: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .band, .hero, .nav.site-nav, .site-footer { padding-inline: var(--space-6); }
  .hero { padding-top: var(--space-8); }
  .stats > div { padding-inline: var(--space-6); }
  .stat-label { min-height: 0; }
  .contact-form, .contact-panel { padding: var(--space-6); }
  .hero-actions { gap: var(--space-4); }
  .hero-actions .btn-lg { flex: 1 1 100%; }
}