/* ═══════════════════════════════════════════════════════════════════════
   D9Commerce front page (inc/pages/home.php) — light, animated build
   (Oct 2026, 2nd rebuild). Loaded after home.css (shared public chrome:
   header, buttons, pricing switch, FAQ, footer, scroll reveal).
   • Always light: body.site-light (public_top 'light') re-points home.css'
     themable tokens to their light values whatever the visitor's OS theme,
     and restyles the header / mobile menu / phone CTA for a light page.
     The footer stays the shared night band.
   • Prefix `fp-` (sections), `tv-` (bento tile visuals), `fv-` (the feature
     story's product illustrations).
   • Motion is decorative: pages/front.js adds the hero sync loop, the
     scroll-lit statement, the sticky story, typing and `.is-live` (tile
     animations run only on screen); with JS off every illustration shows its
     finished frame, and prefers-reduced-motion stops everything (end of file).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Light tokens ──────────────────────────────────────────────────────── */
html:has(body.site-light) { color-scheme: light; }
body.site-light {
  color-scheme: light;
  --bg: #FFFFFF; --bg-alt: #F6F7FC; --surface: #FFFFFF; --surface-2: #F8F9FD;
  --line: #E6E8F2; --line-2: #D5DAEA; --ink: #0B1020; --ink-2: #2A3350; --muted: #5B6584; --faint: #8C95AF;
  --primary: #5B5CF0; --primary-ink: #4338CA; --focus: #6366F1;
  --good: #059669; --good-ink: #047857; --good-soft: #E7F8F1; --warn: #B45309; --danger: #DC2626;
  --eb-c: #4F46E5; --eb-bg: #EEF0FF; --eb-line: rgba(99, 102, 241, .22);
  --grad-text: linear-gradient(120deg, #0891B2 0%, #4F46E5 48%, #9333EA 100%);
  --shadow-sm: 0 1px 2px rgba(16, 24, 64, .06);
  --shadow: 0 6px 16px -6px rgba(16, 24, 64, .12);
  --shadow-lg: 0 24px 48px -18px rgba(16, 24, 64, .25);
  --glow: 0 30px 70px -34px rgba(79, 70, 229, .45);
  background: #fff; color: var(--ink-2);
}

/* ── Light header, mobile menu, phone CTA ──────────────────────────────── */
.site-light .site-head {
  color: var(--ink); background: rgba(255, 255, 255, .82); border-bottom-color: rgba(15, 23, 42, .07);
}
.site-light .site-head.is-scrolled { box-shadow: 0 12px 30px -20px rgba(15, 23, 42, .28); }
.js .site-light.nav-open .site-head { background: rgba(255, 255, 255, .97); }
.site-light .site-head :focus-visible { outline-color: #6366F1; }
.site-light .brand:hover { filter: drop-shadow(0 6px 14px rgba(99, 102, 241, .3)); }
.site-light .btn-ghost { color: #3A4566; }
.site-light .btn-ghost:hover { color: var(--ink); background: rgba(15, 23, 42, .05); }
.site-light .btn-glass { color: var(--ink); background: #fff; border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.site-light .btn-glass:hover { background: #fff; border-color: color-mix(in srgb, #6366F1 45%, var(--line-2)); color: var(--primary-ink); }
.site-light .nav-toggle-label { border-color: var(--line-2); background: #fff; }
.site-light .nav-toggle-label:hover { background: #F3F4FA; }
.site-light .nav-toggle:focus-visible ~ .nav-toggle-label { outline-color: #6366F1; }
.site-light .burger span { background: var(--ink); }
.site-light .site-nav > a { color: #3A4566; }
.site-light .site-nav > a:hover { color: var(--ink); background: rgba(99, 102, 241, .07); }
.site-light .site-nav > a.is-current { color: var(--primary-ink); }
@media (max-width: 1099px) {
  .site-light .site-nav { background: #fff; border-color: var(--line); box-shadow: 0 30px 60px -24px rgba(15, 23, 42, .35); }
  .site-light .site-nav > a::after { color: var(--faint); }
  .site-light .site-nav > a.is-current { background: rgba(99, 102, 241, .1); }
  .site-light .nav-actions { border-top-color: var(--line); }
}
@media (min-width: 1100px) {
  .site-light .site-nav > a::after { background: #6366F1; box-shadow: 0 0 8px rgba(99, 102, 241, .6); }
}
.site-light .mobile-cta { background: rgba(255, 255, 255, .94); border-top-color: var(--line); box-shadow: 0 -16px 40px -22px rgba(15, 23, 42, .3); }
.site-light .mobile-cta span { color: var(--muted); }
.site-light .mobile-cta span b { color: var(--ink); }

/* ── Shared atoms ──────────────────────────────────────────────────────── */
.fp-grad {
  background: linear-gradient(100deg, #0891B2 0%, #4F46E5 30%, #9333EA 55%, #4F46E5 80%, #0891B2 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fpShine 7s linear infinite; padding-bottom: .06em;
}
@keyframes fpShine { to { background-position: -220% 0; } }
.fp-cap { margin-top: 14px; font-size: 11.5px; letter-spacing: .02em; color: var(--faint); }
.fp-cap.center { text-align: center; margin-top: 22px; }
.fp-ic {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 18px;
  color: var(--fc, var(--primary)); background: color-mix(in srgb, var(--fc, var(--primary)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--fc, var(--primary)) 20%, transparent);
}
.fp-ic.sm { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }

/* The robot (d9-robot-head.webp, square) — float + blink; lids in % of the
   image (same numbers as .d9-bot in d9-theme.css — keep them if the art changes). */
.fp-bot {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  background: url(/assets/img/d9-robot-head.webp) center / contain no-repeat;
  animation: fpFloat 4.8s ease-in-out infinite;
}
.fp-bot::before, .fp-bot::after {
  content: ''; position: absolute; top: 47.5%; height: 12.5%; border-radius: 40%; background: #040d3e;
  transform: scaleY(0); transform-origin: 50% 0; animation: fpBlink 5.6s ease-in-out infinite; pointer-events: none;
}
.fp-bot::before { left: 36.5%; width: 19.5%; }
.fp-bot::after { left: 68.5%; width: 17%; }
.fp-bot.sm { flex: none; width: 44px; height: 44px; }
@keyframes fpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fpBlink { 0%, 91%, 100% { transform: scaleY(0); } 94.5% { transform: scaleY(1); } }

/* Scroll progress (front.js sets --p 0…1) */
.fp-progress { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.fp-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #22D3EE, #6366F1 50%, #A855F7); box-shadow: 0 0 12px rgba(99, 102, 241, .6); }

/* Section rhythm */
.fp-say, .fp-bento-sec, .fp-story, .fp-ins, .fp-how, .fp-det-sec { position: relative; isolation: isolate; padding: clamp(72px, 9vw, 120px) 0; }
.fp-bento-sec, .fp-story, .fp-how, .fp-det-sec, .fp-say { background: #fff; }
.fp-bento-sec { background: linear-gradient(180deg, #fff 0%, #F7F8FD 100%); }
.fp-det-sec { background: #F7F8FD; }
.fp-h3 { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.7rem); font-weight: 780; letter-spacing: -.04em; line-height: 1.06; margin-bottom: 16px; }
/* Section titles (home.css sizes them for .sec only) */
:is(.fp-bento-sec, .fp-story, .fp-ins, .fp-how, .fp-det-sec) h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); font-weight: 780; letter-spacing: -.042em; line-height: 1.05; margin-bottom: 16px; color: var(--ink);
}
.fp-say { padding-bottom: clamp(48px, 6vw, 80px); }

/* Buttons the light page adds */
.fp-btn-white { color: #1E1B4B; background: #fff; box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .45); }
.fp-btn-white:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(15, 23, 42, .55); color: #4338CA; }
.fp-btn-line { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); }
.fp-btn-line:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.fp-magnet { transition: transform .25s var(--ease), box-shadow .3s var(--ease); }

/* ═══ Hero ════════════════════════════════════════════════════════════ */
.fp-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--head-h) + clamp(32px, 6vw, 84px)) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #F7F8FF 0%, #FFFFFF 78%);
}
.fp-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fp-sky i { position: absolute; border-radius: 50%; filter: blur(10px); will-change: transform; }
.fp-sky .b1 { width: 56vmax; height: 56vmax; left: -18vmax; top: -26vmax; background: radial-gradient(closest-side, rgba(34, 211, 238, .30), rgba(34, 211, 238, 0)); animation: fpDriftA 22s ease-in-out infinite alternate; }
.fp-sky .b2 { width: 52vmax; height: 52vmax; right: -18vmax; top: -20vmax; background: radial-gradient(closest-side, rgba(168, 85, 247, .26), rgba(168, 85, 247, 0)); animation: fpDriftB 26s ease-in-out infinite alternate; }
.fp-sky .b3 { width: 46vmax; height: 46vmax; left: 30%; top: 30%; background: radial-gradient(closest-side, rgba(99, 102, 241, .20), rgba(99, 102, 241, 0)); animation: fpDriftC 30s ease-in-out infinite alternate; }
@keyframes fpDriftA { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.1); } }
@keyframes fpDriftB { to { transform: translate3d(-8vmax, 7vmax, 0) scale(.92); } }
@keyframes fpDriftC { to { transform: translate3d(-6vmax, -6vmax, 0) scale(1.12); } }
.fp-sky .grid, .fp-cta-bg .grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(79, 70, 229, .16) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 55% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 55% 30%, #000 20%, transparent 75%);
}
.fp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.fp-hero-copy { max-width: 640px; margin-inline: auto; width: 100%; }
.fp-hero-copy > *, .fp-h1 .ln { animation: rise .95s var(--ease) both; animation-delay: calc(var(--o, 0) * 85ms + 60ms); }
.fp-pill {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-bottom: 24px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line); box-shadow: 0 8px 22px -14px rgba(79, 70, 229, .45);
  font-size: 13px; font-weight: 600; color: var(--ink-2); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.fp-pill:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #6366F1 45%, var(--line)); box-shadow: 0 12px 28px -14px rgba(79, 70, 229, .6); }
.fp-pill .tag { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--grad-ui); }
.fp-pill .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-pill i { flex: none; font-size: 11px; color: #6366F1; transition: transform .25s var(--ease); }
.fp-pill:hover i { transform: translateX(3px); }
.fp-h1 { font-size: clamp(2.6rem, 8.6vw, 4.6rem); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: var(--ink); margin-bottom: 22px; }
.fp-h1 .ln { display: block; }
.fp-lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.24rem); line-height: 1.6; color: var(--muted); max-width: 34em; margin-bottom: 30px; text-wrap: pretty; }
.fp-cta { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.fp-cta .btn { width: 100%; }
.fp-cta .btn-soft .fa-play { font-size: .7em; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad-ui); }
.fp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fp-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fp-trust i { color: #10B981; }
@media (min-width: 520px) { .fp-cta { flex-direction: row; flex-wrap: wrap; } .fp-cta .btn { width: auto; } }
@media (min-width: 1024px) {
  .fp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 4vw, 64px); }
  .fp-hero-copy { margin-inline: 0; }
  .fp-h1 { font-size: clamp(3.3rem, 5.1vw, 4.7rem); }
}

/* The sync scene */
.fp-stage-wrap { position: relative; width: 100%; max-width: 640px; margin: 0 auto; animation: rise 1s var(--ease) both; animation-delay: .25s; }
.fp-stage-wrap::before {   /* soft halo under the scene */
  content: ''; position: absolute; z-index: -1; inset: 10% 6% 2%; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(99, 102, 241, .22), rgba(99, 102, 241, 0)); filter: blur(20px);
}
.fp-stage {
  position: relative; aspect-ratio: 560 / 460; container: fpstage / inline-size; font-size: clamp(10px, 2.45cqi, 13.5px);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease);
}
.fp-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fp-beams .rail { fill: none; stroke: rgba(99, 102, 241, .22); stroke-width: 2; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.fp-beams .bm {
  fill: none; stroke: url(#fpBeamG); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px rgba(99, 102, 241, .65));
  transition: stroke-dashoffset .7s var(--ease), opacity .25s;
}
.fp-stage:not(.s-beam) .bm { transition-duration: .25s; }
.fp-stage.s-beam[data-sold="ebay"] .in-ebay, .fp-stage.s-beam[data-sold="walmart"] .in-walmart, .fp-stage.s-beam[data-sold="amazon"] .in-amazon,
.fp-stage.s-push[data-sold="ebay"] :is(.out-walmart, .out-amazon),
.fp-stage.s-push[data-sold="walmart"] :is(.out-ebay, .out-amazon),
.fp-stage.s-push[data-sold="amazon"] :is(.out-ebay, .out-walmart) { stroke-dashoffset: 0; opacity: 1; }

.fp-core, .fp-node, .fp-toast, .fp-ledger {
  position: absolute; background: rgba(255, 255, 255, .92); border: 1px solid rgba(99, 102, 241, .14); border-radius: 1.3em;
  box-shadow: 0 1.6em 3em -1.6em rgba(30, 27, 75, .35), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fp-core {
  left: 50%; top: 50%; width: 40%; transform: translate(-50%, -50%); z-index: 3;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5em .7em; align-items: center; padding: .9em;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #22D3EE, #6366F1 50%, #A855F7) border-box;
  box-shadow: 0 2em 4em -1.8em rgba(79, 70, 229, .55);
}
.fp-core-ph { width: 3.2em; height: 3.2em; border-radius: .9em; display: grid; place-items: center; font-size: 1.15em; color: #fff; background: var(--grad-ui); box-shadow: 0 .8em 1.6em -.8em rgba(79, 70, 229, .8); }
.fp-core-t { min-width: 0; display: grid; }
.fp-core-t small, .fp-core-q small { font-size: .74em; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.fp-core-t b { font-size: .98em; font-weight: 750; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-core-q { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding: .45em .7em; border-radius: .8em; background: #F4F5FD; }
.fp-core-q b { font-size: 1.5em; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.fp-node {
  z-index: 2; width: 34%; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55em; align-items: center; padding: .65em .75em;
  transition: box-shadow .4s, border-color .4s, transform .4s var(--spring);
}
.n-ebay { left: 20%; top: 22%; } .n-walmart { left: 80%; top: 48%; } .n-amazon { left: 22%; top: 80%; }
.fp-node .mk { width: 2.4em; height: 2.4em; border-radius: .7em; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
.fp-node .mk img { width: 1.7em; height: 1.7em; }
.fp-node .t { min-width: 0; display: grid; }
.fp-node .t b { font-size: .98em; font-weight: 750; color: var(--ink); }
.fp-node .t small { font-size: .78em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-node .q { display: grid; justify-items: end; }
.fp-node .q b { font-size: 1.35em; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.fp-node .q small { font-size: .7em; color: var(--faint); font-weight: 650; }
.fp-node .ok {
  position: absolute; right: -.55em; top: -.55em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center;
  font-size: .78em; color: #fff; background: #10B981; box-shadow: 0 .4em .9em -.3em rgba(16, 185, 129, .8);
  transform: scale(0); transition: transform .45s var(--spring);
}
.fp-node .sold {
  position: absolute; left: 50%; top: -1.1em; transform: translateX(-50%) scale(0); white-space: nowrap;
  padding: .25em .7em; border-radius: 999px; font-size: .78em; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #F59E0B, #F43F5E); box-shadow: 0 .5em 1em -.4em rgba(244, 63, 94, .8);
  transition: transform .45s var(--spring);
}
.fp-stage.s-sold[data-sold="ebay"] .n-ebay, .fp-stage.s-sold[data-sold="walmart"] .n-walmart, .fp-stage.s-sold[data-sold="amazon"] .n-amazon {
  border-color: rgba(244, 63, 94, .45); box-shadow: 0 0 0 .35em rgba(244, 63, 94, .12), 0 1.6em 3em -1.6em rgba(244, 63, 94, .5);
}
.fp-stage.s-sold[data-sold="ebay"] .n-ebay .sold, .fp-stage.s-sold[data-sold="walmart"] .n-walmart .sold, .fp-stage.s-sold[data-sold="amazon"] .n-amazon .sold { transform: translateX(-50%) scale(1); }
.fp-stage.s-done[data-sold="ebay"] :is(.n-walmart, .n-amazon) .ok,
.fp-stage.s-done[data-sold="walmart"] :is(.n-ebay, .n-amazon) .ok,
.fp-stage.s-done[data-sold="amazon"] :is(.n-ebay, .n-walmart) .ok { transform: scale(1); }
.fp-stage.s-done[data-sold="ebay"] :is(.n-walmart, .n-amazon),
.fp-stage.s-done[data-sold="walmart"] :is(.n-ebay, .n-amazon),
.fp-stage.s-done[data-sold="amazon"] :is(.n-ebay, .n-walmart) { border-color: rgba(16, 185, 129, .4); }
.fp-stage .bump { animation: fpBump .55s var(--spring); }
@keyframes fpBump { 0% { transform: translateY(-.35em); opacity: .2; filter: blur(2px); } 100% { transform: none; opacity: 1; filter: none; } }
.fp-toast {
  right: 0; bottom: 3%; z-index: 4; width: 50%; display: flex; align-items: center; gap: .6em; padding: .65em .8em;
  opacity: 0; transform: translateY(1em) scale(.95); transition: opacity .35s, transform .5s var(--spring);
}
.fp-stage.s-sold .fp-toast { opacity: 1; transform: none; }
.fp-toast .ic { flex: none; width: 2.3em; height: 2.3em; border-radius: .75em; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #F59E0B, #F43F5E); }
.fp-toast b { display: block; font-size: .95em; color: var(--ink); }
.fp-toast small { display: block; font-size: .78em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-toast > span:last-child { min-width: 0; }
.fp-ledger {
  left: 37%; top: 3%; z-index: 4; display: flex; align-items: center; gap: .5em; max-width: 44%; padding: .45em .75em; border-radius: 999px;
  font-size: .78em; color: var(--muted); opacity: 0; transform: translateY(-.6em); transition: opacity .35s, transform .45s var(--ease);
}
.fp-ledger i { color: #6366F1; }
.fp-ledger b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fp-ledger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-stage.s-beam .fp-ledger { opacity: 1; transform: none; }
.fp-bot-hero { position: absolute; right: 1%; top: 2%; width: 14%; z-index: 5; filter: drop-shadow(0 .8em 1.2em rgba(79, 70, 229, .35)); }
@container fpstage (max-width: 440px) {   /* phones: bigger cards, fewer words */
  .fp-node { width: 38%; }
  .fp-node .t small, .fp-node .q small { display: none; }
  .fp-core { width: 46%; }
  .fp-toast { width: 58%; }
  .fp-ledger { left: 30%; max-width: 50%; }
}
.fp-stage-wrap .fp-cap { text-align: center; }

/* Marketplaces row */
.fp-mk { margin-top: clamp(40px, 6vw, 72px); text-align: center; }
.fp-mk-h { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.fp-mk-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fp-mk-list li {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 16px; font-weight: 750; color: var(--ink);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s;
}
.fp-mk-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fp-mk-list img { width: 30px; height: 30px; padding: 4px; border-radius: 9px; background: #F6F7FC; }
.fp-mk-also { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* ═══ Ticker ══════════════════════════════════════════════════════════ */
.fp-ticker { position: relative; overflow: hidden; padding: 22px 0; background: #0B1020; display: grid; gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fp-tick { display: flex; width: max-content; animation: fpMarq 46s linear infinite; }
.fp-tick.rev { animation-direction: reverse; animation-duration: 52s; }
.fp-ticker:hover .fp-tick { animation-play-state: paused; }
.fp-tick-row { display: flex; gap: 10px; padding-right: 10px; }
.fp-tick-row li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 650; color: #E3E8FA; background: rgba(255, 255, 255, .06); border: 1px solid rgba(148, 163, 184, .18);
}
.fp-tick-row li i { color: #67E8F9; font-size: 12px; }
.fp-tick.rev .fp-tick-row li i { color: #C4B5FD; }
@keyframes fpMarq { to { transform: translateX(-50%); } }

/* ═══ Statement + why ═════════════════════════════════════════════════ */
.fp-say .wrap { text-align: center; }
.fp-say-text {
  max-width: 1000px; margin: 0 auto clamp(48px, 6vw, 72px); font-size: clamp(1.7rem, 1rem + 2.9vw, 3.2rem); font-weight: 780;
  letter-spacing: -.035em; line-height: 1.16; color: var(--ink); text-wrap: balance;
}
.fp-say-text .hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-say-text .w { transition: opacity .35s, color .35s; }
.fp-say-text.is-split .w { opacity: .14; }
.fp-say-text.is-split .w.on { opacity: 1; }
.fp-say-text .w.hl { background: var(--grad-text); background-size: 600% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
.fp-why-card {
  position: relative; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.fp-why-card::after { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--fc); opacity: .9; }
.fp-why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--fc) 35%, var(--line)); }
.fp-why-card h3 { margin: 16px 0 8px; font-size: 19px; letter-spacing: -.02em; }
.fp-why-card p { font-size: 15px; color: var(--muted); line-height: 1.6; }
@media (min-width: 900px) { .fp-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ═══ Bento ═══════════════════════════════════════════════════════════ */
.fp-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fp-tile {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.fp-tile::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px 220px at var(--mx) var(--my), color-mix(in srgb, var(--fc) 14%, transparent), transparent 70%);
}
.fp-tile:hover { transform: translateY(-5px); box-shadow: 0 28px 60px -30px color-mix(in srgb, var(--fc) 60%, rgba(16, 24, 64, .4)); border-color: color-mix(in srgb, var(--fc) 35%, var(--line)); }
.fp-tile:hover::before { opacity: 1; }
.fp-tile-vis {
  position: relative; overflow: hidden; height: 190px; margin: 10px 10px 0; border-radius: 18px; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--fc) 12%, #fff), color-mix(in srgb, var(--fc) 4%, #fff));
  border: 1px solid color-mix(in srgb, var(--fc) 12%, transparent);
}
.fp-tile-txt { padding: 18px 22px 22px; }
.fp-tile-txt .fp-ic { margin-bottom: 12px; }
.fp-tile-txt h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; }
.fp-tile-txt p { font-size: 14.5px; color: var(--muted); line-height: 1.58; }
@media (min-width: 720px) {
  .fp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-editor { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .fp-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .fp-tile { grid-column: span 2; }
  .t-editor { grid-column: span 4; }
  .t-editor .fp-tile-vis { height: 230px; }
  .t-stock .fp-tile-vis { height: 230px; }
}
/* Tile animations run only while on screen (front.js toggles .is-live). */
.js [data-live]:not(.is-live) *, .js [data-live]:not(.is-live)::before, .js [data-live]:not(.is-live)::after { animation-play-state: paused !important; }

/* tile: editor */
.tv-win { width: min(92%, 520px); border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 36px -22px rgba(30, 27, 75, .45); padding: 12px; display: grid; gap: 12px; }
.tv-tabs { position: relative; display: flex; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tv-tabs .tb { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tv-tabs .tb img { width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.tv-ink { position: absolute; left: 0; bottom: -1px; width: calc((100% - 12px) / 3); height: 2.5px; border-radius: 2px; background: var(--grad-ui); animation: tvTab 7.5s var(--ease) infinite; }
@keyframes tvTab { 0%, 28% { transform: translateX(0); } 33%, 61% { transform: translateX(calc(100% + 6px)); } 66%, 94% { transform: translateX(calc(200% + 12px)); } 100% { transform: translateX(0); } }
.tv-rows { display: grid; gap: 8px; }
.tv-rows .r { height: 9px; border-radius: 6px; background: linear-gradient(90deg, #EEF0FA 25%, #E2E5F5 50%, #EEF0FA 75%); background-size: 300% 100%; animation: tvShim 2.4s linear infinite; }
.tv-rows .w90 { width: 90%; } .tv-rows .w70 { width: 70%; } .tv-rows .w80 { width: 80%; }
@keyframes tvShim { to { background-position: -300% 0; } }
.tv-ready { display: flex; align-items: center; gap: 10px; }
.tv-ready b { display: block; font-size: 13px; color: var(--ink); }
.tv-ready small { display: block; font-size: 11.5px; color: var(--muted); }
.tv-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-size: 12px; font-weight: 750; color: #fff; background: var(--grad-ui); white-space: nowrap; animation: tvPulse 2.6s ease-in-out infinite; }
@keyframes tvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .45); } 50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0); } }
.ring {
  --p: 0; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(#10B981 calc(var(--p) * 1%), #E6E8F2 0);
}
.ring b { font-size: 13px; font-weight: 800; color: var(--ink); }

/* tile: stock */
.tv-qty { width: min(90%, 300px); display: grid; gap: 8px; }
.tv-qty li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 650; color: var(--ink);
}
.tv-qty img { width: 18px; height: 18px; }
.tv-qty b { font-variant-numeric: tabular-nums; font-size: 14px; }
.tv-qty s { color: var(--faint); font-weight: 600; margin-right: 2px; }
.tv-qty i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; background: #10B981; animation: tvCheck 4.2s var(--spring) infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes tvCheck { 0%, 12% { transform: scale(0); } 22%, 88% { transform: scale(1); } 100% { transform: scale(0); } }

/* tile: vision */
.tv-vision { position: relative; width: 260px; height: 150px; }
.tv-vision .ph { position: absolute; top: 18px; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; color: #7C3AED; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); animation: tvDrop 5s var(--ease) infinite; }
.tv-vision .p1 { left: 0; --r: -8deg; animation-delay: 0s; } .tv-vision .p2 { left: 42px; --r: 4deg; animation-delay: .15s; } .tv-vision .p3 { left: 84px; --r: -3deg; animation-delay: .3s; }
@keyframes tvDrop { 0% { opacity: 0; transform: translateY(-16px) rotate(var(--r)); } 12%, 85% { opacity: 1; transform: rotate(var(--r)); } 100% { opacity: 0; } }
.tv-vision .wand { position: absolute; left: 152px; top: 30px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #A855F7, #6366F1); box-shadow: 0 8px 18px -8px rgba(124, 58, 237, .9); animation: tvWand 5s ease-in-out infinite; }
@keyframes tvWand { 0%, 20% { transform: scale(.6) rotate(-20deg); opacity: .3; } 30%, 85% { transform: scale(1) rotate(0); opacity: 1; } 100% { opacity: .3; } }
.tv-vision .lines { position: absolute; left: 0; right: 0; bottom: 8px; display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tv-vision .lines i { display: block; height: 8px; border-radius: 5px; background: linear-gradient(90deg, #A855F7, #6366F1); transform-origin: 0 50%; animation: tvType 5s var(--ease) infinite; }
.tv-vision .l1 { width: 92%; animation-delay: .9s !important; } .tv-vision .l2 { width: 70%; animation-delay: 1.3s !important; } .tv-vision .l3 { width: 82%; animation-delay: 1.7s !important; }
@keyframes tvType { 0%, 15% { transform: scaleX(0); } 35%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* tile: orders */
.tv-orders { width: min(92%, 320px); display: grid; gap: 7px; }
.tv-orders li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 12.5px; animation: tvSlide 5.4s var(--ease) infinite; animation-delay: calc(var(--i) * .25s);
}
.tv-orders li.box { border-style: dashed; border-color: rgba(99, 102, 241, .5); background: linear-gradient(90deg, rgba(99, 102, 241, .08), #fff); }
.tv-orders b { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-orders .due { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.tv-orders .today { color: #B45309; background: #FEF3C7; }
.tv-orders .tom { color: #1D4ED8; background: #DBEAFE; }
.tv-orders .go { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--grad-ui); }
@keyframes tvSlide { 0% { opacity: 0; transform: translateX(-14px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* tile: market */
.tv-hist { position: relative; width: min(88%, 300px); height: 120px; display: flex; align-items: flex-end; gap: 7px; padding-bottom: 6px; border-bottom: 2px solid rgba(245, 158, 11, .25); }
.tv-hist i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #FBBF24, #F59E0B); transform-origin: 50% 100%; animation: tvGrow 5s var(--ease) infinite; animation-delay: calc(var(--i) * .08s); }
@keyframes tvGrow { 0%, 8% { transform: scaleY(.05); } 30%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.05); } }
.tv-mark { position: absolute; left: 34%; top: -6px; padding: 4px 9px; border-radius: 9px; font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); white-space: nowrap; animation: tvPop 5s var(--spring) infinite; }
.tv-mark b { color: #B45309; }
.tv-mark::after { content: ''; position: absolute; left: 22px; top: 100%; width: 2px; height: 70px; background: repeating-linear-gradient(180deg, #F59E0B 0 4px, transparent 4px 8px); }
@keyframes tvPop { 0%, 30% { opacity: 0; transform: translateY(6px) scale(.9); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* tile: returns */
.tv-steps { position: relative; width: min(92%, 320px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 6px; }
.tv-steps .s { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tv-steps .s i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--faint); background: #fff; border: 2px solid var(--line); animation: tvStep 6s var(--ease) infinite; }
.tv-steps .s1 i { animation-delay: .2s; } .tv-steps .s2 i { animation-delay: 1.2s; } .tv-steps .s3 i { animation-delay: 2.2s; }
@keyframes tvStep { 0%, 4% { color: var(--faint); border-color: var(--line); background: #fff; } 10%, 88% { color: #fff; border-color: #F43F5E; background: #F43F5E; } 100% { color: var(--faint); border-color: var(--line); background: #fff; } }
.tv-line { position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 3px; border-radius: 3px; background: var(--line); }
.tv-line i { display: block; height: 100%; border-radius: 3px; background: #F43F5E; transform-origin: 0 50%; animation: tvFill 6s var(--ease) infinite; }
@keyframes tvFill { 0%, 6% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* tile: offers */
.tv-offer { width: min(90%, 300px); display: grid; gap: 10px; justify-items: start; }
.tv-offer .bub { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); animation: tvPop 5.5s var(--spring) infinite; }
.tv-offer .bub small { display: block; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tv-offer .bub b { font-size: 22px; color: var(--ink); }
.tv-offer .vs { font-size: 12.5px; color: var(--muted); }
.tv-offer .vs b { color: var(--ink); }
.tv-offer .tv-btn { margin: 0; justify-self: end; }

/* tile: profit */
.tv-bars { position: relative; width: min(88%, 300px); height: 120px; display: flex; align-items: flex-end; gap: 10px; }
.tv-bars i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #34D399, #059669); transform-origin: 50% 100%; animation: tvGrow 5.5s var(--ease) infinite; animation-delay: calc(var(--i) * .1s); }
.tv-chip { position: absolute; left: 0; top: -6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 750; color: #047857; background: #fff; border: 1px solid #A7F3D0; box-shadow: var(--shadow-sm); }
.tv-chip.c2 { left: 92px; color: #4338CA; border-color: #C7D2FE; }

/* tile: review */
.tv-review { width: min(92%, 300px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.tv-review .side { padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-align: center; }
.tv-review .side small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 750; color: var(--muted); }
.tv-review .side img { width: 14px; height: 14px; }
.tv-review .side b { display: block; font-size: 19px; color: var(--ink); }
.tv-review .vs { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #A855F7, #6366F1); animation: tvTilt 3s ease-in-out infinite; }
@keyframes tvTilt { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.tv-review .pick { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: center; }
.tv-review .pick em { font-style: normal; padding: 6px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 750; color: var(--ink-2); background: #fff; border: 1px solid var(--line); animation: tvPick 6s ease-in-out infinite; }
.tv-review .pick em:nth-child(2) { animation-delay: 2s; } .tv-review .pick em:nth-child(3) { animation-delay: 4s; }
@keyframes tvPick { 0%, 4%, 34%, 100% { color: var(--ink-2); background: #fff; border-color: var(--line); } 8%, 30% { color: #fff; background: #7C3AED; border-color: #7C3AED; } }

/* tile: search */
.tv-cmd { width: min(92%, 320px); display: grid; gap: 7px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(30, 27, 75, .5); }
.tv-cmd .q { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F4F5FD; font-size: 13px; font-weight: 650; color: var(--ink); }
.tv-cmd .q i { color: #0EA5E9; }
.tv-cmd .q span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.tv-cmd .q span::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: tvCaret 1s steps(1) infinite; }
@keyframes tvCaret { 50% { opacity: 0; } }
.tv-cmd .q kbd { font-size: 10.5px; }
.tv-cmd .res { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; color: var(--ink-2); animation: tvSlide 5.5s var(--ease) infinite; }
.tv-cmd .res i { color: var(--faint); }
.tv-cmd .r1 { background: rgba(14, 165, 233, .1); animation-delay: .6s; } .tv-cmd .r2 { animation-delay: .8s; }

/* tile: phone */
.tv-phone { position: relative; width: 270px; height: 150px; }
.tv-phone .dev { position: absolute; left: 6px; top: 8px; width: 66px; height: 128px; border-radius: 16px; background: #0B1020; padding: 6px; box-shadow: 0 16px 30px -16px rgba(11, 16, 32, .8); }
.tv-phone .cam { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 11px; color: #fff; font-size: 18px; background: linear-gradient(160deg, #F43F5E, #A855F7); }
.tv-phone .lap { position: absolute; right: 4px; top: 24px; width: 150px; height: 96px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 10px; }
.tv-phone .lap::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: -8px; height: 8px; border-radius: 0 0 8px 8px; background: #D5DAEA; }
.tv-phone .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tv-phone .g i { aspect-ratio: 1; border-radius: 7px; background: linear-gradient(135deg, #FDE68A, #F9A8D4); animation: tvLand 4.8s var(--ease) infinite; }
.tv-phone .g i:nth-child(2) { animation-delay: .35s; background: linear-gradient(135deg, #A5F3FC, #C4B5FD); }
.tv-phone .g i:nth-child(3) { animation-delay: .7s; background: linear-gradient(135deg, #BBF7D0, #A5B4FC); }
@keyframes tvLand { 0%, 30% { opacity: 0; transform: scale(.6); } 40%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tv-phone .fly { position: absolute; left: 30px; top: 60px; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #F43F5E, #A855F7); opacity: 0; animation: tvFly 4.8s var(--ease) infinite; }
.tv-phone .f2 { animation-delay: .35s; } .tv-phone .f3 { animation-delay: .7s; }
@keyframes tvFly { 0% { opacity: 0; transform: none; } 6% { opacity: 1; } 30% { opacity: 1; transform: translate(170px, -22px) rotate(20deg) scale(.7); } 34%, 100% { opacity: 0; transform: translate(170px, -22px); } }

/* ═══ Feature story ═══════════════════════════════════════════════════ */
.fp-story { background: #fff; }
.fp-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.fp-ch { display: grid; gap: 28px; padding: 28px 0; scroll-margin-top: calc(var(--head-h) + 24px); }
.fp-ch + .fp-ch { border-top: 1px solid var(--line); }
.fp-ch-n { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--faint); }
.fp-ch .checks li { font-size: 14.5px; }
.fp-story-stage { display: none; }
/* Desktop: chapters scroll on the left, one sticky frame on the right. Only once front.js
   runs the story (.is-story) — otherwise each chapter keeps its own illustration. */
@media (min-width: 1024px) {
  .fp-story-grid.is-story { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .is-story .fp-ch { min-height: 78vh; align-content: center; padding: 48px 0; }
  .is-story .fp-ch + .fp-ch { border-top: 0; }
  .is-story .fp-ch-vis { display: none; }
  .is-story .fp-story-stage { display: block; height: 100%; }
  .is-story .fp-story-sticky { position: sticky; top: calc(var(--head-h) + max(24px, (100vh - var(--head-h) - 600px) / 2)); }
  .is-story .fp-ch .fp-ch-copy { transition: opacity .5s var(--ease); }
  .is-story .fp-ch:not(.is-on) .fp-ch-copy { opacity: .35; }
}
.fp-story-frame {
  position: relative; height: 600px; border-radius: 28px; padding: 28px;
  background: radial-gradient(120% 80% at 80% 0%, rgba(168, 85, 247, .14), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(34, 211, 238, .16), transparent 60%), #F7F8FD;
  border: 1px solid var(--line); box-shadow: var(--glow);
}
.fp-sv { position: absolute; inset: 28px; opacity: 0; visibility: hidden; transform: translateY(22px) scale(.97); transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s linear .55s; }
.fp-story-stage[data-active="listing"] [data-sv="listing"], .fp-story-stage[data-active="ai"] [data-sv="ai"], .fp-story-stage[data-active="sync"] [data-sv="sync"],
.fp-story-stage[data-active="orders"] [data-sv="orders"], .fp-story-stage[data-active="profit"] [data-sv="profit"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fp-story-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.fp-story-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); transition: width .4s var(--ease), background .4s; }
.fp-story-stage[data-active="listing"] [data-dot="listing"], .fp-story-stage[data-active="ai"] [data-dot="ai"], .fp-story-stage[data-active="sync"] [data-dot="sync"],
.fp-story-stage[data-active="orders"] [data-dot="orders"], .fp-story-stage[data-active="profit"] [data-dot="profit"] { width: 28px; background: #6366F1; }
.fp-story-sticky .fp-cap { text-align: center; }

/* fv- illustrations (light) */
.fv-card { display: grid; align-content: start; gap: 14px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(30, 27, 75, .45); color: var(--ink-2); font-size: 14px; }
.fp-ch-vis.fv-card { margin: 0; }
.fp-sv.fv-card { overflow: hidden; }
.fv-head { display: flex; align-items: center; gap: 12px; }
.fv-ph { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--grad-ui); box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .9); }
.fv-t { min-width: 0; display: grid; }
.fv-t b { color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-t small { color: var(--muted); font-size: 12.5px; }
.fv-ptabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fv-ptabs span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 5px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink); }
.fv-ptabs span.on { border-color: #6366F1; background: rgba(99, 102, 241, .07); box-shadow: 0 0 0 3px rgba(99, 102, 241, .1); }
.fv-ptabs img { width: 18px; height: 18px; }
.fv-ptabs b { margin-left: 2px; padding: 2px 6px; border-radius: 6px; background: #F1F2F9; font-size: 11.5px; }
.fv-ptabs span.on b { background: #6366F1; color: #fff; }
.fv-mk { display: grid; gap: 8px; }
.fv-mk li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 13px; background: #F7F8FD; border: 1px solid var(--line); }
.fv-mk img { width: 22px; height: 22px; }
.fv-mk span { display: grid; font-weight: 700; color: var(--ink); }
.fv-mk small { font-weight: 500; color: var(--muted); font-size: 12px; }
.fv-mk b { color: var(--ink); font-variant-numeric: tabular-nums; }
.st { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.st.live { color: #047857; background: #D1FAE5; }
.st.pub { color: #4338CA; background: #E0E7FF; animation: tvPulse 2.6s ease-in-out infinite; }
.fv-ready { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #ECFDF5; border: 1px solid #A7F3D0; }
.fv-ready b { display: block; color: #065F46; }
.fv-ready small { display: block; color: #047857; font-size: 12px; }
.fv-foot { display: flex; justify-content: flex-end; gap: 8px; }
.fv-foot .b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; font-size: 13px; font-weight: 750; }
.fv-foot .b.ghost { color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); }
.fv-foot .b.pri, .fv-box .b.pri { color: #fff; background: var(--grad-ui); box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .9); }
.fv-photos { display: flex; gap: 8px; }
.fv-photos span { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; color: #7C3AED; background: #F5F3FF; border: 1px solid #E9D5FF; }
.fv-photos .more { font-size: 14px; font-weight: 800; }
.fv-ai { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(168, 85, 247, .1), rgba(99, 102, 241, .06)); border: 1px solid rgba(168, 85, 247, .25); }
.fv-ai > div { min-width: 0; flex: 1; }
.fv-ai b { display: block; color: var(--ink); }
.fv-ai small { display: block; color: var(--muted); font-size: 12px; }
.fv-scan { display: block; height: 4px; margin-top: 8px; border-radius: 4px; overflow: hidden; background: rgba(124, 58, 237, .15); }
.fv-scan i { display: block; width: 40%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #A855F7, #6366F1); animation: fvScan 1.6s ease-in-out infinite; }
@keyframes fvScan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.fv-out { display: grid; gap: 8px; }
.fv-out li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-radius: 12px; background: #F7F8FD; border: 1px solid var(--line); }
.fv-out span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.fv-out b { color: var(--ink); font-weight: 650; font-size: 13.5px; min-height: 1.4em; }
.fv-out b small { font-weight: 500; color: var(--muted); }
.fv-out b.typing::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #7C3AED; animation: tvCaret 1s steps(1) infinite; }
.fv-qh b { display: block; color: var(--ink); font-size: 15px; }
.fv-qh small { color: var(--muted); font-size: 12.5px; }
.fv-sold { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; color: #9F1239; background: #FFE4E6; font-weight: 700; font-size: 13px; }
.fv-qty { display: grid; gap: 8px; }
.fv-qty li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 13px; background: #F7F8FD; border: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.fv-qty img { width: 22px; height: 22px; }
.fv-qty .n { font-variant-numeric: tabular-nums; font-size: 16px; }
.fv-qty .was { color: var(--faint); font-weight: 600; font-size: 13px; }
.fv-qty .st { animation: fvAcc 4.5s var(--spring) infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes fvAcc { 0%, 10% { opacity: 0; transform: scale(.7); } 20%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fv-ledger { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #EEF0FF; color: var(--ink-2); font-size: 13px; }
.fv-ledger i { color: #4F46E5; }
.fv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-chips .c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: #F3F4FA; }
.fv-chips .c b { color: var(--ink); }
.fv-chips .c.on { color: #fff; background: var(--grad-ui); }
.fv-chips .c.on b { color: #fff; }
.fv-chips .c.red { color: #B91C1C; background: #FEE2E2; }
.fv-chips .c.blue { color: #1D4ED8; background: #DBEAFE; }
.fv-box { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1.5px dashed rgba(99, 102, 241, .5); background: linear-gradient(90deg, rgba(99, 102, 241, .07), #fff); }
.fv-box-h { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.fv-box-h i { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6366F1, #A855F7); }
.fv-box-h b { color: var(--ink); }
.fv-box-h small { color: var(--muted); font-size: 12px; }
.fv-box ul { display: grid; gap: 6px; }
.fv-box li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); animation: tvSlide 6s var(--ease) infinite; animation-delay: calc(var(--i) * .2s); }
.fv-box li em { font-style: normal; color: var(--muted); font-weight: 600; }
.fv-box .b { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; font-size: 13px; font-weight: 750; }
.fv-track { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: #F0F9FF; border: 1px solid #BAE6FD; font-size: 13px; }
.fv-track b { color: var(--ink); }
.fv-track small { display: block; color: var(--muted); font-size: 12px; }
.fv-route { position: relative; flex: none; width: 70px; height: 26px; border-radius: 999px; background: repeating-linear-gradient(90deg, #7DD3FC 0 6px, transparent 6px 11px) center / 100% 2px no-repeat; }
.fv-route i { position: absolute; top: 50%; left: 0; color: #0284C7; transform: translateY(-50%); animation: fvDrive 3.4s ease-in-out infinite; }
@keyframes fvDrive { 0% { left: 0; } 90%, 100% { left: calc(100% - 16px); } }
.fv-pnl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fv-pnl div { padding: 10px 12px; border-radius: 13px; background: #F7F8FD; border: 1px solid var(--line); }
.fv-pnl small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fv-pnl b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fv-pnl b.g { color: #059669; }
.fv-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #EEF0F7; }
.fv-stack i { width: var(--w); height: 100%; transform-origin: 0 50%; animation: fvBar 5s var(--ease) infinite; }
.fv-stack .fees { background: #F59E0B; } .fv-stack .cogs { background: #A5B4FC; } .fv-stack .net { background: #10B981; }
@keyframes fvBar { 0%, 6% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.fv-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fv-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fv-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.fv-legend .fees { background: #F59E0B; } .fv-legend .cogs { background: #A5B4FC; } .fv-legend .net { background: #10B981; }
.fv-ch { display: grid; gap: 8px; }
.fv-ch li { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.fv-ch img { width: 20px; height: 20px; }
.fv-ch .bar { height: 9px; border-radius: 999px; background: #EEF0F7; overflow: hidden; }
.fv-ch .bar i { display: block; width: var(--w); height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22D3EE, #6366F1); transform-origin: 0 50%; animation: fvBar 5s var(--ease) infinite; }

/* ═══ Insights ════════════════════════════════════════════════════════ */
.fp-ins { overflow: clip; background: linear-gradient(180deg, #F4F3FF 0%, #F7FBFF 100%); }
.fp-ins-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fp-ins-bg i { position: absolute; border-radius: 50%; }
.fp-ins-bg .b1 { width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(closest-side, rgba(168, 85, 247, .18), transparent); animation: fpDriftB 26s ease-in-out infinite alternate; }
.fp-ins-bg .b2 { width: 460px; height: 460px; left: -140px; bottom: -180px; background: radial-gradient(closest-side, rgba(34, 211, 238, .18), transparent); animation: fpDriftA 24s ease-in-out infinite alternate; }
.fp-ins-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.fp-ins-list { display: grid; gap: 14px; margin-top: 28px; }
.fp-ins-list li { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); }
.fp-ins-list h3 { font-size: 16px; margin-bottom: 4px; }
.fp-ins-list p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.fp-mail { margin: 0; }
.fp-mail-card { display: grid; gap: 16px; padding: 22px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--glow); }
.fp-mail-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fp-mail-top b { display: block; color: var(--ink); font-size: 16px; }
.fp-mail-top small { color: var(--muted); font-size: 12.5px; }
.fp-mail-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fp-mail-kpis div { padding: 12px; border-radius: 14px; background: #F7F8FD; border: 1px solid var(--line); min-width: 0; }
.fp-mail-kpis small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fp-mail-kpis b { display: block; font-size: 21px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-mail-kpis em { font-style: normal; font-size: 12px; font-weight: 750; }
.fp-mail-kpis .up { color: #059669; } .fp-mail-kpis .dn { color: #DC2626; }
.fp-mail-sec > small { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fp-mail-bars { display: grid; gap: 8px; }
.fp-mail-bars span { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 11px; overflow: hidden; background: #F7F8FD; font-size: 13px; }
.fp-mail-bars i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, rgba(34, 211, 238, .28), rgba(99, 102, 241, .28)); transform-origin: 0 50%; animation: fvBar 6s var(--ease) infinite; animation-delay: calc(var(--i) * .2s); }
.fp-mail-bars b, .fp-mail-bars em { position: relative; font-style: normal; color: var(--ink); }
.fp-mail-bars em { font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-mail-todo { display: grid; gap: 6px; }
.fp-mail-todo li { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 11px; background: #F7F8FD; font-size: 13.5px; color: var(--ink-2); }
.fp-mail-todo i { color: #6366F1; width: 16px; text-align: center; }
.fp-mail-todo .warn { background: #FFF7ED; color: #9A3412; }
.fp-mail-todo .warn i { color: #EA580C; }
@media (min-width: 1024px) { .fp-ins-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }

/* ═══ How it works ════════════════════════════════════════════════════ */
.fp-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fp-step { position: relative; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.fp-step .fp-ic { margin-bottom: 14px; transition: background .5s, color .5s; }
.fp-step-n { position: absolute; top: 18px; right: 20px; font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #EEF0F8; transition: color .5s; }
.fp-step h3 { font-size: 17px; margin-bottom: 6px; }
.fp-step p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.js .fp-step:not(.is-active) { opacity: .55; transform: translateY(10px); }
.fp-step.is-active { border-color: rgba(99, 102, 241, .35); box-shadow: 0 20px 44px -26px rgba(79, 70, 229, .55); }
.fp-step.is-active .fp-ic { color: #fff; background: var(--grad-ui); border-color: transparent; }
.fp-step.is-active .fp-step-n { color: rgba(99, 102, 241, .22); }
@media (min-width: 900px) {
  .fp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .fp-flow::before { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: 47px; height: 3px; border-radius: 3px; background: var(--line); }
  .fp-flow::after { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: 47px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #22D3EE, #6366F1, #A855F7); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .8s var(--ease); }
}
.fp-how-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; text-align: center; }
.fp-how-cta span { font-size: 14px; color: var(--muted); }

/* ═══ Details ═════════════════════════════════════════════════════════ */
.fp-det-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fp-det { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.fp-det:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fp-det h3 { font-size: 15.5px; margin-bottom: 3px; }
.fp-det p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
@media (min-width: 640px) { .fp-det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fp-det-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* ═══ Pricing + FAQ on the light page ═════════════════════════════════ */
.fp-pricing { background: radial-gradient(80% 50% at 50% 0%, rgba(99, 102, 241, .08), transparent 70%), #fff; }
.fp-faq { background: #F7F8FD; }

/* ═══ Final CTA ═══════════════════════════════════════════════════════ */
.fp-cta-sec { padding: clamp(56px, 8vw, 104px) 0; background: #fff; }
.fp-cta-card {
  position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #EEF2FF;
  border-radius: 34px; padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(44px, 6vw, 72px);
  background: linear-gradient(135deg, #0891B2 0%, #4F46E5 48%, #9333EA 100%); box-shadow: 0 40px 90px -40px rgba(79, 70, 229, .8);
}
.fp-cta-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fp-cta-bg i { position: absolute; border-radius: 50%; }
.fp-cta-bg .b1 { width: 420px; height: 420px; left: -120px; top: -160px; background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent); animation: fpDriftA 18s ease-in-out infinite alternate; }
.fp-cta-bg .b2 { width: 380px; height: 380px; right: -100px; bottom: -160px; background: radial-gradient(closest-side, rgba(34, 211, 238, .5), transparent); animation: fpDriftB 20s ease-in-out infinite alternate; }
.fp-cta-bg .b3 { width: 300px; height: 300px; right: 20%; top: -140px; background: radial-gradient(closest-side, rgba(244, 114, 182, .45), transparent); animation: fpDriftC 22s ease-in-out infinite alternate; }
.fp-cta-bg .grid { background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.5px); }
.fp-cta-bot { width: 92px; margin: 0 auto 18px; filter: drop-shadow(0 16px 26px rgba(15, 23, 42, .45)); }
.fp-cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.fp-cta-card h2 { max-width: 16ch; margin: 0 auto 16px; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.03; color: #fff; }
.fp-cta-card > p { max-width: 580px; margin: 0 auto 30px; font-size: clamp(1rem, .95rem + .3vw, 1.14rem); line-height: 1.6; color: rgba(238, 242, 255, .92); }
.fp-cta-actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.fp-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 24px; }
.fp-cta-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.fp-cta-trust i { color: #A7F3D0; }
.fp-cta-card > .fp-cta-login { margin: 18px auto 0; font-size: 14px; color: rgba(238, 242, 255, .85); }
.fp-cta-login a { color: #fff; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 520px) { .fp-cta-actions { flex-direction: row; flex-wrap: wrap; } }

/* ═══ Phones ══════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .fp-tile-vis { height: 170px; }
  .tv-vision, .tv-phone { transform: scale(.9); }
  .fv-card { padding: 16px; }
  .fv-out li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fv-ch li { grid-template-columns: auto 58px minmax(0, 1fr) auto; }
  .fp-mail-kpis b { font-size: 18px; }
}

/* ═══ Reduced motion: everything rests on its finished frame ══════════ */
@media (prefers-reduced-motion: reduce) {
  .fp-grad, .fp-sky i, .fp-ins-bg i, .fp-cta-bg i, .fp-bot, .fp-bot::before, .fp-bot::after, .fp-tick,
  .fp-tile-vis *, .fv-card *, .fp-mail-bars i, .fp-hero-copy > *, .fp-h1 .ln, .fp-stage-wrap { animation: none !important; }
  .fp-tick { flex-wrap: wrap; width: auto; justify-content: center; }
  .fp-tick-row[aria-hidden="true"] { display: none; }
  .fp-tick-row { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); row-gap: 10px; }
  .fp-ticker { -webkit-mask-image: none; mask-image: none; }
  .fp-stage { transform: none !important; }
  .fp-sv, .fp-step, .fp-ch .fp-ch-copy { transition: none !important; }
  .js .fp-step:not(.is-active) { opacity: 1; transform: none; }
  .fp-say-text.is-split .w { opacity: 1; }
  .fv-route i { left: calc(100% - 16px); }
}
@media print {
  .fp-progress, .fp-sky, .fp-ticker { display: none !important; }
}