/* The landing page (v7.md): Sherbet, the log's own style. Colours from tokens.css. Mobile first, one column; the
   hero goes two-up on a wide screen. Secondary text uses --cue-ink, not --muted, which is too light for reading. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
p { margin: 0 0 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.top {
  max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 18px;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
/* The logo is 16px pixel art (assets/source/logo.js): drawn at 2x, never smoothed; on a dark page a light rim keeps
   its black outline visible, as on the mascots. */
.brand img { image-rendering: pixelated; }
@media (prefers-color-scheme: dark) {
  .brand img {
    filter: drop-shadow(2px 0 0 rgba(255, 255, 255, .38)) drop-shadow(-2px 0 0 rgba(255, 255, 255, .38))
      drop-shadow(0 2px 0 rgba(255, 255, 255, .38)) drop-shadow(0 -2px 0 rgba(255, 255, 255, .38));
  }
}
.top-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--ink); border-radius: 22px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.top-link:hover { background: var(--pill); }

/* The scrolling story (landing-scroll.js): a big question over a phone, Pally-style. Without the script it's one
   picture of the finished week; with it (html.scrolly) the stage sticks while #story scrolls by, five steps long. */
.story {
  background:
    radial-gradient(60% 45% at 50% 30%, var(--p1), transparent 70%),
    radial-gradient(45% 40% at 18% 80%, var(--p2), transparent 70%),
    radial-gradient(45% 40% at 85% 70%, var(--p0), transparent 70%);
}
.stage { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 32px; overflow: hidden; }
.scrolly .story { height: 600svh; }
.scrolly .stage { position: sticky; top: 0; height: 100svh; justify-content: center; padding-top: 8px; padding-bottom: 16px; }

.captions { display: grid; text-align: center; margin-bottom: 20px; }
.caption { grid-area: 1 / 1; display: none; }
html:not(.scrolly) .caption[data-at="4"] { display: block; }
.scrolly .caption { display: block; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.scrolly .caption.current { opacity: 1; transform: none; }
.when {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 6px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--cue-ink); font-variant-numeric: tabular-nums;
}
.when::before, .when::after { content: ""; width: 28px; height: 1px; background: var(--faint); }
.ask { margin: 0; font-size: 38px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }

/* The phone, drawn in CSS; its height fits the screen under the question. */
.scene { position: relative; margin: 0; --ph: min(600px, 74svh); }
.scrolly .scene { --ph: clamp(400px, calc(100svh - 150px), 620px); }
.phone {
  position: relative; z-index: 1; height: var(--ph); width: calc(var(--ph) * .5);
  padding: 9px; border-radius: 46px; background: #1d1f23; overflow: hidden;
  box-shadow: 0 0 0 1.5px #5a5e66 inset, 0 30px 60px -20px var(--shadow), 0 12px 24px -12px var(--shadow);
}
.screen {
  position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column; font-size: 14px; line-height: 1.45;
}
.status {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 0; flex: none;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.island { width: 34%; height: 22px; border-radius: 12px; background: #000; }
.bars { width: 22px; height: 10px; border-radius: 3px; background: var(--ink); opacity: .85; }
.screen .title { margin: 14px 16px 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; flex: none; }
.log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 10px 12px; }

/* The log's boxes, as a picture: the same radius and type as app.css, a little smaller. */
.note { flex: none; border-radius: 14px; padding: 0 14px 14px; margin-top: 8px; background: var(--pc, transparent); overflow: hidden; }
.p0 { --pc: var(--p0); } .p1 { --pc: var(--p1); } .p2 { --pc: var(--p2); } .p3 { --pc: var(--p3); }
.p4 { --pc: var(--p4); } .p5 { --pc: var(--p5); }
.note .date, .paper .date {
  display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--cue-ink);
}
.note .text, .paper .text { margin: 0; white-space: pre-line; }
.estimate { margin: 8px 0 0; font-size: 12px; font-style: italic; color: var(--cue-ink); }
.by-app .text { color: var(--cue-ink); }
.cue { font-weight: 600; color: var(--cue-ink); }
.cue::before { content: "\00b7"; margin-right: 8px; color: var(--faint); }
.composer { border: 1.5px dashed var(--line); padding-top: 12px; flex: none; }
.placeholder { color: var(--cue-ink); }

/* Friday's draft (v16), as the log draws it: the lift's name as its pill, last time's sets faint and dotted until
   they're checked off, and the rest timer under them, a draining hairline and its numeral. */
.draft .text { font-weight: 700; }
.lift { margin: 6px 0 0; }
.lift .pill {
  display: inline-block; padding: 0 6px; border-radius: 4px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 17%, transparent);
}
.sets { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.set { padding: 1px 6px; border-radius: 8px; border: 1.5px dotted var(--faint); color: var(--cue-ink); }
.set.done { border: 1.5px solid transparent; background: var(--bg); color: var(--ink); font-weight: 600; }
.set.done::before { content: "\2713"; margin-right: 4px; color: var(--accent); }
.timer { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.timer i { position: relative; flex: 1; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.timer i::after { content: ""; position: absolute; inset: 0 40% 0 0; background: var(--pk, var(--accent)); }
.timer b { font-size: 18px; font-weight: 300; font-variant-numeric: tabular-nums; }
.draft { --pk: var(--k4); }
/* The set that's up next, unfurled under the timer with its check. */
.dnext {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 7px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.dnext b { font-size: 18px; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dnext span:last-child { flex: 1; min-width: 0; font-size: 11px; line-height: 1.3; font-weight: 600; color: var(--cue-ink); }
.dnext .wcheck { width: 24px; height: 24px; }

/* Messages, as iMessage draws it: Liftspoon's grey bubbles on the left, yours blue on the right, a link alone in a
   text unfurled into a card. Its own colours, light and dark, not Sherbet's. */
.imsg {
  --im-bg: #ffffff; --im-them: #e9e9eb; --im-them-ink: #000000; --im-you: #0b84fe; --im-you-ink: #ffffff;
  --im-stamp: #8e8e93; --im-head: #f6f6f8; --im-line: #dcdce0;
  background: var(--im-bg); color: var(--im-them-ink);
}
@media (prefers-color-scheme: dark) {
  .imsg {
    --im-bg: #000000; --im-them: #26252a; --im-them-ink: #ffffff; --im-stamp: #8e8e93; --im-head: #161618;
    --im-line: #2c2c30;
  }
}
.imsg .status { color: var(--im-them-ink); }
.imsg .bars { background: var(--im-them-ink); }
.imsg-head {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px;
  background: var(--im-head); border-bottom: 1px solid var(--im-line);
}
.imsg-head p { margin: 0; font-size: 11px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--p3); }
.avatar img { width: 24px; height: 24px; image-rendering: pixelated; }
.thread {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 3px; padding: 0 8px 6px; font-size: 12.5px; line-height: 1.3;
}
.thread p { margin: 0; }
.stamp { align-self: center; margin: 8px 0 2px !important; font-size: 10.5px; color: var(--im-stamp); }
.stamp b { font-weight: 600; }
.b { flex: none; max-width: 84%; padding: 6px 11px; border-radius: 17px; white-space: pre-line; overflow-wrap: anywhere; }
.b.you { align-self: flex-end; background: var(--im-you); color: var(--im-you-ink); border-bottom-right-radius: 5px; }
.b.them { align-self: flex-start; background: var(--im-them); color: var(--im-them-ink); border-bottom-left-radius: 5px; }
.typing {
  flex: none; align-self: flex-start; display: none; gap: 4px; padding: 9px 12px; border-radius: 17px;
  background: var(--im-them); overflow: hidden;
}
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--im-stamp); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.photo {
  flex: none; align-self: flex-end; width: 56%; padding: 6px; border-radius: 14px; background: #8a5a34;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
}
.board {
  margin: 0; padding: 8px 10px; border-radius: 8px; background: #263a33; color: #eef2ec;
  font: 11px/1.3 "Chalkboard SE", "Bradley Hand", "Comic Sans MS", cursive; letter-spacing: .02em;
  text-shadow: 0 0 1px rgba(238, 242, 236, .6);
}
/* The card Liftspoon sends after a logged workout (v12, "Cards"): a link alone in a text, which iMessage unfurls into
   the workout's box. Drawn unfurled; while its step plays it comes in as the bare link first. */
.card {
  flex: none; align-self: flex-start; width: 74%; border-radius: 17px; overflow: hidden;
  background: var(--im-them, var(--pill)); color: var(--im-them-ink, var(--ink));
}
.card-art { overflow: hidden; padding: 9px 11px 10px; font-size: 11px; line-height: 1.4; background: var(--pc); color: var(--ink); }
.card-art b { display: block; font-size: 10px; color: var(--cue-ink); margin-bottom: 2px; }
/* What Liftspoon understood the workout to be, large; the day and count under it. Never the text just sent. */
.card-big { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.card-big + b { margin: 2px 0 0; }
.card-meta { margin: 0; padding: 6px 11px 8px; font-size: 12px; font-weight: 600; }
.card-url { display: none; overflow: hidden; color: var(--im-you, var(--accent)); font-weight: 400; text-decoration: underline; }
.card-title { display: block; overflow: hidden; }
.card-title small { display: block; font-weight: 400; color: var(--im-stamp, var(--cue-ink)); }
.compose { flex: none; padding: 6px 10px 14px; }
.compose span {
  display: block; padding: 5px 12px; border: 1px solid var(--im-line); border-radius: 99px;
  font-size: 12px; color: var(--im-stamp);
}

/* The story plays: each step's texts come in one after another as it comes on (.current), on beats t1–t6; a step
   already played stays as it ended. Typing dots show for a beat before each reply, and a card comes in as its bare
   link, then unfurls. */
.t1 { --t: .5s; } .t2 { --t: 1.5s; } .t3 { --t: 2.2s; } .t4 { --t: 2.9s; } .t5 { --t: 3.9s; } .t6 { --t: 4.6s; }
.scrolly .thread [data-at] {
  max-height: 260px; transform-origin: bottom center;
  transition: max-height .35s, opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1), margin .35s, padding .35s;
}
.scrolly .thread [data-at]:not(.on) {
  max-height: 0; opacity: 0; transform: translateY(8px) scale(.96); padding-top: 0; padding-bottom: 0; margin: 0 !important;
}
.scrolly .thread .current { transition-delay: var(--t, 0s); }
.scrolly .typing.current { display: flex; animation: typing 1s var(--t) both; }
@keyframes typing {
  0% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  12%, 88% { opacity: 1; max-height: 30px; padding-top: 9px; padding-bottom: 9px; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}
.scrolly .card.current .card-art { animation: unfurl .45s cubic-bezier(.2, .8, .2, 1) calc(var(--t) + .7s) both; }
@keyframes unfurl { from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } to { max-height: 160px; } }
.scrolly .card.current .card-url { display: block; animation: urlout .2s calc(var(--t) + .7s) both; }
@keyframes urlout { from { max-height: 20px; opacity: 1; } to { max-height: 0; opacity: 0; } }
.scrolly .card.current .card-title { animation: titlein .3s calc(var(--t) + .8s) both; }
@keyframes titlein { from { max-height: 0; opacity: 0; } to { max-height: 64px; opacity: 1; } }
.scrolly .card.tapped.current { animation: tap .3s calc(var(--t) + 1.7s) both; }
@keyframes tap { 50% { transform: scale(.95); filter: brightness(.92); } }

/* Friday: the draft's card, tapped, opens the log over the thread; it goes again for Sunday. */
.screen.page { position: absolute; inset: 9px; height: auto; display: none; }
.scrolly .screen.page { display: flex; transform: translateX(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.scrolly .screen.page.current { transform: none; transition-delay: calc(2.2s + 2.1s); }
.scrolly .page.current .timer i::after { animation: drain 6s linear 4.8s both; }
@keyframes drain { from { right: 20%; } to { right: 55%; } }

/* Paper cutouts beside the phone on a wide screen, like the props on a desk: Stats and a meal. */
.paper { display: none; }
@media (min-width: 900px) {
  .paper {
    display: block; position: absolute; width: 210px; padding: 4px 16px 16px; border-radius: 14px; font-size: 14px;
    background: var(--pc, var(--menu-bg)); box-shadow: 0 18px 40px -18px var(--shadow);
  }
  .paper-left { left: -230px; top: 22%; transform: rotate(-6deg); }
  /* Straight, not tilted: it carries a pixel sticker, and rotated pixel art blurs. */
  .paper-right { right: -230px; top: 52%; }
  .paper .bar { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; }
  .paper .bar span { width: 44px; color: var(--cue-ink); }
  .paper .bar i { height: 8px; border-radius: 4px; background: var(--accent); opacity: .7; }
  .paper .bar b { font-size: 12px; font-variant-numeric: tabular-nums; }
  .w6 { width: 90px; } .w4 { width: 60px; } .w2 { width: 30px; }
  .ask { font-size: 64px; }
  .when { font-size: 17px; }
}

/* The promise and the ask, first on the page; the story follows it. */
.hero { max-width: 760px; margin: 0 auto; padding: 48px 16px 40px; text-align: center; }
h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin: 0 0 16px; text-wrap: balance; }
.sub { font-size: 19px; line-height: 1.5; color: var(--cue-ink); margin-bottom: 24px; text-wrap: balance; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; margin-bottom: 12px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border-radius: 12px; background: var(--accent); color: var(--bg); font-weight: 700; text-decoration: none;
  width: 100%;
}
.button:hover { filter: brightness(1.08); }
.small { margin: 0; font-size: 15px; color: var(--cue-ink); }
/* Inline links in short lines still get a 44px target. */
.small a, .foot a, .privacy a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* The sections: the log's reading column. */
.band { max-width: 680px; margin: 0 auto; padding: 48px 16px 0; }
h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; margin: 0 0 12px; }
em { font-style: normal; background: var(--pill); border-radius: 6px; padding: 1px 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* The assistants' own logos (public/brand, unaltered), text-sized next to their names, where the page names them.
   The logo never wraps away from its name. */
.app { white-space: nowrap; }
.app img { width: 18px; height: 18px; margin: 0 5px 0 3px; vertical-align: -3px; }

/* An example thread, as iMessage draws it (the bubbles above), on a panel of Messages' own background. */
.chat {
  display: flex; flex-direction: column; gap: 4px; margin: 20px 0; padding: 14px 12px; border-radius: 20px;
  border: 1px solid var(--im-line); font-size: 16px; line-height: 1.35;
}
.chat p { margin: 0; }
.examples { display: grid; gap: 12px; margin-top: 16px; }
.examples .chat { margin: 0; font-size: 15px; }
@media (min-width: 640px) { .examples { grid-template-columns: 1fr 1fr; } }

.privacy .box { background: var(--p3); border-radius: 14px; padding: 20px 16px 8px; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 4px; min-height: 52px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "›"; width: 18px; flex: none; color: var(--cue-ink); font-weight: 700; transition: transform .15s; }
.faq details[open] > summary::before { transform: rotate(90deg); }
.faq h3 { display: inline; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.faq details p { padding-left: 22px; color: var(--cue-ink); }
.faq code { font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--pill); border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; }

.closing .cta { margin-bottom: 0; }

.foot {
  /* The rule lines up with the text column above, gutters included. */
  width: calc(100% - 32px); max-width: 648px; margin: 56px auto 0; padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
  border-top: 1px solid var(--line); font-size: 15px; color: var(--cue-ink);
}
.foot p { margin: 0; }

@media (min-width: 520px) {
  .button { width: auto; }
}
@media (min-width: 900px) {
  .hero { padding-top: 72px; padding-bottom: 72px; }
  h1 { font-size: 54px; }
  .sub { font-size: 20px; }
  .band { padding-top: 64px; }
}

/* Scoop and Sunny (assets/, served at /landing-art/). Pixel art is only ever drawn at whole multiples of its size
   (32px mascots at 64, 96 or 128px; 16px stickers at 32px), never smoothed, scaled or rotated. A mascot is its two
   frames stacked; every other 520 ms the second shows and the first hides (both are transparent, so showing one
   over the other would draw both poses at once). With reduced motion every animation stops (below), so the first
   frame shows. */
.px { display: block; image-rendering: pixelated; }
.mascot { position: relative; display: block; flex: none; width: var(--s); height: var(--s); --s: 64px; --u: 2px; }
.mascot .px { position: absolute; inset: 0; width: 100%; height: 100%; }
.mascot .f0 { animation: frame0 1040ms steps(1, end) infinite; }
.mascot .f1 { opacity: 0; animation: frames 1040ms steps(1, end) infinite; }
@keyframes frame0 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes frames { 0% { opacity: 0; } 50% { opacity: 1; } }
.sticker { display: block; flex: none; width: 32px; height: 32px; --u: 2px; }
.sticker .px { width: 100%; height: 100%; }
/* On a dark page the art's black outline disappears: a light rim, one art pixel wide, keeps its shape (as app.css). */
@media (prefers-color-scheme: dark) {
  .mascot .px, .sticker .px {
    --rim: rgba(255, 255, 255, .38);
    filter: drop-shadow(var(--u) 0 0 var(--rim)) drop-shadow(calc(-1 * var(--u)) 0 0 var(--rim))
      drop-shadow(0 var(--u) 0 var(--rim)) drop-shadow(0 calc(-1 * var(--u)) 0 var(--rim));
  }
}
/* Something to stand on: a short flat shadow under the feet. */
.floor::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: var(--u); background: var(--shadow); }

/* The story: Scoop peeks over the phone, his feet behind it, his mood following the week (data-step). At the end
   Sunny walks in from the right and they high-five (landing-scroll.js: .meet, .slapping, then .settled), standing
   where Scoop stood. Without the script it's the high five's contact frame, still. */
.captions { margin-bottom: 64px; }
.scrolly .scene { --ph: clamp(380px, calc(100svh - 204px), 540px); }
.peek, .duo { position: absolute; z-index: 0; bottom: calc(100% - 12px); display: flex; --s: 64px; --u: 2px; }
.peek { right: 72px; }
.duo { right: 8px; }
.peek .mascot, .duo .mascot { --s: inherit; --u: inherit; }
.peek .mascot { display: none; }
.story[data-step="0"] .peek .steady, .story[data-step="1"] .peek .steady, .story[data-step="2"] .peek .steady,
.story[data-step="3"] .peek .tired, .story[data-step="4"] .peek .proud { display: block; }
.duo .rest { display: none; }
html:not(.scrolly) .peek { display: none; }
html:not(.scrolly) .duo .f0 { display: none; }
html:not(.scrolly) .duo .slap .f1 { opacity: 1; animation: none; }
.scrolly .duo { display: none; }
.scrolly .story.meet[data-step="4"] .peek { display: none; }
.scrolly .story.meet[data-step="4"] .duo { display: flex; }
.scrolly .meet .duo .slap .f0, .scrolly .meet .duo .slap .f1 { animation: none; }
.scrolly .meet .duo .arrive { animation: arrive 640ms steps(4, end) both; }
@keyframes arrive { from { transform: translateX(var(--s)); } to { transform: none; } }
.scrolly .slapping .duo .slap .f0 { animation: frame0 1040ms steps(1, end) 2; }
.scrolly .slapping .duo .slap .f1 { animation: frames 1040ms steps(1, end) 2; }
.scrolly .settled .duo .slap { display: none; }
.scrolly .settled .duo .rest { display: block; }
@media (min-width: 900px) {
  .captions { margin-bottom: 84px; }
  .peek, .duo { bottom: calc(100% - 15px); --s: 96px; --u: 3px; }
  .peek { right: 104px; }
}

/* The meal cutout's sticker, standing on its date line like the log's. */
.paper .stand { position: absolute; top: 6px; right: 12px; }

/* By the headline: the pair above it on a phone, one each side on a wide screen. */
.crew-pair { display: flex; justify-content: center; align-items: flex-end; gap: 40px; margin: 0 0 20px; }
.crew-pair figure, .side { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.crew-pair .mascot { --s: 96px; --u: 3px; }
.crew-pair figcaption, .side figcaption { font-size: 13px; font-weight: 600; color: var(--cue-ink); }
.side { display: none; }
@media (min-width: 900px) {
  .hero { max-width: 1040px; }
  .hero-row { display: grid; grid-template-columns: 144px minmax(0, 640px) 144px; justify-content: center; align-items: center; gap: 8px; }
  .crew-pair { display: none; }
  .side { display: flex; gap: 8px; }
  .side .mascot { --s: 128px; --u: 4px; }
}

/* Want to try it: the two again, saying goodbye. */
.goodbye { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Sunday's recap: the weekly video (PR #116) unfurls in the card's place and plays, muted, on a loop. */
.card-video { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; padding: 0; background: #f3f7b4; }

/* Or just write it yourself: a box being typed, as the log draws it (app.css: the pixel pill, the sparkle, the PR
   chip, the interactive switch). Drawn finished; with the scroll script (html.scrolly) it waits, then plays once
   when it comes into view (.play), on the beats below. */
.write {
  --pk: var(--k2); --pkd: var(--k2d); position: relative; margin: 20px 0 16px; padding: 0 16px 16px; border-radius: 14px;
  background: var(--pc); font-size: 16px; line-height: 1.5;
}
.write p { margin: 0; }
.wdate {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--cue-ink);
}
.write .dsw {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px 0 4px; border-radius: 999px;
  border: 1.5px solid var(--pk); color: var(--pk); background: var(--pk); color: var(--on-accent);
}
.write .knob { position: relative; width: 18px; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--on-accent) 35%, transparent); }
.write .knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--on-accent); transform: translateX(6px);
}
.wline { position: relative; min-height: 1.5em; }
.type { display: inline-block; vertical-align: top; white-space: pre; }
/* A lift's pixel pill (app.css .lift): a flat fill with stepped 2px corners and a darker 2px lip. */
.name, .wset {
  position: relative; isolation: isolate; display: inline-block; padding: 0 4px 1px; margin: 0 -4px;
  --f: color-mix(in srgb, var(--pk) var(--lift-fill), transparent); --e: color-mix(in srgb, var(--pkd) var(--lift-edge), transparent);
}
.wset { --f: var(--pr-wash); --e: var(--pr-edge); }
.name::before, .wset::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--e), var(--e)) 4px 100% / calc(100% - 8px) 2px no-repeat,
    linear-gradient(var(--f), var(--f)) 4px 0 / calc(100% - 8px) calc(100% - 2px) no-repeat,
    linear-gradient(var(--f), var(--f)) 2px 2px / 2px calc(100% - 4px) no-repeat,
    linear-gradient(var(--f), var(--f)) right 2px top 2px / 2px calc(100% - 4px) no-repeat,
    linear-gradient(var(--f), var(--f)) 0 4px / 2px calc(100% - 8px) no-repeat,
    linear-gradient(var(--f), var(--f)) right 0 top 4px / 2px calc(100% - 8px) no-repeat;
}
.prchip {
  display: inline-block; height: 16px; margin-left: 10px; padding: 0 5px 2px; font-size: 10px; font-weight: 800;
  line-height: 14px; letter-spacing: .04em; color: var(--pr-ink); vertical-align: 2px;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
  background: linear-gradient(var(--pr-lip), var(--pr-lip)) 0 100% / 100% 2px no-repeat, var(--pr-fill);
}
/* The sparkle (app.css .spk): a 2px pixel and its cross, two frames, then gone. Gold for a PR. */
.spk {
  position: absolute; top: 2px; width: 2px; height: 2px; opacity: 0; pointer-events: none;
  background: var(--spark-core); color: var(--spark); transform: scale(2);
}
.name .spk { right: -10px; }
.wset .spk { right: -12px; }
.spk.gold { background: var(--spark-seed); color: var(--spark-core); transform: scale(3); }
@keyframes sparkle {
  0% { opacity: 1; box-shadow: 0 -3px, 0 3px, -3px 0, 3px 0; }
  45% { opacity: 1; box-shadow: 0 -3px, 0 3px, -3px 0, 3px 0; }
  50% { opacity: 1; box-shadow: -3px -3px, 3px -3px, -3px 3px, 3px 3px, 0 -6px, 0 6px, -6px 0, 6px 0; }
  95% { opacity: 1; box-shadow: -3px -3px, 3px -3px, -3px 3px, 3px 3px, 0 -6px, 0 6px, -6px 0, 6px 0; }
  100% { opacity: 0; }
}
.wfact { margin-top: 2px !important; font-size: 13px; font-weight: 600; color: var(--cue-ink); font-variant-numeric: tabular-nums; }
.wplan { overflow: hidden; }
.wplan .wline:nth-child(odd) { margin-top: 10px; }
.wsets { display: flex; gap: 8px; color: var(--cue-ink); }
.wnext {
  display: flex; align-items: center; gap: 10px; margin-top: 12px !important; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.wnext b { font-size: 24px; font-weight: 300; font-variant-numeric: tabular-nums; }
.wnext span:last-child { font-size: 12px; font-weight: 600; color: var(--cue-ink); }
.wcheck {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pk);
  display: grid; place-items: center; color: var(--pk);
}
.wcheck::after { content: "\2713"; font-size: 15px; font-weight: 800; opacity: 0; }

/* The play: paused on its first frame until .play. The beats (seconds from .play): the title types at .2, the lift's
   name at 1.3 and pills with a sparkle at 2.1, the sets line types at 2.6 and is a PR at 3.9, the facts at 4.6, the
   switch flips at 5.8, the plan rises in at 6.3, the next set at 7.3. */
.scrolly .write .type { animation: type var(--d) steps(var(--n), end) var(--at) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.scrolly .write .a0 { --at: .2s; --d: .9s; --n: 15; }
.scrolly .write .a1t { --at: 1.3s; --d: .7s; --n: 12; }
.scrolly .write .a2 { --at: 2.6s; --d: 1.1s; --n: 23; }
.scrolly .write .a1::before { animation: pillin .25s 2.1s both; }
.scrolly .write .wset::before { animation: pillin .25s 3.9s both; }
@keyframes pillin { from { opacity: 0; } }
.scrolly .write .a1s { animation: sparkle .5s steps(1, end) 2.1s both; }
.scrolly .write .a2s { animation: sparkle .6s steps(1, end) 3.9s both; }
.scrolly .write .spk { animation-fill-mode: forwards; }
.scrolly .write .a2p { animation: chip .3s cubic-bezier(.3, 1.6, .5, 1) 3.9s both; }
@keyframes chip { from { opacity: 0; transform: scale(.4); } }
.scrolly .write .a3 { animation: rise .35s 4.6s both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.scrolly .write .dsw { animation: dswon .2s 5.8s both; }
.scrolly .write .knob { animation: knobon .2s 5.8s both; }
.scrolly .write .knob::after { animation: dotright .2s 5.8s both; }
@keyframes dswon { from { background: transparent; color: var(--pk); } }
@keyframes knobon { from { background: color-mix(in srgb, var(--pk) 25%, transparent); } }
@keyframes dotright { from { transform: none; background: var(--pk); } }
.scrolly .write .a4 { animation: plan .7s cubic-bezier(.2, .8, .2, 1) 6.3s both; }
@keyframes plan { from { max-height: 0; opacity: 0; } to { max-height: 240px; opacity: 1; } }
.scrolly .write .a5 { animation: rise .35s 7.3s both; }
/* Held on its first frame until .play; last, so the animations above don't reset it. */
.scrolly .write :is(.type, .prchip, .wfact, .wplan, .wnext, .spk, .dsw, .knob),
.scrolly .write :is(.name, .wset, .knob)::before, .scrolly .write .knob::after { animation-play-state: paused; }
.scrolly .write.play :is(.type, .prchip, .wfact, .wplan, .wnext, .spk, .dsw, .knob),
.scrolly .write.play :is(.name, .wset)::before, .scrolly .write.play .knob::after { animation-play-state: running; }

/* On a wide screen the story sits side by side: the day and its question on the left, the phone on the right, so
   the phone stays phone-sized instead of the page stacking tall. Stats' cutout moves to the phone's far side. */
@media (min-width: 900px) {
  .stage { flex-direction: row; justify-content: center; gap: 72px; }
  .captions { width: 400px; margin-bottom: 0; text-align: left; }
  .when { justify-content: flex-start; }
  .when::before { display: none; }
  .ask { font-size: 56px; }
  .scene { --ph: min(560px, 74svh); }
  .scrolly .scene { --ph: clamp(420px, calc(100svh - 200px), 520px); }
  .paper-left { left: auto; right: -200px; top: 58%; transform: rotate(5deg); }
}