@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/newsreader-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
/* From the Offhand design system: five colour names, warm and low-contrast.
   Colour is reinforcement, never the only signal. */
:root {
  --canvas: #f5f2e8;
  --paper: #fcfbf6;
  --ink: #1c1f1c;
  --moss: #3d5947;

  --ink-secondary: rgba(28, 31, 28, .6);
  --ink-tertiary: rgba(28, 31, 28, .3);
  --ink-quaternary: rgba(28, 31, 28, .18);
  --ink-checkbox: rgba(28, 31, 28, .35);
  --ink-border-soft: rgba(28, 31, 28, .07);

  --moss-badge: rgba(61, 89, 71, .18);
  --warning: #ff9500;

  --font-system: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --font-serif: "Newsreader", "New York", ui-serif, Georgia, serif;

  --tracking-section: 1.3px;

  /* The rest of the Offhand design system's scales, from
     _design/_ds/offhand-design-system-…/tokens/. Values are that system's,
     unchanged; only the ones this site actually uses are carried over. */
  --ink-border-soft: rgba(28, 31, 28, .07);
  --hairline: rgba(255, 255, 255, .7);
  --border-card: var(--hairline);
  --action-primary: var(--ink);
  --text-on-primary: var(--canvas);
  --text-secondary: var(--ink-secondary);
  --text-tertiary: var(--ink-tertiary);

  --space-1: 4px;   --space-2: 7px;   --space-2-5: 8px; --space-3: 10px;
  --space-4: 12px;  --space-5: 14px;  --space-7: 18px;  --space-8: 20px;
  --space-9: 22px;  --space-10: 24px; --space-12: 32px;

  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  --type-title3: 400 20px/25px var(--font-system);
  --type-headline: 600 17px/22px var(--font-system);
  --type-body: 400 17px/22px var(--font-system);
  --type-subheadline: 400 15px/20px var(--font-system);
  --type-subheadline-semibold: 600 15px/20px var(--font-system);
  --type-footnote: 400 13px/18px var(--font-system);
  --type-caption2-bold: 700 11px/13px var(--font-system);
  --type-transcript: 400 17px/26px var(--font-serif);

  --page-max: 1180px;
  --page-gutter: 40px;

  /* Home.dc.html's own measure: 1080 with a 24px gutter. */
  --shell-max: 1080px;
  --shell-gutter: 24px;
}

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

html {
  scroll-behavior: smooth;
  /* Stop iOS inflating body text when a phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* Keep the page clear of the notch and the home indicator in landscape. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: var(--moss-badge);
}

a { color: var(--moss); text-decoration: none; }
a:hover { color: var(--ink); }

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

/* The icon sprite carries `hidden`, but the UA rule behind that attribute is
   scoped to HTML elements — an inline <svg> is a foreign element and keeps
   `display: inline`, which was reserving 150px at the top of every page. */
svg[hidden] { display: none; }

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

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

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ------------------------------------------------------------ type roles */
.eyebrow {
  margin: 0;
  font: 700 11px/13px var(--font-system);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.eyebrow-quiet { color: var(--ink-tertiary); }
.eyebrow-moss { color: var(--moss); }

.headline { margin: 0; font: 600 17px/22px var(--font-system); }
.body { margin: 0; font: 400 17px/22px var(--font-system); }
.sub { margin: 0; font: 400 15px/20px var(--font-system); }
.footnote { margin: 0; font: 400 13px/18px var(--font-system); }
.dim { color: var(--ink-secondary); }
.dimmer { color: var(--ink-tertiary); }
.serif { font-family: var(--font-serif); font-weight: 400; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font: 600 17px/22px var(--font-system);
  white-space: nowrap;
}
.btn:hover { color: var(--canvas); }

/* Apple's badge. The clear space Apple asks for is a tenth of the badge's
   height on every side, so the link carries it as padding and is pulled back
   by the same amount to keep the row's optical alignment. */
.badge-link {
  display: inline-block;
  padding: 5.6px;
  margin: -5.6px;
  line-height: 0;
}
.badge-link img { display: block; height: 56px; width: auto; }

.btn-small {
  height: 36px;
  padding: 0 18px;
  font: 600 15px/20px var(--font-system);
}

/* ------------------------------------------------------------------- nav */
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 0 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
/* The icon lost its ring in the app on 4 August, so the mark is now bare bars
   on canvas: no tile, nothing for a corner radius to round, and a little
   larger than the ringed version to hold the same weight beside the wordmark. */
.nav-brand img {
  width: 30px;
  height: 30px;
  display: block;
}
.nav-brand span {
  font: 600 17px/22px var(--font-system);
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  font: 400 15px/20px var(--font-system);
  color: var(--ink-secondary);
  /* The row wraps; the labels must not. Without this "How it works" breaks
     across two lines on a phone while its neighbours sit on one. */
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }

/* ---------------------------------------------------------------- header */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: end;
  padding: 104px 0 72px;
}
.masthead-research { grid-template-columns: minmax(0, 1fr) 320px; padding: 96px 0 56px; }

.masthead h1 {
  margin: 0;
  font: 700 68px/72px var(--font-system);
  letter-spacing: -0.03em;
}
.masthead h1.line-1 { max-width: 14ch; }
.masthead h1.line-2 { max-width: 16ch; color: var(--ink-tertiary); }
.masthead-research h1 {
  margin: 0 0 28px;
  font: 700 56px/60px var(--font-system);
  max-width: 22ch;
}
.masthead .eyebrow { margin-bottom: 22px; }
.lead {
  margin: 32px 0 0;
  font: 400 20px/30px var(--font-system);
  color: var(--ink-secondary);
  max-width: 46ch;
}
.masthead-research .lead { margin: 0; max-width: 56ch; }

.cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.cta-note { font: 400 15px/20px var(--font-system); color: var(--ink-tertiary); }

/* The device requirement. It sits under the CTA rather than inside the lead
   because it is the one thing a reader has to know before spending money, and
   an iPhone 14 owner who finds it out afterwards has been misled by omission. */
.requirement {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--ink-quaternary);
  font: 400 15px/22px var(--font-system);
  color: var(--ink-tertiary);
  max-width: 52ch;
}

/* The pre-launch home page. One column, no facts rail, no CTA — there is
   nothing to download yet and the page must not imply there is. */
.masthead-holding {
  grid-template-columns: minmax(0, 1fr);
  padding: 104px 0 96px;
}
.holding-status {
  margin: 28px 0 0;
  font: 600 20px/30px var(--font-system);
  max-width: 46ch;
}
.holding-links {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-quaternary);
  flex-wrap: wrap;
  max-width: 52ch;
}
.holding-links a {
  font: 600 17px/22px var(--font-system);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Long-form legal prose. Wider measure and looser leading than marketing copy,
   because these pages are read start to finish rather than scanned. */
.prose { max-width: 74ch; margin-top: 32px; }
.prose p {
  margin: 0 0 18px;
  font: 400 17px/28px var(--font-system);
  color: var(--ink-secondary);
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Warranty and liability disclaimers. Set apart and in caps — conspicuousness
   is a legal requirement for these two clauses, and it is the one place on this
   site where that outranks the house style. */
.legal-block {
  margin: 0 0 18px;
  padding: 22px 24px;
  border: 1px solid var(--ink-quaternary);
  border-left: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
}
.legal-block p {
  margin: 0;
  font: 600 14px/24px var(--font-system);
  letter-spacing: .2px;
  color: var(--ink);
}

.facts {
  margin: 0;
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--ink-quaternary);
  padding-top: 18px;
}
.masthead-research .facts { gap: 16px; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.facts dt { font: 400 15px/20px var(--font-system); color: var(--ink-secondary); }
.facts dd { margin: 0; font: 600 15px/20px var(--font-system); }

/* ------------------------------------------------------------ hero phone */
/* The handset is the films' own drawing, ported from
   LaunchAssets/src/store/DeviceFrame.tsx so the site, the films and the store
   stills show the same phone: a titanium rim, a black bezel, the screen cut
   to iOS's corner radius of 0.154 x screen width, and four side keys — "a
   phone with no buttons reads as a rectangle with a screenshot in it", in
   that file's words.

   Every figure below is that file's, restated as a percentage of the frame's
   own width so it holds at any size. The frame is 1 : 2.1235, so a corner
   given as `A% / B%` is one circle, not an ellipse: B is A divided by that
   ratio. */
.hero-phone { margin: 0; justify-self: center; width: 100%; max-width: 272px; }
.hero-phone-frame {
  position: relative;
  padding: 2.1411%;                       /* DeviceFrame's 17/760 inset */
  border-radius: 16.88% / 7.95%;          /* screenRadius + inset */
  background: linear-gradient(150deg, #83847C 0%, #2E2F2B 19%, #5A5B53 41%, #24251F 64%, #76776F 100%);
  box-shadow: 0 40px 80px -32px rgba(28, 31, 28, .55), 0 8px 24px -12px rgba(28, 31, 28, .35);
}
/* The bezel: the rim is 4/760, so this sits that far inside the titanium. */
.hero-phone-frame::before {
  content: "";
  position: absolute;
  inset: 0.5038%;
  border-radius: 16.55% / 7.75%;
  background: #050604;
}
.hero-phone-screen {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15.4% / 7.08%;           /* iOS's own, over the capture's ratio */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.phone-key {
  position: absolute;
  width: 0.7554%;
  border-radius: 0.38%;
  background: linear-gradient(180deg, #6E6F67 0%, #35362F 100%);
}
.key-mute { left: -0.5038%; top: 17.79%; height: 3.44%; }
.key-up   { left: -0.5038%; top: 24.79%; height: 5.93%; }
.key-down { left: -0.5038%; top: 31.91%; height: 5.93%; }
.key-side { right: -0.5038%; top: 26.81%; height: 9.02%; }




/* ------------------------------------------------------------- sections */
.section { padding: 136px 0 0; }
.section-tight { padding: 96px 0 0; }
.section-study { padding: 120px 0 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
}
.section-head h2 {
  margin: 0;
  font: 700 40px/44px var(--font-system);
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------- screen cards */
.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.screens > div { display: grid; gap: 20px; align-content: start; }
.screen-frame {
  border: 1px solid var(--ink-quaternary);
  border-radius: 36px;
  padding: 8px;
  background: var(--paper);
}
.screen-frame img { display: block; width: 100%; height: auto; border-radius: 28px; }
.screens .headline { margin-bottom: 4px; }

/* --------------------------------------------------------- figure 1 flow */
.figure { margin: 0; }
.figure-flow { padding: 64px 0 0; }

.device-boundary {
  border: 1px dashed var(--ink-tertiary);
  border-radius: 20px;
  padding: 44px 40px 40px;
  position: relative;
}
.device-boundary-label {
  position: absolute;
  top: -8px;
  left: 32px;
  background: var(--canvas);
  padding: 0 10px;
  font: 700 11px/16px var(--font-system);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--moss);
}

.flow {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
}
.flow-step {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  gap: 14px;
}
.flow-card {
  border: 1px solid var(--ink-quaternary);
  border-radius: 16px;
  background: var(--paper);
  padding: 20px;
  display: grid;
  gap: 12px;
  min-height: 132px;
  align-content: start;
  height: 100%;
}
.flow-metrics {
  border-top: 1px solid var(--ink-quaternary);
  padding-top: 10px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.flow-metrics > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.flow-metrics .k { font: 400 13px/18px var(--font-system); color: var(--ink-secondary); }
.flow-metrics .v { font: 600 13px/18px var(--font-system); }

.flow-arrow {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow {
  width: 100%;
  height: 1px;
  background: var(--ink-tertiary);
  position: relative;
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--ink-tertiary);
  border-right: 1px solid var(--ink-tertiary);
  transform: rotate(45deg);
}

.waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}
.waveform span {
  width: 3px;
  background: var(--moss);
  border-radius: 2px;
}

figcaption.caption {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}
figcaption.caption .label {
  font: 700 11px/18px var(--font-system);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  white-space: nowrap;
}
figcaption.caption .text {
  font: 400 13px/18px var(--font-system);
  color: var(--ink-secondary);
  max-width: 76ch;
}

/* -------------------------------------------------------- figure 2 parse */
.figure-parse { padding: 88px 0 0; }
.parse {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 64px minmax(0, 1fr);
  align-items: center;
}
.parse-said {
  border: 1px solid var(--ink-quaternary);
  border-radius: 24px;
  background: var(--paper);
  padding: 36px 34px;
}
.parse-quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 40px;
  font-weight: 400;
}
.mark-task { border-bottom: 2px solid var(--moss); }
.mark-time { border-bottom: 1px dashed var(--ink-secondary); }
.parse-key {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--ink-quaternary);
  padding-top: 16px;
  flex-wrap: wrap;
}
.parse-key span {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/18px var(--font-system);
  color: var(--ink-secondary);
}
.key-swatch { width: 22px; height: 0; }

/* The parse figure has a single row, so its connector must not inherit the
   flow diagram's row placement. */
.parse-arrow { grid-row: auto; }

.parse-got { display: grid; gap: 10px; }
.parse-got .eyebrow { margin-bottom: 6px; }
.slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slot-head + .task-card { margin-top: 0; }
.slot-head.later { margin-top: 12px; }
.slot-name {
  font: 700 11px/13px var(--font-system);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--moss);
}
.now-badge {
  font: 800 9px/11px var(--font-system);
  letter-spacing: .2px;
  background: var(--moss-badge);
  color: var(--moss);
  border-radius: 999px;
  padding: 5px 8px;
}

/* The app's own Beta label, and it is bound by Documentation/VOCABULARY.md:
   sentence case, never "BETA" in capitals, never "Preview" or "Early". Grey
   rather than moss — it labels a route, it does not commend one. */
.beta-badge {
  display: inline-block;
  vertical-align: 2px;
  margin-right: 6px;
  font: 600 12px/16px var(--font-system);
  letter-spacing: .1px;
  color: var(--ink-secondary);
  background: var(--ink-border-soft);
  border-radius: 6px;
  padding: 2px 7px;
}

/* Pro wears the brand colour; Beta stays grey. One says "you pay for this",
   the other says "this works and is still moving", and a reader should not
   have to read the word to tell them apart. */
.pro-badge {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 4px;
  font: 600 12px/16px var(--font-system);
  letter-spacing: .1px;
  color: var(--moss);
  background: var(--moss-badge);
  border-radius: 6px;
  padding: 2px 7px;
}
.task-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--ink-border-soft);
  border-radius: 16px;
  padding: 16px 18px;
}
.checkbox {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink-checkbox);
  border-radius: 999px;
  flex: none;
}
.task-card .body { font-weight: 400; }

/* --------------------------------------------------------- rule-off grid */
.rule-grid {
  display: grid;
  margin-top: 8px;
}
.rule-grid > div { border-bottom: 1px solid var(--ink-quaternary); }
.rule-grid .headline { margin-bottom: 8px; }

.rule-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rule-grid-4 > div { padding: 28px 24px; border-left: 1px solid var(--ink-quaternary); }
.rule-grid-4 > div:first-child { padding-left: 0; border-left: 0; }
.rule-grid-4 > div:last-child { padding-right: 0; }

.rule-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rule-grid-3 > div { padding: 28px 32px; border-left: 1px solid var(--ink-quaternary); }
.rule-grid-3 > div:first-child { padding-left: 0; border-left: 0; }
.rule-grid-3 > div:last-child { padding-right: 0; }

/* ------------------------------------------------------------- big panel */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--ink-quaternary);
  border-radius: 24px;
  padding: 48px 44px;
  color: var(--ink);
}
.panel:hover { color: var(--ink); }
.panel h3 {
  margin: 0 0 12px;
  font: 700 32px/38px var(--font-system);
  letter-spacing: -0.02em;
}
.panel .eyebrow { margin-bottom: 14px; }
.panel p.blurb {
  margin: 0;
  font: 400 17px/26px var(--font-system);
  color: var(--ink-secondary);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-top: 120px;
  padding: 28px 0 56px;
  border-top: 1px solid var(--ink-quaternary);
  flex-wrap: wrap;
}
.site-footer .colophon {
  font: 400 13px/18px var(--font-system);
  color: var(--ink-tertiary);
}
.site-footer nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav a {
  font: 400 13px/18px var(--font-system);
  color: var(--ink-secondary);
}

/* ------------------------------------------------------- research: notice */
.notice {
  margin: 0 0 96px;
  border: 1px dashed var(--ink-tertiary);
  border-radius: 18px;
  padding: 18px 22px;
  font: 400 15px/20px var(--font-system);
  color: var(--ink-secondary);
}
.notice strong { font-weight: 600; color: var(--ink); }
/* The same card mid-page rather than under a masthead, where 96px of trailing
   space reads as a section break instead of a note about what follows. */
.notice-inline { margin: 0 0 40px; }

/* ---------------------------------------------------------- research: bars */
.bars { padding: 56px 0 0; }
.bar-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 88px;
  grid-template-areas: "label track value";
  gap: 0 24px;
  align-items: center;
  margin-bottom: 14px;
}
.bar-row:last-of-type { margin-bottom: 0; }
.bars-narrow .bar-row { grid-template-columns: 220px minmax(0, 1fr) 76px; }
.bar-label {
  grid-area: label;
  font: 600 15px/20px var(--font-system);
}
.bar-label small {
  display: block;
  font: 400 13px/18px var(--font-system);
  color: var(--ink-secondary);
}
.bar-track {
  grid-area: track;
  height: 22px;
  background: var(--ink-border-soft);
  position: relative;
  display: block;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--moss);
}
.bar-fill.muted { background: var(--ink-tertiary); }
.bar-fill.warn { background: var(--warning); }
.bar-value {
  grid-area: value;
  font: 600 15px/20px var(--font-system);
  text-align: right;
}
.bar-axis {
  border-top: 1px solid var(--ink-quaternary);
  margin: 14px 0 0 224px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
}
.bars-narrow .bar-axis { margin-left: 244px; }
.bar-axis span {
  font: 400 11px/13px var(--font-system);
  color: var(--ink-tertiary);
}

/* --------------------------------------------------------- research: table */
.table-card {
  margin-top: 64px;
  border: 1px solid var(--ink-quaternary);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
}
.table-scroll { overflow-x: auto; }
.table-card table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.table-card th {
  text-align: right;
  padding: 18px 24px;
  font: 700 11px/13px var(--font-system);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--ink-quaternary);
  white-space: nowrap;
}
.table-card th:first-child { text-align: left; }
.table-card td {
  padding: 18px 24px;
  font: 400 17px/22px var(--font-system);
  text-align: right;
  border-bottom: 1px solid var(--ink-border-soft);
  white-space: nowrap;
}
.table-card td:first-child { text-align: left; }
/* The numeric columns stay on one line, but the label column — and the last
   column where it carries the measurement conditions — hold whole sentences
   in the posts, and nowrap there pushes the table past the card and hides a
   column behind a sideways scroll nobody looks for. */
.table-card th:first-child, .table-card td:first-child,
.table-card th:last-child, .table-card td:last-child { white-space: normal; }
.table-card td:first-child { min-width: 15em; }
.table-card td.count { color: var(--ink-secondary); }
.table-card tbody tr:last-child td { border-bottom: 0; }

/* A table of sentences rather than figures. The numeric table above keeps its
   columns on one line; this one has to wrap or it runs off the page. */
.table-prose table { min-width: 0; }
.table-prose th,
.table-prose td {
  white-space: normal;
  text-align: left;
  vertical-align: top;
}
.table-prose td {
  font: 400 15px/24px var(--font-system);
  color: var(--ink-secondary);
}
.table-prose td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 24%;
}
.table-note { margin: 14px 0 0; font: 400 13px/18px var(--font-system); color: var(--ink-secondary); }

/* -------------------------------------------------------- research: budget */
.figure-extract {
  padding: 56px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  align-items: start;
  margin: 0;
}
.figure-extract .bars { padding: 0; }

.budget {
  border: 1px solid var(--ink-quaternary);
  border-radius: 20px;
  background: var(--paper);
  padding: 28px 26px;
}
.budget .eyebrow { margin-bottom: 20px; }
.budget-bar {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
}
.budget-bar span:nth-child(1) { background: var(--moss); }
.budget-bar span:nth-child(2) { background: var(--paper); }
.budget-bar span:nth-child(3) { background: rgba(61, 89, 71, .45); }
.budget-bar span:nth-child(4) { background: var(--paper); }
.budget-bar span:nth-child(5) { background: var(--ink-tertiary); }
.budget-key {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.budget-key > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.budget-key .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.budget-key .swatch.a { background: var(--moss); }
.budget-key .swatch.b { background: rgba(61, 89, 71, .45); }
.budget-key .swatch.c { background: var(--ink-tertiary); }
.budget-key .name { font: 400 15px/20px var(--font-system); flex: 1; }
.budget-key .value { font: 600 15px/20px var(--font-system); }
.budget-stats {
  border-top: 1px solid var(--ink-quaternary);
  margin-top: 20px;
  padding-top: 16px;
  display: grid;
  gap: 10px;
}
.budget-stats > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.budget-stats .k { font: 400 15px/20px var(--font-system); color: var(--ink-secondary); }
.budget-stats .v { font: 600 15px/20px var(--font-system); }
.budget-note { margin: 16px 0 0; font: 400 13px/18px var(--font-system); color: var(--ink-secondary); }

/* ------------------------------------------------------ research: findings */
.findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}
.findings > div {
  padding: 36px 44px 36px 0;
  border-bottom: 1px solid var(--ink-quaternary);
}
.findings > div:nth-child(even) {
  padding: 36px 0 36px 44px;
  border-left: 1px solid var(--ink-quaternary);
}
.findings .eyebrow { margin-bottom: 10px; }
.findings .blurb {
  margin: 0 0 20px;
  font: 400 17px/26px var(--font-system);
  color: var(--ink-secondary);
}
.findings .quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  color: var(--ink);
}

/* ------------------------------------------------------- research: caveats */
.caveats {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  max-width: 84ch;
}
.caveats li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  font: 400 17px/26px var(--font-system);
  color: var(--ink-secondary);
}
.caveats li span:first-child { color: var(--ink-tertiary); }

/* ---------------------------------------------------------------- ≤1080px */
@media (max-width: 1080px) {
  :root { --page-gutter: 32px; }

  .masthead h1 { font: 700 54px/58px var(--font-system); letter-spacing: -0.03em; }
  .masthead-research h1 { font: 700 46px/50px var(--font-system); letter-spacing: -0.03em; }
  .section-head h2 { font-size: 34px; line-height: 38px; }

  .screens { gap: 32px; }
  .device-boundary { padding: 40px 28px 32px; }
  .flow { grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; }
  .figure-extract { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .panel { padding: 40px 34px; gap: 32px; }
  .panel h3 { font-size: 27px; line-height: 33px; }

}

/* ----------------------------------------------------------------- ≤920px */
@media (max-width: 920px) {
  .masthead, .masthead-research, .masthead-holding {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 72px 0 56px;
    align-items: start;
  }

  /* The flow reads top-to-bottom: the connectors become vertical. */
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .flow-step { grid-row: auto; grid-template-rows: none; }
  .flow-arrow { grid-row: auto; height: 32px; }
  .flow-arrow .arrow {
    width: 1px;
    height: 100%;
    background: var(--ink-tertiary);
  }
  .flow-arrow .arrow::after {
    right: -3px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }
  .flow-card { min-height: 0; }

  .parse { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .parse-arrow { height: 40px; }
  .parse-arrow .arrow {
    width: 1px;
    height: 100%;
    margin: 0 auto;
    background: var(--ink-tertiary);
  }
  .parse-arrow .arrow::after {
    right: -3px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }
  .parse-got { margin-top: 8px; }

  .figure-extract { grid-template-columns: minmax(0, 1fr); gap: 48px; }

  .rule-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-grid-4 > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rule-grid-4 > div:nth-child(even) { padding-right: 0; }

  .rule-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .rule-grid-3 > div { padding: 24px 0; border-left: 0; }

  .panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .panel .btn { justify-self: start; }
}

/* ----------------------------------------------------------------- ≤720px */
@media (max-width: 720px) {
  :root { --page-gutter: 20px; }

  /* Two rows rather than a hidden menu: brand and Download on top, the
     section links underneath at a 44px touch height. There are five of them
     since 1.1, so the row wraps to a third line rather than overflowing —
     the labels themselves never break, `.nav-links a` sets `nowrap`. */
  .nav {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 16px;
    padding-top: 20px;
  }
  .nav-brand { order: 1; }
  .nav-cta { order: 2; margin-left: auto; }
  .nav-links {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 0;
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .masthead { padding: 56px 0 48px; }
  .masthead h1 { font: 700 40px/44px var(--font-system); letter-spacing: -0.02em; max-width: none; }
  .masthead h1.line-1, .masthead h1.line-2 { max-width: none; }
  .masthead-research h1 { font: 700 34px/38px var(--font-system); letter-spacing: -0.02em; max-width: none; }
  .lead { font-size: 17px; line-height: 26px; margin-top: 24px; }
  .cta-row { gap: 14px; }
  .btn { width: 100%; }
  .btn-small { width: auto; }

  .section { padding: 88px 0 0; }
  .section-tight { padding: 72px 0 0; }
  .section-study { padding: 80px 0 0; }
  /* The section label carries meaning ("Nothing", "§2 · Figure 3"), so it
     stacks above the heading rather than being dropped. */
  .section-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 10px;
  }
  .section-head h2 { font-size: 28px; line-height: 32px; }

  /* Three full-height phone screens stacked is an enormous scroll. On a phone
     they swipe sideways instead, bleeding to both edges so the next one peeks. */
  .screens {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--page-gutter);
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    scrollbar-width: none;
  }
  .screens::-webkit-scrollbar { display: none; }
  .screens > div {
    flex: 0 0 76%;
    scroll-snap-align: start;
    gap: 16px;
  }
  .screens:focus-visible { outline-offset: -2px; }

  .figure-flow { padding: 40px 0 0; }
  .figure-parse { padding: 56px 0 0; }
  .device-boundary { padding: 36px 18px 24px; }
  .device-boundary-label { left: 16px; }
  .parse-said { padding: 24px 22px; }
  .parse-quote { font-size: 22px; line-height: 34px; }

  .bars { padding: 40px 0 0; }
  .bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "track track";
    gap: 8px 16px;
    margin-bottom: 20px;
  }
  .bars-narrow .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-axis, .bars-narrow .bar-axis { margin-left: 0; }

  .table-card { margin-top: 40px; }
  .table-card th, .table-card td { padding: 14px 18px; }
  .table-card td { font-size: 15px; line-height: 20px; }
  /* The figures table always overflows at this width; fade the cut edge so it
     reads as scrollable rather than clipped. */
  .table-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  /* Three columns of sentences do not survive a phone. Each row becomes a
     block, and the column headings move inline above the cells they label —
     this is the page someone opens while holding the phone that isn't working,
     so it must not be a sideways scroll. */
  .table-prose .table-scroll {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: visible;
  }
  .table-prose table,
  .table-prose tbody,
  .table-prose tr,
  .table-prose td {
    display: block;
    width: 100%;
  }
  .table-prose thead { display: none; }
  .table-prose tr {
    padding: 20px 18px;
    border-bottom: 1px solid var(--ink-quaternary);
  }
  .table-prose tbody tr:last-child { border-bottom: 0; }
  .table-prose td {
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 24px;
  }
  .table-prose td:first-child {
    width: auto;
    font: 600 17px/22px var(--font-system);
  }
  .table-prose td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 14px 0 2px;
    font: 700 11px/13px var(--font-system);
    letter-spacing: var(--tracking-section);
    text-transform: uppercase;
    color: var(--ink-tertiary);
  }

  .findings { grid-template-columns: minmax(0, 1fr); }
  .findings > div,
  .findings > div:nth-child(even) {
    padding: 28px 0;
    border-left: 0;
  }

  .caveats li { font-size: 15px; line-height: 24px; }

  .prose { margin-top: 24px; }
  .prose p { font-size: 16px; line-height: 26px; }
  .legal-block { padding: 18px 18px; border-radius: 16px; }
  .legal-block p { font-size: 13px; line-height: 22px; }
  .holding-status { font-size: 17px; line-height: 26px; }
  .holding-links { gap: 20px; margin-top: 32px; }

  .notice { margin-bottom: 64px; }

  .panel { padding: 32px 24px; }
  .panel h3 { font-size: 24px; line-height: 30px; }
  .panel p.blurb { font-size: 15px; line-height: 24px; }

  .site-footer {
    margin-top: 80px;
    gap: 4px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .site-footer nav { gap: 20px; }
  .site-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .cta-note a { text-decoration: underline; text-underline-offset: 3px; }
}

/* ----------------------------------------------------------------- ≤560px */
@media (max-width: 560px) {
  .rule-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .rule-grid-4 > div,
  .rule-grid-4 > div:nth-child(odd),
  .rule-grid-4 > div:nth-child(even) {
    padding: 24px 0;
    border-left: 0;
  }
}


/* ==========================================================================
   Home — implemented from Home.dc.html in the Claude Design project
   "Website with videos and reports". Its measure (1080/24), its section
   rhythm (a hairline rule and 72px of air), its card (paper, hairline,
   24px radius, 22px padding) and its type scale, all from the tokens above.
   ========================================================================== */

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--canvas);
  border-bottom: 1px solid var(--ink-border-soft);
}
.topbar-inner { height: 64px; display: flex; align-items: center; gap: var(--space-10); }
.brand { display: flex; align-items: center; gap: var(--space-2-5); color: var(--ink); }
.brand img { width: 26px; height: 26px; display: block; }
.brand span { font: var(--type-headline); letter-spacing: -.01em; }
.topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font: var(--type-subheadline);
}
.topnav a { color: var(--text-secondary); white-space: nowrap; }
.topnav a:hover { color: var(--ink); }
/* Specificity: `.topnav a` is (0,1,1) and would otherwise win the colour,
   putting a dark label on the dark pill. */
.topnav a.pill,
.pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: var(--text-on-primary);
  font: var(--type-subheadline-semibold);
}
.topnav a.pill:hover, .pill:hover { color: var(--text-on-primary); }

.kicker {
  margin: 0;
  font: var(--type-caption2-bold);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
  color: var(--moss);
}

.hero {
  padding-top: 64px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  margin: var(--space-5) 0 0;
  font-family: var(--font-system);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.lede {
  margin: var(--space-9) 0 0;
  font: var(--type-title3);
  color: var(--text-secondary);
  max-width: 30em;
  text-wrap: pretty;
}
.cta { margin-top: var(--space-10); display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.quiet-link { font: var(--type-subheadline-semibold); }
.hero .requirement { margin: var(--space-10) 0 0; }

.band { border-top: 1px solid var(--ink-border-soft); padding: 72px 0; }
.band h2 {
  margin: var(--space-4) 0 var(--space-12);
  font-family: var(--font-system);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-10);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}
.band-head h2 { margin-bottom: 0; }

.cards { display: grid; gap: var(--space-8); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numbered { list-style: none; margin: 0; padding: 0; }
.card {
  background: var(--paper);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-panel);
  padding: var(--space-9);
}
/* Lucide's own geometry at Lucide's own 24-unit box. The design system draws
   the card marks at "light" weight, which is 1.5 against its default 2. */
.icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: var(--space-5);
  color: var(--moss);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cards-3 .icon { width: 22px; height: 22px; }
#how .icon { width: 26px; height: 26px; }
.icon-sm {
  display: inline-block;
  vertical-align: -3px;
  width: 17px;
  height: 17px;
  margin: 0 var(--space-4) 0 0;
  stroke-width: 2;
}
.checklist li { padding-left: 0; }
.checklist li::before { content: none; }

.card-title { margin: 0; font: var(--type-headline); }
.card-body { margin: var(--space-2-5) 0 0; font: var(--type-subheadline); color: var(--text-secondary); text-wrap: pretty; }
.transcript { margin: var(--space-5) 0 0; font: var(--type-transcript); color: var(--ink); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.shots figure { margin: 0; }
/* The app's canvas and this page's canvas are the same #f5f2e8, so a capture
   laid straight on the page has no edge — it reads as loose text. Each one
   sits in a paper frame instead, which is the separation the screens had
   before this layout, and the inner radius is the outer less the inset. */
.shot-frame {
  background: var(--paper);
  border: 1px solid var(--ink-quaternary);
  border-radius: 28px;
  padding: 8px;
  /* Paper against canvas is one step of value, which the hairline alone does
     not carry across a whole panel. A light version of the handset's shadow
     lifts it off the page. */
  box-shadow: 0 18px 40px -26px rgba(28, 31, 28, .45), 0 3px 10px -6px rgba(28, 31, 28, .2);
}
.shots img, .shot-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 21px;
  border: 0;
}
.shots figcaption { margin-top: var(--space-8); font: var(--type-subheadline); color: var(--text-secondary); text-wrap: pretty; }
.shots figcaption .card-title { display: block; color: var(--ink); margin-bottom: var(--space-1); }

.panel {
  background: var(--paper);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-panel);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.panel h2 { margin: 0 0 var(--space-7); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.checklist li {
  position: relative;
  padding-left: var(--space-9);
  font: var(--type-subheadline);
  text-wrap: pretty;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--moss);
}

.get { text-align: center; padding: 24px 0; }
/* The mark carries its own margin — ink fills 68% of the asset's box — so 60px
   here draws 41px of bars, which sits against a 30px heading rather than over
   it. The heading's top margin is 12 because the other 10 are already in the
   file. No border-radius: the ring came off the icon on 4 August, and rounding
   a transparent square rounds nothing. */
.get img { width: 60px; height: 60px; display: block; margin: 0 auto; }
.get h2 {
  margin: 12px 0 0;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.get .lede { margin: var(--space-5) auto 0; max-width: 30em; }
.get .badge-link { margin-top: var(--space-10); }

.sitefoot { border-top: 1px solid var(--ink-border-soft); }
.sitefoot-inner {
  padding: var(--space-10) var(--shell-gutter) 56px;
  display: flex;
  align-items: center;
  gap: var(--space-9);
  flex-wrap: wrap;
  font: var(--type-footnote);
  color: var(--text-secondary);
}
.sitefoot-inner a { color: var(--text-secondary); }
.sitefoot-inner a:hover { color: var(--ink); }
/* The sign-off carries the mark the top bar does, a size down: the footer sets
   footnote type, so a 26px icon beside 13px text reads as a second header.
   The colour needs `a.foot-brand` because `.sitefoot-inner a` above is a
   two-class selector and would otherwise grey the wordmark out. */
.sitefoot-inner a.foot-brand { display: flex; align-items: center; gap: var(--space-2-5); color: var(--ink); }
.foot-brand img { width: 20px; height: 20px; display: block; }
.foot-social { display: flex; align-items: center; gap: var(--space-5); }
.sitefoot-inner .foot-social a { display: flex; }
/* Brand marks are solid glyphs, unlike the stroked Lucide set the rest of the
   site uses, so they fill rather than stroke. */
.icon-brand { display: block; width: 16px; height: 16px; fill: currentColor; }

.foot-end { margin-left: auto; }

@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 64px; }
  .hero-phone { max-width: 260px; }
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px; }
  .band { padding: 56px 0; }
}
@media (max-width: 720px) {
  :root { --shell-gutter: 20px; }
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .shots { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .band h2, .band-head h2 { font-size: 27px; }
  .topnav { gap: var(--space-8); }
}
@media (max-width: 560px) {
  .hero-phone { max-width: 240px; }
  .topbar-inner { height: 56px; gap: var(--space-8); }
  .topnav a:not(.pill) { display: none; }
  .foot-end { margin-left: 0; flex-basis: 100%; }
}


/* ------------------------------------------------------- research: posts */
.post-head { padding: 72px 0 0; }
.post-head h1 {
  margin: var(--space-5) 0 0;
  font-family: var(--font-system);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.025em;
  max-width: 20ch;
  text-wrap: pretty;
}
.post-head .lede { max-width: 34em; }
.post-meta { margin: var(--space-9) 0 0; font: var(--type-footnote); color: var(--text-tertiary); }
/* The post body keeps the wider measure the tables and bar charts were drawn
   to; the head above it sits on the 1080 the rest of the site uses. */
.post-body { padding-top: 56px; }

/* Everything below was inheriting the browser's defaults — 16px text with no
   measure at all, which runs to about 130 characters on a wide screen. Prose
   takes a reading measure and the site's own type; the tables and figures
   keep the full width they were drawn to. */
.post-body > p,
.post-body > ul,
.post-body > ol { max-width: 68ch; }

/* 17/27 rather than --type-body's 17/22: the token is sized for cards and
   captions, and a page of continuous prose needs the looser leading. */
.post-body p,
.post-body li { font: 400 17px/27px var(--font-system); color: var(--ink); }
.post-body p { margin: var(--space-9) 0 0; text-wrap: pretty; }
.post-body > p:first-child { margin-top: 0; }

.post-body h2 {
  margin: 72px 0 var(--space-8);
  font: 700 27px/32px var(--font-system);
  letter-spacing: -.02em;
  max-width: 28ch;
}
.post-body h2 + p { margin-top: 0; }

.post-body ul { margin: var(--space-9) 0 0; padding-left: 1.2em; }
.post-body li { margin-top: var(--space-3); }
.post-body li::marker { color: var(--ink-tertiary); }

/* A paragraph that is nothing but bold text is a lead-in to what follows —
   the shape the posts use for "A 15-item list, said in one breath." */
.post-body p:has(> strong:only-child) {
  margin-top: 56px;
  font: 600 19px/25px var(--font-system);
  letter-spacing: -.01em;
}
.post-body p:has(> strong:only-child) strong { font-weight: inherit; }

/* A note somebody spoke. The site sets speech in Newsreader wherever it shows
   it, the same as the parse example on the home page. */
.post-body blockquote {
  margin: var(--space-10) 0 0;
  padding: var(--space-10) var(--space-12);
  max-width: 60ch;
  background: var(--paper);
  border: 1px solid var(--ink-border-soft);
  border-radius: var(--radius-card);
}
.post-body blockquote p {
  margin: 0;
  max-width: none;
  font: var(--type-transcript);
}

/* The paragraph straight after a quote is what Offhand made of it. Tying the
   two together with a rule is what makes each example read as a pair rather
   than as a quote followed by more prose. */
.post-body blockquote + p {
  margin-top: 0;
  padding: var(--space-7) 0 var(--space-2) var(--space-12);
  border-left: 2px solid var(--moss);
  max-width: calc(60ch + var(--space-12));
}

.post-body code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--ink-border-soft);
  font: 400 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.posts a {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: var(--space-9);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-panel);
  padding: var(--space-9);
  color: var(--ink);
}
.posts a:hover { border-color: var(--moss-border); }
.post-kind { font: var(--type-footnote); color: var(--text-secondary); }
.post-title { display: block; font: 600 20px/25px var(--font-system); letter-spacing: -.01em; }
.post-blurb { display: block; margin-top: var(--space-1); font: var(--type-subheadline); color: var(--text-secondary); text-wrap: pretty; }
.post-date { font: var(--type-footnote); color: var(--text-tertiary); white-space: nowrap; }
.posts-empty {
  margin: 0;
  padding: var(--space-12) 0;
  border-top: 1px solid var(--ink-border-soft);
  font: var(--type-title3);
  color: var(--text-secondary);
  max-width: 46em;
  text-wrap: pretty;
}
.posts-note { margin: var(--space-10) 0 0; font: var(--type-footnote); color: var(--text-tertiary); max-width: 60ch; }

@media (max-width: 720px) {
  .posts a { grid-template-columns: minmax(0, 1fr); gap: var(--space-2-5); }
  .post-date { justify-self: start; }
  .post-head { padding-top: 48px; }
  .post-body h2 { margin-top: 56px; font-size: 24px; line-height: 29px; }
  .post-body p:has(> strong:only-child) { margin-top: 40px; font-size: 18px; }
  /* 32px of padding either side leaves under 270px of line on a phone. */
  .post-body blockquote { padding: var(--space-8) var(--space-9); }
  .post-body blockquote + p { padding-left: var(--space-9); }
}

/* The feature cards on the home page link to their pages. The link keeps the
   card's own colour and takes a quiet underline, like links in .prose. */
.card-title a, .card-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-quaternary); text-underline-offset: 3px; }
.card-title a:hover, .card-body a:hover { text-decoration-color: var(--ink); }