/* 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; 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");
}

: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: #E00600;
  --accent: #007CC2;
  --today: #E00600;
  --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: #ED1010;
  --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;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101010;
    --surface: #1E1E1E;
    --sheet: #181818;
    --raised: #323235;
    --separator: #434347;
    --chip: #4A4949;
    --text: #FFFFFF;
    --text2: rgba(235, 235, 245, 0.6);
    --text3: rgba(235, 235, 245, 0.3);
    --rule: rgba(235, 235, 245, 0.27);
    --log: #FF4A42;
    --accent: #3AA6E8;
    --today: #FF4246;
    --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. Navy and red are the site's brand
   colours (#01152B, #ED1010). Red text is the softer #FF6A5E, which keeps
   6:1 on black and on navy. */

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

.landing {
  --l-chapter: #0B0C0E;
  --l-navy: #01152B;
  --l-panel: #16181C;
  --l-muted: rgba(255, 255, 255, 0.62);
  --l-rule: rgba(255, 255, 255, 0.16);
  --l-red: #ED1010;
  --l-red-text: #FF6A5E;
  background: #000;
  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 navy, 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
   #01152B is 17:1. */
.landing-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(720px, 100svh);
  padding: 120px 0 200px;
  overflow: hidden;
  background: var(--l-navy);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.hero-headline { font-size: clamp(44px, 5.4vw, 84px); line-height: 1.02; font-weight: 750; letter-spacing: -0.035em; }
.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-navy { background: var(--l-navy); padding-bottom: 152px; }
.chapter-start { background: linear-gradient(180deg, #131518 0%, #000000 100%); padding: 120px 0 140px; }

.two-tone { max-width: 900px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; font-weight: 330; letter-spacing: -0.02em; }
.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, #1D2026 0%, #121417 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, #1B1E23 0%, #111316 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(30px, 3.6vw, 48px); line-height: 1.1; font-weight: 330; letter-spacing: -0.02em; }
.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(36px, 4.6vw, 56px); line-height: 1.08; font-weight: 330; letter-spacing: -0.02em; }
.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: #000; 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-navy { 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; }
}