/* Melon – home page (PL /, EN /en). Vanilla CSS, no build step. Typography-led; motion is
   progressive: without JS or with prefers-reduced-motion the page renders complete and static. */
:root {
  --cream: #FBF5EF;
  --white: #FFFFFF;
  --ink: #1D1B18;
  --muted: #5C5650;
  --line: #E9DFD4;
  --brown: #8A4519;
  --mint: #A8EBD6;
  --mint-ink: #0F3D30;
  --green: #6FD685;
  --orange: #F08C4A;
  --slate: #3D4A52;
  --dim: #948A7F;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --inout: cubic-bezier(0.87, 0, 0.13, 1);
  --quart: cubic-bezier(0.25, 1, 0.5, 1);
  --pad: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
::selection { background: var(--mint); color: var(--mint-ink); }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 4px; border-radius: 4px; }
.trust :focus-visible, .foot :focus-visible { outline-color: var(--mint); }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 8px; z-index: 100; transition: top .3s var(--expo); }
.skip:focus { top: 12px; }

/* ---------- nav ---------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.nav__in { max-width: 1440px; margin-inline: auto; padding: 22px var(--pad); display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 800; font-size: 1.75rem; letter-spacing: -0.045em; text-decoration: none; display: inline-flex; align-items: baseline; line-height: 1; }
.logo__o { width: .78em; height: .78em; margin: 0 .02em 0 .03em; align-self: baseline; transform: translateY(.04em); }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); font-size: .9375rem; font-weight: 500; }
.nav__links a { text-decoration: none; padding: 6px 2px; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--expo); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__org { font-weight: 700; padding: 9px 16px !important; border: 1.5px solid var(--ink); border-radius: 999px; }
.nav__org::after { display: none; }
.nav__org:hover { background: var(--ink); color: var(--cream); }
.nav__lang { font-weight: 700; letter-spacing: .04em; }
@media (max-width: 820px) { .hide-m { display: none; } .nav__org { padding: 8px 12px !important; font-size: .8125rem; } .logo { font-size: 1.5rem; } .nav__links { gap: 8px; } }

/* ---------- hero: copy left, live-ride screen right ---------- */
.hero { position: relative; padding: 112px 0 clamp(64px, 7vw, 110px); overflow: clip; overflow-clip-margin: 0; }
.hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .hero { min-height: min(100svh, 920px); display: flex; align-items: center; }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-ink); background: var(--mint); padding: 7px 14px 7px 11px; border-radius: 999px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-ink); }

.h1 {
  --rows: 1;
  --fs: clamp(2.75rem, 5.3vw, 5.25rem);
  --lh: .96;
  margin-top: 22px;
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 800;
  letter-spacing: -0.045em;
  position: relative;
}
.h1__line { display: block; white-space: nowrap; position: relative; }
.m { display: inline-block; overflow: hidden; padding: .06em .04em .16em; margin: -.06em -.04em -.16em; vertical-align: top; }
.who { display: inline-block; font-weight: 800; color: var(--ink); }
.does { display: inline-block; font-weight: 300; color: var(--brown); letter-spacing: -0.04em; }
.br-m { display: none; }
/* Mobile: three lines and no swap (the JS swap only runs above 720px). */
@media (max-width: 720px) {
  .h1 { --fs: 11vw; }
  .br-m { display: inline; }
}
/* English lines are longer ("Another parent drives back."): smaller display size, same rhythm. */
html[lang="en"] .h1 { --fs: clamp(2.4rem, 4.1vw, 4.1rem); }
@media (max-width: 720px) { html[lang="en"] .h1 { --fs: 9.6vw; } }
.h1.is-swapped .h1__line--a { transform: translate(0, calc(var(--rows) * var(--lh) * 1em)); }
.h1.is-swapped .h1__line--b { transform: translate(0, calc(var(--rows) * var(--lh) * -1em)); }

.lede { margin-top: 24px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--muted); max-width: 34em; }
.get { display: flex; gap: 10px; align-items: center; margin-top: 28px; flex-wrap: wrap; }

/* Store badges: official App Store / Google Play artwork, self-hosted, unmodified, same height
   (at least 40 px for Apple, Google Play never smaller than the other badge). */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store { display: inline-block; border-radius: 10px; line-height: 0; transition: transform .45s var(--expo), box-shadow .45s var(--expo); }
.store img { height: 48px; width: auto; }
/* Google's PNGs carry transparent padding (PL: 29 px top/bottom of 250; EN: 41 px all round), so
   they are scaled until the visible badge is 48 px high and the padding is pulled in with margins. */
.store img.gp--pl { height: 62.5px; margin: -7.25px 0; }
.store img.gp--en { height: 71.4px; margin: -11.7px; }
.store:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(29,27,24,.55); }
.store:focus-visible { outline-offset: 3px; }
.get__sub { width: 100%; margin-top: 2px; font-size: .875rem; color: var(--muted); }
.end__get { display: grid; gap: 10px; }
.end__get .get__sub { color: #B6ACA0; }
.end .store:focus-visible { outline-color: var(--mint); }
@media (min-width: 900px) { .end__get { justify-self: end; justify-items: end; } }

.honest { margin-top: 18px; font-size: .9375rem; color: var(--muted); }
.honest a { color: var(--brown); font-weight: 700; text-underline-offset: 3px; }

/* phones */
.phone { margin: 0; width: var(--w, 240px); border-radius: 12% / 5.6%; background: var(--ink); padding: 5px; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 40px 70px -28px rgba(29,27,24,.45), 0 12px 22px -12px rgba(29,27,24,.25); }
.phone img { width: 100%; height: auto; border-radius: calc(12% - 4px) / calc(5.6% - 2px); aspect-ratio: 480 / 1044; object-fit: cover; object-position: top; background: var(--cream); }

/* Hero art: the logo's rings behind the live-ride screen, plus one notification chip. */
.hero__art { --w: min(22vw, 300px); position: relative; width: var(--w); justify-self: center; z-index: 1; }
.rings { position: absolute; width: 175%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; }
.phone--hero { --w: 100%; transform: rotate(3deg); }
.pings { position: absolute; left: -44%; bottom: 14%; width: 0; height: 0; transform-style: preserve-3d; }
.ping { position: absolute; left: 0; bottom: 0; width: max-content; display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; background: var(--white); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(29,27,24,.45); font-size: .75rem; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.ping b { display: block; color: var(--ink); font-size: .875rem; font-weight: 800; letter-spacing: -0.02em; }
.ping__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--mint); position: relative; flex: none; }
.ping__dot::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 12px; border: solid var(--mint-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (max-width: 899px) {
  .hero { padding-top: 92px; }
  .hero__art { --w: min(56vw, 250px); margin: 16px 6vw 0 auto; justify-self: end; }
  .pings { left: -56%; bottom: 20%; }
}

/* ---------- marquee (moves with scroll, not on its own) ---------- */
.marq { background: var(--mint-ink); color: var(--mint); overflow: hidden; padding: 14px 0 18px; position: relative; z-index: 3; }
.marq__track { display: flex; width: max-content; font-size: clamp(1.5rem, 3.2vw, 2.75rem); line-height: 1; letter-spacing: -0.04em; font-weight: 300; white-space: nowrap; }
.marq__track span { padding-right: .35em; }
.marq__track b { font-weight: 800; color: var(--white); }
.marq__track i { font-style: normal; color: var(--orange); font-weight: 800; padding: 0 .3em; }

/* ---------- drive: the Melon car on a scroll-driven trip (CSS 3D, no libraries) ----------
   Without JS or with reduced motion the scene is a still overview with the car at practice and
   all four beats listed; home.js adds .is-live, makes the section tall and the stage sticky. */
.drive { position: relative; background: linear-gradient(180deg, var(--cream) 0%, #F6EEE5 100%); }
.drive__sticky { position: relative; display: grid; overflow: hidden; }
.drive__stage { position: relative; height: clamp(420px, 52vw, 580px); perspective: 1500px; perspective-origin: 50% 35%; overflow: hidden; }
.world {
  --cx: 700; --cy: 600; --r: -36deg; --zoom: .52;
  position: absolute; left: 50%; top: 48%; width: 1400px; height: 1400px; transform-origin: 0 0; transform-style: preserve-3d;
  transform: scale(var(--zoom)) rotateX(56deg) rotateZ(var(--r)) translate3d(calc(var(--cx) * -1px), calc(var(--cy) * -1px), 0);
}
.world > * { transform-style: preserve-3d; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__trail { stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: var(--off, 0); }

/* cuboid: --l along x, --w along y, --h up (z), lifted by --z */
.cub { position: absolute; width: calc(var(--l) * 1px); height: calc(var(--w) * 1px); transform-style: preserve-3d; transform: translateZ(calc(var(--z, 0) * 1px)); }
.cub > i { position: absolute; display: block; }
.cub > .t { inset: 0; transform: translateZ(calc(var(--h) * 1px)); background: var(--top); }
.cub > .n, .cub > .s { left: 0; width: 100%; height: calc(var(--h) * 1px); transform-origin: 0 0; transform: rotateX(90deg); background: var(--side2); }
.cub > .n { top: 0; }
.cub > .s { top: 100%; }
.cub > .w, .cub > .e { top: 0; height: 100%; width: calc(var(--h) * 1px); transform-origin: 0 0; transform: rotateY(-90deg); background: var(--side); }
.cub > .w { left: 0; }
.cub > .e { left: 100%; }

.bld { --top: #FFFDF9; --side: #EADFD2; --side2: #DCCFBF; }
.bld > .n, .bld > .s, .bld > .w, .bld > .e { background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(61,74,82,.16) 10px 18px, transparent 18px 26px), repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.5) 9px 11px); }
.bld--m { --top: #D6F5EA; --side: #A8EBD6; --side2: #8FDCC4; }
.bld--p { --top: #FDE7D6; --side: #F6C7A3; --side2: #EFB48A; }
.bld--h { --top: #F08C4A; --side: #FBF5EF; --side2: #EADFD2; }
.tree { position: absolute; width: 0; height: 0; }
.tree i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9BE3AC, #5DBE75 70%); box-shadow: 10px 12px 0 rgba(29,27,24,.08); transform: translateZ(16px); }

/* the Melon car: green rind body with stripes, orange roof, logo sign */
.car { --x: 1170; --y: 300; --a: 0; --spin: 0deg; position: absolute; left: 0; top: 0; width: 0; height: 0; transform: translate3d(calc(var(--x) * 1px), calc(var(--y) * 1px), 0) rotateZ(calc(var(--a) * 1deg)); }
.car__shadow { position: absolute; left: -64px; top: -36px; width: 128px; height: 72px; border-radius: 40%; background: radial-gradient(closest-side, rgba(29,27,24,.32), rgba(29,27,24,0)); transform: translateZ(1px); }
.car__body { --top: #6FD685; --side: #57C270; --side2: #49B062; }
.car__body > .t { background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(15,61,48,.14) 14px 22px); border-radius: 10px; }
.car__body > .n, .car__body > .s { background-image: linear-gradient(180deg, transparent 0 55%, #F08C4A 55% 68%, transparent 68%); }
.car__cab { --top: #F08C4A; --side: #2F5E50; --side2: #3D7F6C; }
.car__cab > .t { border-radius: 8px; }
.car__cab > .n, .car__cab > .s { background-image: linear-gradient(90deg, #3D7F6C 0 8%, #A8EBD6 8% 46%, #3D7F6C 46% 54%, #A8EBD6 54% 92%, #3D7F6C 92%); }
.car__sign { --top: #FBF5EF; --side: #FBF5EF; --side2: #EADFD2; }
.car__sign > .t { display: grid; place-items: center; }
.car__sign svg { width: 16px; height: 16px; }
.hl, .tl { position: absolute; width: 8px; height: 9px; border-radius: 3px; background: #FFF6C8; box-shadow: 0 0 10px #FFF6C8; left: 11px; top: 7px; }
.hl--2 { top: 40px; }
.tl { background: #E5533D; box-shadow: none; }
.tl--2 { top: 40px; }
.wh { position: absolute; width: 24px; height: 24px; transform-origin: 50% 0; transform: rotateX(90deg); }
.wh b { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #D9D2CA 0 20%, #3D4A52 21% 34%, transparent 35%), conic-gradient(from 0deg, #1D1B18 0 25%, #2A2723 0 50%, #1D1B18 0 75%, #2A2723 0); transform: rotate(var(--spin)); }
.wh--s { transform-origin: 50% 0; }

/* billboards: counter-rotate so they stand up and face the camera */
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; transform: translate3d(calc(var(--px) * 1px), calc(var(--py) * 1px), var(--pz, 130px)) rotateZ(calc(var(--r) * -1)) rotateX(-56deg); }
.pin__b { position: absolute; left: 0; bottom: 0; width: max-content; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 18px 30px -16px rgba(29,27,24,.5); transform: translate(-50%, -38px); transform-origin: 50% 100%; }
.pin__b::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 4px; height: 30px; margin-left: -2px; background: var(--ink); border-radius: 2px; }
.pin--home .pin__b, .pin--end .pin__b { padding: 10px 20px; background: var(--ink); color: var(--cream); }
.pin--end .pin__b { background: var(--mint-ink); color: var(--mint); }
.pin__av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); font-style: normal; }

/* UI over the stage */
.drive__ui { position: relative; z-index: 2; padding: 0 var(--pad); max-width: 1440px; margin: 0 auto; width: 100%; }
.eyebrow--plain { margin: 0; color: var(--brown); }
.eyebrow--plain::after { display: none; }
.drive__head { padding-top: clamp(56px, 7vw, 96px); }
.drive__h { margin-top: 10px; font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; max-width: 14em; }
.drive__h span { display: block; color: var(--brown); font-weight: 300; }
.drive__lead { margin-top: 12px; color: var(--muted); font-size: 1.0625rem; }
.drive:not(.is-live) .drive__lead { display: none; }
.beats { display: grid; gap: 12px; padding: 28px 0 56px; }
.beat { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 1px 0 rgba(29,27,24,.06); }
.beat__n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--mint-ink); font-size: .8125rem; font-weight: 800; }
.beat h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.beat p { margin-top: 4px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.drive__hud, .drive__bar { display: none; }
@media (min-width: 900px) {
  .drive__sticky { grid-template-columns: minmax(0, 1fr); }
  .drive__stage { order: 2; }
  .beats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 72px; }
  .beat { flex-direction: column; }
}

/* live mode: tall section, sticky full-screen scene, one beat at a time */
.drive.is-live { height: 520vh; }
.drive.is-live .drive__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; }
.drive.is-live .drive__stage { position: absolute; inset: 0; height: auto; }
.drive.is-live .world { top: 54%; }
.drive.is-live .drive__stage::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(180deg, var(--cream) 0 42%, rgba(251,245,239,0)); z-index: 2; pointer-events: none; }
.drive.is-live .pin { --pz: 2px; }
.drive.is-live .drive__ui { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.drive.is-live .drive__head { padding-top: 96px; }
.drive.is-live .beats { position: relative; display: block; padding: 0 0 40px; max-width: 380px; min-height: 150px; }
.drive.is-live .beat { position: absolute; left: 0; right: 0; bottom: 40px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); box-shadow: 0 24px 50px -28px rgba(29,27,24,.5); opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s var(--quart), transform .7s var(--expo); }
.drive.is-live .beat.on { opacity: 1; transform: none; }
.drive.is-live .drive__hud { display: block; position: absolute; right: var(--pad); top: 96px; z-index: 2; text-align: right; }
.drive__clock { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--brown); }
.drive__chip { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 16px 11px 11px; border-radius: 16px; background: var(--white); text-align: left; font-size: .75rem; line-height: 1.3; color: var(--muted); box-shadow: 0 24px 50px -24px rgba(29,27,24,.45); transition: transform .6s var(--expo), opacity .3s var(--quart); }
.drive__chip b { display: block; color: var(--ink); font-size: .875rem; font-weight: 800; letter-spacing: -0.02em; }
.drive__chip.swap { opacity: 0; transform: translate3d(0, -10px, 0) scale(.96); }
.drive__demo { margin-top: 8px; font-size: .6875rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.drive.is-live .drive__bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(29,27,24,.08); z-index: 2; }
.drive__bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--orange)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* live: 3D pins become anchors, flat copies (home.js) are drawn on top so buildings never cut them */
.drive.is-live .world .pin__b { display: none; }
.pins { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.opin { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.opin .pin__b { font-size: 14px; gap: 8px; padding: 6px 14px 6px 6px; transform: translate(-50%, -56px); transform-origin: 50% 100%; }
.opin.pin--home .pin__b, .opin.pin--end .pin__b { padding: 7px 14px; }
.opin .pin__b::after { bottom: -54px; height: 54px; width: 3px; margin-left: -1.5px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--ink), rgba(29,27,24,.35)); }
.opin .pin__av { width: 26px; height: 26px; font-size: 12px; }
.opin.pin--stop .pin__b { opacity: 0; transform: translate(-50%, -56px) scale(.4); transition: transform .7s var(--expo), opacity .35s var(--quart); }
.opin.pin--stop.on .pin__b { opacity: 1; transform: translate(-50%, -56px) scale(1); }
@media (max-width: 899px) {
  .drive.is-live { height: 560vh; }
  .drive.is-live .drive__head { padding-top: 84px; }
  .drive.is-live .drive__h { font-size: 1.75rem; }
  .drive.is-live .drive__lead { display: none; }
  .drive.is-live .beats { max-width: none; min-height: 170px; }
  .drive.is-live .drive__hud { top: auto; bottom: 210px; right: var(--pad); }
  .drive__clock { font-size: 2rem; }
  .drive__demo { display: none; }
}

/* ---------- eyebrow ---------- */
.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 56px); }
.eyebrow::after { content: ""; flex: 1; height: 1.5px; background: var(--ink); opacity: .85; }
.eyebrow--lt::after { background: var(--mint); }

/* ---------- how ---------- */
.how { padding: clamp(72px, 9vw, 130px) 0 clamp(56px, 8vw, 120px); overflow-x: clip; }
.step { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px) 0; border-top: 1.5px solid var(--line); }
.step__n { order: 1; font-size: clamp(4rem, 10vw, 9rem); line-height: .8; font-weight: 800; letter-spacing: -0.07em; color: var(--mint); display: block; user-select: none; }
.step__txt { order: 2; }
.step .phone { order: 3; --w: min(240px, 56vw); margin: 32px 4vw 0 auto; transform: rotate(-2deg); }
.step--2 .phone, .step--4 .phone { margin-left: 4vw; margin-right: auto; transform: rotate(2deg); }
.step__txt h3 { margin-top: 12px; font-size: clamp(1.6rem, 2.7vw, 2.5rem); line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.step__txt p { margin-top: 16px; max-width: 34em; color: var(--muted); font-size: 1.0625rem; }
@media (min-width: 900px) {
  .step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; align-items: center; }
  .step > * { grid-row: 1; }
  .step__n { grid-column: 1 / 4; }
  .step__txt { grid-column: 4 / 9; }
  .step__txt h3 { margin-top: 0; }
  .step .phone { grid-column: 10 / 13; margin: 0; justify-self: center; }
  .step--2 .step__n, .step--4 .step__n { grid-column: 10 / 13; text-align: right; }
  .step--2 .step__txt, .step--4 .step__txt { grid-column: 5 / 10; }
  .step--2 .phone, .step--4 .phone { grid-column: 1 / 4; margin: 0; }
}

/* ---------- trust ---------- */
.trust { background: var(--mint-ink); color: var(--cream); padding: clamp(60px, 8vw, 120px) 0; }
.trust__big { font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 300; text-wrap: balance; max-width: 15em; }
.trust__big .hi { font-weight: 800; color: var(--mint); }
.trust__list { margin-top: clamp(36px, 5vw, 70px); display: grid; gap: 0; counter-reset: t; }
.trust__list li { counter-increment: t; position: relative; padding: 20px 0 20px 3.4rem; border-top: 1px solid rgba(168,235,214,.28); font-size: 1.0625rem; color: #D9E8E0; width: 100%; max-width: 52rem; margin-left: auto; }
.trust__list li::before { content: "0" counter(t); position: absolute; left: 0; top: 20px; color: var(--orange); font-weight: 800; letter-spacing: -0.02em; }
.trust__list b { color: var(--white); font-weight: 800; }
@media (min-width: 900px) { .trust__list li { font-size: 1.1875rem; } }

/* ---------- gallery: real app screens, native horizontal scroll ---------- */
.gal { padding: clamp(64px, 9vw, 130px) 0; overflow: clip; }
.gal__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: -8px; }
.gal__lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 32em; }
.gal__nav { display: flex; gap: 10px; flex: none; }
.gal__nav[hidden] { display: none; }
.gal__btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: background .3s var(--quart), color .3s var(--quart), opacity .3s var(--quart); }
.gal__btn:hover { background: var(--ink); color: var(--cream); }
.gal__btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink); }
.gal__track { --edge: max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad))); display: flex; gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(28px, 4vw, 48px); padding: 8px var(--edge) 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; }
.gal__track:focus-visible { outline-offset: -3px; }
.gal__card { flex: 0 0 auto; width: 240px; scroll-snap-align: start; }
.gal__card .phone { --w: 100%; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 26px 44px -26px rgba(29,27,24,.45); }
.gal__card h3 { margin-top: 18px; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.gal__card p { margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 520px) { .gal__card { width: 200px; } }

/* ---------- club ---------- */
.club { background: var(--mint); color: var(--mint-ink); padding: clamp(60px, 8vw, 120px) 0; position: relative; overflow: clip; }
.club__h { font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.045em; font-weight: 800; max-width: 14em; text-wrap: balance; }
.club__grid { margin-top: clamp(28px, 4vw, 56px); display: grid; gap: 34px; }
.club__p { font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.45; max-width: 28em; font-weight: 500; }
.club__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 900px) { .club__grid { grid-template-columns: 5fr 6fr; align-items: start; margin-left: 0; } .club__cta { padding-top: 6px; } }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; border-radius: 999px; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.015em; text-decoration: none; transition: transform .5s var(--expo), background .3s var(--quart), color .3s var(--quart); }
.btn span { transition: transform .5s var(--expo); display: inline-block; }
.btn:hover span { transform: translateX(4px); }
.btn--main { background: var(--ink); color: var(--cream); }
.btn--main:hover { background: var(--brown); }
.btn--main:hover span { transform: translate(3px, -3px); }
.btn--line { border: 2px solid var(--mint-ink); color: var(--mint-ink); padding: 15px 24px; }
.btn--line:hover { background: var(--mint-ink); color: var(--mint); }

/* ---------- faq ---------- */
.faq { padding: clamp(64px, 9vw, 130px) 0; }
.faq__grid { display: grid; gap: 40px; }
.faq__h { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -0.045em; font-weight: 800; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: 5fr 6fr; gap: 60px; } }
details { border-top: 1.5px solid var(--ink); }
details:last-child { border-bottom: 1.5px solid var(--ink); }
summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 2px; background: var(--ink); transform: translateY(-50%); }
summary::before { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 2px; background: var(--ink); transform: translateY(-50%) rotate(90deg); transition: transform .5s var(--expo); }
details[open] summary::before { transform: translateY(-50%) rotate(0); }
details p { padding: 0 48px 26px 0; color: var(--muted); max-width: 36em; }
summary:hover { color: var(--brown); }


/* ---------- finale: "Dowiezione." ---------- */
.end { position: relative; overflow: clip; background: radial-gradient(120% 70% at 85% 0%, #5A3418 0%, rgba(90,52,24,0) 60%), var(--ink); color: var(--cream); padding: clamp(64px, 9vw, 130px) 0 clamp(56px, 7vw, 100px); }
.end__time { position: absolute; right: -0.04em; top: .1em; font-size: clamp(5rem, 17vw, 15rem); line-height: .8; font-weight: 800; letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1.5px rgba(240,140,74,.34); user-select: none; pointer-events: none; }
.end__h { position: relative; font-size: clamp(3rem, 9vw, 8rem); line-height: .9; font-weight: 800; letter-spacing: -0.055em; }
.end__h .hi { color: var(--mint); }
.end__row { position: relative; margin-top: clamp(30px, 4vw, 60px); display: grid; gap: 28px; align-items: center; }
.end__p { font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.45; max-width: 26em; color: #E6DDD3; }
@media (min-width: 900px) { .end__row { grid-template-columns: 6fr 5fr; } }
.foot { border-top: 1px solid rgba(251,245,239,.12); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--cream); padding-top: clamp(48px, 6vw, 90px); overflow: hidden; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .9375rem; max-width: 46rem; }
.foot__links a { text-underline-offset: 4px; color: #E6DDD3; }
.foot__links a:hover { color: var(--mint); }
.foot__co { flex-basis: 100%; display: grid; gap: 6px; font-size: .8125rem; line-height: 1.5; color: #B6ACA0; max-width: 62rem; }
.foot__word { font-weight: 800; font-size: 19vw; line-height: .74; letter-spacing: -0.07em; color: var(--cream); white-space: nowrap; margin: clamp(30px, 5vw, 70px) 0 0 -1vw; display: flex; align-items: baseline; transform: translateY(.1em); height: 13.5vw; overflow: hidden; }
.foot__word svg { width: .74em; height: .74em; flex: none; margin: 0 .01em; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .h1 .who, .h1 .does { animation: rise 1.25s var(--expo) backwards; }
  .h1__line--a .who { animation-delay: .15s; }
  .h1__line--a .does { animation-delay: .28s; }
  .h1__line--b .who { animation-delay: .42s; }
  .h1__line--b .does { animation-delay: .56s; }
  @keyframes rise { from { transform: translate3d(0, 112%, 0); } }
  .h1__line { transition: transform 1.25s var(--inout); }
  .hero__copy > :not(.h1) { animation: fade 1.1s var(--quart) backwards; }
  .kicker { animation-delay: .05s; }
  .lede { animation-delay: .8s; }
  .get { animation-delay: .95s; }
  .honest { animation-delay: 1.1s; }
  @keyframes fade { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
  .phone--hero { animation: phone 1.6s var(--expo) .7s backwards; }
  .rings { animation: grow 1.8s var(--expo) .5s backwards; }
  @keyframes grow { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
  @keyframes pop { from { opacity: 0; transform: translate3d(-24px, 16px, 0) scale(.92); } }
  @keyframes phone { from { opacity: 0; transform: translate3d(0, 80px, 0) rotate(7deg); } }
}

/* =====================================================================
   Motion layer for the rest of the page. Everything here is progressive:
   it only applies with .js and without prefers-reduced-motion; otherwise
   the page is complete and still.
   ===================================================================== */

/* sticky nav: transparent over the hero, frosted after scrolling, dark over dark sections */
.nav { position: fixed; transition: background-color .4s var(--quart), box-shadow .4s var(--quart), color .4s var(--quart), transform .5s var(--expo); }
.nav.is-scrolled { background: rgba(251,245,239,.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(29,27,24,.08); }
.nav.is-scrolled .nav__in { padding-block: 12px; }
.nav__in { transition: padding .4s var(--quart); }
.nav.is-dark { color: var(--cream); }
.nav.is-dark.is-scrolled { background: rgba(15,61,48,.78); box-shadow: 0 1px 0 rgba(168,235,214,.12); }
.nav.is-dark .nav__org { border-color: var(--cream); }
.nav.is-dark .nav__org:hover { background: var(--cream); color: var(--ink); }
.nav.is-dark :focus-visible { outline-color: var(--mint); }
.nav__get { display: none; }
.js .nav__get { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px !important; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 800; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .4s var(--quart), transform .5s var(--expo), background .3s var(--quart); }
.js .nav__get::after { display: none; }
.js .nav__get::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(111,214,133,.6); }
.js .nav.has-get .nav__get { opacity: 1; transform: none; pointer-events: auto; }
.nav.is-dark .nav__get { background: var(--mint); color: var(--mint-ink); }
@media (max-width: 820px) { .js .nav.has-get .nav__org { display: none; } }

/* generic reveal */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .9s var(--quart), transform 1.1s var(--expo); transition-delay: var(--rd, 0s); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .trust__list [data-reveal] { transform: translate3d(-24px, 0, 0); }
  .js .trust__list [data-reveal].in { transform: none; }
  .js .eyebrow[data-reveal]::after { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--expo) .2s; }
  .js .eyebrow[data-reveal].in::after { transform: scaleX(1); }
  /* step numbers fill with mint from the bottom */
  .js .step__n[data-reveal] { opacity: 1; transform: none; color: transparent; -webkit-text-stroke: 2px var(--mint); background: linear-gradient(0deg, var(--mint) 50%, transparent 50%) 0 0 / 100% 200% no-repeat; -webkit-background-clip: text; background-clip: text; background-position: 0 0; transition: background-position 1.4s var(--expo) .15s; }
  .js .step__n[data-reveal].in { background-position: 0 100%; }
  /* phones in the steps turn towards you as they come in (home.js sets --t from 1 to 0) */
  .js [data-turn] { --t: 1; transform: perspective(1200px) rotateY(calc(var(--t) * -32deg)) rotateX(calc(var(--t) * 10deg)) translate3d(calc(var(--t) * 60px), calc(var(--t) * 40px), 0) rotate(var(--rot, -2deg)); opacity: calc(1 - var(--t) * .6); }
  .js .step--2 [data-turn], .js .step--4 [data-turn] { --rot: 2deg; transform: perspective(1200px) rotateY(calc(var(--t) * 32deg)) rotateX(calc(var(--t) * 10deg)) translate3d(calc(var(--t) * -60px), calc(var(--t) * 40px), 0) rotate(var(--rot)); }
}

/* hero: the phone follows the pointer in 3D; on scroll it lifts away */
.hero__art { transform-style: preserve-3d; }
.js .hero__art { transform: perspective(1200px) translate3d(0, calc(var(--sy, 0) * -90px), 0) rotateX(calc(var(--ty, 0) * -8deg + var(--sy, 0) * 14deg)) rotateY(calc(var(--tx, 0) * 10deg)); transition: transform .35s var(--quart); }
.js .hero__art .rings { transform: translate(-50%, -50%) rotate(calc(var(--sy, 0) * 70deg)) scale(calc(1 + var(--sy, 0) * .25)); }
.js .hero__art .pings { transform: translate3d(calc(var(--tx, 0) * -18px), calc(var(--ty, 0) * -14px), 60px); }

/* trust: orbit diagram */
.trust__grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .trust__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.trust__grid .trust__list li { margin-left: 0; max-width: none; }
.orbit { position: relative; margin: 0; width: min(100%, 480px); aspect-ratio: 1; justify-self: center; }
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit__c { fill: none; stroke-width: 2; }
.orbit__c--1 { stroke: rgba(168,235,214,.35); fill: rgba(168,235,214,.05); stroke-dasharray: 6 10; }
.orbit__c--2 { stroke: var(--mint); fill: rgba(168,235,214,.08); }
.orbit__c--3 { stroke: var(--orange); fill: rgba(240,140,74,.16); stroke-width: 3; }
.orbit__car { transform: rotate(var(--oa, 35deg)); }
.orbit__l { position: absolute; margin: 0; font-size: .8125rem; line-height: 1.35; color: #D9E8E0; max-width: 13em; }
.orbit__l b { display: block; font-size: .9375rem; color: var(--white); font-weight: 800; letter-spacing: -0.02em; }
.orbit__l--1 { left: 0; top: 0; }
.orbit__l--2 { right: 0; bottom: 0; text-align: right; }
.orbit__l--3 { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.orbit__l--3 b { color: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .js .orbit__c { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 2.2s var(--expo); }
  .js .orbit__c--1 { stroke-dasharray: 6 10; stroke-dashoffset: 0; opacity: 0; transition: opacity 1.4s var(--quart); }
  .js .orbit__c--2 { transition-delay: .25s; }
  .js .orbit__c--3 { transition-delay: .5s; }
  .js .orbit.in .orbit__c { stroke-dashoffset: 0; }
  .js .orbit.in .orbit__c--1 { opacity: 1; }
  .js .orbit__l { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .8s var(--quart) .9s, transform 1s var(--expo) .9s; }
  .js .orbit__l--3 { transform: translate(-50%, calc(-50% + 12px)); }
  .js .orbit.in .orbit__l { opacity: 1; transform: none; }
  .js .orbit.in .orbit__l--3 { transform: translate(-50%, -50%); }
}

/* gallery: coverflow (home.js sets --d per card: -1 … 1, distance from the centre) */
.gal__track { perspective: 1600px; }
.js .gal__track { cursor: grab; position: relative; padding-inline: calc(50% - 120px); scroll-padding-inline: 0; }
.js .gal__card { scroll-snap-align: center; }
@media (max-width: 520px) { .js .gal__track { padding-inline: calc(50% - 100px); } }
.js .gal__track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.js .gal__card { transform: rotateY(calc(var(--d, 0) * -28deg)) translateZ(calc(var(--ad, 0) * -120px)) scale(calc(1 - var(--ad, 0) * .08)); will-change: transform; }
.gal__card .phone { transition: box-shadow .5s var(--quart); }
.js .gal__card.is-mid .phone { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 40px 60px -26px rgba(15,61,48,.55); }
.gal__card img { -webkit-user-drag: none; user-select: none; }

/* club: the ready message */
.msg { margin: 0; max-width: 30rem; }
.msg__label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-ink); opacity: .75; }
.msg__bubble { position: relative; margin-top: 10px; padding: 18px 20px; border-radius: 22px 22px 22px 6px; background: var(--white); color: var(--ink); font-size: 1rem; line-height: 1.55; box-shadow: 0 30px 60px -34px rgba(15,61,48,.55); }
.msg__bubble.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--brown); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.club__grid { align-items: start; }
@media (min-width: 900px) { .club__grid { grid-template-columns: 5fr 6fr; } .club__grid > .club__p { grid-column: 1; } .club__grid > .msg { grid-column: 2; grid-row: 1 / span 2; justify-self: end; } .club__grid > .club__cta { grid-column: 1; } }

/* FAQ: smooth open where the browser can animate to auto height */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .5s var(--expo), content-visibility .5s allow-discrete; }
  details[open]::details-content { height: auto; }
}
details { transition: background .3s var(--quart); }
details:hover { background: linear-gradient(90deg, rgba(168,235,214,.25), transparent 70%); }

/* finale: a road and the Melon car parking on it */
.end__road { position: relative; margin-top: clamp(40px, 6vw, 80px); height: 120px; border-bottom: 6px dashed rgba(251,245,239,.18); }
.end__park { position: absolute; bottom: -2px; left: 62%; width: clamp(160px, 18vw, 240px); transform: translate3d(calc(var(--park, 0) * -110vw), 0, 0); }
.mcar { display: block; width: 100%; height: auto; overflow: visible; }
.mcar__wh { transform: rotate(calc(var(--park, 0) * -1440deg)); }
@media (max-width: 899px) { .end__park { left: 40%; } }


@media (prefers-reduced-motion: reduce) {
  .js .hero__art, .js .hero__art .pings { transform: none; }
  .js .hero__art .rings { transform: translate(-50%, -50%); }
  .js .gal__card { transform: none; }
  .end__park { transform: none; }
  .mcar__wh { transform: none; }
}
.nav__org, .nav__get { white-space: nowrap; }
@media (max-width: 520px) {
  .nav__org { font-size: .75rem; padding: 8px 11px !important; }
  .gal__head { flex-direction: column; align-items: flex-start; }
  .gal__nav { align-self: flex-end; }
}

/* living backgrounds (fx.js): a low-res WebGL frame per section, stretched and softly faded in */
[data-fx] { position: relative; isolation: isolate; }
[data-fx] > .fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--quart); }
[data-fx] > .fx.on { opacity: 1; }
[data-fx] > :not(.fx) { position: relative; z-index: 1; }
/* the big outlined time belongs to the section, not to its centred content box */
.end[data-fx] > .wrap { position: static; }
.end[data-fx] > .wrap > :not(.end__time) { position: relative; z-index: 1; }
.end__time { z-index: 1; }

/* word-by-word heading rise (home.js wraps the words; without JS the heading is plain text) */
.split .sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .02em .14em; margin: -.04em -.02em -.14em; }
.split .sw__i { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.1s var(--expo); transition-delay: calc(var(--i) * 55ms); }
.split.in .sw__i { transform: none; }

/* page progress line */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 40; background: linear-gradient(90deg, var(--green), var(--orange)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.marq__track { will-change: transform; }

/* hero: a lock-screen stack of notifications. Without JS or with reduced motion only the last one shows;
   home.js steps through them once (done in about 4.5 s). */
.ping { transition: transform .8s var(--expo), opacity .5s var(--quart); transform-origin: 50% 100%; }
.ping--1, .ping--2 { opacity: 0; transform: translate3d(0, 20px, 0) scale(.9); }
.pings[data-step="1"] .ping--1, .pings[data-step="2"] .ping--2, .pings[data-step="3"] .ping--3 { opacity: 1; transform: none; }
.pings[data-step="2"] .ping--1, .pings[data-step="3"] .ping--2 { opacity: 1; transform: translate3d(0, -11px, -20px) scale(.93); }
.pings[data-step="3"] .ping--1 { opacity: 1; transform: translate3d(0, -20px, -40px) scale(.86); }
/* cards behind the newest one only peek out above it, without their text (like a lock screen) */
.ping > * { transition: opacity .35s var(--quart); }
.pings[data-step="2"] .ping--1 > *, .pings[data-step="3"] .ping--1 > *, .pings[data-step="3"] .ping--2 > * { opacity: 0; }
.pings[data-step="2"] .ping--1, .pings[data-step="3"] .ping--2 { background: #F4EEE7; }
.pings[data-step="3"] .ping--1 { background: #ECE4DA; }
.ping--1 { z-index: 1; } .ping--2 { z-index: 2; } .ping--3 { z-index: 3; }
.pings[data-step="1"] .ping--3, .pings[data-step="2"] .ping--3, .pings[data-step="0"] .ping--3 { opacity: 0; transform: translate3d(0, 20px, 0) scale(.9); }
.ping .ping__dot { transition: transform .6s var(--spring, cubic-bezier(.34,1.56,.64,1)) .25s; }
.pings[data-step="1"] .ping--1 .ping__dot, .pings[data-step="2"] .ping--2 .ping__dot, .pings[data-step="3"] .ping--3 .ping__dot { animation: dotpop .7s cubic-bezier(.34,1.56,.64,1) .15s backwards; }
@keyframes dotpop { from { transform: scale(0); } }

/* how it works: the Melon car drives a route that weaves through the steps (desktop) */
.howroute { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .howroute { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .howroute__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .howroute__bed { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; opacity: .55; }
  .howroute__line { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: var(--off, 0); }
  .howcar { position: absolute; left: 0; top: 0; width: 52px; height: 30px; margin: -15px 0 0 -26px; filter: drop-shadow(0 8px 10px rgba(29,27,24,.25)); will-change: transform; }
  .how .wrap { position: relative; }
  .howroute__fin { fill: var(--cream); stroke: var(--line); stroke-width: 4; transition: fill .4s var(--quart), stroke .4s var(--quart); }
  .howroute__fin.on { fill: var(--green); stroke: var(--white); }
}

/* colour sections arrive as a rounded card and open up to full width (home.js sets --cp 1 → 0) */
@media (prefers-reduced-motion: no-preference) {
  .js .xpand { clip-path: inset(0 calc(var(--cp, 0) * 4vw) round calc(var(--cp, 0) * 48px)); }
}

/* the car parks: a badge pops above it with a ripple */
.park__badge { position: absolute; left: 50%; bottom: 100%; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: .875rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 18px 30px -16px rgba(0,0,0,.6); transform: translate(-50%, 0); }
.park__badge .ping__dot { width: 24px; height: 24px; }
.park__badge .ping__dot::after { left: 8px; top: 5px; width: 6px; height: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .js .park__badge { opacity: 0; transform: translate(-50%, 12px) scale(.6); transition: opacity .3s var(--quart), transform .6s cubic-bezier(.34,1.56,.64,1); }
  .js .end.parked .park__badge { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: .15s; }
  .park__badge::before, .park__badge::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--mint); opacity: 0; pointer-events: none; }
  .js .end.parked .park__badge::before { animation: ripple 1.2s var(--expo) .3s; }
  .js .end.parked .park__badge::after { animation: ripple 1.2s var(--expo) .55s; }
  @keyframes ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6, 2.2); } }
  .js .end.parked .mcar rect[fill="#FFF6C8"] { animation: flash .9s steps(2) 2; }
  @keyframes flash { 50% { fill: #FFFFFF; filter: drop-shadow(0 0 6px #FFF6C8); } }
}

/* footer logo: the check draws itself once, upright */
@media (prefers-reduced-motion: no-preference) {
  .js .foot__word svg path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 1.2s var(--expo) .3s; }
  .js .foot.in .foot__word svg path { stroke-dashoffset: 0; }
}

/* ---------- avatars from the app's own catalogue (assets/img/avatars) ---------- */
.ping__av { position: relative; flex: none; width: 34px; height: 34px; }
.ping__img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ping__ok, .ping__live { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--white); background: var(--green); }
.ping__ok::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7px; border: solid var(--mint-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ping__live { background: #2FB36B; }
.ping__live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #2FB36B; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pings[data-step="2"] .ping--2 .ping__live::after { animation: livepulse 1.4s var(--expo) 2; }
  @keyframes livepulse { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
}
.ping__av--sm { width: 28px; height: 28px; }
.park__badge .ping__ok { width: 14px; height: 14px; }
.park__badge .ping__ok::after { left: 3px; top: 1px; }

/* scene pins: the child's avatar */
img.pin__av { display: block; width: 48px; height: 48px; border-radius: 50%; background: none; }
.opin img.pin__av { width: 28px; height: 28px; }

/* step 01: the team's parents */
.crew { display: flex; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.crew__av { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--cream); margin-left: -12px; box-shadow: 0 6px 14px -8px rgba(29,27,24,.45); }
.crew__av:first-child { margin-left: 0; }
.crew__t { margin-left: 14px; font-size: .875rem; font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .step__txt[data-reveal] .crew__av { opacity: 0; transform: translate3d(-10px, 0, 0) scale(.6); transition: opacity .5s var(--quart), transform .7s cubic-bezier(.34,1.56,.64,1); }
  .js .step__txt[data-reveal].in .crew__av { opacity: 1; transform: none; }
  .crew__av:nth-child(2) { transition-delay: .08s; } .crew__av:nth-child(3) { transition-delay: .16s; } .crew__av:nth-child(4) { transition-delay: .24s; } .crew__av:nth-child(5) { transition-delay: .32s; } .crew__av:nth-child(6) { transition-delay: .4s; }
}

/* orbit: who is on which ring (outer: the group, middle: parents of the kids in the car, centre: your child) */
.orbit__avs { position: absolute; inset: 0; pointer-events: none; }
/* avatars sit on the rings (positions in % of the square figure, from the SVG radii 236 and 156 / 520) */
.orbit__av { position: absolute; width: 0; height: 0; }
.orbit__img { position: absolute; left: -22px; top: -22px; width: 44px; max-width: none; height: 44px; border-radius: 50%; border: 3px solid var(--mint-ink); box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.orbit__av--m .orbit__img { border-color: var(--mint); }
.orbit__l--3 { display: grid; justify-items: center; gap: 4px; max-width: none; white-space: nowrap; }
.orbit__kid { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--orange); }
.orbit__l--3 b { font-size: .8125rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .orbit__img { opacity: 0; transform: scale(.4); transition: opacity .5s var(--quart), transform .8s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(.6s + var(--i) * 70ms); }
  .js .orbit.in .orbit__img { opacity: 1; transform: none; }
}

/* message to the coach: sent by a parent */
.msg__row { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }
.msg__row .msg__bubble { margin-top: 0; flex: 1; }
.msg__av { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 10px 20px -12px rgba(15,61,48,.6); }
@media (max-width: 520px) { .crew__t { flex-basis: 100%; margin: 10px 0 0; } }

/* stop pins: the child's face, with a check once they are in the car */
.pin__face { position: relative; flex: none; display: block; line-height: 0; }
.pin__ok { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--white); background: var(--green); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.pin__ok::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid var(--mint-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.opin.done .pin__ok { transform: scale(1); }
.world .pin__ok { width: 24px; height: 24px; border-width: 3px; }
.world .pin__ok::after { left: 6px; top: 2px; width: 5px; height: 10px; border-width: 0 3px 3px 0; }
.drive:not(.is-live) .pin__ok { transform: scale(1); }