@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-variable.woff2") format("woff2"),
       url("../fonts/nunito-latin-variable.woff") format("woff");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* the true italic, for the odd emphasised word in a heading */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-italic-variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}
/* ==========================================================================
   Sato home page: the app's features, most important first
   Warm paper, Nunito headings, a pill nav, and one section per feature
   with a real app window beside its words. The first, the spoken
   check-in, is a looping film. Light only by intent.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Page */
  --paper:      #FBF9F4;
  --paper-2:    #F4F0E7;
  --ink:        #1E1B2A;
  --ink-2:      #5B5666;
  --ink-3:      #6E6979;   /* small print: holds 4.5:1 on the paper */
  --line:       rgba(30, 27, 42, 0.10);
  --white:      #FFFFFF;

  /* Brand */
  --teal:       #2A8B86;
  --teal-deep:  #1F6E6A;

  /* Pale tints for the big panels */
  --tint-mint:  #E4F2EC;
  --tint-peach: #FBEBD8;

  /* Type */
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;

  /* Shape */
  --r-panel: 32px;
  --shadow-window: 0 1px 2px rgba(30,27,42,.05), 0 4px 10px rgba(30,27,42,.05), 0 14px 32px rgba(30,27,42,.08);
  --shadow-card:   0 1px 2px rgba(30,27,42,.05), 0 8px 24px rgba(30,27,42,.06);

  --measure: 1368px;  /* 1240 of content between two 64px gutters */
  --gutter:  64px;
  --hero-inset: 28px; /* the hero panel's margin from the viewport; the nav ribbon sits inside it */
}
@media (max-width: 1100px) { :root { --gutter: 44px; } }
@media (max-width: 900px) { :root { --gutter: 32px; } }
@media (max-width: 640px) { :root { --gutter: 20px; --r-panel: 26px; --hero-inset: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; display: block; }
/* the wrapper only picks the file; the layout still belongs to the img */
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:where(a, button):focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
/* a section an in-page link moved focus to, not a control */
[tabindex="-1"]:focus { outline: none; }

.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.teal { color: var(--teal-deep); }

/* ------------------------------------------------------------ Type -- */

.h2, .h3 { font-family: var(--brand); font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
.h3 { font-size: clamp(1.6rem, 2.4vw, 2.125rem); line-height: 1.15; text-wrap: balance; }
/* a Plus mark keeps to the word before it, never alone on a line */
.nowrap { white-space: nowrap; }
.lede { font-size: 1.19rem; line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.fine { font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }
.fine a, .privacy p a, .attribution a { text-decoration: underline; }

/* --------------------------------------------------------- Buttons -- */

/* White glass, teal type: the one button on the page. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap;
  color: var(--teal-deep); cursor: pointer;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(42,139,134,.28);
  box-shadow: 0 1px 2px rgba(30,27,42,.04), 0 10px 30px rgba(30,27,42,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); background: #fff; border-color: rgba(42,139,134,.45); box-shadow: 0 1px 2px rgba(30,27,42,.05), 0 14px 36px rgba(30,27,42,.10), inset 0 1px 0 #fff; }
.btn--lg { min-height: 52px; padding: 0 28px; }
.btn .sym { width: 17px; height: 17px; }

/* an SF Symbol, rendered to an alpha PNG and tinted with the text colour */
.sym { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* The tier's small mark, as the app draws it: a teal tile carrying the word. */
.plus-tile {
  --s: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--s); padding-inline: calc(var(--s) * 0.32);
  border-radius: calc(var(--s) * 0.278);
  background: #247D78; color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: calc(var(--s) * 0.6); line-height: 1; letter-spacing: 0.01em;
  vertical-align: middle; white-space: nowrap;
}
.h3 em { font-style: italic; padding-right: 0.04em; }

/* an app window: the export's own corner, drawn with a soft shadow */
.card-img { --r: 7.41%; height: auto; border-radius: var(--r) / calc(var(--r) * var(--k, 1)); box-shadow: var(--shadow-window); }
.page-img { height: auto; border-radius: 10px; box-shadow: var(--shadow-window); }

/* ------------------------------------------------------------- Nav -- */

/* The ribbon only ever slides: a transform on a layer of its own, which the
   compositor runs at the display's rate (120 Hz on ProMotion) whatever the
   page's script is doing. It never fades: opacity under 1 on the shell cuts
   the ribbon's frosted glass off from the page behind it, so the blur would
   blink off as it left and back on as it landed. It goes far enough up to
   take its shadow with it, and the curve is quick to start, so on the way
   back it is in sight within a few frames. */
.nav-shell { position: fixed; top: calc(var(--hero-inset) + 14px); left: 0; right: 0; z-index: 50; padding-inline: calc(var(--hero-inset) + 26px);
  will-change: transform; transition: transform .5s cubic-bezier(.32,.72,0,1); }
/* Out of the way on the way down, back on the way up. */
.nav-shell.is-tucked { transform: translateY(calc(-100% - var(--hero-inset) - 62px)); pointer-events: none; }
.nav {
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 9px 10px 9px 22px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(30,27,42,.07);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(30,27,42,.04), 0 10px 30px rgba(30,27,42,.06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--brand); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand .mark { width: 26px; height: 26px; border-radius: 7.5px; }
.nav-links { display: flex; gap: 24px; margin-inline: auto; font-size: 0.95rem; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav .btn { min-height: 38px; padding: 0 16px; font-size: 0.875rem; box-shadow: none; }

/* The button that opens the sheet: two bars that cross into a close mark. */
.nav-toggle { display: none; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.nav-toggle:hover { background: rgba(30,27,42,.05); }
.nav-bars { position: relative; display: block; width: 18px; height: 12px; }
.nav-bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--ink);
  transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nav-bars i:first-child { top: 1px; }
.nav-bars i:last-child { bottom: 1px; }
.nav.is-open .nav-bars i:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav-bars i:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-shell { padding-inline: calc(var(--hero-inset) + 14px); }
  .nav { position: relative; gap: 10px; padding: 9px 10px 9px 16px; }
  .brand { margin-right: auto; }
  .nav-toggle { display: inline-flex; }
  /* The section links, as a sheet hanging under the ribbon. */
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 1;
    display: grid; gap: 2px; margin: 0; padding: 8px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(30,27,42,.07); border-radius: 24px;
    box-shadow: 0 2px 6px rgba(30,27,42,.06), 0 18px 44px rgba(30,27,42,.14);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: 50% 0;
    transition: opacity .2s ease, transform .24s cubic-bezier(.2,.7,.2,1), visibility .24s;
  }
  .nav.is-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { display: flex; align-items: center; min-height: 46px; padding: 0 16px;
    border-radius: 16px; font-size: 1rem; font-weight: 550; color: var(--ink); }
  .nav-links a:active { background: rgba(42,139,134,.10); }
}
@media (max-width: 480px) {
  .nav-cta-long { display: none; }
  .nav .btn { padding: 0 13px; font-size: 0.8rem; }
}
@media (max-width: 360px) {
  .brand { font-size: 0; gap: 0; }
  .brand .mark { width: 28px; height: 28px; border-radius: 8px; }
}

/* ------------------------------------------------------------ Hero -- */

/* Copy on the left and the Today screen rising out of the bottom edge,
   centred in the room the copy leaves. The capture is 920x1924 (2.0913 tall
   per unit of width); the panel hides the bottom 0.511 of the phone's
   width, which lands the cut in the gap under the calorie gauge, above the
   nutrient rings. That leaves 1.580 widths of phone showing, so the width
   is also held to whatever keeps the top of the phone 200px down the panel,
   well clear of the nav. On a very wide window the copy and the phones keep
   to a 1600px column (--pad grows) instead of drifting apart. The type and
   the phones stop growing early: at full size they filled the panel edge to
   edge and the first screen read as a wall. */
.hero { padding: var(--hero-inset) var(--hero-inset) 0; }
.hero-panel {
  --ph: clamp(640px, calc(100svh - 2 * var(--hero-inset)), 860px);
  --pw: min(390px, 28vw, 46svh, calc((var(--ph) - 200px) / 1.58));
  --pad: max(clamp(28px, 6.8vw, 96px), calc((100% - 1600px) / 2));
  --cw: min(540px, 44vw);
  --group: var(--pw);
  position: relative; overflow: hidden;
  height: var(--ph);
  border-radius: 34px; background: var(--paper-2);
  box-shadow: 0 2px 4px rgba(30,27,42,.06), 0 18px 44px rgba(30,27,42,.10);
  display: flex; align-items: center;
  padding: 96px 0 40px var(--pad);
}
.hero-copy { position: relative; z-index: 2; width: var(--cw); display: flex; flex-direction: column; gap: 26px; }
.hero-icons { display: flex; gap: 16px; }
.hero-icons .sym { width: 30px; height: 30px; }
.hero-line {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-lede { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.link-down { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teal-deep); }
.link-down svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.link-down:hover svg { transform: translateY(2px); }
/* The phone's shadow is a box-shadow on a box traced to the frame (the
   capture has a 3/920 transparent margin at each side and a 0.154-of-width
   corner), never filter: drop-shadow, whose blur renders on a clipped layer
   and shows that layer's hard rectangular edges. */
.hero-stage {
  --w: var(--pw);
  position: absolute; z-index: 1;
  right: calc(var(--pad) + (100% - 2 * var(--pad) - var(--cw) - var(--group)) / 2);
  bottom: calc(var(--w) * -0.511);
  width: var(--w);
}
.hero-stage::before {
  content: ""; position: absolute; inset: 0 0.33%;
  border-radius: calc(var(--w) * 0.154);
  box-shadow: 0 2px 6px rgba(30,27,42,.10), 0 26px 60px rgba(30,27,42,.18);
}
.hero-phone { position: relative; width: 100%; height: auto; }
/* Once there is room for two, Reports joins Today a step to its left:
   smaller, lower, never overlapping it or the copy. Its capture is cut
   0.408 widths up, in the gap under "Explore your history". */
.hero-stage--side { display: none; }
@media (min-width: 1680px) {
  .hero-panel { --cw: 500px; --pw2: calc(var(--pw) * 0.78); --gap: 40px; --group: calc(var(--pw) + var(--gap) + var(--pw2)); }
  .hero-stage--side {
    --w: var(--pw2); display: block; bottom: calc(var(--w) * -0.408);
    right: calc(var(--pad) + (100% - 2 * var(--pad) - var(--cw) - var(--group)) / 2 + var(--pw) + var(--gap));
  }
}

@media (max-width: 760px) {
  /* Stacked: the copy, then the phone, and the panel ends on the same cut. */
  .hero-panel { --pw: min(300px, 72vw); height: auto; display: block; padding: 116px 24px 0; border-radius: 26px; }
  .hero-copy { width: auto; gap: 20px; }
  .hero-icons .sym { width: 26px; height: 26px; }
  .hero-lede { font-size: 1.1rem; }
  .hero-stage { position: relative; right: auto; bottom: auto; margin: 40px auto calc(var(--pw) * -0.511); }
}

/* -------------------------------------------------------- Features -- */

/* The app's features, most important first: the spoken check-in, then
   weight, doses, food, side effects, the weekly report and the clinician
   PDF. Each is a slot a little taller than the window with its content in
   the middle, so a feature brought to the middle of the window is alone on
   screen: the ones before and after start just past its edges. One taller
   than the window keeps --feature-pad above and below. Pricing and privacy
   are slots the same way. lvh, so the slot holds with a phone's toolbars
   in or out. */
main { --slot: calc(100vh + 80px); }
@supports (height: 100lvh) { main { --slot: calc(100lvh + 80px); } }
#pricing, #privacy { display: flex; flex-direction: column; justify-content: center; min-height: var(--slot); padding-block: 64px; }
.features { --feature-pad: 56px; }
/* The words on one side and the window on the other, the sides taking
   turns down the page (--flip), each held to the middle of the other and
   the pair centred together, so a window never drifts away from its words. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 420px) fit-content(600px);
  grid-template-areas: "copy media";
  justify-content: center;
  column-gap: clamp(48px, 7vw, 112px);
  align-items: center; align-content: center;
  min-height: var(--slot);
  padding-block: var(--feature-pad);
  scroll-margin-top: 96px;
}
.feature--flip { grid-template-columns: fit-content(600px) minmax(0, 420px); grid-template-areas: "media copy"; }
/* The two Plus panels (the check-in and the weekly report) take the whole row. */
.feature--film { grid-template-columns: minmax(0, 1fr); grid-template-areas: "film"; }
/* What the feature is, over its heading: its symbol on a tile of its own
   colour and its name, and a Plus mark after the name when it is a Plus
   feature (never trailing the heading wherever its last line ends). */
.feature-tag {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--brand); font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--c) 72%, var(--ink));
}
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 15%, #fff); color: var(--c);
}
.feature-icon .sym { width: 19px; height: 19px; }
.feature-tag .plus-tile { --s: 20px; margin-left: 2px; }
.film .feature-tag { margin-bottom: 18px; }
.feature-copy { grid-area: copy; display: flex; flex-direction: column; gap: 14px; }
.feature-copy .feature-tag { margin-bottom: 4px; }
.feature-copy p:not(.feature-tag) { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); }
/* Food's Plus feature in its own window, in the mint the Plus panels
   share: the mark and its name on one line, what it does, and the two Scan
   modes it adds, named as the app names them. */
.plus-box { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 18px 20px 20px; border-radius: 22px; background: var(--tint-mint); }
.feature-copy .plus-box p { font-size: 1rem; line-height: 1.5; color: #3F4A48; }
.feature-copy .plus-box .plus-box-head { display: flex; align-items: center; gap: 10px; font-family: var(--brand); font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.plus-box-head .plus-tile { --s: 20px; }
.scan-modes { display: flex; gap: 8px; margin-top: 6px; }
.scan-modes > span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border-radius: 10px;
  background: #fff; color: var(--teal-deep); font-size: 0.875rem; font-weight: 700; box-shadow: 0 1px 2px rgba(30,27,42,.05); }
.scan-modes .sym { width: 16px; height: 16px; }
.feature-media { grid-area: media; display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.feature-media img { max-width: 100%; }

/* Weight: seven exports of the one weight card, one at a time. The caption
   and dots sit above so they never move as a shorter card comes round; every
   slide shares one grid cell, so the stage is as tall as the tallest. */
.gc { width: 360px; max-width: 100%; }
/* Beside the words, the weight card also narrows with a short window, the
   way the food card does: the tallest slide (Every detail) is 0.5313 as wide
   as it is tall, and the head and the room around it take 190px. */
@media (min-width: 1001px) and (min-height: 600px) {
  .gc:not(.gc--food) { width: min(360px, calc((100svh - 190px) * 0.5313)); }
}
.gc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; min-height: 44px; }
.gc-caption { display: grid; grid-template-columns: minmax(0, 1fr); transition: opacity .25s ease; }
.gc-caption strong { font-family: var(--brand); font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.gc-caption strong + span { font-size: 0.875rem; color: var(--ink-2); }
/* The caption on show and, unseen in the same cell, every other slide's
   (home.js): the head is sized for the longest, so a turn never moves the
   bars or the window under them. */
.gc-cap { grid-area: 1 / 1; display: flex; flex-direction: column; }
.gc-cap--room { visibility: hidden; }
.gc-caption.is-changing { opacity: 0; }
.gc-dots { display: flex; gap: 4px; flex: none; }
.gc-dots button { position: relative; width: 18px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--teal-deep); }
.gc-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: rgba(30,27,42,.16); transition: background-color .25s ease; }
.gc-dots button:hover::before { background: rgba(30,27,42,.3); }
.gc-dots .pfill { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; }
.gc-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.gc-slide { grid-area: 1 / 1; margin: 0; }
.gc-slide img { width: 100%; }
/* Food turns through the drawn Today's log card, the food log, and the
   Log food sheet, all at the card's width (--u, the card's point). Beside
   the words it also shrinks with a short window, so the section still fits
   in it with room to spare: the card is 685pt tall, the caption 60px. */
.gc--food { --u: min(1.0811px, calc((100vw - 84px) / 370)); width: calc(370 * var(--u)); }
@media (min-width: 1001px) and (min-height: 600px) {
  .gc--food { --u: min(1.0811px, calc((100svh - 190px) / 685)); }
}
.gc--food .gc-stage { align-items: start; }
.gc--food .screen-img { width: 100%; border-radius: calc(27.4 * var(--u)); }

/* Doses: the dose cards, or the supply page in their place. */
.swap-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid rgba(42,139,134,.28);
  background: rgba(255,255,255,.7); color: var(--teal-deep); font: inherit; font-size: 0.94rem; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.swap-btn:hover { background: #fff; border-color: rgba(42,139,134,.45); }
.swap-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.swap-btn[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
/* Its bar runs under the pill, clear of the curve at each end: inside, it
   sat on the rounded bottom edge and crowded the label. */
.swap-btn { position: relative; margin-bottom: 8px; }
.swap-btn .ptrack { left: 22px; right: 22px; bottom: -11px; height: 3px; color: var(--teal-deep); background: rgba(42,139,134,.16); }
/* Both labels share one cell, so the pill keeps the longer one's width
   whichever is showing: a press changes its fill, not its size. */
.swap-label { display: grid; justify-items: center; }
.swap-label > span { grid-area: 1 / 1; }
.swap-btn[aria-pressed="true"] .swap-label > :first-child,
.swap-btn:not([aria-pressed="true"]) .swap-label > :last-child { visibility: hidden; }
/* The paragraph over the button turns with the window, in the window's own
   time (see Pane turns): the dose paragraph and the supply one share a
   cell as tall as the longer, so the words always describe the picture and
   nothing on the page moves. The supply paragraph used to be added under
   the button, which pushed a stacked window down a hundred pixels the
   moment the button was pressed, before the window had even turned. */
.swap-copy { display: grid; grid-template-columns: minmax(0, 1fr); }
.swap-copy > p { grid-area: 1 / 1; }
.swap { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.swap-pane { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.screen-img { width: 340px; max-width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow-window); }

/* Food: the Today's log card, drawn rather than pictured so it can fill in
   as it comes to rest (home.js): the calorie figure counts up with its arc,
   each nutrient with its ring, the water rises and keeps moving. Every size
   is the app's own, in points, times --u, so the 370pt card is 400px wide
   here and shrinks with a phone. Colours are the app's light tokens. */
.lcard {
  --ink: #2A2538; --ink-2: #5A4E5E; --ink-3: #716567;
  width: calc(370 * var(--u)); max-width: 100%;
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(27.4 * var(--u));
  background: #fff; box-shadow: var(--shadow-window);
  font-family: ui-rounded, "SF Pro Rounded", var(--brand); color: var(--ink);
  line-height: 1.2;
}
.lcard .sym { display: inline-block; }
.lc-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--u)); }
.lc-title { font-size: calc(20 * var(--u)); font-weight: 700; }
.lc-edit { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: #1F6E6A; }
.lc-edit .sym { width: calc(15 * var(--u)); height: calc(13 * var(--u)); }
.lc-label { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--ink-2); }
.lc-gauge { position: relative; width: calc(264 * var(--u)); height: calc(132 * var(--u)); margin: calc(6 * var(--u)) auto 0; }
.lc-gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-arc-track, .lc-arc-fill { fill: none; stroke-width: 20; stroke-linecap: round; }
.lc-arc-track { stroke: rgba(108,140,82,.12); }
.lc-arc-fill { stroke: url(#lc-cal); stroke-dasharray: 383.27; stroke-dashoffset: 189.49; }
.lc-knob { fill: #fff; }
.lc-gauge-text { position: absolute; left: calc(40 * var(--u)); right: calc(40 * var(--u)); bottom: calc(-6 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.lc-hero { font-size: calc(48 * var(--u)); font-weight: 800; line-height: 1.04; letter-spacing: calc(-1.2 * var(--u)); font-variant-numeric: tabular-nums; }
.lc-body { font-size: calc(15 * var(--u)); color: var(--ink-2); }
.lc-rings { display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin: calc(14 * var(--u)) auto 0; column-gap: calc(26 * var(--u)); row-gap: calc(14 * var(--u)); }
.lc-ring { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.lc-ring svg { flex: none; width: calc(42 * var(--u)); height: calc(42 * var(--u)); overflow: visible; transform: rotate(-90deg); }
.lc-ring-track, .lc-ring-fill { fill: none; stroke: var(--rc); stroke-width: 5.5; }
.lc-ring-track { stroke-opacity: .12; }
.lc-ring-fill { stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 * (1 - var(--f, 0))); }
.lc-ring > div { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.lc-value { font-size: calc(17 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-value b { font-weight: inherit; }
.lc-detail { font-size: calc(13 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.is-protein { --rc: #C16084; } .is-fiber { --rc: #5C7E44; } .is-sodium { --rc: #377A7A; } .is-satfat { --rc: #735392; }
.lc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.lc-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: calc(1 * var(--u));
  min-height: calc(58 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u)); background: rgba(42,37,56,.05);
}
.lc-tile-name { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--ink-2); }
.lc-tile-name .sym { width: calc(11 * var(--u)); height: calc(13 * var(--u)); }
.is-water { color: #1E8EC4; } .is-steps { color: #3F68C0; } .is-workout { color: #0B776E; }
.lc-tile-value { font-size: calc(17 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-tile-value small { font-size: calc(13 * var(--u)); font-weight: 400; color: var(--ink-3); }
/* The water: a body and, lifted 5pt behind it, the back of the surface,
   fading from its own lighter tone at its top edge into the body's at the
   front wave, with no line between, as the app draws it (Oct 9; it was two
   flat tones). The level rises to the day's share of the goal; the back
   and front waves drift in opposite directions at their own speeds, so the
   fade widens and narrows along the tile and never settles flat.
   The nine .lc-wave curves run from the back wave (first) to the front one
   (last), each filled to the floor in the one blue at the fill-opacity the
   markup gives it, so what has piled up by each curve is the tone for that
   depth: .12 at the top edge to .22 in the body, each layer's
   a = 1 - (1 - A) / (1 - A above). home.js draws the curves; without it
   they are one wave lifted from 5 to 0. */
.lc-water { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
/* 0 sits the back band just under the tile, 1 the surface at its top. */
.lc-water-level { transform: translateY(calc(65px - 72px * var(--lvl, .5))); }
/* While the card is in view the water never rests: the two waves drift
   against each other and swell and fall out of step (home.js), and the
   surface rocks from side to side about its middle. As it fills it surges
   past its level and sways harder, settling over a couple of seconds. */
.lc-wave { fill: #1E8EC4; }
.lc-slosh { transform-origin: 54px 0; animation: lc-slosh 3.1s ease-in-out infinite alternate; }
.lcard:not(.is-live) .lc-slosh { animation-play-state: paused; }
@keyframes lc-slosh { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
/* Today's meals, unfolded: the app's dropdown (TodaysMealsSection) as it
   reads open, each slot's chip over its rows on a dashed rail, and the way
   to the whole food log as the last line. */
.lc-meals { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid rgba(42,37,56,.12); }
.lc-meals-head { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.lc-meals-head em { margin-left: auto; font-style: normal; font-weight: 400; color: #9A8E8E; font-variant-numeric: tabular-nums; }
.lc-meals-head .is-chev { width: calc(11 * var(--u)); height: calc(7 * var(--u)); color: #9A8E8E; }
.lc-group { --slot: #9B5831; --slot-soft: rgba(155,88,49,.14); display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.lc-group.is-lunch { --slot: #337171; --slot-soft: rgba(51,113,113,.14); }
.lc-group-head { display: flex; align-items: center; justify-content: space-between; }
.lc-group-head em { font-style: normal; font-size: calc(13 * var(--u)); color: #9A8E8E; font-variant-numeric: tabular-nums; }
.lc-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 999px; background: var(--slot-soft); color: var(--slot); font-size: calc(13 * var(--u)); font-weight: 600; }
.lc-chip .sym { width: calc(13 * var(--u)); height: calc(12 * var(--u)); }
.lc-row {
  position: relative; display: flex; align-items: baseline; gap: calc(8 * var(--u));
  margin-left: calc(12 * var(--u)); padding-left: calc(12 * var(--u));
  font-variant-numeric: tabular-nums;
}
.lc-row::before { content: ""; position: absolute; left: 0; top: calc(-8 * var(--u)); bottom: calc(2 * var(--u)); border-left: 1.5px dashed var(--slot); opacity: .4; }
.lc-row strong { flex: 1; min-width: 0; font-size: calc(15 * var(--u)); font-weight: 600; }
.lc-row span { font-size: calc(13 * var(--u)); color: #9A8E8E; }
.lc-row b { min-width: calc(34 * var(--u)); text-align: right; font-size: calc(15 * var(--u)); font-weight: 600; }
.lc-loglink { display: flex; align-items: center; gap: calc(6 * var(--u)); min-height: calc(32 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: #1F6E6A; }
.lc-loglink .sym { width: calc(15 * var(--u)); height: calc(12 * var(--u)); }
.lc-loglink .is-chev { width: calc(7 * var(--u)); height: calc(12 * var(--u)); margin-left: auto; }
.lc-actions { display: flex; gap: calc(9 * var(--u)); margin-top: calc(4 * var(--u)); }
.lc-add, .lc-scan {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  height: calc(42 * var(--u)); border-radius: 999px; font-size: calc(15 * var(--u)); font-weight: 700;
}
.lc-add { flex: 1; color: #9B3A60; background: rgba(193,96,132,.15); }
.lc-add .sym { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.lc-scan { gap: calc(7 * var(--u)); padding: 0 calc(22 * var(--u)); color: #B8471F; background: rgba(224,96,60,.15); }
.lc-scan .sym { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* The weekly report, one section at a time. The list names each
   section and lights the one on show; the windows share one grid cell in a
   stage that fades the long ones out at the bottom and keeps room for the
   shadow on the other three sides. */
.film.film--report { background: #E1EFF4; }
/* The report windows are 440 wide, so the words can have some of the
   room the check-in card needs: the heading and its Plus mark fit on one line. */
@media (min-width: 1101px) { .film.film--report { grid-template-columns: minmax(0, 400px) minmax(0, 480px); } }
.report-list { margin-top: 24px; display: grid; gap: 4px; }
.report-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; margin-left: -12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink-2);
  font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.report-list button:hover { color: var(--ink); }
.report-list button > i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(30,27,42,.28); transition: background-color .3s ease, border-color .3s ease, transform .3s ease; }
.report-list button[aria-pressed="true"] { background: rgba(255,255,255,.7); color: var(--ink); font-weight: 700; }
.report-list button { position: relative; }
.report-list .ptrack { left: 12px; right: 12px; bottom: 4px; height: 3px; color: #4A7FD6; background: rgba(74,127,214,.16); opacity: 0; }
.report-list button[aria-pressed="true"] .ptrack { opacity: 1; }
.report-list button[aria-pressed="true"] > i { background: #4A7FD6; border-color: #4A7FD6; transform: scale(1.2); }
.report-stage {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-self: start;
  height: 572px; margin: -32px -40px 0; padding: 32px 40px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.rs-slide { grid-area: 1 / 1; width: 440px; max-width: 100%; margin: 0; }
.rs-slide img { width: 100%; }

/* Pane turns, everywhere a window has more than one pane. The pane on
   show fades out where it stands, and only once it has gone does the next
   one rise into its place: two windows at half strength over each other
   read as one muddled picture. */
.gc-slide, .rs-slide, .swap-pane {
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .24s cubic-bezier(.4,0,1,1), transform 0s linear .24s, visibility 0s linear .24s;
}
.gc-slide.is-active, .rs-slide.is-active,
.swap[data-state="dose"] .swap-pane--dose, .swap[data-state="supply"] .swap-pane--supply {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .42s cubic-bezier(0,0,.2,1) .24s, transform .6s cubic-bezier(.2,.7,.2,1) .24s, visibility 0s linear .24s;
}
/* Words turn in the same time, without the rise: a paragraph that slid
   would read as the text jumping. */
.swap-copy > p { opacity: 0; visibility: hidden; transition: opacity .24s cubic-bezier(.4,0,1,1), visibility 0s linear .24s; }
.swap-copy[data-state="dose"] > .swap-text--dose, .swap-copy[data-state="supply"] > .swap-text--supply {
  opacity: 1; visibility: visible;
  transition: opacity .42s cubic-bezier(0,0,.2,1) .24s, visibility 0s linear .24s;
}

/* Pane timers. A window with several panes turns through them (home.js,
   rotator); the bar on the pane's control fills toward the next turn, and
   the end of that fill is what turns it. Held while a pointer rests on
   the controls; picking a pane starts its bar afresh. The fill is uncovered from the left rather
   than stretched, so its rounded end keeps its shape from the first pixel
   (a stretched one started as a squashed nub). */
.ptrack { position: absolute; display: block; overflow: hidden; border-radius: 2px; pointer-events: none; transition: opacity .3s ease; }
.pfill { display: block; height: 100%; border-radius: inherit; background: currentColor; clip-path: inset(0 100% 0 0); }
.ptrack .pfill { width: 100%; }
[data-rotator] [aria-pressed="true"] .pfill, [data-rotator] .swap-btn .pfill { animation: pfill var(--turn-ms, 7s) linear forwards; }
[data-rotator].is-held .pfill { animation-play-state: paused; }
.is-past .pfill { clip-path: none; }
@keyframes pfill { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  [aria-pressed="true"] .pfill { clip-path: none; }
  .swap-btn .ptrack { display: none; }
}

/* ----------------------------------------------- The spoken check-in -- */

/* The words beside the card, which is wider than it was: the sentence
   it hears covers everything a check-in can log. */
.film {
  grid-area: film;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 640px); justify-content: space-between; column-gap: 48px;
  padding: 48px; border-radius: var(--r-panel); background: var(--tint-mint);
}
.film-copy { display: flex; flex-direction: column; }
.film-copy p:not(.feature-tag) { margin-top: 14px; font-size: 1.125rem; line-height: 1.55; color: #3F4A48; }
.film-steps { margin-top: 26px; display: grid; gap: 10px; }
.film-steps li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink-2); transition: color .3s ease; }
.film-steps li span {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(30,27,42,.25);
  font-size: 13px; font-weight: 700; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.film-steps li.is-active { color: var(--ink); font-weight: 700; }
.film-steps li.is-active span { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.film-stage { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* The check-in card. home.js walks it through rest, listening, reading,
   staged and saved by setting data-phase on .film; "static" is the resting
   frame for reduced motion and for a page without the script. */
.vcard { padding: 24px 26px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-window); transition: opacity .5s ease; }
.vhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; }
.vtitle { font-family: var(--brand); font-weight: 800; font-size: 1.25rem; }
.vctl { display: flex; align-items: center; }
.vctl > * { display: none; }
.vbtn { position: relative; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 700; }
.vbtn--check { padding-left: 12px; background: #B5503F; }
.vbtn--check .sym { width: 14px; height: 14px; }
.vbtn--save { background: var(--teal-deep); }
.vlive { align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vlive i { width: 8px; height: 8px; border-radius: 50%; background: #B5503F; animation: vpulse 1.2s ease-in-out infinite; }
.vspin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(30,27,42,.12); border-top-color: var(--ink-3); animation: vspin .8s linear infinite; }
.film[data-phase="rest"] .vbtn--check,
.film[data-phase="listening"] .vlive,
.film:is([data-phase="staged"], [data-phase="saved"], [data-phase="static"]) .vbtn--save { display: inline-flex; }
.film[data-phase="reading"] .vspin { display: inline-block; }
/* a tap: the ring on the button about to be pressed */
.vtap { position: absolute; inset: -3px; border-radius: 999px; border: 2px solid; opacity: 0; pointer-events: none; }
.vbtn--check .vtap { border-color: #B5503F; }
.vbtn--save .vtap { border-color: var(--teal-deep); }
.film[data-phase="rest"] .vbtn--check .vtap { animation: vtap .9s ease-out 1.1s 1 both; }
.film[data-phase="staged"] .vbtn--save .vtap { animation: vtap .9s ease-out 3.3s 1 both; }

/* One height through every phase, the tallest one's: the words over the
   chips, both of which wrap to more lines as the card narrows. home.js
   measures it; without the script the static frame sizes itself. */
.vbody { position: relative; margin-top: 16px; overflow: hidden; }
.vrest { position: absolute; inset: 0 0 auto; font-style: italic; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-3); opacity: 0; transition: opacity .35s ease; }
.film[data-phase="rest"] .vrest { opacity: 1; }
/* gone before the wave opens over it */
.film:not([data-phase="rest"]) .vrest { transition-duration: .15s; }
.vwave-row { height: 0; opacity: 0; overflow: hidden; transition: height .45s ease, margin-bottom .45s ease, opacity .35s ease; }
.film:is([data-phase="listening"], [data-phase="reading"]) .vwave-row { height: 44px; margin-bottom: 14px; opacity: 1; }
.vwave { width: min(380px, 100%); height: 44px; margin: 0 auto; }
.vtext { padding-left: 14px; border-left: 2px solid rgba(30,27,42,.12); font-size: 1.1875rem; line-height: 1.6; transition: opacity .35s ease; }
.hl { margin: 0 -3px; padding: 1px 3px; border-radius: 5px; transition: background-color .4s ease, color .4s ease; }
.k-f { --bg: #F8E1DC; --fg: #8E3E31; }
.k-a { --bg: #F5E9D2; --fg: #7A5518; }
.k-s { --bg: #ECE5F4; --fg: #5A4282; }
.k-w { --bg: #E4EDDA; --fg: #46612F; }
.k-b { --bg: #E0E9F7; --fg: #2F5592; }
.k-d { --bg: #D9EEEC; --fg: #1F6461; }
.film:is([data-phase="reading"], [data-phase="staged"], [data-phase="saved"], [data-phase="static"]) .hl { background: var(--bg); color: var(--fg); }
.film[data-phase="reading"] .hl { transition-delay: calc(.2s + var(--i) * .22s); }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vchip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px;
  background: var(--bg); color: var(--fg); font-size: 14px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
.vchip .sym { width: 14px; height: 14px; }
.film:is([data-phase="staged"], [data-phase="saved"], [data-phase="static"]) .vchip { opacity: 1; transform: none; }
.film[data-phase="staged"] .vchip { transition-delay: calc(.15s + var(--i) * .12s); }
.film[data-phase="rest"] :is(.vtext, .vchips) { opacity: 0; }
.film[data-phase="saved"] .vcard { opacity: .6; }

/* where the six kinds of entry go once saved */
.dests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dest {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255,255,255,.5); opacity: .6; transition: opacity .4s ease, transform .4s ease, background-color .4s ease;
}
.dest strong { font-size: 14px; line-height: 1.2; }
.dest > span:not(.dest-icon) { font-size: 12px; line-height: 1.25; color: var(--ink-2); }
.dest-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bg); color: var(--fg); }
.dest-icon .sym { width: 15px; height: 15px; }
.dest-check {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--teal-deep); color: #fff; opacity: 0; transition: opacity .3s ease;
}
.dest-check .sym { width: 10px; height: 10px; }
.film:is([data-phase="saved"], [data-phase="static"]) .dest { opacity: 1; background: #fff; transform: translateY(-4px); }
.film:is([data-phase="saved"], [data-phase="static"]) .dest-check { opacity: 1; }
.film[data-phase="saved"] :is(.dest, .dest-check) { transition-delay: calc(.25s + var(--i) * .14s); }

/* One wiggle for every icon row on the page: the hero's five, the Plus
   list and the privacy notes. Each icon runs a little out of step with the
   one before it. */
.hero-icons .sym, .plus-rows .sym, .privacy .sym {
  transform-origin: 50% 70%; animation: wiggle 3.6s ease-in-out infinite;
}
:is(.hero-icons .sym, .plus-rows li, .privacy > div):nth-child(1) { --wd: -0.2s; --wt: 3.6s; }
:is(.hero-icons .sym, .plus-rows li, .privacy > div):nth-child(2) { --wd: -1.1s; --wt: 3.9s; }
:is(.hero-icons .sym, .plus-rows li, .privacy > div):nth-child(3) { --wd: -2.3s; --wt: 3.5s; }
:is(.hero-icons .sym, .plus-rows li, .privacy > div):nth-child(4) { --wd: -0.7s; --wt: 4.1s; }
:is(.hero-icons .sym, .plus-rows li, .privacy > div):nth-child(5) { --wd: -1.7s; --wt: 3.7s; }
.hero-icons .sym, .plus-rows .sym, .privacy .sym { animation-delay: var(--wd, 0s); animation-duration: var(--wt, 3.6s); }
@keyframes wiggle {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  25%      { transform: rotate(0deg) translateY(-1.5px); }
  50%      { transform: rotate(8deg) translateY(0); }
  75%      { transform: rotate(0deg) translateY(-1.5px); }
}

@keyframes vtap { 0% { transform: scale(.8); opacity: 0; } 15% { opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes vpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes vspin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- Pricing -- */

.section { padding-top: 110px; scroll-margin-top: 84px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.plan { display: flex; flex-direction: column; min-height: 500px; padding: 36px 40px; border-radius: 28px; }
.plan--free { background: #fff; box-shadow: var(--shadow-card); }
.plan--plus { background: var(--tint-mint); }
.plan-title { font-family: var(--brand); font-weight: 800; font-size: 1.875rem; letter-spacing: -0.01em; }
.plan-sub { margin-top: 6px; color: var(--ink-2); }
.plan-rows { margin-top: 26px; display: grid; gap: 13px; }
.plan-rows li { display: flex; gap: 12px; align-items: flex-start; }
.plan-rows .sym { width: 15px; height: 15px; margin-top: 4px; color: var(--teal); }
.plus-rows { margin-top: 26px; display: grid; gap: 16px; }
.plus-rows li { display: flex; gap: 14px; align-items: flex-start; }
.plus-rows .sym { width: 22px; height: 22px; margin-top: 2px; }
.plus-rows strong { display: block; }
.plus-rows div span { display: block; font-size: 0.94rem; color: var(--ink-2); }
.plan-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-price { font-family: var(--brand); font-weight: 800; font-size: 2.125rem; letter-spacing: -0.02em; }
.plan-price small { margin-left: 6px; font-family: var(--sans); font-weight: 400; font-size: 0.94rem; letter-spacing: 0; color: var(--ink-2); }
.plans-note { max-width: 82ch; margin: 22px auto 0; }

/* Billing: yearly leads, with the saving spelled out against monthly. */
.plan-foot--plus { display: grid; gap: 16px; justify-content: stretch; }
.plan-foot--plus .btn { justify-self: start; }
.bill { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.bill-opt { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(30,27,42,.12); }
.bill-opt--year { background: #fff; border: 2px solid var(--teal); box-shadow: 0 1px 2px rgba(30,27,42,.05), 0 10px 26px rgba(42,139,134,.16); }
.bill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.94rem; }
.bill-opt:not(.bill-opt--year) .bill-top { color: var(--ink-2); }
.save-tile { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--teal-deep); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.bill-price { font-family: var(--brand); font-weight: 800; font-size: 2.125rem; line-height: 1.1; letter-spacing: -0.02em; }
.bill-opt:not(.bill-opt--year) .bill-price { font-size: 1.5rem; color: var(--ink-2); margin-top: 6px; }
.bill-price small { margin-left: 6px; font-family: var(--sans); font-weight: 500; font-size: 0.94rem; letter-spacing: 0; color: var(--ink-2); }
.bill-note { font-size: 0.875rem; color: var(--ink-2); }
.bill-opt--year .bill-note { color: var(--teal-deep); font-weight: 600; }
.bill-compare { font-size: 0.94rem; color: var(--ink-2); }
.bill-compare s { color: var(--ink-3); }
.bill-compare strong { color: var(--ink); }

/* "Plus" in a slow teal shimmer, as the app's paywall draws it. */
.flow {
  background: linear-gradient(100deg, var(--teal) 0%, #86BFBC 25%, var(--teal) 50%, #86BFBC 75%, var(--teal) 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 5.7s ease-in-out infinite alternate;
}
@keyframes flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .flow { background: none; color: var(--teal-deep); } }

/* --------------------------------------------------------- Privacy -- */

.privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.privacy div { padding: 32px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); }
.privacy .sym { display: block; width: 26px; height: 26px; margin-bottom: 14px; color: var(--teal-deep); }
.privacy h3 { font-family: var(--brand); font-weight: 800; font-size: 1.25rem; margin-bottom: 8px; }
.privacy p { font-size: 0.95rem; color: var(--ink-2); }

/* -------------------------------------------------------- Download -- */

#download { padding-top: 100px; scroll-margin-top: 84px; }
.updates {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 580px); justify-content: space-between; align-items: center; gap: 48px;
  padding: 48px 56px; border-radius: var(--r-panel); background: var(--tint-peach);
}
.updates .h2 { font-size: clamp(1.8rem, 3vw, 2.25rem); }
.updates .lede { margin-top: 10px; font-size: 1.06rem; }
.download-cta { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.download-icon { width: 76px; height: 76px; flex: none; border-radius: 17px; box-shadow: 0 1px 2px rgba(30,27,42,.10), 0 10px 24px rgba(30,27,42,.14); }

/* ---------------------------------------------------------- Footer -- */

.footer { margin-top: 80px; padding: 56px 0 48px; border-top: 1px solid var(--line); }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-links div { display: grid; align-content: start; gap: 8px; font-size: 0.9rem; }
.footer-links strong { margin-bottom: 4px; font-size: 0.9rem; font-weight: 600; color: var(--ink-3); }
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--ink); }
.footer .fine { margin-top: 40px; max-width: 70ch; }
.attribution { margin-top: 18px; font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------ Scroll reactions -- */

/* The browser does all the scrolling; the page answers it (home.js).
   Words fade up once as they arrive (.rv, then .is-in). That runs on a
   clock, not the scroll, so a heading is never left half drawn wherever
   the reader stops; things that arrive together follow one another (--d). */
.rv:not(.is-in) { opacity: 0; }
.rv.is-in { animation: rv-up 1.3s cubic-bezier(.16,1,.3,1) var(--d, 0s) backwards; }
@keyframes rv-up { from { opacity: 0; translate: 0 28px; } }

/* Windows and panels rise and settle with the scroll itself: they start
   once their top edge is well inside the window (seen from the start, not
   half done by then) and settle as it passes 38% of the way down, and the
   compositor keeps them in step with the page. The hero gives way as it
   leaves: its words lift and fade, the panel draws in a little, and the
   phones rise in it, showing more of the screen. Without scroll timelines
   the panels fade up like the words (home.js keeps the same list). */
@supports (animation-timeline: view()) {
  .feature-media, .film, #pricing .plan, .updates {
    animation: rise linear both; animation-timeline: view(); animation-range: cover 14vh cover 62vh;
  }
  .film, .updates { animation-name: rise-panel; }
  #pricing .plan + .plan { animation-range: cover 20vh cover 68vh; }

  .hero { view-timeline: --hero block; }
  .hero-panel, .hero-copy, .hero-stage {
    animation: hero-panel linear both; animation-timeline: --hero; animation-range: exit-crossing 0% exit-crossing 100%;
  }
  .hero-panel { transform-origin: 50% 0; }
  .hero-copy { animation-name: hero-copy; animation-range: exit-crossing 0% exit-crossing 60%; }
  .hero-stage { animation-name: hero-phone; }
  .hero-stage--side { animation-name: hero-phone-side; }
}
@keyframes rise { 0% { opacity: 0; translate: 0 96px; scale: .94; } 55% { opacity: 1; } 100% { opacity: 1; translate: none; scale: none; } }
@keyframes rise-panel { 0% { opacity: 0; translate: 0 72px; scale: .92; } 50% { opacity: 1; } 100% { opacity: 1; translate: none; scale: none; } }
@keyframes hero-panel { to { scale: .94; } }
@keyframes hero-copy { to { opacity: 0; translate: 0 -56px; } }
@keyframes hero-phone { to { translate: 0 -14%; } }
@keyframes hero-phone-side { to { translate: 0 -7%; } }

/* ==========================================================================
   Narrower screens
   ========================================================================== */

@media (max-width: 1100px) {
  .feature { grid-template-columns: minmax(0, 380px) fit-content(520px); column-gap: 48px; }
  .feature--flip { grid-template-columns: fit-content(520px) minmax(0, 380px); }
  .feature--film { grid-template-columns: minmax(0, 1fr); }
  .film { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: 40px; }
  .film-copy { max-width: 560px; }
  .film-stage { max-width: 640px; }
  .updates { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .download-cta { justify-content: flex-start; }
}

/* Tablets: beside the words the windows shrank past reading, so each one
   goes under its words instead. */
@media (max-width: 1000px) {
  .feature, .feature--flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "media";
    row-gap: 32px;
  }
  .feature--film { grid-template-areas: "film"; }
  .feature-copy { max-width: 560px; }
  .feature-media { align-items: flex-start; }
  .swap { justify-items: start; }
  .swap-pane { align-items: flex-start; }
}

@media (max-width: 860px) {
  .plans, .privacy { grid-template-columns: minmax(0, 1fr); }
  .plan { min-height: 0; }
}

/* Phones: the window goes under the words at full width. */
@media (max-width: 760px) {
  .features { --feature-pad: 40px; padding-top: 24px; }
  .feature, .feature--flip { row-gap: 20px; }
  .film { padding: 26px 16px 20px; }
  .film-copy { padding-inline: 4px; }
  .vcard { padding: 18px 16px; }
  .vtitle { font-size: 1.1rem; white-space: nowrap; }
  .vbtn { white-space: nowrap; }
  .vtext { font-size: 1rem; }
  .dests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* About as tall as the first report card is at this width, so the panel
     does not end in a band of empty blue under it. */
  .report-stage { height: min(470px, calc((100vw - 72px) * 1.25 + 20px)); margin: -20px -16px 0; padding: 20px 16px 0; }
  .report-list button { min-height: 44px; }
  .section { padding-top: 72px; }
  .plans { margin-top: 32px; gap: 16px; }
  .plan { padding: 28px 22px; border-radius: 24px; }
  .plan-foot { flex-direction: column; align-items: stretch; gap: 18px; }
  .plan-foot .btn { width: 100%; }
  .bill { grid-template-columns: minmax(0, 1fr); }
  .privacy { gap: 16px; margin-top: 28px; }
  .privacy div { padding: 26px 22px; }
  #download { padding-top: 72px; }
  .updates { padding: 32px 22px; }
  .download-cta .btn { flex: 1; min-width: 0; }
  .footer { margin-top: 56px; padding: 48px 0 40px; }
  .footer .fine { margin-top: 28px; }
  /* Three stacked link columns make the footer longer than it needs to be. */
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; width: 100%; }
  .footer-grid { gap: 26px; }
}

@media (max-width: 380px) {
  .hero-panel { padding-inline: 18px; }
  .vchip { padding: 0 10px; font-size: 13px; }
}
/* The smallest phones: the card's title and its button only fit side by
   side once both give up a little room, and the panel some of its edge. */
@media (max-width: 340px) {
  .film { padding-inline: 10px; }
  .vcard { padding-inline: 12px; }
  .vhead { gap: 8px; }
  .vtitle { font-size: 1rem; }
  .vbtn { padding: 0 11px; font-size: 13px; }
  .vbtn--check { padding-left: 10px; }
}

/* ==========================================================================
   Pricing page (pricing.html): the home page's nav, plans and footer, with
   a short hero and the full lists of what each plan includes.
   ========================================================================== */

.skip-link { position: absolute; left: 20px; top: -100px; z-index: 60; padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); font-weight: 600; }
.skip-link:focus { top: 12px; }
.page-hero { padding: var(--hero-inset) var(--hero-inset) 0; }
.page-hero-panel {
  padding: 150px clamp(24px, 6.8vw, 96px) 64px; border-radius: 34px; background: var(--paper-2); text-align: center;
  box-shadow: 0 2px 4px rgba(30,27,42,.06), 0 18px 44px rgba(30,27,42,.10);
}
.page-title { font-family: var(--brand); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 17ch; margin: 0 auto; text-wrap: balance; }
.page-hero .lede { margin: 22px auto 0; }
.plans-page { padding-top: 72px; }
.plans-page .plans { margin-top: 0; }
.details { display: grid; gap: 24px; padding-top: 72px; }
.detail { padding: 40px 44px; border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line); scroll-margin-top: 96px; }
.detail--plus { background: var(--tint-mint); border-color: transparent; }
.detail--plain { background: var(--paper-2); border-color: transparent; }
.detail h2 { font-family: var(--brand); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.detail-list { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.detail-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.detail-list .sym { width: 15px; height: 15px; margin-top: 5px; color: var(--teal); }
.detail--plus .detail-list .sym { color: var(--teal-deep); }
.detail p { margin-top: 18px; max-width: 78ch; color: var(--ink-2); }
.detail p a { color: var(--teal-deep); font-weight: 700; }
.detail .more { display: inline-flex; margin-top: 22px; color: var(--teal-deep); font-weight: 700; }
.detail .more:hover, .detail p a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .page-hero-panel { padding: 116px 22px 40px; border-radius: 26px; }
  .plans-page, .details { padding-top: 44px; }
  .detail { padding: 28px 22px; border-radius: 24px; }
  .detail-list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Phones: a smaller scale
   At phone width the desktop sizes read as zoomed in: 18px copy, 26px
   headings and 44px rows filled the screen a few words at a time. Copy here
   is 16px, the headings step down with it, and the panels, lists and cards
   tighten to match.
   ========================================================================== */

@media (max-width: 760px) {
  /* a slimmer ribbon */
  .nav { padding: 6px 6px 6px 14px; }
  .brand { gap: 8px; font-size: 1.125rem; }
  .brand .mark { width: 24px; height: 24px; border-radius: 7px; }
  .nav .btn { min-height: 34px; }
  .nav-toggle { width: 36px; height: 36px; }

  .btn { min-height: 46px; font-size: 0.95rem; }
  .btn--lg { min-height: 48px; padding: 0 22px; }
  .h2 { font-size: 1.625rem; }
  .h3 { font-size: 1.375rem; }
  .lede { font-size: 1rem; }

  /* the hero */
  .hero-panel { --pw: min(272px, 68vw); padding: 100px 22px 0; }
  .hero-copy { gap: 16px; }
  .hero-icons { gap: 13px; }
  .hero-icons .sym { width: 22px; height: 22px; }
  .hero-line { font-size: 2.125rem; line-height: 1.06; }
  .hero-lede { font-size: 1rem; }
  .hero-cta { gap: 14px 20px; }
  .hero-stage { margin-top: 32px; }

  #pricing, #privacy { padding-block: 40px; }

  /* the features */
  .feature-tag { gap: 9px; font-size: 1rem; }
  .feature-icon { width: 32px; height: 32px; border-radius: 9px; }
  .feature-icon .sym { width: 17px; height: 17px; }
  .feature-tag .plus-tile { --s: 18px; }
  .film .feature-tag { margin-bottom: 14px; }
  .feature-copy { gap: 10px; }
  .feature-copy p:not(.feature-tag) { font-size: 1rem; line-height: 1.5; }
  .gc-head { min-height: 0; margin-bottom: 12px; }
  .gc-caption strong { font-size: 1rem; }
  .gc-caption strong + span { font-size: 0.8125rem; }
  .swap-btn { min-height: 40px; font-size: 0.875rem; }
  .plus-box { margin-top: 4px; padding: 16px 16px 18px; border-radius: 20px; }
  .feature-copy .plus-box p { font-size: 0.94rem; }
  .feature-copy .plus-box .plus-box-head { font-size: 1.0625rem; }
  .scan-modes > span { height: 32px; font-size: 0.8125rem; }

  /* the check-in and weekly report panels */
  .film { padding: 22px 16px 18px; row-gap: 24px; }
  .film-copy p:not(.feature-tag) { margin-top: 10px; font-size: 1rem; line-height: 1.5; }
  .film-steps { margin-top: 18px; gap: 6px; }
  .film-steps li { gap: 10px; font-size: 0.94rem; }
  .film-steps li span { width: 24px; height: 24px; font-size: 12px; }
  .vcard { padding: 16px 14px; border-radius: 20px; }
  .vhead { height: 32px; }
  .vtitle { font-size: 1rem; }
  .vbtn { height: 30px; padding: 0 12px; font-size: 13px; }
  .vlive { font-size: 13px; }
  .vbody { margin-top: 12px; }
  .vrest, .vtext { font-size: 0.94rem; }
  .vchips { gap: 6px; margin-top: 12px; }
  .vchip { gap: 6px; height: 28px; padding: 0 9px; font-size: 13px; }
  .dests { gap: 8px; }
  .dest { padding: 10px 12px; border-radius: 16px; }
  .dest strong { font-size: 13px; }
  .report-list { margin-top: 16px; gap: 2px; }
  .report-list button { min-height: 38px; gap: 10px; font-size: 0.94rem; }
  .report-list button > i { width: 9px; height: 9px; }

  /* pricing */
  .plans { margin-top: 26px; gap: 14px; }
  .plan { padding: 24px 20px; }
  .plan-title { font-size: 1.5rem; }
  .plan-sub { font-size: 0.94rem; }
  .plan-rows { margin-top: 18px; gap: 9px; }
  .plan-rows li { gap: 10px; font-size: 0.94rem; }
  .plan-rows .sym { width: 13px; height: 13px; margin-top: 4px; }
  .plus-rows { margin-top: 18px; gap: 12px; }
  .plus-rows li { gap: 12px; }
  .plus-rows .sym { width: 20px; height: 20px; }
  .plus-rows strong { font-size: 0.97rem; }
  .plus-rows div span { font-size: 0.875rem; }
  .plan-foot { padding-top: 22px; gap: 14px; }
  .plan-price, .bill-price { font-size: 1.75rem; }
  .bill-opt { padding: 14px 16px; border-radius: 18px; }
  .bill-compare { font-size: 0.875rem; }
  .plans-note { font-size: 0.8125rem; }

  /* privacy and download */
  .privacy { gap: 12px; margin-top: 24px; }
  .privacy div { padding: 22px 20px; border-radius: 20px; }
  .privacy .sym { width: 22px; height: 22px; margin-bottom: 10px; }
  .privacy h3 { margin-bottom: 6px; font-size: 1.1rem; }
  .privacy p { font-size: 0.92rem; }
  #download { padding-top: 60px; }
  .updates { gap: 22px; padding: 28px 20px; }
  .updates .h2 { font-size: 1.5rem; }
  .updates .lede { font-size: 0.95rem; }
  .download-cta { flex-wrap: wrap; gap: 16px; }
  .download-cta .btn { flex: 1 1 100%; }
  .download-icon { width: 60px; height: 60px; border-radius: 13.5px; }

  /* the pricing page */
  .page-hero-panel { padding-top: 100px; }
  .page-title { font-size: 2.125rem; }
  .detail h2 { font-size: 1.375rem; }
  .detail-list { margin-top: 18px; gap: 10px; }
  .detail-list li { gap: 10px; font-size: 0.94rem; }
  .detail-list .sym { width: 13px; height: 13px; margin-top: 5px; }
  .detail p { font-size: 0.94rem; }
}
@media (max-width: 380px) {
  .hero-panel { padding-inline: 18px; }
}
/* The smallest phones: the check-in card's title and its button only fit
   side by side once both give up a little room, and the panel some edge. */
@media (max-width: 359px) {
  .film { padding-inline: 10px; }
  .vcard { padding-inline: 12px; }
  .vhead { gap: 8px; }
  .vtitle { font-size: 0.92rem; }
  .vbtn { gap: 5px; padding: 0 10px; font-size: 12.5px; }
  .vbtn--check { padding-left: 9px; }
}

/* ------------------------------------- Widgets and Apple Watch (Plus) -- */
/* The words in the middle and the widgets and watch screens gathered round
   them: three columns held to the middle of the slot, the outer two set a
   little off the words' line so the pictures surround the words rather than
   sit in a table beside them. Each picture rises on its own with the scroll.
   Widget corners follow the system's: 23pt on a 170pt small, so 13.5% of a
   small, and of a medium's height and a large's side. */
.feature--glance { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glance"; }
.glance {
  grid-area: glance;
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 400px) minmax(0, 330px);
  justify-content: center; align-items: center;
  column-gap: clamp(28px, 4vw, 64px);
}
.glance-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.glance-col--a { translate: 0 40px; }
.glance-col--c { translate: 0 -40px; }
.glance-copy { grid-area: auto; align-items: center; text-align: center; padding-block: 12px; }
.glance-copy .feature-tag { justify-content: center; }
.glance-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: center; }
.glance-w { display: block; width: 100%; height: auto; box-shadow: var(--shadow-window); }
.glance-w--small { border-radius: 13.5%; }
.glance-w--medium { border-radius: 6.3% / 13.5%; }
.glance-w--large { border-radius: 6.3% / 6%; }
/* A watch drawn round its screen, Series 10 proportions: a thin dark
   aluminium rim, then the black glass border, which runs into the screen's
   own black so the display reads edge to edge as it does on the wrist. The
   screen is inset in the glass far enough that nothing at its edges meets
   the rounded corners. Digital Crown and side button on the right edge. */
.watch {
  position: relative; margin: 0 7px 0 0; padding: 1.5%;
  border-radius: 26.4% / 22.1%;
  background: linear-gradient(155deg, #5A5A61, #26262A 30%, #18181B 70%, #48484E);
  box-shadow: var(--shadow-window), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1.5px 1px rgba(255,255,255,.16);
}
.watch img {
  display: block; box-sizing: border-box; width: 100%; height: auto;
  padding: 4.6% 4.6% 3.4%; background: #000;
  border-radius: 25% / 20.8%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.watch::before, .watch::after { content: ""; position: absolute; }
.watch::after {
  right: -3.6%; top: 22%; width: 4.4%; height: 13%;
  border-radius: 2px 4px 4px 2px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #232327, #55555B 60%, #2E2E33);
}
.watch::before {
  right: -1.9%; top: 43%; width: 2.6%; height: 17%;
  border-radius: 1px 3px 3px 1px;
  background: linear-gradient(90deg, #1E1E22, #3E3E44);
}
/* The Lock Screen pair on a wallpaper of the hero's colours. */
.glance-lock {
  display: flex; align-items: center; justify-content: center; gap: 18px; align-self: center;
  padding: 22px 24px; border-radius: 26px;
  background: linear-gradient(135deg, #2B4F7A, #2E7E86 55%, #C88B5A);
  box-shadow: var(--shadow-window);
}
.glance-lock img { display: block; height: auto; }
.glance-lock img:first-child { width: 72px; }
.glance-lock img:last-child { width: 172px; }
@supports (animation-timeline: view()) {
  .glance-item { animation: rise linear both; animation-timeline: view(); animation-range: cover 4vh cover 44vh; }
}
@media (max-width: 1200px) {
  .glance { grid-template-columns: minmax(0, 290px) minmax(0, 360px) minmax(0, 290px); }
  .glance-pair { gap: 18px; }
  .glance-lock img:last-child { width: 150px; }
  .glance-lock img:first-child { width: 64px; }
}
/* Tablets and phones: the words first, then the pictures two or four to a
   row, the large and medium widgets and the Lock Screen across two. */
@media (max-width: 1000px) {
  .feature--glance { grid-template-areas: "glance"; }
  .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 720px; width: 100%; margin-inline: auto; }
  .glance-col, .glance-pair { display: contents; }
  .glance-copy { grid-column: 1 / -1; order: -1; justify-self: center; max-width: 560px; margin-bottom: 8px; }
  .glance-w--large, .glance-w--medium, .glance-lock { grid-column: span 2; }
  .watch { margin: 0 7px 0 0; }
}
@media (max-width: 760px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .glance-copy { text-align: left; align-items: flex-start; }
  .glance-copy .feature-tag { justify-content: flex-start; }
  .glance-lock { gap: 14px; padding: 18px; }
  .glance-lock img:first-child { width: 58px; }
  .glance-lock img:last-child { width: 136px; }
}

/* ==========================================================================
   Phones: the features as chapters
   home.js lists the features (.chapters on #features): a row for each, its
   symbol, name and a few words, and a tap opens it in place with a sentence
   and its window. A window with several panes is a row to swipe, the next
   pane showing at the edge, with a dot for each and the name of the pane on
   show under it. Wider screens never show any of it.
   ========================================================================== */
.chapter-title, .chapter-head, .chapter-line, .chapter-foot { display: none; }
@media (max-width: 760px) {
  .chapter-title { display: block; margin: 0; padding: 56px var(--gutter) 0; }
  .features.chapters { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
  .chapters .feature {
    display: block; min-height: 0; padding: 0;
    border-radius: 22px; background: #fff; border: 1px solid var(--line);
    transition: background-color .25s ease, border-color .25s ease;
  }
  .chapters .feature.is-open { padding-bottom: 18px; border-color: transparent; background: color-mix(in srgb, var(--c) 9%, #fff); }
  .chapters .feature:not(.is-open) > :not(.chapter-head) { display: none; }
  .chapters :is(.feature-copy, .film-copy, .gc-head, .dests) { display: none; }

  /* the row */
  .chapter-head { display: block; margin: 0; }
  .chapter-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px;
    border: 0; border-radius: 22px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .chapter-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
  .chapter-row .feature-icon { width: 40px; height: 40px; border-radius: 11px; transition: background-color .25s ease; }
  .chapter-row .feature-icon .sym { width: 20px; height: 20px; }
  .chapters .is-open .chapter-row .feature-icon { background: #fff; }
  .chapter-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .chapter-name {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--brand); font-weight: 800; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
  }
  .chapter-name .plus-tile { --s: 18px; }
  .chapter-sub { font-size: 0.875rem; font-weight: 400; line-height: 1.35; color: var(--ink-2); }
  .chapter-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
  .is-open .chapter-chev { transform: rotate(180deg); }
  .chapter-line { display: block; margin: 0 16px 16px; font-size: 0.97rem; line-height: 1.5; color: var(--ink-2); }

  /* its window: still, at the width of the row, the check-in card on its own */
  .chapters :is(.feature-media, .film, .glance-item) { animation: none; }
  .chapters .feature .rv { opacity: 1; animation: none; }
  .chapters .feature-media { display: block; padding: 0 16px; }
  .chapters .feature-media > img { display: block; width: 100% !important; height: auto; }
  .chapters .film { display: block; padding: 0 16px; border-radius: 0; background: none; }
  .chapters .film-stage { display: block; }
  .chapters .gc { width: auto; }
  /* the drawn Today's log at the width of a pane */
  .chapters .gc--food { --u: calc((100vw - 2 * var(--gutter) - 34px) * 0.86 / 370); }

  /* a row of panes to swipe */
  .chapters .chapter-strip {
    position: relative; display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px;
    height: auto; margin: 0 -16px; padding: 6px 16px 20px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
  }
  .chapters .chapter-strip::-webkit-scrollbar { display: none; }
  .chapters .chapter-slide {
    flex: 0 0 86%; width: 86%; max-width: none; margin: 0; scroll-snap-align: start;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .chapters .chapter-slide img { width: 100%; }
  .chapters .swap-pane { opacity: 1; visibility: visible; transform: none; transition: none; }
  .chapters .swap-pane--dose { gap: 12px; }
  .chapters #dose-media img { width: 100% !important; }
  /* the report's sections run long (the weight one most): the row is cut
     at about the first one's height and fades, as it does beside the words */
  .chapters .report-stage.chapter-strip { height: 420px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  /* widgets and the watch, each at about its own size */
  .chapters .glance.chapter-strip { align-items: center; max-width: none; margin: 0; }
  .chapters .glance-w--large { flex-basis: 80%; width: 80%; }
  .chapters .glance-w--small { flex-basis: 46%; width: 46%; }
  .chapters .glance .watch { flex-basis: 42%; width: 42%; margin-right: 7px; }
  .chapters .glance-lock { flex: none; width: auto; }
  .chapters .glance-lock img:first-child { width: 58px; }
  .chapters .glance-lock img:last-child { width: 136px; }

  /* under the row: a dot for each pane, and the name of the one on show */
  .chapter-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -10px; padding: 0 16px; text-align: center; }
  .chapter-dots { display: flex; }
  .chapter-dots button { position: relative; width: 16px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .chapter-dots button::before {
    content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 6px; border-radius: 3px;
    background: rgba(30,27,42,.18); transition: left .25s ease, right .25s ease, background-color .25s ease;
  }
  .chapter-dots button[aria-current="true"]::before { left: 1px; right: 1px; background: color-mix(in srgb, var(--c) 80%, var(--ink)); }
  .chapter-cap { display: flex; flex-direction: column; gap: 1px; font-size: 0.875rem; line-height: 1.35; color: var(--ink-2); }
  .chapter-cap strong { font-family: var(--brand); font-weight: 800; font-size: 0.97rem; color: var(--ink); }
}