/* ============ RESET / TOKENS ============ */
@font-face { font-family: Geist; src: url('/home/assets/fonts/geist-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/home/assets/fonts/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #EDE8FF;
  --ink-soft: rgba(237, 232, 255, .68);
  --ink-faint: rgba(237, 232, 255, .46);
  --paper: #100C19;
  --paper-2: #151021;
  --card: #1B1529;
  --coral: #F06D4F;
  --coral-deep: #D9512F;
  --amber: #F4B860;
  --foam: #7ED6C1;
  --lilac: #D7B6F0;
  --space: #0C0912;
  --space-2: #130E1D;
  --space-3: #1B1428;
  --star: #EDE8FF;
  --violet: #8B5CF6;
  --violet-2: #A78BFA;
  --violet-3: #C4B5FD;
  --line-w: rgba(255, 255, 255, .09);
  --line-d: rgba(44, 23, 53, .12);
  --radius: 22px;
  --font: Geist, ui-sans-serif, system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--space); color: var(--star); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--coral); color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 300; top: 12px; left: 12px; padding: 11px 16px; border-radius: 10px; color: #241433; background: var(--amber); font-size: 13px; font-weight: 700; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); transform: translateY(calc(-100% - 24px)); }
.skip-link:focus { transform: none; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
#main-content:focus { outline: none; }

.wrap { width: min(calc(100% - 48px), 1240px); margin-inline: auto; max-width: 100%; }
.wrap--wide { width: min(calc(100% - 32px), 1440px); margin-inline: auto; max-width: 100%; }

/* ============ SHARED TYPE ============ */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.h-display { font-size: clamp(54px, 7.4vw, 116px); line-height: 1.22; letter-spacing: -.055em; font-weight: 730; overflow: visible; padding-block: .18em; text-wrap: pretty; }
.h2 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.1; letter-spacing: -.045em; font-weight: 720; overflow: visible; padding-block: .04em; text-wrap: pretty; }
.lede { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.65; text-wrap: pretty; }
.mono-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }

/* ============ REVEAL ANIMATIONS ============ */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv-scale { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0s); }
.rv-scale.in { opacity: 1; transform: none; }

/* ============ ANNOUNCE BAR ============ */
.announce { position: relative; z-index: 60; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 9px 20px; font-size: 12px; letter-spacing: .01em; color: #D9D2E9; background: linear-gradient(90deg, #171023, #241436 50%, #171023); border-bottom: 1px solid var(--line-w); }
.announce b { color: #fff; font-weight: 620; }
.announce .pill { padding: 2px 8px; border-radius: 99px; background: var(--coral); color: #2C1735; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.announce a { display: inline-flex; align-items: center; gap: 6px; color: var(--lilac); font-weight: 560; transition: color .2s; }
.announce a:hover { color: #fff; }

/* ============ NAV ============ */
.nav { position: sticky; top: 0; z-index: 100; transition: background .25s, border-color .25s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(12, 9, 18, .94); border-bottom-color: var(--line-w); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; font-size: 17px; letter-spacing: -.03em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 4px 18px rgba(240, 109, 79, .35); }
.home-primary-nav { display: contents; }
.nav__menu { display: none; }
.nav__links { display: flex; align-items: center; gap: 30px; font-size: calc(13px * var(--locale-chrome, 1)); font-weight: 500; color: #B9B2C9; }
.nav__links a { position: relative; transition: color .2s; }
.nav__links a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--coral); transition: width .25s var(--ease); }
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: 9px; }
.home-language { position: relative; }
.home-language summary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 52px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-w); border-radius: 9px; color: #D9D2E9; background: rgba(255,255,255,.045); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.home-language summary::-webkit-details-marker { display: none; }
.home-language summary small { font-size: 11px; transition: transform .2s var(--ease); }
.home-language[open] summary small { transform: rotate(180deg); }
.home-language-menu { position: absolute; inset-block-start: calc(100% + 9px); inset-inline-end: 0; z-index: 110; display: grid; min-width: 194px; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(21,16,33,.98); box-shadow: 0 24px 60px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04); }
.home-language-menu a { min-height: 38px; padding: 10px 11px; border-radius: 8px; color: #D9D2E9; font-size: 12px; line-height: 1.35; unicode-bidi: isolate; }
.home-language-menu a:hover, .home-language-menu a:focus-visible, .home-language-menu a[aria-current='page'] { color: #fff; background: rgba(255,255,255,.07); }
.nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: calc(13px * var(--locale-chrome, 1)); font-weight: 620; color: #2C1735; background: #F6EFE6; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 6px 24px rgba(246, 239, 230, .14); transition: transform .2s var(--ease), box-shadow .2s; }
.nav__cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 10px 30px rgba(246, 239, 230, .22); }
/* Desktop keeps the primary nav painted even while the disclosure attribute
   is still `hidden` (home.js has not run yet). Mobile keeps using `hidden`. */
@media (min-width: 881px) {
  .home-primary-nav[hidden] { display: contents !important; }
}

/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 12px; font-size: 14px; font-weight: 640; letter-spacing: -.01em; transition: transform .25s var(--ease), box-shadow .25s, filter .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--coral { color: #fff; background: linear-gradient(160deg, #F58367, var(--coral) 55%, var(--coral-deep)); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 34px rgba(240, 109, 79, .4); }
.btn--coral:hover { box-shadow: inset 0 1px rgba(255,255,255,.35), 0 16px 44px rgba(240, 109, 79, .5); filter: brightness(1.05); }
.btn--ghost { color: var(--star); background: rgba(255,255,255,.05); border: 1px solid var(--line-w); }
.btn--ghost:hover { background: rgba(255,255,255,.09); }
.btn--ink { color: #EDE8FF; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.btn--ink:hover { background: rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ============ HERO ============ */
.hero { position: relative; min-height: auto; padding: 48px 0 8px; overflow: hidden; background:
  radial-gradient(1100px 620px at 78% -8%, rgba(139, 92, 246, .24), transparent 62%),
  radial-gradient(900px 560px at 8% 12%, rgba(240, 109, 79, .10), transparent 60%),
  linear-gradient(180deg, #0F0A18 0%, var(--space) 46%, #0E0B16 100%); }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__waves { position: absolute; inset: -8% -6% auto; height: 78%; background: url('/home/assets/art/hero-space-waves.webp') center/cover no-repeat; opacity: .5; pointer-events: none; }
.hero__waves::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, #0E0B16 96%); pointer-events: none; }
.hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; overflow: visible; }
.hero__inner > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
.hero__spec { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A819C; }
.hero__spec span + span::before { content: "·"; margin: 0 .9em; color: #5C536F; font-weight: 400; letter-spacing: 0; }
/* Smaller than the display scale used elsewhere: the hero text has to clear the
   fold early enough for the tour player below it to show. */
.hero h1 { margin-top: 14px; max-width: 1050px; font-size: clamp(46px, 6.1vw, 92px); text-wrap: pretty; overflow: visible; line-height: 1.24; }
/* Words stay `inline` so italic ink (é, à, the lean of `s`) is not clipped to a
   word box. Transform is avoided: Chrome rasterizes transformed text to that box. */
.hero h1 .w { display: inline; overflow: visible; opacity: 0; animation: word-in .85s var(--ease) forwards; animation-delay: calc(.12s + var(--i) * .07s); }
@keyframes word-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero h1 .w.is-in { animation: none; opacity: 1; }
/* background-clip:text shears italic overflow (é, s, p). Paint full glyphs in
   coral, then overlay the gradient so clipped mask edges still show ink. */
.hero h1 .grad { display: inline-block; position: relative; max-width: 100%; overflow: visible; font-style: italic; letter-spacing: -.06em; color: var(--coral); -webkit-text-fill-color: var(--coral); clip-path: inset(-.4em 0 -.35em -.25em); }
.hero h1 .grad::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; font: inherit; letter-spacing: inherit; font-style: inherit; background: linear-gradient(96deg, var(--amber) 0%, var(--coral) 42%, var(--lilac) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; pointer-events: none; }
.hero__copy { max-width: 640px; margin-top: 20px; color: #A79EBB; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.hero__note { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #6E6584; text-transform: uppercase; }
.hero__note b { color: #A79EBB; font-weight: 500; }

/* hero tour player — sits on the fold so its top edge is visible without scrolling */
/* Entrance runs on load, not on scroll: the scroll reveals need 12% of an
   element in view, and a player that only peeks never reaches that — it would
   have sat invisible on the first screen. */
.hero__stage { width: min(100%, 1180px); margin-top: clamp(26px, 3.4vw, 40px); justify-self: center; animation: stage-in 1s var(--ease) .78s both; }
@keyframes stage-in {
  from { opacity: 0; transform: translateY(24px) scale(.965); }
  to { opacity: 1; transform: none; }
}
.hero__tour { max-width: 720px; margin-top: clamp(28px, 3.4vw, 44px); display: grid; justify-items: center; gap: 12px; }
.hero__tour .lede { color: #A79EBB; }

/* hero stats */
.hero__stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(28px, 5vw, 74px); margin-top: clamp(34px, 4vw, 54px); padding: 22px 34px; border: 1px solid var(--line-w); border-radius: 18px; background: rgba(255,255,255,.04); }
.hero__stats div { display: grid; gap: 5px; }
.hero__stats strong { font-family: var(--mono); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.04em; color: #fff; }
.hero__stats strong em { font-style: normal; color: var(--coral); }
.hero__stats span { font-size: 11px; letter-spacing: .04em; color: #7E7492; }

/* featured rail */
.featured { margin-top: 58px; width: 100%; max-width: 100%; overflow: hidden; justify-self: stretch; }
.featured p { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #5F5673; margin-bottom: 22px; }
.logo-marquee { position: relative; overflow: hidden; width: 100%; max-width: 100%; }
.logo-marquee::before, .logo-marquee::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; width: 72px; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, #0E0B16, transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, #0E0B16, transparent); }
.logo-marquee__track { display: flex; align-items: center; gap: 42px; width: max-content; max-width: none; animation: mq 38s linear infinite; animation-play-state: paused; }
.logo-marquee.is-inview .logo-marquee__track { animation-play-state: running; }
.cust { display: inline-flex; align-items: center; gap: 10px; opacity: .52; transition: opacity .3s, transform .3s var(--ease); color: #EDE8FF; white-space: nowrap; }
.cust:hover { opacity: 1; transform: translateY(-1px); }
.cust svg { width: 22px; height: 22px; flex: none; }
.cust span { font-size: 14px; font-weight: 640; letter-spacing: -.02em; }
@keyframes mq { to { transform: translateX(-50%); } }

@keyframes bob { 50% { transform: translateY(-13px); } }

/* ============ TOUR PLAYER ============ */
.hero__tour .h2 { max-width: 700px; font-size: clamp(30px, 3.4vw, 46px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.sec-head .lede { max-width: 380px; color: #A79EBB; }
.cinema { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); box-shadow: 0 70px 160px rgba(0,0,0,.65), 0 0 140px rgba(139, 92, 246, .13); background: #000; }
.cinema video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cinema::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 3, 10, .58), transparent 42%); }
.cinema__hud { position: absolute; z-index: 4; inset: 0 0 auto 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px; pointer-events: none; }
.cinema__hud .cap { display: flex; gap: 10px; flex-wrap: wrap; }
.cinema__hud .cap span { padding: 8px 14px; border-radius: 99px; background: rgba(12, 9, 18, .78); border: 1px solid rgba(255,255,255,.16); font-size: 12px; font-weight: 560; }
/* A 16:9 frame is only ~190px tall on a phone — the four step chips stack taller
   than that and spill out over the copy above. The steps are spelled out in the
   tour paragraph right below, so the overlay stands down instead. */
@media (max-width: 700px) { .cinema__hud { display: none; } }
.cinema__time { font-family: var(--mono); font-size: 11px; color: #CFC8DE; letter-spacing: .1em; }

/* ============ STORE STRIP / TRANSITION ============ */
/* ============ STORES ============ */
.stores { position: relative; padding: 22px 0 72px; background: linear-gradient(180deg, #0C0912 0%, #0D0A14 100%); }
.stores__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.stores__head h3 { font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.035em; font-weight: 720; line-height: 1.15; max-width: 620px; }
.stores__head h3 span { color: var(--violet-3); }
.stores__head .stores__hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 8px; }
.stores__hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 3px rgba(126,214,193,.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(126,214,193,0); } }

.store-stage { display: grid; grid-template-columns: 246px 1fr; gap: 16px; align-items: stretch; }
.store-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--line-w); align-self: start; }
.store-nav__btn { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 11px; padding: 10px 11px 14px; border-radius: 13px; text-align: left; color: var(--ink-soft); transition: background .25s, color .25s; overflow: hidden; }
.store-nav__btn:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.store-nav__btn.active { background: rgba(255,255,255,.085); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.store-nav__btn img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; }
.store-nav__btn b { display: block; font-size: 12.5px; font-weight: 640; letter-spacing: -.01em; }
.store-nav__btn small { display: block; font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-nav__btn .prog { position: absolute; left: 11px; right: 11px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.store-nav__btn .prog i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--coral); border-radius: 2px; }
.store-nav__btn.active .prog i { animation: prog-fill var(--dur, 4.2s) linear forwards; }
@keyframes prog-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.store-pane { position: relative; border-radius: 24px; overflow: hidden; background: radial-gradient(130% 90% at 72% -10%, rgba(139,92,246,.16), transparent 55%), #13101C; border: 1px solid var(--line-w); box-shadow: 0 40px 100px rgba(0,0,0,.45); display: grid; place-items: center; justify-items: center; padding: 30px 22px; min-height: 460px; }
.store-pane__halo { position: absolute; inset: auto -10% -30% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.22), transparent 70%); pointer-events: none; }
.spv { position: relative; width: 272px; max-width: 100%; min-width: 0; justify-self: center; margin-inline: auto; transition: opacity .22s ease, transform .35s var(--ease); }
.spv.is-switching { opacity: 0; transform: translateY(12px) scale(.98); }
.spv--wide { width: min(100%, 560px); max-width: 100%; }

/* phone frame */
.spv__phone { position: relative; border-radius: 38px; background: #08080A; padding: 9px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 3px rgba(255,255,255,.03); }
.spv__phone::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; background: #08080A; border-radius: 0 0 16px 16px; z-index: 5; }
.spv__screen { position: relative; border-radius: 30px; overflow: hidden; background: #fff; color: #111; aspect-ratio: 9/19; width: 100%; display: flex; flex-direction: column; isolation: isolate; contain: paint; }
.spv__sb { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 4px; font-size: 11px; font-weight: 600; color: #111; }
.spv__sb .sicons { display: inline-flex; gap: 5px; align-items: center; opacity: .85; }

/* browser frame */
.spv__browser { border-radius: 14px; overflow: hidden; background: #fff; color: #111; box-shadow: 0 26px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); width: 100%; max-width: 100%; min-width: 0; isolation: isolate; contain: paint; }
.spv__browser-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #EDEEF1; border-bottom: 1px solid #E2E4E8; }
.spv__browser-bar .dots { display: flex; gap: 5px; }
.spv__browser-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #D1D5DB; }
.spv__browser-bar .dots i:nth-child(1) { background: #FF5F57; }
.spv__browser-bar .dots i:nth-child(2) { background: #FEBC2E; }
.spv__browser-bar .dots i:nth-child(3) { background: #28C840; }
.spv__url { flex: 1; margin-left: 6px; padding: 5px 11px; border-radius: 7px; background: #fff; border: 1px solid #E2E4E8; font-size: 10.5px; color: #6B7280; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.spv__url::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #9AA0A6; border-right-color: transparent; }
.spv__body { height: 440px; overflow: hidden; display: flex; flex-direction: column; background: #fff; position: relative; width: 100%; max-width: 100%; min-width: 0; min-height: 0; }

/* shared listing atoms */
.spv-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 2px; font-size: 11.5px; font-weight: 600; }
.spv-app { flex: none; display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 6px 14px 8px; }
.spv-app img.icon { width: 58px; height: 58px; border-radius: 13px; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.spv-app h4 { font-size: 15px; letter-spacing: -.02em; font-weight: 720; line-height: 1.15; }
.spv-app .dev { font-size: 10.5px; margin-top: 2px; }
.spv-app .sub { font-size: 9.5px; color: #6B7280; margin-top: 1px; }
.spv-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 26px; padding: 0 13px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.spv-stats { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 14px 10px; text-align: center; }
.spv-stats b { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; }
.spv-stats span { display: block; font-size: 8px; color: #6B7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* screenshot strip — store-style peek, hard-clipped inside phone/browser.
   The track carries the 8-page set twice and slides exactly one set's width
   per loop, so the auto-scroll is seamless. Pauses on hover; stopped by
   reduced motion and when JS is disabled (see html.no-js). */
.spv-shots { position: relative; flex: none; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; padding: 4px 0 12px; }
.spv-shots__track { display: flex; gap: 8px; width: max-content; max-width: none; padding-left: 14px; padding-right: 40px; animation: slide-left var(--strip-dur, 34s) linear infinite; animation-play-state: paused; }
.store-stage.is-motion-active .spv-shots__track { animation-play-state: running; }
.spv:hover .spv-shots__track { animation-play-state: paused; }
.no-js .spv-shots__track { animation-play-state: paused; }
@keyframes slide-left { to { transform: translateX(-768px); } }
.spv-shot { position: relative; width: 88px; height: 156px; flex: none; border-radius: 13px; overflow: hidden; background: #111; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.spv-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; transform: scale(1.55); transform-origin: center 42%; }
.spv-desc { flex: none; margin-top: auto; padding: 2px 14px 18px; background: #fff; position: relative; z-index: 1; }
.spv-desc h5 { font-size: 11.5px; font-weight: 700; margin-bottom: 4px; }
.spv-desc p { font-size: 10px; line-height: 1.5; color: #5B6470; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Apple skin */
.spv[data-skin="apple"] .spv__screen { background: #F6F6F8; }
.spv[data-skin="apple"] .spv-top { color: #007AFF; }
.spv[data-skin="apple"] .dev { color: #007AFF; }
.spv[data-skin="apple"] .spv-cta { background: #007AFF; color: #fff; }
.spv[data-skin="apple"] .spv-stats { border-top: 1px solid rgba(0,0,0,.07); border-bottom: 1px solid rgba(0,0,0,.07); padding-block: 9px; margin-inline: 14px; padding-inline: 0; margin-bottom: 8px; }
.spv[data-skin="apple"] .spv-stats span { color: #6B7280; }
.spv[data-skin="apple"] .spv-stats .stars { color: #FF9F0A; letter-spacing: 1px; }

/* Google Play skin */
.spv[data-skin="google"] .spv__screen { background: #fff; }
.spv[data-skin="google"] .spv-top { color: #5F6368; }
.spv[data-skin="google"] .dev { color: #01875F; font-weight: 600; }
.spv[data-skin="google"] .spv-app { grid-template-columns: 56px 1fr; }
.spv[data-skin="google"] .spv-stats { grid-template-columns: repeat(4, 1fr); }
.spv[data-skin="google"] .spv-cta-row { flex: none; padding: 0 14px 10px; display: grid; gap: 8px; }
.spv[data-skin="google"] .spv-cta { width: 100%; height: 34px; border-radius: 9px; background: #01875F; color: #fff; font-size: 13px; }
.spv[data-skin="google"] .spv-actions { display: flex; gap: 16px; justify-content: center; color: #01875F; font-size: 11px; font-weight: 600; }
.spv[data-skin="google"] .feature-banner { flex: none; margin: 0 14px 8px; height: 64px; border-radius: 10px; background: linear-gradient(120deg, #5B8CFF, #7C5CFF 50%, #3ED6C4); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: -.02em; box-shadow: 0 8px 20px rgba(91,140,255,.28); }

/* App Store Connect / Play Console */
.spv[data-skin="asc"] .spv__body, .spv[data-skin="playconsole"] .spv__body { background: #F5F5F7; }
.spv-console { display: grid; grid-template-columns: 132px 1fr; flex: 1; min-height: 0; }
.spv-console__side { background: #1D1D1F; color: #fff; padding: 14px 10px; font-size: 10px; }
.spv-console__side .brand { font-weight: 700; font-size: 11px; margin-bottom: 14px; letter-spacing: -.01em; }
.spv-console__side .nav-item { padding: 7px 9px; border-radius: 7px; color: rgba(255,255,255,.62); margin-bottom: 2px; }
.spv-console__side .nav-item.active { background: rgba(255,255,255,.1); color: #fff; }
.spv-console__main { padding: 14px; overflow: hidden; }
.spv-console__main .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.spv-console__main .bar h4 { font-size: 14px; font-weight: 700; }
.spv-console__main .status { padding: 4px 9px; border-radius: 99px; background: #D1FAE5; color: #065F46; font-size: 9px; font-weight: 700; white-space: nowrap; flex: none; }
.spv-console__card { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; padding: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.spv-console__card .row { display: flex; gap: 11px; align-items: center; margin-bottom: 11px; }
.spv-console__card .row img { width: 42px; height: 42px; border-radius: 10px; }
.spv-console__shots { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
/* 8 console shots × (64 + 8 gap) = one set of 576px per loop. */
.spv-console__shots .spv-shots__track { padding-left: 0; padding-right: 24px; --strip-dur: 30s; animation-name: slide-left-sm; }
@keyframes slide-left-sm { to { transform: translateX(-576px); } }
.spv-console__shots .spv-shot { width: 64px; height: 120px; border-radius: 9px; box-shadow: none; border: 1px solid #E5E7EB; background: #F3F4F6; }
.spv-console__shots .spv-shot img { transform: scale(1.5); transform-origin: center 42%; }
.spv-console__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.spv-console__meta div { padding: 9px; border-radius: 9px; background: #F9FAFB; border: 1px solid #EEF2F7; }
.spv-console__meta b { display: block; font-size: 9.5px; color: #6B7280; font-weight: 500; }
.spv-console__meta span { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }
.spv[data-skin="playconsole"] .spv-console__side { background: #202124; }
.spv[data-skin="playconsole"] .spv-console__side .nav-item.active { background: #E8F0FE; color: #1967D2; }
.spv[data-skin="playconsole"] .status { background: #E6F4EA; color: #137333; }

/* Microsoft Store */
.spv[data-skin="microsoft"] .spv__body { background: #F9F9F9; }
.spv[data-skin="microsoft"] .ms-hero { flex: none; height: 110px; background: linear-gradient(120deg, #5B8CFF, #7C5CFF 55%, #3ED6C4); display: flex; align-items: end; padding: 14px; color: #fff; }
.spv[data-skin="microsoft"] .ms-hero img { width: 48px; height: 48px; border-radius: 10px; margin-right: 11px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.spv[data-skin="microsoft"] .ms-hero h4 { font-size: 17px; font-weight: 700; }
.spv[data-skin="microsoft"] .ms-hero p { font-size: 10.5px; opacity: .92; }
.spv[data-skin="microsoft"] .spv-cta { background: #0067C0; color: #fff; border-radius: 4px; height: 30px; min-width: 92px; }
.spv[data-skin="microsoft"] .spv-app { padding-top: 12px; }

/* Chrome Web Store */
.spv[data-skin="chrome"] .spv__body { background: #fff; }
.spv[data-skin="chrome"] .cws-head { flex: none; display: flex; gap: 12px; padding: 16px 16px 10px; align-items: start; min-width: 0; }
.spv[data-skin="chrome"] .cws-head > div { min-width: 0; flex: 1; }
.spv[data-skin="chrome"] .cws-head img { width: 52px; height: 52px; border-radius: 13px; flex: none; }
.spv[data-skin="chrome"] .spv-cta { background: #1A73E8; color: #fff; border-radius: 6px; height: 30px; min-width: 110px; font-size: 11.5px; flex: none; }
.spv[data-skin="chrome"] .spv-shot { width: 150px; height: 94px; border-radius: 8px; }
.spv[data-skin="chrome"] .spv-shot img { object-position: center 40%; transform: scale(1.25); transform-origin: center 40%; }
/* Chrome shots: 8 × (150 + 8 gap) = one set of 1264px per loop. */
.spv[data-skin="chrome"] .spv-shots__track { animation-name: slide-left-cws; --strip-dur: 44s; }
@keyframes slide-left-cws { to { transform: translateX(-1264px); } }

/* Amazon */
.spv[data-skin="amazon"] .spv__screen { background: #fff; }
.spv[data-skin="amazon"] .spv-top { background: #232F3E; color: #fff; padding-block: 10px; }
.spv[data-skin="amazon"] .dev { color: #007185; }
.spv[data-skin="amazon"] .spv-cta { background: #FFD814; color: #111; border-radius: 20px; box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.spv[data-skin="amazon"] .spv-stats { background: #F7F7F7; margin: 0 0 8px; padding: 10px 14px; }

/* Huawei */
.spv[data-skin="huawei"] .spv__screen { background: #fff; }
.spv[data-skin="huawei"] .spv-top { color: #CF0A2C; }
.spv[data-skin="huawei"] .dev { color: #CF0A2C; }
.spv[data-skin="huawei"] .spv-cta { background: #CF0A2C; color: #fff; border-radius: 20px; }
.spv[data-skin="huawei"] .spv-app { grid-template-columns: 56px 1fr; }
.spv[data-skin="huawei"] .spv-cta-row { flex: none; padding: 0 14px 10px; }
.spv[data-skin="huawei"] .spv-cta { width: 100%; height: 34px; }

/* ============ LIGHT SECTIONS SHARED ============ */
.light { background: var(--paper); color: var(--ink); }
.light .eyebrow { color: var(--coral); }
.light .lede { color: var(--ink-soft); }
.sec { padding: clamp(90px, 10vw, 150px) 0; position: relative; }
#top, #product, #templates, #workflow, #features, #upload, #pricing, #faq {
  scroll-margin-top: 88px;
}
.sec-head--light { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head--light .lede { max-width: 400px; justify-self: end; }

/* ============ WORKFLOW — LOOKS ============ */
.workflow { background: linear-gradient(180deg, #0D0A14 0%, #100C19 100%); overflow: hidden; }
.looks__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.looks-stage { position: relative; }
.looks-stage::before { content: ''; position: absolute; inset: -8% -4%; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .28), transparent 62%); pointer-events: none; }
.looks-frame { position: relative; width: min(330px, 64%); margin-inline: auto; display: grid; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: #0A0812; overflow: hidden; box-shadow: 0 46px 110px rgba(0, 0, 0, .55); }
/* every look is one stacked frame; JS cross-fades the active one in place */
.looks-frame img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; }
.looks-frame img:not(.is-active) { visibility: hidden; }
.looks-frame img.is-active { opacity: 1; visibility: visible; }
.looks-frame.is-swapping img { opacity: 0; }
.looks-name { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-w); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.looks-name i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(240, 109, 79, .18); }
.looks-side { display: grid; align-content: center; gap: 24px; }
.looks-side__hint { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); max-width: 500px; }
.looks-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.look-chip { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-w); text-align: left; color: var(--ink-soft); transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease); min-width: 0; }
.look-chip > span:last-child { min-width: 0; flex: 1; }
.look-chip b { display: block; font-size: 13px; font-weight: 620; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-chip small { display: block; font-size: 10.5px; font-weight: 450; color: var(--ink-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-chip__swatch { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 0 8px rgba(0, 0, 0, .25); }
.look-chip:hover { background: rgba(255, 255, 255, .07); color: var(--ink); transform: translateY(-1px); }
.look-chip.active { background: rgba(240, 109, 79, .12); border-color: rgba(240, 109, 79, .55); color: #fff; }

/* ============ TEMPLATES ============ */
.templates {
  background: linear-gradient(180deg, #0C0912 0%, #12101c 42%, #0C0912 100%);
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(72px, 8vw, 120px);
  color: var(--ink);
}
.templates .eyebrow { color: var(--coral); }
.templates .lede { color: var(--ink-soft); }
.templates .stat-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.stat-pill { padding: 9px 16px; border-radius: 99px; background: transparent; border: 1px solid rgba(255, 255, 255, .16); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-soft); }
.stat-pill b { color: var(--ink); font-weight: 600; }
.t-gallery { position: relative; }
.t-marquee { position: relative; overflow: hidden; padding: 6px 0; }
.t-marquee::before, .t-marquee::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; width: 56px; pointer-events: none; }
.t-marquee::before { left: 0; background: linear-gradient(90deg, #0C0912, transparent); }
.t-marquee::after { right: 0; background: linear-gradient(270deg, #0C0912, transparent); }
.t-marquee + .t-marquee { margin-top: 18px; }
.t-marquee__track { display: flex; gap: 18px; width: max-content; animation: mq var(--speed, 60s) linear infinite; animation-play-state: paused; }
.t-gallery.is-inview .t-marquee__track { animation-play-state: running; }
.t-marquee--rev .t-marquee__track { animation-direction: reverse; }
.t-card { position: relative; width: 218px; flex: none; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 44px rgba(0, 0, 0, .35); transition: transform .4s var(--ease), box-shadow .4s; }
.t-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); z-index: 2; }
.t-card img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 695; object-fit: cover; object-position: center center; }
.templates__cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 54px; flex-wrap: wrap; }
.templates__cta .link { font-size: 14px; font-weight: 620; color: var(--ink); border-bottom: 2px solid var(--coral); padding-bottom: 2px; transition: color .2s; }
.templates__cta .link:hover { color: var(--coral); }

/* ============ DEVICES ============ */
.devices {
  overflow: hidden;
  background:
    radial-gradient(980px 520px at 50% 78%, rgba(240, 109, 79, .14), transparent 58%),
    radial-gradient(640px 420px at 8% 36%, rgba(139, 92, 246, .1), transparent 62%),
    var(--paper);
}
.devices__intro { max-width: 780px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.devices__intro .lede { margin-top: 18px; }
.devices__stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  padding: 8px 0 12px;
}
.shot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .48);
}
.shot--iphone { width: min(22%, 300px); }
.shot--android { width: min(24%, 320px); }
.shot--ipad { width: min(38%, 520px); }
.hw__cap { text-align: center; }
.hw__cap b { display: block; font-size: 14px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.hw__cap span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
.devices__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.devices__facts li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  list-style: none;
  min-height: 100%;
  padding: 18px 18px 18px 16px;
  border: 1px solid var(--line-w);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.devices__facts li b { color: var(--ink); font-weight: 640; }
.devices__facts li::before {
  content: '✓';
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  background: rgba(126, 214, 193, .16);
  color: var(--foam);
  font-size: 12px;
  font-weight: 700;
}
.devices__cta { display: flex; justify-content: center; margin-top: 28px; }
@media (hover: hover) and (pointer: fine) {
  .devices__stage:has(.shot:hover) .shot { filter: brightness(.78) saturate(.9); }
  .devices__stage .shot:hover,
  .shot:focus-within {
    z-index: 4;
    filter: none;
    transform: translateY(-10px) scale(1.03);
  }
}

/* ============ LOCALES ============ */
.locales { background: linear-gradient(180deg, #100C19 0%, #0D0A14 100%); color: var(--ink); overflow: hidden; }
.locales .eyebrow { color: var(--lilac); }
.locales .lede { color: rgba(237, 232, 255, .66); }
.locales__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }

/* ---- Localization deck (matching demo posters or truthful placeholders) ---- */
.loc-stage { position: relative; height: 710px; }
.loc-stage::before { content: ''; position: absolute; inset: 4% 8% 6%; background: radial-gradient(60% 60% at 50% 45%, rgba(139,92,246,.32), transparent 72%); pointer-events: none; }
.loc-card {
  position: absolute; left: 50%; top: 46.5%;
  width: min(310px, 72%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #132C46;
  transition: transform .7s cubic-bezier(.22,.9,.24,1), opacity .55s ease, box-shadow .7s ease;
  box-shadow: 0 40px 70px rgba(0,0,0,.55);
  will-change: transform, opacity;
}
.loc-card img { display: block; width: 100%; height: auto; }
.loc-card__placeholder { aspect-ratio: 1290 / 2796; display: grid; place-content: center; gap: 12px; padding: 42px; text-align: center; background: linear-gradient(160deg, #1D1630, #111827); color: #ECE6FF; }
.loc-card__placeholder strong { font: 650 16px/1.3 var(--sans); }
.loc-card__placeholder span { color: rgba(237,232,255,.68); font-size: 12px; line-height: 1.55; }
.loc-card .cc {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(9,6,16,.86); border: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #ECE6FF;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.loc-card .cc i { width: 6px; height: 6px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 3px rgba(126,214,193,.2); }
.loc-card[data-pos="0"] { z-index: 5; transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; box-shadow: 0 40px 70px rgba(0,0,0,.55); }
.loc-card[data-pos="1"] { z-index: 4; cursor: pointer; transform: translate(-50%,-50%) translateX(128px) translateY(24px) rotate(8deg) scale(.9); opacity: .92; box-shadow: 0 28px 48px rgba(0,0,0,.42); }
.loc-card[data-pos="2"] { z-index: 3; cursor: pointer; transform: translate(-50%,-50%) translateX(-128px) translateY(24px) rotate(-8deg) scale(.9); opacity: .92; box-shadow: 0 28px 48px rgba(0,0,0,.42); }
.loc-card[data-pos="3"] { z-index: 1; transform: translate(-50%,-50%) translateY(-56px) scale(.78); opacity: 0; pointer-events: none; }
.loc-card[data-pos="-1"] { z-index: 6; transform: translate(-50%,-50%) translateY(88px) scale(1.04); opacity: 0; pointer-events: none; }
.loc-card[data-pos="4"] { z-index: 2; transform: translate(-50%,-50%) translateX(210px) translateY(40px) rotate(12deg) scale(.8); opacity: 0; pointer-events: none; }
.loc-card[data-pos="5"] { z-index: 2; transform: translate(-50%,-50%) translateX(-210px) translateY(40px) rotate(-12deg) scale(.8); opacity: 0; pointer-events: none; }
.loc-dots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.loc-dots button { width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); padding: 0; transition: background .3s, width .3s var(--ease); }
.loc-dots button.active { width: 40px; background: var(--foam); }
.lang-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.lang-chip {
  padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(237, 232, 255, .18);
  font-size: 12px; font-weight: 540; color: rgba(237, 232, 255, .85);
  background: transparent; cursor: pointer;
  transition: background .3s, transform .3s var(--ease), border-color .3s, color .3s, box-shadow .3s;
}
.lang-chip:hover { background: rgba(237, 232, 255, .09); transform: translateY(-2px); }
.lang-chip.is-active {
  border-color: var(--foam); color: var(--foam);
  background: rgba(126,214,193,.1);
  box-shadow: 0 0 0 4px rgba(126,214,193,.08);
  transform: translateY(-2px);
}
.lang-chip--more { background: var(--coral); border-color: transparent; color: #fff; font-weight: 640; cursor: default; }
.lang-chip--more:hover { background: var(--coral); transform: none; }

/* ============ FEATURES ============ */
.features { background: var(--paper); }
.f-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* The card count is not a multiple of the column count, so the last row can
   hold a single card hanging off the left edge — a rendering fault in the one
   section whose argument is that the set is complete. Centre it instead. */
.f-grid > .f-card:last-child:nth-child(3n + 1) { grid-column: 2; }
.f-card { position: relative; padding: 30px 28px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-w); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.f-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border-color: rgba(240, 109, 79, .45); }
.f-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--coral), var(--amber)); opacity: 0; transition: opacity .35s; }
.f-card:hover::before { opacity: 1; }
.f-card .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px; font-size: 19px; background: var(--tint, rgba(240, 109, 79, .12)); color: var(--tint-c, var(--coral-deep)); font-weight: 700; }
.f-card h3 { font-size: 18.5px; letter-spacing: -.02em; font-weight: 660; margin-bottom: 9px; }
.f-card p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; }
.f-card ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.f-card ul li { padding: 5px 11px; border-radius: 99px; background: rgba(255, 255, 255, .06); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-soft); }

/* ============ UPLOAD / ASO ============ */
.upload { background: var(--paper-2); }
.upload__card { display: grid; grid-template-columns: 1.05fr .95fr; border-radius: 28px; overflow: hidden; background: linear-gradient(120deg, #181129 0%, #131022 60%, #100D1C 100%); color: var(--star); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 60px 130px rgba(0, 0, 0, .5); }
.upload__copy { padding: clamp(36px, 4.5vw, 64px); display: grid; align-content: center; }
.upload__copy .eyebrow { color: var(--foam); }
.upload__copy .lede { color: #A79EBB; margin-top: 18px; }
.upload__flows { display: grid; gap: 12px; margin-top: 34px; }
.flow { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 15px; background: rgba(255,255,255,.05); border: 1px solid var(--line-w); transition: transform .3s var(--ease), background .3s; }
.flow:hover { transform: translateX(6px); background: rgba(255,255,255,.08); }
.flow img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.flow div b { display: block; font-size: 14px; font-weight: 620; }
.flow div span { font-size: 12px; color: #8D83A5; }
.flow .mono-tag { margin-left: auto; color: var(--foam); }
/* Three real exported posters, fanned.
   The shared `bob` keyframe animates `transform`, which would wipe out each
   card's own rotate + centring transform mid-animation — that is what threw
   the middle poster off-centre. These float on the independent `translate`
   property instead, so the rotation and the -50% centring always hold. */
.upload__visual { position: relative; min-height: 620px; display: grid; place-items: center; padding: 26px 0; background: radial-gradient(90% 90% at 60% 30%, rgba(139, 92, 246, .22), transparent 65%); }
.upload__fan { position: relative; width: min(100%, 540px); height: min(560px, 74vw); }
.upload__visual .u1, .upload__visual .u2, .upload__visual .u3 { position: absolute; top: 50%; border-radius: 20px; box-shadow: 0 34px 80px rgba(0,0,0,.5); overflow: hidden; translate: 0 -50%; animation: float-card 9s ease-in-out infinite; animation-play-state: paused; }
.upload__visual .u1 { width: 42%; left: 0; transform: rotate(-7deg); }
.upload__visual .u2 { width: 42%; right: 0; transform: rotate(6deg); animation-delay: -3s; }
.upload__visual .u3 { width: 46%; left: 27%; z-index: 2; transform: rotate(-1deg); animation-delay: -5.5s; }
.upload__visual.is-inview .u1, .upload__visual.is-inview .u2, .upload__visual.is-inview .u3 { animation-play-state: running; }
.upload__visual img { display: block; width: 100%; height: auto; }
/* Deliberately small — 6px, not 13px. The old amplitude read as restless. */
@keyframes float-card { 50% { translate: 0 calc(-50% - 6px); } }
@media (prefers-reduced-motion: reduce) { .upload__visual .u1, .upload__visual .u2, .upload__visual .u3 { animation: none; } }

/* ============ TESTIMONIALS ============ */
.quotes { background: var(--paper); }
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.q-card { display: grid; gap: 22px; align-content: space-between; padding: 32px 30px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-w); transition: transform .35s var(--ease), box-shadow .35s; }
.q-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.q-card .stars { color: var(--amber); letter-spacing: 3px; font-size: 14px; }
.q-card blockquote { font-size: 16.5px; line-height: 1.6; letter-spacing: -.01em; color: var(--ink); font-weight: 520; }
.q-card blockquote em { color: var(--amber); font-style: normal; }
.q-card footer { display: flex; align-items: center; gap: 13px; }
.q-card footer img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.14); }
.q-card footer b { display: block; font-size: 14px; letter-spacing: -.01em; }
.q-card footer span { font-size: 12px; color: var(--ink-faint); }

/* ============ PRICING ============ */
.pricing { background: var(--paper-2); }
.pricing .sec-head--light { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.period-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 30px; padding: 5px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-w); }
.period-toggle button { padding: 9px 20px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: background .3s, color .3s, box-shadow .3s; }
.period-toggle button.active { background: var(--star); color: #241433; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.period-toggle .save { margin-left: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(126, 214, 193, .16); color: var(--foam); font-family: var(--mono); font-size: 10px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; padding-top: 16px; }
.tier { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0; padding: 34px 30px 30px; border-radius: 24px; background: var(--card); border: 1px solid var(--line-w); overflow: visible; transition: transform .35s var(--ease), box-shadow .35s; }
.tier:hover { transform: translateY(-6px); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }
.tier--pro { z-index: 1; background: linear-gradient(155deg, #211741 0%, #1B1530 100%); color: var(--star); border-color: rgba(240, 109, 79, .45); box-shadow: 0 46px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(240, 109, 79, .18), 0 20px 60px rgba(139, 92, 246, .14); }
.tier__flag { position: absolute; z-index: 2; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 99px; background: linear-gradient(120deg, var(--coral), var(--amber)); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 24px rgba(240, 109, 79, .4); }
.tier h3 { font-size: 15px; font-weight: 660; letter-spacing: .02em; text-transform: uppercase; font-family: var(--mono); color: var(--ink-faint); }
.tier--pro h3 { color: var(--lilac); }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.tier__price b { font-size: clamp(40px, 3.6vw, 52px); letter-spacing: -.05em; font-weight: 720; transition: opacity .25s, transform .25s var(--ease); }
.tier__price b.swap { opacity: 0; transform: translateY(8px); }
.tier__price span { font-size: 13px; color: var(--ink-faint); }
.tier--pro .tier__price span { color: rgba(237, 232, 255, .55); }
.tier__desc { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); min-height: 44px; }
.tier--pro .tier__desc { color: rgba(237, 232, 255, .66); }
.tier__bill { margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint); }
.tier--pro .tier__bill { color: rgba(237, 232, 255, .45); }
.tier ul { display: grid; gap: 11px; margin: 26px 0 30px; list-style: none; }
.tier ul li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.tier--pro ul li { color: rgba(237, 232, 255, .8); }
.tier ul li::before { content: '✓'; flex: none; font-weight: 700; font-size: 12px; color: var(--coral); margin-top: 1px; }
.tier--pro ul li::before { color: var(--foam); }
.tier ul li b { color: var(--ink); font-weight: 620; }
.tier--pro ul li b { color: #fff; }
.tier .btn { width: 100%; }
.tier button.btn:disabled { cursor: not-allowed; opacity: .72; transform: none; filter: none; }
.tier button.btn.is-loading:disabled { cursor: wait; }
.pricing__checkout-status { max-width: 520px; margin: 20px auto 0; padding: 11px 14px; border: 1px solid var(--line-w); border-radius: 12px; color: var(--ink-soft); background: rgba(255,255,255,.04); text-align: center; font-size: 13px; line-height: 1.45; }
.pricing__checkout-status.is-error { border-color: rgba(240,109,79,.45); color: var(--ink); background: rgba(240,109,79,.08); }
.pricing__note { margin-top: 30px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
.pricing__note b { color: var(--ink-soft); }
/* Prices must never sit at opacity 0 if the reveal observer misses a card. */
.pricing .rv { opacity: 1; transform: none; }

/* ============ FAQ ============ */
.faq { background: var(--paper); }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.faq__list { display: grid; }
.faq-item { border-top: 1px solid var(--line-w); }
.faq-item:last-child { border-bottom: 1px solid var(--line-w); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 44px; padding: 24px 4px; text-align: left; font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); cursor: pointer; list-style: none; transition: color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--coral); }
.faq-item .x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-w); font-size: 15px; font-weight: 400; transition: transform .4s var(--ease), background .3s, color .3s; }
.faq-item[open] .x { transform: rotate(45deg); background: var(--star); color: #241433; border-color: var(--star); }
.faq-item .a p { padding: 0 44px 26px 4px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); max-width: 560px; }

/* ============ FINAL CTA ============ */
.finale { position: relative; padding: clamp(100px, 13vw, 190px) 0; overflow: hidden; text-align: center; background:
  radial-gradient(900px 500px at 50% 118%, rgba(139, 92, 246, .35), transparent 65%),
  linear-gradient(180deg, var(--paper) 0%, #131023 12%, var(--space) 45%); }
.finale__bfly { position: absolute; left: 50%; bottom: -14%; width: min(880px, 92vw); transform: translateX(-50%); opacity: .5; pointer-events: none; animation: bfly 12s ease-in-out infinite; animation-play-state: paused; }
.finale.is-inview .finale__bfly { animation-play-state: running; }
@keyframes bfly { 50% { transform: translateX(-50%) translateY(-16px); } }
.finale__inner { position: relative; z-index: 2; display: grid; justify-items: center; }
.finale .h-display { max-width: 900px; overflow: visible; line-height: 1.22; }
.finale .h-display span { display: inline; }
.finale .lede { max-width: 520px; margin-top: 24px; color: #A79EBB; }
.finale__ctas { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.finale__note { margin-top: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6E6584; }

/* ============ FOOTER ============ */
.footer { background: var(--space); border-top: 1px solid var(--line-w); padding: 70px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.footer__brand p { margin-top: 16px; max-width: 260px; font-size: 13px; line-height: 1.65; color: #7E7492; }
.footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6E6584; margin-bottom: 18px; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: 12px; }
.footer ul a { font-size: 13.5px; color: #B9B2C9; transition: color .2s; }
.footer ul a:hover { color: #fff; }
.footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line-w); font-size: 12px; color: #5F5673; flex-wrap: wrap; }
.footer__bar .mono-tag { color: #6E6584; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .f-grid, .q-grid { grid-template-columns: repeat(2, 1fr); }
  .f-grid > .f-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .tier--pro { order: -1; }
  .stores__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .store-stage { grid-template-columns: 240px 1fr; }
  .spv__screen { height: 580px; }
  .spv-console { grid-template-columns: 130px 1fr; }
  .upload__card { grid-template-columns: 1fr; }
  .upload__visual { min-height: 420px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .nav__inner { position: relative; }
  .nav__menu { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 74px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-w); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.045); font-size: 12px; font-weight: 650; letter-spacing: .01em; }
  .nav__menu-icon { display: grid; gap: 4px; width: 14px; }
  .nav__menu-icon i { display: block; width: 14px; height: 1px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease); }
  .nav__menu[aria-expanded="true"] .nav__menu-icon i:first-child { transform: translateY(2.5px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] .nav__menu-icon i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
  .nav.is-menu-open { background: rgba(12, 9, 18, .96); border-bottom-color: var(--line-w); }
  .home-primary-nav { position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; display: grid; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(21, 16, 33, .98); box-shadow: 0 24px 60px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04); }
  .nav__links { display: grid; gap: 0; }
  .nav__links a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #D9D2E9; }
  .nav__links a::after { display: none; }
  .nav__links a:hover { color: #fff; background: rgba(255,255,255,.055); }
  .nav__actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .home-language summary { min-height: 44px; }
  .home-language-menu { inset-block-start: auto; inset-block-end: calc(100% + 9px); inset-inline: 0 auto; }
  .home-primary-nav .nav__cta { min-height: 44px; justify-content: center; }
  .looks__grid, .locales__grid, .faq__grid, .sec-head--light { grid-template-columns: 1fr; }
  .devices__facts { grid-template-columns: 1fr; }
  .sec-head--light .lede { justify-self: start; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .t-card { width: 196px; }
  .looks-stage { margin-bottom: 40px; }
  .devices__intro { margin-bottom: 28px; }
  .devices__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: start;
    gap: 20px 12px;
    padding-top: 8px;
  }
  .shot--iphone,
  .shot--android {
    width: min(100%, 200px);
  }
  .shot--ipad { grid-column: 1 / -1; width: min(86%, 340px); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .loc-stage { height: 660px; }
  .loc-card { width: min(280px, 64%); }
}
@media (max-width: 620px) {
  .loc-stage { height: 590px; }
  .loc-card { width: min(250px, 66%); }
  .loc-card[data-pos="1"] { transform: translate(-50%,-50%) translateX(78px) translateY(22px) rotate(7deg) scale(.88); }
  .loc-card[data-pos="2"] { transform: translate(-50%,-50%) translateX(-78px) translateY(22px) rotate(-7deg) scale(.88); }
}
@media (max-width: 620px) {
  .templates .stat-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .templates__cta { margin-top: 28px; }
  .h-display { font-size: clamp(40px, 11.5vw, 56px); }
  .hero h1 { font-size: clamp(32px, 8.6vw, 44px); }
  .f-grid, .q-grid { grid-template-columns: 1fr; }
  /* One column: every card is already alone in its row, so the centring rules
     above must not survive here. Selectors match theirs so the reset wins. */
  .f-grid > .f-card:last-child:nth-child(3n + 1),
  .f-grid > .f-card:last-child:nth-child(2n + 1) { grid-column: auto; justify-self: stretch; width: auto; }
  .store-stage { grid-template-columns: 1fr; }
  .store-nav { display: grid; grid-template-columns: repeat(2, 1fr); max-height: none; }
  .store-nav__btn { grid-template-columns: 34px 1fr; }
  .store-nav__btn .dot { display: none; }
  .store-nav__btn img { width: 34px; height: 34px; }
  .spv, .spv--wide { width: min(100%, 360px); }
  .spv__screen { height: 560px; }
  .spv__body { height: 480px; }
  .devices__stage { gap: 16px 8px; }
  .shot--iphone,
  .shot--android {
    width: min(100%, 180px);
  }
  .shot--ipad { width: min(92%, 340px); }
  .hw__cap b { font-size: 13px; }
  .hw__cap span { font-size: 10px; }
  .hero { padding-top: 104px; }
  .footer__grid { grid-template-columns: 1fr; }
  .announce span.long { display: none; }
  .cinema__hud { padding: 12px; }
  .cinema__hud .cap span { padding: 6px 10px; font-size: 11px; }
  .cinema__time { display: none; }
}

/* ============ SUPPORT ============ */
.support { position: fixed; right: 22px; bottom: 22px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.support-launcher { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #fff; background: linear-gradient(160deg, #F58367, var(--coral) 55%, var(--coral-deep)); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 14px 38px rgba(240, 109, 79, .4); transition: transform .25s var(--ease), box-shadow .25s, filter .2s; }
.support-launcher:hover { transform: translateY(-2px); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 18px 46px rgba(240, 109, 79, .5); filter: brightness(1.05); }
.support-launcher:focus-visible, .support-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.support-launcher svg { width: 26px; height: 26px; }
.support-launcher[aria-expanded="true"] svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.support-launcher[aria-expanded="true"] svg circle { display: none; }
.support-panel { display: none; width: min(320px, calc(100vw - 44px)); padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-w); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.support-panel.is-open { display: block; animation: support-pop .35s var(--ease); }
@keyframes support-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.support-panel__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); margin-bottom: 7px; }
.support-panel__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.support-panel__sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.support-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-w); background: rgba(255,255,255,.04); font-size: 14px; font-weight: 620; color: var(--ink); transition: border-color .2s, background .2s; }
.support-link:hover { border-color: var(--coral); background: rgba(240, 109, 79, .09); }
.support-link .arr { color: var(--coral); font-weight: 600; transition: transform .25s var(--ease); }
.support-link:hover .arr { transform: translateX(3px); }

/* ============ ANALYTICS CONSENT ============ */
.analytics-consent {
  position: fixed;
  z-index: 70;
  inset-inline-start: 20px;
  inset-inline-end: auto;
  bottom: 20px;
  width: min(392px, calc(100vw - 40px));
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(196, 181, 253, .24);
  border-radius: 16px;
  color: #f4f4f5;
  background: rgba(24, 20, 34, .97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}
.analytics-consent strong { font-size: 15px; }
.analytics-consent p { margin: 6px 0 0; color: #c4c4cc; font-size: 13px; line-height: 1.45; }
.analytics-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.analytics-consent button {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(196, 181, 253, .28);
  border-radius: 10px;
  color: #f4f4f5;
  background: #34303d;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.analytics-consent button:last-of-type { border-color: #7c3aed; background: #6d28d9; }
.analytics-consent a { grid-column: 1 / -1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; color: #c4b5fd; font-size: 13px; }
.analytics-consent button:focus-visible,
.analytics-consent a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 700px) {
  body:has(.analytics-consent) .support { display: none; }
  .analytics-consent {
    inset-inline: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* ============ SCROLL / PAINT BUDGET ============ */
/* Intrinsic sizes track measured section heights so content-visibility does
   not reserve a stub and then jump the page when the block paints. The video
   now lives in the hero, so there is no .video-sec to reserve. */
.stores, .sec, .finale, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}
.templates, .devices { contain-intrinsic-size: auto 1700px; }
.workflow { contain-intrinsic-size: auto 1300px; }
.pricing {
  /* Hash target + overlapping "Most popular" flag. Paint/size containment
     clips the badge and makes #pricing land on the wrong scroll offset. */
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.stores, .quotes, .faq, .finale, .footer { contain-intrinsic-size: auto 920px; }
#stars { contain: paint; }
.t-card, .f-card, .q-card, .cinema { contain: paint; }
/* .tier must paint the overlapping "Most popular" flag; contain:paint clips it. */
.tier { contain: none; }

html.is-scrolling .spv-shots__track,
html.is-scrolling .u1,
html.is-scrolling .u2,
html.is-scrolling .u3,
html.is-scrolling .finale__bfly {
  animation-play-state: paused !important;
}

html.home-lite .logo-marquee__track,
html.home-lite .t-marquee__track,
html.home-lite .spv-shots__track,
html.home-lite .u1,
html.home-lite .u2,
html.home-lite .u3,
html.home-lite .finale__bfly,
html.home-lite .stores__hint i {
  animation: none !important;
}
html.home-lite .shot { transform: none; }
html.home-lite .devices__stage:has(.shot:hover) .shot { filter: none; }
html.home-lite .loc-card { transition: none; will-change: auto; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .t-marquee__track, .logo-marquee__track, .spv-shots__track { animation: none; }
}

/* The proof cards no longer carry a person's avatar, so the eyebrow slot holds
   a short fact label instead of a star rating. */
.q-card .stars { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

html[lang="de"] { --locale-chrome: .86; }
html[lang="es"] { --locale-chrome: .88; }
html[lang="fr"],
html[lang="pt-BR"] { --locale-chrome: .90; }
html[lang="ja"] .h-display,
html[lang="ja"] .h2,
html[lang="ja"] h3 { line-break: strict; }
html[lang="ko"] .h-display,
html[lang="ko"] .h2,
html[lang="ko"] h3 { word-break: keep-all; }
html[lang="ja"] { --font: Geist, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', ui-sans-serif, sans-serif; }
html[lang="ko"] { --font: Geist, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR', 'Malgun Gothic', 'WenQuanYi Micro Hei', ui-sans-serif, sans-serif; }
html[lang="zh-Hans"] { --font: Geist, 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Droid Sans Fallback', ui-sans-serif, sans-serif; }
html[lang="ar"] { --font: Geist, 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Tahoma', ui-sans-serif, sans-serif; }

html[dir="rtl"] .look-chip,
html[dir="rtl"] .faq-item summary,
html[dir="rtl"] .store-nav__btn { text-align: right; }
html[dir="rtl"] .faq-item .a p { padding: 0 4px 26px 44px; }
html[dir="rtl"] .flow .mono-tag { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .flow:hover { transform: translateX(-6px); }
html[dir="rtl"] .btn:hover .arr,
html[dir="rtl"] .support-link:hover .arr { transform: translateX(-3px); }
html[dir="rtl"] .store-nav__btn .prog i { transform-origin: right; }
html[dir="rtl"] .skip-link { left: auto; right: 12px; }
html[dir="rtl"] .support { right: auto; left: 22px; align-items: flex-start; }
html[dir="rtl"] .nav__links a::after { left: auto; right: 0; }
html[dir="rtl"] .spv__url { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .period-toggle .save { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .loc-card[data-pos="1"] { transform: translate(-50%,-50%) translateX(-128px) translateY(24px) rotate(-8deg) scale(.9); }
html[dir="rtl"] .loc-card[data-pos="2"] { transform: translate(-50%,-50%) translateX(128px) translateY(24px) rotate(8deg) scale(.9); }