/* jellybean site, direction B "Milk Run" (design/b-milk-run/site-hero.html). Colours come from brand.site in
   launch.config.json (build.mjs fills the tokens). Dark mode follows the system; ?theme=dark|light forces one (test hook).
   Colour rule: colour is who you are, flavour is how fast. Pebbles are only ever runners: peach pit, blueberry, ube
   and sea salt here, the app's names and hexes (never pistachio: green is women-only). Paces are flat swatches and words, never
   pebbles: vanilla, oat milk, honey, chai and espresso, the app's PaceFlavour swatches; strawberry is only the full stop in the wordmark, the emergency dot and the error;
   matcha green means women-only and nothing else.
   Case rule: lowercase for anything display (headings, nav, tags, pills, questions, short ledes). Home speaks in the
   app's voice and is lowercase throughout, body lines included; inner pages (/how, /support, legal) use sentence case
   for body copy of more than one line. Units: distance and pace units are a .38em sans suffix in the app's dialect (6k, 5:45/km), times
   never take a leading zero (6:15), and pace ranges carry no unit (one "paces in min/km" caption instead).
   Trio order: blueberry, peach (the host, centre), ube, on every page and in the app art. */
:root {
  color-scheme: light;
  --milk: #FBF8F3; --oat: #F1EBE2; --cocoa: #2E2925; --latte: #6B625A;
  --straw: #C2455C; --sdeep: #8F2438; --smilk: #F8DCDC; --matcha: #E3EADF; --mdeep: #3F5638; --hair: #E6DED3;
  --edge: #958572; --vring: rgba(60,40,30,.08); --plift: 0 10px 18px -8px rgba(46,41,37,.4); --pglow: color-mix(in oklab, var(--sun) 85%, transparent); --pglow2: color-mix(in oklab, var(--dawn) 40%, transparent); --ptop: 30%; --lift: rgba(46,41,37,.4); --grain: .06; --grain-blend: multiply; --gloss: .5; --halo: 1;
  /* first light: the sky behind the pebbles, just after sunrise */
  --sky: #F1EDEB; --sky-lo: #F6DED3; --dawn: #F3C3B1; --sun: #FFF3E6; --sun-drop: 0px; --lake: #EFE5DC; --line: rgba(120,80,60,.16);
  --vanilla: #F1E6CF; --oatmilk: #E3D6C2; --espresso: #8A6A58;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 5vw, 72px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --milk: #161412; --oat: #221F1C; --cocoa: #F2ECE4; --latte: #ADA398;
    --straw: #E36A80; --sdeep: #F5B3BD; --smilk: #3A2427; --matcha: #252E27; --mdeep: #A9C29E; --hair: #3A3530;
    --edge: #776C61; --vring: transparent; --plift: 0 0 transparent; --pglow: color-mix(in oklab, #F3C3B1 20%, transparent); --pglow2: color-mix(in oklab, #F3C3B1 6%, transparent); --ptop: 45%; --card: var(--oat); --card-ring: rgba(255,255,255,.06); --lift: rgba(0,0,0,.7); --grain: .05; --grain-blend: screen; --gloss: .28; --halo: .65; --swdim: 12%;
    /* dark is the same scene twenty minutes earlier: the sun still under the lake */
    --vanilla: #E9DCC0; --oatmilk: #CDBEA8; --espresso: #9C7A66;
  --sky: #17161C; --sky-lo: #2A2027; --dawn: #5A3136; --sun: #7A4440; --sun-drop: 150px; --lake: #1C1918; --line: rgba(240,180,170,.14);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --milk: #161412; --oat: #221F1C; --cocoa: #F2ECE4; --latte: #ADA398;
  --straw: #E36A80; --sdeep: #F5B3BD; --smilk: #3A2427; --matcha: #252E27; --mdeep: #A9C29E; --hair: #3A3530;
  --edge: #776C61; --vring: transparent; --plift: 0 0 transparent; --pglow: color-mix(in oklab, #F3C3B1 20%, transparent); --pglow2: color-mix(in oklab, #F3C3B1 6%, transparent); --ptop: 45%; --card: var(--oat); --card-ring: rgba(255,255,255,.06); --lift: rgba(0,0,0,.7); --grain: .05; --grain-blend: screen; --gloss: .28; --halo: .65; --swdim: 12%;
  --vanilla: #E9DCC0; --oatmilk: #CDBEA8; --espresso: #9C7A66;
  --sky: #17161C; --sky-lo: #2A2027; --dawn: #5A3136; --sun: #7A4440; --sun-drop: 150px; --lake: #1C1918; --line: rgba(240,180,170,.14);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--milk); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--milk); color: var(--cocoa); font: 400 17px/1.5 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, summary, .sub, .lead, .fine, .note { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--smilk); color: var(--cocoa); }
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
/* the one kicker: every mono caps label on the site */
.tag, .lab, .cap, .legal th, .legal td::before { font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--latte); }
.lat { color: var(--latte); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 9; background: var(--cocoa); color: var(--milk); padding: 10px 16px; border-radius: 99px; text-decoration: none; }

/* wordmark: lowercase "jellybean", set with the dotless j (U+0237, in DM Sans latin-ext) so the strawberry jelly
   pebble can be the dot of the j. The pebble sits inline right after the j, pulled back over the stem (DM Sans 500:
   j advance .236em, stem centre .112em, tittle centre .655em up) and lifted with a transform, so it rides the
   baseline at any size. Margins net to zero, so "ellybean" sets exactly where it would after a real j. */
.wm { font-weight: 500; letter-spacing: -.025em; display: inline-flex; align-items: baseline; text-decoration: none; color: var(--cocoa); white-space: nowrap; }
.wm .j { white-space: nowrap; }
.wm .j i { display: inline-block; width: .17em; height: .15em; margin: 0 -.016em 0 -.154em; vertical-align: baseline; transform: translateY(-.575em);
  border-radius: 47% 53% 50% 50% / 56% 60% 40% 44%; background: #D44A63; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
/* one bullet for every list on the site: a small cocoa dot (milk in dark, since --cocoa flips) */
.offer li::before, .body li::before, .legal .draft i { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: color-mix(in oklab, var(--cocoa) 40%, transparent); }
/* kickers with two phrases: never leave a separator hanging at a line end */
.kick > span { white-space: nowrap; }

/* jelly pebble: colour = flavour, --g = glow (long streaks glow more) */
.pb { --s: 52px; --g: .25; width: var(--s); height: calc(var(--s) * .86); position: relative; flex: none;
  border-radius: 50% 50% 48% 52% / 58% 56% 44% 42%;
  background:
    radial-gradient(48% 42% at 54% 64%, color-mix(in oklab, var(--l) calc(30% + var(--g) * 70%), transparent) 0%, transparent 100%),
    radial-gradient(130% 120% at 32% 16%, var(--l) 0%, var(--c) 50%, var(--d) 100%);
  box-shadow:
    inset 0 calc(var(--s) * -.07) calc(var(--s) * .12) color-mix(in oklab, var(--d) 50%, transparent),
    inset 0 calc(var(--s) * .03) calc(var(--s) * .05) rgba(255,255,255,var(--gloss)),
    0 calc(var(--s) * .14) calc(var(--s) * .2) calc(var(--s) * -.1) color-mix(in oklab, var(--d) 60%, transparent),
    0 0 calc(var(--s) * (.05 + var(--g) * .55) * var(--halo)) calc(var(--s) * var(--g) * .06 * var(--halo)) color-mix(in oklab, var(--c) calc(var(--g) * 75% * var(--halo)), transparent),
    var(--x, 0 0 transparent); }
.pb::before { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.3) 60%, transparent); transform: rotate(-16deg); }
.pb::after { content: ""; position: absolute; right: 15%; bottom: 16%; width: 15%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); transform: rotate(-28deg); }
/* runner colours: the app's Flavour names and hexes (peach pit, blueberry, ube, sea salt) */
.peach { --c: #F2B192; --l: #FDE6D8; --d: #D27C5D; }
.ube { --c: #C3A6DC; --l: #F2EAF9; --d: #8467AD; }
.blueberry { --c: #9DAFE6; --l: #E6EBFB; --d: #5A6DB8; }
.seasalt { --c: #B5D3E2; --l: #EAF4F9; --d: #6F9AB0; }
/* pace swatches: flat capsules, the app's PaceFlavour.swatch. Cream on milk gets a hairline ring in light. */
.sw { display: block; width: 40px; height: 16px; border-radius: 99px; background: color-mix(in oklab, var(--c) calc(100% - var(--swdim, 0%)), var(--milk)); flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.sw.vanilla, .sw.oatmilk { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px var(--vring); }
.sw.vanilla { --c: var(--vanilla); } .sw.oatmilk { --c: var(--oatmilk); } .sw.honey { --c: #E9BE6A; }
.sw.chai { --c: #CC9068; } .sw.espresso { --c: var(--espresso); }
@media (prefers-reduced-motion: no-preference) {
  .float { animation: bob 6s ease-in-out infinite; }
  .float.b { animation-delay: -2s; } .float.c { animation-delay: -4s; }
  .btn .busy { animation: breathe 1.2s ease-in-out infinite alternate; }
  @keyframes breathe { from { transform: scale(.82); opacity: .9; } to { transform: none; opacity: 1; } }
  @keyframes bob { 50% { transform: translateY(-6px) scale(1.01, .99); } }
  .pb.squish { animation: squish .7s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes squish { 0% { transform: translateY(-12px); opacity: 0; } 60% { transform: translateY(0) scale(1.06, .94); opacity: 1; } 100% { transform: none; } }
}

.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain); mix-blend-mode: var(--grain-blend); border-radius: inherit; z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* nav */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px var(--pad); }
.top .wm { font-size: 28px; }
.top ul { display: flex; gap: 36px; align-items: center; list-style: none; font-size: 15px; }
.top ul a { text-decoration: none; padding: 6px 0; }
.top ul a:hover, .top ul a[aria-current] { text-decoration: underline; }
.top ul a.cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 99px; background: var(--cocoa); color: var(--milk); font-weight: 500; font-size: 14.5px; }
.top ul a.cta:hover { text-decoration: none; opacity: .88; }

/* hero */
.hero { display: grid; grid-template-columns: 11fr 12fr; gap: 64px; padding: 24px var(--pad) 0; align-items: center; min-height: min(760px, 86vh); }
.hero > * { min-width: 0; }
.hero h1 { font-weight: 500; font-size: clamp(40px, 4.5vw, 68px); line-height: 1.02; letter-spacing: -.032em; margin-top: 20px; max-width: 13.5ch; }
.sub { font-size: 20px; color: var(--latte); margin-top: 24px; max-width: 30ch; line-height: 1.45; }
.chip-wo { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px; margin-top: 18px; border-radius: 99px; background: var(--matcha); color: var(--mdeep);
  font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.chip-wo i { width: 7px; height: 6px; border-radius: 50%; background: var(--mdeep); opacity: .8; }
.chip-wo:hover { text-decoration: underline; }
.chip-wo .short { display: none; }

/* waitlist form: capsule input + cocoa capsule button */
.waitlist { margin-top: 36px; max-width: 480px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.field { flex: 1 1 0; min-width: 0; height: 56px; border-radius: 99px; border: 1.5px solid var(--edge); background: var(--oat); padding: 0 24px; font: inherit; font-size: 16px; color: var(--cocoa); transition: border-color .2s, background .2s; }
.field::placeholder { color: var(--latte); opacity: 1; }
.field:hover { border-color: color-mix(in oklab, var(--edge) 60%, var(--cocoa)); }
.field:focus { outline: none; border-color: var(--cocoa); background: var(--milk); }
.field:focus-visible { outline: none; }
/* invalid wins over :focus and lands in the same frame as the message (no transition) */
.field[aria-invalid="true"], .field[aria-invalid="true"]:focus { transition: none; border: 1.5px solid var(--straw); background: color-mix(in oklab, var(--straw) 6%, var(--oat)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--straw) 10%, transparent); }
.end .field[aria-invalid="true"], .end .field[aria-invalid="true"]:focus { background: color-mix(in oklab, var(--straw) 6%, var(--milk)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 99px; border: 0; background: var(--cocoa); color: var(--milk); font: 500 16px/1 var(--sans); padding: 0 26px; cursor: pointer; white-space: nowrap; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96, .94); }
.btn[disabled] { cursor: progress; transform: none; }
.btn .busy { --s: 14px; box-shadow: inset 0 -2px 3px color-mix(in oklab, var(--d) 40%, transparent), 0 0 10px 1px color-mix(in oklab, var(--c) 55%, transparent); }
.row:has(.area) { flex-wrap: wrap; }
.area { order: 3; flex: 1 0 100%; height: 48px; font-size: 15px; }
.note { font-size: 13.5px; color: var(--latte); margin-top: 14px; }
.note a { color: var(--cocoa); }
.err { order: 5; flex: 1 0 100%; padding: 0 24px; font-size: 14.5px; color: var(--sdeep); /* the app's strawberryDeep: AA on milk and oat */ font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { margin-top: 36px; max-width: 480px; background: var(--oat); border-radius: 32px; padding: 26px 26px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.done:focus { outline: none; }
.done .hd { display: flex; align-items: center; gap: 14px; overflow: clip; overflow-clip-margin: 20px; }
.done .pb { box-shadow: inset 0 -3px 5px color-mix(in oklab, var(--d) 50%, transparent), inset 0 1px 2px rgba(255,255,255,var(--gloss)), 0 10px 18px -8px var(--lift), 0 0 18px 2px color-mix(in oklab, var(--c) 55%, transparent); }
.done h2 { font-size: 24px; max-width: none; }
.done p { font-size: 15.5px; }
.done .to { font-size: 14px; color: var(--latte); }
.done .addr { color: var(--cocoa); overflow-wrap: anywhere; }
.relink { font: inherit; color: var(--cocoa); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.relink:hover { text-decoration-thickness: 2px; }
.share { display: flex; gap: 8px; align-items: center; margin-top: 6px; background: var(--milk); border-radius: 99px; padding: 4px 4px 4px 20px; }
.share code { font: 400 13.5px/1.3 var(--mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.share .btn { height: 44px; font-size: 14.5px; padding: 0 18px; }
.end .share { background: var(--oat); }

/* hero stage: first light. A sky, a low sun coming up behind the host, and the lake the pebbles sit on.
   The sun rises once on load (6s); with reduced motion it is simply already up. */
.stage { --hz: 66%; --sun-w: 760px; --k: 1; position: relative; height: 660px; border-radius: 56px; overflow: hidden; background: var(--lake); }
/* the sky runs 24px past the horizon and the lake fades in over 48px, so the shore is soft, never a seam */
.stage .sky { position: absolute; inset: 0 0 calc(100% - var(--hz) - 24px) 0;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky) 30%, var(--sky-lo) 78%, var(--dawn) 100%); }
.stage .sun { position: absolute; left: 50%; top: var(--hz); width: var(--sun-w); height: var(--sun-w); border-radius: 50%;
  margin: calc(var(--sun-w) / -2 + var(--sun-drop) * var(--k)) 0 0 calc(var(--sun-w) / -2);
  background: radial-gradient(closest-side, var(--sun) 0%, var(--sun) 52%, color-mix(in oklab, var(--sun) 55%, var(--dawn)) 57%, color-mix(in oklab, var(--dawn) 55%, transparent) 72%, transparent 100%); }
.stage .lake { position: absolute; inset: calc(var(--hz) - 24px) 0 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px); mask-image: linear-gradient(to bottom, transparent, #000 48px);
  background:
    radial-gradient(18% 70% at 50% 24px, color-mix(in oklab, var(--sun) 70%, transparent), transparent 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--dawn) 45%, var(--lake)) 24px, var(--lake) 70%); }
.stage .cap { position: absolute; left: 40px; top: 36px; z-index: 6; }
/* the bean caption: says what the three shapes are, right under the time */
.stage .bean-cap { position: absolute; left: 40px; top: 60px; z-index: 6; max-width: 340px; color: var(--cocoa); opacity: .72; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .stage .sun { animation: rise 6s cubic-bezier(.2,.7,.2,1) both; }
  .stage .sky { animation: brighten 6s ease-out both; }
  @keyframes rise { from { transform: translateY(70px); opacity: .35; } }
  @keyframes brighten { from { filter: brightness(.94) saturate(.8); } }
}
.stage .inner { position: absolute; inset: 0; z-index: 2; }
.pool { position: absolute; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, var(--pc), transparent); filter: blur(6px); }
.stage .p1 { position: absolute; left: calc(50% - 214px); top: 340px; }
.stage .p2 { position: absolute; left: calc(50% - 98px); top: 282px; z-index: 2; }
.stage .p3 { position: absolute; left: calc(50% + 86px); top: 358px; z-index: 3; }
/* each label hangs on a short leader that touches its pebble */
.lab { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0; color: var(--cocoa); opacity: .72; white-space: nowrap; }
.lab::after { content: ""; width: 1px; height: 22px; margin-top: 8px; background: currentColor; opacity: .5; }
.lab.l2 { left: calc(50% + 6px); top: 234px; transform: translateX(-50%); }
.lab.l3 { left: calc(50% + 152px); top: 480px; transform: translateX(-50%); flex-direction: column-reverse; }
.lab.l3::after { margin: 0 0 8px; }
/* the small stage on inner pages: same first light, a trio resting on the water */
.stage.sm { --hz: 70%; --sun-w: 560px; --k: .55; width: 100%; height: 420px; border-radius: 48px; }
.stage.sm .trio { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(100% - var(--hz) - 22px); display: flex; justify-content: center; align-items: flex-end; gap: 8px; }
.stage.sm .trio > :nth-child(2) { margin-bottom: 14px; }
.stage.sm .trio { transform: scale(1.3); transform-origin: 50% 100%; }
.mini { position: absolute; left: 32px; bottom: 32px; background: var(--card, var(--milk)); border-radius: 28px; padding: 18px 22px 20px; width: 320px; z-index: 6; box-shadow: inset 0 0 0 1px var(--card-ring, transparent), 0 30px 50px -36px var(--lift); }
.mini .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.mini .hd .tag { font-size: 10.5px; white-space: nowrap; }
/* numerals: big stats in DM Sans with tabular figures; units at .38em, on the baseline */
.n, .big { font: 500 30px/1 var(--sans); font-feature-settings: "tnum" 1; letter-spacing: -.03em; }
.n small, .big small { font-size: .38em; font-weight: 400; color: var(--latte); letter-spacing: 0; margin-left: .12em; vertical-align: baseline; }
.n .gap { display: inline-block; width: .5em; }
.mini .n { margin-top: 12px; }
.mini p { font-size: 14px; margin-top: 10px; }

/* home sections */
.sec { padding: 150px var(--pad) 0; }
.eyebrow { display: block; margin-bottom: 18px; }
h2 { font-weight: 500; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.08; letter-spacing: -.03em; max-width: 20ch; }
h3 { font-weight: 500; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; list-style: none; }
.step { background: var(--oat); border-radius: 36px; padding: 28px 28px 32px; display: flex; flex-direction: column; min-width: 0; }
.vig { height: 200px; border-radius: 24px; background: var(--milk); display: grid; place-items: center; margin-bottom: 28px; }
.v1 { text-align: center; } .v1 .n { font-size: 56px; letter-spacing: -.04em; } .v1 .tag { display: block; margin-top: 14px; }
.v2 { display: flex; gap: 10px; align-items: flex-end; }
.v3 { display: flex; align-items: center; gap: 22px; } .v3 .big { font-size: 60px; } .v3 .lat { font-size: 15px; }
.step h3 { font-size: 20px; letter-spacing: -.015em; display: flex; gap: 12px; align-items: baseline; }
.step h3 .mono { font-size: 13px; color: var(--latte); font-weight: 400; }
.step > p { color: var(--latte); margin-top: 8px; font-size: 16px; }
.big { font-size: 64px; letter-spacing: -.04em; }
/* a spot for you: the pebble's own silhouette, drawn dashed */
.slot { width: 60px; aspect-ratio: 1 / .86; border-radius: 50% 50% 48% 52% / 58% 56% 44% 42%; border: 1.5px dashed var(--edge); display: grid; place-items: center; font: 400 11px/1 var(--mono); color: var(--latte); }
.more { margin-top: 28px; }
.ghost { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 99px; background: var(--oat); font-size: 15px; text-decoration: none; }
.ghost:hover { text-decoration: underline; }

/* the app: two phones on oat, the dark one a step lower, under the same first light */
.phones { position: relative; margin-top: 56px; padding: 88px 24px 136px; border-radius: 56px; background: var(--oat); overflow: hidden; isolation: isolate;
  display: flex; justify-content: center; align-items: flex-start; gap: 72px; padding-bottom: 56px; }
.phones::before { content: ""; position: absolute; left: 50%; top: var(--ptop); width: 1200px; height: 800px; transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, var(--pglow), var(--pglow2) 55%, transparent); } /* dark: a faint peach light, not the maroon sun */
.phones figcaption { position: absolute; left: 40px; top: 36px; }
/* 340px: the object fills the frame. Until the webp decodes, each screen shows a 24px blurred copy of itself
   (LQIP, from the same export), so the frame is never blank */
.phone { width: 340px; flex: none; margin: 0; }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; background: #FBF8F3 url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAACwBQCdASoYADQAPtFip08oJaMmqBgKqQAaCWcAyCAIlazBXyG/N347odD98x7NGWwBNn1x/wAA/vN/YZZuh6Ir86hOnWv/ztLaK4lJRKyG+fcSi1q40nNvv/kQTzgUhYIh4nAoxu2neZz3/6T1jU9qIj5ZoEcd6wEH3HIDgl9Y2IYr8F0iZQpUodAYar2ZQm3EeEAA) center / cover no-repeat; border-radius: 47.5px; box-shadow: 0 30px 60px -24px rgba(43,38,34,.28), 0 0 0 1px rgba(43,38,34,.12); }
.phone.dk { margin-top: 64px; }
.phone.dk img { background: #161412 url(data:image/webp;base64,UklGRtIAAABXRUJQVlA4IMYAAABwBgCdASoYADQAPs1Qo0unpCMhs/ZqqPAZiWkAAC31wZhGrPTENjVBzYcqKXC85W5bYHVNiq9MB2lyy8AA/vKlvER4NnxlNG1+feGBFtE0/LsESFlWsmU8gs2TfcuP+VKjUmhRDrdIE5gm+Bb7LirOf84j7pHXD7pib5+7W+B4tezXNBFVhcplcARK409lf7krOnrpTTFNthZAYLDfcQDnGBeYLqH3N8ghWXy+fn8c+EiQXmxCFxBuI29PM6Y++6xVQM2gAAA=) center / cover no-repeat; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45), 0 0 0 1px color-mix(in oklab, var(--cocoa) 10%, transparent); }
.phone p { margin-top: 22px; text-align: center; }
.pace { padding-top: 200px; }
.pace h2 { font-size: clamp(40px, 4.5vw, 68px); line-height: 1.02; letter-spacing: -.032em; max-width: 22ch; }
/* one scale, mild to intense: a shade card. Five separated 4:5 pans (flat, like the app's PaceFlavour swatches),
   each small enough that the headline stays the loudest thing; dark mixes each 12% toward the room (--swdim) */
.menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 80px; list-style: none; max-width: 1180px; }
.menu .sw { width: 88px; height: 110px; border-radius: 24px; }
.unit { display: block; margin-top: 40px; }
.body .unit { margin-top: 0; }
.fl { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.fl .sw { margin-bottom: 22px; }
.fl .txt { display: flex; flex-direction: column; gap: 2px; }
.fl b { font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
.fl .rng, .pace-row .rng { font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--latte); }
.fl .lat { font-size: 15px; }

.wo { margin: 86px var(--pad) 0; background: var(--matcha); border-radius: 56px; padding: 72px clamp(24px, 6vw, 96px); display: grid; grid-template-columns: 5fr 6fr; gap: 64px; }
.wo > * { min-width: 0; }
.wo .tag { color: var(--mdeep); }
.wo h2 { font-size: clamp(32px, 3.2vw, 44px); max-width: 14ch; }
/* the same pill the app puts on a women-only run */
.idw { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; margin-top: 28px; border-radius: 99px; background: color-mix(in oklab, var(--milk) 70%, transparent); color: var(--mdeep); font-size: 14px; }
.idw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.lead { font-size: 19px; margin-top: 22px; max-width: 32ch; line-height: 1.45; }
.facts { list-style: none; border-top: 1px solid color-mix(in oklab, var(--mdeep) 22%, transparent); align-self: center; }
.facts li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid color-mix(in oklab, var(--mdeep) 22%, transparent); }
.facts .tag { padding-top: 4px; }

.end { margin: 150px var(--pad) 0; background: var(--oat); border-radius: 56px; padding: 104px 24px 96px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.end h2 { margin: 0 auto; }
/* the offer is facts, not buttons: a quiet line with pebble-dot separators */
.offer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; list-style: none; font-size: 16px; color: var(--latte); }
.offer li { display: flex; align-items: center; gap: 10px; }
.end .waitlist, .end .done { margin-left: auto; margin-right: auto; width: 100%; text-align: left; }
.end .field { background: var(--milk); }
.end .note { text-align: center; }
.end .done { background: var(--milk); }
.fine { margin: 40px auto 0; font-size: 14px; color: var(--latte); max-width: 40ch; }

/* inner pages: a quiet column with a label rail */
.page { padding: 40px var(--pad) 0; }
/* the home grammar: copy left, a half-width first-light stage right, its top on the kicker's line */
.page-hd { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.page-hd h1 { font-weight: 500; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.032em; margin-top: 20px; max-width: 16ch; }
.page-hd .sub { max-width: 40ch; }
.part { display: grid; grid-template-columns: 4fr 7fr; gap: 24px 64px; padding: 56px 0; border-top: 1px solid var(--hair); }
.part:first-of-type { margin-top: 88px; }
.part > * { min-width: 0; }
.part h2 { font-size: clamp(24px, 2.2vw, 32px); max-width: 16ch; }
.part .tag { display: block; margin-bottom: 14px; }
.body { display: grid; gap: 16px; }
/* every block runs to the hairline's right edge; the 7fr column already keeps a reading measure */
.body details p, .body > p:not(.card), .body li { max-width: 54ch; } /* copy v2: ~72 characters a line for the longer voice lines */
.body p, .body li { color: var(--cocoa); }
.body ul { list-style: none; display: grid; gap: 14px; }
.body li { padding-left: 28px; position: relative; }
.body li::before { position: absolute; left: 4px; top: .62em; }
.body strong { font-weight: 500; }
.body .rule { font-weight: 500; letter-spacing: -.01em; }
.body a { color: var(--cocoa); }
.card { background: var(--oat); border-radius: 32px; padding: 28px; }
.card.m { background: var(--matcha); }
.card.m .tag { color: var(--mdeep); }
/* emergency: cocoa on oat with one strawberry dot, so pink stays rare and it never reads as an error */
.card.app { max-width: 560px; }
/* the emergency line runs the full column so it reads in one breath, never with a widow */
.card.sos { display: flex; gap: 14px; align-items: baseline; }
.card.sos span { text-wrap: balance; }
.card.sos i { width: 9px; height: 8px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6A9B6, #D44A63 60%, #A62840); transform: translateY(-1px); }
/* the app's run card, cropped: who, then the numbers, then pace and place, then when */
.card.app .hd { display: flex; align-items: center; gap: 14px; }
.card.app .who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.card.app .who b { font-weight: 400; font-size: 15px; }
.card.app .who .lat { font-size: 13px; }
.card.app .hd .tag { font-size: 10.5px; align-self: flex-start; padding-top: 2px; }
.card.app .n { font-size: 40px; margin: 20px 0 12px; }
.card.app p { font-size: 15px; line-height: 1.6; }
.card.app .lat { color: var(--latte); }
.pace-row { display: grid; gap: 0; }
.pace-row > div { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.pace-row > div:first-child { border-top: 1px solid var(--hair); }
.join-line { margin-top: 72px; padding-top: 88px; border-top: 1px solid var(--hair); text-align: center; }
.join-line h2 { margin: 0 auto 28px; }
.page:has(.join-line) + .foot-wrap { padding-top: 96px; }
.page .end { margin-left: 0; margin-right: 0; margin-top: 120px; }

details { border-bottom: 1px solid var(--hair); }
details:first-of-type { border-top: 1px solid var(--hair); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--latte); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 22px; color: var(--latte); max-width: 60ch; }

/* legal */
.legal { max-width: 760px; margin: 0 auto; padding: 48px var(--pad) 0; }
.legal h1 { font-weight: 500; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.032em; }
.legal .meta { font-size: 14px; color: var(--latte); margin: 18px 0 0; }
.legal .draft { display: flex; gap: 12px; align-items: baseline; margin: 20px 0 40px; padding: 16px 20px; border: 1px solid var(--hair); border-radius: 20px; font-size: 14.5px; line-height: 1.55; color: var(--latte); }
.legal .draft i { transform: translateY(-2px); }
.legal .draft strong { color: var(--cocoa); }
.legal .draft a { color: var(--cocoa); }
.legal h2 { font-size: 24px; letter-spacing: -.02em; max-width: none; margin: 56px 0 14px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; gap: 14px; align-items: baseline; }
.legal h2 .n { font: 400 14px/1 var(--sans); font-feature-settings: "tnum" 1; color: var(--latte); min-width: 2ch; text-align: right; letter-spacing: 0; }
.legal h3 { font-size: 17.5px; margin: 28px 0 8px; }
.legal p, .legal li { line-height: 1.65; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal li::marker { color: var(--latte); }
.legal strong { font-weight: 500; }
.legal .box { background: var(--oat); border-radius: 28px; padding: 24px 26px; margin: 24px 0; }
.legal .muted { color: var(--latte); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0; }
.legal table.data { table-layout: fixed; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); }
.legal td { line-height: 1.5; }
/* the data table scans like an ingredients list: the thing in cocoa, the source and the reason quieter */
.legal table.data td { padding-top: 20px; padding-bottom: 20px; color: var(--latte); }
.legal table.data td:first-child { font-size: 15px; font-weight: 500; color: var(--cocoa); }
/* on a phone the index is a collapsed "jump to" under the short version (built by site.js) */
.legal .jump { margin: 8px 0 0; }
.legal .jump + h2 { border-top: 0; margin-top: 40px; padding-top: 0; }
.legal .jump summary { font-size: 16px; }
.legal .jump ol { list-style: none; padding: 0 0 18px; display: grid; gap: 2px; }
.legal .jump li { margin: 0; }
.legal .jump a { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; text-decoration: none; font-size: 15px; }
.legal .jump a span { font: 400 13px/1 var(--mono); color: var(--latte); width: 2ch; flex: none; text-align: right; }
.legal nav.sub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.legal nav.sub-nav a { height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--oat); font-size: 15px; text-decoration: none; }
.legal nav.sub-nav a[aria-current] { background: var(--cocoa); color: var(--milk); }
.legal .box-hd { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.legal .box ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 10px; }
.legal .box li { display: flex; gap: 12px; align-items: baseline; margin: 0; }
.legal .box li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; transform: translateY(-2px); background: color-mix(in oklab, var(--cocoa) 40%, transparent); }
/* long legal pages get a quiet index in the empty left margin (built by site.js from the numbered headings) */
.toc { display: none; }
@media (min-width: 1240px) {
  /* the index and the column are centred as one pair under the full-width header */
  .legal { position: relative; max-width: 1000px; padding-left: calc(var(--pad) + 240px); }
  .legal .jump { display: none; }
  /* top: the first row's cap height sits on the h1's cap height */
  .toc { display: block; position: absolute; top: 134px; bottom: 0; left: var(--pad); width: 200px; }
  .toc ol { position: sticky; top: 40px; list-style: none; padding: 0; display: grid; gap: 7px; font-size: 13px; line-height: 1.35; }
  .toc li { margin: 0; }
  .toc a { position: relative; color: var(--latte); text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
  .toc a span { font: 400 12px/1 var(--sans); font-feature-settings: "tnum" 1; width: 2ch; flex: none; text-align: right; }
  .toc a:hover, .toc a[aria-current] { color: var(--cocoa); }
  .toc a[aria-current]::before { content: ""; position: absolute; left: -14px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--cocoa); }
  .legal h2 { scroll-margin-top: 24px; }
}

/* footer */
.foot-wrap { padding: 140px var(--pad) 40px; overflow: hidden; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.foot-top > .wm { font-size: clamp(88px, 17vw, 260px); line-height: .8; }
/* at display size the pebble keeps a soft top highlight, scaled, instead of the 1px one */
.foot-top > .wm .j i { box-shadow: inset 0 .012em 0 rgba(255,255,255,.4); }
.foot-top > p.mono { white-space: nowrap; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--latte); padding-bottom: .4em; text-align: right; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--latte); }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cocoa); text-decoration: underline; }
.foot .mail a { color: var(--cocoa); }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stage .lab { display: none; }
  .phone { width: 280px; } .phones { gap: 40px; }
}
@media (max-width: 900px) {
  .top { padding-top: 20px; padding-bottom: 20px; }
  .top ul li:not(:last-child) { display: none; }
  .top ul a.cta { height: 38px; padding: 0 16px; font-size: 14px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 20px; min-height: 0; }
  .hero h1 { max-width: 12ch; font-size: clamp(40px, 11vw, 56px); }
  .sub { font-size: 18px; margin-top: 18px; }
  .row { flex-direction: column; }
  .field { flex: none; width: 100%; }
  .waitlist { margin-top: 28px; }
  .waitlist .btn { width: 100%; }
  .area { order: 0; height: 56px; font-size: 16px; }
  .note { text-align: center; }
  .err { order: 0; flex: none; padding: 0 20px; }
  .stage { --hz: 56%; --sun-w: 480px; --k: .6; height: 440px; border-radius: 40px; }
  .stage .inner { transform: scale(.62); transform-origin: 50% 0; top: -20px; }
  .stage .cap { left: 24px; top: 24px; }
  .stage .bean-cap { left: 24px; top: 46px; max-width: 270px; }
  .phones { padding: 80px 16px 56px; border-radius: 40px; margin-top: 40px; }
  .phones figcaption { left: 24px; top: 28px; }
  /* one phone on mobile, matched to the theme: light shows the 3 credit newcomer screen */
  .phone.lt, .phone.dk { width: 72vw; max-width: 300px; margin-top: 0; }
  .phone.dk { display: none; }
  :root[data-theme="dark"] .phone.lt { display: none; }
  :root[data-theme="dark"] .phone.dk { display: block; }
  .phone img { border-radius: 10.8vw; }
  .pace { padding-top: 120px; }
  .pace h2 { font-size: clamp(36px, 10vw, 48px); }
  .unit { margin-top: 20px; }
  .page .end { margin-top: 72px; }
  .join-line { margin-top: 56px; }
  .mini { left: 14px; right: 14px; bottom: 14px; width: auto; border-radius: 24px; }
  .sec { padding-top: 104px; }
  .wo { margin-top: 104px; grid-template-columns: 1fr; gap: 32px; padding: 56px 24px; border-radius: 40px; }
  .wo h2 { font-size: clamp(30px, 8.4vw, 36px); }
  .facts li { grid-template-columns: 1fr; gap: 6px; }
  .steps { grid-template-columns: 1fr; margin-top: 40px; gap: 12px; }
  .step { padding: 20px 20px 24px; border-radius: 32px; }
  .vig { height: 140px; margin-bottom: 20px; border-radius: 20px; }
  .big { font-size: 48px; }
  .v3 .big { font-size: 48px; } .v3 .pb { --s: 64px !important; }
  .v2 .pb { --s: 48px !important; } .v2 .pb.peach { --s: 60px !important; } .slot { width: 48px; height: 41px; }
  .menu { grid-template-columns: 1fr; gap: 0; border-top: 0; padding-top: 0; margin-top: 40px; }
  .fl { flex-direction: row; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hair); }
  .fl:last-child { border-bottom: 1px solid var(--hair); }
  .menu .sw { width: 52px; height: 20px; margin: 0; }
  .fl .txt { display: grid; grid-template-columns: 1fr auto; align-items: baseline; width: 100%; column-gap: 12px; row-gap: 0; }
  .fl b { font-size: 18px; }
  .fl .txt .rng { grid-column: 2; grid-row: 1; }
  .end { margin-top: 104px; padding: 64px 20px 56px; border-radius: 40px; }
  .offer { display: grid; justify-content: center; gap: 8px; text-align: left; font-size: 15px; margin-top: 20px; }
  .page-hd { grid-template-columns: 1fr; gap: 32px; }
  .stage.sm { --hz: 72%; --sun-w: 300px; width: 100%; height: 200px; border-radius: 32px; }
  .stage.sm .trio { bottom: calc(100% - var(--hz) - 16px); transform: scale(.72); transform-origin: 50% 100%; }
  .part { grid-template-columns: 1fr; padding: 40px 0; }
  .part:first-of-type { margin-top: 56px; }
  .card { padding: 24px 22px; border-radius: 28px; }
  .card.app .n { font-size: 34px; }
  .foot-wrap { padding-top: 96px; }
  .ghost { font-size: 14.5px; padding: 0 18px; }
  .more .ghost { height: auto; min-height: 44px; padding: 10px 20px; border-radius: 22px; text-wrap: balance; line-height: 1.35; }
  .foot-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-top > p.mono { text-align: left; padding: 0; white-space: normal; line-height: 1.6; }
  .foot { flex-direction: column; margin-top: 32px; }
  /* three rows of two, square: how it works, support, email | privacy, terms, community guidelines */
  .foot ul { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 12px 16px; }
  .foot li:nth-child(-n+2) { grid-column: 1; } .foot .mail { grid-column: 1; grid-row: 3; }
  .foot li:nth-child(3) { grid-area: 1 / 2; } .foot li:nth-child(4) { grid-area: 2 / 2; } .foot li:nth-child(5) { grid-area: 3 / 2; }
}
@media (max-width: 640px) {
  .field { padding: 0 20px; }
  /* the share link gets its own full-width line on a phone, so the whole address shows */
  .share, .end .share { flex-direction: column; align-items: stretch; background: none; padding: 0; }
  .share code { background: var(--milk); border-radius: 99px; padding: 14px 20px; text-align: center; font-size: 13px; }
  .end .share code { background: var(--oat); }
  .share .btn { height: 48px; }
  /* on home the hero form is right there, so the pill waits; once no form is on screen it floats in at the
     same spot, top right (site.js adds .float-in) */
  .top:has(~ main .hero) .cta { position: fixed; top: 20px; right: var(--pad); z-index: 20; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s, transform .25s, visibility 0s .25s; box-shadow: 0 8px 20px -10px var(--lift); }
  .top:has(~ main .hero) .cta.float-in { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  .kick .sep { display: none; }
  .kick > span:not(.sep) { display: block; }
  .chip-wo { letter-spacing: .08em; }
  .chip-wo .long { display: none; } .chip-wo .short { display: inline; }
  .legal nav.sub-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
  .legal nav.sub-nav::-webkit-scrollbar { display: none; }
  .legal nav.sub-nav.more { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .legal nav.sub-nav a { flex: none; }
  .legal .draft { margin-bottom: 32px; }
  .legal h2 { font-size: 21px; }
  .legal .scroll { overflow: visible; }
  .legal table.data, .legal table.data tbody, .legal table.data tr, .legal table.data td { display: block; width: auto; }
  .legal table.data thead, .legal table.data colgroup { display: none; }
  .legal table.data tr { background: var(--oat); border-radius: 20px; padding: 16px 18px; margin-bottom: 10px; }
  .legal table.data td { border: 0; padding: 0; }
  .legal table.data td + td { margin-top: 12px; }
  .legal table.data td:first-child { font-weight: 500; }
  .legal table.data td::before { content: attr(data-label); display: block; margin-bottom: 4px; letter-spacing: .1em; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone.lt { display: none; }
  :root:not([data-theme="light"]) .phone.dk { display: block; }
}
/* copy v2: the voice paragraph under the join h2, and the footer's made-in line */
.end-p { margin: 20px auto 0; max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--latte); }
.foot .made { display: block; margin-top: 6px; max-width: 62ch; text-wrap: balance; }
.hero .sub { max-width: 42ch; } /* the v2 hero sub runs four sentences; 30ch made it six short lines */
@media (max-width: 900px) {
  .hero .sub { text-wrap: pretty; } /* seven lines here, past where balance gives up, so pretty keeps "pace." off a line alone */
  .stage .bean-cap { max-width: 300px; }
  .end-p { text-align: left; font-size: 16px; } /* ten centred lines read badly on a phone */
}