/* dolkk.com's front page (js/views/landing.js).
 *
 * The tokens, and the session screen in the hero, are the iPhone app's look
 * from DesignSystem.swift: warm paper with white cards in light, a hair off
 * black in dark; one corner (12) for containers and a label's corner (4) for
 * tags and buttons; Inter for type, Jomhuria for the headlines; red for the
 * log and for today, blue for what can be pressed. Every colour is a light
 * and dark pair, picked against its own ground. */

/* Inter, served from this site (fonts/, licence beside it) — no third
 * party sees who reads the page. One variable file holds every weight, and
 * its optical size axis switches to Inter Display at headline sizes by
 * itself. index.html preloads it with the scripts; until it lands the
 * system's face stands in, so nothing waits on it. The file name carries
 * the version, so it is cached for a year (see the Caddyfile). */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-4.1.woff2") format("woff2");
}

/* Jomhuria, the face of the front page's headlines, served the same way:
 * Google Fonts' own Latin cut (v23, 13 KB), the licence beside it. It has
 * one weight. Its capitals are 0.39 em tall to Inter's 0.73, so it is set
 * at about 1.85 times Inter's size for the same height, on a line of about
 * 0.6 em. index.html preloads it, and the headline waits for it rather than
 * show in Inter at that size. */
@font-face {
  font-family: "Jomhuria";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/Jomhuria-v23-latin.woff2") format("woff2");
}

:root {
  --ground: #F6F4F0;
  --surface: #FFFFFF;
  --sheet: #F6F4F0;
  --raised: #EBE7E0;
  --separator: #D9D5CD;
  --chip: #E0DEDC;
  --text: #000000;
  --text2: #5D5D61;
  --text3: rgba(60, 60, 67, 0.32);
  --rule: rgba(93, 93, 97, 0.45);
  --log: #FF1E00;
  --accent: #007CC2;
  --today: #FF1E00;
  --spoken: #006FD6;
  --caution: #6B4100;
  --caution-wash: #FBEBCB;
  --filled: #000000;
  --on-filled: #FFFFFF;
  --segment: #FFFFFF;
  --green: #34C759;
  --orange: #C93400;
  --red: #FF3B30;
  --better: #1A7F4B;
  --scrim: rgba(0, 0, 0, 0.32);
  --brand: #FF1E00;
  --plan: #0076CF;
  --on-accent: #FFFFFF;
  --radius: 12px;
  --label-radius: 4px;
  --space: 16px;
  --font: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Jomhuria", var(--font);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #15151E;
    --surface: #21212A;
    --sheet: #1C1C25;
    --raised: #35353C;
    --separator: #47464C;
    --chip: #4C4C52;
    --text: #FFFFFF;
    --text2: rgba(235, 235, 245, 0.6);
    --text3: rgba(235, 235, 245, 0.3);
    --rule: rgba(235, 235, 245, 0.27);
    --log: #FF1E00;
    --accent: #3AA6E8;
    --today: #FF1E00;
    --spoken: #0091FF;
    --caution: #FFCB80;
    --caution-wash: #3A2C12;
    --filled: #FFFFFF;
    --on-filled: #000000;
    --segment: rgba(255, 255, 255, 0.18);
    --green: #30D158;
    --orange: #FF9F0A;
    --red: #FF453A;
    --better: #30D158;
    --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

/* --- ground -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  /* Inter's own advice: Chrome leaves these off for a variable font otherwise. */
  font-feature-settings: "liga" 1, "calt" 1;
  font-size: 17px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
}

h1, h2, h3, p, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { display: block; max-width: 100%; }
.noscript { padding: 32px; text-align: center; }

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

/* --- type: the iPhone's text styles ----------------------------------------- */

.t-title2 { font-size: 22px; line-height: 28px; }

.t-headline { font-size: 17px; line-height: 22px; font-weight: 600; }
.t-body { font-size: 17px; line-height: 22px; }

.t-sub { font-size: 15px; line-height: 20px; }
.t-foot { font-size: 13px; line-height: 18px; }
.t-caption { font-size: 12px; line-height: 16px; }

.w-bold { font-weight: 700; }
.w-semi { font-weight: 600; }
.w-medium { font-weight: 500; }
.secondary { color: var(--text2); }

.mono { font-variant-numeric: tabular-nums; }

.end { text-align: right; align-items: flex-end; }

.stack-18 { display: flex; flex-direction: column; gap: 18px; }

/* --- glyphs ---------------------------------------------------------------------- */

.icon { display: inline-flex; width: 1em; height: 1em; flex: none; }
.icon svg { width: 100%; height: 100%; }

.wordmark { display: inline-flex; flex: none; aspect-ratio: 1298.592 / 658; }
.wordmark svg { width: 100%; height: 100%; transform: translateY(11.7%); }
.wordmark.brand { color: var(--brand); }

/* --- pages ----------------------------------------------------------------------------- */

.page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  padding: 10px var(--space);
}

.page-header.pushed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
}

.page-content { padding: 18px var(--space) 0; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  margin-left: -6px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--separator);
}
.back-btn .icon { font-size: 15px; }

/* --- tables ------------------------------------------------------------------------------ */

.column-label { font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--text2); letter-spacing: 0.02em; }
.column-label.end { text-align: right; }

/* --- a session's plan ---------------------------------------------------------------------- */

.session-heading { display: flex; flex-direction: column; gap: 4px; }
.session-heading .purpose { padding-top: 2px; }

.session-status { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }

.ticks { display: inline-flex; gap: 3px; padding-right: 2px; }
.tick { width: 3px; height: 13px; border-radius: 2px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.tick.done { background: color-mix(in srgb, var(--text) 85%, transparent); }

.plan-table {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) max-content 36px;
  column-gap: 10px;
}
.plan-table.has-timers { grid-template-columns: 22px minmax(0, 1fr) max-content 68px; }

.plan-head, .plan-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.plan-head { padding-top: 24px; border-bottom: 2px solid var(--rule); }
.plan-head.first { padding-top: 0; }
.plan-head .column-label { padding-bottom: 10px; }
.plan-section-name { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; }

.plan-row { align-items: center; border-bottom: 1px solid var(--separator); }
.plan-row.opens { cursor: pointer; }
.plan-row.opens:hover { background: color-mix(in srgb, var(--ground) 96%, var(--text)); }
.plan-row .position { color: var(--text); }
.plan-row .exercise { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; min-width: 0; }
.plan-row .work { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.plan-row.done .position, .plan-row.done .name, .plan-row.done .figure { color: var(--text2); }
.plan-row .controls { display: flex; justify-content: flex-end; align-items: center; height: 44px; }

.timer-btn { width: 32px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text2); font-size: 15px; }
.timer-btn:hover { color: var(--text); }
.done-btn { width: 36px; height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; font-size: 24px; color: var(--text2); }
.done-btn.done { color: var(--green); }

.plan-description {
  grid-column: 2 / -1;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--separator);
  margin-left: 0;
  cursor: pointer;
}
.plan-table > .plan-description { grid-column: 1 / -1; padding-left: 32px; margin-top: -1px; }

/* --- the front page ------------------------------------------------------------------------ */
/* In the manner of shopify.com: dark whatever the appearance setting; Inter at
   a light 330 for headlines, tracked in; pill buttons; chapters with rounded
   tops that rise over the one before. The brand colours are Warm Red
   #FF1E00 and Carbon Black #15151E (navy #01152B and #ED1010 until
   2026-11-04).

   Carbon is the page's ground, and the chapters between its sections step
   *up* from it to #1C1C25, the way formula1.com builds on the same black;
   the panels on a chapter step up again. Red small text is #FF3419, Warm
   Red lifted a hair: the red itself is 4.4:1 on #1C1C25, this is 4.6:1
   there and 5:1 on carbon. Fills and the logo stay #FF1E00. */

body.on-landing { background: #15151E; color-scheme: dark; }

.landing {
  --l-chapter: #1C1C25;
  --l-carbon: #15151E;
  --l-muted: rgba(255, 255, 255, 0.62);
  --l-rule: rgba(255, 255, 255, 0.16);
  --l-red: #FF1E00;
  --l-red-text: #FF3419;
  background: var(--l-carbon);
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: normal;
  overflow-x: clip;
}
.landing h1, .landing h2, .landing h3 { text-wrap: balance; }
.landing p { text-wrap: pretty; }
.landing .nowrap { white-space: nowrap; }

.landing-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* The logo on the left, one link on the right, over the navy opening. Once
   the page moves it gets shorter and stays clear: no colour of its own, only
   a blur, so the logo still reads over whatever passes under it. It used to
   turn navy, then black — a solid bar the user found too heavy. */
.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
  padding: 0 40px;
  transition: height 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
}
.landing-header.scrolled {
  height: 60px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.landing-logo { display: inline-flex; color: #FFFFFF; }
.landing-logo .wordmark { transition: height 0.25s ease; }
.landing-header.scrolled .landing-logo .wordmark { height: 28px !important; }
.landing-link { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: #FFFFFF; text-decoration: none; transition: font-size 0.25s ease; }
.landing-header.scrolled .landing-link { font-size: 16px; }
.landing-link:hover { color: rgba(255, 255, 255, 0.78); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.pill-light { background: #FFFFFF; color: #000000; }
.pill-light:hover { background: rgba(255, 255, 255, 0.84); }
.pill-outline { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); color: #FFFFFF; }
.pill-outline:hover { background: rgba(255, 255, 255, 0.1); }
.pill .icon { width: 18px; height: 18px; }
/* Before DOLKK is on the App Store: the button's place, saying so. */
.pill.coming { cursor: default; }
.pill-light.coming:hover { background: #FFFFFF; }

/* The opening, after whatnot.com's: one screen in the brand's Carbon Black, the app
   on the left and the words on the right, the pair centred on the page, and
   "How it works" at its foot, clear of the chapter that rises over it. It
   was the brand's red, which the user found too heavy on the eye. White on
   #15151E is 18:1 (it was navy, #01152B, until 2026-11-04). */
.landing-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(720px, 100svh);
  padding: 120px 0 200px;
  overflow: hidden;
  background: var(--l-carbon);
}
/* The headlines, in Jomhuria (see its @font-face): its one weight, as drawn. */
.hero-headline, .two-tone, .phase-name, .start-title { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.hero-headline { font-size: clamp(80px, 10vw, 156px); line-height: 0.6; }
.hero-lede { margin-top: 20px; max-width: 30em; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -0.01em; }
.hero-download { margin: 36px 0 14px; font-size: 17px; font-weight: 650; }
.hero-how { position: absolute; left: 0; right: 0; bottom: 96px; display: flex; justify-content: center; }

/* The session phone in front, two real screens behind it. --p is the phone's
   scale; each side screen is 62% of the phone's width, shows --peek of it
   past the phone's edge, and is cut to under half the phone's height — short
   of the tab bar, whose Profile tab carries the athlete's own photo. */
.hero-visual { display: flex; justify-content: flex-end; }
.hero-screens {
  --p: 0.66;
  --peek: 0.34;
  position: relative;
  display: flex;
  padding: 0 calc(390px * var(--p) * var(--peek));
}
.hero-screens .screen-phone { --s: var(--p); z-index: 1; }
.hero-side {
  position: absolute;
  top: 50%;
  width: calc(390px * var(--p) * 0.62);
  height: calc(844px * var(--p) * 0.48);
  transform: translateY(-50%);
  border-radius: calc(32px * var(--p));
  overflow: hidden;
  background: #F6F4F0;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5);
}
/* Without the status bar, which on the log is the red behind a sheet and
   would read as a stray band of colour. A margin in % is of the width: 19% of it is the top
   8.8% of a 923 × 2000 screenshot. */
.hero-side img { display: block; width: 100%; height: auto; margin-top: -19%; }
.hero-side-left { left: 0; }
.hero-side-right { right: 0; }

/* The hero's one picture: the app's own session screen, laid out at a
   phone's 390px and scaled to fit, in the app's light colours whatever the
   visitor's own setting. --s is the scale. */
.hero-visual { display: flex; justify-content: center; }
.screen-phone {
  --s: 0.72;
  position: relative;
  flex: none;
  width: calc(390px * var(--s));
  height: calc(844px * var(--s));
  border-radius: calc(48px * var(--s));
  overflow: hidden;
  background: #F6F4F0;
  box-shadow:
    0 0 0 calc(10px * var(--s)) #0E0E10,
    0 0 0 calc(11px * var(--s)) rgba(255, 255, 255, 0.16),
    0 60px 120px -30px rgba(0, 0, 0, 0.9);
}
.screen-phone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3%;
  background: linear-gradient(rgba(246, 244, 240, 0), #F6F4F0 80%);
}
.screen {
  --ground: #F6F4F0;
  --surface: #FFFFFF;
  --raised: #EBE7E0;
  --separator: #D9D5CD;
  --chip: #E0DEDC;
  --text: #000000;
  --text2: #5D5D61;
  --text3: rgba(60, 60, 67, 0.32);
  --rule: rgba(93, 93, 97, 0.45);
  --accent: #007CC2;
  --filled: #000000;
  --on-filled: #FFFFFF;
  color-scheme: light;
  width: 390px;
  height: 844px;
  transform: scale(var(--s));
  transform-origin: top left;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.3;
  pointer-events: none;
  user-select: none;
}
.screen-status { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 18px 34px 0; font-size: 16px; font-weight: 600; }
.screen-battery { width: 26px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.4), inset 0 0 0 3px #F6F4F0, inset 0 0 0 9px #000000; }
.screen .page-header { position: static; }
/* A still picture: the row that unfolds is drawn already open. */
.screen * { animation: none !important; }
/* The iPhone's own round back button, as in the real screenshots. */
.screen .back-btn { width: 48px; height: 48px; padding: 0; margin-left: 0; justify-content: center; }
.screen .back-btn .icon { width: 22px; height: 22px; }

.chapter { position: relative; z-index: 1; margin-top: -48px; border-radius: 48px 48px 0 0; padding: 112px 0 96px; }
.chapter-dark, .chapter-continued { background: var(--l-chapter); }
.chapter-continued { position: relative; z-index: 1; padding: 64px 0 160px; }
/* The five steps are two sections, so they can be two slides; scrolled, they
   meet a grid gap apart, as one grid. */
#how { padding-bottom: 0; }
.steps-rest { padding-top: 48px; }
.steps-rest .bento { margin-top: 0; }
.chapter-carbon { background: var(--l-carbon); padding-bottom: 152px; }
.chapter-start { background: linear-gradient(180deg, var(--l-chapter) 0%, var(--l-carbon) 100%); padding: 120px 0 140px; }

.two-tone { max-width: 900px; font-size: clamp(60px, 8.2vw, 100px); line-height: 0.62; }
.two-tone span { color: var(--l-muted); }

.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1280px; margin: 64px auto 0; padding: 0 40px; }
.strip-tile { margin: 0; }
.strip-frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 4 / 5;
  padding-top: 28px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #2A2A33 0%, #1F1F28 100%);
}
.strip-frame img { width: 72%; height: auto; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.strip-tile figcaption { margin-top: 14px; font-size: 15px; color: var(--l-muted); }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 24px; margin-top: 64px; }
.bento-card { grid-column: span 2; }
.bento-card.wide { grid-column: span 3; }
.bento-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #282831 0%, #1E1E27 100%);
}
.bento-card.wide .bento-panel { height: 380px; }
.panel-phone {
  position: absolute;
  top: 32px;
  left: 50%;
  width: min(56%, 240px);
  transform: translateX(-50%);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -10px rgba(0, 0, 0, 0.7);
}
.panel-phone img { display: block; width: 100%; height: auto; }
.bento-number { margin-top: 20px; font-size: 13px; letter-spacing: 0.08em; color: var(--l-red-text); font-variant-numeric: tabular-nums; }
.bento-title { margin-top: 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.bento-text { margin-top: 6px; max-width: 46ch; font-size: 15px; color: var(--l-muted); }
.panel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 440px; padding: 24px; }
.landing .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 15px;
  white-space: nowrap;
}
.landing .chip .icon { width: 16px; height: 16px; }
.landing .chip-red { background: var(--l-red); box-shadow: none; }
.panel-flow { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; }
.flow-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; }
.landing .flow-in .chip { padding: 7px 12px; font-size: 13px; }
.flow-arrow { color: var(--l-muted); }
.flow-arrow .icon { width: 20px; height: 20px; }

.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin-top: 72px; }
.look { padding-top: 20px; border-top: 1px solid var(--l-rule); }
.look-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-red-text); }
.look-text { margin-top: 10px; font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }
.phases-title { margin-top: 96px; font-size: 15px; font-weight: 500; color: var(--l-muted); }
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.phase-name { font-size: clamp(56px, 6.6vw, 88px); line-height: 0.62; }
.phase-text { margin-top: 8px; font-size: 15px; color: var(--l-muted); }

/* One centred column: the title, the three steps, the button. */
.start-copy { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; text-align: center; }
.start-copy .start-list { width: 100%; text-align: left; }
.start-title { font-size: clamp(66px, 8.5vw, 104px); line-height: 0.62; }
.start-list { list-style: none; margin: 40px 0; padding: 0; }
.start-list li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 330;
  letter-spacing: -0.015em;
}
.start-number { font-size: 14px; color: var(--l-red-text); font-variant-numeric: tabular-nums; }

.landing-footer { padding: 80px 0 40px; background: var(--l-carbon); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-title { margin-bottom: 4px; font-size: 15px; font-weight: 500; color: #FFFFFF; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-column a { font-size: 14px; color: var(--l-muted); text-decoration: none; }
.footer-column a:hover { color: #FFFFFF; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: var(--l-muted);
}

@media (max-width: 899px) {
  /* The words first, centred, and the app under them. */
  .landing-hero { flex-direction: column; min-height: 0; padding: 136px 0 104px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { order: -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-visual { justify-content: center; }
  .hero-how { position: static; margin-top: 48px; }
  .strip {
    grid-template-columns: repeat(3, 240px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip-tile { scroll-snap-align: start; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card, .bento-card.wide { grid-column: span 1; }
  .steps-rest .bento-card:last-child { grid-column: span 2; }
  .looks, .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-mark { grid-column: 1 / -1; }
}


@media (max-width: 599px) {
  .landing-wrap, .landing-header, .strip { padding-left: 20px; padding-right: 20px; }
  .landing-header { height: 64px; }
  .landing-header.scrolled { height: 52px; }
  .landing-logo .wordmark { height: 30px !important; }
  .landing-header.scrolled .landing-logo .wordmark { height: 24px !important; }
  .landing-link { font-size: 16px; }
  .landing-header.scrolled .landing-link { font-size: 15px; }
  .strip { scroll-padding-left: 20px; }
  .landing-hero { padding: 104px 0 88px; }
  .hero-screens { --p: 0.6; --peek: 0.22; }
  .wide-only { display: none; }
  .chapter { margin-top: -28px; border-radius: 28px 28px 0 0; padding: 80px 0 64px; }
  .chapter-continued { padding: 32px 0 112px; }
  .chapter-carbon { padding-bottom: 112px; }
  .bento { grid-template-columns: 1fr; gap: 40px; }
  .bento-card, .bento-card.wide, .steps-rest .bento-card:last-child { grid-column: auto; }
  .steps-rest { padding-top: 40px; }
  .bento-panel, .bento-card.wide .bento-panel { height: 300px; }
  .looks { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .phases-title { margin-top: 72px; }
  .phases { gap: 28px 20px; }
  .start-list { margin: 32px 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: column; }
}

/* The smallest phones: room between the centred logo and the button. */
@media (max-width: 359px) {
  .hero-screens { --p: 0.54; }
  .landing-logo .wordmark { height: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-header, .landing-logo .wordmark, .landing-link, .pill { transition: none; }
}

/* Slides. Where a window can hold a section, the page moves a whole section
   at a time, like a deck: each section is at least a screen tall with its
   content in the middle, one scroll lands on the next, and none is skipped
   (scroll-snap-stop). A section still taller than the window scrolls inside
   until its end, then the next one lands. The pictures shrink with the
   window's height so that happens less. Phones and short windows scroll as
   before: there the sections are taller than the screen. */
@media (min-width: 900px) and (min-height: 700px) {
  :root:has(body.on-landing) { scroll-snap-type: y mandatory; }
  .landing-hero, .landing main > section { scroll-snap-align: start; scroll-snap-stop: always; }
  .landing-footer { scroll-snap-align: end; }
  .landing main > section:not(.landing-hero) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-top: 128px;
    padding-bottom: 96px;
  }
  /* The last slide is the close and the footer together, one screen between
     them: --footer-h is the footer's height, measured by landing.js. */
  .landing main > section.chapter-start {
    min-height: calc(100svh - var(--footer-h, 0px));
    padding-top: 96px;
    padding-bottom: 40px;
  }
  .start-list { margin: 32px 0; }
  .landing-footer { padding-top: 64px; }
  /* A centred item in a column shrinks to its content without this. */
  .strip { width: 100%; margin-top: 48px; }
  .strip-frame { aspect-ratio: auto; height: clamp(260px, 100svh - 500px, 520px); }
  #how .bento { margin-top: 48px; }
  .bento-panel { height: clamp(220px, 100svh - 560px, 300px); }
  .bento-card.wide .bento-panel { height: clamp(240px, 100svh - 560px, 380px); }
  .looks { margin-top: 48px; }
  .phases-title { margin-top: 64px; }
}
/* A laptop's shorter screen: a smaller phone and tighter rows, so each
   section still fits on one. */
@media (min-width: 900px) and (min-height: 700px) and (max-height: 840px) {
  .landing-hero { padding: 96px 0 168px; }
  .hero-screens { --p: 0.56; }
  .hero-how { bottom: 84px; }
  .landing main > section:not(.landing-hero) { padding-top: 112px; padding-bottom: 80px; }
  .looks { gap: 32px 40px; margin-top: 32px; }
  .phases-title { margin-top: 40px; }
  .landing main > section.chapter-start { padding-top: 96px; padding-bottom: 32px; }
  .start-list { margin: 24px 0; }
  .start-list li { padding: 12px 0; }
  .landing-footer { padding-top: 32px; }
  .footer-bottom { margin-top: 24px; }
}