/* Caterpillar Calorie Tracker: site styles
   ------------------------------------------------------------------
   Design notes, so future edits keep the through-line:

   · Bright and alive. The palette is the app icon's fruit bowl: leaf and
     lime greens, sunshine, tangerine, strawberry, sky and blueberry. Each
     card or panel picks one through --tint, so colour is everywhere without
     every element shouting at once.
   · Rounded type. Fredoka for headings, Nunito for reading. Both are soft
     and friendly in the way the app's SF Rounded is; ui-rounded alone only
     works in Safari, so Chrome on a Mac showed plain SF Pro.
   · The app's own art. The painted backgrounds, the real screens and the
     same caterpillar sprites, never stock icons or emoji.
   · The caterpillar is built by site.js from the app's geometry
     (CaterpillarGeometry.swift): 11 segments at a full day, 45% overlap,
     a 1.25x head sitting 0.17 of a segment above centre, garden shades
     cycling light, mid, deep. Change it there, then here.
   · Motion is decorative and always opt-out. Everything falls back to a
     static, correct layout under prefers-reduced-motion.
   · Light and dark both first-class. The palette is set once as custom
     properties and flipped wholesale.
   ------------------------------------------------------------------ */

:root {
  --ink:        #10261a;
  --ink-soft:   #3a5644;
  --ink-faint:  #5b7564;
  --paper:      #fffcf2;
  --surface:    #ffffff;
  --surface-2:  #f2f8e6;
  --line:       #e3eed7;

  /* The fruit bowl */
  --leaf:       #23a645;
  --leaf-deep:  #0f6e2c;
  --lime:       #a6e22e;
  --sun:        #ffc928;
  --tangerine:  #ff8a1c;
  --berry:      #ff4d6d;
  --sky:        #2bb3f3;
  --blueberry:  #5b6cff;
  --grape:      #9d5cf6;
  --head:       #ff6a3d;

  --grad-sun:   linear-gradient(180deg, #ffd84a 0%, #ffb21f 100%);
  --grad-leaf:  linear-gradient(135deg, #b7ef3a 0%, #36c057 45%, #0f8a3c 100%);
  --grad-pop:   linear-gradient(100deg, #ff8a1c 0%, #ff4d6d 55%, #c147e9 100%);

  --link:       #0f6e2c;

  --radius:     22px;
  --radius-lg:  34px;
  --shadow:     0 1px 2px rgba(16,38,26,.05), 0 10px 30px rgba(16,38,26,.08);
  --shadow-lg:  0 2px 6px rgba(16,38,26,.06), 0 28px 70px rgba(16,38,26,.16);
  --measure:    68ch;
  --pad:        clamp(18px, 5vw, 40px);

  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body:    "Nunito", ui-rounded, "SF Pro Rounded", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #f1f8ea;
    --ink-soft:  #c0d6c2;
    --ink-faint: #94b19a;
    --paper:     #07150c;
    --surface:   #0f2417;
    --surface-2: #12301c;
    --line:      #1f4229;
    --link:      #a6e22e;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 28px 70px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 17.5px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
strong { font-weight: 800; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 .5em;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; }
h3 { font-size: 1.36rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
p  { margin: 0 0 1em; }

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

/* ── Navigation ─────────────────────────────────────────────── */
/* Scoped to a DIRECT child of body. The table of contents on the legal pages
   is also a <nav>, and an unscoped selector turned it into a sticky bar. */

body > nav {
  position: sticky; top: 12px; z-index: 50;
  display: flex; align-items: center; gap: 2px;
  width: calc(100% - 24px); max-width: 1156px;
  margin: 12px auto 0; padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: 0 8px 30px rgba(16,38,26,.10);
  transition: box-shadow .25s ease, background .25s ease;
}
body > nav.scrolled {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 10px 34px rgba(16,38,26,.16);
}
body > nav .brand {
  display: flex; align-items: center; gap: 10px;
  font: 700 1.22rem/1 var(--font-display);
  color: var(--ink); text-decoration: none; margin-right: auto;
}
/* The icon is full-bleed now, as Apple wants, so the page rounds it the way
   iOS does: about 22.5% of its width. */
body > nav .brand img { width: 34px; height: 34px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16,38,26,.18); }
body > nav a:not(.brand) {
  color: var(--ink-soft); text-decoration: none; font-size: .98rem;
  font-weight: 700; padding: 9px 14px; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
body > nav a:not(.brand):not(.cta):hover {
  color: var(--ink); background: color-mix(in srgb, var(--lime) 28%, transparent);
}
body > nav .cta {
  background: var(--grad-sun); color: #2a1800 !important;
  padding: 10px 18px !important; margin-left: 4px;
  box-shadow: 0 3px 0 #e08a00, 0 6px 16px rgba(255,170,0,.35);
}
body > nav .cta:hover { transform: translateY(-1px); }
@media (max-width: 620px) { body > nav .hide-sm { display: none; } }

/* ── Hero ───────────────────────────────────────────────────── */
/* Every page's hero paints one of the app's own backgrounds, full colour,
   with a wash of paper behind the words so they stay easy to read. The
   picture is chosen per page with --bg. */

.hero {
  position: relative; isolation: isolate;
  margin-top: -70px;                      /* run up under the floating nav */
  padding: calc(clamp(56px, 10vw, 112px) + 70px) 0 clamp(48px, 7vw, 84px);
  text-align: center; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--bg, none) center 30% / cover no-repeat;
  filter: saturate(1.25);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 45%,
      color-mix(in srgb, var(--paper) 84%, transparent) 0%,
      color-mix(in srgb, var(--paper) 58%, transparent) 55%,
      color-mix(in srgb, var(--paper) 12%, transparent) 100%),
    linear-gradient(to bottom, transparent 70%, var(--paper) 100%);
}
.hero > * { position: relative; }
/* Dark paper is a much heavier veil than cream, and light text over a busy
   painting needs more of it, so dark mode washes harder. */
@media (prefers-color-scheme: dark) {
  .hero:not(.hero-home)::after {
    background:
      radial-gradient(75% 75% at 50% 45%,
        color-mix(in srgb, var(--paper) 90%, transparent) 0%,
        color-mix(in srgb, var(--paper) 74%, transparent) 55%,
        color-mix(in srgb, var(--paper) 35%, transparent) 100%),
      linear-gradient(to bottom, transparent 70%, var(--paper) 100%);
  }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 .82rem/1 var(--font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--leaf-deep);
  background: color-mix(in srgb, var(--lime) 55%, white);
  padding: 9px 16px; border-radius: 999px; margin-bottom: 22px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--leaf) 45%, transparent);
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--leaf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 25%, transparent);
}
@media (prefers-color-scheme: dark) {
  .eyebrow { color: #0b3d18; }
}
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero .sub {
  max-width: 50ch; margin: 18px auto 0;
  font-size: clamp(1.06rem, 2.1vw, 1.24rem); color: var(--ink-soft); font-weight: 600;
}

/* The accent word: a sunset gradient with a hand-drawn squiggle under it. */
.accent {
  position: relative; white-space: nowrap;
  background: var(--grad-pop);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; padding: 0 .04em;
}
.accent::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -.14em;
  height: .22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 15 2 30 7 T 60 7 T 90 7 T 118 5' fill='none' stroke='%23ffc928' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: center; margin-top: 32px;
}
/* Chunky, pressable buttons: a solid lip underneath that squashes on tap. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 1.08rem/1 var(--font-display); letter-spacing: .01em;
  text-decoration: none; padding: 17px 30px; border-radius: 999px;
  border: 0; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-primary {
  background: var(--grad-sun); color: #2a1800;
  box-shadow: 0 5px 0 #e08a00, 0 12px 28px rgba(255,160,0,.45);
}
.btn-primary:hover { transform: translateY(-2px); filter: saturate(1.15);
  box-shadow: 0 7px 0 #e08a00, 0 16px 34px rgba(255,160,0,.5); }
.btn-primary:active { transform: translateY(4px);
  box-shadow: 0 1px 0 #e08a00, 0 6px 14px rgba(255,160,0,.4); }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--leaf) 30%, var(--line)), var(--shadow);
}
.btn-ghost:hover { transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(4px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--leaf) 30%, var(--line)); }
.store-note { display: block; margin-top: 18px; font-size: .92rem; font-weight: 700; color: var(--ink-faint); }

/* ── Home hero: words one side, the app the other ───────────── */

.hero-home { text-align: left; }
.hero-home::after {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--paper) 94%, transparent) 0%,
      color-mix(in srgb, var(--paper) 86%, transparent) 40%,
      color-mix(in srgb, var(--paper) 25%, transparent) 72%,
      transparent 100%),
    linear-gradient(to bottom, transparent 78%, var(--paper) 100%);
}
.hero-grid {
  display: grid; align-items: center; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1.15fr .85fr;
}
.hero-home h1 { margin-inline: 0; max-width: 13ch; }
.hero-home .sub { margin-inline: 0; }
.hero-home .cta-row { justify-content: flex-start; }
.hero-home .growth { margin-inline: 0; padding: 0; }

.hero-stage { position: relative; display: flex; justify-content: center; padding: 10px 0 30px; }
.hero-stage .phone { --w: clamp(230px, 24vw, 300px); rotate: 4deg; }

@media (max-width: 860px) {
  .hero-home { text-align: center; }
  .hero-home::after {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--paper) 92%, transparent) 0%,
        color-mix(in srgb, var(--paper) 82%, transparent) 55%,
        color-mix(in srgb, var(--paper) 35%, transparent) 80%,
        var(--paper) 100%);
  }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-home h1, .hero-home .sub { margin-inline: auto; }
  .hero-home .cta-row { justify-content: center; }
  .hero-home .growth { margin-inline: auto; }
  .hero-stage .phone { --w: min(62vw, 250px); }
}

/* Stickers that float around the phone: little moments from the app. */
.sticker {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(16,38,26,.18), 0 2px 0 color-mix(in srgb, var(--tint, var(--leaf)) 45%, transparent);
  font-size: .9rem; line-height: 1.2; text-align: left; white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.sticker img { width: 40px; height: 40px; object-fit: contain; }
.sticker b { display: block; font: 600 1rem/1.15 var(--font-display); color: var(--ink); }
.sticker span { color: var(--ink-faint); font-weight: 700; }
.sticker.s1 { --tint: var(--tangerine); left: -6%; top: 16%; }
.sticker.s2 { --tint: var(--leaf); right: -8%; top: 48%; animation-delay: -2s; }
.sticker.s3 { --tint: var(--grape); left: 0; bottom: 8%; animation-delay: -4s; }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@media (max-width: 860px) {
  .sticker { font-size: .8rem; padding: 8px 12px 8px 8px; }
  .sticker img { width: 32px; height: 32px; }
  .sticker.s1 { left: 2%; } .sticker.s2 { right: 0; } .sticker.s3 { left: 4%; }
}

/* ── Phone frame for the real screens ───────────────────────── */

.phone {
  --w: 260px;
  position: relative; flex: none; width: var(--w);
  aspect-ratio: 1206 / 2622;
  padding: calc(var(--w) * .034);
  border-radius: calc(var(--w) * .165);
  background: linear-gradient(145deg, #3a3f45, #0c0e10 60%);
  box-shadow:
    inset 0 0 0 1.5px #5b6168,
    0 34px 70px -22px rgba(10,40,20,.55),
    0 14px 28px -10px rgba(0,0,0,.3);
}
.phone img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--w) * .135);
}
.phone::after {                                  /* the Dynamic Island */
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  top: calc(var(--w) * .062); width: calc(var(--w) * .29);
  height: calc(var(--w) * .085); border-radius: 999px; background: #000;
}

/* ── The caterpillar ─────────────────────────────────────────── */
/* Built by site.js. --seg is set from the measured width, the same way the
   app sizes its bar from a GeometryReader; the value here is only a
   fallback for a no-JS render.

   It walks the way the app's does: the three walk frames cycle every 0.18s
   (one sprite strip, steps(3)), and a bounce wave runs down the body, each
   segment 0.045s behind the one before, so the motion travels from tail to
   head. Two elements per part, because the grow-in and the walk both want
   transform. */

.cat { --seg: 48px; position: relative; width: 100%; }
.cat-track {
  position: relative; height: calc(var(--seg) * 1.42);
  margin-right: auto;
}
.cat.center .cat-track { margin-inline: auto; }
.cat .seg, .cat .head {
  position: absolute; bottom: calc(var(--seg) * .08);
  width: calc(var(--seg) * .882); height: var(--seg);
  opacity: 0;
  animation: sprout .5s cubic-bezier(.2,1.5,.4,1) forwards;
}
/* The head: 1.25 segments tall. In the app both are centred on the same
   line and the head is raised 8pt at a 52pt segment, so its chin sits just
   above the body's feet: 0.5 - 0.625 + 0.154 = 0.03 of a segment. Raise it
   any more and it floats off the front like a balloon. */
.cat .head {
  width: calc(var(--seg) * 1.103); height: calc(var(--seg) * 1.25);
  bottom: calc(var(--seg) * (.08 + .03)); z-index: 20;
}
.cat .seg > i, .cat .head > i {
  display: block; width: 100%; height: 100%;
  background-repeat: no-repeat;
  animation: bob .54s ease-in-out infinite;
}
.cat .seg > i {
  background-size: 300% 100%;
  animation: walk .54s steps(3) infinite, bob .54s ease-in-out infinite;
}
.cat .seg.t0 > i { background-image: url("assets/cat/walk-light.png"); }
.cat .seg.t1 > i { background-image: url("assets/cat/walk-mid.png"); }
.cat .seg.t2 > i { background-image: url("assets/cat/walk-deep.png"); }
.cat .head > i {
  background-size: 100% 100%; transform-origin: 50% 100%;
  transition: rotate .35s ease, translate .35s ease, scale .08s ease;
}
.cat .head.glance > i { rotate: 9deg; translate: 0 calc(var(--seg) * -.06); }
.cat .head.glance.left > i { rotate: -9deg; }
.cat .head.blink > i { scale: 1 .9; }
.cat .ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--lime) 85%, transparent),
    color-mix(in srgb, var(--lime) 10%, transparent));
}
@keyframes sprout {
  from { opacity: 0; transform: translateY(10px) scale(.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* steps(3) over 0 to 150% lands on 0, 50% and 100%: the three frames. */
@keyframes walk {
  from { background-position-x: 0%; }
  to   { background-position-x: 150%; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--seg) * -.07)); }
}

/* The ground line is the whole day, so the full-length body is sized to
   span it exactly (data-max is effectively off): 7 of 11 segments then sits
   67% along, where 1,180 of 1,754 belongs. */
.growth { margin: clamp(30px, 5vw, 48px) auto 0; max-width: 400px; }
.growth-caption {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px; font-size: .9rem; color: var(--ink-faint); font-weight: 800;
}
.growth-caption b { color: var(--leaf-deep); }
@media (prefers-color-scheme: dark) { .growth-caption b { color: var(--lime); } }

/* ── Food ticker ─────────────────────────────────────────────── */

/* The band is tilted and wider than the page; its wrapper clips the overhang
   so nothing can scroll sideways, with room above and below for the tilt
   and the shadow. */
.ticker-band { overflow: hidden; padding: 26px 0 40px; margin: -16px 0 -30px; }
.ticker {
  position: relative; overflow: hidden; padding: 18px 0;
  background: var(--grad-leaf);
  rotate: -1.2deg; margin: 0 -24px;
  box-shadow: 0 14px 40px rgba(15,110,44,.25);
}
.ticker-row {
  display: flex; gap: 14px; width: max-content;
  animation: ticker 70s linear infinite;
}
.ticker span {
  font: 600 1.08rem/1 var(--font-display); white-space: nowrap;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--ink);
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.ticker span:nth-child(5n+1) { background: #fff3c4; }
.ticker span:nth-child(5n+2) { background: #ffe0e6; }
.ticker span:nth-child(5n+3) { background: #dff4ff; }
.ticker span:nth-child(5n+4) { background: #ecdfff; }
.ticker span { color: #10261a; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Sections ───────────────────────────────────────────────── */

section { padding: clamp(60px, 9vw, 110px) 0; }
section > .wrap > h2 { max-width: 18ch; }
.lede {
  max-width: 56ch; font-size: clamp(1.06rem, 2vw, 1.2rem); font-weight: 600;
  color: var(--ink-soft); margin-bottom: 40px;
}
.center { text-align: center; }
.center h2, .center .lede { margin-inline: auto; }

.kicker {
  display: inline-block; font: 600 1.05rem/1 var(--font-display);
  color: var(--tangerine); margin-bottom: 12px; letter-spacing: .02em;
}

.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* Every card carries a --tint from the fruit bowl. */
.card {
  --tint: var(--leaf);
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--tint) 20%, transparent) 0%, transparent 55%),
    var(--surface);
  border: 2px solid color-mix(in srgb, var(--tint) 22%, var(--line));
  border-radius: var(--radius-lg); padding: 28px 26px 26px;
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-6px) rotate(-.6deg);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--tint) 30%, transparent);
}
.card:nth-child(6n+1) { --tint: var(--tangerine); }
.card:nth-child(6n+2) { --tint: var(--sky); }
.card:nth-child(6n+3) { --tint: var(--berry); }
.card:nth-child(6n+4) { --tint: var(--grape); }
.card:nth-child(6n+5) { --tint: var(--sun); }
.card:nth-child(6n+6) { --tint: var(--leaf); }
.card p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 0; }
.card h3 { margin-top: 2px; }
.card .icon {
  width: 72px; height: 72px; margin-bottom: 18px; padding: 8px;
  border-radius: 22px; object-fit: contain;
  background: color-mix(in srgb, var(--tint) 18%, var(--surface));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tint) 35%, transparent);
  transition: rotate .3s cubic-bezier(.2,.8,.3,1.5), scale .3s cubic-bezier(.2,.8,.3,1.5);
}
.card:hover .icon { rotate: -8deg; scale: 1.08; }
.card .icon.chip { padding: 15px; }

.alt { background: var(--surface-2); }

/* A big rounded colour panel for the showcase and the closing CTA. */
.panel {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 clamp(8px, 2vw, 22px); border-radius: clamp(28px, 5vw, 52px);
  color: #fff;
}
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--bg, none) center 35% / cover no-repeat;
}
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(166,226,46,.35), transparent 70%),
    radial-gradient(50% 60% at 90% 100%, rgba(255,138,28,.30), transparent 70%),
    linear-gradient(160deg, rgba(10,74,32,.90), rgba(17,120,52,.80) 55%, rgba(8,60,26,.92));
}
.panel h2, .panel h3 { color: #fff; }
.panel .lede { color: rgba(255,255,255,.88); }
.panel .kicker { color: var(--sun); }

/* ── Showcase: real screens, side by side ───────────────────── */

.shots {
  display: flex; gap: clamp(18px, 3vw, 34px); justify-content: center;
  padding: 10px 4px 26px;
}
.shot { margin: 0; text-align: center; }
.shot .phone { --w: clamp(190px, 19vw, 236px); margin: 0 auto 18px; }
.shot:nth-child(odd) .phone  { rotate: -2.5deg; }
.shot:nth-child(even) .phone { rotate: 2.5deg; translate: 0 26px; }
.shot:nth-child(even) figcaption { translate: 0 26px; }
.shot figcaption { font: 600 1.18rem/1.2 var(--font-display); }
.shot figcaption span { display: block; font: 700 .9rem/1.4 var(--font-body);
  color: rgba(255,255,255,.75); margin-top: 4px; }
@media (max-width: 1000px) {
  .shots {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: center; }
  .shot:nth-child(even) .phone, .shot:nth-child(even) figcaption { translate: none; }
}
.swipe-hint { display: none; text-align: center; font-weight: 800; font-size: .9rem;
  color: rgba(255,255,255,.75); margin-top: 6px; }
@media (max-width: 1000px) { .swipe-hint { display: block; } }

/* ── Feature rows: art one side, words the other ─────────────── */

.split {
  display: grid; gap: clamp(24px, 5vw, 64px); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.split + .split { margin-top: clamp(48px, 8vw, 92px); }
.split .art {
  --tint: var(--leaf);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; padding: 36px; border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 80% at 30% 20%, color-mix(in srgb, var(--tint) 55%, transparent) 0%, transparent 70%),
    radial-gradient(60% 70% at 85% 90%, color-mix(in srgb, var(--tint) 35%, transparent) 0%, transparent 70%),
    color-mix(in srgb, var(--tint) 14%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tint) 25%, transparent);
}
.split .art.sun   { --tint: var(--sun); }
.split .art.sky   { --tint: var(--sky); }
.split .art.berry { --tint: var(--berry); }
.split .art.grape { --tint: var(--grape); }
.split .art.tangerine { --tint: var(--tangerine); }
.split .art > img { width: clamp(110px, 16vw, 160px); height: auto;
  filter: drop-shadow(0 14px 22px rgba(16,38,26,.22)); }
.split .art > img.appicon { border-radius: 22.5%; }
/* Caterpillars in a panel span it, however many segments they have. */
.split .art .cat { width: 100%; }
.split .art .phone { --w: 200px; rotate: -3deg; margin-bottom: -120px; }
.split .art.has-phone { padding-bottom: 0; align-items: flex-start; min-height: 320px; }
.split.flip .art { order: 2; }
@media (max-width: 760px) { .split.flip .art { order: 0; } }
.split h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.split p { color: var(--ink-soft); font-size: 1.06rem; }

.step-no {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  margin-bottom: 14px; border-radius: 18px;
  font: 700 1.5rem/1 var(--font-display); color: #fff;
  background: var(--tint, var(--leaf)); rotate: -6deg;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tint, var(--leaf)) 60%, black);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tags span {
  font-weight: 800; font-size: .88rem; padding: 6px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--tint, var(--leaf)) 16%, var(--surface));
  color: var(--ink);
}

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

.facts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fact {
  --tint: var(--leaf);
  text-align: left; border-radius: var(--radius-lg); padding: 28px 26px;
  background: color-mix(in srgb, var(--tint) 14%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--tint) 30%, transparent);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.3);
}
.fact:hover { transform: translateY(-5px) rotate(.8deg); }
.fact:nth-child(4n+1) { --tint: var(--leaf); }
.fact:nth-child(4n+2) { --tint: var(--sky); }
.fact:nth-child(4n+3) { --tint: var(--berry); }
.fact:nth-child(4n+4) { --tint: var(--sun); }
.fact .n {
  display: block; font: 700 2.3rem/1.05 var(--font-display);
  color: color-mix(in srgb, var(--tint) 75%, black);
}
@media (prefers-color-scheme: dark) {
  .fact .n { color: color-mix(in srgb, var(--tint) 80%, white); }
}
.fact p { margin: 10px 0 0; font-size: 1rem; color: var(--ink-soft); }

/* ── Closing CTA ────────────────────────────────────────────── */

.cta-banner { text-align: center; padding: clamp(52px, 8vw, 96px) var(--pad); }
.cta-banner h2 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .3em; }
.cta-banner p { color: rgba(255,255,255,.9); max-width: 44ch; margin-inline: auto;
  font-size: 1.12rem; font-weight: 600; }
.cta-banner .store-note { color: rgba(255,255,255,.85); }
.cta-banner .cat { max-width: 560px; margin: 0 auto 26px; }
.cta-banner .cat .ground {
  background: linear-gradient(to right, transparent, rgba(166,226,46,.85) 20%,
    rgba(166,226,46,.85) 80%, transparent);
}
.cta-banner .btn-primary { margin-top: 12px; }
#get { padding-bottom: 0; }
.cta-banner a:not(.btn) { color: #fff; }

/* ── Slim hero for reading pages ────────────────────────────── */

.hero-slim { padding-bottom: clamp(32px, 5vw, 56px); }
.hero-slim h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); }
.hero-slim .updated { margin: 6px 0 0; }

/* ── Legal pages ────────────────────────────────────────────── */

.legal { max-width: var(--measure); margin: 0 auto; padding: 20px var(--pad) 80px; }
.legal h2 {
  font-size: 1.45rem; margin: 2.1em 0 .5em; padding-top: .9em;
  border-top: 2px dashed var(--line); scroll-margin-top: 90px;
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--ink-soft); font-size: 1.02rem; }
.legal ul { padding-left: 1.15em; }
.legal li { margin-bottom: .5em; }
.legal li::marker { color: var(--leaf); }
.updated {
  display: inline-block; font-size: .88rem; font-weight: 800;
  color: var(--leaf-deep); background: color-mix(in srgb, var(--lime) 45%, white);
  border-radius: 999px; padding: 7px 15px; margin-bottom: 1.6em;
}
.summary {
  background:
    radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--sun) 30%, transparent), transparent 60%),
    var(--surface);
  border: 2px solid color-mix(in srgb, var(--sun) 45%, var(--line));
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 2em;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--sun) 40%, transparent);
}
.summary p:last-child { margin-bottom: 0; }
.toc {
  background: var(--surface-2); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 2.2em;
  columns: 2; column-gap: 26px;
}
.toc a { display: block; font-size: .96rem; font-weight: 700; padding: 4px 0; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 560px) { .toc { columns: 1; } }

/* ── FAQ ────────────────────────────────────────────────────── */

details.qa {
  --tint: var(--leaf);
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 2px 22px; margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
details.qa:hover { border-color: color-mix(in srgb, var(--tint) 40%, var(--line)); }
details.qa[open] {
  border-color: color-mix(in srgb, var(--tint) 55%, var(--line));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--tint) 25%, transparent), var(--shadow);
}
details.qa summary {
  cursor: pointer; padding: 18px 0; list-style: none;
  font: 600 1.15rem/1.3 var(--font-display);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+"; flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font: 800 1.5rem/1 var(--font-body); color: #fff; padding-bottom: 2px;
  background: var(--tint); transition: rotate .25s ease;
}
details.qa[open] summary::after { content: "\2212"; rotate: 180deg; }
details.qa p { color: var(--ink-soft); font-size: 1.02rem; padding-bottom: 6px; }
details.qa ul { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 14px; padding-left: 1.1em; }
details.qa li { margin-bottom: 8px; }
details.qa li::marker { color: var(--tint); }
details.qa li strong { color: var(--ink); }
.faq-group {
  font-size: 1.6rem; margin: 46px 0 14px; max-width: none !important;
  display: flex; align-items: center; gap: 12px;
}
.faq-group::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tint, var(--leaf));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tint, var(--leaf)) 25%, transparent);
}
.faq-group:first-of-type { margin-top: 8px; }

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

footer {
  position: relative; margin-top: clamp(40px, 6vw, 70px);
  background: #0b2414; color: rgba(241,248,234,.7);
  padding: 56px var(--pad) 40px; text-align: center; font-size: .95rem; font-weight: 600;
}
/* A scalloped top edge, like a leaf. */
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 23px;
  background: radial-gradient(circle at 22px 26px, #0b2414 22px, transparent 23px) 0 0 / 44px 23px repeat-x;
}
footer .marque {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 700 1.3rem/1 var(--font-display); color: #fff; margin-bottom: 20px;
}
footer .marque img { width: 40px; height: 40px; border-radius: 9px; }
footer .links {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: center; margin-bottom: 20px;
}
footer .links a { color: var(--lime); text-decoration: none; font-weight: 800; }
footer .links a:hover { color: #fff; text-decoration: underline; }

/* ── Scroll reveal ──────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(26px) scale(.97); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1.2);
}

/* ── Motion off ─────────────────────────────────────────────── */
/* Everything above must stay legible and laid out with all motion removed.
   The caterpillar especially has to appear fully grown rather than stuck at
   zero opacity, which is what an animation-only reveal would leave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cat .seg, .cat .head { opacity: 1; transform: none; }
  .cat .seg > i { background-position-x: 0%; }
  .reveal { opacity: 1; transform: none; }
  .ticker-row { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker-row span[aria-hidden] { display: none; }
  .card:hover, .fact:hover, .btn:hover { transform: none; }
}

/* On a phone the feature cards go side-on: icon beside the title, words
   underneath, so six of them don't stack into a very long scroll. */
@media (max-width: 560px) {
  .card {
    display: grid; grid-template-columns: 60px 1fr; column-gap: 16px;
    align-items: center; padding: 22px 20px;
  }
  .card .icon { width: 60px; height: 60px; margin: 0; border-radius: 18px; }
  .card h3 { margin: 0; }
  .card p { grid-column: 1 / -1; margin-top: 12px; }
}

@media (prefers-color-scheme: dark) {
  .hero .sub { color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
}