/* mivelu.com — playful and light: real app screens in iPhones on soft tinted stages, the feeling figures and Mivelu
   as the characters. Brand type (Nunito 900 + system text), brand colours, the good-css rules. */
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url(/assets/fonts/nunito-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2010-2027, U+20AC; }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url(/assets/fonts/nunito-latin-ext-900-normal.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-weight: 900; font-display: swap; src: url(/assets/fonts/nunito-cyrillic-ext-900-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url(/assets/fonts/nunito-cyrillic-900-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url(/assets/fonts/nunito-vietnamese-900-normal.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; }
/* Caveat (OFL): the handwriting accent of the brand type (Nunito display, system text, Caveat). Loaded only where used. */
@font-face { font-family: 'Caveat'; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/Caveat.ttf) format('truetype'); }

:root {
  interpolate-size: allow-keywords; text-wrap: pretty; overflow-wrap: break-word;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  color-scheme: light;
  --ground: oklch(98.6% 0.006 88);
  --paper: oklch(100% 0 none);
  --ink: oklch(21% 0.012 70);
  --muted: oklch(38% 0.012 70);
  --line: color-mix(in oklch, var(--ink) 9%, transparent);
  --tone: color-mix(in oklch, var(--ink) 6%, var(--paper));
  /* Stage tints, from the feeling families */
  --butter: oklch(94.5% 0.07 92); --peach: oklch(93% 0.045 45); --lilac: oklch(93% 0.04 295); --mint: oklch(94% 0.045 170);
  --sky: oklch(94% 0.035 240); --sun: oklch(95% 0.06 95); --rose: oklch(94% 0.035 10); --sand: oklch(95% 0.02 75);
  --night: oklch(29% 0.07 278); --on-night: oklch(96% 0.01 280); --night-muted: oklch(82% 0.03 280);
  --gold: oklch(80% 0.15 75);
  /* Type */
  --display: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --text: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --t1: 14px;
  --t2: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --t3: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  --t4: clamp(1.625rem, 0.95rem + 3vw, 3.75rem);
  --t5: clamp(2.625rem, 1.3rem + 5vw, 5.75rem);
  /* Frame */
  /* Frame: generous gutters and sections, so every part has room to breathe (phones most of all). */
  --margin: clamp(24px, 5.5vw, 56px);
  --wide: min(100% - var(--margin) * 2, 76rem);
  --section: clamp(7.5rem, 5rem + 7vw, 12.5rem);
  --radius: clamp(28px, 1.6rem + 1vw, 44px);
  --shadow: 0 1px 2px oklch(30% 0.03 70 / 0.06), 0 12px 32px -8px oklch(30% 0.04 70 / 0.14);
  --shadow-big: 0 2px 4px oklch(25% 0.03 70 / 0.08), 0 40px 80px -24px oklch(25% 0.05 70 / 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-press: 140ms; --t-hover: 180ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: 6rem; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-block-size: 100svh; background: var(--ground); color: var(--ink); font: 400 var(--t2)/1.55 var(--text); overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: var(--t4); }
h3 { font-size: var(--t3); line-height: 1.08; }
p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-inline-size: 100%; block-size: auto; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--butter); color: var(--ink); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 20; padding: 0.6rem 1rem; border-radius: 999px; background: var(--ink); color: var(--paper); }
.skip:focus-visible { inset-block-start: 1rem; }
svg { flex: none; }

/* Buttons: fully round, ink; one big for the main action */
.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 52px; padding-inline: 26px; border: none; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 var(--t2)/1 var(--text); text-decoration: none; white-space: nowrap; }
.button.big { min-block-size: 60px; padding-inline: 32px; font-size: 1.0625rem; }
.button.small { min-block-size: 44px; padding-inline: 18px; font-size: var(--t1); }
.text-link { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 650; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
.button:active, .styles label:active, .billing label:active, .families button:active { scale: 0.97; }
@media (prefers-reduced-motion: no-preference) {
  .button, .styles label, .billing label { transition: scale var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease, translate var(--t-hover) var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: color-mix(in oklch, var(--ink), white 16%); translate: 0 -1px; }
  .text-link:hover { text-decoration-thickness: 0.13em; }
}

.stores { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store-pill { display: inline-flex; align-items: center; gap: 10px; min-block-size: 56px; padding-inline: 16px 22px; border-radius: 999px; text-decoration: none; color: oklch(98% 0 none);
  background: oklch(19% 0.008 270); box-shadow: inset 0 0 0 1px oklch(100% 0 none / 0.22), inset 0 1px 0 oklch(100% 0 none / 0.18); }
.store-pill svg { inline-size: 24px; block-size: 24px; flex: none; }
.store-pill span { display: flex; flex-direction: column; align-items: start; font: 650 1.0625rem/1.05 var(--text); letter-spacing: -0.01em; }
.store-pill small { font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: 0.85; }
.store-pill.soon { cursor: default; }
.store-pill:not(.soon):active { scale: 0.97; }
@media (prefers-reduced-motion: no-preference) { .store-pill { transition: scale var(--t-press) var(--ease-out), background-color var(--t-hover) ease; } }
@media (hover: hover) and (pointer: fine) { a.store-pill:hover { background: oklch(26% 0.01 270); } }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 900 1.375rem/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
.wordmark img { inline-size: 32px; border-radius: 9px; }
/* Language menu: flag and code; a small list opens below (above in the footer). Works without script. */
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: 7px; min-block-size: 40px; padding-inline: 8px 10px; border-radius: 999px; font: 700 14px/1 var(--text); letter-spacing: 0.02em; list-style: none; cursor: pointer; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu .flag { inline-size: 22px; block-size: 22px; border-radius: 50%; overflow: clip; box-shadow: 0 0 0 1px var(--line); }
.lang-menu .chev { inline-size: 16px; color: var(--muted); }
.lang-menu[open] .chev { rotate: 180deg; }
.lang-menu ul { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 2px; min-inline-size: 11rem; padding: 6px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-big), 0 0 0 1px var(--line); }
.lang-menu.up ul { inset-block: auto calc(100% + 6px); inset-inline: 0 auto; }
.lang-menu li a { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 10px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.lang-menu li a[aria-current] { background: var(--tone); }
@media (hover: hover) and (pointer: fine) { .lang-menu summary:hover, .lang-menu li a:hover { background: var(--tone); } }
.lang-menu summary:active { scale: 0.97; }
@media (prefers-reduced-motion: no-preference) {
  .lang-menu .chev { transition: rotate 200ms var(--ease-out); }
  .lang-menu[open] ul { animation: menu-in 180ms var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; translate: 0 -4px; scale: 0.98; } }
.lang-menu.up[open] ul { animation-name: menu-up; }
@keyframes menu-up { from { opacity: 0; translate: 0 4px; scale: 0.98; } }


/* Sprite strips of the figures: 16 frames side by side */
.sprite { display: inline-block; flex: none; inline-size: var(--s, 64px); block-size: var(--s, 64px); background-repeat: no-repeat; background-size: 1600% 100%; background-position: 0 0;
  /* Its own layer: a new frame repaints only the figure, never the card and its shadow around it. */
  transform: translateZ(0); contain: layout paint; }

/* ── Top bar ───────────────────────────────────────────────────────── */
.top { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px max(var(--margin), (100% - 76rem) / 2); background: color-mix(in oklch, var(--ground) 96%, transparent); box-shadow: 0 1px 0 var(--line); }
.top .sections { margin-inline-start: auto; }
.top .sections ul { display: flex; gap: 4px; }
.top .sections a { display: grid; place-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .top .sections a:hover { color: var(--ink); background: var(--tone); } }
.top .lang-menu { margin-inline-start: 4px; }
/* Sign-in for people who already have an account: quiet text next to the one action. */
.top .login { display: grid; place-items: center; min-block-size: 40px; padding-inline: 14px; border-radius: 999px; font-weight: 650; font-size: 15px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.top .login:active { scale: 0.97; }
.top .login:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .top .login:hover { background: var(--tone); } }
body:not(.home) .top .sections { visibility: hidden; }

/* ── Hero: dense; the promise and the action on the left, the app itself playing on the right ── */
.hero { inline-size: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; gap: clamp(40px, 4.5vw, 80px); padding-block: clamp(24px, 2.5vw, 48px) clamp(24px, 3vw, 48px); position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: -120px -30vw -10% -30vw; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 30% 10%, oklch(94.5% 0.08 92 / 0.85), oklch(94.5% 0.08 92 / 0) 70%), radial-gradient(30% 45% at 0% 60%, oklch(93.5% 0.045 295 / 0.6), oklch(93.5% 0.045 295 / 0) 70%), radial-gradient(35% 50% at 95% 40%, oklch(93.5% 0.045 200 / 0.55), oklch(93.5% 0.045 200 / 0) 70%); }
.hero-text { display: flex; flex-direction: column; align-items: start; gap: 30px; }
.hero h1 { position: relative; font-size: clamp(2.75rem, 1rem + 5.2vw, 5.5rem); line-height: 0.94; letter-spacing: -0.035em; max-inline-size: 15ch; text-wrap: balance; }
/* The headline is read like an entry: a soft light passes word by word (iOS HeardStep), and the word that names
   the feeling stays lit in the feeling's colour. Without script it is simply lit. */
.hero h1 .w { border-radius: 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero h1 .w.light { background: oklch(95% 0.07 90 / 0.9); }
.hero h1 em { font-style: normal; padding-inline: 0.06em; margin-inline: -0.06em; border-radius: 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: linear-gradient(oklch(86% 0.13 var(--thread-h) / 0.7), oklch(86% 0.13 var(--thread-h) / 0.7)) no-repeat 0 82% / 100% 46%; }
/* The hue of the word's highlight and of the thread to the map (hero-live.mjs sets it to the focused pattern's area). */
@property --thread-h { syntax: '<number>'; inherits: true; initial-value: 90; }
.js .hero h1[data-read]:not(.done) em { background-size: 0% 46%; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w { transition: background-color 260ms var(--ease-in-out); }
  .hero h1 em { transition: background-size 620ms var(--ease-out), --thread-h 900ms var(--ease-in-out); }
}
/* The tray the figures jump into: the main feeling larger, each in its family's tint, tappable. */
.tray { display: flex; flex-wrap: wrap; justify-content: start; align-items: center; gap: 8px; min-block-size: 64px; margin-block: -6px -2px; }
.tray-fig { display: inline-flex; align-items: center; gap: 6px; min-block-size: 50px; padding: 0 16px 0 6px; border: none; border-radius: 999px; font: 800 1.0625rem/1 var(--text); color: var(--ink); background: oklch(95% 0.06 95); box-shadow: var(--shadow); transform-origin: 50% 100%; }
.tray li:nth-child(2) .tray-fig { background: oklch(94% 0.05 60); }
.tray li:nth-child(3) .tray-fig { background: oklch(95% 0.03 300); }
.tray-fig.main { min-block-size: 62px; padding-inline-end: 20px; font-size: 1.125rem; }
.tray-fig:active { scale: 0.96; }
@media (hover: hover) and (pointer: fine) { .tray-fig:hover { box-shadow: var(--shadow-big); } }
@media (prefers-reduced-motion: no-preference) {
  .tray-fig { transition: scale var(--t-press) var(--ease-out), box-shadow var(--t-hover) ease; }
  .js .tray[data-tray]:not(.landed) li { opacity: 0; }
}
.lead { font-size: var(--lead); line-height: 1.6; color: var(--muted); max-inline-size: 40ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 2px; }
.hero .actions { justify-content: start; }
.note { font-size: var(--t1); color: var(--muted); }
/* The hero's one action leads; the price sits right under it. The stores and the two promises follow a step quieter. */
.hero-start { display: flex; flex-direction: column; align-items: start; gap: 10px; margin-block-start: 2px; }
.hero-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 4px; }
:is(.hero-more, .quiet-stores, .story-more) .stores { gap: 8px; }
/* The stores and the two promises, after the film. */
.story-more { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-more .stores { justify-content: start; }
:is(.hero-more, .quiet-stores, .story-more) .store-pill { gap: 7px; min-block-size: 40px; padding-inline: 12px 15px; color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); box-shadow: none; }
:is(.hero-more, .quiet-stores, .story-more) .store-pill svg { inline-size: 17px; block-size: 17px; }
:is(.hero-more, .quiet-stores, .story-more) .store-pill span { flex-direction: row; align-items: baseline; gap: 4px; font-size: 14px; }
:is(.hero-more, .quiet-stores, .story-more) .store-pill small { font-size: 13px; opacity: 0.7; }
:is(.hero-more, .quiet-stores, .story-more) .store-badge img { block-size: 40px; }
@media (hover: hover) and (pointer: fine) { :is(.hero-more, .quiet-stores, .story-more) a.store-pill:hover { background: color-mix(in oklch, var(--ink) 11%, transparent); } }
.trust { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { inline-size: 15px; color: oklch(60% 0.06 280); }

/* iPhone around a real screen or film: bezel, rounded screen, soft shadow */
.phone { --w: 300px; position: relative; flex: none; inline-size: var(--w); padding: calc(var(--w) * 0.035); border-radius: calc(var(--w) * 0.165); background: oklch(18% 0.01 270); box-shadow: inset 0 0 0 1.5px oklch(42% 0.01 270), var(--shadow-big); }
.phone .screen { border-radius: calc(var(--w) * 0.135); overflow: clip; background: var(--ground); aspect-ratio: 402 / 874; }
.phone img, .phone video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.film-toggle { position: absolute; inset-block-end: 18%; inset-inline-end: calc(var(--w) * -0.09); display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: none; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.film-toggle svg { inline-size: 18px; }
.film-toggle[aria-pressed='false'] svg:last-child, .film-toggle[aria-pressed='true'] svg:first-child { display: none; }
.film-toggle:active { scale: 0.94; }
@media (prefers-reduced-motion: no-preference) { .film-toggle { transition: scale var(--t-press) var(--ease-out); } }
@media (hover: hover) and (pointer: fine) { .film-toggle:hover { background: var(--tone); } }

/* Hero entrance (Lasseter): the headline's words rise one after another with a little follow-through, then the
   lead, the action and the promises overlap in; the film's stage settles and the phone rises into it slightly later
   (staging, overlapping action, slow in and slow out). CSS only: nothing is hidden before the script, and with
   reduced motion everything simply stands. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w { display: inline-block; animation: word-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 85ms + 60ms); }
  .hero .enter { animation: rise-in 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both; }
}
@keyframes word-in { 0% { opacity: 0; transform: translateY(0.42em) rotate(1.5deg); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 80% { transform: translateY(-0.03em); } 100% { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; translate: 0 18px; } }

/* Mivelu floats gently for a few breaths, slow in and slow out, then rests. Never with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .final-pearl { animation: float 6s var(--ease-in-out) 4 alternate; }
  .final-pearl { animation-delay: -3s; }
}
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }

/* ── Hero map (src/hero-map.mjs, pattern-map-v3 §8): five patterns in four life areas as the hero's picture, the app's
   map look (regions, clay nodes, non-scaling edges). Wide: the right 7/12, 86vh tall, starting 8vw under the text
   behind a soft fade and running to the window's edge. Narrow: under the text, edge to edge, 62vh. Without script the
   scene sits centred at a fixed scale; hero-live.mjs places the camera (one transform on the world, labels
   counter-scaled by --ik) and moves the focus. Reduced motion: no entrance, the first pattern, still. ── */
/* One container with the nav and every section (equal outer margins); the hero fills the screen below the nav and
   leaves the next section's heading peeking in at the bottom. */
.hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-block-size: min(calc(100svh - 64px - 6.5rem), 40rem); padding-block: 0; }
.hero + .story { margin-block-start: clamp(1.5rem, 3vw, 3rem); }
.hero-text { position: relative; z-index: 1; }
.hero-map { position: relative; margin-inline-start: -8vw; }
.hm-stage { position: relative; block-size: min(calc(100svh - 64px - 6.5rem), 40rem); overflow: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  mask-image: linear-gradient(to right, transparent, black 14%, black 96%, transparent), linear-gradient(transparent, black 6%, black 94%, transparent); mask-composite: intersect; -webkit-mask-composite: source-in; }
.hm-scene { position: absolute; inset: 0; }
.live .hm-stage, .live .hm-caps { cursor: pointer; }
.live .hm-caps .hm-cap.on { pointer-events: auto; }
.hm-tall { display: none; }
.hm-world { --k: 0.8; --ik: calc(1 / var(--k)); position: absolute; left: 56%; top: calc(50% - 52px); transform-origin: var(--cx) var(--cy);
  transform: translate(calc(var(--cx) * -1), calc(var(--cy) * -1)) scale(var(--k)); }
.live .hm-world { left: 0; top: 0; transform-origin: 0 0; }
.hm-region { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side in oklch, oklch(93% 0.045 var(--h) / 0.75), oklch(96% 0.03 var(--h) / 0.35) 60%, oklch(96% 0.03 var(--h) / 0)); }
.hm-links { position: absolute; overflow: visible; pointer-events: none; max-inline-size: none; }
.hm-links path { fill: none; stroke: oklch(62% 0.09 var(--h) / 0.38); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-links path.on { stroke: oklch(58% 0.12 var(--h) / 0.8); stroke-width: 2.2; }
.hm-links path.dim { stroke: oklch(62% 0.05 var(--h) / 0.05); }
.hn { position: absolute; inline-size: 0; block-size: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hn-vis { position: absolute; inset-block-start: 0; inset-inline-start: 0; translate: -50% -50%; inline-size: calc(var(--r) * 2); block-size: calc(var(--r) * 2); display: grid; place-items: center; }
.hn-vis img { inline-size: calc(100% / 0.84); block-size: calc(100% / 0.84); max-inline-size: none; object-fit: contain; pointer-events: none; }
.hn-feeling .hn-vis { border-radius: 50%; }
.hn-feeling .hn-vis img { inline-size: 135%; block-size: 135%; }
/* A pattern's pebble sits on a soft halo in its area's colour. */
.hn-pattern .hn-vis::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side in oklch, oklch(88% 0.07 var(--h) / 0.9), oklch(88% 0.07 var(--h) / 0)); }
/* Labels keep their size on screen: placed in world units at their node, then counter-scaled. */
.hm-label { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform-origin: 0 0; scale: var(--ik); pointer-events: none; }
.hm-title { translate: 0 var(--r); transform: translate(-50%, 4px); inline-size: 168px; padding: 2px 7px; border-radius: 9px; text-align: center; font: 700 13px/1.25 var(--text); text-wrap: balance;
  background: color-mix(in oklch, var(--ground) 90%, transparent); }
.hm-name { translate: 0 var(--r); transform: translate(-50%, 4px); white-space: nowrap; padding: 1px 6px; border-radius: 7px; font: 600 12px/1.2 var(--text); color: oklch(38% 0.01 90);
  background: color-mix(in oklch, var(--ground) 85%, transparent); }
/* A name that has no room below its node tries above, right and left (hero-live.mjs cull). */
.hm-name.at-above { translate: 0 calc(var(--r) * -1); transform: translate(-50%, calc(-100% - 4px)); }
.hm-name.at-right { translate: var(--r) 0; transform: translate(4px, -50%); }
.hm-name.at-left { translate: calc(var(--r) * -1) 0; transform: translate(calc(-100% - 4px), -50%); }
.hm-area { transform: translate(-50%, -100%); white-space: nowrap; font: 900 16px/1 var(--display); letter-spacing: 0.02em; color: oklch(52% 0.09 var(--h)); opacity: 0.75; }
.hn.dim { opacity: 0.1; }
.hm-label.off { opacity: 0; }
/* Under the focused pattern, the sentence from the journal it grew from: handwriting on a slip of paper, slightly
   turned. The camera keeps it right under the pattern; the three share one place and cross-fade. */
.hm-caps { position: absolute; inset-block-end: 16px; inset-inline: 0; display: grid; justify-items: center; pointer-events: none; }
.hm-cap { grid-area: 1 / 1; max-inline-size: min(24rem, 100% - 32px); margin: 0; padding: 14px 22px; border-radius: 14px; rotate: -1.5deg; opacity: 0;
  font: 600 clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem)/1.15 'Caveat', var(--display); color: oklch(36% 0.02 260); text-align: center; text-wrap: balance;
  text-box: trim-both cap alphabetic;  /* handwriting sits in the middle of its slip, one line or two */
  background: var(--paper); box-shadow: 0 0 0 1px oklch(30% 0.02 90 / 0.06), 0 14px 30px -18px oklch(30% 0.04 70 / 0.35); }
.hm-cap.on { opacity: 1; }
/* The thread from the headline's word to the pattern in focus (hero-live.mjs), under the text, over the map. */
.hm-thread { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.hm-thread.on { opacity: 1; }
/* The same stroke as the focused pattern's own links, so it reads as one more of them. */
.hm-thread path { fill: none; stroke: oklch(58% 0.12 var(--thread-h) / 0.8); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: var(--len) var(--len); }
.hm-thread circle { fill: oklch(58% 0.12 var(--thread-h)); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hm-thread.on path { animation: thread-draw 700ms var(--ease-in-out) both; }
  .hm-thread.on circle { animation: thread-dot 380ms var(--spring) both 640ms; }
  .hm-thread.on.out path { animation: thread-back 280ms cubic-bezier(0.55, 0, 0.75, 0.2) both; }
  .hm-thread.on.out circle { animation: thread-dot 200ms var(--ease-out) reverse both; }
}
@keyframes thread-back { to { stroke-dashoffset: calc(var(--len) * -1); } }
@keyframes thread-draw { from { stroke-dashoffset: var(--len); } }
@keyframes thread-dot { from { opacity: 0; scale: 0.3; } }
/* With script, the map waits unseen until its camera is placed (a few seconds at most, should the script fail). */
.js .hero-map:not(.live) :is(.hm-world, .hm-caps) { opacity: 0; animation: hm-show 1ms 4s forwards; }
@keyframes hm-show { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hn, .hm-label { transition: opacity 600ms var(--ease-in-out); }
  /* The slip sinks away a little and the new one rises in after the camera has landed. */
  .hm-cap { translate: 0 10px; transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out); }
  .hm-cap.on { translate: 0 0; transition: opacity 420ms var(--ease-out) 760ms, translate 520ms var(--spring) 760ms; }
  .hm-links path { transition: stroke 600ms var(--ease-in-out), stroke-width 600ms var(--ease-in-out); }
  /* Staging (as in the app): the strongest pattern with its feelings and people, then the next, 45 ms apart; a pop
     with a small dip and overshoot; edges once their outer end has landed; labels after their node. */
  .live .hn-vis { animation: hm-pop 560ms backwards calc(var(--d) + 200ms); }
  .live .hn .hm-label { animation: hm-fade 320ms var(--ease-out) both calc(var(--d) + 420ms); }
  .live .hm-links path { animation: hm-fade 640ms var(--ease-in-out) both calc(var(--d) + 200ms); }
  .live .hm-region, .live .hm-area { animation: hm-fade 900ms var(--ease-out) both; }
  .live .hn-pattern.active .hn-vis { animation: hm-breathe 3.6s ease-in-out infinite alternate; }
}
@keyframes hm-pop { 0% { opacity: 0; scale: 0.55; } 55% { opacity: 1; scale: 1.05; } 78% { scale: 0.985; } 100% { opacity: 1; scale: 1; } }
@keyframes hm-fade { from { opacity: 0; } }
@keyframes hm-breathe { from { scale: 1; } to { scale: 1.03; } }
/* Narrow: a centred stack, the map under the text from edge to edge, fading out at top and bottom only. */
@media (width < 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-text { align-items: center; text-align: center; }
  .hero h1, .hero .lead { margin-inline: auto; }
  .hero-start { align-items: center; }
  .hero-map { margin-inline: calc(var(--margin) * -1); }
  .hm-stage { block-size: 62svh; mask-image: linear-gradient(transparent, black 8%, black 90%, transparent); mask-composite: add; -webkit-mask-composite: source-over; }
  .hm-wide { display: none; }
  .hm-tall { display: block; }
  .hm-world { --k: 0.72; left: 50%; }
  .hm-caps { inset-inline: 0; inset-block-end: 12px; }
  .hm-stage { block-size: 78svh; }
}

/* ── Hero, 2026-10-31: few words on the left, a calm map of three patterns on the right. The headline sizes to its own
   column, so it never reaches into the map. What Mivelu is for follows right below, as examples (.try). ── */
.hero-text { container-type: inline-size; }
/* Headline and category line belong together; a clear breath before the action; the price note close to it. */
.hero .category { margin-block-start: -16px; }
.hero .hero-start { margin-block-start: 10px; }
.hero h1 { font-size: clamp(2.75rem, min(1rem + 5.2vw, 13cqi), 5.5rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hero-actions .store-pill { min-block-size: 48px; padding-inline: 14px 18px; color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); box-shadow: none; }
@media (width < 52rem) { .hero-actions { justify-content: center; } }

/* ── What Mivelu is for, tried on an example: a situation per tab (radio + :has, no script), the entry with what
   Mivelu heard marked in each feeling's colour, the feelings, one question and what stays. Switching stages it like the
   app: the marks light up one after another, the feelings pop in overlapping, the question follows (Lasseter: overlap,
   anticipation and a small overshoot, slow out). ── */
.try { inline-size: min(100% - var(--margin) * 2, 56rem); margin: clamp(4rem, 2rem + 6vw, 8rem) auto 0; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 36px); text-align: center; }
.try-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border: none; padding: 0; margin: 0; }
.try-tabs label { position: relative; display: grid; place-items: center; min-block-size: 44px; padding-inline: 18px; border-radius: 999px; background: var(--tone); font-size: 15px; font-weight: 650; cursor: pointer; }
.try-tabs input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.try-tabs label:has(:checked) { background: var(--ink); color: var(--paper); }
.try-tabs label:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.try-tabs label:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .try-tabs label:not(:has(:checked)):hover { background: color-mix(in oklch, var(--ink) 11%, var(--paper)); } }
@media (prefers-reduced-motion: no-preference) { .try-tabs label { transition: scale var(--t-press) var(--ease-out), background-color var(--t-hover) ease; } }
.try-panels { display: grid; inline-size: 100%; padding: clamp(20px, 3.5vw, 44px); border-radius: var(--radius); background: var(--sun); text-align: start; }
.try-panel { grid-area: 1 / 1; display: grid; gap: clamp(16px, 2vw, 22px); visibility: hidden; }
.try:has(#try-0:checked) .t0, .try:has(#try-1:checked) .t1, .try:has(#try-2:checked) .t2 { visibility: visible; }
.try-entry, .try-heard, .try-ask p { position: relative; }
.try-panel small { display: block; margin-block-end: 6px; font: 700 12px/1.2 var(--text); letter-spacing: 0.03em; color: var(--muted); }
.try-entry { padding: clamp(18px, 2.4vw, 26px); border-radius: calc(var(--radius) * 0.6); background: var(--paper); box-shadow: var(--shadow); }
.try-entry p { margin: 0; font: 500 clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem)/1.6 var(--text); color: var(--ink); }
.try-entry mark { color: inherit; padding-inline: 2px; margin-inline: -2px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: linear-gradient(color-mix(in oklch, var(--c) 42%, transparent), color-mix(in oklch, var(--c) 42%, transparent)) no-repeat 0 0 / 100% 100%; }
.try-heard { padding-inline: clamp(4px, 1vw, 10px); }
.try-heard ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.try-heard li { display: inline-flex; align-items: center; gap: 8px; block-size: 44px; padding-inline: 4px 16px; border-radius: 999px; font: 700 15px/1 var(--text);
  background: color-mix(in oklch, var(--c) 30%, var(--paper)); }
.try-fig { display: grid; place-items: center; inline-size: 36px; block-size: 36px; }
.try-fig > .sprite { flex: none; }
.try-ask { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.try-ask p { margin: 0; padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: var(--paper); box-shadow: var(--shadow); font: 700 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.35 var(--display); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .try-panel :is(.try-entry, .try-heard li, .try-ask) { transition: opacity 240ms var(--ease-out), translate 420ms var(--ease-out); }
  .try-panel:not(:is(.try:has(#try-0:checked) .t0, .try:has(#try-1:checked) .t1, .try:has(#try-2:checked) .t2)) :is(.try-entry, .try-heard li, .try-ask) { opacity: 0; translate: 0 10px; transition-duration: 160ms; }
  .try:has(:checked) :is(.t0, .t1, .t2) .try-entry mark { transition: background-size 520ms var(--ease-out); }
  .try-panel:not(:is(.try:has(#try-0:checked) .t0, .try:has(#try-1:checked) .t1, .try:has(#try-2:checked) .t2)) .try-entry mark { background-size: 0% 100%; transition-duration: 0ms; }
  .try-entry mark:nth-of-type(2) { transition-delay: 180ms; }
  .try-heard li { transition-delay: calc(360ms + var(--k) * 90ms); }
  .try-ask { transition-delay: 600ms; }
  .try-panel:is(.try:has(#try-0:checked) .t0, .try:has(#try-1:checked) .t1, .try:has(#try-2:checked) .t2) .try-heard li { animation: try-pop 460ms var(--spring) both calc(360ms + var(--k) * 90ms); }
}
@keyframes try-pop { 0% { opacity: 0; scale: 0.9; } 60% { opacity: 1; scale: 1.04; } 100% { opacity: 1; scale: 1; } }

/* ── So geht's: the film of the app with its three steps, right below the hero ── */
.story { inline-size: var(--wide); margin: clamp(4rem, 2rem + 6vw, 8rem) auto 0; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3vw, 44px); text-align: center; }
.story .hero-film { inline-size: min(100%, 36rem); }

/* The film beside the promise: the steps light up as it plays. */
.hero-film { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(18px, 2vw, 28px) clamp(14px, 2vw, 24px) clamp(20px, 2.4vw, 32px); border-radius: var(--radius);
  background: radial-gradient(60% 70% at 85% 30%, oklch(96.5% 0.05 92), oklch(96.5% 0.05 92 / 0)), radial-gradient(50% 60% at 0% 100%, oklch(95% 0.04 295), oklch(95% 0.04 295 / 0)), var(--sand); }
.hero-film .phone { --w: clamp(220px, 8vw + 150px, 280px); }
/* The three steps as one row of pills above the phone; the one the film is at is lit. */
.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.steps li { display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 4px 14px 4px 4px; border-radius: 999px; background: color-mix(in oklch, var(--paper) 55%, transparent); }
.steps li strong { font: 800 14px/1.1 var(--text); color: color-mix(in oklch, var(--ink) 70%, transparent); white-space: nowrap; }
.step-n { display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink); font-weight: 800; font-size: 13px; }
.steps li.on { background: var(--paper); box-shadow: var(--shadow); }
.steps li.on strong { color: var(--ink); }
.steps li.on .step-n { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: no-preference) { .steps li, .step-n { transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out), color 400ms var(--ease-out); } }

/* ── Features: text beside a tinted stage ───────────────────────────── */
.features { inline-size: var(--wide); margin: var(--section) auto 0; display: flex; flex-direction: column; gap: clamp(104px, 11vw, 176px); }
.features > h2 { text-align: center; }
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(44px, 7vw, 112px); }
.feature.flip .feature-text { order: 2; }
.feature-text { display: flex; flex-direction: column; gap: 22px; max-inline-size: 30rem; }
.feature-text p { font-size: var(--lead); line-height: 1.6; color: var(--muted); }
.stage { position: relative; display: grid; place-items: center; border-radius: var(--radius); padding: clamp(28px, 4vw, 56px) 8%; }
.stage.peach { background: radial-gradient(70% 60% at 50% 100%, oklch(96.5% 0.03 45), oklch(96.5% 0.03 45 / 0)), var(--peach); }
.stage.sky { background: radial-gradient(70% 60% at 50% 100%, oklch(97% 0.025 240), oklch(97% 0.025 240 / 0)), var(--sky); }
.stage.lilac { background: radial-gradient(70% 60% at 50% 100%, oklch(97% 0.025 295), oklch(97% 0.025 295 / 0)), var(--lilac); }
.stage.mint { background: radial-gradient(70% 60% at 50% 100%, oklch(97% 0.03 170), oklch(97% 0.03 170 / 0)), var(--mint); }
.stage .phone { --w: clamp(220px, 14vw + 100px, 290px); }

/* Paint: one print, twelve styles as chips (radios swap the painting, no script needed) */
.painter { display: flex; flex-direction: column; align-items: center; gap: 22px; inline-size: 100%; padding-block: 8%; }
.polaroid { display: grid; inline-size: min(64%, 300px); padding: 12px 12px 0; background: var(--paper); border-radius: 6px; box-shadow: var(--shadow-big); rotate: -2deg; }
.polaroid .st { display: none; }
.polaroid img { grid-area: 1 / 1; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.polaroid figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 12px 4px 14px; font: 600 13px/1.2 var(--text); color: var(--muted); }
.st-name > span { display: none; }
.styles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; border: none; padding: 0; max-inline-size: 30rem; }
.styles label { position: relative; display: grid; place-items: center; min-block-size: 36px; padding-inline: 14px; border-radius: 999px; background: color-mix(in oklch, var(--paper) 70%, transparent); font-size: 14px; font-weight: 650; cursor: pointer; }
.styles input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.styles label:has(:checked) { background: var(--ink); color: var(--paper); }
.styles label:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .styles label:hover:not(:has(:checked)) { background: var(--paper); } }
@media (prefers-reduced-motion: no-preference) { .polaroid.swap img { animation: repaint 520ms var(--ease-out); } }
@keyframes repaint { from { filter: sepia(0.4) brightness(0.92) blur(2px); } to { filter: none; } }

.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 2.4vw, 32px); }
.card { display: flex; flex-direction: column; gap: 28px; border-radius: var(--radius); overflow: clip; padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) 0; }
.card h3 { font-size: 1.625rem; }
.card-text { display: flex; flex-direction: column; gap: 12px; }
.card-text p { color: var(--muted); line-height: 1.6; }
.card.sky { background: var(--sky); } .card.honey { background: var(--sun); } .card.rose { background: var(--rose); } .card.sand { background: var(--sand); }
.card-art { margin-block-start: auto; display: grid; place-items: end center; min-block-size: 300px; }
.streak { place-items: center; align-content: center; gap: 6px; padding-block-end: 36px; }
.streak .flame { inline-size: 72px; color: oklch(72% 0.19 50); filter: drop-shadow(0 10px 14px oklch(70% 0.18 50 / 0.35)); }
.streak strong { font: 900 4.5rem/0.9 var(--display); }
.streak .days { font-weight: 700; color: var(--muted); }
.week { display: flex; gap: 8px; margin-block-start: 14px; }
.week li { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 13px/1 var(--text); color: var(--muted); }
.week li span { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: color-mix(in oklch, var(--paper) 70%, transparent); }
.week li.on span { background: oklch(76% 0.17 55); color: var(--paper); }
.week li.today span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px oklch(76% 0.17 55); }
.week svg { inline-size: 18px; }
.card.wide { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding-block-start: 0; }
.card.wide .card-text { padding-block: 32px; }
.browser { align-self: end; margin-block-start: 36px; border-radius: 16px 16px 0 0; overflow: clip; background: var(--paper); box-shadow: var(--shadow-big); }
.browser .dots { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: oklch(96% 0.004 80); }
.browser .dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: oklch(85% 0.01 80); }
.browser .dots b { margin-inline: auto; padding: 3px 14px; border-radius: 8px; background: var(--paper); font: 500 12px/1.3 var(--text); color: var(--muted); }

/* ── Cast: all 32 figures on one colourful stage ────────────────────── */
.cast { inline-size: var(--wide); margin: var(--section) auto 0; padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px); border-radius: var(--radius); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px);
  background: radial-gradient(50% 60% at 0% 0%, oklch(94% 0.07 92), oklch(94% 0.07 92 / 0)), radial-gradient(50% 60% at 100% 0%, oklch(93% 0.05 175), oklch(93% 0.05 175 / 0)), radial-gradient(60% 60% at 0% 100%, oklch(93% 0.05 300), oklch(93% 0.05 300 / 0)), radial-gradient(60% 60% at 100% 100%, oklch(93% 0.05 30), oklch(93% 0.05 30 / 0)), var(--paper); }
.cast-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cast-head p { font-size: var(--lead); color: var(--muted); max-inline-size: 36ch; }
.families { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px 4px; }
.families button { inline-size: 100%; hyphens: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 10px; border: none; border-radius: 20px; background: none; font: 650 13px/1.2 var(--text); color: var(--ink); text-align: center; }
/* Hover: every figure the same, wherever it sits on the gradient: a lifted card, the figure hops up a little
   (springy, Lasseter) and looks around once (site.js). */
@media (hover: hover) and (pointer: fine) {
  .families button:hover, .families button:focus-visible { background: var(--paper); box-shadow: 0 10px 24px -14px oklch(30% 0.04 280 / 0.45), 0 0 0 1px oklch(30% 0.02 280 / 0.06); }
  .families button:hover .sprite { translate: 0 -5px; }
}
.families button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .families button { transition: scale var(--t-press) var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
  .families .sprite { transition: translate 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
}

/* ── Privacy: a night sky ───────────────────────────────────────────── */
.privacy { inline-size: var(--wide); margin: var(--section) auto 0; }
.night { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(32px, 5vw, 80px); padding: clamp(36px, 5vw, 80px); border-radius: var(--radius); overflow: clip; color: var(--on-night);
  background: radial-gradient(60% 70% at 85% 20%, oklch(40% 0.1 285), oklch(40% 0.1 285 / 0)), radial-gradient(50% 60% at 10% 100%, oklch(34% 0.08 250), oklch(34% 0.08 250 / 0)), var(--night); }
.privacy-text { display: flex; flex-direction: column; align-items: start; gap: 24px; }
.promises { display: flex; flex-direction: column; gap: 18px; color: var(--night-muted); font-size: var(--lead); line-height: 1.45; }
.promises strong { color: var(--on-night); }
.privacy .text-link { color: var(--on-night); }
.privacy-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block-start: 90px; }
.vault { position: absolute; inset-block-start: -8px; display: grid; place-items: center; inline-size: 84px; block-size: 84px; border-radius: 28px; background: oklch(100% 0 none / 0.1); box-shadow: inset 0 0 0 1px oklch(100% 0 none / 0.18), 0 0 60px oklch(80% 0.08 280 / 0.35); color: oklch(92% 0.06 90); }
.vault svg { inline-size: 40px; }
.sky-moons i { position: absolute; border-radius: 50%; background: oklch(92% 0.04 90); box-shadow: 0 0 14px oklch(92% 0.06 90 / 0.7); }
.sky-moons i:nth-child(1) { inline-size: 8px; block-size: 8px; inset-block-start: 6%; inset-inline-start: 8%; }
.sky-moons i:nth-child(2) { inline-size: 5px; block-size: 5px; inset-block-start: 22%; inset-inline-end: 6%; }
.sky-moons i:nth-child(3) { inline-size: 12px; block-size: 12px; inset-block-start: 0; inset-inline-end: 22%; background: oklch(85% 0.08 300); }
.sky-moons i:nth-child(4) { inline-size: 6px; block-size: 6px; inset-block-start: 30%; inset-inline-start: 18%; background: oklch(85% 0.08 175); }
.switch-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; inline-size: min(100%, 24rem); padding: 18px 20px; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-big); text-align: start; cursor: pointer; }
.switch-card span { display: flex; flex-direction: column; gap: 3px; }
.switch-card strong { font-size: 1.0625rem; }
.switch-card small { color: var(--muted); font-size: 13px; }
.switch-card input { appearance: none; flex: none; inline-size: 52px; block-size: 32px; margin: 0; border-radius: 999px; background: oklch(88% 0.005 270); cursor: pointer; position: relative; }
.switch-card input::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 6px oklch(20% 0.02 270 / 0.25); }
.switch-card input:checked { background: oklch(70% 0.17 150); }
.switch-card input:checked::after { translate: 20px 0; }
.switch-card input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .switch-card input { transition: background-color 200ms ease; } .switch-card input::after { transition: translate 240ms var(--spring); } }
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.seals li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: oklch(100% 0 none / 0.1); font-weight: 650; font-size: 14px; }
.seals svg { inline-size: 15px; }

/* ── Price ──────────────────────────────────────────────────────────── */
.pricing { inline-size: var(--wide); margin: var(--section) auto 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pricing-lead { font-size: var(--lead); color: var(--muted); max-inline-size: 36ch; }
.plan { display: flex; flex-direction: column; align-items: center; gap: 18px; inline-size: min(100%, 30rem); margin-block-start: 28px; padding: clamp(32px, 3.6vw, 48px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 1px 2px oklch(30% 0.03 70 / 0.05), 0 28px 64px -28px oklch(30% 0.05 70 / 0.28), inset 0 0 0 1px var(--line); }
.billing { display: flex; gap: 4px; padding: 4px; border: none; border-radius: 999px; background: var(--tone); }
.billing label { position: relative; display: grid; place-items: center; min-block-size: 44px; padding-inline: 18px; border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; }
.billing input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.billing label:has(:checked) { background: var(--paper); box-shadow: var(--shadow); }
.billing label:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.billing em { font-style: normal; margin-inline-start: 6px; padding: 3px 8px; border-radius: 999px; background: oklch(90% 0.1 150); color: oklch(35% 0.09 150); font-size: 13px; }
.plan-name { font: 900 1.25rem/1 var(--display); margin-block-start: 10px; }
.price { font: 900 clamp(3rem, 2rem + 3vw, 4.25rem)/1 var(--display); letter-spacing: -0.03em; }
.price small { margin-inline-start: 8px; font: 600 1rem/1 var(--text); letter-spacing: 0; color: var(--muted); }
.per { color: var(--muted); font-size: 15px; }
.pricing:has(#bill-monthly:checked) .when-yearly, .pricing:has(#bill-yearly:checked) .when-monthly { display: none; }
.includes { display: flex; flex-direction: column; gap: 10px; inline-size: 100%; margin-block: 10px; text-align: start; }
.includes li { display: flex; gap: 10px; }
.includes svg { inline-size: 22px; block-size: 22px; padding: 3px; border-radius: 50%; background: oklch(92% 0.08 150); color: oklch(42% 0.11 150); margin-block-start: 1px; }
.plan .button { inline-size: 100%; }
.after { font-size: 14px; color: var(--muted); }
.fine { max-inline-size: 46ch; font-size: 13px; color: var(--muted); }

/* ── FAQ: one accordion ─────────────────────────────────────────────── */
.faq { inline-size: min(100% - var(--margin) * 2, 48rem); margin: var(--section) auto 0; display: flex; flex-direction: column; gap: 28px; }
.faq h2 { text-align: center; }
.answers { display: flex; flex-direction: column; gap: 12px; }
.answers details { border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.answers summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 64px; padding: 14px 22px; font-weight: 700; font-size: 1.0625rem; list-style: none; cursor: pointer; }
.answers summary::-webkit-details-marker { display: none; }
.answers summary span { display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--tone); }
.answers summary svg { inline-size: 18px; }
.answers details[open] summary svg { rotate: 45deg; }
.answers details p { padding: 0 22px 22px; color: var(--muted); }
.answers details::details-content { block-size: 0; overflow: clip; }
.answers details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .answers details::details-content { transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete; }
  .answers summary svg { transition: rotate 0.3s var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) { .answers summary:hover span { background: color-mix(in oklch, var(--ink) 12%, var(--paper)); } }

/* ── Final: sun rays around Mivelu ──────────────────────────────────── */
.final { inline-size: var(--wide); margin: var(--section) auto 0; }
.sun { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(40px, 6vw, 96px) var(--margin); border-radius: var(--radius); overflow: clip; text-align: center; isolation: isolate;
  background: radial-gradient(50% 60% at 50% 0%, oklch(98% 0.05 95), oklch(98% 0.05 95 / 0)), var(--sun); }
.sun::before { content: ''; position: absolute; inset: -60% -20% 10%; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 30%, oklch(100% 0 none / 0.55) 0deg 7deg, transparent 7deg 18deg); mask-image: radial-gradient(closest-side at 50% 30%, black 30%, transparent); }
.sun h2 { font-size: var(--t5); max-inline-size: 13ch; }
.sun > p:not(.note) { font-size: var(--lead); color: var(--muted); }
.final-pearl { filter: drop-shadow(0 22px 22px oklch(60% 0.1 80 / 0.3)); }

/* ── Footer ─────────────────────────────────────────────────────────── */
/* Footer: one soft card (brand and claim, the sections in two columns, the language), three figures sitting on its
   top edge; under it the legal line and the company, quiet. */
.foot { inline-size: var(--wide); margin: clamp(72px, 8vw, 104px) auto 0; padding-block-end: 28px; display: flex; flex-direction: column; gap: 18px; font-size: 15px; }
.foot-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 28px 40px; align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius);
  background: linear-gradient(160deg, oklch(96% 0.03 290), oklch(96% 0.035 75)); }
.foot-cast { position: absolute; inset-block-start: 0; inset-inline-end: clamp(24px, 6vw, 72px); display: flex; align-items: end; gap: 2px; translate: 0 -70%; }
.foot-brand { display: flex; flex-direction: column; align-items: start; gap: 12px; }
.foot-claim { font: 900 clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem)/1.1 var(--display); letter-spacing: -0.015em; text-wrap: balance; max-inline-size: 16ch; }
.foot-menu { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 32px; }
.foot-menu a { display: inline-flex; align-items: center; min-block-size: 40px; font-weight: 650; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-menu a:hover, .legal-line a:hover { text-decoration: underline; } }
.foot-tools { display: flex; flex-direction: column; align-items: end; gap: 12px; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-inline: clamp(8px, 2vw, 16px); font-size: var(--t1); color: var(--muted); }
.legal-line { display: flex; flex-wrap: wrap; gap: 0 20px; }
.legal-line a { display: inline-flex; align-items: center; min-block-size: 36px; text-decoration: none; }


/* Entrances below the fold: once, rising a little; never hidden without script. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].is-in { opacity: 1; translate: none; }
}

/* The checked style shows its painting and its name (one rule per style, written by hand from STYLE_IDS). */
.painter:has(#st-feder:checked) .st-feder,
.painter:has(#st-aquarell:checked) .st-aquarell,
.painter:has(#st-bilderbuch:checked) .st-bilderbuch,
.painter:has(#st-stoff:checked) .st-stoff,
.painter:has(#st-skizzenheft:checked) .st-skizzenheft,
.painter:has(#st-journal-sticker:checked) .st-journal-sticker,
.painter:has(#st-liubai:checked) .st-liubai,
.painter:has(#st-farbinsel:checked) .st-farbinsel,
.painter:has(#st-oelkreide:checked) .st-oelkreide,
.painter:has(#st-gummistempel:checked) .st-gummistempel,
.painter:has(#st-aquarell-figur:checked) .st-aquarell-figur,
.painter:has(#st-feder-anker:checked) .st-feder-anker { display: contents; }
.painter:has(#st-feder:checked) .n-feder,
.painter:has(#st-aquarell:checked) .n-aquarell,
.painter:has(#st-bilderbuch:checked) .n-bilderbuch,
.painter:has(#st-stoff:checked) .n-stoff,
.painter:has(#st-skizzenheft:checked) .n-skizzenheft,
.painter:has(#st-journal-sticker:checked) .n-journal-sticker,
.painter:has(#st-liubai:checked) .n-liubai,
.painter:has(#st-farbinsel:checked) .n-farbinsel,
.painter:has(#st-oelkreide:checked) .n-oelkreide,
.painter:has(#st-gummistempel:checked) .n-gummistempel,
.painter:has(#st-aquarell-figur:checked) .n-aquarell-figur,
.painter:has(#st-feder-anker:checked) .n-feder-anker { display: inline; }

/* ── Legal pages, cancel page, 404 ───────────────────────────────────── */
.legal { inline-size: min(100% - var(--margin) * 2, 46rem); margin: 4rem auto 8rem; display: flex; flex-direction: column; gap: 1rem; }
.legal h1 { font-size: var(--t4); }
.legal h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin-block-start: 1.6rem; scroll-margin-block-start: 5.5rem; }
.legal h3 { font: 700 1.0625rem/1.35 var(--text); letter-spacing: 0; margin-block-start: 0.6rem; }
.legal ul, .legal ol { padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 0.4rem; }
.legal a { text-underline-offset: 2px; }
.prose { display: flex; flex-direction: column; gap: 1rem; }
.prose p, .prose li { max-inline-size: 68ch; }
.prose blockquote { margin: 0; padding: 18px 22px; background: var(--paper); border-radius: 20px; display: flex; flex-direction: column; gap: 0.6rem; }
.toc ol { margin: 0; padding-inline-start: 1.4em; columns: 2 16rem; column-gap: 2rem; color: var(--muted); }
.toc li { break-inside: avoid; padding-block: 0.15rem; }
.todo-note { padding: 0.05em 0.4em; background: oklch(92% 0.1 75); color: oklch(33% 0.08 60); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.todo-note b { font-size: 0.8em; letter-spacing: 0.04em; margin-inline-end: 0.35em; }
.todo-box { display: flex; flex-direction: column; gap: 0.6rem; padding: 22px 26px; background: oklch(93% 0.08 80); color: oklch(32% 0.07 60); }
.todo-box strong { font: 900 1.25rem/1.2 var(--display); }
.translation-note { padding: 12px 16px; background: var(--paper); color: var(--muted); }
.facts { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: 0.9rem 2rem; margin: 1rem 0 0; }
.facts dt { font-weight: 650; color: var(--muted); }
.facts dd { margin: 0; }
.cancel { display: flex; flex-direction: column; gap: 1rem; }
.cancel-form, .cancel-done { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.8rem; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cancel-form[hidden], .cancel-done[hidden], .cancel-error[hidden] { display: none; }
.cancel-form .facts, .cancel-done .facts { margin: 0; }
.cancel-done h2 { margin: 0; outline: none; }
.cancel-field { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 650; }
.cancel-field input { min-block-size: 52px; padding-inline: 16px; border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent); border-radius: 14px; background: var(--ground); font: inherit; font-weight: 400; color: var(--ink); }
.cancel-form .button { align-self: start; }
.cancel-form .button:disabled { opacity: 0.5; }
.cancel-error { color: oklch(48% 0.17 25); }
.not-found { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-block: 3rem; }
.not-found img { inline-size: 140px; }
@media print { .top, .foot, .cancel > h2, .cancel > p, .cancel-done .button { display: none; } }


/* ── Narrow screens: recomposed, not squeezed ───────────────────────── */
@media (width < 72rem) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card.wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
}
@media (width < 68rem) {
  .top .sections { display: none; }
  .top .lang-menu { margin-inline-start: auto; }
}
@media (width < 60rem) {
  .top .lang-menu { margin-inline-start: auto; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature.flip .feature-text { order: 0; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card.wide { grid-template-columns: minmax(0, 1fr); padding-block-start: clamp(24px, 2.6vw, 36px); gap: 0; }
  .card.wide .card-text { padding-block: 0; }
  .night { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 40rem) {
  .top { gap: 4px; }
  .top .wordmark span { display: none; }
  .top .button { padding-inline: 14px; }
  .top .login { padding-inline: 10px; }
  .wordmark { font-size: 1.25rem; }
  .wordmark img { inline-size: 28px; }
  /* Phone hero: one clear order of sizes. The headline leads; the heard feelings are one small row under it;
     the lead reads at body size; one full-width action with its price; stores side by side and the promises
     in one quiet line below. */
  /* Centred on a phone: headline, feelings, lead and action on one axis, like a poster. */
  .hero { gap: 40px; padding-block: 48px 16px; }
  .hero-text { gap: 22px; align-items: center; text-align: center; }
  .hero h1 { margin-inline: auto; }
  .tray { justify-content: center; }
  .hero .lead { max-inline-size: 32ch; margin-inline: auto; }
  .tray { flex-wrap: nowrap; gap: 6px; min-block-size: 44px; margin-block: -4px 0; }
  .tray-fig, .tray-fig.main { min-block-size: 40px; gap: 4px; padding: 0 12px 0 3px; font-size: 14px; box-shadow: 0 6px 14px -10px oklch(30% 0.05 280 / 0.5); }
  .tray-fig .sprite, .tray-fig.main .sprite { --s: 34px !important; }
  .hero .lead { font-size: 1.0625rem; line-height: 1.65; }
  .hero-start { gap: 12px; margin-block-start: 10px; }
  .hero-start .note { font-size: 13px; text-align: center; }
  .hero-more { flex-direction: column; align-items: stretch; gap: 20px; margin-block-start: 6px; }
  /* The stores are only "soon": on a phone the hero leaves them to the final call and keeps its air. */
  .hero-more .stores:not(:has(a)) { display: none; }
  .hero-more .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-more .store-pill { justify-content: center; min-block-size: 44px; padding-inline: 8px; }
  .hero-more .store-pill span { flex-direction: column; align-items: start; gap: 1px; font-size: 14px; }
  .hero-more .store-pill small { font-size: 11px; }
  .trust { justify-content: center; gap: 4px 14px; font-size: 12px; }
  .trust svg { inline-size: 13px; }
  /* The film's steps as one row: the step it is at shows its name, the others only their number. */
  .steps { flex-wrap: nowrap; gap: 4px; }
  .steps li { padding-inline-end: 4px; }
  .steps li:not(.on) strong { display: none; }
  .steps li.on { padding-inline-end: 12px; }
  .actions { flex-direction: column; align-items: stretch; inline-size: 100%; }
  .actions .button { justify-content: center; }
  .hero-film .phone, .stage .phone { --w: min(72vw, 290px); }
  .hero-start { align-items: stretch; inline-size: 100%; }
  .hero-start .button { justify-content: center; }
  .hero-more { inline-size: 100%; }
  .film-toggle { inset-inline-end: -10px; }
  .polaroid { inline-size: 58%; }
  .styles label { min-block-size: 34px; padding-inline: 11px; font-size: 13px; }
  .families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .families .sprite { --s: 64px !important; }
  .families button { font-size: 13px; }
  .foot-card { grid-template-columns: minmax(0, 1fr); }
  .foot-tools { align-items: start; }
  .foot-cast { inset-inline-end: 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .facts dd { margin-block-end: 0.8rem; }
}
/* Very narrow (iPhone SE with zoom, slim panes): the hero's own button is right below, so the bar keeps logo and language. */
/* Phones: the bar keeps logo, sign-in and the one action; the language menu waits in the footer. */
@media (width < 30rem) {
  .top .lang-menu { display: none; }
  .top .login { margin-inline-start: auto; }
}
@media (width < 25rem) {
  .top .wordmark { flex: none; }
  .top .login { padding-inline: 8px; font-size: 14px; }
  .top .button { padding-inline: 12px; }
  .lang-menu summary { padding-inline: 6px; gap: 5px; }
}
@media (width < 23rem) {
  .top .button { display: none; }
}
/* English page: euro in Europe, US dollars elsewhere (site.js sets .usd from the time zone). */
.cur-usd, .usd .cur-eur { display: none; }
.usd .cur-usd { display: inline; }
/* ── Reminders and widgets (prepared; drawn until the iOS screens arrive) ── */
.soon-badge { align-self: start; padding: 5px 12px; border-radius: 999px; background: oklch(93% 0.05 255); color: oklch(38% 0.12 255); font-size: 13px; font-weight: 700; }
.stage.widget-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); align-content: center; place-items: stretch; padding: clamp(18px, 2.4vw, 32px);
  background: linear-gradient(160deg, oklch(74% 0.07 250), oklch(60% 0.09 300)); }
.wg { position: relative; display: flex; flex-direction: column; gap: 6px; aspect-ratio: 1; padding: 12px; border-radius: 22px; background: oklch(100% 0 none / 0.9); overflow: clip; box-shadow: 0 10px 24px -14px oklch(25% 0.05 280 / 0.5); }
.wg.md { grid-column: span 2; aspect-ratio: 2.14; flex-direction: row; align-items: center; }
.wg small { font-size: 11px; font-weight: 700; color: oklch(50% 0.005 90); }
.wg strong { font: 900 clamp(13px, 0.6rem + 0.45vw, 16px)/1.15 var(--display); letter-spacing: -0.01em; }
.wg-col { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.wg-row { display: flex; flex-wrap: wrap; gap: 5px; }
.wg-pill { display: inline-grid; place-items: center; block-size: 26px; padding-inline: 10px; border-radius: 999px; background: var(--tone); font-size: 12px; font-weight: 700; }
.wg-pill.dark { background: var(--ink); color: var(--paper); }
/* The small memory widget as on iOS: only the whole print (3 : 4 picture, wide bottom margin), slightly turned. */
.wg.memory { align-items: center; justify-content: center; }
.wg-print { display: block; inline-size: 68%; padding: 4px 4px 14px; background: oklch(99% 0.002 90); border-radius: 3px; box-shadow: 0 6px 12px -6px oklch(25% 0.05 60 / 0.45); rotate: -3deg; }
.wg-print img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1px; }
.wg.think { justify-content: space-between; background: oklch(97% 0.025 255 / 0.95); }
.wg-link { font-size: 12px; font-weight: 700; color: oklch(45% 0.12 255); }
.wg.tasks { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.wg-task { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wg-task i { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 1.6px solid oklch(70% 0.005 90); flex: none; }
.wg-task em { margin-inline-start: auto; font-style: normal; font-size: 12px; color: oklch(48% 0.15 30); }
.wg-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-block-start: auto; }
.wg-dots i { aspect-ratio: 1; border-radius: 50%; background: oklch(90% 0.004 90); }
.wg-dots .f-joy { background: oklch(85% 0.15 90); } .wg-dots .f-contentment { background: oklch(82% 0.09 175); } .wg-dots .f-fear { background: oklch(70% 0.1 290); }
.wg-dots .f-pride { background: oklch(76% 0.15 60); } .wg-dots .f-sadness { background: oklch(68% 0.1 255); } .wg-dots .f-love { background: oklch(72% 0.15 10); } .wg-dots .f-gratitude { background: oklch(80% 0.13 75); }
.wg.capture { justify-content: space-between; background: oklch(22% 0.01 270 / 0.9); color: oklch(98% 0 none); }
.wg-plus { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: oklch(100% 0 none / 0.16); }
.wg-plus svg { inline-size: 20px; }
@media (width < 40rem) { .stage.widget-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── What Mivelu does differently: four plain promises, each in a feeling tint ── */
.different { inline-size: var(--wide); margin: clamp(104px, 10vw, 168px) auto 0; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.different > h2 { text-align: center; }
.different-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 18px; }
.different-list li { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--radius); }
.different-list .d0 { background: var(--butter); } .different-list .d1 { background: var(--sky); } .different-list .d2 { background: var(--mint); } .different-list .d3 { background: var(--peach); }
.d-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 16px; background: oklch(100% 0 none / 0.7); color: var(--ink); }
.d-icon svg { inline-size: 24px; }
.different-list strong { font: 900 1.375rem/1.15 var(--display); letter-spacing: -0.01em; }
.different-list p { color: var(--muted); }
/* ── Positioning (2026-10-29): the category line under the claim, the stance over the three pillars, the method,
   the everyday situations ── */
.category { margin-block-start: -12px; font: 800 clamp(1.25rem, 1rem + 0.9vw, 1.75rem)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.stance-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.stance-head h2 { font-size: var(--t3); line-height: 1.15; max-inline-size: 30ch; text-wrap: balance; }
.stance-head p { font-size: var(--lead); color: var(--muted); max-inline-size: 38ch; }
.pillars { counter-reset: none; }
.pillar-name { display: inline-flex; align-items: center; gap: 8px; font: 800 13px/1 var(--text); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pillar-name .num { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); letter-spacing: 0; }
.challenger { padding-inline-start: 16px; border-inline-start: 3px solid oklch(80% 0.09 45); font: 800 var(--t2)/1.4 var(--display); color: var(--ink); }
.feature-text p.challenger { font-size: var(--t2); color: var(--ink); }

.method { inline-size: var(--wide); margin: var(--section) auto 0; display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4vw, 52px); text-align: center; }
.method-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.method-head p { font-size: var(--lead); color: var(--muted); max-inline-size: 34ch; }
.thinkers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 18px; inline-size: min(100%, 52rem); }
.thinker { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius); background: var(--sand); }
.thinker.adler { background: var(--lilac); }
.thinker strong { margin-block-start: 6px; font: 900 1.5rem/1.1 var(--display); letter-spacing: -0.01em; }
.thinker small { font-size: var(--t1); color: var(--muted); }
.thinker p { margin-block-start: 6px; color: var(--muted); max-inline-size: 30ch; }
.thinker-art { display: block; inline-size: clamp(150px, 10rem + 3vw, 220px); block-size: auto; aspect-ratio: 1; }
.thinker img.thinker-art { margin-block: -8px -4px; filter: drop-shadow(0 24px 30px oklch(35% 0.05 70 / 0.25)); }
/* Until Marketing's figures land: a smooth pebble in Mivelu's light, no face. */
.thinker-art.placeholder { border-radius: 46% 54% 50% 50% / 56% 52% 48% 44%; box-shadow: var(--shadow);
  background: radial-gradient(60% 50% at 38% 30%, oklch(100% 0 none / 0.9), oklch(100% 0 none / 0) 70%), radial-gradient(90% 90% at 50% 60%, oklch(96% 0.015 80), oklch(86% 0.025 75)); }
.method-note { font-size: var(--t1); color: var(--muted); max-inline-size: 48ch; }

/* Official store badges (live only): the artwork as it comes, same height as our pills. */
.store-badge { display: inline-flex; border-radius: 12px; }
.store-badge img { block-size: 56px; inline-size: auto; }

/* Performance: sections below the first screen are only laid out and painted when they come near. */
/* Not on pricing and privacy: content-visibility clips paint at the section edge, and their cards' shadows reach past it. */
.features, .method, .cast, .faq, .final { content-visibility: auto; contain-intrinsic-size: auto 900px; }