@charset "UTF-8";

/* The landing page (index.html). White ground; every section takes a loud colour from a food ring; headlines are things
   you say. Its own stylesheet: the privacy, terms, support and 404 pages still use /styles.css. */

:root {
  color-scheme: light;

  --ink: #1d1b2c;
  --ink-2: #4c4a60;
  --ink-3: #6f6d85; /* 5:1 on white: small text needs 4.5 */
  --line: rgb(29 27 44 / 0.1);

  --coral: #f2533a;
  --coral-deep: #e53e30;
  --coral-light: #ff8d6b;

  /* The foods' colours, sampled from the rings. */
  --pineapple: #ffc93c;
  --nori: #10231b;
  --nori-2: #1b3a2d;
  --salmon: #ff8a5c;
  --donut: #ffc3d6;
  --melon: #1f7a45;
  --night: #131119;

  --display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;

  --shadow-soft: 0 1px 2px rgb(40 30 90 / 0.06), 0 8px 24px -6px rgb(40 30 90 / 0.16);
  --shadow-lift: 0 2px 4px rgb(40 30 90 / 0.08), 0 30px 70px -20px rgb(40 30 90 / 0.4);

  --gutter: 32px;
}

/* Nunito, the rounded face wherever SF Pro Rounded (ui-rounded) isn't there, served from here rather than Google
   Fonts: no other origin to connect to before the page can draw, and nobody's address goes to Google. One variable
   file per script covers 700 to 900, and a browser only downloads it for headings it draws in Nunito. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/fonts/nunito-v32-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/fonts/nunito-v32-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Rings peek out past the edges here and there; nothing may widen the page. */
main {
  overflow-x: clip;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Spoken headlines: real curly quotes, the opening one hung in the margin so the words line up. */
q {
  quotes: "\201C" "\201D";
}

.quote q::before {
  margin-left: -0.42em;
  color: var(--q, var(--coral));
}

.quote q::after {
  color: var(--q, var(--coral));
}

/* Spoken headlines come in a word at a time, out of a blur, as they're heard: home.js wraps each word in .w (with
   its place as --i) and adds .heard when the line is on screen. The closing quote lands last. Each word rises a touch
   as it clears, and everything eases out together, so a word settles into focus rather than snapping into it; the blur
   is in em so it reads the same on the big headlines and the small ones. Each word overlaps the next few, so the line
   comes in as one wave. While a word animates, Safari draws it in its own layer cut to the word's box, and at the
   headlines' tight line height that box is shorter than the letters, so descenders were sliced flat until it
   settled. Padding gives the layer room round the letters, and the matching negative margin keeps the lines where
   they were. */
.motion .hearing .w {
  display: inline-block;
  padding: 0.25em 0.1em;
  margin: -0.25em -0.1em;
  opacity: 0;
  filter: blur(0.14em);
  translate: 0 0.12em;
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 75ms),
    filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 75ms),
    translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 75ms);
}

.motion .hearing.heard .w {
  opacity: 1;
  filter: none;
  translate: 0 0;
}

.motion .hearing::after {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--n) * 75ms);
}

.motion .hearing.heard::after {
  opacity: 1;
}

/* Who's speaking, above each spoken headline: a sentence, not a tag. */
.who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.75;
}

.who svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Bar: always on a ground, the colour of whichever section is under it, so it changes as you scroll (home.js sets
   --bar and adds .dark where the section is light). Frosted, so what passes under shows through a little. ── */

.top {
  --bar: rgb(242 83 58 / 0.92);
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background-color: var(--bar);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.16);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.top.on-dark .pill {
  background: #fff;
  color: var(--ink);
}

/* Over a light section: dark words, the coral logo, a faint rule. */
.top.dark {
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

.top-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
}

.brand {
  display: block;
  color: #fff;
  transition: color 0.3s ease;
}

.top.dark .brand {
  color: var(--coral);
}

.logotype {
  display: block;
  width: 60px;
  aspect-ratio: 320 / 229;
  fill: currentColor;
}

.links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
}

.links a {
  text-decoration: none;
  opacity: 0.85;
}

.links a:hover {
  opacity: 1;
}

.pill,
.store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Black, with white words: on the coral, on white and on the bar alike. */
.pill {
  height: 40px;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
}

.store {
  height: 58px;
  padding: 0 28px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 14px 30px -12px rgb(60 10 0 / 0.55);
}

.pill:hover,
a.store:hover {
  background: #000;
}

.apple {
  fill: currentColor;
}

.store .apple {
  width: 18px;
  height: 21px;
  margin-top: -3px;
}

.pill .apple {
  width: 13px;
  height: 16px;
  margin-top: -2px;
}

/* ── Hero: coral; the words on the left, what people say, the watch and the phone on the right ── */

.hero {
  position: relative;
  padding-top: 72px;
  background:
    radial-gradient(50% 60% at 75% 55%, rgb(255 141 107 / 0.6), transparent 70%),
    var(--coral);
  color: #fff;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 40px;
  /* Leaves room on the first screen for the facts at the foot of the hero. */
  min-height: min(calc(100svh - 72px - 128px), 720px);
  padding-top: 24px;
  padding-bottom: 40px;
}

.hero h1 {
  font-size: clamp(52px, 7vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 0 rgb(160 30 10 / 0.18);
}

.lede {
  max-width: 24em;
  margin-top: 28px;
  font-size: 21px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 38px;
}

.cta-note {
  font-size: 15px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}

/* Apple's own product images, as on the live page: the phone image is 1350 px wide at 460 ppi and the watch's 600 px
   at about 344 ppi, so the watch is 0.595 of the phone's width. */
.devices {
  --phone-w: clamp(220px, 24vw, 320px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
}

.device-phone {
  width: var(--phone-w);
  flex: none;
}

.devices-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}

.devices .device-watch {
  width: calc(var(--phone-w) * 0.595);
}

/* Things people say, beside the devices: white chips with a coral mic. */
.saying {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.saying li:nth-child(2) {
  margin-right: 28px;
}

.said {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 30px -12px rgb(120 20 0 / 0.55);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  animation: bob 7s ease-in-out infinite;
}

.said svg {
  width: 18px;
  height: 18px;
  color: var(--coral);
  flex: none;
}

.saying li:nth-child(2) {
  animation-delay: -2.3s;
}

.saying li:nth-child(3) {
  animation-delay: -4.6s;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* ── Things people ask: a little cloud of chat bubbles under the intro ── */

.cloud {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
  max-width: 860px;
  margin: 44px auto 0;
}

/* Each request as you'd send it: a pale coral bubble with its tail at the bottom right, a touch askew. */
.cloud li {
  --tilt: 0deg;
  --lift: 0px;
  padding: 9px 17px 10px;
  border-radius: 21px 21px 6px 21px;
  background: #ffe3dc;
  color: var(--coral-deep);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  rotate: var(--tilt);
  translate: 0 var(--lift);
  /* Pushed out of the pointer's way (home.js sets --px and --py), easing back when it leaves. */
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cloud li:nth-child(4n + 1) {
  --tilt: -2.5deg;
  --lift: 4px;
}

.cloud li:nth-child(4n + 2) {
  --tilt: 1.5deg;
  --lift: -3px;
}

.cloud li:nth-child(4n + 3) {
  --tilt: -1deg;
  --lift: 6px;
}

.cloud li:nth-child(4n) {
  --tilt: 2.5deg;
  --lift: -2px;
}

/* A slow drift, each on its own beat. */
.motion .cloud li {
  animation: drift 6s ease-in-out infinite;
}

.motion .cloud li:nth-child(3n + 2) {
  animation-duration: 7.5s;
  animation-delay: -2s;
}

.motion .cloud li:nth-child(3n) {
  animation-duration: 6.8s;
  animation-delay: -4s;
}

@keyframes drift {
  50% {
    translate: 0 calc(var(--lift) - 6px);
  }
}

/* ── Facts ───────────────────────────────────────────── */

/* At the foot of the coral hero, in darker shades of the coral: the names at about 3.4:1 against it (large, bold
   type), the small lines darker still (about 3.9:1, better than white's 3.5:1), and faint dark rules between. */
.facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 8px;
  padding-bottom: 48px;
  color: #6e170c;
  --line: rgb(110 23 12 / 0.22);
}

/* Each fact: a black line icon on the left, the label and its line beside it. */
.facts > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 8px 24px;
  border-left: 1px solid var(--line);
}

.facts > div:first-child {
  border-left: 0;
  padding-left: 0;
}

/* The icon stands beside the two lines, centred on them. */
.fact-icon {
  grid-row: 1 / span 2;
  align-self: center;
  display: block;
  width: 40px;
  height: 40px;
}

/* Font Awesome Pro+ Jelly Duo icons (microphone, bookmark, heart, gift) in darker shades of the coral:
   the main layer deep, the secondary one (the path the icons mark with opacity) between it and the ground. */
.fact-icon svg {
  width: 100%;
  height: 100%;
}

.fact-icon path {
  fill: #9c2214;
}

.fact-icon path[opacity] {
  fill: #c9361f;
  opacity: 1;
}

.facts strong {
  align-self: end;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.facts strong + span {
  align-self: start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c120a;
}

/* The facts are on the first screen: their icons pop in on load, one after another. */
.motion .fact-icon svg {
  animation: pop-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s both;
}

.motion .facts > div:nth-child(2) .fact-icon svg {
  animation-delay: 0.62s;
}

.motion .facts > div:nth-child(3) .fact-icon svg {
  animation-delay: 0.74s;
}

.motion .facts > div:nth-child(4) .fact-icon svg {
  animation-delay: 0.86s;
}

@keyframes pop-in {
  from {
    opacity: 0;
    scale: 0.5;
  }
}

/* ── How it works: the intro, then the launch video ─── */

.how {
  max-width: 1120px;
  padding-top: 112px;
  padding-bottom: 120px;
}

.intro {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.intro h2 {
  font-size: clamp(40px, 5.4vw, 72px);
}

.intro p {
  max-width: 44em;
  margin: 28px auto 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-2);
}

.video-frame {
  position: relative;
  margin-top: 52px;
  aspect-ratio: 16 / 9;
  border-radius: 36px;
  background: #f2f2f7;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

/* contain, not cover: the video is 16:9 like the frame, and full screen on a taller phone mustn't crop it. */
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The whole poster is the play button; the circle sits in the middle, which the video keeps clear of the devices.
   Its size follows the frame (14% of it) so on a phone it doesn't reach the watch. */
.video-start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-start[hidden] {
  display: none;
}

.video-play {
  display: grid;
  place-items: center;
  width: clamp(44px, 14%, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 16px 40px -10px rgb(242 83 58 / 0.7);
  transition: transform 0.2s ease;
}

.video-start:hover .video-play {
  transform: scale(1.06);
}

.video-start:focus-visible {
  outline: none;
}

.video-start:focus-visible .video-play {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

/* Font Awesome's Jelly Fill play, optically centred: its viewBox centres on the triangle's area centroid (x 251.7 of
   its 560), not its box, which would leave it looking off to the left. The triangle is 30% of the circle's height. */
.video-play svg {
  width: 33%;
  height: 33%;
  fill: #fff;
}

/* ── Full-bleed food blocks ─────────────────────────── */

.block {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
}

.deco {
  position: absolute;
  width: 360px;
  pointer-events: none;
}

.pineapple {
  --q: var(--ink);
  background: var(--pineapple);
}

.deco-pineapple {
  right: -90px;
  bottom: -110px;
  rotate: -18deg;
}

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 64px;
}

.quote {
  font-size: clamp(44px, 6.4vw, 92px);
}

.block .body {
  max-width: 30em;
  margin-top: 28px;
  font-size: 20px;
  line-height: 1.55;
}

.pineapple .body {
  color: rgb(29 27 44 / 0.82);
}

.watch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.watch-stage .device-watch {
  width: 300px;
}

.logged-slot {
  display: grid;
  justify-items: center;
}

.logged-slot > * {
  grid-area: 1 / 1;
  align-self: center;
}

/* While it listens: a white pill with a moving level. */
.listening {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 18px 12px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
}

.listening i {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--coral);
  transform-origin: center;
  animation: level 0.9s ease-in-out infinite;
}

.listening i:nth-child(2) {
  animation-delay: -0.3s;
}

.listening i:nth-child(3) {
  animation-delay: -0.6s;
}

.listening i:nth-child(4) {
  animation-delay: -0.15s;
}

.listening i:nth-child(5) {
  margin-right: 8px;
  animation-delay: -0.45s;
}

@keyframes level {
  0%,
  100% {
    scale: 1 0.3;
  }
  50% {
    scale: 1 1;
  }
}

.logged {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 300px;
  padding: 16px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  font-size: 14.5px;
  color: var(--ink-2);
}

.logged-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 16px;
  white-space: nowrap;
}

/* Nori: the conversation is the section. */
.nori {
  --q: var(--salmon);
  background:
    radial-gradient(50% 60% at 85% 10%, rgb(255 138 92 / 0.18), transparent 70%),
    var(--nori);
  color: #fff;
}

/* Peeks out from under the conversation's window, on the left (the window is solid, so the ring only shows past its
   edge). */
.deco-sushi {
  left: -90px;
  bottom: -110px;
  rotate: -20deg;
  width: 400px;
}

/* The conversation on the left, the words on the right: the opposite of the watch section above it. */
.convo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 72px;
}

.convo .thread {
  order: -1;
}

/* The conversation, in a window of its own. */
.thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  border-radius: 36px;
  background: #16291f;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 30px 60px -20px rgb(0 0 0 / 0.5);
}

.thread .me,
.thread .it {
  max-width: 84%;
  margin: 0;
  padding: 13px 18px;
  border-radius: 24px;
  font-size: 18px;
  line-height: 1.4;
}

.thread .me {
  align-self: flex-end;
  background: var(--coral);
  color: #fff;
  border-bottom-right-radius: 10px;
}

/* The question is the section's heading, beside the conversation. */
.convo .me.first {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  background: none;
  font-family: var(--display);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  border-radius: 0;
}

.convo .me.first q::before {
  margin-left: -0.42em;
  color: var(--salmon);
}

.convo .me.first q::after {
  color: var(--salmon);
}

.thread .it {
  align-self: flex-start;
  background: var(--nori-2);
  color: #fff;
  border-bottom-left-radius: 10px;
}

.a-slot {
  display: grid;
  align-self: flex-start;
  max-width: 88%;
}

.a-slot > * {
  grid-area: 1 / 1;
  align-self: start;
}

.thread .a-slot > .it {
  max-width: none;
}

.thread div.it p + p,
.thread div.it ul + p {
  margin-top: 10px;
}

.thread div.it ul {
  margin: 10px 0 0;
  padding-left: 0;
}

.thread div.it li {
  padding: 10px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.07);
  font-size: 16px;
}

.thread div.it li + li {
  margin-top: 8px;
}

.thread div.it li b {
  display: block;
  font-weight: 650;
}

.thread .small {
  font-size: 14.5px;
  color: rgb(255 255 255 / 0.65);
}

.thread .typing {
  display: none;
  gap: 6px;
  width: max-content;
  padding: 20px 22px;
}

.thread .typing i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.6);
  animation: typing 1.2s ease-in-out infinite;
}

.thread .typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.thread .typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    translate: 0 0;
  }
  30% {
    opacity: 1;
    translate: 0 -3px;
  }
}

.motion .thread .typing.shown {
  display: flex;
}

.convo-note {
  max-width: 30em;
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.8);
}

/* ── Bento: four smaller things ─────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding-top: 120px;
  padding-bottom: 40px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 44px 40px 40px;
  border-radius: 40px;
  overflow: hidden;
}

.tile .quote {
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1;
}

.tile .body {
  max-width: 28em;
  margin-top: 16px;
  font-size: 17.5px;
  line-height: 1.5;
}

/* The picture sits at the foot of the tile, and never closer than 32px to the words above it. */
.tile > :last-child {
  margin-top: auto;
}

.tile .body {
  margin-bottom: 32px;
}

.donut {
  --q: #d93a6b;
  grid-column: span 7;
  background: var(--donut);
}

.worm {
  --q: #9c2214;
  grid-column: span 5;
  background: linear-gradient(150deg, #ff4f45 0%, #ff8c1a 52%, #ffd23f 100%);
}

.pretzel {
  --q: #ffb547;
  grid-column: span 5;
  background: linear-gradient(160deg, #8c3b15, #5c250c);
  color: #fff;
}

.melon {
  --q: #ff6f6b;
  grid-column: span 12;
  background: var(--melon);
  color: #fff;
}

/* Health, wide: the words on the left, the two apps on the right. */
.tile.wide {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-height: 0;
  padding: 52px 64px;
}

.tile.wide > :last-child {
  margin-top: 0;
}

.tile.wide .sync {
  margin: 0 24px 0 0;
}

.tile.wide .sync img {
  width: 116px;
  height: 116px;
  border-radius: 27px;
}

.tile.wide .sync .health-icon {
  border-radius: 0;
}

.night {
  --q: var(--coral);
  grid-column: span 7;
  background: var(--night);
  color: #fff;
}

.donut .body,
.worm .body {
  color: rgb(29 27 44 / 0.78);
}

.pretzel .body,
.melon .body,
.night .body {
  color: rgb(255 255 255 / 0.78);
}

/* Usuals list */
.list {
  width: 100%;
  max-width: 440px;
  margin-top: 32px;
  padding: 6px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-lift);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.row:first-child {
  border-top: 0;
}

.row span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--ink-3);
}

.row b {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}

.row em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* The usual you said, picked out: a rounded pale-coral pill inside the card's edges, as a selected row. */
.row.hit {
  margin: 4px -12px 0;
  padding-left: 12px;
  padding-right: 12px;
  border-top-color: transparent;
  border-radius: 16px;
  background-color: rgb(242 83 58 / 0.1);
  transition: background-color 0.6s ease;
}

.row.hit + .row {
  border-top-color: transparent;
}

.motion .row.hit[data-step-style="light"]:not(.shown) {
  background-color: transparent;
}

/* A spoken correction: the old portion struck out, the new one in. */
.fix {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 340px;
  margin-top: 32px;
  padding: 20px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-lift);
}

.fix-name {
  font-size: 17px;
  font-weight: 700;
}

.fix-was,
.fix-now {
  font-size: 15.5px;
  transition:
    opacity 0.4s ease,
    translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.4s ease;
}

/* The old portion is struck out once the new one is in (and from the start, without motion). */
.fix-was {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--coral);
}

.motion .fix:not(:has(.fix-now.shown)) .fix-was {
  color: var(--ink-2);
  text-decoration-color: transparent;
}

.fix-now {
  color: var(--coral-deep);
  font-weight: 700;
}

.motion .fix-now:not(.shown) {
  opacity: 0;
  translate: 0 8px;
}

/* Photo: a nutrition label, drawn the way the FDA's look, in a camera's viewfinder corners. */
.snap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  margin-top: 30px;
}

.viewfinder {
  --c: rgb(255 255 255 / 0.9);
  padding: 18px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 26px 3px,
    linear-gradient(var(--c), var(--c)) 0 0 / 3px 26px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 26px 3px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 3px 26px,
    linear-gradient(var(--c), var(--c)) 0 100% / 26px 3px,
    linear-gradient(var(--c), var(--c)) 0 100% / 3px 26px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 26px 3px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 3px 26px;
  background-repeat: no-repeat;
}

.label {
  display: flex;
  flex-direction: column;
  width: 200px;
  padding: 6px 9px 4px;
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  rotate: -4deg;
  box-shadow: 0 18px 30px -14px rgb(0 0 0 / 0.6);
}

.label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid #111;
}

.label-title {
  padding-bottom: 2px;
  border-bottom: 1px solid #111;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.label .label-serving {
  padding: 3px 0 4px;
  border-bottom-width: 7px;
}

.label .label-cal {
  align-items: baseline;
  border-bottom-width: 4px;
  font-size: 17px;
  font-weight: 900;
}

.label-cal b + b {
  font-size: 26px;
  line-height: 1;
}

.label .sub {
  padding-left: 12px;
}

.label > span:last-child {
  border-bottom-width: 6px;
}

.snapped {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 -8px -36px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  color: var(--ink-2);
  font-size: 14px;
}

.snapped b {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
}

/* Health */
.sync {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.sync img {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5);
}

/* Apple's Health icon as Apple supplies it: no mask, border or shadow. */
.sync .health-icon {
  border-radius: 0;
  box-shadow: none;
}

.sync-line {
  display: flex;
  gap: 10px;
}

.sync-line i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.35;
}

.motion .sync-line i {
  animation: pass 1.8s ease-in-out infinite;
}

.motion .sync-line i:nth-child(2) {
  animation-delay: 0.2s;
}

.motion .sync-line i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pass {
  0%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

/* The week: the app's week strip (each day's ring, green under the goal, red over, today still filling) and the
   summary, a line at a time. */
.week {
  width: 100%;
  max-width: 420px;
  margin-top: 32px;
  padding: 18px 20px 8px;
  border-radius: 26px;
  background: #1c1b24;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.week-days {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.week-days li {
  --p: 0;
  --c: #34c759;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.55);
}

.week-days li.over {
  --c: #ff3b30;
}

.week-days li.today {
  --c: var(--coral);
}

.week-days i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #1c1b24 72%, transparent 74% 100%),
    conic-gradient(var(--c) calc(var(--p) * 1turn), rgb(255 255 255 / 0.12) 0);
}

.week-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 15px;
  color: rgb(255 255 255 / 0.6);
}

.week-row b {
  color: #fff;
  font-weight: 650;
}

/* ── The ten rings: the live page's rolling plate (site.js), the heading following it (home.js) ── */

.rings {
  padding-top: 150px;
  padding-bottom: 60px;
  text-align: center;
}

.rings-copy {
  max-width: 1160px;
}

/* "Today, your calories left are" on one line where it fits; the food on the next. */
.rings h2 {
  text-wrap: wrap;
}

.rings h2 {
  font-size: clamp(44px, 6vw, 84px);
}

/* The food sits on a line of its own, so the words above stay put while it changes. */
.food-line {
  display: block;
  white-space: nowrap;
}

.food-word {
  display: inline-block;
  color: var(--coral);
}

.food-word.swap {
  animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes pop {
  from {
    opacity: 0;
    translate: 0 0.15em;
  }
}

.rings-copy p {
  max-width: 36em;
  margin: 28px auto 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* The plate with its calories left, as in the app, and the ten rings in a row through it; each frame is the ring on
   a plate (0.796 of the plate's width) plus room for its shadow: 0.9231 of the plate. */
.rings-show {
  --across: 5.5;
  --plate: min(340px, calc((100vw - 2 * var(--gutter)) / var(--across) / 0.9231));
  --ring: calc(var(--plate) * 0.9231);
  margin-top: 56px;
}

/* Whole rings only: five across (the one on the plate and two either side), three on tablets, the one on the plate on
   phones. site.js spaces them 1.1 rings apart, so n take 1.1n - 0.1 rings; a touch more leaves room for their
   shadows. The plate is sized so that many fit the screen, and rings coming and going fade at the stage's edges. */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--ring) * var(--across));
  margin: 0 auto;
}

.plate-empty {
  grid-area: 1 / 1;
  width: var(--plate);
  filter: drop-shadow(0 18px 30px rgb(40 30 90 / 0.16));
}

.plate-count {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(60 60 67 / 0.6);
  font-family: var(--text);
  font-size: calc(var(--plate) * 0.0628);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.plate-eaten {
  font-size: calc(var(--plate) * 0.0524);
}

.plate-left {
  margin: -0.09em 0;
  color: #000;
  font-family: var(--display);
  font-size: calc(var(--plate) * 0.22);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.plate-track {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}

.plates {
  position: relative;
  height: 100%;
}

.plates li {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--ring) / 2);
  width: var(--ring);
  height: var(--ring);
  margin-top: calc(var(--ring) / -2);
  background-size: 100%;
  background-repeat: no-repeat;
  will-change: transform;
}

/* The ring on the plate shows a frame of its sprite sheet; the rest, a still of themselves whole (site.js). */
.plates li.sheet {
  background-size: 800% 600%;
}

.plates:not(.is-live) li:not(:first-child) {
  display: none;
}

/* The macros under the plate, as in the app (MacroBar): a capsule cut into protein, carbs and fat by their share of the
   calories so far, each with its food and grams, and what's left of the goals in a quiet line underneath. */
.macros {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 var(--gutter);
}

.macro-bar {
  display: flex;
  gap: 2px;
  width: min(calc(var(--plate) * 0.9), 100%);
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  color: #fff;
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.m {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 56px;
}

/* Widths by each macro's calories (4, 4 and 9 a gram) in the sample day: 316, 520 and 450 kcal. */
.m.protein {
  flex: 316;
  background: linear-gradient(#ff5f7e, #ff2d55);
}

.m.carbs {
  flex: 520;
  background: linear-gradient(#4cc3d8, #30b0c7);
}

.m.fat {
  flex: 450;
  background: linear-gradient(#7674e8, #5856d6);
}

.m svg {
  width: 11px;
  height: 11px;
  fill: rgb(255 255 255 / 0.85);
}

.m b {
  font-weight: 650;
}

/* Nothing eaten yet (the ring just landed): pale segments with coloured words, as in the app. */
.macro-bar.empty .m {
  background: none;
}

.macro-bar.empty .protein {
  background-color: rgb(255 45 85 / 0.16);
  color: #e0244a;
}

.macro-bar.empty .carbs {
  background-color: rgb(48 176 199 / 0.18);
  color: #1d8ea3;
}

.macro-bar.empty .fat {
  background-color: rgb(88 86 214 / 0.16);
  color: #4c4ac4;
}

.macro-bar.empty svg {
  fill: currentColor;
}

.macro-left {
  font-size: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── Questions: heading on the left, an accordion on the right, as on the live page ── */

.faq {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  padding-top: 128px;
  padding-bottom: 120px;
}

.faq-head {
  position: sticky;
  top: 112px;
  align-self: start;
}

.faq h2 {
  font-size: clamp(40px, 5vw, 68px);
}

.faq-list {
  border-top: 1px solid var(--line);
}

details {
  border-bottom: 1px solid var(--line);
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  flex: none;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--coral);
  transition: rotate 0.2s ease;
}

details[open] summary::after {
  rotate: 45deg;
}

summary:hover {
  color: var(--coral-deep);
}

details p {
  padding: 0 44px 26px 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

details a {
  color: var(--coral-deep);
}

/* ── Closing: tomorrow's plate, full ────────────────── */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px var(--gutter) 140px;
  background:
    radial-gradient(50% 45% at 50% 30%, rgb(255 141 107 / 0.55), transparent 70%),
    var(--coral);
  color: #fff;
  text-align: center;
}

/* The logo on its cast-iron plate, cut out, with a soft shadow on the coral. */
.closing-plate {
  width: min(280px, 56vw);
  margin-bottom: 40px;
  filter: drop-shadow(0 28px 34px rgb(110 20 0 / 0.4));
}

.closing h2 {
  max-width: 11em;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.95;
}

.closing > p {
  max-width: 30em;
  margin: 20px 0 0;
  font-size: 17px;
  color: rgb(255 255 255 / 0.9);
}

/* A note from the person who makes it, in a white card like a message. */
.maker {
  max-width: 560px;
  margin: 36px 0 34px;
  padding: 22px 26px 20px;
  border-radius: 26px 26px 26px 8px;
  background: #fff;
  color: var(--ink-2);
  text-align: left;
  box-shadow: 0 20px 40px -18px rgb(110 20 0 / 0.55);
}

.maker p {
  font-size: 18px;
  line-height: 1.55;
}

.maker a {
  color: var(--coral-deep);
  font-weight: 600;
}

.maker .maker-sign {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* ── Footer ─────────────────────────────────────────── */

.foot-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--ink-3);
}

.foot .logotype {
  width: 44px;
  color: var(--coral);
}

.foot-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.foot-links a {
  color: var(--ink-2);
  text-decoration: none;
}

/* ── Coming up on scroll, and the illustrations' steps (site.js) ── */

.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.7s ease,
    translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js [data-reveal].in {
  opacity: 1;
  translate: 0 0;
}

.motion [data-sequence] [data-step]:not([data-step-style]) {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.45s ease,
    translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion [data-sequence] [data-step]:not([data-step-style]).shown {
  opacity: 1;
  translate: 0 0;
}

/* Numbers that count (site.js) keep every figure the same width, so the words around them hold still as they go. */
[data-count] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .said {
    animation: none;
  }
  .js [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ── Narrower screens ───────────────────────────────── */

/* Four facts in a row need the full 1,200px: any narrower and their lines wrap, so they go two by two. */
@media (max-width: 1200px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }

  .facts > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 980px) {
  /* Tablets: as on the live page, one column, centred. */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 40px;
    gap: 40px;
  }

  .hero-copy {
    text-align: center;
  }

  .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .cta {
    align-items: center;
  }

  .devices {
    --phone-w: clamp(220px, 34vw, 300px);
  }

  .convo {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .convo .thread {
    order: 0;
  }


  .tile.wide {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 40px 40px;
  }

  .tile.wide .sync {
    margin: 8px 0 0;
  }

  .rings-show {
    --across: 3.3;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .bento > .tile {
    grid-column: span 12;
    min-height: 0;
  }

  .faq {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .faq-head {
    position: static;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  body {
    font-size: 16px;
  }

  .links {
    display: none;
  }

  .pill {
    margin-left: auto;
  }

  .logotype {
    width: 50px;
  }

  /* Phones: the phone alone (the watch would drop under Apple's 200 px minimum beside it; it has its own section
     below), with what people say under it. */
  .hero-grid {
    padding-bottom: 64px;
  }

  .devices {
    --phone-w: min(270px, 70vw);
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
  }

  .devices .device-watch {
    display: none;
  }

  .devices-side {
    align-items: center;
  }

  .saying {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .saying li:nth-child(2) {
    margin-right: 0;
  }

  .said {
    font-size: 14px;
    padding: 9px 14px 9px 11px;
  }

  .said svg {
    width: 16px;
    height: 16px;
  }

  .facts strong {
    font-size: 24px;
  }

  .facts {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .facts > div,
  .facts > div:nth-child(3) {
    padding: 14px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .facts > div:first-child {
    border-top: 0;
  }

  .fact-icon {
    width: 36px;
    height: 36px;
  }

  .how {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .intro p {
    font-size: 17px;
  }

  /* Phones: the shorter requests only, smaller and less askew, so they pair up. */
  .cloud {
    gap: 12px 8px;
    margin-top: 32px;
  }

  .cloud li {
    padding: 7px 12px 8px;
    border-radius: 18px 18px 5px 18px;
    font-size: 14px;
    rotate: calc(var(--tilt) / 2);
  }

  .cloud li.long {
    display: none;
  }

  .video-frame {
    margin-top: 40px;
    border-radius: 22px;
  }

  .thread {
    padding: 18px 14px;
    border-radius: 28px;
  }

  .lede {
    font-size: 18px;
  }

  .block {
    padding: 96px 0;
  }

  .block .body,
  .convo-note,
  .rings-copy p {
    font-size: 17px;
  }

  .deco {
    width: 220px;
  }

  .deco-pineapple {
    right: -70px;
    bottom: -70px;
  }

  .deco-sushi {
    width: 200px;
    left: -60px;
    bottom: -80px;
  }

  .watch-stage .device-watch {
    width: 220px;
  }

  .logged {
    width: 270px;
    font-size: 13.5px;
  }

  .thread .me,
  .thread .it {
    max-width: 92%;
    font-size: 16px;
    padding: 11px 14px;
    border-radius: 20px;
  }

  .a-slot {
    max-width: 92%;
  }

  .thread div.it li {
    font-size: 15.5px;
  }

  .bento {
    gap: 14px;
    padding-top: 80px;
  }

  .tile {
    padding: 32px 24px 28px;
    border-radius: 30px;
  }

  .rings {
    padding-top: 96px;
  }

  .rings-show {
    --across: 1.15;
    --plate: min(300px, 76vw);
  }


  .tile.wide {
    padding: 32px 24px 28px;
  }

  .tile.wide .sync img {
    width: 84px;
    height: 84px;
    border-radius: 20px;
  }

  .label {
    width: 176px;
    font-size: 11px;
  }

  .label-title {
    font-size: 21px;
  }

  /* Phones: what got logged sits over the label's corner, below it. */
  .snap {
    grid-template-columns: 1fr;
  }

  .snapped {
    justify-self: end;
    margin: -46px 0 0;
  }

  .faq {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  summary {
    font-size: 17px;
  }

  .closing {
    padding-top: 88px;
    padding-bottom: 100px;
  }

  .maker p {
    font-size: 16.5px;
  }

  .foot-inner {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .foot-links {
    margin-left: 0;
    width: 100%;
  }
}