/* ==========================================================================
   tabu — Your Home for the Interchain (local rebuild)
   Everything inside the stage is laid out in "video pixels": the reference
   recording is 848×464, and 1em == 1 video px (font-size: var(--u)).
   Containers use em for geometry; only text leaves change font-size.
   ========================================================================== */

@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --u: min(calc(100vw / 848), calc(100vh / 464));
  --navy: #191c46;
  --purple: #094eff;  /* the app's own palette */
  --orange: #ff7f1e;
  --pink: #ff7eca;
  --yellow: #fece00;
  --green: #5bfe9e;
  --light: #f6f6f6;
  --ink: #1b1b1f;
  --white: #f7f7f9;
  --blue: #3d6af2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--navy); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: "General Sans", system-ui, -apple-system, sans-serif;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

#scroll-space { width: 1px; pointer-events: none; }

/* ---------- stage & layers ---------- */
#stage { position: fixed; inset: 0; overflow: hidden; font-size: var(--u); background: var(--navy); }
.layer { position: absolute; inset: 0; }
.abs { position: absolute; left: 0; top: 0; }
.hidden { visibility: hidden; }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; font-size: var(--u); pointer-events: none; }
.ld-logo { display: flex; overflow: hidden; padding: 0 2em; }
.ld-logo span { display: inline-block; color: #fff; will-change: transform; padding: 5em 0; }
.ld-logo svg { display: block; height: 44em; fill: currentColor; overflow: visible; }

/* ---------- header ---------- */
/* header links jump instead of scrolling through every scene: a short veil in the destination's colour covers the cut */
#jumpVeil { position: fixed; inset: 0; z-index: 45; background: var(--navy); opacity: 0; pointer-events: none; transition: opacity .36s ease-out; }
#jumpVeil.on { opacity: 1; pointer-events: auto; transition: opacity .22s ease-in; }
/* right after a jump, what is on screen is already in place: no reveal replays behind the veil */
.jump-instant #after [data-rv], .jump-instant #after .split *, .jump-instant #after .foot-mark, .jump-instant #after .bcard { transition: none !important; }
#hdr { position: fixed; left: 0; right: 0; top: 0; height: 0; z-index: 50; font-size: var(--hu, var(--u)); color: var(--white); transition: color .08s linear; pointer-events: none; } /* scroll-driven: no lag (QA 09-28) */
#hdr.dark { color: var(--ink); }
#hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40em; background: var(--hbg, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); opacity: 0; transition: opacity .3s ease, background-color .08s linear; }
#hdr.bar::before { opacity: 1; }
#hdr.pre { opacity: 0; }
.hdr-row { position: absolute; left: 0; right: 0; top: 0; height: 40em; will-change: transform; }
.hdr-left { position: absolute; left: 22em; top: 9.5em; height: 21em; display: flex; align-items: center; }
.menu-btn { position: absolute; left: 0; top: 0; width: 21em; height: 21em; border-radius: 50%; border: 1px solid currentColor; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6em; pointer-events: auto; }
.menu-btn i { display: block; width: 9em; height: 1px; background: currentColor; }
.hdr-nav { display: flex; align-items: center; gap: 5.3em; white-space: nowrap; pointer-events: auto; }
.hdr-nav a { display: block; font-size: 8.4em; font-weight: 500; letter-spacing: -.01em; opacity: .92; transition: opacity .2s; }
.hdr-nav a:hover { opacity: 1; }
.hdr-nav a[aria-current] { opacity: 1; -webkit-text-stroke: .35px currentColor; } /* heavier look without a wider word: the nav doesn't shift between pages */
.is-compact .hdr-nav .lead { max-width: calc(100vw - 162 * var(--hu, 1px)); } /* phones: a long (or translated) label is clipped before it reaches Launch campaign */
.hdr-nav .lead { display: none; font-size: 8.4em; font-weight: 600; letter-spacing: -.01em; overflow: hidden; line-height: 1.25; height: 1.25em; padding-right: .1em; }
.hdr-nav .lead span { display: block; }
.is-compact .hdr-nav .lead { display: block; }
.is-compact .hdr-nav .lead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sponsor actions (same targets as the business portal): Log in + Launch campaign */
.hdr-btn { font-size: 6.4em; height: 2.5em; padding: 0 1em; border-radius: 1.25em; display: flex; align-items: center; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: transform .25s ease, opacity .2s, background-color .2s; }
.hdr-btn.ghost { border: 1px solid currentColor; opacity: .92; }
.hdr-btn.ghost:hover { opacity: 1; }
.hdr-btn.solid { background: var(--orange); color: #fff; margin-right: .3em; }
.hdr-btn.solid:hover { transform: scale(1.05); }
.hdr-cta { display: none; }
/* language switcher: globe pill beside the app buttons (utility cluster, stays pinned while scrolling) */
.lang { position: relative; margin-right: 3em; }
.lang-btn { height: 16em; display: flex; align-items: center; gap: 2.4em; padding: 0 5.5em 0 4.5em; border: 1px solid currentColor; border-radius: 11em; opacity: .9; transition: opacity .2s, background-color .2s; }
.lang-btn:hover, .lang.open .lang-btn { opacity: 1; }
.lang-btn .globe { width: 8em; height: 8em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-btn span { font-size: 6.6em; font-weight: 600; letter-spacing: .02em; }
.lang-btn i { width: 3.6em; height: 3.6em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-1em) rotate(45deg); transition: transform .25s; }
.lang.open .lang-btn i { transform: translateY(.6em) rotate(225deg); }
.lang-menu { position: absolute; right: -2em; top: calc(100% + 8em); width: 268em; padding: 11em 10em 10em; background: #fff; color: var(--ink); border-radius: 16em; box-shadow: 0 14em 40em rgba(10, 12, 40, .28); opacity: 0; transform: translateY(-4em) scale(.98); transform-origin: 92% 0; pointer-events: none; visibility: hidden; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s; }
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.lm-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 5em 8em; margin-bottom: 6em; border-bottom: 1px solid #ececf1; }
.lm-head b { font-size: 11.5em; font-weight: 600; letter-spacing: -.03em; }
.lm-head small { font-size: 7em; font-weight: 500; color: #8a8a96; }
.lm-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em 3em; }
.lm-grid a { display: flex; flex-direction: column; padding: 4.6em 5.5em 4.8em; border-radius: 8em; transition: background-color .15s; }
.lm-grid a b { font-size: 8.4em; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }
.lm-grid a small { font-size: 6.4em; font-weight: 500; color: #8a8a96; margin-top: .25em; }
.lm-grid a:hover { background: #f2f2f6; }
.lm-grid a[aria-current] { background: var(--ink); color: #fff; }
.lm-grid a[aria-current] small { color: rgba(255, 255, 255, .6); }
.hdr-right { position: absolute; right: 21.5em; top: 12em; display: flex; align-items: center; gap: 2em; pointer-events: auto; } /* one row, always at the top right */
.store { width: 16em; height: 16em; border-radius: 50%; background: var(--orange); display: grid; place-items: center; color: #fff; transition: transform .25s ease; }
.store:hover { transform: scale(1.12); }
.store svg { width: 8.6em; height: 8.6em; fill: #fff; opacity: .9; transition: opacity .2s; }
.store:hover svg { opacity: 1; }

/* ---------- explore more ---------- */
#explore { position: fixed; left: 21em; bottom: 20em; z-index: 50; font-size: var(--hu, var(--u)); width: 154em; height: 41em; border-radius: 8.5em; background: var(--orange); color: #fff; display: flex; align-items: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#explore.on { pointer-events: auto; }
.ex-ic { position: relative; width: 42em; height: 41em; display: grid; place-items: center; }
.ex-ic svg { position: absolute; width: 20em; height: 20em; transition: opacity .3s, transform .3s; }
.ex-ic svg:not(.on) { opacity: 0; transform: scale(.6); }
.mini-face { position: absolute; inset: 0; transition: opacity .3s; }
.mini-face:not(.on) { opacity: 0; }
.mini-face .eye2.l { transform: translate(16.10em, 25.86em) scale(0.1069); }
.mini-face .eye2.r { transform: translate(29.84em, 25.80em) scale(0.1060); }
.mini-face .eye2 { will-change: auto; }
.ex-div { width: 1px; height: 21em; background: rgba(255,255,255,.45); }
.ex-txt { margin-left: calc(10.5 * var(--u)); white-space: nowrap; font-size: 9em; font-weight: 500; letter-spacing: -.01em; }
.ex-arr { position: absolute; right: 12em; top: 50%; width: 9em; height: 9em; margin-top: -4.5em; transition: transform .25s; }
#explore:hover .ex-arr { transform: translateX(3em); }

/* ---------- intro / hero ---------- */
#intro { background: var(--navy); overflow: hidden; z-index: 1; }
.hero-flow { position: absolute; left: 0; top: 0; right: 0; height: 0; z-index: 4; will-change: transform; }
.hero-title { position: absolute; left: 21.5em; top: 8.5em; }
.hero-title h1 { font-size: calc(var(--hf, 83) * 1em); font-weight: 600; letter-spacing: -.052em; line-height: .97; white-space: nowrap; color: var(--white); }
.hero-title em { font-style: normal; color: var(--pink); }
/* rotating accent word: each word slides up through a mask, like the line reveals */
.hero-title .line { padding-bottom: .24em; margin-bottom: -.24em; } /* room for descenders (y, g, p) */
.hero-title .rot { display: inline-block; position: relative; vertical-align: top; overflow: hidden; padding: 0 .18em .24em 0; margin: 0 -.18em -.24em 0; } /* room for descenders + last-letter overhang */
/* finale: ANYTHING takes over the headline block (decorative; the H1 keeps its text) */
.hero-big { position: absolute; left: 0; bottom: 8.5em; overflow: hidden; padding: 0 24em 10em 0; margin: 0 -24em -10em 0; pointer-events: none; visibility: hidden; } /* same baseline as line 2; room for the G's overhang */
.hero-big span { display: block; font-size: calc(var(--bf, 149.5) * 1em); font-weight: 600; letter-spacing: -.045em; line-height: .78; color: var(--yellow); white-space: nowrap; will-change: transform; }
.hero-title .rot-w { display: inline-block; white-space: nowrap; }
.hero-title .rot-w.next { position: absolute; left: 0; top: 0; }
.line { display: block; overflow: hidden; padding: 0 .12em .14em; margin: 0 -.12em -.14em; }
.line > span { display: inline-block; will-change: transform; }
.hero-logo { position: absolute; left: 515em; top: 13.6em; display: block; color: #fff; pointer-events: auto; }
.hero-logo .sm-logo { display: block; height: 15.4em; width: 55.4em; fill: currentColor; }
.hero-down { position: absolute; left: 805.5em; top: 184.5em; /* end of the menu row (the top row belongs to the header buttons) */ width: 21em; height: 21em; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; }
.hero-down svg { width: 8em; height: 8em; stroke: #fff; fill: none; stroke-width: 2; }
.tagline { position: absolute; left: 510em; top: 116.5em; /* beside the headline; ANYTHING pushes it down 67 to 183.5 */ z-index: 4; will-change: transform; }
.tagline p { font-size: 13em; line-height: 1.13; font-weight: 500; letter-spacing: -.028em; width: 12.4em; color: var(--white); }

.mascot { position: absolute; inset: 0; background: var(--purple); clip-path: path("M0 0Z"); z-index: 2; }
#m2 { background: var(--orange); }

.intro-copy { position: absolute; left: 0; right: 0; top: calc(50% - 33.5em); text-align: center; z-index: 3; will-change: transform; }
.intro-copy p { font-size: 34em; line-height: 1.02; font-weight: 600; letter-spacing: -.022em; color: var(--white); }
/* "It's that EASY" under the copy: EASY grows and dissolves as the next panel rises over it */
.intro-easy { position: absolute; left: 0; right: 0; top: calc(50% + 40em); text-align: center; z-index: 6; will-change: transform, opacity; pointer-events: none; visibility: hidden; }
.intro-easy span { display: block; font-size: 34em; line-height: 1.02; font-weight: 600; letter-spacing: -.022em; color: var(--white); }
.intro-easy em { display: block; font-style: normal; font-size: 64em; font-weight: 600; letter-spacing: -.05em; line-height: .9; color: var(--pink); margin-top: .02em; transform-origin: 50% 40%; will-change: transform, opacity, color; }

/* flat eyes (purple mascot) — anchored at bottom-centre */
.eye { position: absolute; left: 0; top: 0; width: 100em; height: 50em; margin: -50em 0 0 -50em; transform-origin: 50% 100%; will-change: transform; }
.eye-in { position: absolute; inset: 0; background: #fff; border-radius: 50em 50em 0 0; overflow: hidden; transform-origin: 50% 100%; }
.pupil { position: absolute; left: 50%; bottom: -24.75em; width: 49.5em; height: 49.5em; margin-left: -24.75em; border-radius: 50%; background: #000; }

/* round eyes (orange mascot) — geometry measured from the recording (units = video px at scale 1).
   The element's transform origin is the lid anchor point (57, 78). */
.eye2 { position: absolute; left: 0; top: 0; width: 114em; height: 84em; margin: -78em 0 0 -57em; transform-origin: 57em 78em; will-change: transform; }
.eye2-in { position: absolute; inset: 0; overflow: hidden; }
.eye2.l .eye2-in { clip-path: polygon(0 0, 114em 0, 114em 79.13em, 0 52.26em); }
.eye2.r .eye2-in { clip-path: polygon(0 0, 114em 0, 114em 52.76em, 0 79.48em); }
.eye2 .white { position: absolute; left: 0; top: 0; width: 114em; height: 114em; border-radius: 50%; background: #fff; }
.eye2 .pup { position: absolute; left: 5.1em; top: 8.61em; width: 66.1em; height: 66.1em; border-radius: 50%; background: #000; }
.eye2 .pup::after { content: ""; position: absolute; left: 11.94em; top: 10.96em; width: 17em; height: 17em; border-radius: 50%; background: #fff; }
.eye2.l .pup { left: 4.63em; top: 8.78em; width: 66.28em; height: 66.28em; }
.eye2.l .pup::after { left: 11.51em; top: 10.93em; width: 17.1em; height: 17.1em; }
.eye2.r .pup { left: 5.56em; top: 8.43em; width: 65.94em; height: 65.94em; }
.eye2.r .pup::after { left: 12.39em; top: 11em; width: 16.88em; height: 16.88em; }

/* ---------- tabu phone (intro + interface) ---------- */
.tphone { position: absolute; left: 0; top: 0; width: 182em; height: 366em; margin: -183em 0 0 -91em; font-size: calc(var(--u) * var(--k, 1)); border-radius: 31em; background: #d8d8dc; transform-origin: 50% 50%; }
.tphone .bzl { position: absolute; inset: 1.6em; border-radius: 29.5em; background: #000; }
.tphone .scr { position: absolute; inset: 7.1em; border-radius: 24em; background: #000; overflow: hidden; }
.tphone .scr.spl { background: #fff; }
/* real app screenshots (sound.me master) are phone mockups cropped at the bottom: they always rise out of the bottom edge */
.shot-phone { position: absolute; left: 0; top: 0; width: 214em; will-change: transform; transform-origin: 50% 100%; border-radius: 12.8% / 6%; box-shadow: 0 18em 36em rgba(10, 8, 40, .28); } /* phone-shaped shadow: filter: drop-shadow shows a tinted box in Safari */
.shot-phone img { display: block; width: 100%; height: auto; }
img.shot-phone { display: block; height: auto; }
/* the mascot is 140pt on a 390pt-wide screen (sound-me-mobile SplashScreen); --my lifts it during the zoom */
.spl-pos { position: absolute; left: 50%; top: calc(50% + var(--my, 0) * 1em); width: 0; height: 0; transform: scale(var(--ms, 1)); }
.spl-face { position: absolute; left: -30.1em; top: -30.1em; width: 60.2em; height: 60.2em; overflow: visible; }
.spl-bounce { animation: splBounce 1.2s ease-in-out infinite alternate; }
.spl-look { animation: splLook 6.7s ease-in-out infinite; }
.spl-blink { animation: splBlink 3.94s linear 2s infinite; }
@keyframes splBounce { from { transform: translateY(-3.6px); } to { transform: translateY(3.6px); } }
@keyframes splLook {
  0% { transform: translate(0, 0); } 11.94%, 17.91% { transform: translate(-2.16px, 0); } 29.85%, 35.82% { transform: translate(2.16px, -.72px); }
  44.78%, 53.73% { transform: translate(0, .72px); } 64.18%, 68.66% { transform: translate(-1.44px, 0); } 79.1%, 85.07% { transform: translate(1.44px, -.72px); }
  92.54%, 100% { transform: translate(0, 0); }
}
@keyframes splBlink { 0%, 88.83% { opacity: 1; } 90.61% { opacity: 0; } 92.89%, 95.94% { opacity: 1; } 97.72% { opacity: 0; } 100% { opacity: 1; } }
a.tphone { display: block; }
.tphone .sb { position: absolute; background: #c4c4c8; width: 1.6em; border-radius: .8em; }
.tphone .ttl { position: absolute; left: 0; right: 0; top: 37.5em; text-align: center; }
#p2 .ttl { top: 38.15em; }
.tphone .ttl p { font-size: 21.27em; line-height: .96; font-weight: 500; letter-spacing: -.05em; color: #fff; }
.tphone .ttl b { font-weight: 500; color: var(--purple); letter-spacing: -.056em; }
.tphone .waves { position: absolute; left: 0; top: 0; width: 168em; height: 356em; }

/* ---------- flow: chains + juno ---------- */
#flow { z-index: 5; will-change: transform; }
.panel { position: absolute; left: 0; right: 0; height: 100%; overflow: hidden; }
#chains { top: 0; background: var(--light); color: var(--ink); }
#juno { top: 100%; background: var(--purple); color: var(--white); }
.sec-label { display: none; }
.sec-label span { position: absolute; top: 0; font-size: 9em; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; }
.sec-label .num { left: calc(50% - 5 * var(--u)); }
.sec-label .ttl { left: calc(50% + 87 * var(--u)); }

.counter { position: absolute; left: 0; right: 0; top: calc(50% - 92em); color: var(--ink); z-index: 1; text-align: center; }
.cnt-row { position: relative; display: flex; justify-content: center; align-items: flex-start; height: 106em; }
.dgroup { display: inline-flex; transform: scaleX(1.07); transform-origin: 50% 0; } /* the original digits are wider than General Sans' */
.cnt-row .gt { position: absolute; left: 2em; top: 35em; width: 47em; height: 52em; fill: currentColor; }
.dcol { font-size: 126em; font-weight: 600; letter-spacing: -.072em; line-height: .86; }
.dcol { display: inline-block; height: .86em; overflow: hidden; position: relative; }
.dcol .strip { display: flex; flex-direction: column; will-change: transform; }
.dcol .strip span { display: block; height: .86em; }
.dplus { font-size: 92em; font-weight: 600; letter-spacing: -.06em; line-height: .86; margin-left: .04em; align-self: flex-start; padding-top: .06em; }
.cnt-sub { font-size: 35em; font-weight: 600; letter-spacing: -.035em; line-height: 1; margin-top: .31em; white-space: nowrap; }
.cnt-note { font-size: 11em; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; margin-top: 1.1em; opacity: .62; }

.chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.chip { position: absolute; left: 0; top: 0; width: 68em; height: 68em; margin: -34em 0 0 -34em; will-change: transform; }
.chip svg { width: 100%; height: 100%; overflow: visible; }
.chip .ic { transition: opacity .35s ease; }
.chip.small .ic { opacity: 0; }
.chip image { image-rendering: auto; }

.juno-in { position: absolute; inset: 0; will-change: transform; }
.marquee { position: absolute; left: 0; right: 0; top: calc(50% - 87em); height: 124em; }
.mq-track { position: absolute; left: 0; top: 0; height: 124em; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.mq-word { font-size: 104em; font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--white); padding: 0 .235em; }
.mq-hex { width: 108em; height: 110em; flex: none; margin: 0 1.5em; }
.and-more { position: absolute; left: 0; right: 0; top: calc(50% + 56em); text-align: center; }
.and-more span { font-size: 34.5em; font-weight: 600; letter-spacing: -.03em; }
.and-more a { display: inline-block; pointer-events: auto; transition: opacity .2s; }
.is-portrait .and-more span { display: inline-block; font-size: 25em; max-width: 12em; line-height: 1.05; text-wrap: balance; }
.and-more a:hover { opacity: .8; }
.mq-hex.eyes svg .ic path:first-child { fill: #fff; }

/* ---------- features ---------- */
#features { background: var(--light); color: var(--ink); z-index: 4; overflow: hidden; }
.easy { position: absolute; left: 0; right: 0; top: calc(50% - 49.5em); text-align: center; z-index: 5; will-change: transform; }
.easy p { font-size: 34em; line-height: 1.06; font-weight: 600; letter-spacing: -.028em; color: var(--ink); }
.ftext { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform, opacity; }
.ftext .eyebrow { font-size: 8.6em; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.ftext h3 { font-size: 35em; font-weight: 600; line-height: 1.005; letter-spacing: -.03em; margin-top: .375em; white-space: nowrap; }
.c-orange { color: var(--orange); }
.c-pink { color: var(--pink); }
.c-purple { color: var(--purple); }
.c-yellow { color: var(--yellow); }
.card { position: absolute; left: 0; top: 0; width: 350em; height: 342em; margin: -171em 0 0 -175em; border-radius: 68.5em; z-index: 2; will-change: transform; overflow: hidden; }
.card.pink { background: var(--pink); }
.card.purple { background: var(--purple); }
.card.yellow { background: var(--yellow); }
#m2 { z-index: 3; }

/* real app screenshots (sound.me master). They are cropped at the bottom, so each one sits low
   and the card's edge cuts it — the same "sinking phone" look the live site uses. */
/* real app screens (Pixel 7, framed): tall, so they rise from the card's bottom edge with a slight lean */
.shot { position: absolute; left: 50%; bottom: -118em; width: 190em; margin-left: -95em; }
.shot.tilt { width: 176em; margin-left: -88em; transform: rotate(-7deg); transform-origin: 50% 100%; }
.shot.tilt .shot-img { border-radius: 12.8% / 6%; box-shadow: 0 14em 30em rgba(10, 8, 40, .3); } /* was a drop-shadow filter on the wrapper: Safari tints a box around it */
.shot-img { display: block; width: 100%; height: auto; }
.shot-img.flat { border: 5.5em solid #1d1d21; border-bottom: 0; border-radius: 30em 30em 0 0; background: #fff; }
#fp0.shot { top: 50%; bottom: auto; margin-top: -130em; will-change: transform; }
/* sponsor steps: real screenshots of the web checkout, shown as a window that runs off the card's edge */
.shot.web { left: 40em; top: 58em; bottom: auto; width: 520em; margin: 0; border-radius: 13em; overflow: hidden; background: #fff; box-shadow: 0 14em 36em rgba(20, 10, 40, .22); }
.shot.web img { display: block; width: 100%; height: auto; }
.shot.web.tall { left: 60em; width: 230em; }
#fp0.shot.web { left: 50%; top: 50%; margin: -113em 0 0 -135em; }
#fp0.shot.tilt { left: 50%; top: 50%; bottom: auto; margin: -76em 0 0 -88em; } /* level with the other cards' phones (Alex 09-29) */
/* feature phone (small, screenshot-style) */
.fphone { position: absolute; left: 50%; top: 50%; width: 132em; height: 265em; margin: -132.5em 0 0 -66em; border-radius: 21em; background: #cfd0d5; will-change: transform; }
.fphone .fbz { position: absolute; inset: 1.1em; border-radius: 20em; background: #0c0c0e; }
.fphone .fscr { position: absolute; inset: 5em; border-radius: 16em; overflow: hidden; background: #fff; color: #111; }
.fphone .notch { position: absolute; left: 50%; top: 0; width: 38em; height: 8em; margin-left: -19em; background: #0c0c0e; border-radius: 0 0 5.5em 5.5em; z-index: 3; }
.fphone .home { position: absolute; left: 50%; bottom: 2.5em; width: 38em; height: 1.4em; margin-left: -19em; border-radius: 1em; background: #111; z-index: 3; }

/* ---------- interface ---------- */
#iface { background: var(--light); z-index: 3; overflow: hidden; }
/* "Download [phone] the app": the words sit either side of the phone so they stay readable when it arrives */
.uf { position: absolute; left: 0; right: 0; top: calc(50% - 33em); }
.uf .line { position: absolute; top: 0; }
.uf .line > span { font-size: 64em; font-weight: 600; letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.uf .line > span { font-size: 58em; }
.uf .l1 { right: calc(50% + 112em); text-align: right; }
.uf .l2 { left: calc(50% + 112em); text-align: left; }
.uf .l1 > span { color: var(--purple); }
.uf .l2 > span { color: var(--ink); }
#p2shot { width: 196em; z-index: 3; pointer-events: none; }
/* finale phone = a download screen in the app's own look (white, yellow mascot from the app splash) */
.p2-frame { height: 394em; border-radius: 33.4em; background: #121214; padding: 7.7em; box-shadow: inset 0 0 0 1px #77777e; }
.p2-scr { position: relative; height: 100%; border-radius: 26em; background: #fff; color: var(--ink); overflow: hidden; text-align: center; padding: 58em 12em 0; font-size: var(--u); }
.p2-mascot { width: 60em; height: 60em; margin: 0 auto; }
.p2-mascot .spl-face { position: static; width: 100%; height: 100%; }
.p2-t { font-size: 18em; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: .4em; }
.p2-s { font-size: 7.8em; font-weight: 500; line-height: 1.3; opacity: .7; margin-top: 1em; }
.p2-r { font-size: 7.4em; font-weight: 600; margin-top: 1.2em; }
.p2-r span { color: var(--yellow); letter-spacing: .05em; margin-right: .3em; }
.p2-dl { position: absolute; left: 12em; right: 12em; bottom: 52em; display: flex; flex-direction: column; gap: 6em; pointer-events: auto; }
.p2-btn { display: flex; align-items: center; gap: 6em; height: 27em; padding: 0 10em; border-radius: 14em; background: var(--ink); color: #fff; transition: transform .2s; }
.p2-btn:hover { transform: scale(1.03); }
.p2-btn > span:first-child svg { width: 12em; height: 12em; fill: #fff; }
.p2-btn > span:last-child { display: flex; flex-direction: column; font-size: 9.5em; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; text-align: left; }
.p2-btn small { font-size: .6em; font-weight: 500; opacity: .7; }
#p2 { z-index: 2; }

/* ======================================================================
   Responsive layouts (class set on <html> by main.js from the viewport):
   - default     landscape, the cinematic 848×464 composition
   - .is-compact the menu text would be < ~11px → links move into the ☰ menu
   - .is-portrait phones + iPad portrait: 470×900 design canvas, stacked hero
   ====================================================================== */
.hero-big .pbr { display: none; }
.is-compact .hdr-nav > a:not(.lead) { display: none; }
.is-compact .hdr-btn.ghost { display: none; }
.is-portrait .hdr-cta { display: flex; position: absolute; right: 5.85em; top: 1.13em; font-size: 8.4em; height: 2.5em; padding: 0 1.05em; align-items: center; border-radius: 1.25em; background: var(--orange); color: #fff; font-weight: 600; white-space: nowrap; pointer-events: auto; }
.menu-open .hdr-cta { visibility: hidden; }
.is-compact .menu-btn { pointer-events: auto; }

.is-portrait .hero-title { left: 22em; top: calc(var(--ht, 72) * 1em); }
.is-portrait .hero-logo { left: 22em; top: 13.6em; }
.is-portrait .hero-down { display: none; }
.is-portrait .tagline { left: 22em; top: calc(var(--tt, 250) * 1em); }
.is-portrait .tagline p { font-size: max(15.5em, 14px); width: min(24em, calc(100vw - 44 * var(--u))); }
.is-portrait .hero-big { top: 0; bottom: auto; }
.is-portrait .hero-big span { line-height: .8; }
.is-portrait .hero-big .pbr { display: inline; }
.is-portrait .hdr-left { right: 22em; }
.is-portrait .menu-btn { left: auto; right: 0; }
.is-portrait .hdr-right { display: none; }
.is-portrait .intro-copy p, .is-portrait .easy p { font-size: 24em; }
.is-portrait .intro-easy { top: calc(50% + 34em); }
.is-portrait .intro-easy span { font-size: 24em; }
.is-portrait .intro-easy em { font-size: 48em; }
.is-portrait .cnt-note { font-size: max(14px, 13em); opacity: .72; }
.is-portrait .ftext .eyebrow { font-size: max(14px, 8.6em); } /* the story canvas scales to ~0.75 on phones: 6px eyebrows otherwise */
.is-portrait .uf .line { left: 0; right: 0; text-align: center; }
.is-portrait .uf { top: calc(50% - 250em); }
.is-portrait .uf .l1 { top: 0; }
.is-portrait .uf .l2 { top: 62em; }
.is-portrait .ftext { clip-path: none !important; }

/* ☰ menu overlay (all layouts) */
.menu-ov { position: fixed; inset: 0; z-index: 45; background: var(--navy); color: var(--white); font-size: var(--hu, var(--u)); display: flex; flex-direction: column; justify-content: safe center; padding: 60em 26em 40em; gap: 26em; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; overflow-y: auto; }
.menu-open .menu-ov { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu-open #hdr { color: var(--white) !important; }
.menu-open #explore { opacity: 0 !important; pointer-events: none; }
.menu-ov nav { display: flex; flex-direction: column; gap: 6em; }
.menu-ov nav a { display: block; overflow: hidden; padding: 0 .12em .14em; margin: 0 -.12em -.14em; }
.menu-ov nav a span { display: block; font-size: 30em; font-weight: 600; letter-spacing: -.035em; line-height: 1.12; transform: translateY(110%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.menu-open .menu-ov nav a span { transform: none; }
.menu-open .menu-ov nav a:nth-child(2) span { transition-delay: .05s; }
.menu-open .menu-ov nav a:nth-child(3) span { transition-delay: .1s; }
.menu-open .menu-ov nav a:nth-child(4) span { transition-delay: .15s; }
.menu-ov nav a:hover span { color: var(--pink); }
.ov-ctas { display: flex; flex-wrap: wrap; gap: 6em; }
.ov-langs summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4em; font-size: 10em; font-weight: 600; opacity: .9; }
.ov-langs summary::-webkit-details-marker { display: none; }
.ov-langs summary::after { content: ""; width: .42em; height: .42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .25s; }
.ov-langs[open] summary::after { transform: translateY(.1em) rotate(225deg); }
.ov-lang { display: grid; grid-template-columns: repeat(auto-fill, minmax(88em, 1fr)); gap: 4em; margin-top: 10em; }
.ov-lang a { font-size: 9.5em; font-weight: 500; padding: .5em 1em; border: 1px solid rgba(255, 255, 255, .3); border-radius: 2em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-lang a[aria-current] { background: var(--white); color: var(--navy); border-color: var(--white); opacity: 1; }
.ov-apps { display: flex; gap: 6em; }
.ov-apps .store { width: 30em; height: 30em; }
.ov-apps .store svg { width: 14em; height: 14em; }
.menu-btn i { transition: transform .3s ease; }
.menu-open .menu-btn i:first-child { transform: translateY(1.3em) rotate(45deg); }
.menu-open .menu-btn i:last-child { transform: translateY(-1.3em) rotate(-45deg); }
.menu-open .menu-btn { opacity: 1 !important; }
.menu-open .hdr-nav > .lead, .menu-open .hdr-right .lang { visibility: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  #explore, #hdr { transition: none; }
}

/* sub-page header over an orange section: the orange pill and store buttons turn ink so they stay visible (QA 09-28) */
#hdr.on-orange .hdr-btn.solid, #hdr.on-orange .store, #hdr.on-orange .hdr-cta { background: var(--ink); }

/* homepage load (QA 09-28): the head script decides before first paint whether the intro plays */
.no-intro #loader { display: none; }
.intro-pending #hdr { opacity: 0; }
.intro-pending #stage > *:not(#loader) { visibility: hidden; }  /* slow networks: blue only until main.js sets the intro's start */
.intro-pending .hero-title .line > span { transform: translateY(135%); }
.intro-pending #heroLogo, .intro-pending #heroDown, .intro-pending #tagline p { opacity: 0; }
.intro-pending .ld-logo span { transform: translateY(115%); }
html:not(.sm-ready) body:not(.subpage) #after { visibility: hidden; }

.is-compact .hdr-nav { pointer-events: none; }   /* compact: the (hidden) nav row sat over the ☰ and swallowed taps (QA 09-29) */
.is-compact .menu-btn { z-index: 2; }
.lm-grid a b[dir=rtl] { text-align: left; }

/* cookie banner (the live site's consent: js/consent.js) */
.ck { position: fixed; right: 16px; bottom: 16px; z-index: 44; width: min(372px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 22px;
      background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(10, 8, 40, .18), 0 0 0 1px rgba(10, 8, 40, .06);
      font-size: 14px; line-height: 1.45; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
.ck.on { opacity: 1; transform: none; }
.ck-t { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.ck-s { margin: 0; opacity: .75; }
.ck-s a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ck-b { display: flex; gap: 8px; margin: 14px 0 0; }
.ck-btn { flex: 1; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
          font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.ck-btn.solid { background: var(--ink); color: #fff; }
.ck-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
@media (max-width: 560px) { .ck { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; } }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }