/* Website tokens.
   ------------------------------------------------------------------
   These are NOT the app's design tokens. The app is a signal device read
   from three metres away and its system (2px keylines, micro labels,
   ruled section heads, condensed capitals) belongs on the app.

   What carries over from the brand is the typeface pair and one colour:
   the work green. Everything else here is chosen for the web.

   Surfaces are a near-black / off-white pair rather than the app's warm
   paper, partly so the site reads as its own object and partly because the
   photography is dark and warm cream fights it.

   One accent: #19B95B. Red and amber appear only inside real screenshots,
   where they still mean rest and warm-up. */

@font-face {
  font-family: 'Big Shoulders';
  src: url('fonts/big-shoulders-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url('fonts/big-shoulders-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url('fonts/big-shoulders-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('fonts/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark light;

  --display: 'Big Shoulders', 'Arial Narrow', system-ui, sans-serif;
  --ui: Barlow, system-ui, -apple-system, sans-serif;

  /* One radius. The device body is the only exception, because it is
     depicting a physical object with a real corner radius. */
  --r: 4px;

  --accent: #19b95b;

  /* Dark is the default here: the photography is dark, and a site about
     reading a lit screen in a dim room should not be a white page. */
  --bg: #0a0b0c;
  --bg-2: #121415;
  --bg-3: #1a1d1e;
  --fg: #efefec;
  --fg-2: #a7aba9;
  --fg-3: #7e8482;
  --line: rgba(239, 239, 236, 0.13);
  --line-2: rgba(239, 239, 236, 0.26);
  --accent-text: #19b95b;
  --scrim: linear-gradient(90deg, rgba(10, 11, 12, 0.88) 0%, rgba(10, 11, 12, 0.52) 32%, rgba(10, 11, 12, 0.06) 60%, transparent 100%);
  --scrim-v: linear-gradient(180deg, rgba(10, 11, 12, 0.66) 0%, transparent 22%, transparent 58%, rgba(10, 11, 12, 0.6) 100%);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f4f1;
    --bg-2: #eaeae6;
    --bg-3: #e0e0da;
    --fg: #14161a;
    --fg-2: #4a4f4d;
    --fg-3: #6a706e;
    --line: rgba(20, 22, 26, 0.14);
    --line-2: rgba(20, 22, 26, 0.28);
    /* The bright green fails as small type on a light surface, so type takes
       the darkened stop while fills keep the bright value. */
    --accent-text: #0c6e38;
    --scrim: linear-gradient(90deg, rgba(6, 7, 8, 0.86) 0%, rgba(6, 7, 8, 0.5) 32%, rgba(6, 7, 8, 0.08) 60%, transparent 100%);
    --scrim-v: linear-gradient(180deg, rgba(6, 7, 8, 0.6) 0%, transparent 22%, transparent 58%, rgba(6, 7, 8, 0.55) 100%);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--fg);
  color: var(--bg);
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

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

/* ---------------------------------------------------------------
   Device
   A drawn iPhone body holding a real screenshot. Proportions and corner
   radius are taken from the device the captures came from. The screen is
   never drawn, only the aluminium around it, so nothing on this page is a
   simulated interface.
   --------------------------------------------------------------- */
.device {
  --dw: 280px;
  position: relative;
  width: var(--dw);
  padding: calc(var(--dw) * 0.031);
  border-radius: calc(var(--dw) * 0.137);
  background: linear-gradient(
    148deg,
    #55595c 0%,
    #202325 14%,
    #101214 44%,
    #0d0f10 68%,
    #34383b 92%,
    #6a6f72 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 2px 2px rgba(0, 0, 0, 0.5),
    0 40px 70px -24px rgba(0, 0, 0, 0.8);
  flex: none;
}
.device-screen {
  border-radius: calc(var(--dw) * 0.108);
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.device-screen img {
  width: 100%;
}
.device.is-landscape {
  border-radius: calc(var(--dw) * 0.063);
  padding: calc(var(--dw) * 0.014);
}
.device.is-landscape .device-screen {
  border-radius: calc(var(--dw) * 0.05);
}

/* Pre-launch store placeholder. Not a link, and it says so. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg-2);
}
.badge strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.badge span {
  font-size: 13px;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* roperounds.com
   ------------------------------------------------------------------
   The Distance direction, selected in issue #18 and carried into production.

   The page is built around the one thing the product exists for: reading a
   number from the other side of a room. The hero puts the real device on the
   floor in the foreground with the athlete several metres behind it, which is
   the product situation rather than a description of it.

   Layout families, one use each: full-bleed photographic hero, typographic
   statement, pinned product sequence, full-bleed media band, asymmetric split,
   half-bleed photo and copy, staggered card grid, two-column comparison,
   large-type list. No section repeats another's shape.
*/

:root {
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1360px;
  --bar-h: 68px;
  --gap-xl: clamp(72px, 12vw, 190px);
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- bar ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: var(--pad);
  background: linear-gradient(180deg, rgba(10, 11, 12, 0.72), transparent);
  backdrop-filter: blur(4px);
}
.bar.is-solid {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
.bar.is-solid .wordmark {
  color: var(--fg);
}
.bar.is-solid .navlink {
  color: var(--fg-2);
}
.bar.is-solid .navlink:hover,
.bar.is-solid .navlink[aria-current='page'] {
  color: var(--fg);
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: #efefec;
}
.bar nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
}
.navlink {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(239, 239, 236, 0.72);
  padding: 14px 0;
}
.navlink:hover {
  color: #efefec;
}
.navlink[aria-current='page'] {
  color: #efefec;
}
.navlink.is-home {
  display: none;
}
@media (max-width: 560px) {
  .wordmark {
    display: none;
  }
  .navlink.is-home {
    display: inline-block;
    margin-right: auto;
  }
  .bar {
    justify-content: flex-start;
  }
}

/* The bar sits over the photographic hero on the landing page, so its colours
   are pinned to the dark values there. On document pages it is solid and
   follows the theme, which is what `is-solid` switches. */

/* ---------- type ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.1vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
h3 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
p {
  max-width: 58ch;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  background: #08090a;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim), var(--scrim-v);
}
.hero-in {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding: calc(var(--bar-h) + clamp(20px, 5vh, 56px)) var(--pad) clamp(18px, 3vh, 40px);
  display: grid;
  align-content: center;
  position: relative;
  z-index: 1;
}
.hero-copy {
  align-self: center;
  color: #efefec;
  max-width: min(800px, 60vw);
}
.hero-copy .eyebrow {
  color: rgba(239, 239, 236, 0.62);
}
.hero-copy h1 {
  margin-top: 0.2em;
}
.hero-sub {
  margin-top: clamp(16px, 2.4vh, 26px);
  font-size: clamp(16px, 1.3vw, 19px);
  color: rgba(239, 239, 236, 0.8);
  max-width: 36ch;
}
.hero-cta {
  margin-top: clamp(20px, 3vh, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.hero .badge {
  border-color: rgba(239, 239, 236, 0.3);
  color: rgba(239, 239, 236, 0.72);
}
.hero .badge strong {
  color: #efefec;
}
.hero-note {
  font-size: 14px;
  color: rgba(239, 239, 236, 0.62);
}

/* The phone lying on the floor in front of you. The perspective is the point:
   this is the angle you actually read it from. */
/* Out of flow on purpose: a rotated element still occupies its full
   un-rotated height in layout, which would stretch the hero past the fold. */
.hero-device {
  position: absolute;
  right: clamp(-14px, 2.5vw, 56px);
  bottom: clamp(-30px, -2vh, -6px);
  perspective: 1400px;
  z-index: 0;
  pointer-events: none;
}
/* Contact shadow and a little colour spill, so the phone sits on the floor
   rather than floating over the photograph. */
.hero-device::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -3%;
  height: 22%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(0, 0, 0, 0.8), transparent 72%);
  filter: blur(16px);
}
.hero-device::after {
  content: '';
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -14%;
  height: 34%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(25, 185, 91, 0.14), transparent 70%);
  filter: blur(28px);
}
.hero-device .device {
  transform: rotateX(57deg) rotateZ(-8deg);
  transform-origin: 50% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 60px 90px -20px rgba(0, 0, 0, 0.85);
}

@media (max-width: 899px) {
  .hero-in {
    align-content: start;
    padding-bottom: clamp(210px, 34vh, 320px);
  }
  .hero-copy {
    max-width: none;
  }
  .hero-sub {
    max-width: 40ch;
  }
  .hero-device {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: clamp(-14px, -1vh, -2px);
  }
  .hero-device .device {
    --dw: min(268px, 72vw) !important;
    transform: rotateX(62deg) rotateZ(-5deg);
  }
}

/* ---------- the shape of a workout, in figures ----------
   Four numbers is the fastest way to show someone who has never used an
   interval timer what one is. The condensed face earns its place here because
   these are figures, which is what it was chosen for. */
.figures {
  margin-top: clamp(26px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  border-top: 1px solid var(--line-2);
  padding-top: clamp(20px, 2.6vw, 32px);
}
.figures li {
  display: grid;
  gap: 4px;
}
.fig-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 4.6vw, 72px);
  line-height: 0.84;
  letter-spacing: -0.008em;
  font-variant-numeric: tabular-nums;
}
.fig-n i {
  font-style: normal;
  font-size: 0.42em;
  margin-left: 0.05em;
  color: var(--fg-3);
}
.fig-l {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.fig-total {
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 560px) {
  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- statement, full bleed over a photograph ---------- */
.statement {
  position: relative;
  margin-top: var(--gap-xl);
  padding-block: clamp(90px, 16vw, 220px);
  isolation: isolate;
  overflow: hidden;
  background: #08090a;
}
.statement-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  z-index: -2;
}
.statement::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(270deg, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.66) 34%, rgba(8, 9, 10, 0.1) 68%, transparent 100%),
    linear-gradient(180deg, rgba(8, 9, 10, 0.5) 0%, transparent 28%, transparent 68%, rgba(8, 9, 10, 0.5) 100%);
}
.statement-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  justify-items: end;
  text-align: right;
}
.statement-lead {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.8vw, 78px);
  line-height: 1;
  letter-spacing: -0.006em;
  color: rgba(239, 239, 236, 0.62);
  max-width: 22ch;
}
.statement-tail {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 78px);
  line-height: 1;
  letter-spacing: -0.006em;
  color: #efefec;
  max-width: 22ch;
}

/* ---------- pinned product sequence ---------- */
.beats {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.beats-stage {
  position: sticky;
  top: calc(var(--bar-h) + 6vh);
  height: min(62vh, 560px);
  display: grid;
  place-items: center;
}
.beats-device {
  position: relative;
  display: grid;
}
.beat-shot {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}
.beat-shot.is-on {
  opacity: 1;
  visibility: visible;
}
.beats-copy {
  display: grid;
}
.beat {
  min-height: 56vh;
  display: grid;
  align-content: center;
  max-width: 46ch;
}
.beat-kicker {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -0.004em;
  color: var(--fg-3);
}
/* Brightness, not hue. Green means work in this product, so colouring the
   active kicker with the accent would put "Rest" in green. */
.beat.is-on .beat-kicker {
  color: var(--fg);
}
.beat-body {
  margin-top: 18px;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--fg-2);
}
@media (min-width: 900px) {
  .beats {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  }
  .beats-stage {
    grid-column: 1;
    grid-row: 1;
  }
  .beats-copy {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 899px) {
  .beats-stage {
    position: static;
    height: auto;
    margin-bottom: 8px;
  }
  .beat {
    min-height: 0;
    padding-block: 26px;
    border-top: 1px solid var(--line);
  }
  .beat-kicker {
    color: var(--fg);
  }
}

/* ---------- orientation, full-bleed media band ---------- */
.orient {
  position: relative;
  margin-top: var(--gap-xl);
  padding-block: clamp(60px, 9vw, 140px);
  isolation: isolate;
  overflow: hidden;
  background: #0a0b0c;
}
.orient-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.9;
}
.orient::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(8, 9, 10, 0.85) 100%);
}
.orient-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: clamp(34px, 5vw, 64px);
  justify-items: center;
}
.orient-device {
  width: 100%;
  display: grid;
  justify-items: center;
}
.orient-device .device {
  --dw: min(760px, 100%) !important;
}
.orient-copy {
  text-align: center;
  color: #efefec;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.orient-copy p {
  color: rgba(239, 239, 236, 0.78);
  max-width: 54ch;
}

/* ---------- how a workout is built, asymmetric split ---------- */
.setup {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--gap-xl) var(--pad);
  display: grid;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.setup-copy p {
  margin-top: 20px;
  color: var(--fg-2);
  font-size: clamp(16px, 1.25vw, 19px);
}
.setup-aside {
  font-size: 15px !important;
  color: var(--fg-3) !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.setup-devices {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: 20px;
}
.setup-front {
  grid-area: 1 / 1;
  transform: translateX(-13%) rotate(-3deg);
  z-index: 2;
}
.setup-back {
  grid-area: 1 / 1;
  transform: translate(26%, 8%) rotate(4deg);
  opacity: 0.9;
}
@media (min-width: 900px) {
  .setup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  }
}

/* ---------- cues, half-bleed photo ---------- */
.cues {
  margin-top: var(--gap-xl);
  display: grid;
  align-items: stretch;
}
.cues-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: #0a0b0c;
}
.cues-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}
.cues-copy {
  padding: clamp(36px, 6vw, 92px) var(--pad);
  max-width: 720px;
  align-self: center;
}
.cues-copy p {
  margin-top: 18px;
  color: var(--fg-2);
  font-size: clamp(16px, 1.25vw, 19px);
}
.cues-device {
  margin-top: 34px;
}
@media (min-width: 900px) {
  .cues {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  }
  .cues-copy {
    padding-right: clamp(24px, 6vw, 110px);
  }
  .cues-media {
    height: 100%;
  }
  .cues-img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 560px;
  }
}

/* ---------- after, staggered card grid ---------- */
.after {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--gap-xl) var(--pad) 0;
}
.after-head p {
  margin-top: 20px;
  color: var(--fg-2);
  font-size: clamp(16px, 1.25vw, 19px);
}
.after-grid {
  margin-top: clamp(40px, 6vw, 76px);
  display: grid;
  gap: clamp(30px, 4vw, 56px);
}
.acard h3 {
  margin-top: 22px;
}
.acard p {
  margin-top: 8px;
  color: var(--fg-3);
  font-size: 15px;
}
.acard-shot {
  display: grid;
  justify-items: start;
}
@media (min-width: 860px) {
  /* Three items, three cells, deliberately unequal. The Jumpstart card is the
     one with the most to explain, so it gets the width and the larger device. */
  .after-grid {
    grid-template-columns: 0.85fr 0.85fr 1.3fr;
    align-items: end;
  }
  .acard-1 {
    padding-bottom: clamp(20px, 4vw, 64px);
  }
  .acard-2 {
    padding-bottom: clamp(40px, 8vw, 128px);
  }
}

/* ---------- pricing, two-column comparison ---------- */
.price {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--gap-xl) var(--pad) 0;
}
.price-head h2 {
  margin-top: 0.2em;
}
.price-lede {
  margin-top: 20px;
  color: var(--fg-2);
  font-size: clamp(16px, 1.25vw, 19px);
}
.price-grid {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid;
  gap: clamp(28px, 4vw, 64px);
}
.price-col h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.price-col ul {
  margin-top: 6px;
}
.price-col li {
  padding: 11px 0;
  font-size: 16px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line);
}
.is-pro h3 {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}
.price-note {
  margin-top: 22px;
  font-size: 15px;
  color: var(--fg-3);
  max-width: 42ch;
}
@media (min-width: 780px) {
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- never, large-type list ---------- */
.never {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--gap-xl) var(--pad) 0;
}
.never-list {
  margin-top: clamp(26px, 4vw, 48px);
  display: grid;
  gap: 0 clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
}
.never-list li {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.25;
  color: var(--fg-2);
  padding: clamp(8px, 1vw, 14px) 0;
  border-bottom: 1px solid var(--line);
}
.never-body {
  margin-top: clamp(28px, 4vw, 44px);
  color: var(--fg-3);
  font-size: 16px;
}
@media (min-width: 700px) {
  .never-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- documents ---------- */
.doc {
  max-width: 900px;
  margin-inline: auto;
  padding: calc(var(--bar-h) + clamp(40px, 7vw, 96px)) var(--pad) clamp(48px, 7vw, 96px);
}
.doc-head h1 {
  font-size: clamp(40px, 5.6vw, 82px);
}
.doc-updated {
  margin-top: 16px;
  font-size: 13px;
  color: var(--fg-3);
}
.doc-lede {
  margin-top: 18px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg-2);
  max-width: 56ch;
}
.dsec {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.dsec h2 {
  font-size: clamp(24px, 2.6vw, 34px);
}
.dsec h3 {
  margin-top: 28px;
}
.dsec p {
  margin-top: 14px;
  color: var(--fg-2);
  max-width: 66ch;
}
.faq h3 {
  margin-top: 30px;
}
.checklist {
  margin-top: 14px;
  max-width: 66ch;
}
.checklist li {
  padding: 10px 0 10px 22px;
  position: relative;
  color: var(--fg-2);
  font-size: 16px;
  border-bottom: 1px solid var(--line);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 10px;
  height: 2px;
  background: var(--accent);
}
.mailto {
  margin-top: 22px;
}
.mailto a {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  word-break: break-word;
}
.placeholder {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px solid #f2aa2a;
  background: var(--bg-2);
  color: var(--fg-2);
}

/* ---------- footer ---------- */
.foot {
  margin-top: var(--gap-xl);
  border-top: 1px solid var(--line);
}
/* On document pages the footer follows a 900px measure, so it lines up with
   the text above it instead of drifting to the far edge. */
main.doc + .foot .foot-in {
  max-width: 900px;
}
.foot-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(38px, 5vw, 64px) var(--pad) clamp(46px, 6vw, 78px);
  display: grid;
  gap: clamp(28px, 4vw, 60px);
}
.foot-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 0.9;
  max-width: none;
}
.foot-note {
  margin-top: 16px;
  font-size: 15px;
  color: var(--fg-3);
  max-width: 40ch;
}
.foot-cols {
  display: grid;
  gap: 22px;
  align-content: start;
}
.foot nav {
  display: grid;
  gap: 2px;
  justify-items: start;
}
.footlink {
  font-size: 16px;
  padding: 7px 0;
  text-decoration: none;
  color: var(--fg-2);
  border-bottom: 1px solid transparent;
}
.footlink:hover {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.foot-meta {
  font-size: 15px;
  color: var(--fg-3);
}
.foot-meta a {
  color: var(--fg-2);
}
@media (min-width: 760px) {
  .foot-in {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* ---------- motion ----------
   Every animation here has one job. The hero device settles because it is the
   product arriving. Sections rise a little because the page is long and the
   movement marks where a new idea starts. The device screen swaps because the
   timer really does cut between phases like that.

   Content is visible by default. The `anim` class is added by script only when
   reduced motion is off, so a blocked or failed script can never hide a
   section. */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim [data-reveal].in {
  opacity: 1;
  transform: none;
}
.beat-kicker {
  transition: color 0.25s linear;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  /* Opacity only. This element carries a positioning transform, and an
     animation that ends at `transform: none` would silently overwrite it. */
  .hero-device {
    animation: fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.12s;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .hero-copy > *:nth-child(2) {
    animation-delay: 0.07s;
  }
  .hero-copy > *:nth-child(3) {
    animation-delay: 0.13s;
  }
  .hero-copy > *:nth-child(4) {
    animation-delay: 0.19s;
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}