/* The landing page. 2026-09-17, the first real design pass it has had.
   Sits on style.css and uses its tokens. Self-hosted or system fonts only — no
   fonts.googleapis.com, which is a third party watching visitors on a site whose privacy
   page promises otherwise. The display face is a system serif stack, which every machine
   already has: editorial weight for nothing downloaded.

   Deliberately LIGHT. Measured in ops/research/landing-references.md: every competitor in
   this market runs a near-black ground with one hot accent and a photograph of a man
   staring down the lens. Going light is free separation and matches Raj's no-dark-mode call.

   Deliberately LONG. The same research found every page that converts a cold visitor to a
   RECURRING payment is longer than the minimal ones, and every minimal page in the sample
   sold a one-off to people who already knew the brand. We have neither. Short lines, long
   page. */

/* `--serif` USED TO BE OVERRIDDEN HERE with a system stack, for editorial weight with
   nothing downloaded. It is gone: style.css now self-hosts Playfair Display (38KB, latin,
   variable) and overriding it here would quietly undo the prestige-print pass on the one
   page a stranger actually sees. The no-third-party-fonts rule is unchanged and still met. */
:root {
  --rule-soft: #eceae4;
}

/* WIDER THAN THE APP. style.css sets 720px, which is a reading width for the trainer and
   leaves the landing page as a narrow ribbon in the middle of a desktop screen with dead
   space either side. The page gets room; the PROSE does not — every paragraph below still
   caps at its own max-width, because line length is what makes text readable, not the
   column it sits in. */
main { max-width: 1040px; padding-left: 32px; padding-right: 32px; }

/* The reading column for everything that is sentences. The hero and the comparison break
   out of it deliberately; nothing else does. */
/* CENTRED, not just capped. max-width alone left every prose section hugging the left edge
   of a 1040px main while the comparison used the full width — the page read as two
   different layouts stacked. margin-inline is what actually centres them. */
.loop, .demo, .plain-truth, .faq, .final, .price { max-width: 720px; margin-inline: auto; }
.lede { max-width: 720px; margin-inline: auto; }

/* --- hero ---------------------------------------------------------------- */

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.lede h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 18px;
  /* BALANCED LINES. The `<br>` splits the two sentences; this stops each one breaking in an
     ugly place inside itself — at 375px the first line was landing as "You know what you'd /
     do." with one orphaned word, which is exactly the "intentional breaks" design-brain.md
     asks for and we were not doing. Unsupported browsers simply wrap as before. */
  text-wrap: balance;
}
/* One italic accent line. The only ornament on the page, on the half that carries the
   whole proposition. */
.lede h1 em { font-style: italic; color: var(--accent); }

.lede .sub {
  font-size: 19px;
  line-height: 1.55;
  max-width: 58ch;
  margin-bottom: 26px;
}

/* THE PRIMARY CTA, SIZED. Until now this button was styled by nothing on this page — it fell
   through to the generic `button` rule in style.css, which is the TRAINER's utility button:
   16px text in a 44px box. 44px is the minimum size a control may be to be tappable at all,
   which is the wrong end of the scale for the main action on a sales page. Raj, 2026-09-17:
   "the call to action button should be big." */
.cta-big {
  font-size: 20px;
  padding: 20px 36px;
  min-height: 60px;
  border-radius: var(--radius);
}
/* Full width on a phone. A pill floating in the left of the column makes the thumb hunt. */
@media (max-width: 640px) {
  .cta-big { width: 100%; }
}

.trust { color: var(--muted); font-size: 14px; margin: 14px 0 0; max-width: 54ch; }
.trust strong { color: var(--ink); }

/* --- sections ------------------------------------------------------------ */

main > section { margin: 0 0 56px; }

main > section > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  max-width: 24ch;
}

/* --- the shift ----------------------------------------------------------- */

/* The CARDS break out to the full width; the HEADING does not. Letting both break out put
   this section's h2 128px left of every other heading on the page, which reads as a
   misalignment rather than a deliberate wide block. */
.shift > h2 { max-width: 720px; margin-inline: auto; }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shift-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--card);
}
/* The "now" column is the one that should be read second and remembered. One accent edge,
   not a colour wash. */
.shift-col-now { border-color: var(--accent); box-shadow: var(--shadow-brutal); }
.shift-col h3 {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.shift-col .plain { margin: 0; padding-left: 18px; }
.shift-col .plain li { margin: 0 0 8px; }
.shift-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.shift-col-now .shift-note { color: var(--ink); font-weight: 600; }

/* --- the loop ------------------------------------------------------------ */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  padding: 20px 0;
  border-top: 1px solid var(--rule-soft);
}
.steps li:last-child { border-bottom: 1px solid var(--rule-soft); }
.step-n {
  grid-row: 1 / span 2;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}
.steps h3 { font-size: 17px; margin: 0 0 4px; }
.steps p { margin: 0; color: var(--ink); max-width: 56ch; }

/* --- the sample exchange -------------------------------------------------- */
/* Show the product, do not describe it. The one place on the page that renders what the
   thing actually does. */


/* --- the honest block ----------------------------------------------------- */
/* Marked rather than tucked away: it is the section a buyer is most likely to be annoyed
   about not having read, and the research says it is the most persuasive thing here. */

/* A TOP RULE, NOT A LEFT ACCENT BAR. design-brain.md names
   "rounded-card-with-left-accent-border (the shadcn default)" as an anti-pattern to never
   ship, and this block wore one. The weight it needs is emphasis, not decoration, so it
   takes the same heavy top rule the final section uses — which also makes the two
   most-important blocks on the page read as a matched pair. */
.plain-truth { border-top: 2px solid var(--ink); }
.plain-truth h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 16px; }

/* --- faq ------------------------------------------------------------------ */

.faq details {
  border-top: 1px solid var(--rule-soft);
  padding: 4px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  padding: 16px 28px 16px 0;
  position: relative;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  font-weight: 400;
  font-size: 22px;
  color: var(--muted);
  transition: transform .15s ease;
}
.faq details[open] summary::after { content: "\00d7"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq details p { margin: 0 0 18px; color: var(--muted); max-width: 60ch; line-height: 1.6; }

/* --- final --------------------------------------------------------------- */

.final {
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}
.final h2 { font-family: var(--serif); font-weight: 400; margin-bottom: 18px; }

footer .fineprint { margin: 6px 0 0; font-size: 12px; }

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 640px) {
  .shift-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .lede .sub { font-size: 17px; }
  main > section { margin-bottom: 44px; }
  .steps li { grid-template-columns: 34px 1fr; gap: 4px 12px; }
  .step-n { font-size: 24px; }
  .shift-col { padding: 16px 14px; }
  .exchange { padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* --- the demo ------------------------------------------------------------- */
/* Replaced ".sample" 2026-09-18. Same idea, moved directly under the hero and given the
   cards, because an outside review of the live site was right that this was the strongest
   thing on the page and that it sat too far down to do any work.
   NOTHING HERE CALLS A MODEL. Every line is written, so it costs nothing to serve and
   cannot be abused by a visitor with a loop. */

.demo-lead { color: var(--muted); margin: 0 0 20px; max-width: 56ch; }

/* The spot. Reads as a hand history, not a card. */
.spot {
  border: 1px solid var(--line-hard);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--card);
}
.spot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 10px;
}
.spot-row:last-child { margin-bottom: 0; }
.spot-label {
  flex: 0 0 auto;
  min-width: 72px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.spot-action span:last-child { color: var(--ink); }

/* CARDS AS TILES. The suit GLYPH carries the meaning and the colour only reinforces it, so
   the board still reads for anyone who cannot separate the red from the black. */
.cards { display: flex; gap: 5px; flex-wrap: wrap; }
.cards .c {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  padding: 7px 8px;
  border: 1px solid var(--line-hard);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.cards .c i { font-style: normal; }
.cards .c i.red { color: #b3261e; }

/* The exchange. */
.chat { list-style: none; margin: 0; padding: 0; }
.turn { margin: 0 0 14px; }
.turn:last-child { margin-bottom: 0; }
.turn p { margin: 0; line-height: 1.5; }
.who {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.turn-coach p {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.demo-actions { margin-top: 18px; }
/* Full width on a phone, like the primary. A half-width button beside nothing looks broken. */
@media (max-width: 640px) {
  .demo-actions .secondary { width: 100%; }
}

.demo-punch {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.35;
  max-width: 34ch;
}

.hero-hint { margin-top: 12px; }

/* --- the shift ------------------------------------------------------------ */
.shift-q {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px;
}
.shift-col-now .shift-q em { font-style: italic; color: var(--accent); }

/* --- price ---------------------------------------------------------------- */
/* ITS OWN SECTION as of 2026-09-18. The button used to sit in the hero, which asked for a
   subscription before the visitor had seen the coach do anything. */
/* The one object on the page that asks for money, so it is the one that gets the full
   brutalist treatment: hard edge, solid offset, no blur. It should read as a thing sitting
   on the page rather than a tinted region of it. */
.price-card {
  border: 1px solid var(--line-hard);
  border-radius: var(--radius);
  box-shadow: var(--shadow-brutal);
  padding: 28px 24px;
  background: var(--card);
  text-align: center;
}
.price-amount {
  /* $29 is a SUM, not a headline. Mono, like every other number. */
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 9vw, 54px);
  line-height: 1;
  margin: 0 0 10px;
}
.price-per { font-size: 18px; color: var(--muted); }
.price-terms {
  color: var(--muted);
  margin: 0 auto 22px;
  max-width: 44ch;
  font-size: 15px;
}
.price-card .actions { justify-content: center; }

/* THE HERO CTA IS A LINK, NOT A BUTTON, because it goes to the demo rather than starting a
   checkout. `.primary` alone styles nothing on an <a> — only `button.primary` and
   `.primary-link` are defined — so the first version of this shipped as a plain underlined
   text link, which is the opposite of the one dominant action the page is supposed to have.
   Caught by looking at it. */
.cta-hero {
  background: var(--accent);
  justify-content: center;
}
@media (max-width: 640px) {
  .cta-hero { width: 100%; }
}

/* --- what qa.js found on the LIVE site, 2026-09-18 ------------------------ */

/* THE FOOTER LINK WAS 133x17px. A mailto is the one link on this page a visitor presses when
   something is wrong, and it was less than half the minimum tappable height. Inline-block plus
   vertical padding gives it a real target without moving the text. */
footer a {
  display: inline-block;
  min-height: 44px;
  padding-block: 13px;
}

/* TYPE FLOOR. Ten elements sat under 14px at every width. The uppercase tracked micro-labels
   are a deliberate device and they stay small, but 11px is below what anyone should have to
   read on a phone, and the footer fineprint at 12px is body copy pretending to be a label.
   Nothing here changes the hierarchy; it lifts the bottom of it. */
.kicker { font-size: 14px; }
.spot-label, .who { font-size: 12px; }
footer .fineprint { font-size: 14px; }

/* A HEADING WAS 12px. `.shift-col h3` is "Training you've already tried" and "What happens
   here" — the two labels the whole comparison hangs on, set smaller than the footer. That is
   not a micro-label, it is a heading, and it reads as one now.
   The footer's prose came from style.css at 13px, which is the TRAINER's footer; on a sales
   page it is the last thing a visitor reads before deciding. */
.shift-col h3 { font-size: 16px; }
footer p { font-size: 14px; }

/* WHAT STAYS SMALL, ON PURPOSE. `.spot-label` and `.who` are uppercase and letter-spaced, and
   qa.js will keep flagging them against a flat 14px rule. They are not prose: they are the
   "YOU HOLD" / "BOARD" / "COACH" tags that let the eye skip to the content beside them, and at
   14px they stop being tags and start competing with the sentences they label. 12px with
   tracking is the convention, and raising them would flatten the hierarchy rather than improve
   it. Recorded so the next run of qa.js does not read as an unfixed defect. */