/*
  Snacked home page
  =================
  Page asset: only index.html loads this file, after site.css, and every
  length in it is a token from site.css (or a share of a box, like a
  device's own width). Motion rules as on Droppy: transform and opacity
  only, no backdrop-filter on anything that moves or sits over a film, and
  continuous loops park (.is-off) while their section is away.

  Every picture on this page is the real app: captures and recordings from
  the harness in Apple's own bezels, the widgets drawn by their own views,
  and pieces cut from those captures for the bento tiles.
*/

:root {
  /* Tile heights: three steps, the same everywhere. */
  --tile-h: 460px;
  --tile-h-tall: 520px;
  --tile-h-short: 340px;
  /* Two kinds of app piece, each with one rule. A screen cut from a
     capture melts away at its sides, its top and towards the caption; a
     cut-out piece (a card, a chip, a widget, a device) floats whole. */
  --tile-fade: linear-gradient(180deg, #000 52%, transparent 92%);
  --tile-fade-x: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  --tile-fade-y: linear-gradient(180deg, transparent 0%, #000 12%, #000 52%, transparent 92%);
  --tile-shade: rgb(6 12 8);
  --device-feature: clamp(250px, 26vw, 330px);
  --device-phone: min(68vw, 310px);
}
@media (max-width: 700px) {
  :root { --tile-h: 420px; --tile-h-tall: 480px; --tile-h-short: 300px; }
}

.macro-word--protein { color: var(--protein); }
.macro-word--carbs { color: var(--carbs); }
.macro-word--fat { color: var(--fat); }

/* ====================================================================== */
/* Hero                                                                    */
/* ====================================================================== */

.hero { padding-top: var(--hero-start); padding-bottom: 0; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; }
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--stack-gap);
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: var(--track-ui);
  color: var(--text-1);
}
.hero__kicker img { width: var(--s-7); height: var(--s-7); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-bottom: var(--s-6);
  text-wrap: balance;
}
.hero__subtitle {
  max-width: 34em;
  margin-bottom: var(--stack-gap);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-3);
  text-wrap: pretty;
}
.hero__note { margin-top: var(--s-5); font-size: var(--fs-small); line-height: var(--lh-body); font-weight: 600; color: var(--text-4); text-wrap: balance; }

/* Three real captures in Apple's bezel, the timeline in front. Each slot
   carries the load reveal; the device inside carries the scroll drift
   (home.js), so the two transforms never meet. */
.hero__stage {
  --cw: clamp(210px, 24vw, 310px);
  --sw: calc(var(--cw) * 0.84);
  position: relative;
  height: calc(var(--cw) * 1.62);
  margin-top: var(--content-gap);
  pointer-events: none;
}
.hero__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 46%;
  background: linear-gradient(180deg, transparent, var(--page) 92%);
  z-index: 4;
}
.hero__slot { position: absolute; top: 0; width: var(--sw); left: calc(50% - var(--sw) / 2); }
.hero__slot .device { --device-w: 100%; width: 100%; will-change: transform; }
.hero__slot--center { width: var(--cw); left: calc(50% - var(--cw) / 2); z-index: 3; }
.hero__slot--left { top: calc(var(--cw) * 0.2); left: calc(50% - var(--sw) / 2 - var(--cw) * 0.86); z-index: 2; }
.hero__slot--right { top: calc(var(--cw) * 0.2); left: calc(50% - var(--sw) / 2 + var(--cw) * 0.86); z-index: 2; }
.hero__slot--left .device__screen::after,
.hero__slot--right .device__screen::after { content: ""; position: absolute; inset: 0; background: rgb(4 7 5 / 0.3); }
.hero .reveal[data-reveal-on-load].hero__slot { transform: translateY(var(--s-9)); transition-duration: 700ms, 1000ms; }
.hero .reveal.is-visible.hero__slot { transform: none; }
@media (max-width: 600px) {
  .hero__stage { --cw: 54vw; --sw: 44vw; height: calc(var(--cw) * 1.72); }
  .hero__slot--left { left: calc(50% - var(--sw) / 2 - var(--cw) * 0.8); }
  .hero__slot--right { left: calc(50% - var(--sw) / 2 + var(--cw) * 0.8); }
}

/* ====================================================================== */
/* Feature sections: copy beside a real recording                          */
/* ====================================================================== */

.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--split-gap);
}
.feature__grid--flip { grid-template-columns: auto minmax(0, 1fr); }
.feature__grid--flip .feature__media { order: -1; }
.feature__media { display: flex; flex-direction: column; align-items: center; }
.device--feature { --device-w: var(--device-feature); }

/* Points: titled lines between hairlines, no icons. */
.points { display: grid; margin-top: var(--stack-gap); max-width: 560px; }
.point { padding-block: var(--row-gap); border-top: 1px solid var(--hairline); }
.point:last-child { border-bottom: 1px solid var(--hairline); }
.point__title { font-size: var(--fs-read); font-weight: 700; letter-spacing: var(--track-ui); line-height: var(--lh-h3); margin-bottom: var(--s-1); }
.point p, .step p { color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); }

.steps { display: grid; gap: var(--row-gap); margin-top: var(--stack-gap); }
.step { display: grid; grid-template-columns: var(--icon-lg) minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.step img { width: var(--icon-lg); height: var(--icon-lg); }

@media (max-width: 900px) {
  .feature__grid, .feature__grid--flip { grid-template-columns: minmax(0, 1fr); }
  .feature__grid--flip .feature__media { order: 0; }
  .feature__copy { max-width: 640px; }
  .device--feature { --device-w: var(--device-phone); }
}

/* ====================================================================== */
/* Or just say it: Droppy's word scroll                                    */
/* ====================================================================== */

/* Static by default (no script, Reduce Motion): the words are lit and the
   recording follows. home.js adds .ws-ready, and on a screen tall and wide
   enough .ws-pin, which pins the stage for three screens: the words light
   up one by one like a live transcript, then hand over to the recording. */
.ws { position: relative; padding-block: var(--section-pad); }
.ws__copy { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--gutter); }
.ws__text {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  color: var(--text-1);
  text-wrap: balance;
}
.ws__hint { margin-top: var(--stack-gap); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; color: var(--text-3); }
.ws__demo { margin-top: var(--section-pad); }
.ws__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--split-gap); }
.ws__media { display: flex; flex-direction: column; align-items: center; }
.device--ws { --device-w: var(--device-feature); }
.lang-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--stack-gap); max-width: 34em; }
.lang-chips li {
  display: inline-flex;
  align-items: center;
  height: var(--s-8);
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  background: var(--chip);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  color: var(--text-2);
}

.ws.ws-ready .ws__text { color: var(--dim-word); }
.ws__text .w { position: relative; display: inline-block; white-space: pre; }
.ws__text .w-lit { position: absolute; inset: 0; color: var(--text-1); opacity: 0; transition: opacity 220ms linear; }
.ws__text .w.is-lit .w-lit { opacity: 1; }
.ws__text .w--protein .w-lit { color: var(--protein); }
.ws__text .w--carbs .w-lit { color: var(--carbs); }
.ws__text .w--fat .w-lit { color: var(--fat); }
.ws:not(.ws-ready) .ws__text .w-lit { opacity: 1; }

.ws.ws-pin { height: 330vh; padding: 0; }
.ws.ws-pin .ws__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --ws-copy: 1; --ws-demo: 0; }
.ws.ws-pin .ws__copy {
  position: absolute;
  inset: 0;
  justify-content: center;
  opacity: var(--ws-copy);
  transform: scale(calc(0.94 + 0.06 * var(--ws-copy)));
  will-change: transform, opacity;
}
.ws.ws-pin .ws__demo {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-safe-top) + var(--site-nav-height));
  opacity: var(--ws-demo);
  transform: translateY(calc((1 - var(--ws-demo)) * var(--s-9)));
  pointer-events: none;
  will-change: transform, opacity;
}
.ws.ws-pin .ws__demo.is-open { pointer-events: auto; }
.ws.ws-pin .device--ws { --device-w: clamp(210px, calc((100svh - var(--site-nav-height) - var(--section-pad)) / 2.09), 310px); }
@media (max-width: 900px) {
  .ws__grid { grid-template-columns: minmax(0, 1fr); }
  .ws__demo-copy { max-width: 640px; }
  .device--ws { --device-w: var(--device-phone); }
}

/* ====================================================================== */
/* Bento tiles, in the Droppy manner                                       */
/*                                                                         */
/* Every tile has the same inner padding (--card-pad): the app piece starts */
/* that far from the top and never comes closer than that to a side, and   */
/* the title and its one line sit that far from the left and the bottom.   */
/* Every piece melts away towards the caption with the same fade. Tiles    */
/* stay dark in both appearances: the pieces in them are the dark app.     */
/* ====================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.tile {
  --h: var(--tile-h);
  --piece: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--h);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-card);
  background: radial-gradient(90% 70% at 70% 10%, #102618 0%, #08100a 70%);
  color-scheme: dark;
}
/* An app piece, centred, a card-pad from the top and from both sides.
   On its own it fades towards the caption (a device or a tall cut-out
   that would run under it); --screen adds the side and top fade. */
.tile__piece {
  position: absolute;
  top: var(--card-pad);
  left: 50%;
  display: block;
  width: min(var(--piece), calc(100% - 2 * var(--card-pad)));
  height: auto;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: var(--tile-fade);
  mask-image: var(--tile-fade);
}
/* A screen cut from a capture melts at its sides and top too. */
.tile__piece--screen {
  -webkit-mask-image: var(--tile-fade-x), var(--tile-fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--tile-fade-x), var(--tile-fade-y);
  mask-composite: intersect;
}
.tile__piece--round { border-radius: var(--r-card) var(--r-card) 0 0; }
.tile__piece--whole { -webkit-mask-image: none; mask-image: none; }
/* Pieces that stack (a card and its chip, a card and its row). */
.tile__stack {
  position: absolute;
  top: var(--card-pad);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: var(--row-gap);
  width: min(var(--piece), calc(100% - 2 * var(--card-pad)));
  transform: translateX(-50%);
  pointer-events: none;
}
.tile__stack img { display: block; width: 100%; height: auto; user-select: none; }
.tile__stack .tile__fade-x { -webkit-mask-image: var(--tile-fade-x); mask-image: var(--tile-fade-x); }
.tile__cap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: calc(var(--card-pad) * 3) var(--card-pad) var(--card-pad);
  background: linear-gradient(180deg, rgb(6 12 8 / 0) 0%, rgb(6 12 8 / 0.76) 50%, rgb(6 12 8 / 0.92) 100%);
  pointer-events: none;
}
.tile__cap strong { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--track-ui); line-height: var(--lh-h3); color: #ffffff; }
.tile__cap span { max-width: 30em; font-size: var(--fs-body); line-height: var(--lh-body); color: #b6c5bb; }

/* Every ingredient, counted: the analysing screen. */
.tile--analysing { grid-column: span 7; --h: var(--tile-h-tall); --piece: 400px; }
/* The real product: the barcode card with its chip over it. */
.tile--scan { grid-column: span 5; --h: var(--tile-h-tall); --piece: 400px; background: radial-gradient(90% 80% at 50% 0%, #17402a 0%, #0b1c12 55%, #070e09 100%); }
.tile--scan .tile__stack img:first-child { width: 52%; }
.tile--scan .tile__stack img:last-child { margin-top: calc(-1 * var(--s-10)); }
/* Portions in one tap: the macro card and the portion chips. */
.tile--portions { grid-column: span 5; --piece: 400px; }
/* Every meal, in detail: the meal's own screen. */
.tile--detail { grid-column: span 7; --piece: 360px; }
/* Ready for iPhone Duo: Apple's own Duo bezel with the real captures. */
.tile--duo { grid-column: span 12; --h: var(--tile-h-tall); background: radial-gradient(70% 90% at 70% 20%, #12301d 0%, #08100a 70%); }
.tile__duo {
  position: absolute;
  top: var(--card-pad);
  display: block;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: var(--tile-fade);
  mask-image: var(--tile-fade);
}
.tile__duo--front { z-index: 1; right: calc(var(--card-pad) * 3); width: min(34%, 360px); }
.tile__duo--back { z-index: 0; right: calc(var(--card-pad) * 3 + min(34%, 360px) * 0.6); width: min(30%, 316px); top: calc(var(--card-pad) * 2.5); opacity: 0.5; }
/* Goals that fit you: the Me sheet. */
.tile--me { grid-column: span 6; --piece: 400px; }
/* Meet Snacked: the mascot itself, alive, centred in the open area. */
.tile--mascot { grid-column: span 6; background: radial-gradient(60% 55% at 50% 40%, #1d4a2e 0%, #0d2416 55%, #08100a 100%); }
.tile__stage { flex: 1 1 auto; display: grid; place-items: center; padding: var(--card-pad) var(--card-pad) 0; }
.tile--mascot .mascot { --mascot: clamp(140px, 16vw, 200px); }
.tile--mascot .tile__cap { background: none; padding-top: var(--card-pad); }
/* 21 languages: the widget's own question in every language Snacked ships. */
.tile--langs { grid-column: span 7; }
.marquee { position: absolute; top: var(--card-pad); left: 0; right: 0; display: grid; gap: var(--s-3); }
.marquee__row {
  overflow: hidden;
  -webkit-mask-image: var(--tile-fade-x);
  mask-image: var(--tile-fade-x);
}
.marquee__track { display: flex; gap: var(--s-3); width: max-content; animation: marquee 56s linear infinite; will-change: transform; }
.marquee__row--back .marquee__track { animation-direction: reverse; animation-duration: 64s; }
.marquee__row--slow .marquee__track { animation-duration: 80s; }
.marquee.is-off .marquee__track { animation-play-state: paused; }
.marquee span {
  display: inline-flex;
  align-items: center;
  height: var(--control-sm);
  padding: 0 var(--s-5);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.08);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1;
  color: #dbe6de;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(calc(-50% - var(--s-3) / 2)); } }
/* Liquid Glass: the camera card with its glass context field. */
.tile--camera { grid-column: span 5; --piece: 360px; }

/* Widget tiles. */
.bento--widgets { margin-top: var(--grid-gap); }
.tile--log, .tile--lock, .tile--light { grid-column: span 4; --h: var(--tile-h-short); --piece: 420px; }
.tile--log { background: linear-gradient(180deg, #172129, #0c1310); }
.tile--lock { background: linear-gradient(180deg, #162330, #0b1110); }
.tile--light { background: linear-gradient(180deg, #f1f6ef, #dce9d8); color-scheme: light; }
.tile--light .tile__pair { position: absolute; top: var(--card-pad); left: var(--card-pad); right: var(--card-pad); display: grid; grid-template-columns: 0.93fr 2fr; gap: var(--s-3); align-items: start; }
.tile--light .tile__pair img { width: 100%; height: auto; }
.tile--light .tile__cap { background: linear-gradient(180deg, rgb(225 236 221 / 0) 0%, rgb(225 236 221 / 0.86) 50%, rgb(222 234 218 / 0.96) 100%); }
.tile--light .tile__cap strong { color: #0f2a1b; }
.tile--light .tile__cap span { color: #45594c; }

@media (max-width: 1060px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--analysing, .tile--scan, .tile--portions, .tile--detail, .tile--me, .tile--mascot { grid-column: span 3; }
  .tile--duo, .tile--langs, .tile--camera, .tile--log { grid-column: span 6; }
  .tile--lock, .tile--light { grid-column: span 3; }
  .tile__duo--front { width: min(40%, 330px); right: calc(var(--card-pad) * 2); }
  .tile__duo--back { width: min(35%, 290px); right: calc(var(--card-pad) * 2 + min(40%, 330px) * 0.6); }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > .tile { grid-column: 1 / -1; }
  .tile--duo { --h: var(--tile-h-tall); }
  .tile--langs { --h: var(--tile-h-short); }
  .tile__duo--front { right: 50%; width: min(70%, 330px); transform: translateX(50%); }
  .tile__duo--back { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--card-pad); }
  .marquee__row { -webkit-mask-image: none; mask-image: none; }
  .marquee__row--back, .marquee__row--slow { display: none; }
}

/* ====================================================================== */
/* Widgets: the real renders on a Home Screen                              */
/* ====================================================================== */

.wall {
  padding: calc(var(--card-pad) * 1.5);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, #172129 0%, #0e1512 54%, #1b1611 100%);
}
.wall__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-6);
  max-width: 860px;
  margin-inline: auto;
}
.wimg { width: 100%; height: auto; }
.wimg--large { grid-column: 1; grid-row: 1 / span 2; }
.wall__right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.wall__smalls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 640px) {
  .wall__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .wall__right, .wall__smalls { gap: var(--s-4); }
  .wimg--large, .wall__right { grid-column: 1; grid-row: auto; }
}

/* ====================================================================== */
/* Privacy                                                                  */
/* ====================================================================== */

.privacy__icon { display: block; width: var(--s-10); height: var(--s-10); margin: 0 auto var(--stack-gap); }
.privacy__icon img { width: 100%; height: 100%; }
.privacy__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.privacy .card { background: color-mix(in srgb, var(--card) 72%, transparent); }
.privacy__more { margin-top: var(--stack-gap); text-align: center; }
@media (max-width: 1000px) { .privacy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .privacy__grid { grid-template-columns: minmax(0, 1fr); } }

/* ====================================================================== */
/* Pricing                                                                  */
/* ====================================================================== */

.price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "plans trial" "list cta";
  gap: var(--s-8) var(--s-9);
  max-width: 1000px;
  margin-inline: auto;
  padding: calc(var(--card-pad) * 1.5);
  border-radius: var(--r-panel);
  background: radial-gradient(80% 60% at 50% 0%, var(--glow), transparent 70%), var(--card);
}
.price__plans { grid-area: plans; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; padding-top: var(--s-3); }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 0;
  border-radius: var(--r-card);
  background: var(--card-2);
  box-shadow: inset 0 0 0 2px transparent;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.plan:active { transform: scale(0.98); }
.plan.is-selected { background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); box-shadow: inset 0 0 0 2px var(--accent); }
.plan__badge {
  position: absolute;
  top: calc(-1 * var(--s-3));
  left: var(--s-5);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-fill);
  color: var(--accent-fill-ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: var(--lh-ui);
}
.plan__name { font-size: var(--fs-label); font-weight: 700; line-height: var(--lh-h3); color: var(--text-2); }
.plan__price { font-family: var(--font-display); font-size: var(--fs-price); font-weight: 600; letter-spacing: var(--track-display); color: var(--text-1); line-height: var(--lh-ui); }
.plan__price small { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.plan__note { font-size: var(--fs-caption); font-weight: 600; line-height: var(--lh-body); color: var(--text-3); }
.plan__check {
  position: absolute;
  top: var(--s-5);
  right: var(--s-4);
  display: grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--text-4);
  color: var(--accent-fill-ink);
  transition: background-color 200ms linear, box-shadow 200ms linear;
}
.plan__check .glyph { width: var(--s-3); height: var(--s-3); opacity: 0; transition: opacity 200ms linear; }
.plan.is-selected .plan__check { background: var(--accent-fill); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.plan.is-selected .plan__check .glyph { opacity: 1; }

/* The trial timeline. Each step draws the stretch of track from its own
   dot's centre to the next dot's centre, so the line always runs through
   the dots, starts at the first and ends at the last, at any width; the
   first stretch is green. A narrow column turns it vertical. */
.price__trial { grid-area: trial; container-type: inline-size; align-self: center; }
.trial {
  --dot: var(--s-4);
  --gap: var(--s-3);
  --track: color-mix(in srgb, var(--text-1) 16%, transparent);
  /* In the vertical form, the dot sits on the first line's centre. */
  --dot-offset: calc((var(--fs-label) * var(--lh-h3) - var(--dot)) / 2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.trial__step { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s-1); text-align: center; }
.trial__dot { position: relative; z-index: 1; width: var(--dot); height: var(--dot); margin-bottom: var(--s-3); border-radius: 50%; background: color-mix(in srgb, var(--text-1) 26%, var(--card)); box-shadow: 0 0 0 var(--s-1) var(--card); }
.trial__step.is-now .trial__dot { background: var(--accent-fill); }
.trial__step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--dot) / 2 - 1px);
  left: 50%;
  width: calc(100% + var(--gap));
  height: 2px;
  border-radius: 1px;
  background: var(--track);
}
.trial__step:first-child::after { background: var(--accent-fill); }
.trial__step b { font-size: var(--fs-label); font-weight: 700; line-height: var(--lh-h3); color: var(--text-1); }
.trial__step span:last-child { font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--text-3); }
@container (max-width: 380px) {
  .trial { grid-template-columns: minmax(0, 1fr); --gap: var(--s-5); }
  .trial__step { grid-template-columns: var(--dot) minmax(0, 1fr); justify-items: start; column-gap: var(--s-3); text-align: left; }
  .trial__dot { grid-row: 1 / span 2; margin: var(--dot-offset) 0 0; }
  .trial__step:not(:last-child)::after {
    top: calc(var(--dot-offset) + var(--dot) / 2);
    left: calc(var(--dot) / 2 - 1px);
    width: 2px;
    height: calc(100% + var(--gap));
  }
}

.price__list { grid-area: list; display: grid; gap: var(--row-gap); align-content: start; }
.price__list li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-h3); color: var(--text-2); }
.price__list .glyph { width: var(--icon-md); height: var(--icon-md); color: var(--accent); }
.price__cta { grid-area: cta; display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap); }
.price__fine { font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--text-4); }
@media (max-width: 820px) {
  .price { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plans" "trial" "list" "cta"; gap: var(--s-7); }
}
@media (max-width: 440px) {
  .price__plans { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* ====================================================================== */
/* Download: the mascot, alive, over the last question                      */
/* ====================================================================== */

.outro__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.outro .mascot { margin-bottom: var(--stack-gap); }
.outro__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); margin-bottom: var(--head-gap); }
.outro .actions { margin-top: var(--stack-gap); }