/* LDS landing page — tokens + fluid scale from BUILD-SPEC.md (board 22:432, checkpoints 360/768/1440) */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --black: #000000;
  --blue: #0000ff;
  --acid: #ccff00;
  --mint: #bafae4;
  --ink-blue: #ceffff;
  --ink-body: #2c2828;
  --reveal-title: #ccffff;
  --reveal-tagline: #ccffa8;
  --primer-ink: #cdeffc;
  --results-bg: #f3f3f3;

  /* fluid segments: 360→768; the ≥768 media query swaps to the 768→1440 slope,
     uncapped above 1440 so the page keeps its proportions on large screens */
  --fs-h1: max(40px, calc(18.82px + 5.8824vw));
  --fs-sub: max(20px, calc(16.47px + 0.9804vw));
  --fs-wordmark: max(48px, calc(5.65px + 11.7647vw));
  --fs-how-title: max(32px, calc(17.88px + 3.9216vw));
  --fs-wyg: max(32px, calc(24.94px + 1.9608vw));
  --fs-quote: max(16px, calc(12.47px + 0.9804vw));
  --fs-primer: max(32px, calc(24.94px + 1.9608vw));
  --fs-modal: max(20px, calc(16.47px + 0.9804vw));   /* 20 → 24 */
  --fs-label: 12px;
  --fs-btn: 14px;
  --fs-phase: 20px;
  --fs-body: 14px;
  --fs-week: 14px;
  --fs-fine: max(12px, calc(10.24px + 0.4902vw));
  --pad-section: max(48px, calc(26.82px + 5.8824vw));
  --pad-primer: max(32px, calc(17.88px + 3.9216vw));
  --gutter: max(24px, calc(16.94px + 1.9608vw));
  --logo-h: max(28px, calc(9.33px + 5.185vw));
}

@media (min-width: 768px) {
  :root {
    --fs-h1: calc(-9.14px + 9.5238vw);
    --fs-sub: calc(5.71px + 2.381vw);
    --fs-wordmark: calc(22.86px + 9.5238vw);
    --fs-how-title: calc(-6.86px + 7.1429vw);
    --fs-wyg: calc(-3.43px + 5.6548vw);
    --fs-quote: calc(6.29px + 1.7857vw);
    --fs-primer: calc(12.57px + 3.5714vw);
    --fs-modal: calc(14.86px + 1.1905vw);            /* 24 → 32 */
    --fs-label: calc(10.29px + 0.2381vw);            /* 12 → 14 */
    --fs-btn: calc(11.71px + 0.2976vw);
    --fs-phase: calc(15.43px + 0.5952vw);
    --fs-body: calc(9.43px + 0.5952vw);   /* 14 @768 → 18 @1440 (JP board adjustment) */
    --fs-week: calc(4.86px + 1.1905vw);   /* 14 @768 → 22 @1440 (JP board adjustment) */
    --fs-fine: 14px;
    --pad-section: calc(17.14px + 7.1429vw);
    --pad-primer: calc(11.43px + 4.7619vw);
    --gutter: calc(13.71px + 2.381vw);
  }
}

/* ≥1440: pure-vw tier — the page scales as an exact proportion of the 1440 board,
   so type/column ratios (and therefore line breaks) never drift on large screens */
@media (min-width: 1440px) {
  :root {
    --fs-h1: 8.8889vw;        /* 128 @1440 */
    --fs-sub: 2.7778vw;       /* 40 */
    --fs-wordmark: 11.1111vw; /* 160 */
    --fs-how-title: 6.6667vw; /* 96 */
    --fs-wyg: 5.4167vw;       /* 78 */
    --fs-quote: 2.2222vw;     /* 32 */
    --fs-primer: 4.4444vw;    /* 64 */
    --fs-modal: 2.2222vw;     /* 32 */
    --fs-label: 0.9722vw;     /* 14 */
    --fs-btn: 1.1111vw;       /* 16 */
    --fs-phase: 1.6667vw;     /* 24 */
    --fs-body: 1.25vw;        /* 18 */
    --fs-week: 1.5278vw;      /* 22 */
    --fs-fine: 0.9722vw;      /* 14 */
    --pad-section: 8.3333vw;  /* 120 */
    --pad-primer: 5.5556vw;   /* 80 */
    --gutter: 3.3333vw;       /* 48 */
    --logo-h: 5.8333vw;       /* 84 */
  }
  .hero .note { font-size: 1.1111vw; max-width: 34.58vw; }
  .quote-block .attribution { font-size: 1.1111vw; }
  .quote-btn { width: 3.8889vw; height: 3.8889vw; }
  .quote-btn svg { width: 1.6667vw; height: 1.6667vw; }
  .quote-count { font-size: 1.1111vw; }
}

/* base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  background: var(--black);
  color: #fff;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; }
img { max-width: 100%; display: block; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* display type + highlight bars */

.display {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.bar {
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 100% 0.94em;
  background-position: 50% 47%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  position: relative;
  z-index: -1;
  padding: 0 0.06em;
  margin: 0 -0.06em;
}
.hero, .closing { isolation: isolate; }
.hero .wrap, .closing .wrap { isolation: isolate; }

/* buttons */

.btn {
  display: inline-block;
  padding: 21px 27px;
  font-size: var(--fs-btn);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.btn-solid {
  background: var(--acid);
  color: var(--black);
  letter-spacing: 0.06em;
}
.btn-solid:hover, .btn-solid:focus-visible {
  background: var(--black);
  color: var(--acid);
  box-shadow: inset 0 0 0 2px var(--acid);
}
.btn-outline {
  background: transparent;
  color: var(--primer-ink);
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 2px var(--primer-ink);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--primer-ink);
  color: var(--black);
}
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 01 hero */

.hero {
  position: relative;
  background: var(--black);
}
.frost-mark {
  position: absolute;
  top: 48px;
  left: var(--gutter);
  width: 48px;
  height: 48px;
  color: #fff;
  opacity: 0.9;
}
.hero h1 {
  font-size: var(--fs-h1);
  color: #fff;
  /* the frost mark sits absolutely at 48px/48px tall; nudge the H1 until section padding clears it */
  margin-top: max(0px, calc(112px - var(--pad-section)));
}
.hero .sub {
  font-size: var(--fs-sub);
  line-height: 1.2;
  max-width: 32ch;
  margin-top: calc(var(--pad-section) / 3);
}
.hero .sub strong { font-weight: 700; }
.cta-row {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: calc(var(--pad-section) / 2.5);
  flex-wrap: wrap;
}
.hero .note {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
  max-width: 498px;
}

/* 02 the problem */

.problem {
  background: var(--acid);
  color: var(--blue);
  padding-top: max(48px, calc(26.82px + 1.9608vw));
  padding-bottom: max(48px, calc(26.82px + 1.9608vw));
  /* full browser height by default, grows if the text needs more; content vertically centered */
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.problem .wrap { width: 100%; }
.problem p {
  max-width: 55ch;
  font-size: var(--fs-sub);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.problem p + p { margin-top: 1.3em; }
.problem .punch { font-weight: 700; }

/* 03 live design session — the reveal */

.reveal {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding-bottom: var(--gutter);
}
.reveal-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.reveal .wrap { position: relative; }
.reveal-wordmark {
  font-size: var(--fs-wordmark);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.015em;
  color: var(--reveal-title);
}
.reveal-tagline {
  font-size: var(--fs-wordmark);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--reveal-tagline);
  margin-top: max(32px, 4.44vw);
}

/* results — section is out of the DOM until JP's session video lands (snippet in the index.html comment) */

.results {
  background: var(--results-bg);
  aspect-ratio: 2 / 1;
}
.results video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 04 how it works */

.how {
  background: #fff;
  color: var(--ink-body);
}
.how-title { font-size: var(--fs-how-title); color: var(--blue); }
.phases {
  list-style: none;
  margin: max(32px, 5vw) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 300fr 572fr 300fr;
  gap: max(24px, 5.97vw);
}
.phase h3 {
  font-size: var(--fs-phase);
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}
.phase .content {
  position: relative;
  padding-top: 20px; /* 4px rule + 16 */
  margin-top: max(24px, 3.33vw);
}
/* the 4px rule is a pseudo-element so JS can draw it in left→right (--draw 0→1); static builds get 1 */
.phase .content::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--blue);
  transform: scaleX(var(--draw, 1));
  transform-origin: left center;
}
.phase .week {
  font-size: var(--fs-week);
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}
.phase .body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  margin-top: 10px;
}
.phase .body strong { font-weight: 700; }
.phase .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.phase .cols .body { margin-top: 10px; }
.how .fine {
  font-size: var(--fs-fine);
  line-height: 1.4;
  margin-top: max(32px, 5vw);
}
.how .fine strong { font-weight: 700; }

/* 05 what you get */

.wyg {
  background: var(--blue);
  color: var(--ink-blue);
}
.wyg-intro {
  font-size: var(--fs-wyg);
  font-weight: 600;
  line-height: 1.1;
}
.wyg-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.wyg-list li {
  font-size: var(--fs-wyg);
  font-weight: 600;
  line-height: 1.15;
  margin-top: 8px;
}
.js .wyg-list li { opacity: 0.3; transition: opacity var(--wyg-fade, 0.35s) cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .wyg-list li.lit { opacity: 1; }
.wyg .btn { margin-top: var(--gutter); } /* CTA after the deliverables (JP, web addition) — 48px @1440 on the gutter ladder (48/32/24) */

/* 06 testimonial + clients — one blue surface, paired padding */

.quote-block {
  background: var(--blue);
  color: var(--ink-blue);
  padding-bottom: var(--gutter);
}
.quote-block blockquote { margin: 0; }
.quote-block blockquote p {
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.3;
  max-width: 62%;
}
.quote-block .attribution {
  font-size: 16px;
  line-height: 1.45;
  margin-top: 24px;
}
.quote-block cite { font-style: normal; }
/* testimonial switcher — one quote at a time with JS; stacked, no controls, without */
.quote-track { list-style: none; margin: 0; padding: 0; position: relative; }
.quote-slide + .quote-slide { margin-top: var(--pad-section); }
.js .quote-slide + .quote-slide { margin-top: 0; }
.js .quote-slide:not(.is-active) { display: none; }
.quote-nav { display: none; }
.js .quote-nav { display: flex; align-items: center; gap: 16px; margin-top: var(--gutter); }
.quote-btn {
  width: 56px; height: 56px; padding: 0; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-blue);
  box-shadow: inset 0 0 0 2px var(--ink-blue);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.quote-btn:hover, .quote-btn:focus-visible { background: var(--ink-blue); color: var(--blue); }
.quote-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.quote-btn svg { width: 24px; height: 24px; display: block; }
.quote-count { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }

.logos {
  background: var(--blue);
  padding-top: var(--gutter);
}
.logo-row { height: var(--logo-h); width: auto; max-width: 100%; object-fit: contain; object-position: left; }

/* 07 primer */

.primer {
  background: var(--black);
  padding-top: var(--pad-primer);
  padding-bottom: var(--pad-primer);
}
.primer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.primer-title {
  font-size: var(--fs-primer);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

/* 07b primer request — the modal behind "Get the primer".

   Two renderings from one copy of the markup:
   - html.dialog  (JS + <dialog> support): a real modal, opened with showModal().
   - otherwise:    an ordinary section in the page flow, so the form is reachable
                   and submittable with JS off. The `dialog` class is set in <head>
                   before first paint, so neither state flashes into the other.     */

html:not(.dialog) .primer-dialog {
  display: block;
  position: static;
  width: auto; max-width: none; max-height: none;
  margin: 0;
  padding: 0 var(--gutter) var(--pad-primer);
  border: 0;
  background: var(--black);
  color: #fff;
  overflow: visible;
}
html:not(.dialog) .primer-panel { max-width: 560px; padding: 0; box-shadow: none; }
html:not(.dialog) .primer-close { display: none; }

.primer-dialog::backdrop { background: rgba(0, 0, 0, 0.93); }
.primer-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  max-width: none;
  max-height: none;
  overflow: visible;
}
html.dialog .primer-dialog[open] {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.dialog .primer-panel { margin: auto; }
.primer-panel {
  position: relative;
  width: min(100%, 560px);
  padding: var(--gutter);
  background: var(--black);
  box-shadow: inset 0 0 0 2px var(--primer-ink);
}
.primer-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px; padding: 0; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--primer-ink);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.primer-close:hover, .primer-close:focus-visible { background: var(--primer-ink); color: var(--black); }
.primer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.primer-close svg { width: 20px; height: 20px; display: block; }

.primer-form-title {
  font-size: var(--fs-modal);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
}
.primer-form-title:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.primer-form-note {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--primer-ink);
  max-width: 46ch;
}

.field { margin-top: 20px; }
.field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primer-ink);
}
.field .opt { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.65; }
.field input, .field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px; /* never below 16 — smaller text makes iOS zoom the page on focus */
  line-height: 1.3;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(205, 239, 252, 0.35);
  transition: box-shadow 0.12s ease;
}
.field textarea { resize: vertical; min-height: 72px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.field input:focus, .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primer-ink);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* invalid state is monochrome on purpose — the palette has no error colour, and the
   message below the field carries the meaning rather than the colour alone */
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #fff; }
.field-error {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.field-error::before { content: "— "; }

.primer-form .btn, .primer-done .btn { margin-top: 32px; cursor: pointer; border: 0; font-family: inherit; }
.primer-form .btn[disabled] { opacity: 0.55; cursor: default; }
.primer-privacy {
  margin-top: 16px;
  font-size: var(--fs-fine);
  line-height: 1.45;
  color: rgba(205, 239, 252, 0.7);
  max-width: 46ch;
}
.primer-done-email { font-weight: 700; color: #fff; }
/* shown only if PRIMER_FORM_URL was never swapped for the real endpoint */
.primer-misconfig {
  margin-top: 16px;
  padding: 12px 16px;
  font-size: var(--fs-fine);
  font-weight: 700;
  color: var(--black);
  background: var(--acid);
}


@media (max-width: 767px) {
  .primer-panel { padding: 32px 20px; }
  .primer-close { top: 4px; right: 4px; }
}

@media (min-width: 1440px) {
  .primer-panel { width: 38.8889vw; }
}

/* 08 closing */

.closing {
  background: var(--black);
  padding-top: 0;
}
.closing-line { font-size: var(--fs-h1); color: #fff; }
.closing .btn { margin-top: max(32px, 5vw); }

/* 09 footer */

.footer {
  background: var(--black);
  color: #fff;
  padding-top: max(32px, 4.72vw);
  padding-bottom: 0;
  overflow: hidden; /* masks the wordmark's lift-in */
}
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 133;
}

/* responsive stacking */

@media (max-width: 767px) {
  .cta-row { align-items: flex-start; flex-direction: column; gap: 24px; }
  .phases { grid-template-columns: 1fr; }
  .phase .cols { grid-template-columns: 1fr; }
  .quote-block blockquote p { max-width: 100%; }
  .primer-row { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* motion: word-rise pieces (main.js). Static/no-JS pages never hide content. */

.w { display: inline-block; }
.js .pre { opacity: 0; } /* rise() removes it right before animating in */

@media (prefers-reduced-motion: reduce) {
  .js .wyg-list li { opacity: 1; transition: none; }
  .btn, .quote-btn { transition: none; }
}