/* The bold condensed capitals: the hero headline and the five step bands only. */
.display {
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.86;
}
.num { font-variant-numeric: tabular-nums; }
/* A masked line: the words rise from behind their own baseline. */
.line { display: block; overflow: hidden; padding-bottom: 0.05em; margin-bottom: -0.05em; }
.line > span { display: block; }
.sprite { position: absolute; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  font-weight: 600; font-size: var(--step-body); text-decoration: none;
  background: var(--btn-bg, var(--red)); color: var(--btn-fg, var(--on-red));
  transition: transform .16s var(--ease-out), background-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-bg-hover, var(--ink-field)); color: var(--btn-fg-hover, var(--on-ink)); }
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline-color: var(--btn-ring, var(--on-paper)); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ---------- Hero: the agent's work log, written as you scroll ---------- */
.hero-pin { position: relative; display: flex; flex-direction: column; }
@media (min-width: 1101px) and (min-height: 700px) {
  .hero-pin { min-height: 100svh; }
  /* The held hero is one screen tall, so its headline and bands scale with the screen's height as well as its width. */
  .hero { --step-display: min(clamp(3.25rem, 0.5rem + 6vw, 5.75rem), 9.6svh); }
}
@media (min-width: 1101px) and (max-width: 1400px) and (min-height: 700px) {
  /* Below about 1390px the one-line subhead pushes the button to its own row, so the type gives that row's height back. */
  .hero { --step-display: min(clamp(3.25rem, 0.5rem + 6vw, 5.75rem), 8.75svh); }
}
.hero { flex: 1 0 auto; display: flex; flex-direction: column; }
.hero-top { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: clamp(24px, 3.4vh, 40px) var(--m) clamp(20px, 2.8vh, 28px); flex: 1 0 auto; }
.hero-head { grid-column: 1 / 9; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 2.4vh, 24px); }
.hero-title { font-size: var(--step-display); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vh, 32px); }
.standfirst { font-size: var(--step-body); line-height: 1.45; }
.btn-lg { min-height: 76px; padding: 0 52px; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); }
.cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fine { font-size: var(--step-small); color: var(--soft-on-paper); }
.go { display: grid; justify-items: start; gap: 8px; }
.nowrap { white-space: nowrap; }

/* The one claw moment: the claw from the logo reaches into an ink field, pinches the number and lifts it. */
.stage {
  position: absolute; z-index: 0; right: 0; top: -56px; bottom: 0;
  width: calc(33.333% + var(--m) * 0.66);
  overflow: hidden;
  background: var(--ink-field);
  --W: clamp(300px, 30vw, 460px);
  --tipX: 46%;
  --tipY: calc(100% - 128px);
}
.lift { position: absolute; inset: 0; transform: translateY(-34px) rotate(-2deg); transform-origin: var(--tipX) var(--tipY); }
.drop { position: absolute; inset: 0; }
.grab {
  position: absolute; width: var(--W); height: calc(var(--W) * 1.297);
  left: calc(var(--tipX) - var(--W) * 0.28);
  top: calc(var(--tipY) - var(--W) * 1.297 * 0.955);
  transform-origin: 28% 95.5%;
  transform: rotate(var(--turn, 10deg));
}
.claw { display: block; width: 100%; height: 100%; overflow: visible; transform: scaleY(-1); }
.claw .c-body, .claw .finger { fill: var(--claw); }
.claw .c-dots { fill: var(--claw-dots); }
.claw .finger { transform-box: fill-box; transform-origin: 85% 98%; transform: rotate(-4deg); }
/* What the claw holds: the number. */
.held {
  position: absolute; left: var(--tipX); top: calc(var(--tipY) - 8px);
  transform: translateX(-50%) rotate(-7deg); transform-origin: 50% 0;
  width: max-content;
}
.chip {
  background: var(--surface); color: var(--on-paper);
  padding: 14px 20px 14px;
  text-align: center; white-space: nowrap;
  font-size: var(--step-head); line-height: .9;
}
.chip small { font-size: 0.4em; margin-left: 0.1em; letter-spacing: 0; text-transform: none; font-stretch: 75%; }
.ev-card { background: var(--app-card); color: var(--app-ink); border: 1px solid var(--app-line); border-radius: 1.1em; padding: 0.55em 0.8em 0.6em; display: grid; justify-items: start; gap: 0.25em; white-space: nowrap; font-size: clamp(16px, 0.9rem + 0.3vw, 19px); line-height: 1.3; }

/* Each step is two copies of the same words: ink on cream underneath, the band's colours on top.
   The top copy is revealed by clip-path, so every letter is always wholly one pair or the other. */
.log { position: relative; z-index: 1; }
.step { position: relative; }
.row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(8px, 1.1vh, 12px) var(--m);
  min-height: calc(var(--step-display) * 0.86 + 2 * clamp(8px, 1.1vh, 12px));
}
.row.ghost { color: var(--on-paper); visibility: hidden; }
.row.band { position: absolute; inset: 0; background: var(--bg); color: var(--fg); clip-path: inset(0); }
.step .say { font-size: var(--step-display); }
.step .trace { font-size: var(--step-body); line-height: 1.35; text-align: right; max-width: 36ch; justify-self: end; }
.step .trace a, .step .trace .a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
.s1 { --bg: var(--red); --fg: var(--on-red); }
.s2 { --bg: var(--ink-field); --fg: var(--on-ink); }
.s3 { --bg: var(--kraft); --fg: var(--on-kraft); }
.s4 { --bg: var(--bright); --fg: var(--on-bright); }
.s5 { --bg: var(--ox); --fg: var(--on-ox); }

/* ---------- Chapters ---------- */
.ch { position: relative; padding: clamp(72px, 12vh, 150px) var(--m); }
.f-paper { background: var(--paper); color: var(--on-paper); }
.f-ink { background: var(--ink-field); color: var(--on-ink); }
.f-red { background: var(--red); color: var(--on-red); }
.lead { font-size: var(--step-lead); line-height: 1.32; }
.h2 { font-size: var(--step-h2); font-stretch: 72%; font-weight: 800; letter-spacing: -0.012em; line-height: 0.96; }

/* ---------- No forms: five ways in, each showing what you give and what CalClaw does with it ---------- */
#no-forms { padding-top: clamp(56px, 9vh, 120px); }
.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { position: relative; min-width: 0; padding: clamp(20px, 2.2vw, 32px); display: grid; gap: 20px; align-content: start; }
.t-head { grid-column: 1; grid-row: 1; background: var(--ink-field); color: var(--on-ink); align-content: space-between; gap: 40px; }
.t-head .lead { max-width: 24ch; }
.t-type { grid-column: 2; grid-row: 1; background: var(--red); color: var(--on-red); }
.t-say { grid-column: 2; grid-row: 2; background: var(--ox); color: var(--on-ox); }
.t-plate { grid-column: 1; grid-row: 2 / 4; background: var(--kraft); color: var(--on-kraft); }
.t-label { grid-column: 2; grid-row: 3 / 5; background: var(--bright); color: var(--on-bright); }
.t-scan { grid-column: 1; grid-row: 4; background: var(--paper-2); color: var(--on-paper); }
.t-left { grid-column: 1 / -1; grid-row: 5; background: var(--red); color: var(--on-red); }
.t-left .user .shot { width: 11em; }
.tile-name { font-size: var(--step-lead); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.tile-line { font-size: var(--step-body); line-height: 1.4; margin-top: 8px; max-width: 30ch; }
.badge-note { font-size: var(--step-small); line-height: 1.4; max-width: 44ch; }
@media (min-width: 1280px) {
  .tile.io { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); column-gap: clamp(20px, 2vw, 32px); }
  .badge-note { grid-column: 2; }
}

/* App fragments: CalClaw's own chat parts, colours and shapes from CalClawTheme.swift and TodayChatThreadView.swift. */
.chat { background: var(--app-canvas); color: var(--app-ink); font-size: clamp(14px, 0.82rem + 0.18vw, 16px); line-height: 1.3; padding: 1.07em; display: grid; gap: 0.67em; align-content: start; }
.bubble { border-radius: 1.2em; padding: 0.67em 0.93em; }
.user { justify-self: end; max-width: 86%; background: var(--app-brand); color: var(--app-on-brand); display: grid; gap: 0.53em; }
.user .shot { border-radius: 0.8em; justify-self: start; align-self: start; max-width: 100%; width: 14.67em; height: auto; }
.user.scan { display: flex; align-items: center; gap: 0.4em; }
.user.scan svg { width: 1.15em; height: 1.15em; flex: none; }
.reply { justify-self: start; max-width: 94%; background: var(--app-card); color: var(--app-ink); border: 1px solid var(--app-line); display: grid; gap: 0.53em; }
.reply b { font-weight: 700; }
.evidence { display: grid; justify-items: start; gap: 0.2em; padding-top: 0.13em; }
.badge { font-size: 0.73em; font-weight: 700; color: var(--app-brand-text); background: var(--app-brand-wash); border-radius: 1em; padding: 0.15em 0.45em; }
.src { font-size: 0.73em; font-weight: 600; color: var(--app-brand-text); display: grid; gap: 0.1em; text-decoration: none; min-width: 0; }
.src .t { display: flex; align-items: center; gap: 0.35em; min-width: 0; }
.src .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src svg { width: 1.15em; height: 1.15em; flex: none; }
.src:hover .u { text-decoration: underline; text-underline-offset: 2px; }
/* A reply's markdown table, as the app's replyTable draws it: caption header, one divider, trailing last column. */
.rt { border-collapse: collapse; font-size: 1em; }
.rt th { font-size: 0.8em; font-weight: 600; color: var(--app-muted); text-align: left; padding: 0 0.93em 0.3em 0; border-bottom: 1px solid var(--app-line); }
.rt td { padding: 0.4em 0.93em 0 0; vertical-align: top; }
.rt th:last-child, .rt td:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
/* The composer while dictating: "Listening…" above the capsule, the words landing in the field, the mic lit. */
.dictate { display: grid; gap: 0.33em; }
.listening { font-size: 0.8em; color: var(--app-muted); padding-left: 0.47em; }
.composer { display: flex; align-items: center; gap: 0.53em; min-height: 3.87em; padding: 0 0.47em; background: var(--app-card); border: 1px solid var(--app-line); border-radius: 999px; }
.cbtn { width: 2.93em; height: 2.93em; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--app-brand-wash); color: var(--app-ink); }
.cbtn svg { width: 1.2em; height: 1.2em; }
.cbtn.on { background: var(--app-mic-on); color: var(--app-brand-text); }
.cbtn.send { background: var(--app-brand); color: var(--app-on-brand); }
.field { flex: 1; min-width: 0; padding: 0.4em 0; }
/* The printed code on the wrapper, drawn from the digits (UPC-A). */
.upc { margin-top: 20px; width: min(100%, 15rem); background: #FFFFFF; color: #111111; padding: 12px 14px 8px; }
.upc svg { display: block; width: 100%; height: auto; }

/* ---------- It shows its work: the app's own chat turn, played by the scroll ---------- */
#work { padding: 0; }
.work-pin { display: grid; column-gap: clamp(32px, 4vw, 64px); align-items: center; padding: clamp(72px, 12vh, 150px) var(--m); }
.work-pin { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); }
.work-text .lead { margin-top: 24px; }
.work-text .contrast { margin-top: 14px; }
.sources { margin-top: 24px; display: grid; gap: 8px; max-width: 28rem; }
.sources .ev-card { font-size: 17px; max-width: 100%; }
@media (min-width: 1101px) and (max-height: 820px) {
  .sources { margin-top: 16px; gap: 6px; }
  .sources .ev-card { font-size: 15px; }
}
.sources .src { min-width: 0; max-width: 100%; }
.app-wrap { container-type: inline-size; min-width: 0; }

.app {
  background: var(--app-canvas); color: var(--app-ink);
  padding: 1.2em 1.2em 1.4em; font-size: clamp(15px, 2.55cqi, 23px); line-height: 1.3;
  display: grid; gap: 0.9em; max-width: 40em;
}
.sum { background: var(--app-dark); color: var(--app-on-dark); border-radius: 1.6em; padding: 1.13em; display: grid; gap: 1em; }
.sum-top { display: flex; justify-content: space-between; align-items: baseline; }
.sum-num { font-weight: 800; font-size: 2.27em; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sum-num .ctr::before { counter-reset: v var(--kcal); content: counter(v); }
.sum-cap { font-size: 0.8em; color: var(--app-soft-on-dark); margin-top: 0.15em; }
.sum-goal { text-align: right; }
.sum-goal .k { font-size: 0.73em; font-weight: 700; color: var(--app-soft-on-dark); }
.sum-goal .v { font-weight: 700; }
/* A fixed-width track that clips a full-width capsule; the capsule slides in by transform, so its round end stays round. */
.bar { position: relative; height: 0.47em; border-radius: 1em; background: var(--app-track); overflow: hidden; }
.bar i { position: absolute; inset: 0; border-radius: 1em; background: var(--bar, var(--claw)); transform: translateX(calc((var(--to) - 1) * 100%)); }
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.93em; }
.macro .k { font-size: 0.73em; font-weight: 700; color: var(--app-soft-on-dark); }
.macro .v { font-size: 0.8em; font-weight: 600; margin: 0.2em 0 0.35em; font-variant-numeric: tabular-nums; }
.macro .bar { height: 0.27em; }
.macro .ctr::before { counter-reset: v var(--g); content: counter(v); }
.m-p .bar i { --bar: var(--protein); }
.m-c .bar i { --bar: var(--carbs); }
.m-f .bar i { --bar: var(--fat); }
/* The summary card's numbers, all in one place. --to is eaten / goal: 625 / 1,950 kcal, 78 / 140 g, 27 / 180 g, 24 / 65 g.
   The screen-reader text and the goals are in the markup beside them. */
.sum-top { --kcal: 625; }
.sum > .bar i { --to: .32; }
.m-p { --g: 78; } .m-p .bar i { --to: .56; }
.m-c { --g: 27; } .m-c .bar i { --to: .15; }
.m-f { --g: 24; } .m-f .bar i { --to: .37; }
.thread { display: grid; gap: 0.67em; padding-top: 0.9em; border-top: 1px solid var(--app-line); }
.turn { display: grid; }
.turn > * { grid-area: 1 / 1; }
.progress { justify-self: start; align-self: start; background: var(--app-brand-wash); color: var(--app-muted); font-size: 0.8em; display: grid; gap: 0.5em; opacity: 0; }
.progress li { display: flex; align-items: center; gap: 0.5em; }
.progress svg { width: 1em; height: 1em; flex: none; color: var(--app-brand-text); }
.progress li:last-child { color: var(--app-ink); font-weight: 600; }

/* ---------- Built for takeout: one compact board of a day's orders ---------- */
#takeout .head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
#takeout .h2 { grid-column: 1 / 9; grid-row: 1; }
#takeout .go { grid-column: 9 / 13; grid-row: 1; justify-self: end; align-self: end; }
#takeout .btn { --btn-bg: var(--on-ink); --btn-fg: var(--ink-field); --btn-bg-hover: var(--red); --btn-fg-hover: var(--on-red); --btn-ring: var(--on-ink); }
#takeout .lead { grid-column: 1 / 6; grid-row: 2; margin-top: 32px; }
#takeout .pics { grid-column: 7 / 13; grid-row: 2; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#takeout .pics img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.day { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 48px; }
.period { display: grid; gap: 8px; align-content: start; }
.period ol { display: grid; gap: 8px; }
.entry { background: var(--paper); color: var(--on-paper); padding: 14px 16px 16px; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 3px; align-content: start; }
.entry .what { grid-column: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; line-height: 1.25; }
.entry .how { grid-column: 1; min-width: 0; overflow-wrap: anywhere; color: var(--soft-on-paper); line-height: 1.35; font-size: var(--step-small); }
.entry .cal { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 1.75rem; font-weight: 800; font-stretch: 72%; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry .cal small { font-size: 0.56em; font-weight: 600; margin-left: 0.15em; }

/* ---------- Apple Health ---------- */
#health { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: stretch; }
.health-text { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.health-text .lead { max-width: 30ch; }
.health-tile { grid-column: 7 / 13; background: var(--red); padding: clamp(28px, 4vw, 64px); display: flex; align-items: center; justify-content: center; }
.onb { width: 100%; max-width: 27em; font-size: clamp(15px, 0.3rem + 1.15vw, 21px); background: var(--app-canvas); color: var(--app-ink); padding: 1.6em 1.3em 1.8em; line-height: 1.3; display: grid; gap: 0.6em; }
.onb .segs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.33em; }
.onb .segs i { height: 0.33em; border-radius: 1em; background: var(--app-line); }
.onb .segs i:nth-child(-n+2) { background: var(--app-brand); transform-origin: left center; }
.onb .stepno { font-size: 0.8em; font-weight: 700; letter-spacing: 0.08em; color: var(--app-brand-text); margin-top: 0.2em; }
.onb .ttl { font-size: 1.87em; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.hk { margin-top: 0.6em; display: flex; align-items: center; gap: 0.8em; background: var(--app-dark); color: var(--app-on-dark); border-radius: 1.2em; padding: 0.95em 0.93em; font-weight: 700; }
.hk svg { width: 1.6em; height: 1.6em; flex: none; }
.hk .heart { color: var(--app-brand-text); }
.hk span { flex: 1; }
.onb .or { font-size: 0.8em; color: var(--app-muted); text-align: center; margin-top: 0.3em; }

/* ---------- Closing call to action ---------- */
#beta { min-height: 52svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; }
#beta .cta .btn { --btn-bg: var(--on-red); --btn-fg: var(--red); --btn-ring: var(--on-red); }
#beta .fine { color: var(--soft-on-red); max-width: 40ch; }

/* ---------- Narrow layouts ---------- */
@media (max-width: 1100px) {
  .row { grid-template-columns: 1fr; row-gap: 4px; padding-block: 14px; }
  .step .trace { text-align: left; justify-self: start; max-width: 44ch; }
  .hero-top { display: block; padding: 28px 0 0; }
  .hero-head { padding: 0 var(--m) 28px; }
  .stage { position: relative; top: auto; right: auto; width: auto; height: 340px; --W: 320px; --tipX: 50%; --tipY: calc(100% - 118px); }
  .work-pin { grid-template-columns: 1fr; row-gap: 36px; }
  .app { font-size: 16px; max-width: 32em; }
  .day { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* Larger than the step bands and section heads, so it wraps to three lines. */
  .hero-title { font-size: 12vw; }
  .cta { width: 100%; }
  .cta .btn, .cta .go { flex: 1 1 100%; }
  .cta .go { justify-items: stretch; }
  .hero-copy { align-items: stretch; }
  .stage { height: 300px; --W: 300px; }

  .inputs { grid-template-columns: 1fr; gap: 6px; }
  .inputs > .tile { grid-column: 1; grid-row: auto; }
  .chat { font-size: 15px; padding: 0.9em; }

  .app { font-size: 15px; max-width: none; padding: 1em; }

  #takeout .head { grid-template-columns: 1fr; row-gap: 24px; }
  #takeout .h2, #takeout .lead, #takeout .go, #takeout .pics { grid-column: 1; grid-row: auto; margin-top: 0; }
  #takeout .go { justify-self: stretch; justify-items: stretch; }
  .day { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .period ol { gap: 12px; }

  #health { grid-template-columns: 1fr; row-gap: 32px; }
  .health-text, .health-tile { grid-column: 1; }
  .health-tile { padding: 20px; }
  .onb { font-size: 15px; }

  #beta { min-height: 0; }
  #beta .btn { display: flex; width: 100%; }
}

/* ---------- Motion. Without scroll timelines, or with reduced motion, every element above is already in its finished state. ---------- */

/* Stagger indexes: the site's CSP blocks inline style, so each staggered child gets its index from its position.
   --c: the 57 typed letters of the order, --w: the dictated words, --r: reply table rows, --k: source rows, --i: progress lines. */
.ch-t:nth-child(1) { --c: 0; } .ch-t:nth-child(2) { --c: 1; } .ch-t:nth-child(3) { --c: 2; } .ch-t:nth-child(4) { --c: 3; } .ch-t:nth-child(5) { --c: 4; } .ch-t:nth-child(6) { --c: 5; }
.ch-t:nth-child(7) { --c: 6; } .ch-t:nth-child(8) { --c: 7; } .ch-t:nth-child(9) { --c: 8; } .ch-t:nth-child(10) { --c: 9; } .ch-t:nth-child(11) { --c: 10; } .ch-t:nth-child(12) { --c: 11; }
.ch-t:nth-child(13) { --c: 12; } .ch-t:nth-child(14) { --c: 13; } .ch-t:nth-child(15) { --c: 14; } .ch-t:nth-child(16) { --c: 15; } .ch-t:nth-child(17) { --c: 16; } .ch-t:nth-child(18) { --c: 17; }
.ch-t:nth-child(19) { --c: 18; } .ch-t:nth-child(20) { --c: 19; } .ch-t:nth-child(21) { --c: 20; } .ch-t:nth-child(22) { --c: 21; } .ch-t:nth-child(23) { --c: 22; } .ch-t:nth-child(24) { --c: 23; }
.ch-t:nth-child(25) { --c: 24; } .ch-t:nth-child(26) { --c: 25; } .ch-t:nth-child(27) { --c: 26; } .ch-t:nth-child(28) { --c: 27; } .ch-t:nth-child(29) { --c: 28; } .ch-t:nth-child(30) { --c: 29; }
.ch-t:nth-child(31) { --c: 30; } .ch-t:nth-child(32) { --c: 31; } .ch-t:nth-child(33) { --c: 32; } .ch-t:nth-child(34) { --c: 33; } .ch-t:nth-child(35) { --c: 34; } .ch-t:nth-child(36) { --c: 35; }
.ch-t:nth-child(37) { --c: 36; } .ch-t:nth-child(38) { --c: 37; } .ch-t:nth-child(39) { --c: 38; } .ch-t:nth-child(40) { --c: 39; } .ch-t:nth-child(41) { --c: 40; } .ch-t:nth-child(42) { --c: 41; }
.ch-t:nth-child(43) { --c: 42; } .ch-t:nth-child(44) { --c: 43; } .ch-t:nth-child(45) { --c: 44; } .ch-t:nth-child(46) { --c: 45; } .ch-t:nth-child(47) { --c: 46; } .ch-t:nth-child(48) { --c: 47; }
.ch-t:nth-child(49) { --c: 48; } .ch-t:nth-child(50) { --c: 49; } .ch-t:nth-child(51) { --c: 50; } .ch-t:nth-child(52) { --c: 51; } .ch-t:nth-child(53) { --c: 52; } .ch-t:nth-child(54) { --c: 53; }
.ch-t:nth-child(55) { --c: 54; } .ch-t:nth-child(56) { --c: 55; } .ch-t:nth-child(57) { --c: 56; }
.w:nth-child(1) { --w: 0; } .w:nth-child(2) { --w: 1; } .w:nth-child(3) { --w: 2; } .w:nth-child(4) { --w: 3; }
.w:nth-child(5) { --w: 4; } .w:nth-child(6) { --w: 5; } .w:nth-child(7) { --w: 6; } .w:nth-child(8) { --w: 7; }
.rt tbody tr:nth-child(1) { --r: 0; } .rt tbody tr:nth-child(2) { --r: 1; } .rt tbody tr:nth-child(3) { --r: 2; } .rt tbody tr:nth-child(4) { --r: 3; }
.sources li:nth-child(1) { --k: 0; } .sources li:nth-child(2) { --k: 1; } .sources li:nth-child(3) { --k: 2; } .sources li:nth-child(4) { --k: 3; }
.progress li:nth-child(1) { --i: 0; } .progress li:nth-child(2) { --i: 1; } .progress li:nth-child(3) { --i: 2; }

@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span { animation: mask-rise .9s var(--ease-out) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: .11s; }
  .hero-copy { animation: fade-up .7s var(--ease-out) .45s both; }
  .s1 .band { animation: wipe .7s var(--ease-out) .3s both; }
  .s1 .ghost { animation: ghost-out .7s linear .3s both; }

  @supports (animation-timeline: view()) {
    /* Hero. Each step's band wipes in as you scroll: on a wide screen the hero holds still for --R of scroll; narrower, each band lands as it enters. */
    .hero-run { --R: 100svh; }
    .s2, .s3, .s4, .s5 { --a: calc(var(--R) * var(--at)); }
    .s2 { --at: .02; } .s3 { --at: .2; } .s4 { --at: .4; } .s5 { --at: .58; }
    .log .step:not(.s1) .band { animation: wipe var(--ease-out) both; animation-timeline: scroll(root); animation-range: var(--a) calc(var(--a) + var(--R) * .16); }
    .log .step:not(.s1) .ghost { animation: ghost-out linear both; animation-timeline: scroll(root); animation-range: var(--a) calc(var(--a) + var(--R) * .16); }
    .drop { animation: claw-drop var(--ease-out) both; animation-timeline: scroll(root); animation-range: calc(var(--R) * .04) calc(var(--R) * .24); }
    .claw .finger { animation: claw-close var(--ease-grab) both; animation-timeline: scroll(root); animation-range: calc(var(--R) * .22) calc(var(--R) * .32); }
    .lift { animation: claw-lift var(--ease-out) both; animation-timeline: scroll(root); animation-range: calc(var(--R) * .36) calc(var(--R) * .62); }
    .sources li { animation: fade-up var(--ease-out) both; animation-timeline: view(); animation-range: entry calc(20% + var(--k) * 8%) entry calc(70% + var(--k) * 8%); }

    /* Chapter entrances: heading, then text, then picture. */
    .rise { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .rise.d1 { animation-range: entry 8% entry 78%; }
    .rise.d2 { animation-range: entry 16% entry 86%; }
    .rise-line > span { animation: mask-rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
    .rise-line + .rise-line > span { animation-range: entry 30% entry 100%; }

    /* Five ways in. Each tile plays its own turn as it scrolls in: what you give, then the reply, then its source. */
    .give { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .does { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 25% entry 90%; }
    .does .rt tbody tr { animation: fade-up var(--ease-out) both; animation-timeline: view(); animation-range: entry calc(30% + var(--r) * 12%) entry calc(70% + var(--r) * 12%); }
    .does .evidence { animation: fade-up var(--ease-out) both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
    .dictate { view-timeline-name: --say; }
    .field .w { animation: type linear both; animation-timeline: --say; animation-range: entry calc(55% + var(--w) * 5%) entry calc(58% + var(--w) * 5%); }
    .upc { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 80%; }

    /* It shows its work. The order types into the bubble, the agent's progress ticks, the reply lands with its source,
       then the totals count up and the bars fill: calories first, each macro a little behind it, each over 34% of the runway (about half a screen). */
    .user .ch-t { animation: type linear both; animation-timeline: --work; animation-range: contain calc(2% + var(--c) * .36%) contain calc(2.4% + var(--c) * .36%); }
    .progress { animation: progress-life linear both; animation-timeline: --work; animation-range: contain 22% contain 45%; }
    .progress li { animation: fade-up var(--ease-out) both; animation-timeline: --work; animation-range: contain calc(23% + var(--i) * 6%) contain calc(27% + var(--i) * 6%); }
    .app .reply { animation: reply-in var(--ease-out) both; animation-timeline: --work; animation-range: contain 45% contain 52%; }
    .app .evidence { animation: fade-up var(--ease-out) both; animation-timeline: --work; animation-range: contain 51% contain 56%; }
    .sum-top { animation: count-kcal var(--ease-fill) both; animation-timeline: --work; animation-range: contain 56% contain 90%; }
    .sum > .bar i { animation: fill var(--ease-fill) both; animation-timeline: --work; animation-range: contain 56% contain 90%; }
    .macro { animation: count-g var(--ease-fill) both; animation-timeline: --work; }
    .macro .bar i { animation: fill var(--ease-fill) both; animation-timeline: --work; }
    .m-p, .m-p .bar i { animation-range: contain 59% contain 93%; }
    .m-c, .m-c .bar i { animation-range: contain 62% contain 96%; }
    .m-f, .m-f .bar i { animation-range: contain 65% contain 99%; }

    .onb .segs i:nth-child(-n+2) { animation: fill-1 var(--ease-out) both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    .hk { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
    .entry { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .period:nth-child(2) .entry { animation-range: entry 6% entry 86%; }
    .period:nth-child(3) .entry { animation-range: entry 12% entry 92%; }
    .period:nth-child(4) .entry { animation-range: entry 18% entry 98%; }
  }

  /* Wide and tall enough: hold the hero and the chat turn still while the scroll plays them. */
  @supports (animation-timeline: view()) {
    @media (min-width: 1101px) and (min-height: 700px) {
      .hero-run { height: calc(100svh + var(--R)); }
      .hero-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
      .work-run { height: 260svh; view-timeline-name: --work; }
      .work-pin { position: sticky; top: 0; height: 100svh; padding-block: clamp(40px, 8vh, 96px); }
    }
    @media (min-width: 1101px) and (max-height: 699px) {
      .app { view-timeline-name: --work; }
    }
    @media (max-width: 1100px), (max-height: 699px) {
      .log .step:not(.s1) .band, .log .step:not(.s1) .ghost { animation-timeline: view(); animation-range: entry 60% cover 35%; }
      .stage { view-timeline-name: --stage; }
      .drop { animation-timeline: --stage; animation-range: cover 42% cover 54%; }
      .claw .finger { animation-timeline: --stage; animation-range: cover 53% cover 59%; }
      .lift { animation-timeline: --stage; animation-range: cover 60% cover 72%; }
    }
    /* Narrow: the app panel holds still at the top while its own runway scrolls by, so the turn and the fill get the same long range as on a wide screen. */
    @media (max-width: 1100px) {
      .app-wrap { view-timeline-name: --work; }
      .app-wrap::after { content: ""; display: block; height: 130svh; }
      .app { position: sticky; top: 16px; }
    }
  }
}
@keyframes mask-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes ghost-out { from { visibility: visible; } to { visibility: hidden; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes claw-drop { from { transform: translateY(-58%); } to { transform: none; } }
@keyframes claw-close { from { transform: rotate(20deg); } to { transform: rotate(-4deg); } }
@keyframes claw-lift { from { transform: none; } to { transform: translateY(-34px) rotate(-2deg); } }
@keyframes type { from { opacity: 0; } to { opacity: 1; } }
@keyframes progress-life { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes reply-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes count-kcal { from { --kcal: 0; } }
@keyframes count-g { from { --g: 0; } }
@keyframes fill { from { transform: translateX(-100%); } }
@keyframes fill-1 { from { transform: scaleX(0); } to { transform: none; } }
/* A focused link and everything around it jump to the finished state, so keyboard focus never lands on a clipped or faded link. */
:focus-within { animation: none !important; }
@property --kcal { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --g { syntax: "<integer>"; inherits: true; initial-value: 0; }