/* ==========================================================================
   Umka conversion-focused marketing site.
   Phase 40: the Claude Design website system merged onto the Phase 39
   conversion spine. Purpose-built native CSS, no framework, no remote asset,
   no remote font, no build step.

   Elevation rule: flat only. Surfaces separate by lightness and hairlines.
   There is no box-shadow, no blur and no glass anywhere in this file.

   Theme rule: one automatic system theme. Every colour in every component is
   a token. The only colour-scheme branch in this file is the single
   prefers-color-scheme block in section 3, and it redefines tokens only.

   Type rule: display (Newsreader) makes the argument, body carries every
   explanation, rounded appears only where the product is touched or speaks,
   which on this page means buttons, fact labels, the routine numerals, the
   parent-control rows and the short recovery lines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Local display face
   Self-hosted from the repository source, App/Resources/Fonts. The variable
   TTF is shipped byte-for-byte with its OFL licence beside it. No WOFF2
   compressor is available offline here, so the unmodified TTF is used and
   font-display: swap keeps first paint immediate on the fallback serif.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("assets/marketing/fonts/Newsreader-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens, light
   Supplied values carry the supplied names. Every token that the dark block
   redefines is declared here too, so the two layers stay name-for-name.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* grounds, supplied */
  --paper: #FBF7F0;
  --card: #FFFFFF;
  --sand: #F3EFE7;
  /* derived light-only role: one warm step below sand, for ruled sand edges */
  --sand-deep: #EDE7DB;

  /* action, supplied */
  --action: #5A3A61;
  --action-press: #4C3152;
  --on-action: #FBF7F0;

  /* calm family, supplied where given */
  --calm: #EBE2ED;
  --calm-tint: #F4F0F5;
  --calm-ink: #54405A;
  /* derived light-only roles: the marker fill sits between calm and calm-ink,
     the rail is the hairline that reads on a calm ground */
  --calm-node: #8B6C93;
  --calm-rail: #DCCFE0;

  /* amber, supplied ink; the rest derived as light-only roles.
     Amber marks completion and the hero eyebrow. It is never an action. */
  --amber-ink: #8A6A2E;
  --amber: #C08F42;
  --amber-tint: #F7EFE0;
  --amber-badge: #F2E6D2;

  /* hero band, declared for parity with the dark block. The website hero
     sits on paper, so these are not painted on this page. */
  --hero-1: #FCF5E9;
  --hero-2: #FBF7F0;

  /* ink, supplied */
  --ink: #211D18;
  --ink-70: #4A423A;
  --ink-55: #6E6459;
  /* ink-40 and ink-25 are declared for parity with the dark block. They do
     not clear AA on paper, so no text on this page uses them. */
  --ink-40: #9A9086;
  --ink-25: #C4BBB0;

  /* lines, supplied hairlines mapped onto the dark block's role names */
  --line-card: rgba(59, 44, 26, 0.09);
  --line-divider: rgba(59, 44, 26, 0.07);
  --line-field: rgba(59, 44, 26, 0.14);
  --line-rail: rgba(59, 44, 26, 0.14);
  --line-dashed: #CFC3AF;

  /* states. alert, track and the disabled pair are declared for parity with
     the dark block; this page has no error, progress or disabled control. */
  --alert: #B4543A;
  --track: #E6DFD2;
  --disabled-fill: #EDE7DC;
  --disabled-text: #8E877D;
  --focus-ring: rgba(90, 58, 97, 0.10);

  /* type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* shape */
  --r-btn: 16px;
  --r-card: 18px;
  --r-panel: 20px;
  --r-chip: 17px;

  /* shell: 22 / 40 / 56 / 64 page padding tiers, content capped at 1200 */
  --gutter: 22px;
  --shell: 100%;

  /* rhythm */
  --section-y: 54px;
  --col-gap: 40px;
  --head-gap: 14px;
  --action-gap: 24px;
  --step-gap: 52px;
  --marker: 26px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --shell: 768px;
    --section-y: 72px;
    --marker: 30px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 56px;
    --shell: 1212px;
    --section-y: 88px;
    --col-gap: 64px;
    --head-gap: 19px;
    --action-gap: 31px;
    --step-gap: 72px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 64px;
    --shell: 1328px;
    --section-y: 90px;
    --col-gap: 70px;
  }
}

/* --------------------------------------------------------------------------
   3. Tokens, dark
   Owner-supplied block, inserted verbatim. This is the only colour-scheme
   branch in the stylesheet and it redefines variables only. No component
   below this point queries the colour scheme.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark){
  :root{
    /* grounds — lift by lightness, never by shadow */
    --paper:#1A1714;
    --card:#242019;
    --sand:#2C2721;
    --sand-deep:#332B20;

    /* action — plum lightens; #5A3A61 fails contrast on any dark ground */
    --action:#B99BC0;
    --action-press:#A886B0;
    --on-action:#1A1714;      /* flips from cream to the ground */

    /* calm family */
    --calm:#2E2632;
    --calm-tint:#272130;
    --calm-ink:#D6C4DA;
    --calm-node:#9C7FA4;
    --calm-rail:#3C3342;

    /* amber — tints darken, ink lightens */
    --amber:#E0A253;
    --amber-tint:#33291A;
    --amber-badge:#3D3020;
    --amber-ink:#E8C489;

    /* hero band (welcome only) */
    --hero-1:#2E2519;  --hero-2:#26211A;

    /* ink — stops short of white to avoid OLED halation */
    --ink:#F2EDE4;
    --ink-70:#D8D1C5;
    --ink-55:#B0A899;
    --ink-40:#948D80;
    --ink-25:#6E685E;

    /* lines — light rgba, not dark */
    --line-card:rgba(242,237,228,.10);
    --line-divider:rgba(242,237,228,.07);
    --line-field:rgba(242,237,228,.14);
    --line-rail:rgba(242,237,228,.14);
    --line-dashed:#4A4239;

    /* states */
    --alert:#E08268;
    --track:#3A342C;
    --disabled-fill:#332E28;
    --disabled-text:#7A736A;
    --focus-ring:rgba(185,155,192,.16);
  }
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(0.96875rem, 0.9339rem + 0.1429vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.125rem, 1.5679rem + 2.2857vw, 3.625rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.6875rem, 1.3857rem + 1.2381vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(1.25rem, 1.2357rem + 0.5714vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; }

a { color: var(--action); }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--calm);
  color: var(--ink);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.lead {
  margin-block-start: var(--head-gap);
  font-size: clamp(1.03125rem, 0.95rem + 0.3333vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 34em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.65625rem, 0.6331rem + 0.0952vw, 0.71875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber-ink);
  margin-block-end: 18px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--action);
  color: var(--on-action);
  border-radius: var(--r-btn);
  font-family: var(--font-rounded);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { inset-block-start: 12px; }

/* --------------------------------------------------------------------------
   5. Buttons
   Every call to action is an anchor to /download, so the shared shape has to
   read the same on a link as it did on a control: no underline, inline-flex
   centring and the global focus ring.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-rounded);
  font-size: clamp(0.96875rem, 0.9455rem + 0.0952vw, 1.03125rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease),
    color 120ms var(--ease), transform 120ms var(--ease);
}

.btn--primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}

.btn--primary:hover { background: var(--action-press); border-color: var(--action-press); }
.btn--primary:active { background: var(--action-press); transform: scale(0.985); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-field);
  color: var(--ink-70);
}

.btn--ghost:hover { border-color: var(--action); color: var(--action); }
.btn--ghost:active { transform: scale(0.985); }

.btn--block {
  display: flex;
  width: 100%;
  padding-inline: 18px;
  white-space: normal;
}

/* Header action: the compact 44px nav size, desktop only. */
.btn--nav {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
  font-size: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);
}

.btn--nav:hover { background: var(--action-press); border-color: var(--action-press); }
.btn--nav:active { background: var(--action-press); transform: scale(0.985); }

@media (min-width: 768px) {
  .btn { min-height: 56px; padding: 0 30px; border-radius: 18px; }
  .btn--block { padding-inline: 22px; }
  .btn--nav { min-height: 44px; padding: 0 18px; border-radius: 14px; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin-block-start: var(--action-gap);
}

.cta-row--center { justify-content: center; }

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
  font-size: 0.9375rem;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Masthead and navigation
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--paper);
  border-block-end: 1px solid var(--line-card);
}

.masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
}

.wordmark {
  margin-inline-end: auto;
  padding-block: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.3054rem + 0.2857vw, 1.5625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-70);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-block-end: 1px solid transparent;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
}

.primary-nav a:hover { color: var(--action); border-block-end-color: var(--action); }

.masthead__cta { margin-inline-start: 10px; }

.nav-toggle {
  display: none;
  appearance: none;
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--line-field);
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--font-rounded);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms var(--ease), transform 120ms var(--ease);
}

.nav-toggle:active { transform: scale(0.985); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--paper);
  padding-block: 40px var(--section-y);
}

.hero__grid { display: grid; gap: 36px; }

/* Measured against the shipped face: at 320px the available measure is 276px
   and the intended first line, "A little math before", sets 234px at 30px
   with the display tracking, so the headline reflows to two legible lines
   with no horizontal overflow. text-wrap: balance keeps the two lines even. */
.hero__title {
  max-width: 20ch;
  text-wrap: balance;
}

.hero__subhead {
  margin-block-start: var(--head-gap);
  max-width: 26em;
  font-size: clamp(1.03125rem, 0.95rem + 0.3333vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   8. Product media
   Portrait iPad Simulator captures from the shipped candidate. Each frame is a
   mat, not a device mock-up: card ground, one hairline, the panel radius. The
   mat also absorbs the few pixels of letterbox where the walkthrough's frame
   is fractionally narrower than its poster, so the two read as one image.

   Motion rule: nothing here animates and the walkthrough never plays by
   itself, so section 24 needs no exception for this component.
   -------------------------------------------------------------------------- */

.media {
  display: grid;
  gap: 14px;
  margin: 0;
}

.media__frame {
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
}

.media__frame > img,
.media__frame > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--card);
}

/* Shown only when the browser cannot play the file at all. */
.media__fallback {
  padding: 14px 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-55);
}

.media__caption {
  max-width: 38em;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-55);
}

/* A portrait capture at full column width would tower over its own argument,
   so every placement is capped by width and centred in the space it is given. */
.media--hero .media__frame,
.media--plan .media__frame {
  max-width: 460px;
  margin-inline: auto;
}

.media--plan .media__frame { max-width: 520px; }
.media--plan .media__caption { margin-inline: auto; text-align: center; }

.media__pair { display: grid; gap: 14px; }
.media__pair .media__frame { max-width: 440px; margin-inline: auto; }

/* The question and its feedback belong side by side as soon as two portrait
   frames can hold a legible width. */
@media (min-width: 640px) {
  .media__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   9. Mascot, two decorative appearances
   Shipped transparent cuts. Never cropped, filtered, mirrored or recoloured.
   -------------------------------------------------------------------------- */

.mascot { display: block; height: auto; }

.mascot--star {
  flex: 0 0 auto;
  width: clamp(58px, 8vw, 76px);
}

.mascot--sit {
  width: clamp(104px, 11vw, 128px);
  margin-inline: auto;
  margin-block-end: 22px;
}

/* --------------------------------------------------------------------------
   10. Parent-moment bridge, sand
   -------------------------------------------------------------------------- */

.bridge {
  background: var(--sand);
  border-block: 1px solid var(--sand-deep);
  padding-block: var(--section-y);
}

.bridge__inner { display: grid; gap: var(--head-gap); }

.bridge__title { max-width: 20ch; }

/* The turn reads in full ink, not the quieter body ink. */
.bridge__body {
  max-width: 30em;
  font-size: clamp(1.03125rem, 0.95rem + 0.3333vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   11. Fact strip, four facts between two rules
   -------------------------------------------------------------------------- */

.facts { background: var(--paper); }

.facts__inner {
  display: grid;
  gap: 16px;
  padding-block: 24px;
  border-block: 1px solid var(--line-card);
}

.fact__label {
  font-family: var(--font-rounded);
  font-size: clamp(0.84375rem, 0.8089rem + 0.1429vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.fact__gloss {
  margin-block-start: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   12. Four-beat routine, marker and rule path
   -------------------------------------------------------------------------- */

.routine__head { margin-block-end: var(--step-gap); }

.path { display: grid; row-gap: var(--step-gap); }

.beat {
  position: relative;
  padding-inline-start: calc(var(--marker) + 20px);
}

.beat__marker {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--marker);
  height: var(--marker);
  border-radius: 50%;
  background: var(--calm);
  border: 1px solid var(--calm-rail);
  color: var(--calm-ink);
  font-family: var(--font-rounded);
  font-size: 0.875rem;
  font-weight: 600;
}

/* The connecting rule. Vertical while the page is one column. */
.beat::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--marker) + 8px);
  inset-block-end: calc(var(--step-gap) * -1);
  inset-inline-start: calc(var(--marker) / 2);
  width: 1px;
  background: var(--line-rail);
}

.beat--final::before { display: none; }

.beat--final .beat__marker {
  background: var(--amber-tint);
  border-color: var(--amber);
  color: var(--amber-ink);
}

.beat__title { margin-block-end: 8px; }

.beat__card p {
  max-width: 30em;
  line-height: 1.6;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   13. Approved play comes first, editorial statement on calm tint
   -------------------------------------------------------------------------- */

.statement { background: var(--calm-tint); }

.statement__grid { display: grid; gap: 26px; }

.statement__title {
  font-size: clamp(1.6875rem, 1.4571rem + 1.7143vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 14ch;
}

.statement__body {
  max-width: 30em;
  line-height: 1.6;
  color: var(--ink-70);
}

.ledger-inline {
  display: grid;
  gap: 10px;
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--calm-rail);
}

.ledger-inline li {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--calm-ink);
}

/* --------------------------------------------------------------------------
   14. K-8 math, grade rail and recovery
   -------------------------------------------------------------------------- */

.math { background: var(--paper); }

.math__grid { display: grid; gap: var(--col-gap); align-items: start; }

.rail { margin-block-start: 34px; }

.rail__item { border-block-end: 1px solid var(--line-divider); }

.rail__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 12px;
  list-style: none;
  cursor: pointer;
}

.rail__summary::-webkit-details-marker { display: none; }

.rail__grade {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.2357rem + 0.5714vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.rail__item[open] .rail__grade { color: var(--action); }

.rail__topics {
  padding-block: 0 20px;
  padding-inline-end: 8px;
  line-height: 1.6;
  color: var(--ink-55);
}

.rail__note {
  margin-block-start: 20px;
  font-size: 0.875rem;
  color: var(--ink-55);
}

.recovery__steps { display: grid; gap: 4px; }

.recovery__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}

.recovery__node {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-inline: calc((clamp(58px, 8vw, 76px) - 12px) / 2);
  border-radius: 50%;
  background: var(--calm-node);
}

.recovery__line {
  font-family: var(--font-rounded);
  font-size: clamp(1rem, 0.9784rem + 0.0952vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.recovery__step--final .recovery__line { color: var(--calm-ink); }

.recovery__body {
  margin-block-start: 22px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--line-divider);
  max-width: 32em;
  line-height: 1.6;
  color: var(--ink-55);
}

.math__media { width: 100%; }

/* --------------------------------------------------------------------------
   15. Parent controls, ruled rows on calm tint
   -------------------------------------------------------------------------- */

.controls { background: var(--calm-tint); }

.controls__grid { display: grid; gap: var(--col-gap); align-items: start; }

.ledger { display: grid; }

.ledger__item {
  padding-block: 17px;
  border-block-end: 1px solid var(--calm-rail);
  font-family: var(--font-rounded);
  font-size: clamp(1rem, 0.9784rem + 0.0952vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.ledger__item:first-child { padding-block-start: 0; }
.ledger__item:last-child { border-block-end: 0; }

.controls__note {
  margin-block-start: 24px;
  max-width: 34em;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   16. Privacy, one simple on-device panel
   -------------------------------------------------------------------------- */

.boundary { background: var(--paper); }

.boundary__grid { display: grid; gap: var(--col-gap); align-items: start; }

.boundary__title { max-width: 16ch; }

.device-panel {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
}

.device-panel__label {
  margin-block-end: 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-55);
}

.device-panel__box {
  padding: 20px;
  background: var(--calm-tint);
  border: 1.5px solid var(--action);
  border-radius: var(--r-card);
}

.device-panel__box p {
  max-width: 26em;
  font-size: clamp(1rem, 0.9784rem + 0.0952vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   17. Confidence, sticky statement and three proof rows
   -------------------------------------------------------------------------- */

.why { background: var(--paper); }

.why__grid { display: grid; gap: var(--col-gap); align-items: start; }

.why__point { padding-block: 22px; border-block-end: 1px solid var(--line-card); }

.why__point:first-child { padding-block-start: 0; }
.why__point:last-child { border-block-end: 0; }

.why__point h3 { margin-block-end: 8px; }

.why__point p { max-width: 32em; line-height: 1.6; color: var(--ink-55); }

/* --------------------------------------------------------------------------
   18. Value and download
   -------------------------------------------------------------------------- */

.value { background: var(--paper); }

.value__head { margin-block-end: var(--step-gap); max-width: 28ch; }

.value__lead {
  margin-block-start: var(--head-gap);
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.1116rem + 0.3111vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-70);
}

.value__grid { display: grid; gap: var(--col-gap); align-items: start; }

.value-ledger li {
  padding-block: 16px;
  border-block-end: 1px solid var(--line-divider);
  line-height: 1.55;
  color: var(--ink-70);
}

.value-ledger li:first-child { padding-block-start: 0; }
.value-ledger li:last-child { border-block-end: 0; }

.download-panel {
  display: grid;
  gap: 14px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-panel);
}

.download-panel p { line-height: 1.6; color: var(--ink-55); }

.download-panel .btn { margin-block-start: 6px; }

/* --------------------------------------------------------------------------
   19. FAQ, heading column plus one disclosure card
   -------------------------------------------------------------------------- */

.faq { background: var(--sand); }

.faq__grid { display: grid; gap: 28px; align-items: start; }

.faq__card {
  padding-inline: 20px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
}

.faq__item + .faq__item { border-block-start: 1px solid var(--line-divider); }

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding-block: 17px;
  list-style: none;
  cursor: pointer;
  font-size: clamp(0.96875rem, 0.9455rem + 0.0952vw, 1.03125rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__item[open] .faq__summary { color: var(--action); }

.faq__answer {
  padding-block: 0 20px;
  max-width: 40em;
  font-size: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);
  line-height: 1.6;
  color: var(--ink-55);
}

/* Chevron. Two hairlines meeting at the centre, rotating on open. */
.disclosure-mark {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 180ms var(--ease);
}

.disclosure-mark::before,
.disclosure-mark::after {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  width: 9px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--action);
}

.disclosure-mark::before { inset-inline-start: 1px; transform: rotate(45deg); }
.disclosure-mark::after { inset-inline-end: 1px; transform: rotate(-45deg); }

details[open] > summary .disclosure-mark { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   20. Final close and footer
   -------------------------------------------------------------------------- */

.close { background: var(--paper); }

.close__inner { max-width: 720px; text-align: center; }

.close__title {
  margin-inline: auto;
  max-width: 18ch;
  font-size: clamp(1.6875rem, 1.3785rem + 1.5238vw, 2.75rem);
  line-height: 1.1;
}

.close__body {
  margin-block-start: var(--head-gap);
  margin-inline: auto;
  max-width: 32em;
  font-size: clamp(1rem, 0.9784rem + 0.0952vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-55);
}

.site-footer {
  padding-block: 40px;
  background: var(--paper);
  border-block-start: 1px solid var(--line-card);
}

.site-footer__inner { display: grid; gap: 24px; }

.site-footer__brand {
  padding-block-end: 20px;
  border-block-end: 1px solid var(--line-divider);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-footer__cols { display: grid; gap: 28px; }

.site-footer__col-title {
  margin-block-end: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-55);
}

.site-footer__links { display: flex; flex-wrap: wrap; gap: 2px 24px; }

.site-footer__note {
  margin-block-start: 10px;
  max-width: 38em;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   21. Mobile sticky action, enabled by script only
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 45;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-block-start: 1px solid var(--line-field);
  transform: translateY(110%);
  transition: transform 280ms var(--ease);
}

.sticky-cta.is-visible { transform: none; }

/* --------------------------------------------------------------------------
   22. Reveal, applied by script only
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. Responsive
   Single column through 1023px. Asymmetric compositions from 1024px.
   -------------------------------------------------------------------------- */

/* Below 375px the shared headline ramp is already at its 34px floor while the
   measure has fallen to 276px. The hero title alone eases to a 30px floor and
   rejoins the shared ramp at 375px, so every size at and above 375px is
   untouched. At 30px the intended first line sets 234px and still fits. */
@media (max-width: 374px) {
  .hero__title { font-size: clamp(1.875rem, 0.4206rem + 7.2727vw, 2.125rem); }
}

@media (max-width: 899px) {
  .masthead__cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }

  .js .primary-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: none;
    padding: 6px var(--gutter) 18px;
    background: var(--paper);
    border-block-end: 1px solid var(--line-card);
  }

  .js .primary-nav.is-open { display: block; }

  .js .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .js .primary-nav a {
    width: 100%;
    min-height: 52px;
    border-block-end: 1px solid var(--line-divider);
    font-size: 1.0625rem;
  }

  .js .primary-nav li:last-child a { border-block-end: 0; }
}

/* Without the script the links stay visible as a wrapped row and the toggle,
   which nothing can operate, never renders. */
.no-js .nav-toggle { display: none; }

@media (max-width: 559px) {
  .btn { width: 100%; padding-inline: 18px; white-space: normal; }
  .btn--nav { width: auto; }
  .cta-row { gap: 12px; }
}

@media (min-width: 768px) {
  .hero { padding-block: 56px var(--section-y); }
  .facts__inner { padding-block: 28px; }
  .site-footer { padding-block: 56px; }
  .device-panel { padding: 30px 32px; }
  .download-panel { padding: 32px; }
  .faq__card { padding-inline: 24px; }
  .faq__summary { padding-block: 20px; }
  .faq__answer { padding-block-end: 24px; }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: var(--col-gap);
  }

  .hero { padding-block: 64px var(--section-y); }

  .facts__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-block: 30px;
  }

  .fact { padding-inline: 28px; border-inline-start: 1px solid var(--line-divider); }
  .fact:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .fact:last-child { padding-inline-end: 0; }

  .bridge__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--col-gap);
    align-items: start;
  }

  .routine__head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--col-gap);
    align-items: end;
  }

  .routine__head .lead { margin-block-start: 0; }

  /* Four beats read left to right along one continuous rule. */
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }

  .beat { padding-inline-start: 0; padding-block-start: calc(var(--marker) + 22px); }

  .beat::before {
    inset-block: calc(var(--marker) / 2) auto;
    inset-inline-start: calc(var(--marker) + 12px);
    inset-inline-end: -28px;
    width: auto;
    height: 1px;
  }

  .beat--final::before { display: block; inset-inline-end: 0; }

  .statement__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--col-gap);
    align-items: start;
  }

  .statement__aside { padding-inline-start: 32px; border-inline-start: 1px solid var(--calm-rail); }

  .math__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    row-gap: 48px;
  }

  .math__media {
    grid-column: 1 / -1;
    max-width: 940px;
    margin-inline: auto;
  }

  .controls__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .controls__grid > .media--plan { grid-column: 1 / -1; margin-block-start: 8px; }

  .boundary__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }

  .why__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .why__intro { position: sticky; inset-block-start: 108px; }

  .value__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }

  .faq__grid { grid-template-columns: 300px minmax(0, 1fr); gap: var(--col-gap); }

  .close__inner { margin-inline: auto; }

  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
}

/* --------------------------------------------------------------------------
   24. Reduced motion
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
  .sticky-cta { transition: none; }
}