/* Type scale: every px in this file is expressed in rem. Desktop (≥1024px) runs at 75 % — Slava signed off the
   site at browser zoom 75 %; phones and tablets keep the full size. */
html { font-size: 16px; }
@media (min-width: 1024px) { html { font-size: 12px; } }

/* PlusU Loyalty — website redesign V2 (handoff spec). Tokens live in tokens.css. */
:root {
    --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --pad: var(--pu-page-pad-desktop);
}
@media (max-width: 1023px) { :root { --pad: var(--pu-page-pad-tablet); } }
@media (max-width: 767px) { :root { --pad: var(--pu-page-pad-mobile); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--pu-ivory);
    color: var(--pu-ink);
    font-family: var(--font-body);
    font-size: var(--pu-body);
    line-height: 1.55;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; height: 100vh; }
::selection { background: var(--pu-graphite-950); color: var(--pu-ivory); }
.dark ::selection { background: var(--pu-champagne); color: var(--pu-graphite-950); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 0.125rem solid var(--pu-champagne); outline-offset: 0.1875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type ───────────────────────────────────────────────────────────── */
.display {
    font-family: var(--font-display);
    font-weight: 450;
    letter-spacing: -0.045em;
    line-height: 0.94;
    margin: 0;
}
.display--xl { font-size: var(--pu-display-xl); line-height: 0.9; letter-spacing: -0.055em; }
.display--lg { font-size: var(--pu-display-lg); }
.display--md { font-size: var(--pu-display-md); }
.display .dim { color: var(--pu-ink-soft); opacity: 0.55; }
.micro {
    font-family: var(--font-mono);
    font-size: var(--pu-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lead { font-size: var(--pu-body-lg); line-height: 1.5; color: var(--pu-ink-soft); max-width: 34em; margin: 0; }
.dark .lead { color: var(--pu-text-on-dark-muted); }
.idx { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.125rem; color: var(--pu-ink-soft); }
.idx::after { content: ""; flex: 0 0 3rem; height: 1px; background: currentColor; opacity: 0.4; transform-origin: left; transform: scaleX(0); transition: transform 0.5s var(--pu-ease-out) 0.08s; }
.idx.on::after, .no-motion .idx::after { transform: scaleX(1); }
.dark .idx { color: var(--pu-text-on-dark-muted); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.sec-head .display { max-width: 12em; }
.sec-head > .micro { color: var(--pu-ink-soft); max-width: 22em; line-height: 1.7; justify-self: end; text-align: right; }
.dark .sec-head > .micro { color: var(--pu-text-on-dark-muted); }
[dir="rtl"] .sec-head > .micro { justify-self: start; text-align: left; }
@media (max-width: 767px) { .sec-head { grid-template-columns: 1fr; } .sec-head > .micro { justify-self: start; text-align: left; } }

/* ── Layout ─────────────────────────────────────────────────────────── */
.section { position: relative; padding: var(--pu-section-space) var(--pad); }
.wrap { max-width: var(--pu-max-width); margin: 0 auto; }
.dark { background: var(--pu-graphite-950); color: var(--pu-text-on-dark); }
.paper { background: var(--pu-paper); }
.rule { height: 1px; background: var(--pu-border-light); border: 0; margin: 0; }
.dark .rule { background: var(--pu-border-dark); }
@media (max-width: 767px) { .section { padding: var(--pu-section-space-mobile) var(--pad); } }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 0.75rem;
    height: 3rem; padding: 0 1.375rem;
    border-radius: var(--pu-radius-button);
    font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--pu-duration-ui) var(--pu-ease-out), border-color var(--pu-duration-ui), color var(--pu-duration-ui);
}
.btn .arr { width: 0.875rem; height: 0.875rem; transition: transform var(--pu-duration-ui) var(--pu-ease-out); }
.btn:hover .arr { transform: translateX(0.3125rem); }
[dir="rtl"] .btn .arr { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(0.3125rem); }
.btn--primary { background: var(--pu-graphite-950); color: var(--pu-ivory); }
.btn--primary:hover { background: var(--pu-graphite-800); }
.dark .btn--primary { background: var(--pu-ivory); color: var(--pu-graphite-950); }
.dark .btn--primary:hover { background: #fff; }
.btn--ghost { border-color: var(--pu-border-light); }
.btn--ghost:hover { border-color: var(--pu-ink); }
.dark .btn--ghost { border-color: var(--pu-border-dark); }
.dark .btn--ghost:hover { border-color: var(--pu-ivory); }
.btn--sm { height: 2.625rem; padding: 0 1.125rem; font-size: 0.8125rem; }
.store { display: inline-flex; align-items: center; gap: 0.625rem; height: 2.875rem; padding: 0 1rem 0 0.875rem; border-radius: 0.625rem; background: var(--pu-graphite-950); color: var(--pu-ivory); text-decoration: none; transition: background var(--pu-duration-ui); }
.store:hover { background: var(--pu-graphite-800); }
.dark .store { background: var(--pu-ivory); color: var(--pu-graphite-950); }
.store svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.store small { display: block; font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; line-height: 1.1; }
.store b { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.15; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ── Header ─────────────────────────────────────────────────────────── */
.header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    height: 4.75rem; padding: 0 var(--pad);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    transition: background 0.35s, border-color 0.35s, color 0.35s;
    border-bottom: 1px solid transparent;
}
.header.is-scrolled { background: rgba(244, 241, 233, 0.82); backdrop-filter: blur(1.125rem); -webkit-backdrop-filter: blur(1.125rem); border-bottom-color: rgba(17, 19, 17, 0.08); }
.header.on-dark { color: var(--pu-ivory); }
.header.on-dark.is-scrolled { background: rgba(20, 21, 20, 0.78); border-bottom-color: rgba(244, 241, 233, 0.1); }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.brand img { height: 1.625rem; width: auto; }
.footer__brand .brand__name { font-size: 1.125rem; }
.footer__mezla { color: var(--pu-text-on-dark-muted); text-decoration: none; transition: color var(--pu-duration-ui); }
.footer__mezla:hover { color: var(--pu-ivory); }
.brand__name { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: 1.25rem; }
.brand__mezla { margin-left: 1.125rem; color: var(--pu-ink-soft); }
.header.on-dark .brand__mezla { color: var(--pu-text-on-dark-muted); }
.nav { display: flex; align-items: center; gap: clamp(1.375rem, 2.6vw, 2.5rem); }
.nav a { font-size: 1.0625rem; text-decoration: none; opacity: 0.8; transition: opacity 0.2s; }
.nav a:hover { opacity: 1; }
.header .btn--primary { height: 3.125rem; padding: 0 1.375rem; font-size: 1.0625rem; }
.header.on-dark .btn--primary { background: var(--pu-ivory); color: var(--pu-graphite-950); }
.header.on-dark .btn--ghost { border-color: var(--pu-border-dark); }
.lang {
    appearance: none; -webkit-appearance: none;
    background: transparent; color: inherit;
    border: 1px solid var(--pu-border-light); border-radius: 62.4375rem;
    height: 2.625rem; padding: 0 1.875rem 0 1rem;
    font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 0.9375rem) 0.9375rem, calc(100% - 0.6875rem) 0.9375rem; background-size: 0.25rem 0.25rem; background-repeat: no-repeat;
}
.lang option { color: var(--pu-ink); }
.header.on-dark .lang { border-color: var(--pu-border-dark); }
.menu-btn { display: none; height: 2.5rem; padding: 0 0.875rem; border: 1px solid var(--pu-border-light); border-radius: 62.4375rem; background: transparent; }
.header.on-dark .menu-btn { border-color: var(--pu-border-dark); }
.drawer { position: fixed; inset: 0; z-index: 99; background: var(--pu-ivory); color: var(--pu-ink); padding: 6.25rem var(--pad) 2.5rem; display: none; flex-direction: column; gap: 1.375rem; }
.drawer.is-open { display: flex; }
.drawer a { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; text-decoration: none; }
@media (max-width: 1023px) { .brand__mezla { display: none; } }
@media (max-width: 767px) {
    .header { height: 4rem; }
    .nav { display: none; }
    .menu-btn { display: inline-flex; align-items: center; }
    .brand img { height: 1.25rem; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
    position: relative; min-height: 100svh; box-sizing: border-box;
    padding-top: clamp(7.5rem, 14vh, 9.375rem); padding-bottom: 4.5rem;
    display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
}
/* While pinned (envelope scroll scene) the hero must fit one viewport exactly. */
.hero--pinned { height: 100svh; min-height: 0; }
.hero__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(17,19,17,.06) 1px, transparent 1px); background-size: 25% 100%; background-position: 25% 0;
  /* the guide lines fade out under the envelope and its shadow (Slava, 2026-09-20): a soft radial hole in the mask over the object zone */
  -webkit-mask-image: radial-gradient(ellipse 44vw 36vw at 68% 54%, transparent 52%, #000 100%); mask-image: radial-gradient(ellipse 44vw 36vw at 68% 54%, transparent 52%, #000 100%); }
@media (max-width: 1023px) { .hero__grid { -webkit-mask-image: radial-gradient(ellipse 60vw 40vw at 60% 60%, transparent 50%, #000 100%); mask-image: radial-gradient(ellipse 60vw 40vw at 60% 60%, transparent 50%, #000 100%); } }
@media (max-width: 767px) { .hero__grid { -webkit-mask-image: radial-gradient(ellipse 70vw 34vw at 50% 84%, transparent 50%, #000 100%); mask-image: radial-gradient(ellipse 70vw 34vw at 50% 84%, transparent 50%, #000 100%); } }
.hero__copy { position: relative; z-index: 2; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--pu-ink-soft); margin-bottom: 2.25rem; }
.hero__eyebrow::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--pu-ink); }
.hero__eyebrow .tag { background: var(--pu-graphite-950); color: var(--pu-ivory); padding: 0.375rem 0.625rem; text-decoration: none; transition: background var(--pu-duration-ui) var(--pu-ease-out); }
.hero__eyebrow a.tag:hover { background: var(--pu-graphite-800); }
.hero__title { max-width: 9.2em; margin-bottom: 1.875rem; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__lead { margin-bottom: 2.125rem; max-width: 30em; }
.hero__notes { display: flex; gap: 2rem; margin-top: 2.75rem; color: var(--pu-ink-soft); }
.hero__notes .micro { line-height: 1.8; border-left: 1px solid var(--pu-border-light); padding-left: 0.875rem; }
[dir="rtl"] .hero__notes .micro { border-left: 0; border-right: 1px solid var(--pu-border-light); padding-left: 0; padding-right: 0.875rem; }
/* transform-style stays flat: with preserve-3d the tilted main card and a hovered
   neighbour intersect in 3D and slice through each other (z-index is ignored). */
.hero__visual { position: relative; z-index: 1; height: clamp(26.25rem, 52vw, 45rem); perspective: 87.5rem; }
.hero__visual .dev { position: absolute; will-change: transform; }
.slab { border-radius: 1.625rem; overflow: hidden; background: var(--pu-graphite-950); box-shadow: var(--pu-shadow-device); border: 1px solid rgba(17,19,17,.1); }
.slab img { width: 100%; height: 100%; object-fit: cover; }
.dev--main { width: 44%; left: 30%; top: 4%; z-index: 4; transform: rotateY(-5deg) rotateX(2deg); }
.dev--left { width: 36%; left: 4%; top: 10%; z-index: 2; transform: rotate(-7deg) scale(.88); }
.dev--right { width: 30%; right: 0; top: 0; z-index: 1; transform: rotate(6deg) scale(.9); }
/* Hover: the device comes forward, straightens and grows to 120% of the main one
   (left 36% → 52.8% = ×1.47, right 30% → 52.8% = ×1.76, main ×1.2). */
/* Resting cards sit "in the shade" so the busy posters don't outshine the copy;
   the hovered one comes into full colour together with the zoom. */
.hero__visual .dev, .cta__visual .dev { opacity: 0.7; filter: saturate(0.85); transition: box-shadow 0.45s var(--pu-ease-out), opacity 0.45s var(--pu-ease-out), filter 0.45s var(--pu-ease-out); }
/* Transform transitions only when GSAP is not scrubbing the posters (hover / spotlight zoom). */
.hero.is-open .hero__visual .dev, .cta__visual .dev { transition: transform 0.45s var(--pu-ease-out), box-shadow 0.45s var(--pu-ease-out), opacity 0.45s var(--pu-ease-out), filter 0.45s var(--pu-ease-out); }
/* !important: while the envelope scene runs, GSAP keeps an inline opacity on the posters. */
.hero.is-open .hero__visual .dev:hover, .cta__visual .dev:hover { opacity: 1 !important; filter: saturate(1); }
.dev--left { transform-origin: 20% 50%; }
.dev--right { transform-origin: 85% 8%; }
/* !important: GSAP leaves an inline transform on the hero devices after the entrance. */
.hero.is-open .hero__visual .dev--main:hover, .cta__visual .dev--main:hover { transform: rotateY(0) rotateX(0) scale(1.2) !important; z-index: 10; }
.hero.is-open .hero__visual .dev--left:hover, .cta__visual .dev--left:hover { transform: rotate(0) scale(1.47) !important; z-index: 10; }
.hero.is-open .hero__visual .dev--right:hover, .cta__visual .dev--right:hover { transform: rotate(0) scale(1.76) !important; z-index: 10; }
.hero.is-open .hero__visual .dev:hover, .cta__visual .dev:hover { box-shadow: 0 2.5rem 5.625rem rgba(0,0,0,.28); }
.dev--wallet { width: 46%; left: 44%; bottom: 0; z-index: 5; transform: rotate(-4deg) scale(.94); filter: drop-shadow(0 1.75rem 3.75rem rgba(0,0,0,.18)); }
/* ── 3D Mezla envelope (PlusU_Envelope_Clean_Orbit_Pack, closed state) ──────
   Canvas 1619×971 (transparent layers, no blending tricks needed): shadow_glow
   under the envelope render; the envelope PNG (1638×960) sits inside the canvas
   exactly as in the pack's preview_composite (left 8.6 %, top 4.8 %, width
   85.6 %). The canvas is sized so the envelope keeps the approved on-screen size
   and position (~45vw wide, right side of the hero, vertically centred). Only a
   tiny float is applied. Orbit halves (same canvas, origin = ring centre
   820×470 → 50.65 % / 48.4 %) are to be mounted as separate layers. */
.hero__visual { z-index: auto; perspective: none; }
.escene { position: absolute; right: -3.5vw; top: calc(50% - 21.6vw); width: 68.6vw; aspect-ratio: 1619 / 971; overflow: visible; pointer-events: none; }
.elayer { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; animation: env-float 6.5s ease-in-out infinite; will-change: transform; }
.elayer--shadow { z-index: 1; }
.elayer--orbit-back { z-index: 2; }
.elayer--env { z-index: 3; left: 8.6%; top: 4.8%; width: 85.6%; aspect-ratio: 1638 / 960; height: auto; }
.env-whole, .env-piece { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* burst pieces: four angular sectors around the flap tip (47% 45.8%), cut along the fold lines; hidden until the scene needs them */
.env-piece { display: none; will-change: transform, opacity; backface-visibility: hidden; }
.hero.is-burst .env-piece { display: block; } .hero.is-burst .env-whole { display: none; }
.env-piece--flap { clip-path: polygon(47% 45.8%, 24.4% 0%, 100% 0%, 100% 18%); transform-origin: 47% 45.8%; }
.env-piece--right { clip-path: polygon(47% 45.8%, 100% 18%, 100% 100%, 79.4% 100%); transform-origin: 47% 45.8%; }
.env-piece--bottom { clip-path: polygon(47% 45.8%, 79.4% 100%, 0% 100%, 0% 59.8%); transform-origin: 47% 45.8%; }
.env-piece--left { clip-path: polygon(47% 45.8%, 0% 59.8%, 0% 0%, 24.4% 0%); transform-origin: 47% 45.8%; }
/* burst flash + sparks, centred on the flap tip */
.burst { position: absolute; z-index: 5; left: calc(8.6% + 85.6% * .47); top: calc(4.8% + 85.6% * 960 / 1638 * .458); width: 0; height: 0; pointer-events: none; }
.burst__flash { position: absolute; left: -30vw; top: -30vw; width: 60vw; height: 60vw; border-radius: 50%; opacity: 0; transform: scale(.1);
  background: radial-gradient(circle, rgba(255,240,190,.95) 0%, rgba(240,190,110,.55) 22%, rgba(226,171,91,.18) 45%, rgba(226,171,91,0) 70%); mix-blend-mode: screen; }
.burst__sparks { position: absolute; left: 0; top: 0; }
.spark { position: absolute; left: -0.1875rem; top: -0.1875rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: radial-gradient(circle, #FFF0B9, #E2AE61 60%, rgba(226,171,91,0) 100%); opacity: 0; will-change: transform, opacity; }
/* cards: land in front of the envelope; GSAP moves them and runs the scroll-driven spotlight (no hover) */
.cards { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* Cards are laid out at their spotlight (zoomed) size so the raster stays sharp; the fan shows them scaled down (see `fan` in site.js). */
.card { position: absolute; margin: 0; left: 50%; top: 50%; height: 80vh; aspect-ratio: 941 / 1672; opacity: 0; pointer-events: none; will-change: transform, opacity; border-radius: 0.875rem; overflow: hidden; box-shadow: 0 1.875rem 4.375rem rgba(17,14,10,.28); }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card--main { z-index: 2; }
@media (max-width: 767px) { .card { height: 68vh; } .hero.is-scene { overflow: hidden; } }
.elayer--orbit-front { z-index: 4; }
/* one half-arc (dash = 50 of 100) travels the whole ellipse in 12 s: front layer shows it on the lower half, back layer on the upper half (behind the envelope) */
.elayer--orbit { overflow: visible; }
.orbit__arc { stroke-dasharray: 50 50; stroke-dashoffset: 0; animation: orbit-travel 1.5s linear infinite; }
.hero.js-orbit .orbit__arc { animation: none; }
.orbit__ring { opacity: 0; }
@keyframes orbit-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes env-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.3125rem; } }
/* the envelope itself floats more visibly (Slava, 2026-09-20) while the orbit stays put as its frame; the shadow breathes with it */
.elayer--env { animation: env-hover 5.5s ease-in-out infinite; transform-origin: 50% 55%; }
.elayer--shadow { animation: shadow-breathe 5.5s ease-in-out infinite; transform-origin: 50% 70%; }
.elayer--orbit { animation: none; }
@keyframes env-hover { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0.25rem -1rem; rotate: -0.8deg; } }
@keyframes shadow-breathe { 0%, 100% { scale: 1 1; opacity: 1; } 50% { scale: 1.04 1.02; opacity: .86; } }
@media (max-width: 1023px) { .escene { width: 84vw; right: -9vw; top: calc(50% - 26.5vw); } }
@media (max-width: 767px) { .escene { top: auto; bottom: -4%; right: auto; left: calc(50% - min(50vw, 18.75rem)); width: min(100vw, 37.5rem); } }
@media (prefers-reduced-motion: reduce) { .elayer, .orbit__arc { animation: none; } }
/* Hero scrolled away: pause its endless float/breathe animations so the compositor can idle. */
.hero.is-offscreen .elayer, .hero.is-offscreen .elayer--env, .hero.is-offscreen .elayer--shadow, .hero.is-offscreen .orbit__arc { animation-play-state: paused; }
/* Skip: visible only while the scene is pinned. */
.hero__skip { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 20; padding: 0.625rem 1rem; border-radius: 62.4375rem; border: 1px solid var(--pu-border-light); background: rgba(244,241,233,.85); color: var(--pu-ink-soft); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.hero.is-scene .hero__skip { opacity: 1; pointer-events: auto; }
.hero__skip:hover { color: var(--pu-ink); border-color: var(--pu-ink); }

/* Back-to-top: fixed bottom-left, shown after one viewport of scroll; the veil covers the instant jump + scene reset. */
.totop { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 62.4375rem; border: 1px solid var(--pu-border-light); background: rgba(244,241,233,.85); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem); color: var(--pu-ink-soft); cursor: pointer; opacity: 0; transform: translateY(0.5rem); pointer-events: none; transition: opacity .3s var(--pu-ease-out), transform .3s var(--pu-ease-out), color .2s, border-color .2s; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--pu-ink); border-color: var(--pu-ink); }
.totop__veil { position: fixed; inset: 0; z-index: 59; background: var(--pu-ivory); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.totop__veil.is-on { opacity: 1; pointer-events: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .totop { left: 0.875rem; bottom: calc(0.875rem + env(safe-area-inset-bottom)); width: 2.5rem; height: 2.5rem; } }
/* Hover / tap / scroll zoom only while the posters are out of the envelope. */
.hero.is-open .hero__visual .dev.is-zoom { opacity: 1 !important; filter: saturate(1); z-index: 10; box-shadow: 0 2.5rem 5.625rem rgba(0,0,0,.28); }
.hero.is-open .hero__visual .dev--main.is-zoom { transform: rotateY(0) rotateX(0) scale(1.2) !important; }
.hero.is-open .hero__visual .dev--left.is-zoom { transform: rotate(0) scale(1.47) !important; }
.hero.is-open .hero__visual .dev--right.is-zoom { transform: rotate(0) scale(1.76) !important; }
.hero__meta { position: absolute; right: 0; bottom: 0; text-align: right; color: var(--pu-ink-soft); }
.hero__meta .big { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.03em; color: var(--pu-ink); }
[dir="rtl"] .hero__meta { right: auto; left: 0; text-align: left; }
@media (max-width: 1023px) { .hero { grid-template-columns: 1fr; } .hero__visual { height: clamp(22.5rem, 70vw, 35rem); } }
@media (max-width: 767px) {
    .hero { padding-top: 6rem; padding-bottom: 1.5rem; }
    .hero__title { font-size: clamp(2.5rem, 11vw, 3.5rem); }
    .hero__visual { height: clamp(18.75rem, 88vw, 26.25rem); }
    .hero__notes { flex-direction: column; gap: 0.75rem; }
    .hero__meta { display: none; }
    /* Pinned scene on phones: copy on top, posters take the remaining height. */
    .hero--pinned { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.5rem; }
    .hero--pinned .hero__notes { display: none; }
    .hero--pinned .hero__lead { margin-bottom: 0.75rem; }
    .hero--pinned .hero__visual { flex: 1 1 auto; height: auto; min-height: 15rem; }
}

/* ── How it works ───────────────────────────────────────────────────── */
.how { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.how__col .micro { color: var(--pu-ink-soft); margin-bottom: 1.25rem; display: block; }
.step { display: flex; align-items: center; gap: 1.125rem; padding: 1.25rem 0; border-top: 1px solid var(--pu-border-light); }
.step:last-child { border-bottom: 1px solid var(--pu-border-light); }
.step svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; }
.step span { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.step i { margin-left: auto; font-style: normal; color: var(--pu-ink-soft); }
[dir="rtl"] .step i { margin-left: 0; margin-right: auto; }
.how__mid { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 2.625rem; }
.how__line { width: 1px; flex: 1; min-height: 3.75rem; background: var(--pu-ink); opacity: 0.3; transform-origin: top; }
.how__qr { width: 5.25rem; height: 5.25rem; border: 1px solid var(--pu-ink); display: grid; place-items: center; background: #fff; }
.how__qr img { width: 4.25rem; height: 4.25rem; }
.how__qrbox { display: flex; flex-direction: column; align-items: center; }
.how__qrlabel { color: var(--pu-ink-soft); white-space: nowrap; padding: 0.625rem 0; }
.how__foot { text-align: center; margin-top: clamp(3rem, 6vw, 5rem); }
.how__foot .display { margin-bottom: 0.625rem; }
.how__foot .micro { color: var(--pu-ink-soft); }
@media (max-width: 767px) { .how { grid-template-columns: 1fr; } .how__mid { flex-direction: row; justify-content: center; gap: 2rem; padding: 0.5rem 0; } .how__line { display: none; } .how__qrbox--top .how__qrlabel { order: 2; } }

/* ── Card fans ──────────────────────────────────────────────────────── */
.fan-section { padding: 0; }
.fan-section .sec-head { padding: var(--pu-section-space) var(--pad) 0; max-width: var(--pu-max-width); margin: 0 auto; }
.fan-track { height: 520vh; position: relative; }
.fan-track--5 { height: 460vh; }
.fan-track--10 { height: 800vh; }
.fan-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding-top: 5.5rem; /* keep the enlarged active card clear of the fixed header */ }
.fan { position: relative; width: 100%; height: min(76vh, 47.5rem); perspective: 100rem; }
.fan__card {
    position: absolute; left: 50%; top: 50%;
    /* Card width also bounded by viewport height (card is 2.17× taller than wide),
       so the phone never overlaps the caption on short laptop screens. */
    --fan-w: min(clamp(13.75rem, 25vw, 20.625rem), 27vh);
    width: var(--fan-w); aspect-ratio: 400 / 867;
    margin-left: calc(var(--fan-w) / -2); margin-top: calc(var(--fan-w) * 867 / 400 / -2);
    border-radius: 1.375rem; overflow: hidden; background: var(--pu-graphite-950);
    border: 1px solid rgba(17,19,17,.14); box-shadow: 0 1.5rem 3.75rem rgba(0,0,0,.14);
    will-change: transform, opacity;
}
.fan__card img { width: 100%; height: 100%; object-fit: cover; }
.fan__caption { position: relative; text-align: center; margin-top: 1.75rem; min-height: 4.75rem; }
.fan__caption .micro { color: var(--pu-ink-soft); }
.fan__caption .name { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; margin: 0.375rem 0 0.25rem; }
.fan__caption .sub { color: var(--pu-ink-soft); font-size: 0.875rem; }
.fan__nav { display: flex; align-items: center; gap: 1.5rem; margin-top: 1rem; }
.fan__nav button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--pu-border-light); background: transparent; display: grid; place-items: center; }
.fan__nav svg { width: 0.875rem; height: 0.875rem; stroke: currentColor; fill: none; stroke-width: 1.5; }
.fan__dots { display: flex; gap: 0.375rem; }
.fan__dots i { width: 1.375rem; height: 1px; background: rgba(17,19,17,.2); transition: background 0.3s; }
.fan__dots i.on { background: var(--pu-champagne); }
@media (max-width: 767px) {
    .fan__card { box-shadow: 0 0.75rem 2rem rgba(0,0,0,.12); }
    .fan-track { height: 320vh; } .fan-track--5 { height: 300vh; } .fan-track--10 { height: 500vh; }
    .fan-stage { padding-top: 4rem; }
    .fan { height: 54vh; }
    .fan__card { --fan-w: clamp(9.375rem, 46vw, 11.875rem); }
}

/* ── Wallet cinematic ───────────────────────────────────────────────── */
.wallet { padding: 0; }
.wallet__track { height: 300vh; }
.wallet__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); padding: 0 var(--pad); }
.wallet__copy .display { margin-bottom: 2.5rem; }
.wallet__copy .display .line { display: block; overflow: hidden; }
.wallet__copy .display .line > span { display: block; }
.wflow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 24.375rem; font-size: 1.3125rem; }
.wflow li { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0; border-top: 1px solid var(--pu-border-dark); color: var(--pu-text-on-dark-muted); transition: color 0.3s; }
.wflow li:last-child { border-bottom: 1px solid var(--pu-border-dark); }
.wflow li.on { color: var(--pu-ivory); }
.wflow li .n { font-family: var(--font-mono); font-size: 0.875rem; width: 1.75rem; }
.wflow li svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 1.5; }
.wflow li.on .n { color: var(--pu-champagne); }
.wallet__scene { position: relative; height: min(70vh, 43.75rem); perspective: 100rem; }
.wcard {
    position: absolute; left: 50%; top: 50%; width: min(78%, 32.5rem); aspect-ratio: 1200 / 760;
    transform: translate(-50%, -50%); transform-style: preserve-3d; will-change: transform;
}
.wcard__shell { position: absolute; inset: 0; border-radius: 1.375rem; background: linear-gradient(160deg, #2a2b29, #161715); border: 1px solid rgba(244,241,233,.16); box-shadow: 0 2.5rem 6.25rem rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); }
.wcard__brand { position: absolute; left: 6%; top: 10%; width: 52%; opacity: 0; }
.wcard__qr { position: absolute; right: 6%; top: 12%; width: 30%; aspect-ratio: 1; background: #fff; padding: 6%; clip-path: inset(50% 50% 50% 50%); }
.wcard__qr img { width: 100%; height: 100%; }
.wcard__details { position: absolute; left: 6%; right: 6%; bottom: 10%; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; }
.wcard__details .t { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing: -0.02em; }
.wcard__details .m { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--pu-text-on-dark-muted); }
.wcard__rim { position: absolute; inset: -1px; border-radius: 1.4375rem; pointer-events: none; background: linear-gradient(120deg, rgba(183,168,143,.35), transparent 40%, transparent 60%, rgba(183,168,143,.2)); opacity: 0; mix-blend-mode: screen; }
.wphone { position: absolute; left: 50%; top: 50%; width: min(52%, 21.25rem); transform: translate(-50%, -50%) scale(.9); opacity: 0; will-change: transform, opacity; }
.wallet__final { position: absolute; left: var(--pad); right: var(--pad); bottom: 2.25rem; display: flex; justify-content: space-between; align-items: center; color: var(--pu-text-on-dark-muted); opacity: 0; }
.wallet__final .badges { display: flex; gap: 0.625rem; }
.wallet__final .badge { border: 1px solid var(--pu-border-dark); padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 1023px) { .wallet__stage { grid-template-columns: 1fr; align-content: center; gap: 1.5rem; } .wallet__scene { height: min(44vh, 26.25rem); } .wallet__copy .display { margin-bottom: 1.25rem; } .wflow { display: flex; flex-wrap: wrap; max-width: none; gap: 0.5rem 1.375rem; } .wflow li { border: 0; padding: 0.375rem 0; } .wallet__final { display: none; } }

/* ── Features index ─────────────────────────────────────────────────── */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.feat__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pu-border-light); }
.feat__row { display: flex; align-items: center; gap: 1.5rem; height: 4.625rem; border: 0; border-bottom: 1px solid var(--pu-border-light); border-radius: 0; cursor: pointer; background: transparent; width: 100%; text-align: left; padding: 0; transition: border-color var(--pu-duration-micro); }
.feat__row .n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--pu-ink-soft); width: 1.75rem; transition: color var(--pu-duration-micro); }
.feat__row .t { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.02em; transition: transform var(--pu-duration-micro) var(--pu-ease-out); }
.feat__row.on { border-bottom-color: rgba(17,19,17,.3); }
.feat__row.on .n, .feat__row:hover .n { color: var(--pu-champagne); }
.feat__row.on .t, .feat__row:hover .t { transform: translateX(0.5rem); }
[dir="rtl"] .feat__row { text-align: right; }
[dir="rtl"] .feat__row.on .t, [dir="rtl"] .feat__row:hover .t { transform: translateX(-0.5rem); }
.feat__preview { position: sticky; top: 6.875rem; display: grid; grid-template-columns: 1fr; }
.feat__pane { grid-area: 1 / 1; display: grid; grid-template-columns: 19rem 1fr; gap: 2.75rem; align-items: center; opacity: 0; pointer-events: none; }
.feat__pane.on { opacity: 1; pointer-events: auto; }
.feat__pane .slab { border-radius: 1.125rem; }
.feat__pane h3 { font-family: var(--font-display); font-size: 1.625rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.feat__pane p { margin: 0; color: var(--pu-ink-soft); font-size: 1.125rem; }
.feat__pane .micro { display: block; color: var(--pu-ink-soft); margin-bottom: 0.625rem; }
@media (max-width: 767px) {
    /* Compact rows so the preview below stays on the same screen; the tapped row is what changes the picture. */
    .feat__row { height: 2.75rem; gap: 1rem; }
    .feat__row .t { font-size: 1rem; }
    .feat__row .n { font-size: 0.625rem; width: 1.25rem; }
}
@media (max-width: 1023px) { .feat { grid-template-columns: 1fr; } .feat__preview { position: static; } .feat__pane { grid-template-columns: 15.1875rem 1fr; } }

/* ── Made for ───────────────────────────────────────────────────────── */
.made { border-top: 1px solid var(--pu-border-light); }
.made__row { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.375rem 0; border-bottom: 1px solid var(--pu-border-light); text-decoration: none; transition: padding var(--pu-duration-ui) var(--pu-ease-out); }
.made__row:hover { padding-left: 0.625rem; }
.made__row .n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--pu-ink-soft); }
.made__row .t { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3.5rem); letter-spacing: -0.04em; line-height: 1; }
.made__row .arr { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 1.4; opacity: 0.5; }
.made__row:hover .arr { opacity: 1; }

/* ── Pricing ────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.plan { position: relative; border: 1px solid var(--pu-border-light); border-radius: var(--pu-radius-panel); padding: 2rem 1.875rem 1.875rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 26.25rem; overflow: hidden; transition: border-color var(--pu-duration-ui); }
.plan:hover { border-color: rgba(17,19,17,.3); }
.plan::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--pu-champagne); transform: translateY(-100%); }
.plan:hover::before { animation: sweep 0.3s var(--pu-ease-out) forwards; }
@keyframes sweep { to { transform: translateY(100%); } }
.plan--rec { background: var(--pu-graphite-950); color: var(--pu-ivory); border-color: var(--pu-graphite-950); }
.plan__flag { position: absolute; top: 1rem; right: 1rem; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--pu-border-dark); padding: 0.3125rem 0.5625rem; color: var(--pu-champagne); }
.plan .micro { color: var(--pu-ink-soft); font-size: 0.875rem; }
.plan--rec .micro { color: var(--pu-text-on-dark-muted); }
.plan__price { font-family: var(--font-display); font-size: 3.75rem; letter-spacing: -0.04em; line-height: 1; margin: 0.75rem 0 0; }
.plan__price small { font-family: var(--font-body); font-size: 1.0625rem; letter-spacing: 0; color: var(--pu-ink-soft); }
.plan--rec .plan__price small { color: var(--pu-text-on-dark-muted); }
.plan__tag { margin: 0; color: var(--pu-ink-soft); font-size: 1.125rem; }
.plan--rec .plan__tag { color: var(--pu-text-on-dark-muted); }
.plan__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.625rem; font-size: 1.125rem; }
.plan__list li { display: flex; gap: 0.625rem; }
.plan__list li::before { content: "—"; opacity: 0.4; }
.plan .btn { margin-top: auto; align-self: flex-start; height: 3.375rem; padding: 0 1.5rem; font-size: 1.0625rem; }
.plan--rec .btn--ghost { border-color: var(--pu-border-dark); color: var(--pu-ivory); }
.plan--rec .btn--ghost:hover { border-color: var(--pu-ivory); }
.pricing__note { margin-top: 1.5rem; color: var(--pu-ink-soft); font-size: 1.0625rem; }
@media (max-width: 767px) { .plans { grid-template-columns: 1fr; } .plan { min-height: 0; } }

/* ── Download CTA ───────────────────────────────────────────────────── */
.cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.cta .display { max-width: 9em; margin-bottom: 2.25rem; }
/* Same three-device composition as the hero (.dev--left / --right / --main). */
.cta__visual { position: relative; aspect-ratio: 1.05; perspective: 87.5rem; }
.cta__visual .dev { position: absolute; }
/* Download CTA: two equal columns — store button, its QR and caption centred on one axis;
   the note below spans exactly the two QR boxes (2 × 144 + 40 gap) and wraps inside them. */
.cta__stores { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; }
.cta__store { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; }
.cta__store .store { width: 100%; justify-content: center; }
.cta__note { grid-column: 1 / -1; justify-self: center; contain: inline-size; width: 100%; max-width: 20.5rem; margin: 0.5rem 0 0; text-align: center; color: var(--pu-ink-soft); line-height: 1.7; }
@media (max-width: 480px) { .cta__stores { grid-template-columns: 1fr; } .cta__note { max-width: none; } }
.cta__qr { display: block; background: #fff; padding: 0.75rem; border: 1px solid var(--pu-border-light); width: 9rem; }
.cta__qr img { display: block; width: 100%; }
.cta__qr .micro { display: block; margin-top: 0.625rem; color: var(--pu-ink-soft); font-size: 0.5625rem; text-align: center; }
@media (max-width: 1023px) { .cta { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--pu-border-light); }
.faq details { border-bottom: 1px solid var(--pu-border-light); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.625rem 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.4375rem; color: var(--pu-ink-soft); transition: transform 0.3s var(--pu-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 1.875rem; color: var(--pu-ink-soft); max-width: 64em; font-size: 1.2188rem; line-height: 1.55; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: start; }
@media (max-width: 1023px) { .faq-grid { grid-template-columns: 1fr; } }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { position: relative; overflow: hidden; padding-bottom: 2.5rem; }
.footer__mark { position: absolute; right: -6%; bottom: -30%; width: clamp(20rem, 42vw, 40rem); opacity: 0.07; pointer-events: none; }
[dir="rtl"] .footer__mark { right: auto; left: -4%; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-bottom: clamp(3.5rem, 8vw, 7.5rem); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.footer__cols .micro { color: var(--pu-text-on-dark-muted); margin-bottom: 0.875rem; display: block; }
.footer__cols a { display: block; text-decoration: none; font-size: 0.875rem; color: var(--pu-ivory); opacity: 0.85; margin-bottom: 0.625rem; }
.footer__cols a:hover { opacity: 1; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--pu-border-dark); color: var(--pu-text-on-dark-muted); font-size: 0.75rem; }
.footer__bottom a { text-decoration: none; color: var(--pu-ivory); }
.footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem; }
.footer__brand img { height: 1.625rem; width: auto; }
@media (max-width: 767px) { .footer__top { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: 1fr 1fr; } }

/* ── Reveals ────────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(1.25rem); }
.no-motion .rv { opacity: 1; transform: none; }
body.is-assembling .header, body.is-assembling main { visibility: hidden; }

/* ── Intro ──────────────────────────────────────────────────────────── */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--pu-graphite-950); color: var(--pu-ivory); overflow: hidden; perspective: 100rem; }
.intro[hidden] { display: none; }
.intro__noise { position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.intro__canvas { position: absolute; inset: 0; pointer-events: none; }
.intro__skip { position: absolute; left: var(--pad); bottom: 2.25rem; z-index: 5; background: transparent; border: 0; color: var(--pu-text-on-dark-muted); padding: 0.625rem 0; }
.intro__skip:hover { color: var(--pu-ivory); }
.loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loader__mark { width: 10rem; height: 10rem; opacity: 0; }
.loader__name { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; margin-top: 1.5rem; opacity: 0; }
.loader__tag { color: var(--pu-text-on-dark-muted); margin-top: 0.5rem; opacity: 0; }
.loader__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 6.25rem; }
.loader__line { height: 1px; background: var(--pu-border-dark); position: relative; }
.loader__line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--pu-ivory); }
.loader__line b { position: absolute; top: -1px; width: 2.5rem; height: 0.1875rem; background: var(--pu-champagne); filter: blur(0.125rem); opacity: 0; }
.loader__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.875rem; color: var(--pu-text-on-dark-muted); }
.loader__labels { display: flex; gap: 1.75rem; }
.loader__labels span { opacity: 0.35; transition: opacity 0.3s; }
.loader__labels span.on { opacity: 1; color: var(--pu-ivory); }
.loader__pct { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.03em; color: var(--pu-ivory); }

.ob { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); padding: 6rem var(--pad) 6.25rem; visibility: hidden; transform-style: preserve-3d; backface-visibility: hidden; }
.ob.is-current { visibility: visible; }
.ob__top { position: absolute; top: 1.75rem; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; color: var(--pu-text-on-dark-muted); }
.ob__top .brand img { height: 1.25rem; }
.ob__title { margin-bottom: 1.375rem; }
.ob__title .line { display: block; overflow: hidden; }
.ob__title .line > span { display: block; }
.ob__sub { color: var(--pu-text-on-dark-muted); font-size: 1.0625rem; max-width: 28em; margin: 0 0 1.125rem; }
.ob__lines { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.5rem; color: var(--pu-text-on-dark-muted); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; }
.ob__visual { position: relative; height: clamp(18.75rem, 62vh, 37.5rem); }
.ob__visual img { position: absolute; filter: drop-shadow(0 1.875rem 3.75rem rgba(0,0,0,.5)); will-change: transform, opacity; }
.ob__cta { position: absolute; bottom: 2.25rem; right: var(--pad); }
[dir="rtl"] .ob__cta { right: auto; left: var(--pad); }
[dir="rtl"] .intro__skip { left: auto; right: var(--pad); }
.ob__half { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.ob__half > .ob { visibility: visible; }
.split-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--pu-champagne); transform: scaleY(0); }
@media (max-width: 860px) {
    .ob { grid-template-columns: 1fr; align-content: center; gap: 1rem; padding: 5rem var(--pad) 6.875rem; }
    .ob__visual { order: -1; height: auto; width: min(100%, 34vh); aspect-ratio: 1; margin: 0 auto; }
    .ob__title { font-size: clamp(1.875rem, 8vw, 2.75rem); }
    .loader__mark { width: 6.875rem; height: 6.875rem; }
}

/* Slice reveal */
.slices { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.slice { position: absolute; left: 0; width: 100%; overflow: hidden; will-change: transform; }
.slice__inner { position: absolute; left: 0; top: 0; width: 100%; }
.slice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(17,19,17,.18); }

@media (prefers-reduced-motion: reduce) { .btn .arr { transition: none; } }

/* ═══ Inner pages ═══════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.page-hero { padding-top: clamp(8.75rem, 18vh, 12.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.page-hero .crumb { display: inline-flex; gap: 0.625rem; color: var(--pu-ink-soft); margin-bottom: 2.5rem; }
.page-hero .crumb a { text-decoration: none; }
.page-hero .eyebrow { display: block; color: var(--pu-ink-soft); margin-bottom: 1.625rem; }
.page-hero .display { max-width: 12em; margin-bottom: 2.25rem; }
.page-hero .display--xl { font-size: var(--pu-display-lg); line-height: 0.96; letter-spacing: -0.045em; }
.page-hero .lead { max-width: 38em; margin-bottom: 0.5rem; }
.page-hero .cta-row { margin-top: 2.5rem; }
.rows { border-top: 1px solid var(--pu-border-light); }
.row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem 1.5rem; padding: 1.625rem 0; border-bottom: 1px solid var(--pu-border-light); }
.row .n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--pu-ink-soft); padding-top: 0.375rem; }
.row h3 { font-family: var(--font-display); font-size: clamp(1.125rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; margin: 0 0 0.375rem; font-weight: 500; }
.row p { margin: 0; color: var(--pu-ink-soft); max-width: 60em; }
.row--media { grid-template-columns: 3.5rem minmax(0, 1fr) 7.5rem; align-items: center; }
.row--media .slab { border-radius: 0.875rem; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.gallery figure { margin: 0; }
.gallery .slab { border-radius: 1.25rem; }
.gallery .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.gallery figcaption { margin-top: 0.75rem; color: var(--pu-ink-soft); font-size: 0.875rem; }
.quote { border-left: 1px solid var(--pu-champagne); padding: 0.5rem 0 0.5rem 1.75rem; max-width: 46em; }
.quote p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 1rem; }
.quote .micro { color: var(--pu-ink-soft); }
[dir="rtl"] .quote { border-left: 0; border-right: 1px solid var(--pu-champagne); padding: 0.5rem 1.75rem 0.5rem 0; }
.related { display: grid; gap: 1.125rem; padding-top: 1.75rem; border-top: 1px solid var(--pu-border-light); }
.related > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.625rem 1.375rem; }
.related .micro { color: var(--pu-ink-soft); margin-right: 0.5rem; }
.related a { text-decoration: none; color: var(--pu-ink); font-size: 0.9375rem; border-bottom: 1px solid var(--pu-border-light); padding-bottom: 0.125rem; transition: border-color var(--pu-duration-ui); }
.related a:hover { border-bottom-color: var(--pu-ink); }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.note { border-top: 1px solid var(--pu-border-light); padding-top: 1.125rem; }
.note h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.5rem; }
.note p { margin: 0; color: var(--pu-ink-soft); font-size: 0.875rem; }
.prose { max-width: 72em; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.625rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 1.125rem; font-weight: 450; }
.prose h3 { font-size: 1.0625rem; font-weight: 600; margin: 2rem 0 0.625rem; }
.prose p, .prose li { color: var(--pu-ink-soft); font-size: 0.9375rem; line-height: 1.65; }
.prose ul { padding-left: 1.25rem; }
.prose a { color: var(--pu-ink); }
.prose b, .prose strong { color: var(--pu-ink); }
.kv { border-top: 1px solid var(--pu-border-light); }
.kv > div { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 0.75rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--pu-border-light); font-size: 0.9375rem; }
.kv .k { color: var(--pu-ink-soft); }
.kv a { color: var(--pu-ink); }
.list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pu-border-light); }
.list li { padding: 0.875rem 0; border-bottom: 1px solid var(--pu-border-light); display: flex; gap: 1.125rem; font-size: 0.9375rem; color: var(--pu-ink-soft); }
.list li::before { content: counter(item, decimal-leading-zero); counter-increment: item; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--pu-champagne); padding-top: 0.25rem; }
.list { counter-reset: item; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.two > * { min-width: 0; }
.sticky { position: sticky; top: 6.875rem; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr; } .notes { grid-template-columns: 1fr; } .row--media { grid-template-columns: 2.5rem 1fr; } .row--media .slab { display: none; } .row { grid-template-columns: 2.5rem 1fr; } .kv > div { grid-template-columns: 1fr; gap: 0.25rem; } }

/* Forms (m / reset-password) */
.panel { border: 1px solid var(--pu-border-light); border-radius: var(--pu-radius-card); padding: clamp(1.25rem, 3vw, 2rem); background: rgba(255,255,255,.35); }
.dark .panel { border-color: var(--pu-border-dark); background: rgba(255,255,255,.03); }
.field { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.field label, .field-label { font-size: 0.8125rem; font-weight: 500; }
.field input, .text-input { height: 3rem; padding: 0 1rem; border-radius: 0.625rem; border: 1px solid rgba(17,19,17,.2); background: #fff; font: inherit; color: var(--pu-ink); outline: none; transition: border-color var(--pu-duration-ui); width: 100%; }
.field input:focus, .text-input:focus { border-color: var(--pu-ink); }
.field input.is-invalid, .text-input.is-invalid { border-color: var(--pu-danger); }
.field-error { font-size: 0.8125rem; color: var(--pu-danger); min-height: 0; }
.field-error:empty { display: none; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn.is-loading { opacity: 0.5; pointer-events: none; }
.qr-box { background: #fff; padding: 0.75rem; border: 1px solid var(--pu-border-light); width: 13.5rem; margin: 1.25rem 0; }
.qr-box canvas, .qr-box img { display: block; width: 12rem; height: 12rem; }
.qr-id { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--pu-ink-soft); margin-bottom: 1rem; }
.thanks .btn { margin-top: 0.625rem; }
.status-box { border: 1px solid var(--pu-border-light); border-radius: 0.625rem; padding: 0.875rem 1rem; font-size: 0.875rem; margin-bottom: 1.25rem; }
.status-box.info { background: rgba(79,119,112,.08); border-color: rgba(79,119,112,.35); }
.status-box.error { background: rgba(168,93,89,.08); border-color: rgba(168,93,89,.4); color: var(--pu-danger); }
.status-box.success { background: rgba(79,119,112,.1); border-color: var(--pu-teal); color: var(--pu-teal); }
.btn-link { font-size: 0.875rem; color: var(--pu-ink-soft); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.wallet-fallback-hint { font-size: 0.8125rem; color: var(--pu-ink-soft); }
.actions-grid { display: grid; gap: 0.625rem; }
.action-link { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; border: 1px solid var(--pu-border-light); border-radius: 0.75rem; text-decoration: none; font-weight: 500; transition: border-color var(--pu-duration-ui), background var(--pu-duration-ui); }
.action-link:hover { border-color: var(--pu-ink); background: rgba(255,255,255,.5); }
.action-link svg, .action-link img { width: 1.375rem; height: 1.375rem; flex-shrink: 0; }
.state-text { color: var(--pu-ink-soft); margin: 0; }
.no-links-note { color: var(--pu-ink-soft); }
.store-qr-card { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; background: #fff; border: 1px solid var(--pu-border-light); padding: 0.75rem; }
.store-qr-card img { width: 8.125rem; height: 8.125rem; }
.email-capture-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.email-capture-form textarea { grid-column: 1 / -1; min-height: 6.25rem; padding: 0.75rem 1rem; border-radius: 0.625rem; border: 1px solid rgba(17,19,17,.2); background: #fff; font: inherit; resize: vertical; }
.email-capture-form input { height: 3rem; padding: 0 1rem; border-radius: 0.625rem; border: 1px solid rgba(17,19,17,.2); background: #fff; font: inherit; }
.email-capture-submit { grid-column: 1 / -1; justify-self: start; }
.email-capture-status { grid-column: 1 / -1; font-size: 0.875rem; }
.email-capture-honeypot { position: absolute; left: -625rem; }
@media (max-width: 640px) { .email-capture-form { grid-template-columns: 1fr; } }

/* ═══ Merchant mini-site (/links/) ══════════════════════════════════════ */
:root { --m-accent: var(--pu-champagne); }
.msite { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 1.5rem var(--pad) 2.5rem; }
.msite__bar { width: 100%; max-width: 32.5rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(1.75rem, 6vh, 3.5rem); }
.msite__bar .brand img { height: 1.25rem; }
.msite__bar .brand__name { font-size: 0.8125rem; color: var(--pu-ink-soft); }
.msite__card { width: 100%; max-width: 32.5rem; }
.msite__cover { width: 100%; aspect-ratio: 16 / 7; border-radius: 1.125rem; overflow: hidden; background: var(--pu-paper); margin-bottom: -3.5rem; }
.msite__cover img { width: 100%; height: 100%; object-fit: cover; }
.msite__cover + .msite__logo { position: relative; }
.hours { margin-top: 1.125rem; border: 1px solid var(--pu-border-light); border-radius: 0.875rem; background: rgba(255,255,255,.45); padding: 1rem 1.125rem; }
.hours__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.625rem; }
.hours__head .micro { color: var(--pu-ink-soft); }
.hours__status { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: 62.4375rem; border: 1px solid var(--pu-border-light); }
.hours__status.on { color: var(--pu-teal); border-color: rgba(79,119,112,.4); }
.hours__status.off { color: var(--pu-ink-soft); }
.hours__row { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.875rem; border-top: 1px solid var(--pu-border-light); }
.hours__row:first-of-type { border-top: 0; }
.hours__row.today { font-weight: 600; }
.hours__row .closed { color: var(--pu-ink-soft); }
.msite__logo { width: 7rem; height: 7rem; border-radius: 50%; margin: 0 auto 1.375rem; display: grid; place-items: center; background: #fff; border: 1px solid var(--pu-border-light); box-shadow: 0 0 0 0.375rem var(--pu-ivory), 0 0 0 0.4375rem var(--m-accent); overflow: hidden; }
.msite__logo img { width: 100%; height: 100%; object-fit: cover; }
.msite__logo span { font-family: var(--font-display); font-size: 2.75rem; letter-spacing: -0.04em; color: var(--pu-ink); }
.msite__name { text-align: center; font-family: var(--font-display); font-size: clamp(1.875rem, 8vw, 2.5rem); letter-spacing: -0.04em; line-height: 1; margin: 0 0 0.75rem; font-weight: 450; }
.msite__bio { text-align: center; color: var(--pu-ink-soft); font-size: 0.9375rem; line-height: 1.5; margin: 0 auto 0.5rem; max-width: 30em; }
.msite__state { display: flex; justify-content: center; margin: 0.25rem 0 0; }
.msite__cta { display: flex; justify-content: center; margin: 1.375rem 0 0.875rem; }
.msite__cta .btn { width: 100%; max-width: 22.5rem; justify-content: center; }
/* Primary actions: 1 or 2 full-width buttons, only when configured */
.primary { display: grid; grid-template-columns: 1fr; gap: 0.625rem; margin-bottom: 1.375rem; }
.primary:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.primary__btn { justify-content: center; gap: 0.625rem; height: 3.25rem; background: rgba(255,255,255,.55); }
.primary__btn svg { width: 1.25rem; height: 1.25rem; color: var(--pu-ink); }
.primary__btn:hover { background: #fff; }
@media (max-width: 380px) { .primary:has(> :nth-child(2)) { grid-template-columns: 1fr; } }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.tiles[data-count="1"] { grid-template-columns: 1fr; }
.tiles[data-count="2"], .tiles[data-count="4"] { grid-template-columns: 1fr 1fr; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 1.125rem 0.5rem 0.875rem; border: 1px solid var(--pu-border-light); border-radius: 0.875rem; background: rgba(255,255,255,.45); text-decoration: none; color: var(--pu-ink); transition: border-color var(--pu-duration-ui), background var(--pu-duration-ui), transform var(--pu-duration-ui) var(--pu-ease-out); }
.tile:hover { border-color: var(--pu-ink); background: #fff; transform: translateY(-0.125rem); }
.tile svg { width: 1.5rem; height: 1.5rem; color: var(--pu-ink); opacity: .85; }
.tile:hover svg { opacity: 1; }
.tile span { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-align: center; }
/* Compact social row */
.social { margin-top: 1.125rem; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 0.875rem 1.125rem; border: 1px solid var(--pu-border-light); border-radius: 0.875rem; background: rgba(255,255,255,.45); }
.social .micro { color: var(--pu-ink-soft); }
.social__row { display: flex; gap: 0.625rem; flex-wrap: wrap; justify-content: center; }
.social__btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--pu-border-light); background: #fff; display: grid; place-items: center; color: var(--pu-ink); transition: border-color var(--pu-duration-ui), transform var(--pu-duration-ui) var(--pu-ease-out); }
.social__btn svg { width: 1.25rem; height: 1.25rem; }
.social__btn:hover { border-color: var(--pu-ink); transform: translateY(-0.125rem); }
.msite__address { margin-top: 1.125rem; border: 1px solid var(--pu-border-light); border-radius: 0.875rem; padding: 1rem 1.125rem; background: rgba(255,255,255,.45); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.875rem; }
.msite__address a { white-space: nowrap; color: var(--pu-ink); font-weight: 500; }
.msite__share { display: flex; justify-content: center; margin-top: 1.5rem; }
/* Menu / price list sheet */
.msheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.msheet.hidden { display: none; }
.msheet__backdrop { position: absolute; inset: 0; background: rgba(24,22,20,.45); backdrop-filter: blur(0.125rem); }
.msheet__panel { position: relative; width: 100%; max-width: 35rem; max-height: 86vh; display: flex; flex-direction: column; background: var(--pu-ivory); border-radius: 1.375rem 1.375rem 0 0; box-shadow: 0 -0.75rem 2.5rem rgba(0,0,0,.18); animation: msheet-up .32s var(--pu-ease-out); }
@media (min-width: 640px) { .msheet { align-items: center; padding: 1.5rem; } .msheet__panel { border-radius: 1.375rem; max-height: 80vh; } }
@keyframes msheet-up { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.msheet__head { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.25rem 0.75rem; border-bottom: 1px solid var(--pu-border-light); }
.msheet__head .micro { color: var(--pu-ink-soft); }
.msheet__close { width: 2.125rem; height: 2.125rem; border-radius: 50%; border: 1px solid var(--pu-border-light); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--pu-ink); }
.msheet__close svg { width: 1.125rem; height: 1.125rem; }
.msheet__body { overflow: auto; padding: 0.5rem 1.25rem 1.75rem; -webkit-overflow-scrolling: touch; }
.msheet__section { padding-top: 0.875rem; }
.msheet__section h3 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: .02em; margin: 0.375rem 0 0.25rem; color: var(--pu-ink); }
.msheet__item { display: flex; justify-content: space-between; gap: 0.875rem; padding: 0.5625rem 0; border-top: 1px solid var(--pu-border-light); }
.msheet__section .msheet__item:first-of-type { border-top: 0; }
.msheet__item-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.msheet__item-name { font-size: 0.9375rem; color: var(--pu-ink); }
.msheet__item-desc { font-size: 0.8125rem; color: var(--pu-ink-soft); line-height: 1.35; }
.msheet__item-price { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; color: var(--pu-ink); }
body.msheet-open { overflow: hidden; }
.msite__foot { margin-top: auto; padding-top: 3rem; text-align: center; color: var(--pu-ink-soft); font-size: 0.75rem; }
.msite__foot a { color: var(--pu-ink); text-decoration: none; border-bottom: 1px solid var(--pu-border-light); }
.msite__foot-cta { display: inline-flex; align-items: center; margin: 0.625rem auto 0; padding: 0.5rem 0.875rem; border: 1px solid var(--pu-border-light) !important; border-radius: 62.4375rem; font-size: 0.75rem; background: rgba(255,255,255,.45); }
.msite__foot-cta:hover { border-color: var(--pu-champagne) !important; }
.msite__foot { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.msite .panel { max-width: 32.5rem; width: 100%; text-align: center; }
.skeleton { height: 0.875rem; border-radius: 0.375rem; background: linear-gradient(90deg, rgba(17,19,17,.06), rgba(17,19,17,.12), rgba(17,19,17,.06)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 380px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles[data-count="1"] { grid-template-columns: 1fr; } .tiles[data-count="3"] > :last-child, .tiles[data-count="5"] > :last-child { grid-column: span 2; } }