/* Livcoin welcome page. Apple Liquid Glass language, matching the app's V55+ screens:
   soft pastel backdrop, frosted glass surfaces, SF Pro on Apple devices, teal accent, gold only for LP. */

/* Inter (SIL Open Font License, self-hosted latin subset, weights 400-700) stands in for SF Pro on
   Windows and Android. Apple devices resolve the system font first and never download it. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --ink: #0b1f24;
  --ink-2: #0b1f24a8;
  --teal: #0c6b65;
  --teal-hover: #095a55;
  --gold-ink: #7a5108;
  --bg: #edf2f1;
  --glass: radial-gradient(120% 70% at 0% 0%, #ffffffa6, #ffffff00 55%), linear-gradient(150deg, #ffffff8c, #ffffff47);
  --blur: blur(26px) saturate(185%);
  --edge: inset 0 1px .5px #ffffffeb, inset 0 -1px 1px #ffffff59, inset 0 0 0 .5px #ffffffa6;
  --lift: 0 1px 1px #1030380a, 0 14px 34px -16px #1030385c;
  --lift-hover: 0 2px 2px #1030380d, 0 26px 50px -22px #10303875;
  --lift-big: 0 2px 3px #1030380f, 0 40px 80px -36px #1030388c;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 32px);
  --maxw: 1120px;
  --bar: 56px;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* Scrolling settles on one beat at a time (native scroll snap): a swipe, wheel turn or arrow key carries
   the page on to the next story step or section instead of leaving it halfway. Story steps settle in the
   middle of the view, where welcome.js picks the active step; a block taller than the view (the pinned
   reward cards, Team) scrolls freely inside, then hands over to the next snap point. The page top is its
   own snap point (.snap-top): the first intro, with the chapter banner above it, is taller than the view. */
html { scroll-snap-type: y mandatory; }
.snap-top { display: block; height: 0; scroll-snap-align: start; }
.story-step, .story-biz .story-hero { scroll-snap-align: center; }
/* Below the two-column layout a step's card sits at the bottom of its block, under the pinned phone: the
   step settles with its bottom on the bottom of the view. */
@media (max-width: 999px) { .story-step { scroll-snap-align: end; } }
.why-pin, .section { scroll-snap-align: start; }
/* Sections (and the nav links that jump to them) land just under the floating bar. */
.section { scroll-margin-top: calc(var(--bar) + 28px); }
.foot { scroll-snap-align: end; }
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* The backdrop the glass sits on. Fixed, so the frosted surfaces drift over it while scrolling.
   It reaches below the viewport so it can drift up with the scroll without showing an edge. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 -14vh;
  z-index: -1;
  background:
    radial-gradient(46% 34% at 10% 8%, #94d8cf, #94d8cf00 70%),
    radial-gradient(44% 34% at 94% 26%, #c4d1f4, #c4d1f400 72%),
    radial-gradient(52% 34% at 78% 86%, #f0d6a8, #f0d6a800 70%),
    radial-gradient(44% 32% at 4% 70%, #c6e6d9, #c6e6d900 70%),
    var(--bg);
}
/* A warmer light that fades in as the page goes on (scroll-driven, see Motion). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 36% at 88% 14%, #f6cfb4, #f6cfb400 70%),
    radial-gradient(46% 34% at 8% 80%, #f3c9dc, #f3c9dc00 72%),
    radial-gradient(40% 30% at 60% 58%, #fbe3b8, #fbe3b800 70%);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 12px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Glass material */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--edge), var(--lift);
}

/* Type */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 700; }
h1, .hero-title { font-size: clamp(2.75rem, 6.6vw, 4.875rem); line-height: 1.02; letter-spacing: -.042em; }
:is(h1, .hero-title) .line { display: inline-block; }
@media (min-width: 400px) { .nowrap { white-space: nowrap; } }
h2 { font-size: clamp(2.125rem, 4.8vw, 3.625rem); line-height: 1.05; letter-spacing: -.034em; max-width: 18ch; text-wrap: balance; }
h3 { font-size: 1.3125rem; line-height: 1.22; letter-spacing: -.016em; font-weight: 600; }
p { text-wrap: pretty; }
.eyebrow { margin-bottom: 14px; color: var(--teal); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.008em; }
/* The chapter labels (01 User loop, 02 Business loop, 03 Team): a quiet glass pill, a small coloured number and
   the loop's name in its colour, with the sub-line in grey. They mark the chapter without shouting over it. */
.loop-eyebrow { --loop: #0c6b65; position: relative; display: inline-flex; align-items: center; gap: 13px; width: fit-content; justify-self: start; margin-bottom: 24px; padding: 7px 20px 7px 7px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); }
.loop-biz { --loop: #4b3fd6; }
.loop-team { --loop: #a86c0a; }
/* A static chapter banner (Team): centred in flow, no stickiness. */
.chapter-static { position: relative !important; top: auto !important; display: inline-flex !important; margin: 0 auto var(--team-gap, 44px) !important; opacity: 1 !important; animation: none !important; }
/* The Team section's top padding equals the banner's bottom gap, so the banner sits halfway between the segment cards and the title. */
.section.team { padding-top: calc(var(--team-gap, 44px) + var(--seg-tail, 0px)); }
.team .wrap { display: grid; justify-items: center; }
.loop-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--loop); color: #fff; font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.loop-name { display: flex; align-items: baseline; gap: 12px; font-size: 1.0625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; color: var(--loop); }
.loop-name small { font-size: 1rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .story[data-active="0"] .chapter-badge { animation: chip-in .8s var(--ease-out) both; }
}
@keyframes chip-in { from { opacity: 0; translate: 0 -18px; scale: .9; } }
.lede, .section-lede { color: var(--ink-2); font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.45; letter-spacing: -.012em; }
.lede { max-width: 26ch; margin-top: 22px; }
.section-lede { max-width: 40ch; margin-top: 18px; }
.note { margin-top: 18px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; letter-spacing: -.004em; }
.wordmark { font: 700 1.5rem/1 var(--serif); letter-spacing: -.045em; color: var(--ink); text-decoration: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  font: 600 1.0625rem/1 var(--font); letter-spacing: -.012em; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease-out), background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 1px 1px #0b1f241a, 0 10px 22px -14px #0b1f2499; }
.btn-primary:hover { background: var(--teal-hover); }
.btn-small { min-height: 38px; padding: 0 17px; font-size: .9375rem; }
.btn-large { min-height: 56px; padding: 0 32px; font-size: 1.125rem; }
.more { color: var(--teal); font-weight: 600; font-size: 1.0625rem; text-decoration: none; letter-spacing: -.012em; }
.more::after { content: "\203A"; display: inline-block; margin-left: .3em; font-size: 1.25em; line-height: 0; transform: translateY(.04em); transition: transform .3s var(--ease-out); }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more:hover::after { transform: translate(.18em, .04em); }

/* Floating glass bar */
.bar {
  position: fixed; z-index: 50; left: 0; right: 0;
  top: max(10px, env(safe-area-inset-top));
  padding: 0 var(--gutter);
  pointer-events: none;
}
/* Scroll edge, as in iOS: text that slides up under the bar blurs and fades out, so it never reads through
   the glass or collides with it. Off at the top of the page, where nothing sits under the bar. */
.bar::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0;
  top: calc(-1 * max(10px, env(safe-area-inset-top)));
  height: calc(100% + max(10px, env(safe-area-inset-top)) + 24px);
  background: linear-gradient(#edf2f1cc, #edf2f100);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 55%, #0000); mask-image: linear-gradient(#000 55%, #0000);
  pointer-events: none; transition: opacity .3s var(--ease-out);
}
html:not(.is-scrolled) .bar::before { opacity: 0; }
.bar-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  max-width: var(--maxw); height: var(--bar); margin: 0 auto;
  padding: 0 9px 0 22px; border-radius: 999px;
}
.bar .wordmark { margin-right: auto; font-size: 1.375rem; }
.bar-links { display: none; gap: 2px; margin-right: 10px; }
.bar-links a {
  display: block; padding: 8px 14px; border-radius: 999px;
  color: var(--ink-2); font-size: .9375rem; font-weight: 500; letter-spacing: -.008em; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.bar-links a:hover { color: var(--ink); background: #ffffff8c; }
.bar-links a.is-current { color: var(--teal); background: #0c6b6514; font-weight: 600; }

/* Phone frame: a generic device drawn in CSS around real app screenshots. */
.phone {
  --w: 280px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * .034);
  border-radius: calc(var(--w) * .158);
  background: linear-gradient(150deg, #3a4245, #101517 34%, #1a2023 70%, #3a4245);
  box-shadow: inset 0 0 0 1px #ffffff2e, inset 0 0 0 calc(var(--w) * .008) #0b0f10, var(--lift-big);
}
.phone::after {
  content: ""; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: calc(var(--w) * .058); width: calc(var(--w) * .29); height: calc(var(--w) * .085);
  border-radius: 999px; background: #050708;
}
/* Screens are stacked; the first sizes the frame. Overlays are placed in % of the 780x1742 captures. */
.screens { --sw: calc(var(--w) * .932); position: relative; overflow: hidden; border-radius: calc(var(--w) * .125); background: #e9eeed; }
.screens > [data-screen] { width: 100%; height: auto; transition: opacity .7s var(--ease-out), scale .9s var(--ease-out); }
.screens > [data-screen]:not(:first-child) { position: absolute; inset: 0; }
.screens > [data-screen]:not(.is-on) { opacity: 0; scale: 1.06; }
/* A screen that plays as video (the profile scroll) sits over its still and shows on its step only. */
.screen-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out); }
.story.is-live[data-active="7"] .screen-video[data-video="profile"], .story.is-live[data-active="0"] .screen-video[data-video="feed"], .story.is-live[data-active="5"] .screen-video[data-video="redeem"], .story.is-live[data-active="6"] .screen-video[data-video="sunny"] { opacity: 1; }

/* The balance pill, redrawn over the V59 capture (px measured on 780x1742) so it can count up.
   Shown only on the Earn step; elsewhere the capture's own pill shows the same number. */
.lp-pill {
  position: absolute; left: 72.09%; top: 5.97%; width: 23.29%; height: 4.48%; opacity: 0;
  display: flex; align-items: center; gap: calc(var(--sw) * .0295); padding-left: calc(var(--sw) * .0269);
  border-radius: 999px; background: linear-gradient(100deg, #dde4e9, #d4dde3 62%, #ccd6dc); box-shadow: inset 0 1px 0 #ffffffb3;
  font: 600 calc(var(--sw) * .0385)/1 var(--font); letter-spacing: -.01em; color: #0c2025;
  font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .2s;
}
.lp-pill img { width: calc(var(--sw) * .0603); height: auto; }
.story.is-live[data-active="3"] .lp-pill { opacity: 1; }

/* Pick: the Breathe card's Start button is tapped. */
.tap { position: absolute; left: 7.69%; top: 65.14%; width: 37.18%; height: 5.05%; border-radius: 999px; opacity: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #00c7be; transition: opacity .4s; }
.tap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px #ffffffcc; opacity: 0; }
.story[data-active="1"] .tap:not(.tap-walk) { opacity: 1; }

/* Earn: a coin flies from the Walk card's Done button into the balance, which counts up; "+8 LP" rises. */
.fly-coin { position: absolute; left: 70.3%; top: 44.9%; width: 11%; height: auto; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 10px #a86a0066); }
/* The earn moment (step 3): a big "+8 LP" burst in the middle of the screen, a halo behind it, six coins
   scattering out and being pulled into the balance, which then bumps. */
.plus { position: absolute; left: 50%; top: 38%; translate: -50% -50%; opacity: 0; padding: .35em .7em; border-radius: 999px; background: linear-gradient(135deg, #fff6d6, #ffd56a); font: 900 calc(var(--sw) * .13)/1 var(--font); letter-spacing: -.03em; color: #7a4a00; text-shadow: 0 1px 0 #fff; box-shadow: 0 0 0 4px #ffffffb3, 0 24px 48px -16px #a86a00a6; white-space: nowrap; z-index: 4; }
.earn-halo { position: absolute; left: 50%; top: 38%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #ffd56a99, #ffd56a00 65%); opacity: 0; pointer-events: none; z-index: 3; }

/* Do: breathing rings open around the phone while the session runs. */
.aura { position: absolute; z-index: 0; left: 50%; top: calc(50% + var(--cy, 0px)); width: calc(var(--w) * var(--k)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid #00c7be; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-out); }
.aura.a1 { --k: 1.45; background: radial-gradient(circle, #00c7be1f, #00c7be00 70%); border-color: #00c7be59; }
.aura.a2 { --k: 1.95; border-color: #00c7be38; }
.aura.a3 { --k: 2.45; border-color: #00c7be21; }
/* The breathing rings (aura) are retired: the loop lines already frame the phone. */
.aura { display: none !important; }

/* Do: the breathing game on a small screen in front of the phone, which steps back while it plays. */
.mini-screen {
  position: absolute; z-index: 4; left: 50%; top: calc(50% + var(--cy, 0px)); translate: -50% -58%;
  width: calc(var(--w) * 1.12); aspect-ratio: 3 / 2; padding: calc(var(--w) * .026);
  border-radius: calc(var(--w) * .1);
  background: linear-gradient(150deg, #3a4245, #101517 34%, #1a2023 70%, #3a4245);
  box-shadow: inset 0 0 0 1px #ffffff2e, inset 0 0 0 calc(var(--w) * .006) #0b0f10, var(--lift-big);
  opacity: 0; scale: .82; pointer-events: none;
  transition: opacity .45s var(--ease-out), scale .6s cubic-bezier(.34, 1.56, .64, 1);
}
.mini-screen video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w) * .075); background: #8fc3ea; }
.story:not(.is-live) .mini-screen { display: none; }
.story.is-live[data-active="2"] .mini-screen { opacity: 1; scale: 1; }
.phone-story { transition: opacity .5s var(--ease-out), scale .6s var(--ease-out); }
.story:not(.story-biz).is-live[data-active="2"] .phone-story { opacity: .45; scale: .95; }

/* Hero, the win: Walk's Done is tapped and six coins arc from it into the balance, all collected; then the
   screen settles on the clean board (screen-settled). Coins start at the button's centre (571, 805 of 780x1742)
   and end on the balance coin (606, 142): +0.045 / -0.85 of the screen width. */
.collect-coin { position: absolute; left: 46%; top: 36%; width: 9%; height: auto; opacity: 0; pointer-events: none; z-index: 4; filter: drop-shadow(0 4px 8px #a86a0059); }
.tap-walk { left: 55.13%; top: 44.01%; width: 37.18%; height: 5.05%; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #30d158; }
.story:not(.is-live) :is(.collect-coin, .tap-walk) { display: none; }

/* Sunny: the app's round Liquid Glass button with its face, appears at the phone's edge. */
.sunny-button {
  --s: calc(var(--w) * .34);
  position: absolute; z-index: 4; right: calc(var(--w) * -.13); bottom: calc(var(--w) * .2);
  width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; scale: .6;
  background: radial-gradient(90% 90% at 25% 15%, #ffffffd9, #ffffff00 60%), linear-gradient(150deg, #ffffffc7, #ffffff8f);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--edge), 0 1px 1px #1030380d, 0 24px 44px -20px #10303880;
  transition: opacity .45s var(--ease-out), scale .6s cubic-bezier(.34, 1.56, .64, 1);
}
.story[data-active="6"] .sunny-button { opacity: 1; scale: 1; }
.sunny-button::before {
  content: ""; position: absolute; inset: 13.3%; border-radius: 50%;
  padding: calc(var(--s) * .033);
  background: conic-gradient(from 210deg, #5fd3c4, #a7b6f2, #f2b8d0, #f6c453, #5fd3c4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75;
}
.sunny-button > span {
  position: absolute; inset: 21.7%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffbea 0%, #ffe39a 22%, #f6bb45 52%, #e18c22 80%, #c8701b 100%);
  box-shadow: 0 0 calc(var(--s) * .23) calc(var(--s) * .017) #f6bb4573, inset 0 calc(var(--s) * -.033) calc(var(--s) * .067) #b05c1859;
}
/* Sunny's face, proportioned like the app's V57 button: two eyes that blink, a small smile. */
.sunny-button > span::before {
  content: ""; position: absolute; left: 30%; top: 36%; width: 10.3%; height: 14.7%;
  border-radius: 50%; background: #5b3200; box-shadow: calc(var(--s) * .15) 0 0 #5b3200;
}
.sunny-button > span::after {
  content: ""; position: absolute; left: 33%; top: 55%; width: 34%; height: 16%;
  border: calc(var(--s) * .033) solid #5b3200; border-top: 0; border-radius: 0 0 999px 999px;
}

/* Glass chips that float beside the phone; --reach is how far from the phone's centre they sit. */
.chip {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 999px;
  font-size: .875rem; line-height: 1.2; letter-spacing: -.008em;
  transition: opacity .4s var(--ease-out), scale .5s var(--ease-out);
}
.chip img, .chip-icon { width: 34px; height: 34px; flex: none; }
.chip-icon { padding: 5px; border-radius: 50%; background: #0c6b6514; fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chip b { display: block; font-weight: 700; color: var(--ink); }
.chip small { display: block; color: var(--ink-2); font-size: .8125rem; }
.chip-doing { top: 74%; left: max(var(--chip-min, 0px), calc(50% - var(--reach, 250px))); }
.chip-doing b { color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.chip-spend { top: 22%; right: max(var(--chip-min, 0px), calc(50% - var(--reach, 250px))); }
.story.is-live .chip { opacity: 0; scale: .85; }
.story.is-live[data-active="2"] .chip-doing,
.story.is-live[data-active="5"] .chip-spend { opacity: 1; scale: 1; }
.story:not(.is-live) :is(.chip-doing, .chip-spend) { display: none; }

/* The scroll story. Phones: hero, then the phone pins near the top while step cards rise over it.
   Desktop: text on the left scrolls, the phone on the right stays centred in the view. */
.story { padding-top: calc(var(--bar) + 10px); }
.story-grid { display: grid; column-gap: clamp(32px, 6vw, 72px); }
.story-text { display: contents; }
.story-hero { order: 0; padding: clamp(44px, 9vw, 96px) 0 clamp(32px, 6vw, 48px); }
.story-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
/* --w (the phone's width) lives on the stage, so the chips, coins and rings around the phone can use it too. */
/* On phones the stage spans the full screen width and clips sideways, so the breathing rings end at the
   screen edges instead of widening the page (which makes mobile browsers zoom out). */
.chapter-badge { display: none; }
.story-stage { --w: min(66vw, calc(min(62svh, 560px) / 2.16)); --reach: 250px; --chip-min: var(--gutter); order: 1; position: sticky; top: calc(var(--bar) + 18px); z-index: 1; display: grid; place-items: center; height: min(62svh, 560px); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: clip; }
.phone-story { --w: inherit; }
.story-step { order: 2; position: relative; z-index: 2; display: grid; align-content: end; min-height: 86svh; padding-bottom: 7svh; }
.story-card { max-width: 560px; padding: 22px 22px 24px; border-radius: 26px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); }
.story-card h2 { font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1.06; letter-spacing: -.032em; }
.story-card p:not(.eyebrow) { margin-top: 10px; color: var(--ink-2); font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.45; letter-spacing: -.01em; max-width: 34ch; }
.story-dots { display: none; }

/* Why Livcoin: each habit with a reward that fits it. Costs are the product's own sample values. */
.why { padding: clamp(56px, 8vw, 104px) 0; }
.pairs-viewport { max-width: var(--maxw); margin: clamp(36px, 5vw, 56px) auto 0; padding: 0 var(--gutter); }
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; }
/* Each card shows a real task flow from the preview: a portrait phone recording (390x708). */
.pair-media { aspect-ratio: 390 / 640; overflow: hidden; background: #e9eeed; }
/* The app-flow recordings start mid-header, so those frames are anchored to the bottom. The scene clips are centred. */
.pair-app .pair-media video { object-position: 50% 0; }
.pair-media { position: relative; }
/* An app-style habit chip over the scene clips, so each category still reads as a Livcoin card. */
.pair-chip { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #ffffffe6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px #ffffff, 0 8px 18px -12px #10303899; font-size: .75rem; line-height: 1.15; }
.pair-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.pair-chip small { display: block; color: var(--ink-2); font-size: .6875rem; }
.pair-chip b { display: block; font-size: .8125rem; letter-spacing: -.01em; }
.pair-chip em { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: var(--c); color: #fff; font-style: normal; font-weight: 700; font-size: .6875rem; white-space: nowrap; }
.pair-chip em img { width: 12px; height: 12px; }
.pair-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pair-body { display: grid; gap: 5px; padding: 14px 16px 16px; }
.pair-habit { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: -.004em; }
.pair-habit::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.pair h3 { font-size: 1.0625rem; line-height: 1.25; }
.pair-cost { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--gold-ink); font-size: .9375rem; font-weight: 700; }
.pair-cost img { width: 20px; height: 20px; }

/* Sections */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-tight { padding: clamp(24px, 4vw, 40px) 0; }

.tiles { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.tile { padding: 28px 26px 30px; border-radius: 28px; }
.tile h3 { margin-bottom: 10px; }
.tile p { color: var(--ink-2); line-height: 1.5; }

/* Game rewards: a dark panel, so the publishers' light wordmarks read as designed. */
.games {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 30px; margin-top: 16px; padding: clamp(26px, 4vw, 44px);
  border-radius: 28px; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, #1f5a5f, #1f5a5f00 60%), linear-gradient(150deg, #10343a, #071a1f);
  box-shadow: inset 0 1px .5px #ffffff3d, inset 0 0 0 .5px #ffffff1f, var(--lift-big);
}
.games-eyebrow { margin-bottom: 10px; color: #7fe0cf; font-weight: 600; letter-spacing: -.008em; }
.games h3 { color: #fff; font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.games-copy > p:not(.games-eyebrow) { max-width: 46ch; margin-top: 12px; color: #ffffffbd; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }
.logos img { width: auto; height: 38px; }
.games-media { position: relative; min-height: 230px; }
.games-media img { position: absolute; width: 64%; height: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px #ffffff26, 0 22px 44px -18px #000000cc; }
.game-a { top: 0; right: 0; rotate: 4deg; }
.game-b { bottom: 0; left: 0; rotate: -5deg; }

.status { padding: clamp(26px, 4vw, 40px); border-radius: 28px; }
.status h2 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.016em; font-weight: 600; max-width: none; margin-bottom: 10px; }
.status p { color: var(--ink-2); max-width: 70ch; }

.cta-final { text-align: center; }
.cta-final h2, .cta-final .section-lede { margin-left: auto; margin-right: auto; }
.cta-final .btn { margin-top: 34px; }

.foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid #0b1f2414; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--ink-2); font-size: .875rem; }
.foot .wordmark { font-size: 1.0625rem; margin-right: auto; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Larger screens */
@media (min-width: 760px) {
  .bar-links { display: flex; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* From tablet up the recording sits beside the text, so the whole phone flow stays visible. */
  .pair { flex-direction: row; align-items: stretch; border-radius: 28px; }
  .pair-media { flex: none; width: 45%; aspect-ratio: 390 / 640; }
  .pair-body { align-self: center; gap: 6px; padding: 18px 22px 22px; }
  .pair-habit { font-size: .875rem; }
  .pair h3 { font-size: 1.3125rem; }
}
@media (min-width: 900px) {
  .games { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
  .games-media { min-height: 320px; }
}
@media (min-width: 1000px) {
  .story { padding-top: 0; }
  .story-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: repeat(7, auto); }
  .story-hero, .story-step { grid-column: 1; }
  .story-hero { display: grid; align-content: center; min-height: 100svh; padding: calc(var(--bar) + 10px) 0 0; }
  /* --cy: the phone sits in the stage's content box, below the bar padding. */
  .story-stage { --w: min(320px, calc((100svh - var(--bar) - 120px) / 2.16)); --cy: calc((var(--bar) + 10px) / 2); --reach: 300px; --chip-min: 0px; margin-inline: 0; padding-inline: 0; overflow-x: visible; grid-column: 2; grid-row: 1 / span 7; align-self: start; top: 0; height: 100svh; padding-top: calc(var(--bar) + 10px); }
  .story-step { align-content: center; min-height: 78svh; padding: 0; }
  /* A full view for the last step, so the pinned phone stays whole while it is read. */
  .story-step:last-child { min-height: 100svh; }
  .story-card { max-width: none; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .story.is-live .story-step { opacity: .22; transition: opacity .6s var(--ease-out); }
  .story.is-live .story-step.is-active { opacity: 1; }
  .chip-spend { top: 31%; }
  .story-dots { position: absolute; bottom: clamp(16px, 4svh, 40px); left: 50%; translate: -50% 0; display: flex; gap: 8px; }
  .story-dots li { width: 7px; height: 7px; border-radius: 999px; background: #0b1f2433; transition: width .5s var(--ease-out), background-color .5s; }
  .story-dots li.is-active { width: 22px; background: var(--teal); }
}
/* On phones the hero has its own "Open the demo", so the bar's button steps aside until the hero is passed. */
@media (max-width: 759px) {
  .bar .btn-small { transition: opacity .3s var(--ease-out), visibility .3s, translate .3s var(--ease-out); }
  html.at-hero .bar .btn-small { opacity: 0; visibility: hidden; translate: 0 -6px; }
}
/* On phones the chips only carry their headline, so they frame the device instead of covering it. */
@media (max-width: 599px) {
  /* The chapter label's sub-line drops under its title, so the label fits the screen instead of widening
     the page (which makes mobile browsers zoom out). */
  .loop-eyebrow { padding-right: 14px; }
  .loop-name { flex-direction: column; align-items: flex-start; gap: 3px; }
  .loop-name small { font-size: .875rem; white-space: normal; }
  .chip { gap: 8px; padding: 7px 15px 7px 7px; font-size: .9375rem; }
  .chip img, .chip-icon { width: 30px; height: 30px; }
  .chip small { display: none; }
  .logos { gap: 16px 22px; }
  .logos img { height: 32px; }
}
@media (max-width: 380px) {
  .bar-inner { padding-left: 18px; }
}

/* Motion. The page loads in; the scroll story swaps screens and plays each step's moment; the reward
   cards glide sideways; sections reveal; the light warms. Entrance and step moments are CSS animations
   started by state, the rest is scroll-driven. With Reduce Motion, or without scroll-driven animation
   support, the same page stays complete and still. */
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } }
@keyframes device-in { from { opacity: 0; transform: perspective(1200px) translateY(90px) rotateX(16deg) scale(.92); } }
@keyframes chip-in {
  0% { opacity: 0; transform: translateY(18px) scale(.6); filter: blur(12px); }
  55% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { transform: none; }
}
@keyframes coin-spin { from { transform: rotateY(-720deg) scale(.4); } }
@keyframes bar-in { from { transform: translateY(-90px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tap-ripple { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.18 1.6; } }
@keyframes fly-coin {
  0% { left: 70.3%; top: 44.9%; opacity: 0; scale: .5; }
  14% { opacity: 1; scale: 1.4; }
  92% { opacity: 1; }
  100% { left: 74.7%; top: 6.83%; opacity: 0; scale: .5; }
}
@keyframes earn-halo { 0% { opacity: 0; scale: .4; } 20% { opacity: 1; } 100% { opacity: 0; scale: 1.6; } }
/* Each coin arcs out through its own midpoint and is absorbed by the balance. */
@keyframes collect {
  0% { opacity: 0; translate: 0 0; scale: .3; }
  14% { opacity: 1; scale: 1.2; }
  50% { translate: calc(var(--sw) * var(--mx)) calc(var(--sw) * var(--my)); scale: 1; }
  88% { opacity: 1; scale: .7; }
  100% { opacity: 0; translate: calc(var(--sw) * .36) calc(var(--sw) * -.62); scale: .35; }
}
@keyframes tap-once { 0%, 100% { opacity: 0; } 15%, 70% { opacity: 1; } }
@keyframes breathe { 0%, 100% { scale: .9; opacity: .55; } 50% { scale: 1.06; opacity: 1; } }  /* 10 s: in, then out, like the clip */
@keyframes plus-rise { 0% { opacity: 0; translate: -50% -30%; scale: .5; } 18% { opacity: 1; translate: -50% -50%; scale: 1.15; } 30% { scale: 1; } 78% { opacity: 1; translate: -50% -50%; } 100% { opacity: 0; translate: -50% -110%; scale: .8; } }
@keyframes pill-bump { 40% { scale: 1.3; box-shadow: 0 0 0 6px #ffd56a99; } }
@keyframes ring-turn { to { rotate: 1turn; } }
@keyframes bar-settle { to { max-width: 880px; height: 50px; box-shadow: var(--edge), 0 1px 1px #1030380f, 0 18px 40px -18px #10303880; } }
@keyframes backdrop-drift { to { translate: 0 -12vh; } }
@keyframes warm { to { opacity: .8; } }
@keyframes reveal-text { from { opacity: 0; translate: 0 36px; filter: blur(8px); } }
@keyframes reveal-card { from { opacity: 0; translate: 0 56px; scale: .96; } }
@keyframes glide { to { translate: calc(-100% + 100cqw) 0; } }
@keyframes pan { from { object-position: 50% 15%; } to { object-position: 50% 85%; } }
@keyframes drift-a { from { translate: 0 36px; } to { translate: 0 -36px; } }
@keyframes drift-b { from { translate: 0 -28px; } to { translate: 0 28px; } }
@keyframes pop { 0% { opacity: 0; scale: .6; translate: 0 24px; } 70% { opacity: 1; scale: 1.06; translate: 0 0; } 100% { scale: 1; } }
@keyframes cta-in { from { opacity: 0; scale: .9; filter: blur(10px); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Entrance on load. "backwards" so state changes can still fade these elements afterwards. */
  .bar { animation: bar-in .9s var(--ease-out) backwards; }
  .story-hero :is(h1, .hero-title) .line { animation: rise 1s .05s var(--ease-out) backwards; }
  .story-hero :is(h1, .hero-title) .line + .line { animation-delay: .17s; }
  .story-hero .lede { animation: rise 1s .3s var(--ease-out) backwards; }
  .story-hero .actions { animation: rise 1s .42s var(--ease-out) backwards; }
  .story-hero .note { animation: rise 1s .52s var(--ease-out) backwards; }
  .phone-story { animation: device-in 1.3s .2s var(--ease-out) backwards; }

  /* Each step's moment plays when the step arrives (and again when it comes back into view).
     Hero, the win: Walk's Done is tapped, the coins arc into the balance, "+8 LP" rises and the balance counts
     (welcome.js), then the screen settles on the clean board. */
  /* Pick: the Start button pulses. Do: the rings breathe with the gull, five seconds in, five out. */
  .story[data-active="1"] .tap:not(.tap-walk)::after { animation: tap-ripple 1.4s .2s var(--ease-out) infinite; }
  .story[data-active="2"] .aura { animation: breathe 10s ease-in-out infinite; }
  .story[data-active="2"] .aura.a2 { animation-delay: -.6s; }
  .story[data-active="2"] .aura.a3 { animation-delay: -1.2s; }
  /* Earn: the coin flies into the balance; "+8 LP" rises; the balance bumps as it counts. */
  .story[data-active="3"] .fly-coin { animation: fly-coin 1.1s .15s cubic-bezier(.45, 0, .2, 1) both; }
  .story[data-active="3"] .earn-halo { animation: earn-halo 1.6s .05s ease-out both; }
  .story[data-active="3"] .plus { animation: plus-rise 2.1s .1s var(--ease-out) both; }
  .story[data-active="3"] .collect-coin { animation: collect 1.1s var(--d, 0s) cubic-bezier(.3, .7, .3, 1) both; }
  .story[data-active="3"] .lp-pill { animation: pill-bump .6s 1.25s var(--ease-out); }
  .story[data-active="6"] .sunny-button::before { animation: ring-turn 7s linear infinite; }
  .sunny-button > span::before { animation: blink 5s infinite; }

  @media (hover: hover) {
    .tile, .pair { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
    .tile:hover, .pair:hover { transform: translateY(-6px); box-shadow: var(--edge), var(--lift-hover); }
    .pair:hover .pair-media img { transform: scale(1.05); }
    .btn-primary:hover { transform: translateY(-1px); }
    .btn-primary:hover:active { transform: scale(.97); }
  }

  @supports (animation-timeline: view()) {
    /* The bar settles into a slimmer capsule once the page moves; the light drifts and warms. */
    .bar-inner { animation: bar-settle linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    body::before { animation: backdrop-drift linear both; animation-timeline: scroll(root); }
    body::after { animation: warm linear both; animation-timeline: scroll(root); animation-range: 30% 95%; }

    /* Reward cards glide sideways while the page scrolls down; their photos pan inside the frames. */
    .why { padding: 0; }
    .why-pin { height: 270svh; view-timeline: --pairs block; }
    /* The pinned block is only as tall as its content, so the next section follows the cards closely once the glide ends. */
    .why-sticky { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: flex-start; height: auto; max-height: 100svh; padding: calc(var(--bar) + clamp(16px, 8svh, 80px)) 0 clamp(16px, 4svh, 40px); overflow: hidden; container-type: inline-size; }
    .pairs-viewport { max-width: none; margin-top: clamp(22px, 4svh, 44px); padding: 0; }
    .pairs { display: flex; gap: 16px; width: max-content; padding-inline: max(var(--gutter), calc((100cqw - var(--maxw)) / 2 + var(--gutter))); animation: glide linear both; animation-timeline: --pairs; animation-range: contain 0% contain 100%; }
    .pair { flex: none; width: min(72vw, 430px); }
    .pair-media img { animation: pan linear both; animation-timeline: --pairs; animation-range: contain 0% contain 100%; }

    /* Sections arrive as they scroll in; text is sharp by the time it is fully on screen. */
    :is(.section, .why-head) :is(.eyebrow, h2, .section-lede), .section .note { animation: reveal-text linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    /* Segment and Team cards are always visible: Safari's scroll-driven reveal left them transparent at the end of the page. */

    /* Game stills drift against each other inside the dark panel; the wordmarks follow one another in. */
    .game-a { animation: drift-a linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .game-b { animation: drift-b linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .logos li { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

    .cta-final h2 { animation: cta-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .cta-final .btn { animation: reveal-card linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-height: 720px) {
  @supports (animation-timeline: view()) { .why-sticky .pair { width: min(72vw, 380px); } }
}

/* The Business loop reuses the scroll story. Its phone shows the five partner screens (390x824
   captures) and one icon per step crossfades under the phone, above the dots. */
.story-biz .screens > img[data-screen] { aspect-ratio: 390 / 871; object-fit: cover; object-position: 50% 0; }
.story-biz.is-live[data-active="1"] .screen-video[data-video="build"], .story-biz.is-live[data-active="3"] .screen-video[data-video="matched"], .story-biz.is-live[data-active="4"] .screen-video[data-video="claim"], .story-biz.is-live[data-active="6"] .screen-video[data-video="bizfeed"] { opacity: 1; }


/* Step 5: the preview's offers as an endless two-column feed inside the phone. */
.screen-feed { aspect-ratio: 390 / 871; overflow: hidden; background: #edf2f1; padding: 15% 4% 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--w) * .03); }
.screen-feed::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 15% 8%, #bfe9dd, #bfe9dd00 60%), radial-gradient(55% 45% at 90% 30%, #e6d9f7, #e6d9f700 60%), radial-gradient(60% 50% at 50% 100%, #fde7c7, #fde7c700 60%); }
.screen-feed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(#edf2f100, #edf2f1 70%); pointer-events: none; z-index: 1; }
.step-icons { display: none; }


@media (min-width: 1000px) {
  /* The Business stage holds the loop diagram beside a slightly smaller phone. */
  /* Business loop on desktop: the loop diagram + phone on the LEFT, the story text on the RIGHT (as in
     the original recordings). The diagram is sized from the phone: its width is 2.5 phone widths. */
  .story-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .story-hero :is(h1, .hero-title) { font-size: clamp(2.75rem, 5vw, 4.25rem); }
  /* On desktop the chapter chip sits above the phone, centred on the loop, while the loop's intro is
     on screen; the copy of the chip inside the intro text is hidden there. */
  .story-hero .loop-eyebrow { display: none; }
  /* The chapter chip spans both columns, centred, and stays pinned under the bar through the intro. */
  .chapter-badge { display: inline-flex; grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: start; position: sticky; top: var(--badge-top, calc(var(--bar) + 48px)); z-index: 4; margin: 24px 0 0; opacity: 0; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out); }
  .story[data-active="0"] .chapter-badge { opacity: 1; }
  .story:not([data-active="0"]) .chapter-badge { translate: 0 -10px; }
  /* The User loop banner introduces the first view only: it steps away as soon as the page scrolls. */
  html.is-scrolled .story:not(.story-biz) .chapter-badge { opacity: 0; translate: 0 -10px; pointer-events: none; }
  .story:not(.story-biz) .story-stage { --w: min(240px, calc((100svh - var(--bar) - 300px) / 2.64)); padding-top: calc(var(--bar) + 80px); }
  .story-biz .hero-title { font-size: clamp(2.5rem, 4.1vw, 3.5rem); }
  .story:not(.story-biz) .story-stage { --w: min(300px, calc((100svh - var(--bar) - 150px) / 2.64)); }
  .story:not(.story-biz) .story-stage .loop-stage { display: block; position: absolute; left: 50%; top: calc(50% + (var(--bar) + 80px) / 2); translate: -50% -50%; width: calc(var(--w) * 2.6); aspect-ratio: 1000 / 1056; pointer-events: none; }
  .story-biz .story-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .story:not(.story-biz) .story-stage .chip { display: none; }
  .story-biz .story-hero, .story-biz .story-step { grid-column: 2; }
  .story-biz .story-stage { --w: min(300px, calc((100svh - var(--bar) - 150px) / 2.64)); grid-column: 1; grid-row: 1 / span 6; padding-top: calc(var(--bar) + 80px); }
  .story-biz .story-hero { padding-left: 0; }
  .story-biz .story-stage .loop-stage { display: block; position: absolute; left: 50%; top: calc(50% + (var(--bar) + 80px) / 2); translate: -50% -50%; width: calc(var(--w) * 2.6); aspect-ratio: 1000 / 1056; pointer-events: none; }
  .story-biz .story-dots, .story:not(.story-biz) .story-dots { bottom: 8px; }
  .step-icons { position: absolute; left: 50%; bottom: calc(clamp(16px, 4svh, 40px) + 24px); translate: -50% 0; display: block; width: 44px; height: 44px; }
  .step-icon { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; scale: .7; transition: opacity .45s var(--ease-out), scale .6s cubic-bezier(.34, 1.56, .64, 1); }
  .step-icon.is-on { opacity: 1; scale: 1; }
  .step-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .step-icon svg .pip { fill: var(--teal); stroke: none; }
  .step-icon img { width: 30px; height: 30px; }
}

/* Segmentation: a compact, centred band; the three cards are centred as a group. */
.seg { padding: clamp(48px, 7vw, 88px) 0; }
.seg .wrap { max-width: 980px; text-align: center; }
.seg h2, .seg .section-lede { margin-left: auto; margin-right: auto; }
.seg-caption { margin-top: clamp(28px, 4vw, 40px); color: var(--ink-2); font-size: .875rem; font-weight: 600; letter-spacing: -.004em; }
.seg-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 12px; }
.seg-card { width: min(100%, 272px); display: grid; justify-items: center; gap: 12px; padding: 24px 18px 18px; border-radius: 26px; }
.seg-persona { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #ffffff8c; box-shadow: inset 0 0 0 1px #ffffffa6, 0 10px 24px -14px #1030386b; }
.seg-persona img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.seg-who { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.012em; }
.seg-deal { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 16px; background: #ffffff8c; box-shadow: inset 0 0 0 .5px #ffffffd9; }
.seg-lp { display: flex; align-items: center; gap: 6px; color: var(--gold-ink); font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.seg-lp img { width: 20px; height: 20px; }
.seg-reward { font-weight: 600; font-size: .9375rem; white-space: nowrap; }

/* Team: circular, chest-up portrait clips anchored from the top so the whole head stays inside. */
.team .wrap { text-align: center; }
.team h2 { margin: 0 auto; max-width: 22ch; font-size: clamp(1.875rem, 3.8vw, 2.875rem); }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(32px, 5vw, 52px); }
.team-card { width: min(100%, 320px); display: grid; justify-items: center; align-content: start; padding: 28px 22px 24px; border-radius: 28px; }
.team-portrait {
  --head: 0; /* the clip fills the circle from the top; the crown stays inside because the clips have their own headroom */
  position: relative; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 80% at 30% 20%, #ffffff, #dfe9e7);
  box-shadow: inset 0 0 0 1px #ffffffa6, 0 14px 30px -16px #10303873;
}
.team-portrait video { position: absolute; left: 0; right: 0; top: var(--head); width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.team-card h3 { margin-top: 18px; }
.team-card p { margin-top: 4px; color: var(--ink-2); font-size: .9375rem; }
.team-card .team-bio { margin-top: 10px; font-size: .875rem; line-height: 1.5; text-align: center; }
.team-card .team-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; max-width: 100%; }
.team-card .team-logos img { height: 22px; width: auto; max-width: none; flex: none; object-fit: contain; display: block; }
.team-card .team-logos img.logo-maelys { height: 16px; }

/* Accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .btn, .more::after, .pair-media :is(img, video), .step-icon, .screens > img[data-screen], .chip, .sunny-button, .lp-pill, .tap, .aura, .mini-screen, .phone-story, .story-step { transition: none; }
  .btn:active { transform: none; }
  .collect-coin, .tap-walk, .screen-video, .earn-halo { display: none; }
}
/* Story cards are glass only on phones; on desktop the step text sits on the page. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .sunny-button { background: #f7fafa; -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (max-width: 999px) { .story-card { background: #f7fafa; -webkit-backdrop-filter: none; backdrop-filter: none; } }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #0b1f24; }
  .glass { background: #fbfdfd; box-shadow: inset 0 0 0 1px #0b1f2466; }
  @media (max-width: 999px) { .story-card { background: #fbfdfd; box-shadow: inset 0 0 0 1px #0b1f2466; } }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .sunny-button { background: #f7fafaf2; }
  @media (max-width: 999px) { .story-card { background: #f7fafaf2; } }
}

/* The Business loop diagram. Desktop only (see the min-width: 1000px block for placement). */
.loop-stage { display: none; }
.loop-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.arc { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; opacity: .22; transition: opacity .45s var(--ease-out); }
#loop-head path { fill: var(--ink); }
.loop-label { font-size: 24px; font-weight: 600; fill: var(--ink-2); opacity: .55; transition: opacity .45s; }
.loop-node text { font-size: 26px; font-weight: 700; fill: var(--ink); }
.loop-node .ring { fill: #ffffffd9; stroke: #0b1f2426; stroke-width: 3; transition: stroke .45s; }
.loop-node .pad3d, .loop-node .gift3d { filter: drop-shadow(0 14px 18px #3a1d7a4d); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .loop-node .pad3d, .loop-node .gift3d { animation: pad-bob 3.2s ease-in-out infinite; } }
@keyframes pad-bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.mover { opacity: 0; transition: opacity .45s; }
.mover circle { fill: #ffffff; stroke: #0b1f2414; stroke-width: 2; filter: drop-shadow(0 4px 6px #10303833); }
.mover .ic { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mover .pip { fill: var(--teal); }
.mover.tok-offer circle { fill: #fff; }
/* The player is a live face: a looping portrait clip sits over the Player node (15% / 50% of the diagram). */
.loop-face { position: absolute; left: calc(15% - 7%); top: 50%; width: 14%; height: auto; aspect-ratio: 1 / 1; translate: 0 -50%; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #dfe9e7; }
.lp-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-pop .fx-burst { fill: none; stroke: #f4b40e; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.story:not(.story-biz)[data-active="0"] :is(.arc, .mover, .loop-label) { opacity: 1; }
.story:not(.story-biz):is([data-active="1"], [data-active="2"], [data-active="3"]) :is(.arc, .mover)[data-arc="a1"],
.story:not(.story-biz):is([data-active="4"], [data-active="5"]) :is(.arc, .mover)[data-arc="a2"],
.story:not(.story-biz)[data-active="6"] :is(.arc, .mover, .loop-label):is([data-arc="a3"], [data-arc="a4"]) { opacity: 1; }
.story:not(.story-biz):is([data-active="0"], [data-active="1"], [data-active="2"], [data-active="3"], [data-active="6"]) .loop-node[data-node="player"] .ring,
.story:not(.story-biz):is([data-active="0"], [data-active="4"], [data-active="5"]) .loop-node[data-node="rewards"] .ring { stroke: var(--teal); }
.loop-node .gift .ic { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .story:not(.story-biz):is([data-active="0"], [data-active="3"]) .lp-pop { animation: lp-pop 3.6s .1s ease-out infinite; } .story:not(.story-biz):is([data-active="0"], [data-active="3"]) .lp-pop .fx-burst { animation: lp-burst 3.6s .1s ease-out infinite; } }
/* Which arcs are live per step: 1 offers back to the player, 2 steps become LP, 3 dice out to the
   game, 4 dollars back after play, intro and 5 the whole loop. */
.story-biz:is([data-active="0"], [data-active="6"]) :is(.arc, .mover), .story-biz:is([data-active="0"], [data-active="6"]) .loop-label { opacity: 1; }
.story-biz[data-active="1"] :is(.arc, .mover, .loop-label)[data-arc="a4"],
.story-biz[data-active="2"] :is(.arc, .mover)[data-arc="a2"],
.story-biz[data-active="3"] :is(.arc, .mover)[data-arc="a1"],
.story-biz[data-active="4"] :is(.arc, .mover, .loop-label)[data-arc="a3"],
.story-biz[data-active="5"] :is(.arc, .mover, .loop-label)[data-arc="a3"] { opacity: 1; }
.story-biz:is([data-active="0"], [data-active="1"], [data-active="2"], [data-active="6"]) .loop-node[data-node="player"] .ring,
.story-biz:is([data-active="0"], [data-active="2"], [data-active="4"], [data-active="5"], [data-active="6"]) .loop-node[data-node="game"] .ring { stroke: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .story-biz:is([data-active="0"], [data-active="3"], [data-active="6"]) .lp-pop { animation: lp-pop 3.6s .1s ease-out infinite; }
  .story-biz:is([data-active="0"], [data-active="2"], [data-active="5"]) .lp-pop .fx-burst { animation: lp-burst 3.6s .1s ease-out infinite; }
}
@keyframes lp-pop { 0%, 8% { opacity: 0; transform: translateY(14px) scale(.6); } 18%, 55% { opacity: 1; transform: translateY(0) scale(1); } 75%, 100% { opacity: 0; transform: translateY(-16px) scale(.9); } }
@keyframes lp-burst { 0%, 10% { opacity: 0; transform: scale(.5); } 22% { opacity: .9; } 50%, 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .mover animateMotion { display: none; } .arc, .mover, .loop-label { transition: none; } }

/* Business loop, step 2: a live playable inside the phone; step 5: the publisher report. HTML screens that scale with the
   phone: 1em = 16px on a 390px-wide screen, so every size below is relative to the phone width. */
.screens { container-type: inline-size; }
.biz-play, .connect { aspect-ratio: 390 / 871; box-sizing: border-box; overflow: hidden; font-family: var(--font); font-size: 14px; font-size: calc(100cqw / 390 * 20); }
.biz-play { --pl-theme: #5b1d8f; --pl-accent: #ffcf4a; display: flex; flex-direction: column; color: #fff; background-color: var(--pl-theme); background-size: cover; background-position: center top; }
.biz-play .playable-host { position: relative; flex: 1; inset: auto; padding: .25em .5em 0; min-height: 0; font-size: 1em; }
.biz-play .pl-stage { font-size: calc(100cqw / 360 * 16 * .92); }
.biz-play .pl-done { top: 1.5em; }
.biz-play .lg-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 2.5em; border: 0; border-radius: 1.25em; background: #fff; color: #0b1f24; font: 600 .875em/1 var(--font); cursor: pointer; }
.biz-play-bar { display: flex; align-items: center; justify-content: space-between; padding: 1.9em 1em 0; }
.biz-play-brand { font: 700 1.125em/1 var(--font); letter-spacing: -.02em; }
.biz-play-lp { display: inline-flex; align-items: center; gap: .3em; padding: .4em .7em; border-radius: 999px; background: #00000059; font: 700 .75em/1 var(--font); box-shadow: inset 0 0 0 .5px #ffffff40; }
.biz-play-lp img, .biz-play-price img { width: 1.3em; height: 1.3em; }
.biz-play-tabs { display: flex; flex-wrap: wrap; gap: .3em; padding: .6em .75em 0; }
.biz-play-tabs button { flex: 1 0 auto; padding: .55em .6em; border: 0; border-radius: 999px; background: #ffffff24; color: #fff; font: 600 .625em/1 var(--font); box-shadow: inset 0 0 0 .5px #ffffff40; cursor: pointer; }
.biz-play-tabs button[aria-selected="true"] { background: #fff; color: #0b1f24; }
.biz-play-panel { margin: 0 .6em .75em; padding: .75em .75em .75em .9em; border-radius: 1.25em; background: linear-gradient(150deg, #26323699, #0d1518b3); box-shadow: inset 0 0 0 .5px #ffffff40; }
.biz-play-game { font: 700 1.0625em/1.1 var(--font); letter-spacing: -.02em; }
.biz-play-benefit { margin-top: .2em; font: 500 .8125em/1.2 var(--font); color: #fffd; }
.biz-play-claim { display: flex; align-items: center; justify-content: space-between; margin-top: .6em; }
.biz-play-price { display: inline-flex; align-items: center; gap: .3em; font: 600 .875em/1 var(--font); } .biz-play-price b { font-size: 1.1em; }
.biz-play-cta { display: inline-flex; align-items: center; min-height: 2.6em; padding: 0 1.2em; border-radius: 1.3em; background: #fff; color: #0b1f24; font: 600 .8125em/1 var(--font); }
.biz-lab { display: none; flex-direction: column; gap: .45em; margin: .6em .75em 0; padding: .6em .7em; border-radius: 1em; background: #0d1518ee; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .5px #ffffff40; }
.biz-lab-head { font: 700 .625em/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #fffd; }
.biz-lab-rounds { display: flex; flex-wrap: wrap; gap: .3em; }
.biz-lab-rounds i { padding: .4em .6em; border-radius: 999px; font: 600 .5625em/1 var(--font); font-style: normal; background: #ffffff24; color: #fff; box-shadow: inset 0 0 0 .5px #ffffff40; }
.biz-lab-rounds i[data-fate="cut"] { opacity: .55; text-decoration: line-through; }
.biz-lab-rounds i[data-fate="kept"] { background: #fff; color: #0b1f24; }
.biz-lab-rounds i[data-fate="testing"] { background: #ffffff10; border: .5px dashed #ffffff80; box-shadow: none; }
.biz-lab-cost { font: 500 .5625em/1.3 var(--font); color: #fffc; }
.story-biz[data-active="5"] .biz-lab { display: flex; }
.story-biz[data-active="5"] .biz-play-tabs { display: none; }

/* User loop, step 4: the connected-apps screen (HTML, scales with the phone like the business screens). */
.connect { padding: 2.1em 1em 1em; color: var(--ink); background: linear-gradient(170deg, #f6f8f7, #e4ecea); }
.connect-eyebrow { font: 600 .625em/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.connect-title { margin-top: .4em; font: 700 1.0625em/1.15 var(--font); letter-spacing: -.02em; }
.connect-list { list-style: none; margin: .9em 0 0; padding: 0; display: grid; gap: .45em; }
.connect-list li { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: .6em; padding: .5em .7em .5em .5em; border-radius: .9em; background: #fff; box-shadow: var(--edge); }
.connect-mark { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .65em; background: var(--c, #d4e2df); color: #fff; font: 800 1em/1 var(--font); font-style: normal; }
.connect-add .connect-mark { color: var(--teal); background: #e4ecea; }
.connect-app { display: grid; gap: .15em; min-width: 0; }
.connect-app b { font: 600 .6875em/1.2 var(--font); }
.connect-app small { font: 500 .5625em/1.2 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-lp { padding: .4em .6em; border-radius: 999px; background: #e4f3f0; color: var(--teal); font: 700 .625em/1 var(--font); font-variant-numeric: tabular-nums; }
.connect-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .9em; padding: .7em .8em; border-radius: .9em; background: var(--teal); color: #fff; font: 600 .6875em/1.2 var(--font); }
.connect-foot b { font-size: 1.3em; }

/* Hero phone: the live demo, scaled from its 390px layout to the phone, auto-advancing card by card. Wide screens only; phones keep the clip. */
.screen-live{display:none;position:absolute;left:0;top:0;width:390px;height:824px;border:0;background:#0d1a1d;opacity:0;transform-origin:0 0;scale:tan(atan2(calc(var(--w) * .932),390px));pointer-events:none;transition:opacity .5s var(--ease-out)}
.screen-live{display:block}.story.is-live[data-active="0"] .screen-live{opacity:1}.story.is-live[data-active="0"] .screen-video[data-video="feed"]{opacity:0}