/* Refismart start page.
 *
 * Tokens mirror the app design system (Redesign 2) with one deliberate
 * difference: the light paper is warm (#F3EFE6), chosen 2026-10-10 over the
 * app's neutral white, so the white app screens and cards lift off it.
 * Every colour below the token blocks comes from a token; gold and rust only
 * ever mark pantry states, never decoration.
 */

@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f3efe6;
  --tile: #e8e2d5;
  --card: #ffffff;
  --thermal: #fcfbf7;
  --thermal-ink: #2b2b2b;
  --ink: #212121;
  --sub: #55524b;
  --line: #ddd6c6;
  --line-strong: #c4bba7;
  --bezel: #101010;
  --phone-edge: #48484a;
  --island: #000000;

  --olive: #5f7a32;
  --olive-ink: #4e6629;
  --olive-wash: #e6ead9;
  --on-olive: #ffffff;

  /* Pantry states, straight from the app's traffic light. */
  --gold: #c29a2e;
  --rust: #8f3b2e;
  --fresh-bg: #e9eedd;
  --fresh-ink: #4e6629;
  --soon-bg: #f4e9c8;
  --soon-ink: #6e5510;
  --gone-bg: #f1ddd8;
  --gone-ink: #8a3628;

  /* Olive used as paper: the band sections. Deep enough for body text. */
  --band: #4e6629;
  --band-ink: #f7f1e3;
  --band-sub: #dfe3cf;
  --band-line: rgba(247, 241, 227, 0.22);

  /* The dark privacy section. */
  --night: #1f1f1d;
  --night-ink: #e6e1d6;
  --night-sub: #aaa59a;
  --night-line: #3a3935;

  /* App icon, light variant. */
  --icon-bg: #5f7a32;
  --icon-b1: #f7f1e3;
  --icon-b2: #e0b13d;
  --icon-b3: #d4593a;

  /* Budget card and categories, measured from the app. The card's light end
     is a step darker than the app's #6e8c3e so the small labels on it reach
     4.5:1; the stat numbers are large text and keep the app's gold. */
  --bcard-a: #587230;
  --bcard-b: #4b6227;
  --bcard-ink: #ffffff;
  --bcard-sub: #eef0e0;
  --bcard-gold: #f0cf72;
  --chip-a: #e6c46e;
  --chip-b: #b8954a;
  --cat-1: #6f8f3a;
  --cat-2: #5f86a6;
  --cat-3: #c8613f;
  --cat-4: #d9a63c;
  --cat-5: #4f9a8f;
  --cat-6: #bdb5a4;

  --shadow-1: 0 1px 2px rgba(58, 48, 30, 0.08), 0 4px 12px rgba(58, 48, 30, 0.07);
  --shadow-2: 0 1px 3px rgba(58, 48, 30, 0.08), 0 14px 30px -6px rgba(58, 48, 30, 0.16);
  --shadow-phone: 0 2px 4px rgba(30, 24, 14, 0.12), 0 34px 60px -22px rgba(30, 24, 14, 0.42);
  --shadow-paper: 0 1px 2px rgba(58, 48, 30, 0.08), 0 22px 36px -20px rgba(58, 48, 30, 0.3);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-receipt: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --max: 1200px;
  --gutter: 16px;
  --section-y: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Hero stage, kept as variables for the tweak panel in phase 6. */
  --hero-title: clamp(3.5rem, 1.8rem + 6.2vw, 6rem);
  --stage-phone-w: 49%;
  --stage-phone-x: 44%;
  --stage-receipt-w: 37%;
  --stage-receipt-x: 6.5%;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191919;
    --tile: #222220;
    --card: #2a2a28;
    --thermal: #2d2b26;
    --thermal-ink: #d9d4c8;
    --ink: #e2ded4;
    --sub: #a4a097;
    --line: #2f2e2b;
    --line-strong: #45433e;
    --bezel: #000000;
    --phone-edge: #3a3a3c;
    --olive: #8fae55;
    --olive-ink: #a5c16f;
    --olive-wash: #283120;
    --on-olive: #191919;
    --gold: #d9b352;
    --rust: #c4634e;
    --fresh-bg: #2a3420;
    --fresh-ink: #a5c16f;
    --soon-bg: #3a3119;
    --soon-ink: #e2c26a;
    --gone-bg: #3d241f;
    --gone-ink: #e08a76;
    --band: #26321b;
    --band-ink: #e4ead6;
    --band-sub: #b9c3a6;
    --band-line: rgba(228, 234, 214, 0.16);
    --night: #0f0f0e;
    --night-ink: #e2ded4;
    --night-sub: #9a968c;
    --night-line: #2c2b28;
    --icon-bg: #212121;
    --icon-b1: #7d9c45;
    --icon-b2: #c29a2e;
    --icon-b3: #a8452a;
    --bcard-a: #52692e;
    --bcard-b: #3c511f;
    --bcard-sub: #e8ebd6;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.3), 0 14px 30px -6px rgba(0, 0, 0, 0.5);
    --shadow-phone: 0 2px 4px rgba(0, 0, 0, 0.4), 0 34px 60px -22px rgba(0, 0, 0, 0.8);
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 36px -20px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #191919;
  --tile: #222220;
  --card: #2a2a28;
  --thermal: #2d2b26;
  --thermal-ink: #d9d4c8;
  --ink: #e2ded4;
  --sub: #a4a097;
  --line: #2f2e2b;
  --line-strong: #45433e;
  --bezel: #000000;
  --phone-edge: #3a3a3c;
  --olive: #8fae55;
  --olive-ink: #a5c16f;
  --olive-wash: #283120;
  --on-olive: #191919;
  --gold: #d9b352;
  --rust: #c4634e;
  --fresh-bg: #2a3420;
  --fresh-ink: #a5c16f;
  --soon-bg: #3a3119;
  --soon-ink: #e2c26a;
  --gone-bg: #3d241f;
  --gone-ink: #e08a76;
  --band: #26321b;
  --band-ink: #e4ead6;
  --band-sub: #b9c3a6;
  --band-line: rgba(228, 234, 214, 0.16);
  --night: #0f0f0e;
  --night-ink: #e2ded4;
  --night-sub: #9a968c;
  --night-line: #2c2b28;
  --icon-bg: #212121;
  --icon-b1: #7d9c45;
  --icon-b2: #c29a2e;
  --icon-b3: #a8452a;
  --bcard-a: #52692e;
  --bcard-b: #3c511f;
  --bcard-sub: #e8ebd6;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.3), 0 14px 30px -6px rgba(0, 0, 0, 0.5);
  --shadow-phone: 0 2px 4px rgba(0, 0, 0, 0.4), 0 34px 60px -22px rgba(0, 0, 0, 0.8);
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 36px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) var(--paper);
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--olive);
  accent-color: var(--olive);
}

::selection {
  background: var(--olive);
  color: var(--on-olive);
}

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

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

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

a {
  color: var(--olive-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--on-olive);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The app's signature: Oswald title over a 2px ink line. */
.title {
  position: relative;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.6rem);
  padding-bottom: 0.32em;
  max-width: 18ch;
}

/* The ink line is a pseudo element so the motion layer can draw it. */
.title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform-origin: left;
}

.lead {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--sub);
  max-width: 34em;
}

.prose p + p {
  margin-top: 1em;
}

.prose {
  color: var(--sub);
  max-width: 34em;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 1.0625rem/1 var(--font-body);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.2s;
}

.btn-primary {
  background: var(--olive);
  color: var(--on-olive);
  box-shadow: var(--shadow-1);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.btn-quiet {
  border-color: var(--olive);
  color: var(--olive-ink);
}

.btn-quiet:hover {
  background: var(--olive-wash);
  text-decoration: none;
}

.btn-cream {
  background: var(--band-ink);
  color: var(--band);
  box-shadow: var(--shadow-1);
}

.btn-cream:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn svg {
  flex: none;
}

/* ---------- Header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

/* main.js sets .is-scrolled once the page has moved; without it the
   header simply never draws its line. */
.site-head.is-scrolled {
  border-bottom-color: var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  font: 400 1.5rem/1 var(--font-display);
}

.brand:hover {
  text-decoration: none;
}

.app-icon {
  flex: none;
  border-radius: 22.5%;
}

.app-icon .bg {
  fill: var(--icon-bg);
}

.app-icon .b1 {
  fill: var(--icon-b1);
}

.app-icon .b2 {
  fill: var(--icon-b2);
}

.app-icon .b3 {
  fill: var(--icon-b3);
}

.head-links {
  display: none;
  gap: 26px;
}

.head-links a,
.lang-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
}

.head-links a:hover,
.lang-link:hover {
  color: var(--olive-ink);
}

.head-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-link {
  padding: 8px 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--tile);
}

.theme-toggle .icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

.head-cta {
  display: none;
  min-height: 42px;
  padding: 0 20px;
  font-size: 0.98rem;
}

/* ---------- Phone frame ----------
   A current iPhone: a thin black bezel, a fine metal edge and the Dynamic
   Island. Every size inside is in container units of the phone itself, so
   the bezel is the same share of the phone wherever it stands. (Padding in
   percent would be a share of the surrounding box instead, and each phone
   on the page would get a different bezel.) */

.phone {
  position: relative;
  aspect-ratio: 430 / 932;
  border-radius: 14.5% / 6.7%;
  background: var(--bezel);
  box-shadow: 0 0 0 1.5px var(--phone-edge), var(--shadow-phone);
  container-type: inline-size;
}

.phone picture,
.phone img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The screen: 2.1% of the phone's width inside the edge on every side. It
   comes after the rule above on purpose: a width or height of 100% next to
   the inset would push the screen past the bezel on the right and bottom. */
.phone > picture,
.phone > .screen {
  position: absolute;
  inset: 2.1cqi;
  width: auto;
  height: auto;
}

.phone img {
  border-radius: 12.4cqi;
  object-fit: cover;
  object-position: top;
  background: var(--card);
}

/* Dynamic Island, sized and placed like the iPhone 17 Pro's. */
.phone::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 2.3%;
  left: 50%;
  width: 28.5%;
  aspect-ratio: 125 / 37;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--island);
  pointer-events: none;
}

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

.hero {
  padding: 28px 0 var(--section-y);
}

.hero-grid {
  display: grid;
  gap: 40px;
}

.hero h1 {
  font-size: var(--hero-title);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--olive);
}

.hero-rule {
  height: 2px;
  margin: 22px 0 22px;
  background: var(--ink);
  max-width: 34rem;
}

.hero .lead {
  max-width: 31rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-note {
  margin-top: 16px;
  font-size: 0.98rem;
  color: var(--sub);
  max-width: 31rem;
}

.stage {
  position: relative;
  aspect-ratio: 680 / 760;
  border-radius: 32px;
  background: var(--tile);
  overflow: clip;
  isolation: isolate;
}

.stage .phone {
  position: absolute;
  z-index: 2;
  left: var(--stage-phone-x);
  top: 7%;
  width: var(--stage-phone-w);
}

/* A supermarket receipt: thermal paper with a torn zigzag edge. */
.receipt {
  position: absolute;
  z-index: 1;
  left: var(--stage-receipt-x);
  top: -1.5%;
  width: var(--stage-receipt-w);
  padding: 7% 4.5% 9%;
  background: var(--thermal);
  color: var(--thermal-ink);
  font: 400 clamp(0.62rem, 0.4rem + 0.55vw, 0.86rem)/1.95 var(--font-receipt);
  transform: rotate(-3deg);
  transform-origin: top center;
  filter: drop-shadow(0 18px 22px rgba(40, 30, 14, 0.18));
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / 12px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / 12px 10px repeat-x;
}

.receipt p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.receipt .r-head {
  justify-content: center;
}

.receipt .r-rule {
  border-top: 1px dashed currentColor;
  opacity: 0.45;
  margin: 6px 0;
}

/* Lines that become chips fade on the paper: they have left for the phone. */
.receipt .r-flown {
  opacity: 0.45;
}

.chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.55em 0.85em;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  font-size: clamp(0.8rem, 0.6rem + 0.45vw, 1.02rem);
  white-space: nowrap;
}

.chip b {
  font-weight: 600;
}

.chip-1 {
  left: 25%;
  top: 24%;
  rotate: 5deg;
}

.chip-2 {
  left: 29%;
  top: 39%;
  rotate: -3deg;
}

.chip-3 {
  left: 33%;
  top: 54%;
  rotate: 2deg;
}

/* The phone screen: the screenshot plus the rows that land in it. Sizes
   inside are in container units, so they scale with the phone. */
.phone .screen {
  container-type: inline-size;
}

.land {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 15.5cqi;
  display: flex;
  align-items: center;
  gap: 3.4cqi;
  padding: 0 3.6cqi;
  border-radius: 3.6cqi;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0.4cqi 1.2cqi rgba(40, 30, 14, 0.12), 0 0 0 0.5cqi color-mix(in srgb, var(--olive) 55%, transparent);
  font-size: 3.9cqi;
  line-height: 1.25;
  opacity: 0;
  translate: 0 -50%;
  pointer-events: none;
}

/* Landing slots sit on the first three fridge rows of the pantry capture,
   measured from the icon rows (both languages line up since the counter
   tile reads "Läuft ab" / "Use soon" on one line). Recapturing the pantry
   screens means re-measuring these. */
.land-1 {
  top: 56.6%;
}

.land-2 {
  top: 65.5%;
}

.land-3 {
  top: 74.1%;
}

.land-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 9.2cqi;
  height: 9.2cqi;
  border-radius: 50%;
  background: var(--olive-wash);
  color: var(--olive-ink);
}

.land-icon svg {
  width: 55%;
  height: 55%;
}

.land-text,
.land-qty {
  display: grid;
}

.land-text {
  flex: 1;
  min-width: 0;
}

.land-text span,
.land-qty span {
  font-size: 3.2cqi;
  color: var(--sub);
}

.land.soon .land-text span {
  color: var(--soon-ink);
  font-weight: 600;
}

.land-qty {
  text-align: right;
}

.land b {
  font-weight: 700;
  white-space: nowrap;
}

/* The scanner's sweep over the receipt, run by the motion layer. */
.r-scan {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--olive);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--olive) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

.receipt p {
  transition: opacity 0.4s var(--ease-out);
}

/* ---------- Pantry state pills (the app's traffic light) ---------- */

.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.18em 0.7em;
  border-radius: 999px;
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.state-fresh {
  background: var(--fresh-bg);
  color: var(--fresh-ink);
}

.state-soon {
  background: var(--soon-bg);
  color: var(--soon-ink);
}

.state-gone {
  background: var(--gone-bg);
  color: var(--gone-ink);
}

.state-miss {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section-y) 0;
}

.section-tile {
  background: var(--tile);
}

.section-band {
  background: var(--band);
  color: var(--band-ink);
}

.section-band .prose,
.section-band .lead {
  color: var(--band-sub);
}

.section-band a:not(.btn) {
  color: var(--band-ink);
}

.section-night {
  background: var(--night);
  color: var(--night-ink);
}

.section-night .lead,
.section-night .prose {
  color: var(--night-sub);
}

.section-night a {
  color: var(--night-ink);
}

.section-head {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* ---------- Feature sections: one function, one phone ---------- */

.feature {
  display: grid;
  gap: 48px;
  align-items: center;
}

.feature-copy {
  display: grid;
  gap: 24px;
  align-content: start;
}

.feature-visual {
  position: relative;
  display: grid;
  justify-items: center;
}

.feature-visual .phone {
  width: min(78%, 340px);
}

.points {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  max-width: 34em;
}

.points li {
  position: relative;
  padding-left: 34px;
  color: var(--sub);
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--olive-wash);
}

/* The tick is a mask filled with the token, so it follows the theme. */
.points li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  background: var(--olive);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.section-band .points li {
  color: var(--band-sub);
}

.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 34em;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  font-size: 0.98rem;
  color: var(--sub);
}

.note-icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--olive-ink);
}

.tag {
  flex: none;
  display: inline-block;
  padding: 0.12em 0.6em;
  border-radius: 999px;
  background: var(--olive-wash);
  color: var(--olive-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Receipt section: the long receipt hangs behind the review screen. */
.scan-visual {
  justify-items: end;
  padding: 0 4% 0 0;
}

.scan-visual .receipt-long {
  left: 0;
  top: 6%;
  width: min(58%, 290px);
  font-size: clamp(0.66rem, 0.55rem + 0.3vw, 0.84rem);
  transform: rotate(-4deg);
}

.scan-visual .phone {
  position: relative;
  z-index: 2;
}

/* The traffic light: the three bars of the app icon, each a pantry state. */
.lights {
  display: grid;
  gap: 12px;
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
}

.lights li {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 1.5rem/1 var(--font-display);
}

.lights li::before {
  content: "";
  height: 22px;
  border-radius: 11px;
  flex: none;
}

.lights .l-fresh::before {
  width: 132px;
  background: var(--icon-b1);
}

.lights .l-soon::before {
  width: 92px;
  background: var(--icon-b2);
}

.lights .l-gone::before {
  width: 52px;
  background: var(--icon-b3);
}

/* Ingredient states legend in the recipe section. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
}

/* ---------- Planner: the week's reminders lean on the phone ---------- */

.section:has(.plan-visual) {
  overflow-x: clip;
}

.plan-visual {
  padding: 56px 0;
}

.push {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 8px;
  width: min(82%, 340px);
}

.push-when {
  justify-self: start;
  padding: 0.2em 0.75em;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sub);
}

.push-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-2);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
}

.push-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.push-text strong {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
}

.push-text small {
  flex: none;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--sub);
}

.push-1 {
  top: 6%;
  left: -2%;
  rotate: -5deg;
}

.push-2 {
  bottom: -2%;
  right: -3%;
  rotate: 4deg;
}

.push-2 .push-when {
  justify-self: end;
}

/* On a phone the tilted cards stay inside the 16px gutter. */
@media (max-width: 719px) {
  .push-1 {
    left: 6px;
  }

  .push-2 {
    right: 6px;
  }
}

/* ---------- More: tiles with a working detail each ---------- */

.bento {
  display: grid;
  gap: 16px;
}

.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-1);
}

.tile h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 1.55rem;
}

.tile > p,
.tile-text p {
  max-width: 30em;
  font-size: 0.98rem;
  color: var(--sub);
}

.tile-text {
  display: grid;
  gap: 8px;
}

.tile-olive {
  background: var(--band);
  color: var(--band-ink);
}

.tile-olive > p {
  color: var(--band-sub);
}

.tile-night {
  background: var(--night);
  color: var(--night-ink);
}

.tile-night > p {
  color: var(--night-sub);
}

/* Budget: the app's budget screen, fed by the Spar receipt from the hero.
   Card and category colours are measured from the app's budget capture. */
.tile-budget {
  display: grid;
  gap: 24px 36px;
  grid-template-areas: "text" "slip" "card" "where";
}

.tile-budget .tile-text {
  grid-area: text;
  align-self: start;
}

.bslip {
  grid-area: slip;
  justify-self: center;
  align-self: start;
  display: grid;
  gap: 1px;
  width: 196px;
  padding: 12px 13px 20px;
  background: var(--thermal);
  color: var(--thermal-ink);
  font: 0.66rem/1.5 var(--font-receipt);
  box-shadow: var(--shadow-paper);
  rotate: -3deg;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 9px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 9px 100%;
}

.bslip p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
}

.bslip .bslip-head {
  justify-content: center;
  margin-bottom: 4px;
  font-weight: 700;
}

.bslip .bslip-sum {
  margin-top: 5px;
  padding: 4px 3px 2px;
  border-top: 1px dashed currentColor;
  font-weight: 700;
  transition: background-color 0.3s;
}

.bslip .bslip-sum.is-hit {
  background: color-mix(in srgb, var(--olive) 24%, transparent);
}

.bfly {
  display: none;
}

.bcard {
  grid-area: card;
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--bcard-a), var(--bcard-b));
  color: var(--bcard-ink);
  box-shadow: var(--shadow-2);
}

.bcard-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.bcard-chip {
  position: relative;
  width: 40px;
  height: 30px;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 33%, rgba(80, 56, 10, 0.28) 33% 36%, transparent 36% 64%, rgba(80, 56, 10, 0.28) 64% 67%, transparent 67%),
    linear-gradient(transparent 46%, rgba(80, 56, 10, 0.28) 46% 54%, transparent 54%),
    linear-gradient(135deg, var(--chip-a), var(--chip-b));
  box-shadow: inset 0 0 0 1px rgba(80, 56, 10, 0.25);
}

.bcard-nfc {
  color: var(--bcard-sub);
}

.bcard-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font: 400 1.3rem/1 var(--font-display);
}

.bcard-brand .b1 {
  fill: var(--bcard-ink);
}

.bcard-brand .b2 {
  fill: var(--cat-4);
}

.bcard-brand .b3 {
  fill: var(--cat-3);
}

.bcard-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcard-sub);
}

.bcard-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.bcard-left b {
  font: 400 clamp(2.5rem, 2rem + 1.4vw, 3.1rem)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.bcard-left > span {
  color: var(--bcard-sub);
}

.bcard-bar {
  position: relative;
  display: block;
  height: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--bcard-ink) 45%, transparent);
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--bcard-ink) 14%, transparent) 4px 6px);
}

.bcard-used {
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  bottom: -1.5px;
  display: flex;
  gap: 2px;
  width: calc(var(--spent, 27.5) * 1% + 3px);
  padding: 2.5px;
  border-radius: 8px;
  background: var(--bcard-ink);
  transition: width 0.9s var(--ease-out);
}

.seg {
  flex: var(--a) 1 0;
  min-width: 3px;
  border-radius: 4px;
  transition: flex-grow 0.9s var(--ease-out);
}

.seg-1 {
  --a: 30.63;
  background: var(--cat-1);
}

.seg-2 {
  --a: 21.21;
  background: var(--cat-2);
}

.seg-3 {
  --a: 15.53;
  background: var(--cat-3);
}

.seg-4 {
  --a: 9.4;
  background: var(--cat-4);
}

.seg-5 {
  --a: 8.9;
  background: var(--cat-5);
}

.seg-6 {
  --a: 24.4;
  background: var(--cat-6);
}

.bcard-sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.92rem;
  color: var(--bcard-sub);
}

.bcard-sum b {
  font-weight: 700;
  color: var(--bcard-ink);
  font-variant-numeric: tabular-nums;
}

.bcard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 0;
}

.bcard-stats dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcard-sub);
}

.bcard-stats dd {
  margin: 3px 0 0;
  font: 400 1.5rem/1.1 var(--font-display);
}

.bcard-stats div:first-child dd {
  color: var(--bcard-gold);
}

.bwhere {
  grid-area: where;
  align-self: start;
}

.bwhere-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  font-size: 0.85rem;
  color: var(--sub);
}

.bwhere-head b {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

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

.bc {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 5.4em;
  align-items: center;
  gap: 5px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.bc-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--c);
}

.bc-name {
  font-weight: 600;
}

.bc-pct {
  font-size: 0.85rem;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}

.bc b {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bc-bar {
  grid-column: 2 / -1;
  display: block;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.bc-bar i {
  display: block;
  width: calc(var(--w) * 1%);
  height: 100%;
  border-radius: 3px;
  background: var(--c);
  transition: width 0.9s var(--ease-out);
}

.bc-1 {
  --c: var(--cat-1);
  --w: 100;
}

.bc-2 {
  --c: var(--cat-2);
  --w: 69.2;
}

.bc-3 {
  --c: var(--cat-3);
  --w: 50.7;
}

.bc-4 {
  --c: var(--cat-4);
  --w: 30.7;
}

.bc-5 {
  --c: var(--cat-5);
  --w: 29.1;
}

.bc-6 {
  --c: var(--cat-6);
  --w: 79.7;
}

@media (min-width: 720px) {
  .tile-budget {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas: "text card" "slip where";
  }

  .bslip {
    justify-self: start;
  }
}

@media (min-width: 1100px) {
  .tile-budget {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "text card where" "slip card where";
  }
}

/* Cooking mode: the current step, its timer running. */
.cook {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding: 18px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--band-ink) 9%, transparent);
}

.cook-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--band-sub);
}

.cook-dots {
  display: flex;
  gap: 5px;
}

.cook-dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--band-line);
  transition: width 0.4s var(--ease-out), background-color 0.4s;
}

.cook-dots i.is-on {
  width: 18px;
  background: var(--band-ink);
}

.cook-steps {
  display: grid;
}

.cook-step {
  grid-area: 1 / 1;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
}

.cook-step.is-on {
  opacity: 1;
  visibility: visible;
}

.cook-n {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--band-sub);
}

.cook-step p {
  font: 400 1.3rem/1.3 var(--font-display);
  color: var(--band-ink);
  max-width: 26ch;
}

.cook-timer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--band-line);
}

.cook-time {
  font: 400 2.6rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.cook-run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--band-sub);
}

.cook-run i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--band-ink);
}

/* Household: one list on two phones. */
.share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}

.share-dev {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: 16px;
  background: var(--paper);
}

.share-who {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
}

.share-list {
  font: 400 1.15rem/1.3 var(--font-display);
}

.share-dev ul {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.share-dev li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: color 0.3s;
}

.tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: transparent;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s, scale 0.3s var(--ease-out);
}

.share-dev li.is-done {
  color: var(--sub);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.share-dev li.is-done .tick {
  background: var(--olive);
  box-shadow: inset 0 0 0 1.5px var(--olive);
  color: var(--on-olive);
}

.share-sync {
  position: relative;
  height: 2px;
  margin: 0 4px;
  background: linear-gradient(90deg, var(--line-strong) 50%, transparent 0) 0 0 / 6px 2px repeat-x;
}

.share-sync i {
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0;
}

.share-what {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--sub);
}

.share-what li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 719px) {
  .share-what {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
  }

  .share-what li {
    justify-content: space-between;
  }
}

.toggle {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--line-strong);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-1);
}

.toggle.is-on {
  background: var(--olive);
}

.toggle.is-on::after {
  translate: 12px 0;
}

/* Servings: the amounts follow the number. */
.servings {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.servings-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.servings-row output {
  min-width: 1.4ch;
  text-align: center;
  font: 400 2.2rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.servings-row button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--olive-wash);
  color: var(--olive-ink);
  cursor: pointer;
  transition: background-color 0.2s, scale 0.15s;
}

.servings-row button:hover {
  background: color-mix(in srgb, var(--olive) 22%, var(--card));
}

.servings-row button:active {
  scale: 0.92;
}

.servings-row span {
  color: var(--sub);
  font-size: 0.95rem;
}

.amounts {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.amounts li {
  display: flex;
  justify-content: space-between;
}

.amounts b {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

.amounts b.is-new {
  color: var(--olive-ink);
}

/* Passing a recipe on: the PDF travels into the app. */
.pdf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 150px;
  margin-top: auto;
  padding-bottom: 26px;
}

.pdf-doc {
  position: relative;
  flex: none;
  display: grid;
  align-content: start;
  gap: 5px;
  width: 86px;
  height: 112px;
  padding: 10px 9px;
  border-radius: 6px;
  background: var(--thermal);
  color: var(--thermal-ink);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.6);
  transform-origin: center;
}

.pdf-title {
  margin-bottom: 3px;
  font: 600 0.52rem/1.2 var(--font-body);
}

.pdf-doc i {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--thermal-ink) 20%, transparent);
}

.pdf-doc i:last-of-type {
  width: 60%;
}

.pdf-tag {
  position: absolute;
  left: 9px;
  bottom: 8px;
  font: 700 0.62rem/1 var(--font-body);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--olive) 70%, var(--thermal-ink));
}

.pdf-path {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--night-sub) 50%, transparent 0) 0 0 / 10px 2px repeat-x;
  opacity: 0.5;
}

.pdf-target {
  flex: none;
  display: grid;
}

.pdf-done {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--night-ink) 12%, transparent);
  color: var(--night-ink);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Reminders: the morning notification on the lock screen. */
.lock {
  display: grid;
  justify-items: center;
  margin-top: auto;
  padding: 20px 12px 12px;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--olive) 35%, var(--night)), var(--night) 75%);
  color: var(--night-ink);
}

.lock-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--night-ink) 80%, transparent);
}

.lock-time {
  margin-bottom: 14px;
  font: 400 3.4rem/1 var(--font-display);
}

.lock .push-card {
  width: 100%;
  background: color-mix(in srgb, var(--night-ink) 14%, transparent);
  box-shadow: none;
  color: var(--night-ink);
  font-size: 0.86rem;
}

.lock .push-text small {
  color: color-mix(in srgb, var(--night-ink) 75%, transparent);
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .tile-budget {
    grid-column: 1 / -1;
  }

  .tile-cook,
  .tile-share {
    grid-column: span 3;
  }

  .tile-servings,
  .tile-pdf,
  .tile-remind {
    grid-column: span 2;
  }
}

/* Tablets: three small tiles in a row are too narrow. Servings and PDF
   share a row, the reminder gets its own with the lock screen beside the
   text; the budget's receipt follows its text instead of waiting below
   the card. */
@media (min-width: 720px) and (max-width: 1099px) {
  .tile-servings,
  .tile-pdf {
    grid-column: span 3;
  }

  .tile-remind {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 28px;
  }

  .tile-remind .lock {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .tile-budget {
    grid-template-areas: "text card" "slip card" "slip where";
  }
}

/* ---------- Privacy: where the data lives, drawn ---------- */

.privacy {
  display: grid;
  gap: 56px;
  align-items: center;
}

.facts {
  display: grid;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: grid;
  gap: 4px 28px;
  padding: 18px 0;
  border-top: 1px solid var(--night-line);
}

.facts h3 {
  font-size: 1.35rem;
}

.facts p {
  color: var(--night-sub);
}

.privacy-ads {
  margin-top: 28px;
  max-width: 44em;
  font-size: 0.95rem;
  color: var(--night-sub);
}

.vault {
  --v-accent: color-mix(in srgb, var(--olive) 65%, var(--night-ink));
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 400 / 440;
}

.vault-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vault-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--v-accent) 55%, var(--night));
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}

.vault-lines circle {
  fill: var(--v-accent);
}

.vault-phone {
  position: absolute;
  left: 2%;
  top: 6.5%;
  width: 40%;
  aspect-ratio: 430 / 932;
  padding: 4px;
  border-radius: 30px;
  background: var(--bezel);
  box-shadow: 0 0 0 1.5px var(--phone-edge), var(--shadow-phone);
}

.vault-phone::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  width: 29%;
  aspect-ratio: 125 / 37;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--island);
}

.vault-screen {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: 62px 10px 10px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.vault-lock {
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--olive-wash);
  color: var(--olive-ink);
}

.vault-receipt {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 9px 14px;
  overflow: hidden;
  background: var(--thermal);
  color: var(--thermal-ink);
  font: 0.56rem/1.3 var(--font-receipt);
  box-shadow: var(--shadow-1);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%;
}

.vault-receipt i {
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
}

.vault-receipt i:first-child {
  text-align: center;
  font-weight: 700;
}

.vault-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--olive);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--olive) 45%, transparent);
  opacity: 0;
}

.vault-ocr {
  font-size: 0.66rem;
  line-height: 1.25;
  text-align: center;
  color: var(--sub);
}

.vault-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vault-rows li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  font-size: 0.78rem;
  font-weight: 600;
}

.vault-rows svg {
  flex: none;
  color: var(--olive-ink);
}

.vault-node {
  position: absolute;
  left: 61%;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--night-ink) 7%, var(--night));
  box-shadow: inset 0 0 0 1px var(--night-line);
  color: var(--night-ink);
}

.vault-node svg {
  flex: none;
  color: var(--v-accent);
}

.vault-node b {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.vault-node small {
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--night-sub);
}

.vault-cloud {
  top: 31.8%;
  translate: 0 -50%;
}

.vault-server {
  top: 68.2%;
  translate: 0 -50%;
}

.vault-fan {
  display: none;
}

.vault-fan path {
  fill: none;
  stroke: color-mix(in srgb, var(--v-accent) 55%, var(--night));
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.vault-fan circle {
  fill: var(--v-accent);
}

/* Narrow screens: the phone in the middle, the two places side by side
   below it, and the same dashed lines as on the desktop fan out to them. */
@media (max-width: 719px) {
  .vault {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    aspect-ratio: auto;
  }

  .vault-lines {
    display: none;
  }

  .vault-phone {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(52%, 200px);
    height: auto;
  }

  .vault-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    translate: none;
    flex-direction: column;
    justify-content: start;
    gap: 6px;
    padding: 12px 6px;
    text-align: center;
  }

  .vault-node b {
    font-size: 0.82rem;
  }

  .vault-node small {
    font-size: 0.68rem;
  }

  .vault-fan {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: 56px;
    overflow: visible;
  }
}

@media (min-width: 720px) {
  .facts li {
    grid-template-columns: 10em 1fr;
  }
}

@media (min-width: 960px) {
  .privacy {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

/* ---------- Pricing: a receipt that costs nothing, a card for Pro ---------- */

.plans {
  display: grid;
  gap: 48px;
  align-items: center;
}

.plan-free {
  justify-self: center;
  display: grid;
  width: 100%;
  max-width: 440px;
  padding: 30px 28px 44px;
  background: var(--thermal);
  color: var(--thermal-ink);
  font: 0.86rem/1.5 var(--font-receipt);
  box-shadow: var(--shadow-paper);
  rotate: -1.5deg;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}

.rc-store {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.plan-free h3 {
  margin: 2px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed currentColor;
  text-align: center;
  font: 400 2.4rem/1 var(--font-display);
  color: var(--ink);
}

.rc-lines {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
}

.rc-lines li span:last-child {
  font-variant-numeric: tabular-nums;
}

.rc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed currentColor;
  font-weight: 700;
}

.rc-total span:last-child {
  font: 400 3.2rem/1 var(--font-display);
  color: var(--ink);
}

.rc-sub {
  margin-top: 6px;
  font-weight: 700;
  text-align: right;
}

.rc-foot {
  margin-top: 20px;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.74rem;
  opacity: 0.75;
}

.plan-pro {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bcard-a), var(--bcard-b));
  color: var(--bcard-ink);
  box-shadow: var(--shadow-phone);
  transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.pro-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pro-badge {
  padding: 0.15em 0.65em;
  border-radius: 999px;
  background: var(--band-ink);
  color: var(--bcard-b);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-pro h3 {
  font-size: 1.9rem;
}

.plan-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price {
  font: 400 clamp(3.2rem, 2.4rem + 2.6vw, 4.4rem)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.price-num {
  display: inline-block;
}

.price small {
  font: 400 1.05rem/1.2 var(--font-body);
  margin-left: 0.3em;
  color: var(--bcard-sub);
}

.plan-sub {
  color: var(--bcard-sub);
}

.plan-pro .points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
  max-width: none;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--bcard-ink) 22%, transparent);
}

.plan-pro .points li {
  color: var(--bcard-ink);
}

.plan-pro .points li::before {
  background: color-mix(in srgb, var(--bcard-ink) 18%, transparent);
}

.plan-pro .points li::after {
  background: var(--bcard-ink);
}

.plan-pro .fine {
  font-size: 0.9rem;
  color: var(--bcard-sub);
}

.bill {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bcard-ink) 16%, transparent);
}

.bill[hidden] {
  display: none;
}

.bill button {
  position: relative;
  z-index: 1;
  padding: 0.4em 0.95em;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 600 0.85rem/1.2 var(--font-body);
  color: var(--bcard-sub);
  cursor: pointer;
  transition: color 0.3s;
}

.bill button[aria-pressed="true"] {
  color: var(--bcard-b);
}

.bill button:focus-visible {
  outline: 2px solid var(--bcard-ink);
  outline-offset: 2px;
}

.bill-knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--bcard-ink);
  transition: translate 0.45s var(--ease-out);
}

.bill.is-year .bill-knob {
  translate: 100% 0;
}

.trial {
  display: inline-block;
  justify-self: start;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--bcard-ink);
  color: var(--bcard-b);
  font-weight: 600;
  font-size: 0.95rem;
}

@media (hover: hover) {
  .plan-pro:hover {
    translate: 0 -4px;
  }
}

@media (min-width: 960px) {
  .plans {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 5vw, 80px);
  }
}

/* ---------- Testers: the prepared mail, filled in and sent ---------- */

.tester {
  display: grid;
  gap: 56px;
  align-items: center;
}

.tester-copy {
  display: grid;
  gap: 28px;
}

.tester-copy .section-head {
  margin-bottom: 0;
}

.route {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.route li {
  position: relative;
  padding: 0 0 24px 54px;
  counter-increment: step;
}

.route li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--on-olive);
  font: 400 1.15rem/1 var(--font-display);
}

.route li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(var(--olive) 50%, transparent 0) 0 0 / 2px 8px repeat-y;
  opacity: 0.55;
}

.route h3 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.route p {
  max-width: 36em;
  color: var(--sub);
}

.signup {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.signup p {
  max-width: 40em;
  font-size: 0.95rem;
  color: var(--sub);
}

.mail {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-phone);
  font-size: 0.92rem;
  rotate: 1.5deg;
}

.mail-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--tile) 70%, var(--card));
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sub);
}

.mail-dots {
  display: flex;
  gap: 6px;
}

.mail-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.mail-head {
  margin: 0;
  padding: 0 18px;
}

.mail-head div {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mail-head dt {
  min-width: 4.6em;
  color: var(--sub);
}

.mail-head dd {
  margin: 0;
  font-weight: 600;
}

.mail-body {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 200px;
  padding: 16px 18px 4px;
}

.mail-field span {
  color: var(--sub);
}

.mail-field b {
  font-weight: 600;
  color: var(--olive-ink);
}

.mail-field b.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--olive);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.mail-head,
.mail-body,
.mail-foot {
  transition: opacity 0.4s var(--ease-out);
}

.mail-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px 18px;
}

.mail-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: var(--olive);
  color: var(--on-olive);
  font-size: 0.88rem;
  font-weight: 600;
  transition: scale 0.18s, filter 0.18s;
}

.mail-send.is-press {
  scale: 0.93;
  filter: brightness(0.9);
}

.mail-sent {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--olive-wash);
  color: var(--olive-ink);
  font-weight: 600;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.4s var(--ease-out), translate 0.5s var(--ease-out);
}

.mail.is-sent .mail-sent {
  opacity: 1;
  translate: 0 0;
}

.mail.is-sent .mail-head,
.mail.is-sent .mail-body,
.mail.is-sent .mail-foot {
  opacity: 0.3;
}

@media (min-width: 960px) {
  .tester {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

/* ---------- FAQ ---------- */

.faq-wrap {
  display: grid;
  gap: 36px;
}

.faq-side p {
  max-width: 24em;
  margin-top: 22px;
  color: var(--sub);
}

.faq {
  border-top: 2px solid var(--ink);
}

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

.faq summary {
  position: relative;
  display: block;
  padding: 22px 56px 22px 0;
  cursor: pointer;
  list-style: none;
  font: 400 1.4rem/1.3 var(--font-display);
  background: radial-gradient(circle at calc(100% - 18px) 50%, var(--olive-wash) 17px, transparent 18px) no-repeat;
  transition: color 0.2s;
}

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

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--olive-ink);
  transition: transform 0.35s var(--ease-out);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:hover,
.faq details[open] summary {
  color: var(--olive-ink);
}

.faq details p {
  padding: 0 0 24px;
  color: var(--sub);
  max-width: 44em;
}

@media (min-width: 960px) {
  .faq-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .faq-side {
    position: sticky;
    top: 112px;
  }
}

/* ---------- Closing: the products drift around the promise ---------- */

.closing {
  position: relative;
  overflow: clip;
  text-align: center;
  padding: clamp(88px, 11vw, 150px) 0;
}

.closing::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: 120%;
  aspect-ratio: 2 / 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--olive) 55%, transparent), transparent);
  pointer-events: none;
}

.closing .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 22px;
}

.closing h1,
.closing h2 {
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  max-width: 14ch;
}

.closing p {
  color: var(--band-sub);
  font-size: 1.2rem;
}

.closing-float {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.closing .float {
  z-index: 0;
  font-size: 0.95rem;
  translate: 0 calc(var(--py, 0) * var(--k, 0) * 1px);
}

.float-1 {
  --k: 55;
  left: 6%;
  top: 16%;
  rotate: -6deg;
}

.float-2 {
  --k: -40;
  right: 7%;
  top: 12%;
  rotate: 5deg;
}

.float-3 {
  --k: 70;
  left: 10%;
  bottom: 18%;
  rotate: 4deg;
}

.float-4 {
  --k: -60;
  right: 5%;
  bottom: 24%;
  rotate: -4deg;
}

.float-5,
.float-6 {
  display: none;
}


/* Up to a small laptop the chips sit in the corners, clear of the text,
   and hold still: the band is too narrow for them to drift past it. */
@media (max-width: 1099px) {
  .closing .float {
    translate: none;
  }

  .float-1 {
    left: 4%;
    top: 7%;
  }

  .float-2 {
    right: 4%;
    top: 10%;
  }

  .float-3 {
    left: 5%;
    top: auto;
    bottom: 7%;
  }

  .float-4 {
    right: 4%;
    top: auto;
    bottom: 10%;
  }
}

@media (max-width: 719px) {
  .closing .float {
    font-size: 0.78rem;
    translate: none;
  }

  .float-1 {
    left: 4%;
    top: 4%;
  }

  .float-2 {
    right: 4%;
    top: 8%;
  }

  .float-3 {
    left: 5%;
    bottom: 5%;
  }

  .float-4 {
    right: 4%;
    bottom: 9%;
  }
}

@media (min-width: 1200px) {
  .float-5,
  .float-6 {
    display: inline-flex;
  }

  .float-5 {
    --k: 35;
    left: 14%;
    top: 58%;
    rotate: 3deg;
  }

  .float-6 {
    --k: -30;
    right: 13%;
    top: 42%;
    rotate: -5deg;
  }
}

/* ---------- Legal pages (imprint, privacy) ----------
   The start page's frame and tokens with a reading rhythm: a sticky table
   of contents next to one measured column, hairlines instead of cards. */

.doc-head {
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
  background: var(--tile);
}

.doc-head h1 {
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
}

.doc-meta {
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--sub);
}

.doc-lead {
  margin-top: 14px;
  max-width: 46em;
  font-size: 1.2rem;
  color: var(--ink);
}

.doc-layout {
  display: grid;
  gap: 40px;
  align-items: start;
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(72px, 9vw, 112px);
}

/* Grid items default to min-width: auto; the recipients table would set
   the floor for the whole track and push the page past a phone's width. */
.doc-layout > * {
  min-width: 0;
}

.doc-toc strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

.doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.doc-toc li {
  counter-increment: toc;
}

.doc-toc a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s;
}

.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--olive-ink);
  font-variant-numeric: tabular-nums;
}

.doc-toc a:hover {
  color: var(--ink);
}

.doc-body section {
  scroll-margin-top: 96px;
}

.doc-body h2 {
  margin-top: 56px;
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);
}

.doc-body section:first-child h2 {
  margin-top: 0;
}

.doc-body h3 {
  margin-top: 26px;
  font: 700 1.1rem/1.4 var(--font-body);
}

.doc-body .title-line {
  width: min(100%, 20rem);
  height: 2px;
  margin: 12px 0 0;
  border: 0;
  background: var(--ink);
}

.doc-body p {
  margin-top: 14px;
  max-width: 66ch;
  color: var(--sub);
  overflow-wrap: break-word;
}

.doc-body a {
  color: var(--olive-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-list {
  max-width: 66ch;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--sub);
  overflow-wrap: break-word;
}

.doc-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line);
}

.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--olive);
}

.doc-note {
  max-width: 66ch;
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--sub);
  overflow-wrap: break-word;
}

.doc-body .doc-note p {
  margin-top: 0;
}

.doc-body .doc-note p + p {
  margin-top: 12px;
}

.doc-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--paper) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--paper) 30%, transparent) right / 24px 100% no-repeat;
  background-attachment: local, local;
}

.doc-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.doc-table th {
  padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--line-strong);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}

.doc-table td {
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--line);
  color: var(--sub);
  vertical-align: top;
}

.doc-table td:first-child {
  color: var(--ink);
  font-weight: 600;
}

/* Everything still to be filled in before this page goes live. */
.doc-fill {
  border-bottom: 1px dashed var(--line-strong);
  color: var(--sub);
  font-style: italic;
}

.doc-updated {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 2px solid var(--line-strong);
  font-size: 0.95rem;
  color: var(--sub);
}

@media (max-width: 719px) {
  .doc-table {
    min-width: 0;
    font-size: 0.9rem;
  }

  .doc-table th,
  .doc-table td {
    padding-right: 10px;
  }

  .doc-note {
    padding: 18px;
  }
}

@media (min-width: 960px) {
  .doc-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 72px;
  }

  .doc-toc {
    position: sticky;
    top: 96px;
  }
}

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

.site-foot {
  padding: 34px 0 44px;
  font-size: 0.95rem;
  color: var(--sub);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.foot-inner .brand {
  font-size: 1.25rem;
  margin-right: 8px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.foot-links a:hover {
  color: var(--olive-ink);
  text-decoration: underline;
}

/* ---------- Phones and narrow windows ---------- */

@media (max-width: 719px) {
  :root {
    --section-y: 64px;
    --stage-phone-w: 55%;
    --stage-phone-x: 41%;
    --stage-receipt-w: 47%;
    --stage-receipt-x: 3%;
  }

  .hero {
    padding-top: 18px;
  }

  .hero-grid {
    gap: 32px;
  }

  .hero-rule {
    margin: 18px 0;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .stage {
    aspect-ratio: 1 / 1.08;
    border-radius: 24px;
  }

  .receipt {
    font-size: 0.66rem;
    padding: 6% 4% 8%;
  }

  .chip {
    font-size: 0.82rem;
    gap: 6px;
    padding: 0.5em 0.7em;
  }

  .feature {
    gap: 40px;
  }

  .feature-visual .phone {
    width: min(74%, 300px);
  }

  .scan-visual {
    padding-right: 6%;
  }

  .scan-visual .receipt-long {
    width: 52%;
    font-size: 0.62rem;
  }

  .title {
    max-width: none;
  }

  .faq summary {
    font-size: 1.25rem;
    padding: 18px 40px 18px 0;
  }

}

/* Tablets (720 to 959): the desktop's two columns already, at a
   smaller title, and the signup button in the header without the links. */
@media (min-width: 720px) and (max-width: 959px) {
  :root {
    --hero-title: clamp(3.4rem, 1rem + 5.4vw, 4.4rem);
  }

  .hero-actions .btn {
    padding-inline: 1.1em;
  }

  .feature-visual .phone {
    width: min(78%, 300px);
  }
}

/* ---------- Layout from 720px ---------- */

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }

  .plans {
    grid-template-columns: 1fr 1fr;
  }

  .head-cta {
    display: inline-flex;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: center;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
  }

  .feature-flip .feature-visual {
    order: -1;
  }
}

/* ---------- Layout from 960px ---------- */

@media (min-width: 960px) {
  :root {
    --gutter: 48px;
  }

  .head-links {
    display: flex;
  }

  .hero {
    padding-top: 48px;
  }

  .feature-visual .phone {
    width: min(70%, 360px);
  }
}

/* ---------- How it works: three real screens on one path ---------- */

.trio {
  position: relative;
  display: grid;
  gap: 56px;
}

.trio-step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}

.trio-step .phone {
  width: min(62%, 250px);
}

.trio-step:nth-of-type(1) .phone {
  rotate: -4deg;
}

.trio-step:nth-of-type(3) .phone {
  rotate: 4deg;
}

.trio-num {
  position: absolute;
  z-index: 3;
  top: -26px;
  left: -40px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--on-olive);
  font: 400 1.75rem/1 var(--font-display);
  box-shadow: 0 0 0 6px var(--tile);
}

.trio-step h3 {
  font-size: 1.8rem;
}

/* Three across on a tablet: wider phones in their column, a smaller badge
   that stays inside the gap. */
@media (min-width: 720px) and (max-width: 959px) {
  .trio {
    gap: 28px;
  }

  .trio-step .phone {
    width: min(78%, 250px);
  }

  .trio-num {
    top: -18px;
    left: -22px;
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
    box-shadow: 0 0 0 5px var(--tile);
  }

  .trio-step h3 {
    font-size: 1.5rem;
  }
}

.trio-step p {
  color: var(--sub);
  max-width: 26em;
}

.trio-path {
  display: none;
}

@media (min-width: 720px) {
  .trio {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .trio-path {
    display: block;
    position: absolute;
    z-index: 0;
    left: 12%;
    right: 12%;
    top: 26%;
    width: 76%;
    height: 80px;
    overflow: visible;
  }

  .trio-path path {
    fill: none;
    stroke: var(--olive);
    stroke-width: 3;
    stroke-dasharray: 2 12;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
}

/* ---------- Recipes: the phone stands inside the word it proves ---------- */

.recipe-stage {
  overflow: clip;
}

.rs-head {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}

.rs-head .title {
  margin-inline: auto;
}

.rs-head .lead {
  margin-inline: auto;
}

.rs {
  position: relative;
  display: grid;
  justify-items: center;
  margin: clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 56px);
}

.rs-word {
  display: flex;
  justify-content: center;
  gap: 0.04em;
  margin-bottom: 24px;
  font: 400 clamp(4rem, 3rem + 7vw, 6rem) / 0.85 var(--font-display);
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--olive) 48%, var(--paper));
  user-select: none;
}

.rs-phone {
  position: relative;
  width: min(300px, 72%);
}

.rs-phone .phone {
  position: relative;
  z-index: 1;
}

.callout {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 10px;
  translate: 0 -50%;
  white-space: nowrap;
  font-size: 1.05rem;
  color: var(--sub);
}

.callout::before {
  content: "";
  width: 56px;
  height: 2px;
  background: currentColor;
  opacity: 0.45;
  order: var(--o, 0);
}

.callout .state {
  box-shadow: var(--shadow-1);
}

/* The outlined "missing" pill sits on the screen on phones; give it paper. */
.callout .state-miss {
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--shadow-1);
}

/* Each callout points at its row in the recipe capture. */
.co-1 {
  right: 96%;
  top: 42.6%;
  --o: 1;
}

.co-2 {
  left: 96%;
  top: 55.4%;
}

.co-3 {
  right: 96%;
  top: 68.3%;
  --o: 1;
}

.co-4 {
  left: 96%;
  top: 81%;
}

/* The English capture sits a little lower (its recipe photo is cropped
   differently); measured from the icon rows of each capture. */
:lang(en) .co-1 {
  top: 43.5%;
}

:lang(en) .co-2 {
  top: 56.3%;
}

:lang(en) .co-3 {
  top: 69.1%;
}

:lang(en) .co-4 {
  top: 81.9%;
}

/* On a phone the screen is narrower so the pills keep their place beside
   it, as on the desktop: short lines, smaller pills, the same rows. */
@media (max-width: 719px) {
  .rs-phone {
    width: min(240px, 58%);
  }

  .callout {
    display: flex;
    gap: 0;
    font-size: 0.76rem;
  }

  .callout::before {
    width: 14px;
  }

  .co-1,
  .co-3 {
    right: 93%;
  }

  .co-2,
  .co-4 {
    left: 93%;
  }
}

.rs-more {
  display: grid;
  gap: 1em;
  max-width: 62rem;
  margin: 0 auto;
  color: var(--sub);
}

@media (min-width: 720px) {
  .callout {
    display: flex;
  }

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

/* From desktop on the word splits around the phone. */
@media (min-width: 960px) {
  .rs-word {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 16%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr calc(min(330px, 72%) + 3rem) 1fr;
    gap: 0;
    font-size: clamp(7rem, 4rem + 8vw, 12rem);
  }

  /* Each half hugs the phone, whatever its width. */
  .rs-word span:first-child {
    grid-column: 1;
    justify-self: end;
  }

  .rs-word span:last-child {
    grid-column: 3;
    justify-self: start;
  }

  .rs-phone {
    width: min(330px, 72%);
  }
}

/* ---------- Motion ----------
 * One grammar for the whole page: the app's ink line draws, then the
 * content settles onto it. The focal moment is the hero, where the
 * receipt is scanned and its lines fly into the pantry (main.js).
 *
 * Every hidden starting state below is scoped to html.motion, which
 * main.js sets only when JavaScript runs and the visitor has not asked for
 * reduced motion. Without it nothing is ever hidden: the page renders
 * complete and still.
 */

/* Kept small on purpose: the page has many blocks, and a long rise on each
   of them adds up to a page that keeps moving while you scroll. */
.motion [data-rv] {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.6s var(--ease-out), translate 0.7s var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * 60ms);
}

.motion [data-rv].in {
  opacity: 1;
  translate: 0 0;
}

/* Titles: the text settles, then its ink line is drawn under it. */
.motion .title[data-rv]::after {
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) 0.25s;
}

.motion .title[data-rv].in::after {
  transform: scaleX(1);
}

/* Phones rise into place with a little tilt that straightens out. */
.motion .feature-visual[data-rv] {
  translate: 0 0;
}

.motion .feature-visual[data-rv] .phone {
  translate: 0 70px;
  rotate: -2.5deg;
  transition: translate 1.2s var(--ease-out), rotate 1.4s var(--ease-out);
}

.motion .feature-visual[data-rv].in .phone {
  translate: 0 0;
  rotate: 0deg;
}

.motion .scan-visual[data-rv] .receipt-long {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--ease-out) 0.35s;
}

.motion .scan-visual[data-rv].in .receipt-long {
  clip-path: inset(0 0 -10% 0);
}

/* Lists arrive as lists: a short, capped stagger. */
.motion .points[data-rv] li,
.motion .legend[data-rv] li {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.6s var(--ease-out), translate 0.7s var(--ease-out);
}

.motion .points[data-rv].in li,
.motion .legend[data-rv].in li {
  opacity: 1;
  translate: 0 0;
}

.motion .points li:nth-child(2),
.motion .legend li:nth-child(2) {
  transition-delay: 80ms;
}

.motion .points li:nth-child(3),
.motion .legend li:nth-child(3) {
  transition-delay: 160ms;
}

.motion .points li:nth-child(4),
.motion .legend li:nth-child(4) {
  transition-delay: 240ms;
}

.motion .points li:nth-child(n + 5) {
  transition-delay: 320ms;
}

/* The traffic light: each bar grows to its length, fresh first. */
.motion .lights[data-rv] li::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}

.motion .lights[data-rv].in li::before {
  transform: scaleX(1);
}

.motion .lights li:nth-child(2)::before {
  transition-delay: 0.15s;
}

.motion .lights li:nth-child(3)::before {
  transition-delay: 0.3s;
}

/* Closing: the three bars of the icon draw themselves, then the line. */
.motion .closing[data-rv] {
  opacity: 1;
  translate: 0 0;
}

.motion .closing[data-rv] .wrap > * {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out);
}

.motion .closing[data-rv].in .wrap > * {
  opacity: 1;
  translate: 0 0;
}

.motion .closing .wrap > :nth-child(2) {
  transition-delay: 0.35s;
}

.motion .closing .wrap > :nth-child(3) {
  transition-delay: 0.5s;
}

.motion .closing .wrap > :nth-child(4) {
  transition-delay: 0.65s;
}

.motion .closing .app-icon rect:not(.bg) {
  transform-box: fill-box;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out);
}

.motion .closing[data-rv].in .app-icon rect:not(.bg) {
  transform: scaleX(1);
}

.motion .closing .app-icon .b1 {
  transition-delay: 0.2s;
}

.motion .closing .app-icon .b2 {
  transition-delay: 0.32s;
}

.motion .closing .app-icon .b3 {
  transition-delay: 0.44s;
}

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

/* Entrance: the title rises out of a mask, the line draws, the receipt is
   printed from the top, the phone rises into the stage. */
.motion .hero h1,
.motion .hero h1 em {
  animation: title-rise 1s var(--ease-out) both;
}

.motion .hero h1 em {
  animation-delay: 0.12s;
}

@keyframes title-rise {
  from {
    clip-path: inset(0 0 100% 0);
    translate: 0 0.35em;
  }

  to {
    clip-path: inset(0 0 -20% 0);
    translate: 0 0;
  }
}

.motion .hero-rule {
  transform-origin: left;
  animation: rule-draw 1.1s var(--ease-out) 0.35s both;
}

@keyframes rule-draw {
  from {
    transform: scaleX(0);
  }
}

.motion .hero .lead,
.motion .hero-actions,
.motion .hero-note {
  animation: settle 0.9s var(--ease-out) both;
}

.motion .hero .lead {
  animation-delay: 0.45s;
}

.motion .hero-actions {
  animation-delay: 0.55s;
}

.motion .hero-note {
  animation-delay: 0.65s;
}

@keyframes settle {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

.motion .stage {
  animation: stage-in 1.1s var(--ease-out) 0.15s both;
}

@keyframes stage-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
}

.motion .stage .receipt {
  animation: print 1.3s cubic-bezier(0.33, 1, 0.68, 1) 0.45s both;
}

@keyframes print {
  from {
    clip-path: inset(0 0 100% 0);
    translate: 0 -12%;
  }

  to {
    clip-path: inset(0 0 -12% 0);
    translate: 0 0;
  }
}

.motion .stage .phone {
  animation: phone-in 1.2s var(--ease-out) 0.3s both;
}

@keyframes phone-in {
  from {
    translate: 0 14%;
    rotate: 3deg;
  }
}

/* The loop: the scanner sweeps the receipt, each flying line is struck,
   chips fly (main.js), rows land in the pantry and then fold back into
   the list. */
.motion .stage .chip {
  left: 0;
  top: 0;
  rotate: 0deg;
  opacity: 0;
  will-change: transform, opacity;
}

.receipt.is-scanning .r-scan {
  animation: sweep 1.05s cubic-bezier(0.45, 0, 0.25, 1) both;
}

@keyframes sweep {
  0% {
    top: 4%;
    opacity: 0;
  }

  12%,
  85% {
    opacity: 1;
  }

  100% {
    top: 92%;
    opacity: 0;
  }
}

.receipt .r-flown.is-taken {
  opacity: 0.22;
}

.motion .receipt .r-flown {
  opacity: 1;
}

.motion .receipt .r-flown.is-taken {
  opacity: 0.22;
}

.land.is-on {
  animation: land-in 0.55s var(--ease-out) both;
}

.land.is-off {
  animation: land-out 0.5s ease-in both;
}

@keyframes land-in {
  from {
    opacity: 0;
    scale: 0.94;
    box-shadow: 0 0.4cqi 1.2cqi rgba(40, 30, 14, 0.12), 0 0 0 1.6cqi color-mix(in srgb, var(--olive) 35%, transparent);
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes land-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    scale: 0.98;
  }
}

/* FAQ: answers open smoothly where the browser can size to auto. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }
}

/* Feedback on everything clickable. */
@media (hover: hover) {
  .feature-visual .phone {
    transition: box-shadow 0.4s var(--ease-out);
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .receipt p {
    transition: none;
  }
}

/* How it works: the three screens rise one after another along the path. */
.motion .trio[data-rv] {
  opacity: 1;
  translate: 0 0;
}

.motion .trio[data-rv] .trio-step {
  opacity: 0;
  translate: 0 56px;
  transition: opacity 0.8s var(--ease-out), translate 1s var(--ease-out);
}

.motion .trio[data-rv].in .trio-step {
  opacity: 1;
  translate: 0 0;
}

.motion .trio .trio-step:nth-of-type(2) {
  transition-delay: 0.3s;
}

.motion .trio .trio-step:nth-of-type(3) {
  transition-delay: 0.6s;
}

.motion .trio[data-rv] .trio-path {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.motion .trio[data-rv].in .trio-path {
  clip-path: inset(0 -2% 0 0);
}

/* Recipes: the phone rises, the word opens around it, the states point. */
.motion .rs[data-rv] {
  opacity: 1;
  translate: 0 0;
}

.motion .rs[data-rv] .rs-phone {
  opacity: 0;
  translate: 0 60px;
  transition: opacity 0.8s var(--ease-out), translate 1.1s var(--ease-out);
}

.motion .rs[data-rv] .rs-word span {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) 0.2s, translate 1.2s var(--ease-out) 0.2s;
}

.motion .rs[data-rv] .rs-word span:first-child {
  translate: 18% 0;
}

.motion .rs[data-rv] .rs-word span:last-child {
  translate: -18% 0;
}

.motion .rs[data-rv] .callout {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out);
}

.motion .rs[data-rv] .co-1,
.motion .rs[data-rv] .co-3 {
  translate: -16px -50%;
}

.motion .rs[data-rv] .co-2,
.motion .rs[data-rv] .co-4 {
  translate: 16px -50%;
}

.motion .rs[data-rv].in .rs-phone,
.motion .rs[data-rv].in .rs-word span {
  opacity: 1;
  translate: 0 0;
}

.motion .rs[data-rv].in .callout {
  opacity: 1;
  translate: 0 -50%;
}

.motion .rs .co-1 {
  transition-delay: 0.7s;
}

.motion .rs .co-2 {
  transition-delay: 0.85s;
}

.motion .rs .co-3 {
  transition-delay: 1s;
}

.motion .rs .co-4 {
  transition-delay: 1.15s;
}

/* ---------- Living details below the fold ----------
 * Each [data-scene] runs a short loop in main.js while it is on screen and
 * stops when it leaves. Starting states are scoped to .motion like the rest;
 * without it every element shows its finished state.
 */

/* Planner: the two reminders arrive and stay. */
.motion .plan-visual .push {
  transition: opacity 0.7s var(--ease-out), translate 1.1s var(--ease-out), rotate 1.3s var(--ease-out), filter 0.8s var(--ease-out);
}

.motion .plan-visual .push-1 {
  transition-delay: 0.55s;
}

.motion .plan-visual .push-2 {
  transition-delay: 1.15s;
}

.motion .plan-visual[data-rv]:not(.in) .push {
  opacity: 0;
  translate: 0 34px;
  rotate: 0deg;
  filter: blur(8px);
}


/* Budget: the receipt prints, its total flies into the card. */
.motion .bfly {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  display: block;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--olive);
  color: var(--on-olive);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
}

/* Cooking mode: the step slides, the dot pulses while the timer runs. */
.motion .cook-step {
  translate: 28px 0;
  transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out), visibility 0s linear 0.5s;
}

.motion .cook-step.is-on {
  translate: 0 0;
  transition: opacity 0.6s var(--ease-out) 0.15s, translate 0.8s var(--ease-out) 0.15s, visibility 0s;
}

.motion .cook-step.is-past {
  translate: -28px 0;
}

.motion .tile-cook.is-live .cook-run i {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
    scale: 0.7;
  }
}

/* Household: a tick pops when it lands. */
.motion .share-dev li.is-done .tick {
  animation: pop 0.45s var(--ease-out);
}

@keyframes pop {
  40% {
    scale: 1.25;
  }
}

/* PDF: the toast confirms the import. */
.motion .pdf-done {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.4s var(--ease-out), translate 0.5s var(--ease-out);
}

.motion .pdf-done.is-on {
  opacity: 1;
  translate: 0 0;
}

.motion .tile-pdf.is-live .pdf-path {
  animation: march 0.9s linear infinite;
}

@keyframes march {
  to {
    background-position: 10px 0;
  }
}

/* Reminder: the notification drops onto the lock screen. */
.motion .lock .push-card {
  opacity: 0;
  translate: 0 -18px;
  scale: 0.96;
  transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out), scale 0.7s var(--ease-out);
}

.motion .tile-remind.in .lock .push-card.is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition-delay: 0.35s;
}

/* Privacy: the scanner reads inside the phone; data lines carry dots. */
.motion .vault.is-live .vault-scan {
  animation: vault-sweep 2.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes vault-sweep {
  0% {
    top: 0;
    opacity: 0;
  }

  10%,
  45% {
    opacity: 1;
  }

  55%,
  100% {
    top: 100%;
    opacity: 0;
  }
}

.motion .vault .vault-rows li {
  transition: opacity 0.6s var(--ease-out), translate 0.7s var(--ease-out);
}

.motion .vault[data-rv]:not(.in) .vault-rows li {
  opacity: 0;
  translate: 0 10px;
}

.motion .vault .vault-rows li:nth-child(2) {
  transition-delay: 0.12s;
}

.motion .vault .vault-rows li:nth-child(3) {
  transition-delay: 0.24s;
}

.motion .vault .vault-rows li:nth-child(4) {
  transition-delay: 0.36s;
}

.motion .vault .vault-node {
  transition: opacity 0.7s var(--ease-out) 0.5s, scale 0.8s var(--ease-out) 0.5s;
}

.motion .vault[data-rv]:not(.in) .vault-node {
  opacity: 0;
  scale: 0.92;
}

/* Pricing: the receipt prints, the card's ticks arrive as a list. */
.motion .plan-free .rc-lines li,
.motion .plan-free .rc-total,
.motion .plan-free .rc-sub,
.motion .plan-free .rc-foot {
  transition: opacity 0.35s var(--ease-out), translate 0.5s var(--ease-out);
}

.motion .plan-free[data-rv]:not(.in) .rc-lines li,
.motion .plan-free[data-rv]:not(.in) .rc-total,
.motion .plan-free[data-rv]:not(.in) .rc-sub,
.motion .plan-free[data-rv]:not(.in) .rc-foot {
  opacity: 0;
  translate: 0 -6px;
}

.motion .plan-free .rc-lines li:nth-child(1) {
  transition-delay: 0.34s;
}

.motion .plan-free .rc-lines li:nth-child(2) {
  transition-delay: 0.43s;
}

.motion .plan-free .rc-lines li:nth-child(3) {
  transition-delay: 0.52s;
}

.motion .plan-free .rc-lines li:nth-child(4) {
  transition-delay: 0.61s;
}

.motion .plan-free .rc-lines li:nth-child(5) {
  transition-delay: 0.70s;
}

.motion .plan-free .rc-lines li:nth-child(6) {
  transition-delay: 0.79s;
}

.motion .plan-free .rc-lines li:nth-child(7) {
  transition-delay: 0.88s;
}

.motion .plan-free .rc-lines li:nth-child(8) {
  transition-delay: 0.97s;
}

.motion .plan-free .rc-lines li:nth-child(9) {
  transition-delay: 1.06s;
}

.motion .plan-free .rc-lines li:nth-child(10) {
  transition-delay: 1.15s;
}

.motion .plan-free .rc-total {
  transition-delay: 1.3s;
}

.motion .plan-free .rc-sub,
.motion .plan-free .rc-foot {
  transition-delay: 1.45s;
}

.motion .plan-pro .points li {
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out);
}

.motion .plan-pro[data-rv]:not(.in) .points li {
  opacity: 0;
  translate: 0 8px;
}

.motion .plan-pro .points li:nth-child(2) {
  transition-delay: 0.05s;
}

.motion .plan-pro .points li:nth-child(3) {
  transition-delay: 0.1s;
}

.motion .plan-pro .points li:nth-child(4) {
  transition-delay: 0.15s;
}

.motion .plan-pro .points li:nth-child(5) {
  transition-delay: 0.2s;
}

.motion .plan-pro .points li:nth-child(n + 6) {
  transition-delay: 0.25s;
}

/* Testers: the route draws itself step by step. */
.motion .route li::before {
  transition: scale 0.6s var(--ease-out), opacity 0.4s;
}

.motion .route li[data-rv]:not(.in)::before {
  opacity: 0;
  scale: 0.6;
}

/* Closing: the products settle in after the headline. */
.motion .closing .float {
  transition: opacity 0.9s var(--ease-out) 0.5s;
}

.motion .closing[data-rv]:not(.in) .float {
  opacity: 0;
}

/* Once the diagram has played, its dots leave the lines. */
.motion .vault-lines circle,
.motion .vault-fan circle {
  transition: opacity 0.4s;
}

/* The dots exist only while the diagram plays: without JavaScript the
   lines stand still, like every other scene. */
.vault-lines circle,
.vault-fan circle {
  opacity: 0;
}

.motion .vault.is-live .vault-lines circle,
.motion .vault.is-live .vault-fan circle {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vault-lines circle,
  .vault-fan circle {
    display: none;
  }
}