/* trycompound.cc
   One stylesheet for every page: tokens, type, the nav and footer chrome, and
   the blocks the pages are built from. Pages add only what is theirs. */

:root {
  color-scheme: light;

  /* Paper and ink */
  --paper: #faf6f0;
  --card: #ffffff;
  --ink: #111111;
  --ink-2: rgba(17, 17, 17, 0.68);
  --ink-3: rgba(17, 17, 17, 0.63);
  --hair: rgba(17, 17, 17, 0.1);
  --wash: rgba(17, 17, 17, 0.045);

  /* The accent, and its ladder */
  --amber: #ffaa01;
  --amber-2: #ffc451;
  --amber-3: #ffd98a;
  --amber-4: #ffefc7;

  /* Panel tints, each with the ink that sits on it */
  --cream: #fff3c4;      --cream-ink: #4a3a00;
  --peach: #ffdcc2;      --peach-ink: #5a2e0a;
  --stone: #e9e4dc;      --stone-ink: #242424;
  --sky:   #d9e8f2;      --sky-ink:   #12324a;

  /* Black blocks */
  --black: #0b0b0b;
  --on-black: #ffffff;
  --on-black-2: rgba(255, 255, 255, 0.72);
  --on-black-3: rgba(255, 255, 255, 0.55);
  --on-black-hair: rgba(255, 255, 255, 0.14);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --pill: 999px;

  --shadow-float: 0 10px 30px rgba(17, 17, 17, 0.1), 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-card: 0 12px 28px rgba(17, 17, 17, 0.08);
  --shadow-device: 0 30px 60px rgba(17, 17, 17, 0.28), 0 8px 16px rgba(17, 17, 17, 0.14);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 16px;           /* the page edge every card keeps */
  --wrap: 1200px;           /* content width inside a block */
  --wrap-narrow: 760px;     /* prose */
  --nav-h: 64px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);          /* hover and colour */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);    /* things arriving */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* a disc growing into place */
  --fast: 160ms;
  --reveal: 640ms;          /* one block settling into place */
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "rlig" 1, "calt" 1, "ss03" 1;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
strong, b { font-weight: 700; }
em { font-style: italic; }
:focus-visible {
  outline: 3px solid var(--card);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ink);
  border-radius: 6px;
}
::selection { background: var(--amber-3); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }
  /* Nothing may be left hidden by a reveal that never gets to run. */
  .js [data-reveal],
  .js .day .day-no, .js .day .day-lifts li,
  .js .rung .circ { opacity: 1 !important; transform: none !important; }
  .js .chip svg path { stroke-dashoffset: 0 !important; }
}

/* ------------------------------------------------------------------- type */

.display, .h1, .h2, .h3, .h4, h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}
.display { font-size: clamp(44px, 2.4rem + 3.2vw, 80px); line-height: 0.98; letter-spacing: -0.04em; }
.h1, h1  { font-size: clamp(40px, 2rem + 2.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.h2, h2  { font-size: clamp(34px, 1.6rem + 2.3vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
.h3, h3  { font-size: clamp(24px, 1.2rem + 1.2vw, 34px); line-height: 1.1; letter-spacing: -0.025em; }
.h4, h4  { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.lead    { font-size: clamp(18px, 1rem + 0.5vw, 22px); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.lead-lg { font-size: clamp(20px, 1.1rem + 0.7vw, 26px); line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.small   { font-size: 15px; line-height: 1.5; }
.meta    { font-size: 14px; color: var(--ink-3); }
.kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.center { text-align: center; }
.measure { max-width: 34em; }
.measure.center, .center .measure { margin-left: auto; margin-right: auto; }
.tint-ink { color: var(--tint-ink, inherit); }
.quiet { color: var(--ink-2); }

/* ----------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-left: auto; margin-right: auto; }
#program, #features, #pricing { scroll-margin-top: calc(var(--nav-h) + 24px); }
.section { padding: 96px var(--gutter); }
.section-tight { padding: 64px var(--gutter); }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .lead, .section-head .lead-lg { margin-top: 18px; margin-left: auto; margin-right: auto; max-width: 36em; }
.section-head .h1, .section-head .h2, .section-head .h3, .section-head h1, .section-head h2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.page-top { padding-top: calc(var(--nav-h) + 64px); }
.stack > * + * { margin-top: 1em; }
.hair { height: 1px; background: var(--hair); border: 0; }

@media (max-width: 720px) {
  .section { padding: 64px var(--gutter); }
  .section-tight { padding: 48px var(--gutter); }
  .section-head { margin-bottom: 32px; }
  .page-top { padding-top: calc(var(--nav-h) + 40px); }
}
/* On a phone the page is one column and every block is read in full, so the
   air between them is paid for in scroll rather than spent on composition. */
@media (max-width: 560px) {
  .section { padding: 52px var(--gutter); }
  .section-tight { padding: 40px var(--gutter); }
  .section-head { margin-bottom: 26px; }
  .section-head .lead, .section-head .lead-lg { margin-top: 14px; }
}

/* ------------------------------------------------------------------ cards */

/* A rounded block that keeps the page gutter. Tint it with a --tint pair. */
.card {
  margin: 0 var(--gutter);
  border-radius: var(--radius-xl);
  background: var(--card);
}
.card-black { background: var(--black); color: var(--on-black); }
.card-black .kicker { color: var(--on-black-3); }
.card-black .lead, .card-black .lead-lg, .card-black .quiet { color: var(--on-black-2); }
.card + .card { margin-top: var(--gutter); }
.tint-cream { --tint: var(--cream); --tint-ink: var(--cream-ink); --tint-deep: rgba(74, 58, 0, 0.09); }
.tint-peach { --tint: var(--peach); --tint-ink: var(--peach-ink); --tint-deep: rgba(90, 46, 10, 0.09); }
.tint-stone { --tint: var(--stone); --tint-ink: var(--stone-ink); --tint-deep: rgba(36, 36, 36, 0.07); }
.tint-sky   { --tint: var(--sky);   --tint-ink: var(--sky-ink);   --tint-deep: rgba(18, 50, 74, 0.08); }
.tint-amber { --tint: var(--amber); --tint-ink: var(--ink);       --tint-deep: rgba(17, 17, 17, 0.08); }
.tint-amber-2 { --tint: var(--amber-2); --tint-ink: var(--ink);   --tint-deep: rgba(17, 17, 17, 0.08); }
.tint-amber-3 { --tint: var(--amber-3); --tint-ink: var(--ink);   --tint-deep: rgba(17, 17, 17, 0.07); }
.tint-amber-4 { --tint: var(--amber-4); --tint-ink: var(--ink);   --tint-deep: rgba(17, 17, 17, 0.06); }
.tint-white { --tint: var(--card); --tint-ink: var(--ink); --tint-deep: var(--wash); }
/* The tint classes only set the pair; a block paints itself from --tint where it
   wants colour (.card, .panel, .bento-cell, .post-card, .pill-link, .day-no). */
.card[class*="tint-"] { background: var(--tint); color: var(--tint-ink); }
.card-black[class*="tint-"] { background: var(--black); color: var(--on-black); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-black { background: var(--black); color: var(--on-black); }
.btn-black:hover { background: #2a2a2a; }
.btn-white { background: var(--card); color: var(--ink); border-color: var(--hair); }
.btn-white:hover { background: #f3efe8; }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: var(--amber-2); }
.btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); }
.btn-lg { min-height: 64px; padding: 0 32px; font-size: 18px; }
.btn-lg svg { width: 20px; height: 20px; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ctas.center { justify-content: center; }
@media (max-width: 520px) {
  .ctas { flex-direction: column; align-items: stretch; }
  .ctas .btn { width: 100%; }
}
@media (max-width: 400px) {
  .btn-lg { min-height: 58px; padding: 0 18px; font-size: 16px; }
  .btn-lg svg { width: 18px; height: 18px; }
}

/* -------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--nav-h);
  padding: 8px 8px 8px 28px;
  border-radius: var(--pill);
  background: var(--card);
  box-shadow: var(--shadow-float);
  max-width: 100%;
}
.nav-brand { display: flex; align-items: center; margin-right: 24px; color: var(--ink); }
/* The wordmark's descender sits inside its box, so the visual body rides high: nudge it down. */
.nav-brand svg { height: 23px; width: auto; transform: translateY(2px); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color var(--fast) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--wash); }
.nav-cta { margin-left: 6px; }
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pill);
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { width: 22px; height: 22px; }
.nav-menu summary .close { display: none; }
.nav-menu[open] summary .open { display: none; }
.nav-menu[open] summary .close { display: block; }
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 16px);
  right: -8px;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.nav-menu-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 17px;
  font-weight: 500;
}
.nav-menu-panel a:hover { background: var(--wash); }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-pill { width: 100%; justify-content: space-between; padding-left: 20px; }
  .nav-brand { margin-right: auto; padding-right: 12px; }
  .nav-brand svg { height: 20px; }
  .nav-cta { margin-left: 0; min-height: 42px; padding: 0 16px; font-size: 14px; }
  .nav-cta-long { display: none; }
}
@media (max-width: 400px) {
  .nav-pill { gap: 4px; padding-left: 16px; }
  .nav-brand { padding-right: 8px; }
  .nav-brand svg { height: 18px; }
  .nav-cta { padding: 0 14px; font-size: 13px; gap: 8px; }
  .nav-cta svg { width: 16px; height: 16px; }
  .nav-menu summary { width: 40px; }
  .nav-menu-panel { min-width: 200px; }
}
@media (max-width: 340px) {
  .nav-cta { padding: 0 13px; }
  .nav-cta > span {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

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

.hero {
  position: relative;
  margin: 8px var(--gutter) 0;
  padding: calc(var(--nav-h) + 64px) 24px 0;
  border-radius: var(--radius-xl);
  background: var(--amber);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
}
.hero .display { max-width: 12ch; margin: 0 auto; }
.hero .lead { max-width: 36em; margin: 22px auto 0; color: rgba(17, 17, 17, 0.72); }
.hero .ctas { margin-top: 32px; justify-content: center; }
.hero-figure { position: relative; margin-top: 56px; }
@media (max-width: 720px) {
  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero .display { max-width: 11ch; }
  .hero-figure { margin-top: 48px; }
}
@media (max-width: 560px) {
  .hero { padding: calc(var(--nav-h) + 40px) 20px 0; }
  .hero .lead { margin-top: 18px; }
  .hero .ctas { margin-top: 26px; gap: 10px; }
}

/* ---------------------------------------------------------------- devices */

/* A phone drawn in CSS around a raw screenshot. Set --w for its width. */
.phone {
  --w: 300px;
  width: var(--w);
  padding: calc(var(--w) * 0.032);
  background: var(--black);
  border-radius: calc(var(--w) * 0.165);
  box-shadow: inset 0 0 0 calc(var(--w) * 0.006) #3a3a3a, var(--shadow-device);
  flex: none;
}
.phone img { width: 100%; border-radius: calc(var(--w) * 0.135); background: #fff; }
.phone picture, .watch picture { display: block; }
.phone-flat { box-shadow: inset 0 0 0 calc(var(--w) * 0.006) #3a3a3a; }

/* A watch: a black case with a crown, around a square-cornered screen. */
.watch {
  --w: 200px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.075);
  background: var(--black);
  border-radius: calc(var(--w) * 0.27);
  box-shadow: inset 0 0 0 calc(var(--w) * 0.008) #3a3a3a, var(--shadow-device);
  flex: none;
}
.watch img { width: 100%; border-radius: calc(var(--w) * 0.2); background: #000; }
.watch::after {
  content: "";
  position: absolute;
  right: calc(var(--w) * -0.045);
  top: 30%;
  width: calc(var(--w) * 0.06);
  height: calc(var(--w) * 0.18);
  border-radius: 4px;
  background: #2a2a2a;
}
.watch-flat { box-shadow: inset 0 0 0 calc(var(--w) * 0.008) #3a3a3a; }

/* ------------------------------------------------------------------- days */

/* The four days, each one showing what is actually in it. The tint is a mark
   on the card — the numeral disc and the rule under the head — rather than the
   card's whole ground: four filled blocks read as a ramp from light to dark,
   and these four days are peers. */
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.day {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
}
.day-head { display: flex; align-items: flex-start; gap: 14px; }
.day-no {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint);
  color: var(--tint-ink);
  font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.day-name h3 { font-size: 24px; letter-spacing: -0.025em; line-height: 1.1; }
.day-name p { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }

.day-lifts { margin-top: 22px; padding-top: 6px; border-top: 2px solid var(--tint); }
.day-lifts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 40px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.day-lifts .lift { flex: 1; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.day-lifts .rx { flex: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-more { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); }

/* The rotation, said once, under the four of them. */
.cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px auto 0;
  width: fit-content;
  max-width: 100%;
  padding: 12px 22px;
  border-radius: var(--pill);
  background: var(--card);
  border: 1px solid var(--hair);
  font-size: 15px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cycle svg { width: 18px; height: 18px; flex: none; color: var(--amber); }

@media (max-width: 1040px) { .days { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .days { grid-template-columns: 1fr; gap: 12px; }
  .day { padding: 20px 18px 16px; }
  .day-no { width: 38px; height: 38px; font-size: 16px; }
  .day-name h3 { font-size: 21px; }
  .day-lifts { margin-top: 16px; }
  .day-lifts li { min-height: 0; padding: 8px 0; }
  .day-more { padding-top: 10px; }
  .cycle { margin-top: 20px; padding: 12px 18px; font-size: 14px; }
}

/* ----------------------------------------------------------------- panels */

/* A big tinted feature panel: headline, a lead, a figure well. */
.panel {
  margin: 0 var(--gutter) var(--gutter);
  padding: 96px 24px;
  border-radius: var(--radius-xl);
  background: var(--tint);
  color: var(--tint-ink);
  text-align: center;
}
.panel .h1, .panel h2 { max-width: 14ch; margin: 0 auto; }
.panel .lead { color: inherit; opacity: 0.8; max-width: 30em; margin: 20px auto 0; }
.panel-well {
  position: relative;
  max-width: 768px;
  margin: 48px auto 0;
  padding: 48px 24px;
  border-radius: var(--radius-lg);
  background: var(--tint-deep);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  overflow: hidden;
}
.panel-well.bleed { padding-bottom: 0; max-height: 520px; }
.panel-well.bleed .phone { margin-bottom: calc(var(--w) * -0.9); }
/* Three phones in the width two were drawn at: the warm-up, the rest and the
   mobility hold, one for each line of the heading over them. They stand
   narrower rather than bleeding off the sides — the outer two are the claim,
   not decoration. */
.panel-well.bleed.well-trio .phone { --w: clamp(160px, 24vw, 220px); margin-bottom: calc(var(--w) * -0.25); }
@media (max-width: 720px) {
  .panel { padding: 64px 20px; }
  .panel .h1, .panel h2 { font-size: clamp(30px, 15px + 5vw, 50px); max-width: 16ch; }
  .panel .lead { margin-top: 16px; }
  .panel-well { margin-top: 36px; padding: 32px 16px; gap: 16px; }
  /* Three phones never fit a phone's own width, so the outer two are peeked
     at — the same crop the pair has always taken here, one screen wider. */
  .panel-well.bleed.well-trio .phone { --w: clamp(118px, 33vw, 180px); }
}
@media (max-width: 560px) {
  .panel { padding: 52px 18px; }
  .panel-well { margin-top: 30px; padding: 26px 12px; gap: 12px; }
}

/* ------------------------------------------------------------------ bento */

.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bento-cell {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tint, var(--card));
  color: var(--tint-ink, var(--ink));
}
.bento-cell.text { display: flex; flex-direction: column; justify-content: space-between; padding: 44px; }
.bento-cell.text h3 { font-size: clamp(30px, 1.6rem + 1.6vw, 46px); max-width: 13ch; letter-spacing: -0.035em; }
.bento-cell.text p { font-size: clamp(18px, 1rem + 0.6vw, 24px); line-height: 1.35; max-width: 24em; opacity: 0.85; text-wrap: pretty; }
.bento-cell.figure { display: flex; align-items: flex-end; justify-content: center; padding: 48px 32px 0; }
.bento-cell.figure .phone { margin-bottom: calc(var(--w) * -0.75); }
/* The watch pair is centred in its cell rather than bleeding off the bottom the
   way the phones do, and its stagger is equal and opposite so the pair still
   reads as centred. */
.bento-cell.figure:has(.watches),
.bento-cell.figure:has(.phones) { align-items: center; padding: 40px 32px; }
.bento-cell.figure .watches { display: flex; align-items: center; gap: 24px; }
.bento-cell.figure .watches .watch:first-child { transform: translateY(20px); }
.bento-cell.figure .watches .watch:last-child { transform: translateY(-20px); }
/* A pair of phones, staggered like the watch pair — two screens that answer
   one sentence between them (the stopwatch and the carry, for "the right
   control for every exercise"), so both are shown whole. */
.bento-cell.figure .phones { display: flex; align-items: center; gap: 20px; }
.bento-cell.figure .phones .phone { --w: clamp(112px, 15vw, 172px); margin-bottom: 0; }
.bento-cell.figure .phones .phone:first-child { transform: translateY(18px); }
.bento-cell.figure .phones .phone:last-child { transform: translateY(-18px); }
/* The Lock Screen is the one screenshot whose subject sits low on the glass —
   the activity is two thirds of the way down — so this phone doesn't bleed off
   the bottom the way the others do. It stands whole and centred, the way the
   watch pair does. */
.bento-cell.figure:has(.phone-peek) { align-items: center; padding: 40px 32px; }
.bento-cell.figure .phone-peek { --w: clamp(150px, 19vw, 232px); margin-bottom: 0; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell { min-height: 360px; }
  .bento-cell.text { min-height: 0; padding: 32px; justify-content: flex-start; gap: 20px; }
}
/* Stacked, the checkerboard's middle pair arrives text-first while the other
   two arrive figure-first. One column reads better if every claim follows the
   screen it is made about, so the pair is swapped — both cells are inert, so
   nothing in the tab order moves with them. */
@media (max-width: 860px) {
  .bento > :nth-child(1) { order: 1; }
  .bento > :nth-child(2) { order: 2; }
  .bento > :nth-child(3) { order: 4; }
  .bento > :nth-child(4) { order: 3; }
  .bento > :nth-child(5) { order: 5; }
  .bento > :nth-child(6) { order: 6; }
}
@media (max-width: 560px) {
  .bento { gap: 12px; }
  .bento-cell { min-height: 0; }
  .bento-cell.text { padding: 28px 24px; gap: 16px; }
  .bento-cell.figure { padding: 36px 24px 0; }
  .bento-cell.figure:has(.watches),
  .bento-cell.figure:has(.phones),
  .bento-cell.figure:has(.phone-peek) { padding: 32px 24px; }
}

/* ----------------------------------------------------------- pill links */

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--pill);
  background: var(--tint, var(--card));
  color: var(--tint-ink, var(--ink));
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform var(--fast) var(--ease);
}
.pill-link svg { width: 20px; height: 20px; flex: none; transition: transform var(--fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pill-link:hover { transform: translateY(-2px); }
  /* The arrow leans the way the link goes. */
  .pill-link:hover svg { transform: translateX(3px); }
}
.pills > :nth-child(6n+1) { --tint: var(--amber); --tint-ink: var(--ink); }
.pills > :nth-child(6n+2) { --tint: var(--sky); --tint-ink: var(--sky-ink); }
.pills > :nth-child(6n+3) { --tint: var(--peach); --tint-ink: var(--peach-ink); }
.pills > :nth-child(6n+4) { --tint: var(--stone); --tint-ink: var(--stone-ink); }
.pills > :nth-child(6n+5) { --tint: var(--cream); --tint-ink: var(--cream-ink); }
.pills > :nth-child(6n+6) { --tint: var(--amber-3); --tint-ink: var(--ink); }
@media (max-width: 560px) {
  .pills { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .pill-link { min-height: 52px; padding: 0 20px; font-size: 16px; justify-content: space-between; }
}

/* ----------------------------------------------------------- post cards */

.posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.post-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 300px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--tint, var(--card));
  color: var(--tint-ink, var(--ink));
  transition: transform var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { transform: translateY(-3px); }
}
.post-card .kicker { color: inherit; opacity: 0.6; }
.post-card h2, .post-card h3 { margin-top: 14px; font-size: clamp(24px, 1.2rem + 1vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }
.post-card p { margin-top: 12px; font-size: 16px; line-height: 1.5; opacity: 0.8; text-wrap: pretty; }
.post-card .meta { color: inherit; opacity: 0.6; font-size: 14px; }
.post-card.featured { grid-column: 1 / -1; min-height: 420px; padding: 48px; }
.post-card.featured h2 { font-size: clamp(32px, 1.6rem + 2vw, 56px); max-width: 16ch; }
.post-card.featured p { font-size: 18px; max-width: 34em; }
.posts-grid > :nth-child(6n+1):not(.featured) { --tint: var(--cream); --tint-ink: var(--cream-ink); }
.posts-grid > :nth-child(6n+2):not(.featured) { --tint: var(--card); --tint-ink: var(--ink); }
.posts-grid > :nth-child(6n+3):not(.featured) { --tint: var(--peach); --tint-ink: var(--peach-ink); }
.posts-grid > :nth-child(6n+4):not(.featured) { --tint: var(--stone); --tint-ink: var(--stone-ink); }
.posts-grid > :nth-child(6n+5):not(.featured) { --tint: var(--sky); --tint-ink: var(--sky-ink); }
.posts-grid > :nth-child(6n+6):not(.featured) { --tint: var(--card); --tint-ink: var(--ink); }
@media (max-width: 760px) {
  .posts-grid { grid-template-columns: 1fr; gap: 16px; }
  .post-card { padding: 28px; min-height: 0; }
  .post-card.featured { padding: 32px; min-height: 0; }
}

/* --------------------------------------------------------- feature grid */

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--tint, var(--card));
  color: var(--tint-ink, var(--ink));
  border: 1px solid var(--hair);
}
.feature .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber);
  color: var(--ink);
}
.feature .icon svg { width: 22px; height: 22px; }
.feature h3 { margin-top: 22px; font-size: 22px; letter-spacing: -0.02em; }
.feature p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- prose */

.prose { font-size: 18px; line-height: 1.65; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: clamp(28px, 1.4rem + 1.2vw, 38px); line-height: 1.1; margin-top: 2em; }
.prose h3 { font-size: 24px; line-height: 1.2; margin-top: 1.8em; }
.prose h4 { font-size: 19px; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; }
.prose p, .prose li { color: rgba(17, 17, 17, 0.86); }
.prose a { text-decoration: underline; text-decoration-color: rgba(17, 17, 17, 0.3); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: var(--amber); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }
.prose blockquote { padding: 4px 0 4px 24px; border-left: 3px solid var(--amber); color: var(--ink-2); font-size: 1.05em; }
.prose hr { height: 1px; border: 0; background: var(--hair); margin: 2.4em 0; }
.prose figure { margin-top: 2em; }
.prose img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--hair); }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--wash); padding: 2px 6px; border-radius: 6px; }
.prose pre { padding: 20px 22px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius-md); overflow-x: auto; }
.prose pre code { background: none; padding: 0; font-size: 14px; line-height: 1.6; }
.prose .scroller { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.prose strong { color: var(--ink); }
.prose .kicker + * { margin-top: 12px; }

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

.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.faq {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--hair);
}
.faq h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.faq p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.faq p + p { margin-top: 10px; }
.faq a { text-decoration: underline; text-decoration-color: rgba(17, 17, 17, 0.3); text-underline-offset: 3px; }
.faq a:hover { text-decoration-color: var(--amber); }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 16px; } .faq { padding: 26px; } }

/* --------------------------------------------------------- breadcrumbs */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { opacity: 0.5; }

/* ------------------------------------------------------------ footer */

.footer {
  margin: var(--gutter);
  padding: 64px 40px 32px;
  border-radius: var(--radius-xl);
  background: var(--black);
  color: var(--on-black);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand svg { height: 30px; width: auto; color: var(--on-black); }
.footer-brand p { margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--on-black-2); max-width: 26em; }
.footer h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-black-3); }
.footer ul { margin-top: 18px; }
.footer li + li { margin-top: 4px; }
.footer li a { display: inline-block; padding: 6px 0; font-size: 17px; color: var(--on-black); border-radius: 6px; transition: color var(--fast) var(--ease); }
.footer li a:hover { color: var(--amber); }
.footer-cta { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-cta p { font-size: clamp(24px, 1.2rem + 1.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; }
.footer-legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--on-black-hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--on-black-3);
}
.footer-legal a { color: var(--on-black-2); }
.footer-legal a:hover { color: var(--on-black); }
.footer-legal .copy { margin-left: auto; }
@media (max-width: 900px) {
  .footer { padding: 48px 28px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer { padding: 40px 24px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-brand p { margin-top: 14px; }
  .footer ul { margin-top: 12px; }
  .footer li a { padding: 4px 0; }
  .footer-cta { margin-top: 44px; }
  .footer-legal { margin-top: 36px; padding-top: 20px; }
  .footer-legal .copy { margin-left: 0; width: 100%; }
}

/* ----------------------------------------------------------------- motion */

/* One block settling into place as it comes into view. The hidden state is
   scoped to .js (set in the document head) so a page with scripting off is
   simply the page, fully drawn. Delays come from --reveal-delay, which the
   observer writes onto the children of any [data-stagger] container. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--reveal) var(--ease-out),
    transform var(--reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* A chip's check is drawn rather than faded — the one mark on the page that
   says "done", so it is made rather than found. */
.js .chip svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 520ms var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}
.js .chip.is-in svg path { stroke-dashoffset: 0; }

/* A day card writes itself out: the disc lands, then the lifts, a row at a
   time, which is the card saying what it holds rather than just appearing. */
.js .day .day-lifts li {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 380ms var(--ease-out),
    transform 380ms var(--ease-out);
}
/* The disc grows into place instead of fading: it waits for its card to stop
   moving first, or the two motions read as one drift. The opacity is spent in
   the first third so what you see is the scale, not a fade. */
.js .day .day-no {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transition:
    opacity 140ms linear,
    transform 440ms var(--ease-pop);
  transition-delay: calc(var(--reveal-delay, 0ms) + 300ms);
}
.js .day .day-lifts li:nth-child(1) { transition-delay: calc(var(--reveal-delay, 0ms) + 220ms); }
.js .day .day-lifts li:nth-child(2) { transition-delay: calc(var(--reveal-delay, 0ms) + 275ms); }
.js .day .day-lifts li:nth-child(3) { transition-delay: calc(var(--reveal-delay, 0ms) + 330ms); }
.js .day .day-lifts li:nth-child(4) { transition-delay: calc(var(--reveal-delay, 0ms) + 385ms); }
.js .day.is-in .day-no,
.js .day.is-in .day-lifts li { opacity: 1; transform: none; }

/* A rung's disc lands a beat after its card, so the number reads as the point. */
.js .rung .circ {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transition:
    opacity 140ms linear,
    transform 440ms var(--ease-pop);
  transition-delay: calc(var(--reveal-delay, 0ms) + 300ms);
}
.js .rung.is-in .circ { opacity: 1; transform: none; }

/* The nav pill comes down onto the page rather than being there already. */
@keyframes nav-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.nav-pill { animation: nav-in 620ms var(--ease-out) 60ms backwards; }

/* --------------------------------------------------------- utilities */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; } .mt-8 { margin-top: 64px; }

/* legal + support */

/* A card that sits inside a .wrap and lets the wrap keep the page gutter,
   instead of holding the gutter itself. */
.card-flush { margin-left: 0; margin-right: 0; }

/* The "short version" box at the head of a legal page. */
.summary {
  margin-top: 40px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--cream);
  color: var(--cream-ink);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}
.summary .kicker { color: inherit; opacity: 0.6; }
.summary .kicker + p { margin-top: 12px; }
.summary p + p { margin-top: 0.9em; }
@media (max-width: 720px) { .summary { padding: 26px 24px; font-size: 17px; } }