/* Earnwick landing page.
   The tokens and components are rebuilt from the app's design system (Stallmate/DesignSystem):
   Theme.swift (colors, fonts), Buttons.swift (chunky button), Cards.swift (game card, day steps, progress bar),
   Money.swift (work-time chip), HUD.swift (top-bar chips), Effects.swift (speech bubble). */

@font-face {
  font-family: "Lilita One";
  src: url("../assets/fonts/lilita-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-700-900.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ink and paper */
  --ink: #33261F;
  --ink-soft: #6B5A52;
  --cream: #FFF8EC;
  --paper: #FFFFFF;
  --sand: #F1E6D6;
  --sand-dark: #E2D2BC;
  --base: #E9DCCB;               /* the solid "3D" edge under cards and buttons */
  --edge: rgba(51, 38, 31, 0.13); /* soft 1.5px borders */
  --cta: #FFC54D;
  --cta-base: #CC9E3E;           /* the yellow, 20% darker, like Color.shaded(0.2) */
  --kicker: #B0501A;             /* small warm labels; never yellow text on white */

  /* Colors carry meaning */
  --in: #43C463;       --in-dark: #23873D;     /* money in */
  --in-text: #1E7534;   /* small green text on a green tint (AA contrast) */
  --out: #FF6B5B;      --out-dark: #C8443A;    /* money out */
  --out-text: #A8372E;  /* small coral text on a coral tint (AA contrast) */
  --gold: #FFC83D;     --gold-light: #FFE69A;  /* coins */
  --save: #3E8BFA;     --save-dark: #2458C9;   /* savings */
  --work: #8E6CF0;     --work-dark: #5E43B8;   /* work time */
  --work-tint: #EFE8FF;
  --keep: #38B2CF;     --keep-dark: #12697F;   /* stock kept for tomorrow */
  --chalkboard: #2E4A40;
  --chalk: #F4F1E6;

  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --text: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 16px;
  --max: 1200px;
  --nav-h: 68px;
  --r-card: 24px;

  /* Motion, like the app's springs: gamePop, gameSettle, pressDown */
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --settle: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background-color: var(--cream);
  /* a faint dot grid, like a notebook: 3px dots, 26px apart, ink at 5% */
  background-image: radial-gradient(circle, rgba(51, 38, 31, 0.05) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  font: 700 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--save-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
strong, b { font-weight: 900; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 1.55rem + 5.4vw, 5.25rem); }
h2 + .lead { margin-top: 14px; }
h2 { font-size: clamp(2.125rem, 1.45rem + 3vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); line-height: 1.1; }
p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--save-dark);
  outline-offset: 3px;
  border-radius: 12px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 4px 0 var(--base);
}
.skip:focus { top: 12px; }

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

.section { padding-block: clamp(56px, 3rem + 4vw, 112px); }
.section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lead { margin-top: 14px; }

.kicker {
  margin: 0 0 10px;
  color: var(--kicker);
  font: 900 0.8125rem/1.3 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lead {
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Components ---------- */

/* Game card: white, soft edge, and a solid base under it instead of a blurred shadow. */
.card {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--edge);
  border-radius: var(--r-card);
  box-shadow: 0 4px 0 var(--base);
  padding: 20px;
}
@media (min-width: 600px) { .card { padding: 24px; } }

/* Chunky button: the face sinks onto its base when pressed, then springs back. */
.btn {
  --face: var(--cta);
  --btn-base: var(--cta-base);
  --depth: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  margin-bottom: var(--depth);
  padding: 0 26px;
  border: 0;
  border-radius: 20px;
  background: var(--face);
  color: var(--ink);
  font: 400 1.375rem/1 var(--display);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 var(--depth) 0 var(--btn-base);
  transform: translateY(0);
  transition: transform 0.26s var(--pop), box-shadow 0.26s var(--pop);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}
.btn:active:not(:disabled), .btn.is-down:not(:disabled) {
  transform: translateY(calc(var(--depth) - 1px));
  box-shadow: 0 1px 0 var(--btn-base);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}
.btn:focus-visible { border-radius: 20px; }
.btn:disabled { cursor: default; opacity: 1; }
.btn--secondary {
  --face: var(--paper);
  --btn-base: var(--base);
  border: 1.5px solid var(--edge);
}
.btn--small {
  --depth: 4px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 15px;
  font-size: 1.125rem;
}
.btn--small::before { border-radius: 13px; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn .i-apple { width: 21px; height: 21px; margin: -3px -2px 0 -4px; }
.btn--small .i-apple { width: 18px; height: 18px; }

/* Round icon button (the app's stepper keys) */
.round-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  margin-bottom: 4px;
  padding: 0;
  border: 1.5px solid var(--edge);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--base);
  transition: transform 0.22s var(--pop), box-shadow 0.22s var(--pop), background-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.round-btn svg { width: 20px; height: 20px; }
.round-btn:active, .round-btn.is-down {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--base);
  background: var(--gold-light);
  border-color: var(--gold);
  transition-duration: 0.06s;
  transition-timing-function: ease-out;
}
.round-btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: 0 4px 0 var(--base); background: var(--sand); }
.round-btn:focus-visible { border-radius: 50%; }

/* Top-bar chips: Wallet, Jar, Fans */
.hud { display: flex; gap: 8px; }
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  padding: 0 14px 0 8px;
  background: var(--paper);
  border: 2px solid var(--edge);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--base);
  white-space: nowrap;
}
.hud-chip img { width: 30px; height: 30px; }
.hud-chip__value { display: block; font: 400 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; }
.hud-chip__label { display: block; margin-top: 1px; color: var(--ink-soft); font: 800 0.8125rem/1.1 var(--text); }

/* Work-time chip: the signature element. Purple always means work time. */
.work {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 5px;
  border: 2px solid var(--work-dark);
  border-radius: 999px;
  background: var(--work-tint);
  color: var(--work-dark);
  font: 900 1.0625rem/1.25 var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.work img { width: 22px; height: 22px; flex: none; }
.work--compact { gap: 4px; padding: 2px 9px 2px 3px; font-size: 0.875rem; }
.work--compact img { width: 18px; height: 18px; }
.work--big { gap: 8px; padding: 6px 16px 6px 6px; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); }
.work--big img { width: 30px; height: 30px; }
.work.is-spin img { animation: spin 0.5s var(--pop); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Coin label: a coin and a number */
.coins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 1.125rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.coins img { width: 22px; height: 22px; }

/* Speech bubble: white, rounded, a soft tail and a solid shadow under it. Words type in letter by letter. */
.bubble {
  position: relative;
  display: inline-block;
  max-width: 290px;
  margin: 0 0 18px;
  padding: 11px 16px 12px;
  border: 2px solid var(--edge);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font: 800 1.0625rem/1.35 var(--text);
  text-align: left;
  filter: drop-shadow(0 4px 0 rgba(51, 38, 31, 0.22));
}
button.bubble { cursor: pointer; }
.bubble__lines { display: grid; }
.bubble__lines > * { grid-area: 1 / 1; }
.bubble__reserve { visibility: hidden; }
.bubble__tail {
  position: absolute;
  top: calc(100% - 2px);
  left: var(--tail-x, 22px);
  width: 22px;
  height: 17px;
  overflow: visible;
}
.bubble--tail-right .bubble__tail { left: auto; right: var(--tail-x, 22px); transform: scaleX(-1); }
.bubble__hint { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 0.75rem; font-weight: 800; }

/* Day steps: News, Shop, Prices, Sell, Results. Done = green with a check, current = purple, upcoming = sand. */
.steps {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps__item { position: relative; flex: 1; min-width: 0; }
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--row) / 2 - 2px);
  left: calc(50% + var(--gap-dot));
  width: calc(100% - 2 * var(--gap-dot));
  height: 4px;
  border-radius: 2px;
  background: var(--sand-dark);
  transition: background-color 0.3s;
}
.steps__item.is-done:not(:last-child)::after { background: var(--in); }
.steps {
  --dot: 28px;
  --dot-now: 36px;
  --row: 36px;
  --gap-dot: 20px;
}
.steps--big {
  --dot: 42px;
  --dot-now: 54px;
  --row: 54px;
  --gap-dot: 30px;
}
.steps__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.steps__btn:focus-visible { outline-offset: 4px; }
.steps__dot {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  margin-block: calc((var(--row) - var(--dot)) / 2);
  border-radius: 50%;
  background: var(--sand);
  color: rgba(107, 90, 82, 0.8);
  transition: width 0.35s var(--pop), height 0.35s var(--pop), margin 0.35s var(--pop), background-color 0.25s;
}
.steps__dot svg { width: 46%; height: 46%; }
.steps__dot .i-check { display: none; }
.steps__item.is-done .steps__dot { background: var(--in); color: #fff; box-shadow: inset 0 0 0 2.5px rgba(35, 135, 61, 0.55); }
.steps__item.is-done .steps__dot .i-check { display: block; }
.steps__item.is-done .steps__dot .i-step { display: none; }
.steps__item.is-now .steps__dot {
  --dot: var(--dot-now);
  background: var(--work);
  color: #fff;
  box-shadow: inset 0 0 0 2.5px var(--edge);
}
.steps__name {
  color: var(--ink-soft);
  font: 700 0.8125rem/1.2 var(--text);
  white-space: nowrap;
}
.steps--big .steps__name { font-size: 0.9375rem; }
.steps__item.is-now .steps__name { color: var(--ink); font-weight: 900; }

/* Thought bubbles over customers */
.thought {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 5px;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 rgba(51, 38, 31, 0.25);
  color: var(--ink);
  font: 900 0.9375rem/1.2 var(--text);
  white-space: nowrap;
}
.thought__pic { position: relative; width: 26px; height: 28px; flex: none; }
.thought__pic img { width: 26px; height: 28px; object-fit: contain; }
.thought__badge {
  position: absolute;
  right: -5px; bottom: -3px;
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--out);
  color: #fff;
}
.thought__badge svg { width: 9px; height: 9px; }
.thought--happy .thought__badge { background: var(--in); }

/* Progress bars: chunky, rounded, green fill on sand */
.bar {
  position: relative;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sand);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 0%);
  border-radius: 999px;
  background: var(--in);
  transition: width 0.9s var(--settle);
}
.bar > span::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 3px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.v-35 { --v: 35%; } .v-45 { --v: 45%; } .v-55 { --v: 55%; } .v-62 { --v: 62%; }
.v-70 { --v: 70%; } .v-78 { --v: 78%; } .v-85 { --v: 85%; }
.is-waiting .bar > span { width: 0; }

/* Pills and tags */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 900 0.875rem/1.2 var(--text);
  white-space: nowrap;
}
.pill svg { width: 15px; height: 15px; flex: none; }
.pill--sand { background: var(--sand); }
.pill--gold { background: var(--gold); }
.pill--teaches { background: var(--gold-light); border-color: transparent; }
.pill--sample { padding: 2px 9px; font-size: 0.75rem; color: var(--ink-soft); background: var(--sand); border-color: transparent; }

/* The iPhone frame: rounded corners and a dynamic island. Nothing heavier. */
.device {
  width: min(100%, 300px);
  margin: 0;
  container-type: inline-size;
}
.phone {
  position: relative;
  aspect-ratio: 1290 / 2796;
  padding: 3.4cqw;
  border-radius: 15cqw;
  background: #2A1F1A;
  box-shadow: 0 7px 0 rgba(51, 38, 31, 0.16), inset 0 0 0 1.2cqw #3B2E27;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12cqw;
  background: var(--cream);
  container-type: inline-size;
}
.screen picture, .screen picture > img { width: 100%; height: 100%; object-fit: cover; }
.island {
  position: absolute;
  top: 5.6cqw;
  left: 50%;
  width: 30cqw;
  height: 8.6cqw;
  border-radius: 999px;
  background: #0E0B0A;
  transform: translateX(-50%);
  z-index: 3;
}
.screen-stack { position: relative; width: 100%; height: 100%; }
.screen-stack > .screen-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.screen-stack > .screen-layer.is-on { opacity: 1; }

/* Apple's official App Store badge: shown unmodified, at least 40 px tall, with clear space around it */
.store-badge {
  display: inline-block;
  flex: none;
  border-radius: 10px;
  line-height: 0;
  transition: transform 0.2s var(--pop);
}
.store-badge img { width: auto; height: 54px; }
.store-badge:active { transform: scale(0.97); }

/* Pop in as cards come into view (only below the fold, and only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .reveal-wait { opacity: 0; transform: scale(0.96); }
  .reveal-in {
    transition: opacity 0.45s ease, transform 0.55s var(--pop);
    transition-delay: var(--delay, 0s);
  }
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 236, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.nav.is-scrolled { border-bottom-color: rgba(51, 38, 31, 0.1); }
.nav__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--ink);
  font: 400 1.625rem/1 var(--display);
  text-decoration: none;
}
.brand img { width: 46px; height: 46px; margin: -4px -4px -2px -6px; }
.brand:focus-visible { border-radius: 12px; }
.nav__links {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__links a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.nav__links a:hover { background: var(--sand); }
.nav__cta { margin-bottom: 4px; }
.nav__menu {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 4px;
  padding: 0;
  border: 1.5px solid var(--edge);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
}
.nav__menu svg { width: 22px; height: 22px; }
.nav__menu[aria-expanded="true"] { background: var(--gold-light); }
.nav__menu .i-close { display: none; }
.nav__menu[aria-expanded="true"] .i-menu { display: none; }
.nav__menu[aria-expanded="true"] .i-close { display: block; }
.nav__links.is-open {
  position: absolute;
  top: calc(var(--nav-h) - 6px);
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1.5px solid var(--edge);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
}
.nav__links.is-open a { padding: 14px 14px; font-size: 1.125rem; }
@media (max-width: 380px) {
  .brand { font-size: 1.375rem; }
  .brand img { width: 40px; height: 40px; }
  .nav__cta { padding: 0 14px; font-size: 1rem; }
}
@media (min-width: 900px) {
  .nav__menu { display: none; }
  .nav__links { display: flex; gap: 2px; margin-right: 8px; }
}

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

.hero { padding-block: clamp(20px, 3vw, 56px) clamp(48px, 6vw, 96px); overflow-x: clip; }
.hero__grid { display: grid; gap: 36px; align-items: center; }
.hero__text { max-width: 640px; }
.hero h1 { margin-bottom: 16px; }
.hero .lead { max-width: 34ch; color: var(--ink-soft); }

.price-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: fit-content;
  max-width: 100%;
  margin-top: 26px;
  padding: 12px 18px 12px 12px;
}
.price-demo__item { display: flex; align-items: center; gap: 10px; }
.price-demo__item > img { width: 44px; height: 52px; object-fit: contain; }
.price-demo__name { display: block; font: 400 1.375rem/1.05 var(--display); }
.price-demo__coins { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-weight: 900; }
.price-demo__coins img { width: 20px; height: 20px; }
@media (max-width: 599px) {
  /* On a phone: one row, as wide as the phone below it. Sizes follow the card's width (cqi), so the lemonade, its
     price and the work-time chip always fit on the row, centered. */
  .price-demo { container-type: inline-size; flex-wrap: nowrap; justify-content: center; width: min(76vw, 300px); padding: 10px; gap: 3cqi; }
  .price-demo__item { flex: none; gap: 2.2cqi; }
  .price-demo__item > img { width: 9.5cqi; height: auto; }
  .price-demo__name { font-size: 6.4cqi; }
  .price-demo__coins { gap: 1.4cqi; font-size: 5cqi; }
  .price-demo__coins img { width: 5.4cqi; height: 5.4cqi; }
  .price-demo .work { flex: none; gap: 1.2cqi; padding: 0.6cqi 3cqi 0.6cqi 1cqi; font-size: 4.9cqi; }
  .price-demo .work img { width: 6.6cqi; height: 6.6cqi; }
}
@media (max-width: 1023px) {
  /* phones and tablets: everything in the hero centered over the phone */
  .hero__text { margin-inline: auto; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .price-demo { margin-inline: auto; }
  .price-demo__item { text-align: left; }
  .cta-row { flex-direction: column; align-items: center; gap: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .price-demo .work { animation: chip-pop 0.55s var(--pop) 0.9s both; }
  .price-demo .work img { animation: spin 0.6s var(--pop) 1.1s both; }
}
@keyframes chip-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 28px;
}
.free-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}
.free-note img { width: 26px; height: 26px; }

/* The phone stands alone: its screen has the app's own top bar and speech bubble. A soft sky behind it. */
.hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: 8px;
}
/* A soft sky behind the phone that fades out with no edge. It multiplies with the page, so the page's dots
   show through it, as if the glow were under them. */
.hero__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(120%, 640px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, #CFE9FF, rgba(207, 233, 255, 0.75) 40%, rgba(207, 233, 255, 0.3) 70%, rgba(207, 233, 255, 0));
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.hero__stage .device { width: min(76vw, 300px); }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
  .hero__stage .device { width: 330px; }
}

/* ---------- The idea ---------- */

.idea__grid { display: grid; gap: 40px; align-items: center; }
.idea__lines {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.1875rem;
}
.idea__lines li { display: flex; align-items: center; gap: 14px; }
.idea__lines img { width: 40px; height: 40px; flex: none; object-fit: contain; }

.try__label { display: block; margin-bottom: 14px; font: 400 1.5rem/1.1 var(--display); }
.try__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 108px;
  padding: 18px;
  border: 2.5px solid var(--work-dark);
  border-radius: 20px;
  background: #F6F1FF;
}
.try__coins { display: inline-flex; align-items: center; gap: 8px; }
.try__coins img { width: 34px; height: 34px; }
.try__coins output { font: 400 2.5rem/1 var(--display); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.try__coins small { color: var(--ink-soft); font-weight: 900; font-size: 1rem; }
.try__eq { color: var(--ink-soft); font: 400 2rem/1 var(--display); }
.try__slider { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.try__note { margin-top: 18px; color: var(--ink-soft); font-size: 0.9375rem; }

/* The range input: a sand track with a gold fill and a coin for a thumb */
.range {
  --fill: 25%;
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0 0 4px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.range:focus-visible { outline-offset: 2px; }
.range::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--fill), var(--sand) var(--fill));
  box-shadow: inset 0 0 0 2px var(--edge);
}
.range::-moz-range-track {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--fill), var(--sand) var(--fill));
  box-shadow: inset 0 0 0 2px var(--edge);
}
.range::-webkit-slider-thumb {
  width: 34px; height: 34px;
  margin-top: -9px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, var(--gold) 0 50%, #E0A500 51% 60%, var(--gold) 61%);
  box-shadow: 0 3px 0 #C98F00;
  -webkit-appearance: none;
  appearance: none;
}
.range::-moz-range-thumb {
  width: 28px; height: 28px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, var(--gold) 0 50%, #E0A500 51% 60%, var(--gold) 61%);
  box-shadow: 0 3px 0 #C98F00;
}

.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-bottom: 3px;
  padding: 4px 14px 4px 6px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--base);
  font-weight: 900;
  font-size: 0.9375rem;
  transition: transform 0.2s var(--pop), box-shadow 0.2s var(--pop);
}
.pick img { width: 30px; height: 30px; object-fit: contain; }
.pick:active, .pick.is-down { transform: translateY(2px); box-shadow: 0 1px 0 var(--base); transition-duration: 0.06s; }
.pick[aria-pressed="true"] { background: var(--gold-light); border-color: var(--gold); }
.pick:focus-visible { border-radius: 999px; }

@media (min-width: 1024px) {
  .idea__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ---------- A market day ---------- */

.day { display: grid; gap: 28px; }
.day__head { margin-bottom: 0; }
.day__aside { display: grid; gap: 24px; justify-items: center; }
.day__aside .steps { width: 100%; max-width: 520px; }
.day__phone { display: none; }
.day-step { display: grid; gap: 20px; }
.day-step__phone { justify-self: center; width: min(62vw, 250px); }
.day-step__text { display: grid; gap: 12px; align-content: start; }
.day-step__decides { font-size: 1.1875rem; line-height: 1.5; }
.day-step__teaches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 900; font-size: 0.9375rem; }
.day-step__demo { margin-top: 8px; }

/* Phones and tablets: one step at a time, full width. The track above works as tabs, with previous/next below. */
.day__list { position: relative; display: grid; touch-action: pan-y; }
.day__list > .day-step {
  padding: 20px;
  border: 1.5px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
}
@media (max-width: 1023px) {
  .day__list > .day-step:not(.is-now) { display: none; }
  .day__list > .day-step.is-now { animation: step-in 0.35s var(--settle); }
  .day__list.is-back > .day-step.is-now { animation-name: step-back; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  /* tablets: the phone beside the words */
  .day__list > .day-step { grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
  .day-step__phone { position: sticky; top: calc(var(--nav-h) + 16px); width: 250px; }
}
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-back { from { opacity: 0; transform: translateX(-24px); } }
.day__nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.day__count { min-width: 5.5em; color: var(--ink-soft); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  /* The title sits on the left, right above the track and the phone, and scrolls away. The track lines up with the
     first step, and once scrolled to, the track and the phone stay put, centered in the window (the script sets
     the exact top). */
  .day {
    grid-template-columns: minmax(340px, 0.9fr) 1.1fr;
    grid-template-areas: "head ." "aside list";
    gap: 40px 56px;
    align-items: start;
  }
  .day__head { grid-area: head; width: 100%; max-width: 520px; justify-self: center; }
  .day__aside {
    grid-area: aside;
    position: sticky;
    top: var(--aside-top, calc(var(--nav-h) + 24px));
    align-content: start;
    gap: 28px;
  }
  .day__list { grid-area: list; }
  .day__phone { display: block; width: min(300px, calc((100svh - var(--nav-h) - 180px) * 0.4614)); }
  .day-step__phone, .day__nav { display: none; }
  .day__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .day__list > .day-step {
    min-height: 72svh;
    align-content: center;
    padding: 40px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .day__list > .day-step:first-child { min-height: 60svh; padding-top: 0; align-content: start; }
  .day__list > .day-step:last-child { min-height: 64svh; }
  .day-step__text {
    padding: 28px;
    border: 1.5px solid var(--edge);
    border-radius: var(--r-card);
    background: var(--paper);
    box-shadow: 0 4px 0 var(--base);
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .day-step.is-now .day-step__text { border-color: rgba(142, 108, 240, 0.55); box-shadow: 0 4px 0 #D9CCFB; }
}

/* Small live bits inside the steps */
.mini { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--cream); }
/* The morning paper, like the app's News screen: masthead, Pip's news, the weather, and the farmers' rumor */
.day-step__demo:has(.paper) { position: relative; z-index: 0; }
.paper {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0 12px 14px 0;
  padding: 16px;
  border: 1.5px solid rgba(51, 38, 31, 0.2);
  border-radius: 10px;
  background: #FFFDF8;
}
.paper::before, .paper::after {
  /* two more sheets under the page, fanned out toward the bottom right */
  content: "";
  position: absolute;
  border: 1.5px solid rgba(51, 38, 31, 0.2);
  border-radius: 10px;
}
.paper::before { z-index: -2; inset: 22px -10px -9px 10px; background: #ECE1CE; transform: rotate(1.3deg); }
.paper::after { z-index: -1; inset: 11px -5px -4.5px 5px; background: #F6EEE1; transform: rotate(0.6deg); }
.paper__mast { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: #3A2C24; font: 400 1.4375rem/1 var(--display); }
.paper__mast svg { width: 16px; height: 16px; color: var(--gold); }
.paper__meta { display: flex; justify-content: space-between; margin: -4px 0 0; padding-bottom: 8px; border-bottom: 2px solid #F0E6D4; color: var(--ink-soft); font-size: 0.8125rem; }
.paper__flash { padding: 12px; border-radius: 16px; background: #F3EEFF; }
.paper__kicker { margin: 0 0 8px; color: var(--work-dark); font: 900 0.75rem/1.2 var(--text); letter-spacing: 0.06em; text-transform: uppercase; }
.paper__pip { display: flex; align-items: flex-start; gap: 16px; }
.paper__pip-art { display: grid; justify-items: center; flex: none; color: var(--work-dark); font: 900 0.8125rem/1.2 var(--text); }
.paper__pip-art img { width: clamp(60px, 16vw, 76px); height: auto; }
.paper__bubble {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0 0 4px;
  font: 700 0.9375rem/1.4 var(--text);
  filter: drop-shadow(0 3px 0 rgba(51, 38, 31, 0.18));
}
.paper__bubble strong { display: block; margin-bottom: 3px; font: 400 1.1875rem/1.15 var(--display); }
.bubble__tail-left { position: absolute; top: 16px; left: -15px; width: 17px; height: 22px; }
.paper__weather { display: flex; align-items: center; gap: 14px; }
.paper__sky {
  display: grid;
  place-items: center;
  flex: none;
  width: 84px; height: 84px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(#A9DCF7, #C6E7F9 50%, #E4F5FC);
}
.paper__sky img { width: 70px; height: 70px; }
.paper__label { display: block; color: var(--ink-soft); font: 900 0.75rem/1.3 var(--text); letter-spacing: 0.06em; text-transform: uppercase; }
.paper__big { display: block; font: 400 1.3125rem/1.1 var(--display); }
.paper__temp { display: block; margin-top: 2px; color: var(--save-dark); font: 400 1.125rem/1.2 var(--display); }
.paper__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.impact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(67, 196, 99, 0.1);
  color: var(--in-text);
  font: 900 0.875rem/1.2 var(--text);
}
.impact svg { width: 18px; height: 18px; }
.paper__rumor { padding: 12px; border-radius: 12px; background: rgba(142, 108, 240, 0.08); }
.paper__rumor p { margin: 0; }
.paper__tag { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--work-dark); color: #fff; font: 900 0.6875rem/1.3 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
.paper__rumor-title { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px !important; font: 400 1.1875rem/1.2 var(--display); }
.paper__rumor-title svg { width: 20px; height: 20px; flex: none; color: var(--work-dark); }
.paper__rumor p:last-child { color: var(--ink-soft); font-size: 0.9375rem; }

.row-buy { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; width: 100%; }
.row-buy > img { grid-row: span 2; width: 42px; height: 50px; object-fit: contain; }
.row-buy__name { font: 400 1.25rem/1.1 var(--display); }
.row-buy__guess { color: var(--ink-soft); font-size: 0.9375rem; font-weight: 800; }
.row-buy__cost { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-weight: 900; }

.chalk {
  width: 100%;
  padding: 16px;
  border: 5px solid #B98150;
  border-radius: 16px;
  background: var(--chalkboard);
  color: var(--chalk);
}
.chalk__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.chalk__name { display: flex; align-items: center; gap: 8px; font: 400 1.3125rem/1 var(--display); }
.chalk__name img { width: 30px; height: 36px; object-fit: contain; }
.chalk__price { display: flex; align-items: center; gap: 8px; }
.chalk__price .coins { font-size: 1.5rem; }
.chalk__meter { margin-top: 14px; }
.chalk__meter-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; }
.chalk__verdict { padding: 4px 11px; border-radius: 999px; background: #8FDDA3; color: #223A31; font-weight: 900; font-size: 0.875rem; white-space: nowrap; }
.people { display: flex; gap: 4px; margin-top: 8px; }
.people svg { flex: 1; height: 22px; color: rgba(244, 241, 230, 0.2); }
.people svg.is-buyer { color: #8FDDA3; }

.sell-scene {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  padding: 52px 4px 0;
  border-radius: 18px;
  background: linear-gradient(#DDF1FF, #F4FBFF 60%, #E9D3AE 60%);
  overflow: hidden;
}
.sell-scene__who { position: relative; display: grid; justify-items: center; }
.sell-scene__who > img { width: 64px; height: 106px; object-fit: contain; object-position: bottom; }
.sell-scene__who .thought { position: absolute; bottom: calc(100% - 8px); left: 50%; transform: translateX(-50%); }
@media (max-width: 420px) {
  .sell-scene { padding-top: 88px; }
  .sell-scene__who:nth-child(2) .thought { bottom: calc(100% + 30px); }
}

/* Today's results, like the app's receipt (ReceiptView.swift): the profit first, then how it was made, then the stock check */
.receipt { display: grid; gap: 10px; width: 100%; max-width: 380px; }
.receipt__card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--edge);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--base);
}
.receipt__label { margin: 0; color: var(--ink-soft); font: 900 0.8125rem/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
.receipt__label--in { color: var(--in-text); letter-spacing: 0.12em; }
.receipt__profit { justify-items: center; gap: 4px; padding-block: 14px 16px; background: #E9F9EC; text-align: center; }
.receipt__big { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--in-text); font: 400 3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.receipt__big img { width: 38px; height: 38px; }
.receipt__that { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
.flow { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; }
.flow__name { font-weight: 900; line-height: 1.15; }
.flow__name small { display: block; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 700; }
.flow__bar { height: 20px; }
.flow__fill { display: block; height: 100%; min-width: 14px; border: 2px solid var(--edge); border-radius: 999px; }
.flow__fill--in { width: 100%; background: var(--in); }
.flow__fill--out { width: 57.7%; background: var(--out); } /* 60 of 104 */
.flow__amount { font: 400 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.flow__amount--in { color: var(--in-text); }
.flow__amount--out { color: var(--out-text); }
.receipt__sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 0; padding-top: 10px; border-top: 2px solid rgba(51, 38, 31, 0.2); font-weight: 900; }
.receipt__sum .coins { color: var(--in-text); font-size: 1.375rem; }
.receipt__waste { display: flex; align-items: center; gap: 10px; margin: 0; }
.receipt__waste > img { width: 30px; height: 35px; flex: none; }
.receipt__waste b { display: block; font-weight: 900; }
.receipt__thrown { display: flex; align-items: center; gap: 5px; color: var(--out-text); font-weight: 900; font-size: 0.9375rem; line-height: 1.3; }
.receipt__thrown svg { width: 15px; height: 15px; flex: none; }

/* Closing time, like the app's clean-up (TradingDayView.swift): the bin pops up beside the stand, what won't
   keep hops in one by one, the lid flaps open, the bin squashes as each lands and counts it. */
.day-step__text:has(.closing) { container-type: inline-size; }
.closing { display: grid; gap: 16px; }
@container (min-width: 500px) {
  .closing { grid-template-columns: minmax(0, 1.05fr) minmax(210px, 1fr); align-items: start; }
}
.closing__stage { position: relative; overflow: hidden; border: 1.5px solid var(--edge); border-radius: 18px; }
.closing__scene { width: 100%; height: auto; }
.closing__sign { font: 400 17px var(--display); letter-spacing: 0.5px; fill: #5A3212; }
.closing__stock rect { fill: var(--paper); stroke: var(--edge); stroke-width: 2; transition: fill 0.2s; }
.closing__stock text { font: 400 13px var(--display); fill: var(--ink); }
.closing__stock.is-empty rect { fill: var(--out); }
.closing__stock.is-empty text { fill: #fff; }
.closing__bin, .closing__squash { transform-origin: 320px 382px; }
.closing__lid { transform-origin: 65px 29px; }
.closing__count { transform-origin: 339px 316px; transition: transform 0.3s var(--pop), opacity 0.2s; }
.closing__count rect { fill: var(--out); stroke: #fff; stroke-width: 2; }
.closing__count text { font: 400 16px var(--display); fill: #fff; }
.closing__count.is-off { transform: scale(0.2); opacity: 0; }
.closing__bin.is-off { visibility: hidden; }
/* The partner's bubble points at the head behind the counter (150, 140 on the stall). */
.closing__say {
  --tail-x: 29px;
  position: absolute;
  left: calc(48.1% - 40px);
  bottom: calc(61.2% + 14px);
  max-width: calc(51.9% + 32px);
  margin: 0;
  padding: 8px 12px 9px;
  font-size: 0.875rem;
  line-height: 1.3;
  transform-origin: 40px 100%;
  transition: transform 0.3s var(--pop), opacity 0.2s;
}
.closing__say.is-off { transform: scale(0.6); opacity: 0; }
.closing__panel { display: grid; gap: 12px; align-content: start; }
.closing__ask { display: grid; margin: 0; font: 400 1.1875rem/1.2 var(--display); }
.closing__hint { color: var(--ink-soft); font: 800 0.875rem/1.35 var(--text); }
.closing__picks { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.closing__picks .pick { justify-content: center; min-width: 0; padding: 4px 10px 4px 4px; font: 400 1.1875rem/1 var(--display); }
.closing__picks .pick img { width: 26px; height: 30px; }
.closing__card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--edge);
  border-radius: 18px;
  background: var(--cream);
}
.closing__moon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--kicker); }
.closing__title { margin: 0; font: 400 1.375rem/1.1 var(--display); }
.closing__sub { margin: 2px 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.35; }
.closing__chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; }
.stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1.5px solid;
  border-radius: 999px;
  font: 900 0.9375rem/1.2 var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat svg { width: 15px; height: 15px; flex: none; }
.stat--thrown { border-color: rgba(200, 68, 58, 0.5); background: rgba(200, 68, 58, 0.12); color: var(--out-text); }
.stat.is-pop { animation: pop-in 0.3s var(--pop); }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
.closing__clean { display: inline-flex; align-items: center; gap: 6px; color: var(--in-text); font: 900 0.9375rem/1.3 var(--text); }
.closing__clean svg { width: 18px; height: 18px; flex: none; }
.closing__sum { display: grid; margin: 0; padding: 2px 14px; border-radius: 14px; background: var(--cream); }
.closing__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 0; }
.closing__row + .closing__row { border-top: 2px dashed var(--sand-dark); }
.closing__row[hidden] + .closing__row { border-top: 0; }
.closing__row dt { font-weight: 900; }
.closing__row dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.closing__lost { color: var(--out-text); }
.closing__profit { color: var(--in-text); }

/* The savings jar: coins drop in once */
.jar-scene { display: flex; align-items: flex-end; gap: 16px; }
.jar { position: relative; width: 108px; flex: none; }
.jar svg { width: 100%; height: auto; overflow: visible; }
/* Before the drop the last coins wait out of sight; with reduced motion (or no script) they are simply there. */
.jar.is-ready .coin-drop { opacity: 0; }
.jar .coin-drop { transform-box: fill-box; transform-origin: 50% 50%; }
.jar.is-dropping .coin-drop { animation: coin-in 0.95s linear both; animation-delay: var(--d); }
.coin-drop.c1 { --d: 0s;    --x0: 15px; --y0: -150px; }
.coin-drop.c2 { --d: 0.16s; --x0: -14px; --y0: -150px; }
.coin-drop.c3 { --d: 0.32s; --x0: 1px;  --y0: -149px; }
.coin-drop.c4 { --d: 0.48s; --x0: 0px;  --y0: -142px; }
/* Like the app's jar: the coin stands on its edge above the lid, drops through the slot, turns flat and bounces. */
@keyframes coin-in {
  0%   { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(0.45, 2.4); animation-timing-function: ease-in; }
  34%  { opacity: 1; transform: translate(0, calc(var(--y0) * 0.62)) scale(0.45, 2.4); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  84%  { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-out; }
  92%  { opacity: 1; transform: translate(0, -3px) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.jar-scene__text { display: grid; gap: 8px; }
.jar-scene__amount { font: 400 1.5rem/1.1 var(--display); }

/* ---------- Partner ---------- */

.partner__grid { display: grid; gap: 32px; align-items: start; }
.partner__controls { display: grid; gap: 22px; margin-top: 28px; }
.field { display: grid; gap: 8px; }
.field__label { font: 400 1.25rem/1.1 var(--display); }
.field__hint { color: var(--ink-soft); font-size: 0.875rem; font-weight: 800; }
.text-input {
  width: 100%;
  max-width: 340px;
  height: 52px;
  padding: 0 16px;
  border: 2px solid var(--edge);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 3px 0 rgba(51, 38, 31, 0.05);
  font: 400 1.25rem/1 var(--display);
}
.text-input::placeholder { color: rgba(107, 90, 82, 0.7); }
.text-input:focus-visible { outline: 3px solid var(--save-dark); outline-offset: 2px; border-radius: 16px; }
.growth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.growth svg { width: 18px; height: 18px; color: var(--ink-soft); }

/* The wardrobe, like the app's: the partner on a stage, three tabs, and a grid of things to try on. */
.wardrobe { display: grid; gap: 16px; padding: 18px; }
.wardrobe__head { display: flex; align-items: center; gap: 12px; }
.wardrobe__head > img { width: 44px; height: 44px; flex: none; }
.wardrobe__head > div { flex: 1; min-width: 0; }
.wardrobe__title { margin: 0; font: 400 1.625rem/1 var(--display); }
.wardrobe__sub { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.9375rem; overflow-wrap: anywhere; }
.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 46px;
  padding: 0 14px 0 8px;
  border: 2px solid rgba(51, 38, 31, 0.2);
  border-radius: 999px;
  background: var(--paper);
}
.wallet-chip img { width: 28px; height: 28px; }
.wallet-chip__value { display: block; font: 400 1.1875rem/1 var(--display); }
.wallet-chip__label { display: block; color: var(--ink-soft); font: 800 0.75rem/1.1 var(--text); }

.partner-stage { position: relative; padding: 18px 4px 0; border-radius: 20px; background: linear-gradient(#EAF6FD, rgba(234, 246, 253, 0) 85%); }
.partner-stage::after {
  /* the stage floor: a sand oval with its own base, like a card */
  content: "";
  position: absolute;
  left: 3%; right: 3%; bottom: 4px;
  height: 24%;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 5px 0 var(--base);
  z-index: 0;
}
.partner-pick {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 4px;
}
.partner-pick__btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0 0 12px;
  border: 0;
  border-radius: 24px;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.partner-pick__art {
  position: relative;
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1;
  transform-origin: 50% 90%;
  transition: transform 0.4s var(--pop);
}
.partner-pick__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.partner-pick__art .face-excited { opacity: 0; }
.partner-pick__btn[aria-checked="true"] .partner-pick__art { transform: scale(1.14) translateY(-4px); }
.partner-pick__btn[aria-checked="true"] .face-excited { opacity: 1; }
.partner-pick__btn[aria-checked="true"] .face-calm { opacity: 0; }
.partner-pick__btn[aria-checked="false"] .partner-pick__wear { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .partner-pick__btn:hover .partner-pick__art { animation: hop 0.5s var(--pop); }
}
@keyframes hop { 40% { translate: 0 -8px; } }
.name-tag {
  position: relative;
  z-index: 2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 12px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--base);
  font: 400 1.0625rem/1.1 var(--display);
  white-space: nowrap;
}
.partner-pick__btn[aria-checked="true"] .name-tag { background: var(--gold); border-color: rgba(51, 38, 31, 0.2); box-shadow: 0 3px 0 #C99A1F; }
.partner-pick__btn:focus-visible { outline-offset: -2px; }

/* What is being tried on, and what it costs in work: one line, always the same height */
.wardrobe__try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  min-height: 72px;
  margin: 0;
  text-align: center;
}
.wardrobe__hint { color: var(--ink-soft); font-size: 0.9375rem; font-weight: 800; }
.wardrobe__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }
.wardrobe__item .coins { font-size: 1.0625rem; }
.wardrobe__item .coins img { width: 20px; height: 20px; }
@media (min-width: 480px) { .wardrobe__try { min-height: 46px; } }

.wardrobe__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wardrobe__tab {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  height: 78px;
  padding: 0;
  border: 1.5px solid var(--edge);
  border-radius: 18px;
  background: #F1EFEC;
  color: var(--ink);
  font: 900 1rem/1.1 var(--text);
  transition: transform 0.2s var(--pop), background-color 0.15s;
}
.wardrobe__tab:hover { background: #E9E6E2; }
.wardrobe__tab img { width: 36px; height: 36px; }
.wardrobe__tab[aria-selected="true"], .wardrobe__tab[aria-selected="true"]:hover { border: 3px solid var(--gold); background: var(--gold-light); }
.wardrobe__tab:active { transform: scale(0.96); }
.wardrobe__tab:focus-visible { border-radius: 18px; }

.wardrobe__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .wardrobe__grid { grid-template-columns: repeat(3, 1fr); } }
.wear {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  margin-bottom: 4px;
  padding: 12px 8px;
  border: 1.5px solid var(--edge);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
  color: var(--ink);
  transition: transform 0.2s var(--pop), box-shadow 0.2s var(--pop);
  -webkit-tap-highlight-color: transparent;
}
.wear__thumb { display: grid; place-items: center; width: 100%; height: 64px; }
.wear__thumb img { width: 100%; max-width: 96px; height: 64px; object-fit: contain; }
.wear--color .wear__thumb img { height: 72px; }
.wear--color .wear__thumb { height: 72px; }
.wear__name { font: 900 0.9375rem/1.2 var(--text); text-align: center; }
.wear .coins { font-size: 1.0625rem; }
.wear .coins img { width: 20px; height: 20px; }
.wear[aria-pressed="true"] { padding: 9.5px 5.5px; border: 4px solid var(--gold); }
.wear:active, .wear.is-down { transform: translateY(2px); box-shadow: 0 2px 0 var(--base); transition-duration: 0.06s; }
.wear:focus-visible { border-radius: 20px; }
.wear.is-locked { opacity: 0.6; cursor: default; }
.wear__lock, .wear__free { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font: 900 0.875rem/1.2 var(--text); }
.wear__lock svg { width: 14px; height: 14px; }
.wardrobe__note { margin: 0; color: var(--ink-soft); font-size: 0.875rem; text-align: center; }

@media (min-width: 1024px) {
  .partner__grid { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
  /* the intro stays in view beside the tall wardrobe */
  .partner__intro { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ---------- Journey: the stage road ---------- */

.road { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.stop { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; align-content: start; }
.stop::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 70px;
  bottom: -26px;
  width: 6px;
  border-radius: 3px;
  background: var(--sand-dark);
}
.stop:last-child::before { display: none; }
.stop.is-done::before { background: var(--in); }
.stop__marker {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 58px;
  height: 58px;
  margin-top: 6px;
  border: 2.5px solid var(--edge);
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink-soft);
  box-shadow: 0 4px 0 var(--base);
}
.stop__marker svg { width: 26px; height: 26px; }
.stop.is-done .stop__marker { background: var(--in); color: #fff; box-shadow: 0 4px 0 var(--in-dark); border-color: rgba(35, 135, 61, 0.5); }
.stop.is-done .stop__marker svg { width: 30px; height: 30px; }
.stop.is-now .stop__marker {
  width: 72px;
  height: 72px;
  margin-top: 0;
  background: var(--gold);
  border-color: rgba(51, 38, 31, 0.18);
  box-shadow: 0 4px 0 #C99A1F, 0 0 0 10px rgba(255, 200, 61, 0.22), 0 0 40px 10px rgba(255, 200, 61, 0.45);
}
.stop.is-now .stop__marker img { width: 44px; height: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .stop.is-now .stop__marker { animation: glow 2.4s ease-in-out infinite; }
}
@keyframes glow {
  50% { box-shadow: 0 4px 0 #C99A1F, 0 0 0 14px rgba(255, 200, 61, 0.16), 0 0 52px 14px rgba(255, 200, 61, 0.5); }
}
.stop__card { display: grid; gap: 8px; padding: 18px 18px 20px; }
.stop__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.stop__head img { width: 64px; height: 58px; flex: none; object-fit: contain; object-position: left bottom; }
.stop__head .kicker { margin: 0; }
.stop__place { color: var(--ink-soft); font-weight: 800; font-size: 0.9375rem; }
.stop__teaches { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 0.9375rem; }
.stop__teaches li { position: relative; padding-left: 20px; }
.stop__teaches li::before {
  content: "";
  position: absolute;
  left: 3px; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kicker);
}
.stop__status { margin-top: 6px; }
.stop.is-future .stop__card { background: #FBF7F1; }
.stop.is-future .stop__head img { filter: saturate(0.6); }
.coins-trio { display: flex; width: 64px; height: 58px; flex: none; align-items: center; justify-content: center; }
.coins-trio img { width: 34px; height: 34px; margin-inline: -6px; }
.coins-trio img:nth-child(2) { margin-top: -18px; }
.road__note { margin-top: 26px; color: var(--ink-soft); font-size: 0.9375rem; }
.road__now {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translateX(-50%);
  padding: 2px 9px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: var(--gold);
  font: 900 0.75rem/1.3 var(--text);
}
.stop__marker-wrap { position: relative; }

@media (min-width: 960px) {
  .road { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .stop { grid-template-columns: 1fr; grid-template-rows: 72px 1fr; justify-items: stretch; gap: 22px; }
  .stop::before {
    left: calc(50% + 40px);
    right: auto;
    top: 33px;
    bottom: auto;
    width: calc(100% - 80px + 16px);
    height: 6px;
  }
  .stop__marker-wrap { justify-self: center; height: 72px; display: grid; align-items: center; }
  .stop__marker { margin-top: 0; }
  .stop__card { height: 100%; align-content: start; }
}

/* ---------- Real life: the gem translator ---------- */

.real__grid { display: grid; gap: 40px; align-items: center; }
.real__device { justify-self: center; }
.translator { display: grid; gap: 14px; }
.gem-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.gem-picks .pick { padding-inline: 14px; }
.gem-picks .pick img { width: 26px; height: 26px; }
.results { display: grid; gap: 12px; }
@media (min-width: 600px) { .results { grid-template-columns: 1fr 1fr; } }
.result { display: flex; align-items: center; gap: 12px; padding: 16px; }
.result svg { width: 30px; height: 30px; flex: none; }
.result__big { display: block; font: 400 1.75rem/1.05 var(--display); font-variant-numeric: tabular-nums; }
.result__small { display: block; color: var(--ink-soft); font-weight: 900; font-size: 0.9375rem; }
.result--work svg { color: var(--save); }
.result--work .result__small { color: var(--save-dark); }
.result--weeks svg { color: var(--kicker); }
.example-note { color: var(--ink-soft); font-size: 0.875rem; }
.wait { display: grid; gap: 10px; margin-top: 20px; }
.wait__title { display: flex; align-items: center; gap: 10px; font: 400 1.375rem/1.1 var(--display); }
.wait__title svg { width: 26px; height: 26px; color: var(--kicker); }
.wait__done { display: flex; align-items: center; gap: 8px; color: var(--in-dark); font-weight: 900; }
.wait__done svg { width: 22px; height: 22px; }
.wait__done[hidden] { display: none; }
@media (min-width: 1024px) {
  .real__grid { grid-template-columns: 1.15fr 0.85fr; gap: 64px; }
}

/* ---------- For parents ---------- */

.parents__grid { display: grid; gap: 36px; align-items: start; }
.parents__device { justify-self: center; }
.parent-cards { display: grid; gap: 20px; }
.p-card { display: grid; gap: 12px; align-content: start; }
.p-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-card h3 { font-size: 1.625rem; }
.limit { display: grid; gap: 12px; margin-top: 2px; container-type: inline-size; }
.limit__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid rgba(51, 38, 31, 0.08); }
.limit__toggle-label { display: inline-flex; align-items: center; gap: 10px; font: 900 1.0625rem/1.2 var(--text); }
.limit__toggle-label svg { width: 22px; height: 22px; color: var(--work-dark); }
.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #CDBFAE;
  transition: background-color 0.2s;
}
.switch[aria-checked="true"] { background: var(--in-dark); }
.switch__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s var(--pop);
}
.switch[aria-checked="true"] .switch__knob { transform: translateX(20px); }
.switch:focus-visible { border-radius: 999px; }
/* One row, fixed columns: the label, the number and its keys stay lined up, and never move when the number changes */
.limit__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label keys";
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.limit__row.is-off { opacity: 0.4; }
.limit__label { grid-area: label; }
.limit__title { display: block; font: 900 0.9375rem/1.25 var(--text); white-space: nowrap; }
.limit__minutes { display: block; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; }
.limit__num { width: 1.6ch; font: 400 1.625rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; }
/* the number sits between its keys, in a fixed width, so the keys never move */
.limit__stepper { grid-area: keys; display: flex; align-items: center; gap: 6px; }
.limit__stepper .round-btn { width: 40px; height: 40px; }
.limit__note { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
@container (max-width: 270px) {
  .limit__title { font-size: 0.875rem; }
  .limit__minutes { font-size: 0.75rem; }
  .limit__stepper { gap: 4px; }
  .limit__stepper .round-btn { width: 36px; height: 36px; }
}
.round-btn--work { background: #D2C4F9; box-shadow: 0 4px 0 #9D93BB; }
.round-btn--work:active, .round-btn--work.is-down { background: #BCA9F6; border-color: var(--edge); box-shadow: 0 1px 0 #9D93BB; }
.charts { display: grid; gap: 10px; }
.chart-row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 900; }
.curve { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 900; }
.curve svg { width: 100%; height: 44px; }
/* one line: the label and the skills being practiced, smaller on narrow cards */
.skills-now { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.875rem; white-space: nowrap; }
.skills-now .pill { padding: 3px 10px; font-size: 0.8125rem; }
.p-card--progress { container-type: inline-size; }
@container (max-width: 300px) {
  .skills-now { gap: 4px; font-size: 0.8125rem; }
  .skills-now .pill { padding: 3px 8px; font-size: 0.75rem; }
}
.question {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(56, 178, 207, 0.12);
  box-shadow: inset 0 0 0 2px rgba(56, 178, 207, 0.35);
}
.question__label { display: flex; align-items: center; gap: 8px; color: var(--keep-dark); font-weight: 900; font-size: 0.9375rem; }
.question__label svg { width: 22px; height: 22px; }
.question__text { font-size: 1.25rem; font-weight: 900; line-height: 1.35; }
.question__mission { color: var(--keep-dark); font-size: 0.875rem; font-weight: 800; }
@media (min-width: 1024px) {
  .parents__grid { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
  .parents__device { position: sticky; top: calc(var(--nav-h) + 24px); }
  .parent-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "limit progress" "talk progress";
    align-items: start;
  }
  .p-card--limit { grid-area: limit; }
  .p-card--progress { grid-area: progress; }
  .p-card--talk { grid-area: talk; }
}

/* ---------- Fair play and privacy ---------- */

.fair { text-align: center; }
.promises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.promise {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px 0 10px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
  font: 400 1.25rem/1 var(--display);
  white-space: nowrap;
}
.promise__check {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--in);
  color: #fff;
}
.promise__check svg { width: 18px; height: 18px; }
.fair__device {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  margin-top: 40px;
  padding: 16px 24px 16px 16px;
  border: 1.5px solid var(--edge);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
  text-align: left;
}
.fair__device-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(62, 139, 250, 0.14);
  color: var(--save-dark);
}
.fair__device-icon svg { width: 30px; height: 30px; }
.fair__device strong { display: block; font: 400 1.5rem/1.1 var(--display); color: var(--ink); }
.fair__device-small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 0.9375rem; }
.fair__more { max-width: 640px; margin: 28px auto 0; color: var(--ink-soft); }

/* ---------- Price ---------- */

.price-card { max-width: 980px; margin: 0 auto; padding: 0; overflow: hidden; }
.price-card__grid { display: grid; }
.price-card__half { display: grid; gap: 14px; align-content: start; padding: 26px 22px 28px; }
.price-card__art { width: 132px; margin-top: 8px; }
@media (min-width: 860px) { .price-card__art { align-self: end; margin-top: auto; } .price-card__half:first-child { align-content: stretch; grid-template-rows: auto auto auto 1fr; } }
.price-card__half + .price-card__half { border-top: 2px dashed var(--sand-dark); background: #FFFCF6; }
.price-card__label { font: 400 1.75rem/1.1 var(--display); }
.price-card__big { font: 400 clamp(2.5rem, 2rem + 2vw, 3.25rem)/1 var(--display); }
.price-card__big small { font-size: 0.5em; color: var(--ink-soft); }
.ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks svg { width: 24px; height: 24px; flex: none; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--in); color: #fff; }
.ticks--gold svg { background: var(--gold); color: var(--ink); }
.price-card__keep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(67, 196, 99, 0.12);
  color: var(--ink);
  font-weight: 900;
}
.price-card__keep svg { width: 24px; height: 24px; flex: none; color: var(--in-dark); }
.price-card__store { color: var(--ink-soft); font-size: 0.875rem; }
.price-card .btn { justify-self: start; margin-top: 6px; }
@media (min-width: 860px) {
  .price-card__grid { grid-template-columns: 1fr 1fr; }
  .price-card__half { padding: 36px; }
  .price-card__half + .price-card__half { border-top: 0; border-left: 2px dashed var(--sand-dark); }
}

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

.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details {
  border: 1.5px solid var(--edge);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--base);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 18px 14px 22px;
  border-radius: 20px;
  font: 400 1.25rem/1.25 var(--display);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333261F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 0.3s var(--pop);
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--gold-light); }
.faq__answer { padding: 0 22px 20px; color: var(--ink-soft); }
.faq__answer p + p { margin-top: 10px; }

/* ---------- Final call to action and footer ---------- */

.final { padding-bottom: clamp(56px, 7vw, 96px); }
.final__card {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 36px 20px 44px;
  text-align: center;
  background: linear-gradient(#DDF1FF, #F4FAFF 45%, #FFFFFF 70%);
  overflow: hidden;
}
.final__partner { position: relative; display: grid; justify-items: center; margin-top: 8px; }
.final__partner::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%; bottom: 2%;
  width: 70%; height: 14%;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 5px 0 var(--base);
  transform: translateX(-50%);
}
.final__partner img { position: relative; z-index: 1; width: min(64vw, 230px); height: auto; aspect-ratio: 1; }
.final__partner .bubble { margin-bottom: 4px; }
.final__card h2 { max-width: 16ch; }
.final__card .lead { max-width: 40ch; }

.site-footer { padding-block: 32px 44px; border-top: 2px solid rgba(51, 38, 31, 0.08); }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--ink); font-weight: 800; }
.site-footer small { color: var(--ink-soft); font-size: 0.875rem; font-weight: 700; }
.site-footer a[aria-current="page"] { color: var(--work-dark); }
/* ---------- Privacy, Terms and Contact ---------- */
.legal { max-width: 760px; margin-inline: auto; padding: clamp(22px, 4vw, 44px); }
.legal h1 { margin: 10px 0 8px; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem); }
.legal .lead { color: var(--ink-soft); }
.legal h2 { margin: 30px 0 8px; font-size: 1.5rem; }
.legal p, .legal li { max-width: 64ch; line-height: 1.6; }
.legal p { margin: 0 0 12px; }
.legal ul { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 1.3em; }
.legal li::marker { color: var(--kicker); }
.legal__back { font-weight: 900; text-decoration: none; }
.legal__back:hover { text-decoration: underline; }
.legal__date { color: var(--ink-soft); font-size: 0.9375rem; }
.legal__mail { display: flex; align-items: center; gap: 10px; font: 400 1.375rem/1.2 var(--display); }
.legal__mail svg { width: 26px; height: 26px; flex: none; color: var(--work-dark); }
.site-footer__note { margin-top: 14px; color: var(--ink-soft); font-size: 0.875rem; }

/* ---------- Reduced motion: no automatic motion, final states at once ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  .reveal-wait { opacity: 1 !important; transform: none !important; }
  .nav { position: static; }
}