/* Habit Garden: Happy Family, landing v2 ("The Garden Stage").
   Colours only from tokens.css (design/v2/tokens.css, generated from design/theme.json): no new hues.
   Two layers, never mixed: the world (sky, island, companions, Mo) and a quiet paper interface.
   Glass only floats: the nav capsule and the name capsules on the island. Content is paper.
   World constants below are copied from the approved prototype: SLOTS[4] and the camera numbers
   (design/v2/flows/home.js), PLANT_FACE / PET_FACE (data.js), the sun and stars (flows/home.css),
   the face and glass recipes (kit.css). */

/* ---------------------------------------------------------------- fonts: Nunito for non-Apple systems */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/nunito-vietnamese-v32.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/nunito-latin-ext-v32.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/nunito-latin-v32.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --gutter: 20px;
  --wrap: 1120px;
  --glass-hi: rgb(255 255 255 / 70%);
  --glass-edge: rgb(255 255 255 / 45%);
  --glass-lo: rgb(31 46 38 / 6%);
  --glass-secondary: color-mix(in srgb, var(--c-text) 78%, transparent);
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--c-text) 5%, transparent), 0 6px 18px color-mix(in srgb, var(--c-text) 5%, transparent);
  --shadow-raised: 0 2px 6px color-mix(in srgb, var(--c-text) 6%, transparent), 0 12px 28px color-mix(in srgb, var(--c-text) 8%, transparent);
  --shadow-float: 0 8px 24px var(--c-glass-shade);
  --focus-ring: 0 0 0 3px var(--c-background), 0 0 0 5px var(--c-focus);
  --on-sky-secondary: color-mix(in srgb, var(--c-text) 80%, transparent);
  --bezel: var(--c-text);
  --bezel-ring: color-mix(in srgb, var(--c-text) 14%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass-hi: rgb(255 255 255 / 16%);
    --glass-edge: rgb(255 255 255 / 12%);
    --glass-lo: rgb(0 0 0 / 20%);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 18px rgb(0 0 0 / 22%);
    --shadow-raised: 0 2px 6px rgb(0 0 0 / 34%), 0 12px 28px rgb(0 0 0 / 30%);
    --bezel: var(--c-surface-sunk);
    --bezel-ring: color-mix(in srgb, var(--c-text) 18%, transparent);
  }
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: 1.0625rem; /* body 17 */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
.nowrap { white-space: nowrap; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
h1, h2, h3, .brand, .eyebrow, .capsule, .num, .store-big { font-family: var(--font-display); }
a { color: var(--c-accent); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.skip { position: absolute; left: 12px; top: -100vh; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--c-surface-raised); color: var(--c-text); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* type roles (theme.json rolesV2, scaled up for a marketing page on the same faces and weights) */
.eyebrow { font-size: 0.8125rem; line-height: 1.2; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.7vw, 4.625rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.07; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem); line-height: 1.42; font-weight: 500; text-wrap: balance; }
.section-lead { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.45; color: var(--c-muted); margin-top: 12px; }

/* ---------------------------------------------------------------- glass (floating only; kit.css recipe) */
.glass {
  background: var(--c-glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 0.5px var(--glass-edge), inset 0 -1px 0 var(--glass-lo), var(--shadow-float);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--c-glass-fallback); box-shadow: inset 0 0 0 1px var(--c-border), var(--shadow-float); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--c-glass-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--c-border), var(--shadow-float); }
}

/* ---------------------------------------------------------------- nav: one floating glass capsule */
.nav-wrap { container-type: inline-size; position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 0; right: 0; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.nav { pointer-events: auto; width: min(100%, 980px); min-height: 52px; border-radius: 999px; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; }
.brand { margin-right: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); text-decoration: none; }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; color: var(--c-text); text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.nav-links a:hover { background: var(--a-pressed); }
.nav-status { padding: 0 12px 0 10px; font-size: 0.875rem; font-weight: 600; color: var(--glass-secondary); white-space: nowrap; }
.nav-lang { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; color: var(--c-text); text-decoration: none; font-size: 0.875rem; font-weight: 700; }
.nav-lang:hover { background: var(--a-pressed); }
.nav-lang-long { display: none; }
@media (min-width: 760px) { .nav-lang-short { display: none; } .nav-lang-long { display: inline; } }
@media (max-width: 759px) { .nav-links, .nav-status-long { display: none; } }
/* Large text on a phone: the status makes way for the language switch, and the hero starts below the taller pill. */
@container (max-width: 14rem) { .nav-status { display: none; } }

/* ---------------------------------------------------------------- hero: the world */
.hero { position: relative; isolation: isolate; overflow: clip; padding: calc(env(safe-area-inset-top, 0px) + max(clamp(118px, 2vw + 104px, 132px), 5rem)) 0 clamp(8px, 2vw, 24px); }
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--sky-day-0) 0%, var(--sky-day-1) 42%, var(--sky-day-2) 76%, var(--c-background) 100%); }
.sun { position: absolute; top: clamp(62px, 6vw + 38px, 140px); right: clamp(22px, 13vw, 230px); width: clamp(64px, 5vw + 40px, 116px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff7e0 0 42%, rgb(255 236 190 / 70%) 55%, rgb(255 236 190 / 0) 72%); }
.moon, .stars { display: none; }
.cloud { position: absolute; background: center / contain no-repeat; animation: drift var(--d, 60s) ease-in-out infinite alternate; }
.cloud-a { background-image: url('assets/cloud-1.webp'); aspect-ratio: 400 / 249; }
.cloud-b { background-image: url('assets/cloud-3.webp'); aspect-ratio: 277 / 186; }
.cloud-c { background-image: url('assets/cloud-5.webp'); aspect-ratio: 400 / 111; }
.cloud-a { --d: 64s; width: clamp(118px, 12vw + 60px, 240px); left: clamp(-34px, 7vw - 60px, 110px); top: clamp(250px, 12vw + 150px, 320px); }
.cloud-b { --d: 52s; width: clamp(78px, 5vw + 56px, 150px); right: clamp(-14px, 12vw - 36px, 200px); top: clamp(92px, 7vw + 62px, 186px); }
.stage .cloud-c { --d: 78s; z-index: -1; width: 30%; left: 76%; top: 3%; opacity: 0.75; } /* behind the island, beside the fence: scales with the stage */
@keyframes drift { from { translate: -16px 0; } to { translate: 16px 0; } }
@media (max-width: 599px) { .sun { top: 58px; right: 22px; width: 64px; } .cloud-b { width: 62px; right: 4px; top: 94px; } }
@media (max-width: 374px) { .cloud-b { display: none; } }
@media (max-width: 599px) and (prefers-color-scheme: dark) { .moon { top: 62px; right: 30px; width: 46px; } }

.hero-copy { position: relative; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.hero-copy .eyebrow-sky { color: var(--c-text); }
.hero-copy h1 { color: var(--c-text); }
.hero-copy .lead { color: var(--on-sky-secondary); max-width: 34em; margin: clamp(14px, 1.4vw, 22px) auto 0; }

/* the App Store placeholder: an outline badge, clearly a status (no link until the app is live) */
.store { margin-top: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.store-badge { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 52px; padding: 6px 20px; border-radius: 14px; border: 1.5px solid currentColor; color: var(--c-text); cursor: default; user-select: none; }
.store-small { font-size: 0.75rem; line-height: 1.1; font-weight: 600; letter-spacing: 0.01em; }
.store-big { font-size: 1.375rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.store-note { font-size: 0.875rem; font-weight: 500; color: var(--on-sky-secondary); }

/* the stage: island + companions, measured as fractions of the island (1499 x 976) */
.stage { position: relative; left: 50%; translate: -50% 0; width: 118vw; aspect-ratio: 1499 / 976; margin-top: clamp(10px, 1.6vw, 22px); pointer-events: none; }
@media (min-width: 600px) { .stage { width: min(92vw, 880px); } }
.island { position: absolute; inset: 0; background: url('assets/island-day-1200.webp') center / contain no-repeat; }
/* slot width 0.28 of the island; plant frame 1:1.5 with the foot at 0.965, pet frame 1:1.25 with the foot at 0.985;
   top = foot line - foot * frame height (in island heights: 0.28 * ratio * 1499/976) */
.comp { position: absolute; z-index: 0; width: 28%; left: calc((var(--x) - 0.14) * 100%); aspect-ratio: 1 / 1.5; top: calc((var(--y) - 0.6225) * 100%); }
.comp.pet { aspect-ratio: 1 / 1.25; top: calc((var(--y) - 0.5295) * 100%); }
/* image failure without JS: world art is painted with CSS (a failed background paints nothing), and under each piece
   sits a token-coloured silhouette that the loaded art covers completely; if the art fails the face still sits on it */
.comp, .comp-solo { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-terracotta) 62%, transparent) 96%, transparent) 50% 86% / 36% 16% no-repeat; }
.comp.pet { --sil: color-mix(in srgb, var(--c-terracotta) 48%, transparent); background: radial-gradient(closest-side, var(--sil) 96%, transparent) 50% 45.5% / 26% 20% no-repeat, radial-gradient(closest-side, var(--sil) 96%, transparent) 50% 76% / 36% 26% no-repeat; } /* head + chest, both inside opaque art */
.comp-solo.pet { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-terracotta) 48%, transparent) 96%, transparent) 50% 64% / 34% 36% no-repeat; }
.comp::after, .comp-solo::after, .mo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: center / contain no-repeat; }
[data-art='tulip']::after { background-image: url('assets/tulip-480.webp'); background-image: image-set(url('assets/tulip-260.webp') 1x, url('assets/tulip-480.webp') 2x); }
[data-art='sunflower']::after { background-image: url('assets/sunflower-480.webp'); background-image: image-set(url('assets/sunflower-260.webp') 1x, url('assets/sunflower-480.webp') 2x); }
[data-art='strawberry']::after { background-image: url('assets/strawberry-480.webp'); background-image: image-set(url('assets/strawberry-260.webp') 1x, url('assets/strawberry-480.webp') 2x); }
[data-art='puppy']::after { background-image: url('assets/puppy-480.webp'); background-image: image-set(url('assets/puppy-260.webp') 1x, url('assets/puppy-480.webp') 2x); }
@media (max-width: 599px) {
  [data-art='tulip']::after { background-image: image-set(url('assets/tulip-260.webp') 2x, url('assets/tulip-480.webp') 3x); }
  [data-art='sunflower']::after { background-image: image-set(url('assets/sunflower-260.webp') 2x, url('assets/sunflower-480.webp') 3x); }
  [data-art='strawberry']::after { background-image: image-set(url('assets/strawberry-260.webp') 2x, url('assets/strawberry-480.webp') 3x); }
  [data-art='puppy']::after { background-image: image-set(url('assets/puppy-260.webp') 2x, url('assets/puppy-480.webp') 3x); }
}
[data-art='chick']::after { background-image: url('assets/chick-320.webp'); }
[data-art='lavender']::after { background-image: url('assets/lavender-260.webp'); }
[data-art='monstera']::after { background-image: url('assets/monstera-260.webp'); }
.face-slot, .mo-face-slot { z-index: 2; }
.comp::before, .comp-solo::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 1%; height: 5.5%; border-radius: 50%; background: radial-gradient(closest-side, rgb(40 30 20 / 34%), transparent); filter: blur(2px); }
.comp.pet::before, .comp-solo.pet::before { left: 12%; right: 12%; bottom: 0; }
.capsule { position: absolute; left: calc(var(--x) * 100%); top: calc((var(--y) + 0.018) * 100%); translate: -50% 0; min-height: 30px; padding: 5px 14px; border-radius: 999px; font-size: clamp(0.8125rem, 0.74rem + 0.3vw, 0.9375rem); line-height: 20px; font-weight: 700; color: var(--c-text); white-space: nowrap; }

/* vector faces (kit.css, v1 colours): kids' companions smile and blink, a grown pet has quiet eyes, grown plants none */
.face-slot { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: calc(var(--fw) * 100%); translate: -50% -50%; line-height: 0; }
.plant-face { --fx: 0.5; --fy: 0.835; --fw: 0.27; }
.face { width: 100%; height: auto; overflow: visible; }
.face .ink { fill: #3a2618; }
.face .glint { fill: #fff; }
.face .line { fill: none; stroke: #3a2618; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.face.pet-face .line { stroke-width: 3; }
.face .cheek { fill: #f08a6e; opacity: 0.45; }
.face .eye, .mo-face .blinker { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.2s infinite; }
.face.quiet .eye { animation-duration: 8.4s; }
.mo-face .blinker { animation-duration: 5.8s; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

/* ---------------------------------------------------------------- feature chapters: one idea, one real screen */
.feature { padding: clamp(72px, 9vw, 150px) var(--gutter); }
.hero + .feature { padding-top: clamp(56px, 7vw, 120px); }
.feature-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 31rem) auto; justify-content: center; align-items: center; gap: clamp(40px, 9vw, 144px); }
.feature-flip .feature-inner { grid-template-columns: auto minmax(0, 31rem); }
.feature-flip .feature-copy { order: 2; }
.feature-copy { max-width: 33rem; }
.feature-copy h2 { margin-bottom: clamp(16px, 1.6vw, 24px); }
.feature-copy p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--c-muted); text-wrap: pretty; }
.feature-copy p + p { margin-top: 0.8em; }
@media (max-width: 859px) {
  .feature-inner, .feature-flip .feature-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .feature-flip .feature-copy { order: 0; }
  .feature-copy { max-width: 36rem; justify-self: stretch; }
}

/* quiet device frame (iPhone Air proportions; the Dynamic Island is drawn so every capture matches) */
.device { margin: 0; width: min(74vw, 300px); container-type: inline-size; }
@media (min-width: 860px) { .device { width: clamp(292px, 10vw + 196px, 360px); } }
.device-frame { padding: 2.4cqw; border-radius: 16cqw; background: var(--bezel); box-shadow: 0 0 0 1px var(--bezel-ring), var(--shadow-raised); }
.device-screen { position: relative; aspect-ratio: 1260 / 2736; border-radius: 13.6cqw; overflow: hidden; background: var(--c-surface-sunk); color: var(--c-muted); font-size: 0.8125rem; }
.device-screen img { width: 100%; height: 100%; object-fit: cover; }
.device-island { position: absolute; left: 34.9%; top: 2.15%; width: 30.2%; height: 4.1%; border-radius: 999px; background: #000; }

/* ---------------------------------------------------------------- made for families */
.families { position: relative; isolation: isolate; padding: clamp(120px, 10vw + 80px, 200px) var(--gutter) clamp(72px, 9vw, 140px); }
.families-card { --mo: clamp(84px, 3vw + 72px, 120px); --mo-left: clamp(20px, 5vw, 72px); position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(36px, 5vw, 76px) clamp(22px, 5.5vw, 80px); border-radius: clamp(28px, 2vw + 20px, 40px); background: var(--c-surface); box-shadow: var(--shadow-card); }
/* Mo (edge pose) rests his paws on the card: the frame bottom is the edge line; like the app (Mo 80 pt, 10 pt over the
   Together card) the paws overlap the card's top edge by 12 % of the frame, in front of it */
.mo-peek { position: absolute; z-index: 1; left: var(--mo-left); bottom: calc(100% - var(--mo) * 0.12); width: var(--mo); height: var(--mo); }
.mo { position: relative; z-index: 0; display: block; width: 100%; height: 100%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-soil) 55%, transparent) 96%, transparent) 50% 58% / 38% 54% no-repeat; }
.mo::after { background-image: url('assets/mo-edge.webp'); }
.mo-face-slot { position: absolute; left: 22.34%; top: 30.13%; width: 54.54%; line-height: 0; }
.mo-face { width: 100%; height: auto; overflow: visible; }
.mo-face .ink { fill: #26160e; }
.mo-face .ring { fill: rgb(236 206 176 / 55%); }
.mo-face .glint { fill: #fff; }
.mo-face .cheek { fill: #f59a9a; }
.mo-face .mouth { fill: none; stroke: #4a2a1b; stroke-width: 2.8; stroke-linecap: round; }
.mo-bubble { position: absolute; left: calc(var(--mo-left) + var(--mo) + 2px); bottom: calc(100% + var(--mo) * 0.3); max-width: min(62vw, 300px); padding: 10px 16px; border-radius: 20px 20px 20px 6px; background: var(--c-surface-raised); box-shadow: var(--shadow-card); font-size: 1rem; line-height: 1.3; font-weight: 600; color: var(--c-text); text-wrap: balance; }
.promises { list-style: none; margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.6vw, 52px) clamp(28px, 4vw, 64px); }
.promises .icon { width: 1.875rem; height: 1.875rem; margin-bottom: 14px; color: var(--c-accent); }
.promises h3 { margin-bottom: 6px; }
.promises p { font-size: 1rem; line-height: 1.45; color: var(--c-muted); text-wrap: pretty; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 959px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .promises { grid-template-columns: 1fr; gap: 26px; }
  .promises li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: 14px; overflow-wrap: break-word; }
  .promises .icon { grid-row: span 2; margin: 0; width: 1.75rem; height: 1.75rem; }
}

/* ---------------------------------------------------------------- who it's for */
.who { padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(72px, 9vw, 140px); text-align: center; }
.who-grid { list-style: none; max-width: 1040px; margin: clamp(40px, 5vw, 72px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.who-art { height: 190px; display: flex; align-items: flex-end; justify-content: center; }
.comp-solo { position: relative; z-index: 0; display: block; width: 124px; aspect-ratio: 1 / 1.5; }
.comp-solo.pet { width: 152px; aspect-ratio: 1 / 1.25; }
.who-text h3 { margin-top: 18px; }
.who-text p { margin: 8px auto 0; max-width: 21rem; font-size: 1rem; line-height: 1.45; color: var(--c-muted); text-wrap: pretty; }
@media (max-width: 759px) {
  .who-grid { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .who-grid li { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; }
  .who-art { height: 124px; }
  .comp-solo { width: 76px; }
  .comp-solo.pet { width: 94px; }
  .who-text h3 { margin-top: 0; }
  .who-text p { margin: 4px 0 0; }
}

/* ---------------------------------------------------------------- pricing */
.pricing { padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(88px, 10vw, 160px); text-align: center; }
.plans { max-width: 900px; margin: clamp(40px, 5vw, 64px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; text-align: left; }
.plan { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: var(--c-surface); box-shadow: var(--shadow-card); }
.plan h3 { font-size: 1.375rem; }
.price { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.num { font-family: var(--font-numbers); font-size: clamp(2.25rem, 1.9rem + 1.2vw, 3rem); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.per { font-size: 1.0625rem; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.plan-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.plan-list li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); overflow-wrap: break-word; gap: 12px; font-size: 1rem; line-height: 1.4; }
.plan-list .icon { width: 1.375rem; height: 1.375rem; margin-top: -1px; color: var(--c-accent); stroke-width: 2.2; }
.plan-terms { margin-top: auto; padding-top: 24px; font-size: 0.9375rem; line-height: 1.45; color: var(--c-muted); }
.pricing-note { max-width: 40rem; margin: 28px auto 0; font-size: 0.875rem; line-height: 1.5; color: var(--c-muted); text-wrap: pretty; }
.store-end { margin-top: 40px; }
@media (max-width: 679px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--a-hairline); padding: 40px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 48px); }
.footer-inner { max-width: var(--wrap); margin: 0 auto; }
.footer-brand { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; }
.footer-links { list-style: none; margin: 14px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.9375rem; }
.footer-links a, .footer-links .soon { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a { font-weight: 600; text-decoration: none; border-radius: 6px; overflow-wrap: anywhere; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .soon { color: var(--c-muted); }
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted); }
.fine + .fine { margin-top: 4px; }

/* ---------------------------------------------------------------- image failure: screens show their description
   (a broken <img> renders ::before, a loaded one never does; the opaque panel also hides the browser's broken icon) */
.device-screen img { position: relative; color: transparent; }
.device-screen img::before { content: attr(alt); position: absolute; inset: 0; display: grid; place-items: center; padding: 18%; background: var(--c-surface-sunk); color: var(--c-muted); font-size: 0.8125rem; line-height: 1.45; text-align: center; }

/* ---------------------------------------------------------------- dark: the night garden (same art the app shows at night) */
@media (prefers-color-scheme: dark) {
  .sky { background: linear-gradient(180deg, var(--sky-night-0) 0%, var(--sky-night-1) 40%, var(--sky-night-2) 70%, var(--c-background) 100%); }
  .sun { display: none; }
  .island { background-image: url('assets/island-night-1200.webp'); }
  .moon { display: block; position: absolute; top: clamp(84px, 5vw + 62px, 158px); right: clamp(34px, 14vw, 250px); width: clamp(44px, 2.4vw + 34px, 72px); aspect-ratio: 1; background: url('assets/moon.webp') center / contain no-repeat; }
  .stars { display: block; position: absolute; inset: 0 0 48% 0; opacity: 0.85; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 28% 8%, #fff 60%, transparent), radial-gradient(1.6px 1.6px at 44% 22%, #fff 60%, transparent), radial-gradient(1.1px 1.1px at 62% 12%, #fff 60%, transparent), radial-gradient(1.3px 1.3px at 76% 26%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 88% 6%, #fff 60%, transparent), radial-gradient(1px 1px at 8% 34%, #fff 60%, transparent), radial-gradient(1.4px 1.4px at 54% 36%, #fff 60%, transparent), radial-gradient(1px 1px at 92% 40%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 36% 44%, #fff 60%, transparent), radial-gradient(1.1px 1.1px at 20% 52%, #fff 60%, transparent), radial-gradient(1.3px 1.3px at 70% 48%, #fff 60%, transparent); }
  .cloud { opacity: 0.35; }
  .stage .cloud-c { opacity: 0.25; }
}

/* ---------------------------------------------------------------- motion: life only, and none when asked */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .face .eye, .mo-face .blinker { animation: none; }
}