/* RubyPay landing page. Layout follows the approved 1536 px mockups and scales
   down with the viewport; type is set at reading sizes rather than the mockups'
   poster sizes. The phone layout follows the round 9 mockups.
   How it works (desktop) and Where it works hold on a sticky stage while main.js plays
   their scroll moves. */

:root {
  --sc-canvas: #12080C;
  --sc-surface: #2A0F18;
  --sc-ink: #FFFFFF;
  --sc-ink-soft: #BCA9AF;
  --sc-accent: #B0123F;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --sc-font-text: "Plus Jakarta Sans", system-ui, sans-serif;
  --sc-shadow-color: 340 60% 3%;

  --rose: #FF6B86;
  --ruby: #B0123F;
  --ruby-hi: #C8164B;
  --wine: #2A0F18;
  --wine-deep: #12080C;
  --base: #16020B;
  --tile: color-mix(in oklab, #4A1626 46%, transparent);
  --tile-line: color-mix(in oklab, var(--rose) 58%, transparent);

  /* One mockup pixel for layout: the mockups are 1536 x 1024, but a laptop browser window is
     wider than that ratio (about 1512 x 725 on a 1080p screen at 125%), so the layout scales
     with whichever of width or height is tighter. */
  --u: clamp(0.6px, min(100vw / 1536, 100svh / 940), 1px);
  /* One pixel of type. It follows the same squeeze more gently and never drops below 0.84. */
  --t: clamp(0.84px, min(100vw / 1536, 100svh / 820), 1px);
  --gutter: calc(90 * var(--u));
  --maxw: 1536px;
}

html { background: var(--base); scroll-padding-top: 88px; }
/* clip, not hidden: the full-width map must not add a sideways scroll, and sticky stages still work. */
body { background: var(--base); font-weight: 400; overflow-x: clip; }
/* Each section glows wine at the top and settles back to the base, as in the mockups. */
.how, .trip, .where, .safe, .faq, .waitlist, .foot { isolation: isolate; }
.how::before, .trip::before, .where::before, .safe::before, .faq::before, .foot::before {
  content: ""; position: absolute; z-index: -1; top: calc(-90 * var(--u)); bottom: calc(-90 * var(--u));
  left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background: radial-gradient(70% 55% at 50% 22%, #2C0513 0%, color-mix(in oklab, #2C0513 55%, var(--base)) 45%, var(--base) 100%);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.foot::before { top: 0; background: linear-gradient(180deg, var(--base) 0%, #260414 18%, #240414 100%); }
img { height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ruby); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline-color: var(--rose); }

.display {
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
  color: #fff;
}
.section-title { font-size: calc(58 * var(--t)); text-align: center; }
h3 { margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.lede { color: var(--sc-ink-soft); font-size: calc(19 * var(--t)); line-height: 1.5; text-wrap: pretty; }

section { position: relative; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ruby); color: #fff;
  font: 600 calc(16 * var(--t)) / 1 var(--sc-font-text);
  padding: 0 1.3em; height: 2.4em; white-space: nowrap; text-decoration: none;
  box-shadow: 0 2px 4px hsl(340 80% 6% / .3), 0 10px 24px -8px hsl(340 90% 30% / .45);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ruby-hi); } }

/* -------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: calc(50 * var(--u));
  height: calc(92 * var(--u)); padding: 0 calc(42 * var(--u)) 0 var(--gutter);
  transition: background-color 240ms var(--sc-ease-out), height 0ms;
}
.bar.is-solid { background: color-mix(in oklab, #12080C 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); height: calc(72 * var(--u)); }
.bar__mark { --m: calc(40 * var(--u)); display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: 800; font-size: calc(var(--m) * .617); gap: calc(var(--m) * .2); letter-spacing: -0.025em; line-height: 1; margin-right: auto; }
.bar__mark .mark, .foot__mark .mark { flex: none; width: var(--m); height: var(--m); }
.bar__nav { display: flex; gap: calc(38 * var(--u)); }
.bar__nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: calc(15.5 * var(--t)); }
.bar__nav a:hover { color: var(--rose); }
.bar__cta { font-size: calc(15 * var(--t)); height: calc(42 * var(--t)); padding: 0 calc(22 * var(--t)); }

/* ------------------------------------------------------------------- hero -- */
/* Copy and diorama sit together as one centred group, sized to fit the screen's height. */
.hero { overflow: clip; display: grid; min-height: min(100svh, calc(1000 * var(--u))); }
.hero__backdrop { position: absolute; inset: 0; }
.hero__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero__fade { position: absolute; inset: auto 0 0 0; height: 22%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--base)); }
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: calc(48 * var(--u));
  padding: calc(92 * var(--u)) var(--gutter) calc(30 * var(--u));
}
.hero__copy { position: relative; z-index: 2; width: calc(500 * var(--t)); }
.pill {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(7 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--tile-line); border-radius: 999px; background: color-mix(in oklab, #3C1020 70%, transparent);
  font-size: calc(14 * var(--t)); font-weight: 500;
}
.pill__dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #E8194E; box-shadow: 0 0 0 3px color-mix(in oklab, #E8194E 25%, transparent); }
.hero__title { font-size: calc(64 * var(--t)); line-height: 1.05; margin-top: calc(26 * var(--u)); }
.hero .lede { margin-top: calc(24 * var(--u)); max-width: calc(440 * var(--t)); }
.hero__art { position: relative; width: min(calc(1040 * var(--t)), calc((100svh - 120px) * 1.48), 62vw); will-change: transform; }
.hero__stage { position: relative; aspect-ratio: 1516 / 1023; }
.hero__stage > img { width: 100%; filter: drop-shadow(0 30px 40px hsl(340 80% 4% / .5)); }
/* The ruby glow under the plinth, behind the stall. */
.hero__glow { position: absolute; left: 12%; right: 12%; top: 66%; height: 30%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, hsl(345 100% 55% / .55), hsl(345 100% 45% / .18) 55%, transparent); }

/* Entrance, once on load: the copy rises in line by line, the stall springs up onto its plinth and
   the glow under it blooms. Only with html.motion (set in the head when motion is allowed). */
.motion .hero .rise { animation: hero-rise 800ms var(--spring) var(--d, 0ms) both; }
.motion .hero__stage { animation: hero-stall 1000ms var(--spring) 120ms both; }
.motion .hero__glow { animation: hero-bloom 1300ms var(--sc-ease-out) 300ms both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hero-stall { from { opacity: 0; transform: translateY(70px) scale(.92); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hero-bloom { from { opacity: 0; transform: scale(.5); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

/* A living stall, always on while the hero is on screen: the two bulbs glow and flicker, steam rises
   from the bowl, and blurred market lights drift behind. Placed in percent of the diorama. */
.hero__life { position: absolute; inset: 0; pointer-events: none; }
.bulb { position: absolute; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: radial-gradient(closest-side, hsl(40 100% 80% / .75), hsl(32 100% 60% / .25) 45%, transparent); mix-blend-mode: screen; opacity: .75; }
.bulb--a { left: 45.2%; top: 32.9%; }
.bulb--b { left: 58.5%; top: 32%; }
.steam { position: absolute; left: 62.8%; top: 60.6%; width: 2.6%; height: 0; }
.steam i { position: absolute; left: -50%; top: 0; width: 100%; aspect-ratio: .55; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 240 / .55), rgb(255 236 240 / 0)); opacity: 0; }
.bokeh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bokeh i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * var(--u)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, hsl(var(--h) 100% 70% / .5), transparent); opacity: .3; }
.motion .bulb { animation: bulb-flicker 3.7s steps(1, end) infinite; }
.motion .bulb--b { animation-duration: 4.9s; animation-delay: -1.3s; }
.motion .steam i { animation: steam-rise 3.6s ease-out infinite; }
.motion .steam i:nth-child(2) { animation-delay: 1.2s; left: -80%; }
.motion .steam i:nth-child(3) { animation-delay: 2.4s; left: -20%; }
.motion .bokeh i { animation: bokeh-drift var(--dur) ease-in-out var(--del) infinite alternate; }
.motion .hero:not(.is-live) :is(.bulb, .steam i, .bokeh i) { animation-play-state: paused; }
@keyframes bulb-flicker { 0% { opacity: .75; } 18% { opacity: .9; } 22% { opacity: .55; } 25% { opacity: .85; } 52% { opacity: .7; } 70% { opacity: .95; } 74% { opacity: .65; } 78% { opacity: .85; } }
@keyframes steam-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(25%, -210%) scale(1.5); } }
@keyframes bokeh-drift { 0% { opacity: .15; transform: translate(0, 0); } 50% { opacity: .6; } 100% { opacity: .2; transform: translate(var(--dx), var(--dy)); } }

/* ---------------------------------------------------------------- join form -- */
.join { position: relative; }
.join input {
  font: 400 calc(16 * var(--t)) / 1 var(--sc-font-text); color: #fff;
  background: transparent; border: 0; outline: none; min-width: 0;
}
.join input::placeholder { color: var(--sc-ink-soft); opacity: 1; }
.join--box {
  display: flex; align-items: center; margin-top: calc(36 * var(--u)); width: calc(440 * var(--t));
  padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) calc(18 * var(--u));
  border: 1px solid color-mix(in oklab, var(--rose) 45%, transparent); border-radius: calc(14 * var(--u));
  background: color-mix(in oklab, #3A1220 55%, transparent);
}
.join--box:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 30%, transparent); }
.join--box input { flex: 1; height: calc(46 * var(--t)); }
.join--box .btn { border-radius: calc(10 * var(--u)); height: calc(46 * var(--t)); font-size: calc(15.5 * var(--t)); padding: 0 calc(20 * var(--t)); }
.join__note { position: absolute; left: 0; top: calc(100% + 10px); font-size: calc(14 * var(--t)); color: var(--sc-ink-soft); min-height: 1.4em; }
.join__note.is-ok { color: #7EE2A8; }

/* -------------------------------------------------------------------- how -- */
.how { max-width: var(--maxw); margin: 0 auto; }
.how__stage {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(84 * var(--u)) var(--gutter) calc(24 * var(--u));
}
.how .section-title { font-size: calc(52 * var(--t)); }
/* The phone sits in the centre and the steps zigzag down beside it: step 1 top left, step 2
   middle right, step 3 bottom left. The left-hand steps mirror the right one, number nearest the phone. */
.how__body {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: repeat(3, 1fr);
  column-gap: calc(90 * var(--u)); margin-top: calc(36 * var(--u));
}
/* Desktop only: the phone layout stacks the steps under its swipe row. */
@media (min-width: 900px) {
  .how__body .device { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .how__body .how__steps { display: contents; }
  .how__body .how__steps li { max-width: calc(460 * var(--t)); align-self: center; }
  .how__body .how__steps li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .how__body .how__steps li:nth-child(2) { grid-column: 3; grid-row: 2; justify-self: start; }
  .how__body .how__steps li:nth-child(3) { grid-column: 1; grid-row: 3; }
  .how__body .how__steps li:nth-child(odd) { justify-self: end; grid-template-columns: 1fr auto; text-align: right; }
  .how__body .how__steps li:nth-child(odd) .how__n { order: 2; }
}

/* One phone, built in 3D: a silver face over twelve stacked edge layers. It turns to a new
   pose for each step (data-step, set by main.js) and floats gently while it waits. */
.device {
  --dw: min(calc(370 * var(--u)), calc((100svh - 215px) * 0.49));
  --r: calc(var(--dw) * 0.16);
  position: relative; width: var(--dw); aspect-ratio: 0.49; perspective: calc(var(--dw) * 5);
  /* Each pose turns the screen toward its step: left, right, then left again. */
  --ry: -24deg; --rx: 8deg; --rz: 2deg;
}
.device[data-step="1"] { --ry: 20deg; --rx: 6deg; --rz: -2deg; }
.device[data-step="2"] { --ry: -18deg; --rx: 7deg; --rz: 2deg; }
.device__float { position: absolute; inset: 0; transform-style: preserve-3d; animation: device-float 6s ease-in-out infinite; }
.device__body {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));
  transition: transform 1100ms cubic-bezier(.2, .8, .2, 1);
}
.device__edge {
  position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(90deg, #4f535a, #c9ccd1 18%, #7b7f86 50%, #d6d9dd 82%, #4a4e55);
  transform: translateZ(calc(var(--z) * -1.1px));
}
.device__face {
  position: absolute; inset: 0; border-radius: var(--r); transform: translateZ(1px);
  background: linear-gradient(145deg, #f4f5f7, #a3a7ad 38%, #eceef0 62%, #868a91);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), inset 0 0 0 3px rgb(0 0 0 / .25);
}
.device__screen {
  position: absolute; inset: 3.6% 4.2%; border-radius: calc(var(--r) * 0.82); overflow: hidden;
  background: #000; box-shadow: 0 0 0 calc(var(--dw) * 0.02) #060406;
}
.device__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateX(22%) scale(1.03);
  transition: opacity 500ms var(--sc-ease-out), transform 750ms cubic-bezier(.2, .8, .2, 1);
}
.device__shot.is-active { opacity: 1; transform: none; }
.device__shot.is-past { transform: translateX(-22%) scale(1.03); }
.device__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .16) 48%, transparent 60%);
  transform: translateX(-120%);
}
.device.is-turning .device__glare { animation: device-glare 1100ms cubic-bezier(.2, .8, .2, 1); }
.device__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -11%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(345 95% 46% / .7), hsl(345 95% 40% / .2) 60%, transparent);
  filter: blur(10px); animation: device-shadow 6s ease-in-out infinite;
}
@keyframes device-float { 50% { transform: translateY(calc(var(--dw) * -0.04)); } }
@keyframes device-shadow { 50% { transform: scale(.86); opacity: .7; } }
@keyframes device-glare { to { transform: translateX(120%); } }

.how__swipe, .how__dots { display: none; }

/* The steps beside the phone: the one on screen is lit. */
.how__steps { display: grid; gap: calc(36 * var(--u)); }
.how__steps li { display: grid; grid-template-columns: auto 1fr; column-gap: calc(18 * var(--t)); align-items: start; opacity: .38; transition: opacity 450ms var(--sc-ease-out); cursor: pointer; }
.how__steps li.is-active { opacity: 1; }
.how__n {
  display: inline-grid; place-items: center; width: calc(40 * var(--t)); height: calc(40 * var(--t)); border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--rose) 60%, transparent);
  font-weight: 700; font-size: calc(15 * var(--t));
  transition: background-color 450ms var(--sc-ease-out), border-color 450ms var(--sc-ease-out), box-shadow 450ms var(--sc-ease-out);
}
.how__steps li.is-active .how__n { background: #D0103F; border-color: #D0103F; box-shadow: 0 0 0 6px hsl(345 90% 45% / .18), 0 8px 24px -6px hsl(345 95% 45% / .7); }
.how__steps h3 { font-weight: 800; font-size: calc(28 * var(--t)); letter-spacing: -0.02em; line-height: 1.2; margin-top: calc(3 * var(--t)); }
.how__steps p { font-size: calc(17.5 * var(--t)); color: #E6DADD; line-height: 1.5; margin-top: calc(6 * var(--t)); }

/* ------------------------------------------------------------------- trip -- */
/* Made for the trip and Safe by design follow round 10: a title top left and big rounded cards,
   each holding one headline and one glossy object. Each object is built from separate layers, so
   main.js only adds state classes and these transitions move the layers, with a springy ease. */
:root { --spring: cubic-bezier(.34, 1.5, .64, 1); --spring-soft: cubic-bezier(.34, 1.3, .64, 1); }
.trip, .safe { max-width: var(--maxw); margin: calc(130 * var(--u)) auto 0; padding: 0 calc(88 * var(--u)); }
.trip__title, .safe__title { text-align: left; }
.tcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(17 * var(--u)); margin-top: calc(44 * var(--u)); }
.tcard {
  position: relative; overflow: hidden; container-type: size;
  height: min(calc(630 * var(--u)), calc(100svh - 190px));
  border-radius: calc(28 * var(--u));
  background: linear-gradient(180deg, #7E1030 0%, #5C0E27 48%, #3A0E1C 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rose) 22%, transparent), inset 0 1px 0 rgb(255 255 255 / .12), 0 30px 60px -34px hsl(345 90% 30% / .7);
  -webkit-tap-highlight-color: transparent;
}
/* A faint rose sheen across the glass. */
.tcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgb(255 190 205 / .1), transparent 38%); }
.tcard h3 { padding: calc(42 * var(--u)) calc(32 * var(--u)) 0; position: relative; z-index: 1; font-weight: 800; font-size: calc(30 * var(--t)); line-height: 1.16; letter-spacing: -0.02em; text-wrap: balance; }
/* The object's box keeps the mockup's proportions (the lower 330 x 363 of a 330 x 630 card) and
   shrinks when the card is short, so it never runs into the headline. */
.obj {
  position: absolute; bottom: 0; left: 0; right: 0; margin-inline: auto;
  height: min(110cqw, calc(100cqh - 150 * var(--t))); aspect-ratio: 330 / 363;
  transition: transform 700ms var(--spring);
}
.part { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.part img { display: block; width: 100%; }
.tcard.is-acting .obj { transform: scale(1.04); }

/* Entrances: each part waits in its start pose until its card gets .is-in (html.motion is set
   by main.js only when motion is allowed, so without it every card shows its final state). */
.part { transition: transform 850ms var(--spring) var(--in, 0ms), opacity 350ms ease var(--in, 0ms); }
.motion .tcard:not(.is-in) .part { opacity: 0; }
.motion .tcard:not(.is-in) .coin { transform: translateY(-120%); }
.motion .tcard:not(.is-in) .chip { transform: translate(-18%, 22%) rotate(-12deg) scale(.86); }
.motion .tcard:not(.is-in) .gift { transform: translateY(-70%); }
.motion .tcard:not(.is-in) .tbar { transform: scaleY(0); }
/* Part placements from placements.py (media/website/scrollcraft/builds/rubypay), measured from trip-a (each card's object box is its lower 330 x 363). */
.coin--top { --x: 31.8%; --y: -3.6%; --w: 68.6%; }
.coin--mid { --x: 16.4%; --y: 34.7%; --w: 72.0%; }
.coin--low { --x: 0.6%; --y: 61.9%; --w: 73.6%; }
.chip { --x: 1.8%; --y: 5.1%; --w: 96.8%; }
.gift__lid { --x: 6.2%; --y: -2.3%; --w: 95.6%; }
.gift__body { --x: 7.3%; --y: 23.6%; --w: 93.6%; }
.tbar--1 { --x: 1.8%; --y: 52.6%; --w: 34.6%; }
.tbar--2 { --x: 30.4%; --y: 30.5%; --w: 33.4%; }
.tbar--3 { --x: 59.7%; --y: 5.2%; --w: 38.2%; }
.gift { --x: 0%; --y: 0%; --w: 100%; height: 100%; }
.gift__lid, .gift__body { left: var(--x); top: var(--y); width: var(--w); }
.coin--low { --in: 0ms; } .coin--mid { --in: 110ms; } .coin--top { --in: 220ms; }
.tbar { transform-origin: 50% 100%; }
.tbar--1 { --in: 0ms; } .tbar--2 { --in: 110ms; } .tbar--3 { --in: 220ms; }

/* Split: the three coins slide apart, one per friend, each landing with a small bounce. */
.coin img { transition: transform 750ms var(--spring) var(--act, 0ms); }
.coin--top { --act: 0ms; } .coin--mid { --act: 90ms; } .coin--low { --act: 180ms; }
.tcard.is-acting .coin--top img { transform: translate(-8%, -46%) rotate(-7deg); }
.tcard.is-acting .coin--mid img { transform: translate(7%, -14%) rotate(5deg); }
.tcard.is-acting .coin--low img { transform: translate(-3%, 8%) rotate(-3deg); }

/* Price: the chip flips like a card, from the local amount on its front to the home amount on its back. */
.chip { perspective: 900px; }
.chip__flip { position: relative; display: block; transform-style: preserve-3d; transition: transform 900ms var(--spring-soft); }
.chip__face { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.chip__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* The amounts are SVG text in the chip image's own 720 x 547 units, so they always scale with the
   chip and sit on its glass (centred at 360, 274, tilted with it). */
.chip__text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 6px hsl(345 90% 25% / .6)); }
.chip__text text { fill: #fff; font: italic 800 86px var(--sc-font-display); letter-spacing: -1px; text-anchor: middle; dominant-baseline: central; }
.chip__text .chip__big { font-size: 124px; }
.tcard.is-acting .chip__flip { transform: rotateY(180deg); }

/* Gift: the lid pops up with a bounce and a few ruby sparkles rise and fade. */
.gift__body, .gift__lid { position: absolute; display: block; }
.gift__lid { transition: transform 700ms var(--spring); transform-origin: 50% 100%; }
.tcard.is-acting .gift__lid { transform: translateY(-24%) rotate(-7deg); }
.spark {
  position: absolute; left: var(--x); top: 34%; width: 3.2%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFE3EA 0%, #FF6B86 45%, transparent 72%);
  box-shadow: 0 0 10px 3px hsl(348 100% 65% / .7);
}
.tcard.is-acting .spark { animation: spark-rise 1100ms cubic-bezier(.2, .7, .3, 1) calc(160ms + var(--d)) both; }
@keyframes spark-rise {
  0% { opacity: 0; transform: translateY(0) scale(.4); }
  25% { opacity: 1; transform: translateY(-40%) scale(1.1); }
  100% { opacity: 0; transform: translateY(-420%) scale(.6); }
}

/* Track: the bars dip, and rise again when the action ends. Transitions
   (not keyframes), so a tap mid-way sends them back from where they are. */
.tbar img { transform-origin: 50% 100%; transition: transform 750ms var(--spring) var(--act, 0ms); }
.tbar--1 { --act: 0ms; } .tbar--2 { --act: 90ms; } .tbar--3 { --act: 180ms; }
.tcard.is-acting .tbar--1 img { transform: scaleY(.62); }
.tcard.is-acting .tbar--2 img { transform: scaleY(.55); }
.tcard.is-acting .tbar--3 img { transform: scaleY(.7); }

.fine { color: var(--sc-ink-soft); font-size: calc(14 * var(--t)); margin-top: calc(28 * var(--u)); }

/* ------------------------------------------------------------------ where -- */
/* The map takes four fifths of the width and the Pay at countries stand in a column beside it.
   The map shrinks when the screen is short, so the held section always fits one screen
   (the map is 1400 x 513, so 2.73 wide per unit of height). */
.where { margin-top: calc(110 * var(--u)); }
.where__stage {
  --map-w: min(calc((100vw - 112 * var(--u) - 40 * var(--u)) * 0.8), calc((100svh - 250px) * 2.73));
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(84 * var(--u)) calc(56 * var(--u)) calc(20 * var(--u));
}
.where__grid {
  display: grid; grid-template-columns: var(--map-w) minmax(0, calc(var(--map-w) / 4)); justify-content: center;
  column-gap: calc(40 * var(--u)); align-items: center; margin-top: calc(24 * var(--u));
}
.where__label { font-weight: 800; font-size: calc(26 * var(--t)); letter-spacing: -0.02em; }
.where__canvas { position: relative; margin-top: calc(14 * var(--u)); }
.where__map { position: relative; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Dots are zero-length strokes with round caps. --home and --away (0 to 1, set by main.js) light
   the three home countries and the four Pay at countries. */
.map__dots { fill: none; stroke: #E8456A; stroke-linecap: round; }
.map__land { opacity: .72; }
.map__home .map__dots { stroke: color-mix(in oklab, #FFB3C3 calc(var(--home, 1) * 100%), #E8456A); }
.map__away .map__dots { stroke: color-mix(in oklab, #FFE3EA calc(var(--away, 1) * 100%), #E8456A); }
.map__away { filter: drop-shadow(0 0 calc(var(--away, 1) * 4px) hsl(348 100% 70% / .9)); }
.routes__line path { fill: none; stroke: var(--rose); stroke-width: 3.2; stroke-dasharray: 12 9; stroke-linecap: round; }
.routes__heads path { fill: var(--rose); }
.routes__dots circle { fill: #fff; stroke: color-mix(in oklab, var(--rose) 70%, transparent); stroke-width: 6; paint-order: stroke; }
.routes__ring { fill: none; stroke: var(--rose); stroke-width: 2.5; filter: drop-shadow(0 0 8px hsl(348 100% 70% / .8)); }
.routes__glow { fill: hsl(348 100% 70% / .1); }
.routes__ring, .routes__glow { transform-box: fill-box; transform-origin: center; }
.where__pills { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; display: inline-flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u));
  border: 1px solid var(--tile-line); border-radius: calc(14 * var(--u));
  --tag-bg: color-mix(in oklab, #4A1626 70%, #12080C); background: var(--tag-bg);
  font-weight: 700; font-size: calc(15.5 * var(--t)); white-space: nowrap;
  box-shadow: var(--sc-e2);
}
/* Each "Pay from" pill shows its flag (the Solana pill differs, below) faded in on its left, fading out toward the label on the right.
   Every mark fills the same box (the SVGs crop to fit), and every pill has the same width. */
.tag[data-route] {
  --mark-w: 40%;
  justify-content: flex-end; text-align: right;
  background:
    linear-gradient(to right, color-mix(in oklab, var(--tag-bg) 62%, transparent), var(--tag-bg) var(--mark-w)),
    var(--mark) left center / var(--mark-w) 100% no-repeat,
    var(--tag-bg);
}
.tag[data-route="us"] { --mark: url(/assets/pay-from/us.svg); }
.tag[data-route="au"] { --mark: url(/assets/pay-from/au.svg); }
.tag[data-route="br"] { --mark: url(/assets/pay-from/br.svg); }
/* The Solana logo has no field like the flags: it sits larger on the left, running off the bottom edge. */
.tag[data-route="sol"] {
  background:
    linear-gradient(to right, color-mix(in oklab, var(--tag-bg) 55%, transparent), var(--tag-bg) 62%),
    url(/assets/pay-from/solana.svg) left 7% top 18% / auto 135% no-repeat,
    var(--tag-bg);
}
@media (min-width: 900px) {
  .where__pills .tag[data-route] { width: calc(280 * var(--u)); padding-inline: calc(18 * var(--u)); }
  .where__pills .tag[data-route="sol"] { width: calc(220 * var(--u)); }
}
/* Positions come from worldmap.mjs (inline right/left and top, as map percentages). */
.where__pills .tag { translate: 0 -50%; }
@media (min-width: 900px) { .where__pills .tag[data-route="au"] { translate: -50% -50%; } }
.where__at { align-self: center; }
.where__tiles { display: grid; gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u)); }
.country {
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  border: 1px solid var(--tile-line); border-radius: calc(18 * var(--u));
  background: color-mix(in oklab, #3A1220 40%, transparent);
}
.country__flag { flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.country b { display: block; font-weight: 700; font-size: calc(18 * var(--t)); letter-spacing: -0.01em; }
.soon {
  display: inline-block; margin-top: calc(6 * var(--u)); padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--rose) 50%, transparent);
  background: color-mix(in oklab, var(--ruby) 42%, transparent); color: #FFF0F3; font-size: calc(12.5 * var(--t));
}

/* ------------------------------------------------------------------- safe -- */
.scards { --k: 1.337; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20 * var(--u)); margin-top: calc(44 * var(--u)); }
.scard {
  position: relative; overflow: hidden; container-type: size;
  height: min(calc(336 * var(--u)), calc((100svh - 200px) / 2));
  border-radius: calc(26 * var(--u));
  background: #1A0A10; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rose) 22%, transparent);
  transition: opacity 500ms ease, transform 850ms var(--spring) var(--in, 0ms);
}
/* The brighter border of the lit card, faded in on its own layer. */
.scard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--rose) 75%, transparent), 0 0 30px -6px hsl(348 100% 65% / .35) inset; opacity: 0; transition: opacity 450ms ease; }
.scard h3 { padding: calc(40 * var(--u)) calc(38 * var(--u)) 0; position: relative; z-index: 1; font-weight: 800; font-size: calc(28 * var(--t)); line-height: 1.18; letter-spacing: -0.02em; max-width: calc(10em + 76 * var(--u)); text-wrap: balance; }
@media (min-width: 1200px) { .scard h3 .nowrap { white-space: nowrap; } }
/* Step 3's line break doesn't fit beside the phone on narrow laptops. */
@media (min-width: 900px) and (max-width: 1199px) { .how p br { display: none; } }
.scard__obj {
  position: absolute; right: calc(var(--r) * 1cqw); bottom: calc(var(--b) * 1cqh);
  /* --w is a share of the card's width in the mockup; on a card shorter than the mockup's
     proportions (--k = width / height) the object follows the height instead. */
  width: min(calc(var(--w) * 1cqw), calc(var(--w) * var(--k) * 1cqh));
  transition: transform 700ms var(--spring);
}
.scard__obj img { position: relative; display: block; width: 100%; }
.scard__glow { position: absolute; inset: -15%; background: radial-gradient(50% 50% at 50% 55%, hsl(348 100% 60% / .45), transparent 70%); opacity: 0; transition: opacity 500ms ease; }
/* A lit card: its rose border brightens, its object lifts and glows, and the other cards dim slightly.
   Mouse: hovering lights a card. Touch: tapping a card lights it (.is-lit, set in main.js), and its
   object also pops with a small springy wobble. */
.scards:has(.scard.is-lit) .scard:not(.is-lit) { opacity: .62; }
.scard.is-lit::after, .scard.is-lit .scard__glow { opacity: 1; }
.scard.is-lit .scard__obj { transform: translateY(-5%) scale(1.05); }
.scard.is-lit .scard__obj img { animation: scard-pop 650ms var(--spring); }
@keyframes scard-pop { 0% { transform: none; } 30% { transform: scale(.9) rotate(-4deg); } 65% { transform: scale(1.06) rotate(2deg); } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .scards:has(.scard:hover) .scard:not(:hover) { opacity: .62; }
  .scard:hover::after, .scard:hover .scard__glow { opacity: 1; }
  .scard:hover .scard__obj { transform: translateY(-5%) scale(1.05); }
}
/* Rise in, staggered, when the section enters; the stagger is dropped once they're in. */
.motion .scards:not(.is-in) .scard { opacity: 0; transform: translateY(48px) scale(.97); }
.scards:not(.is-settled) .scard:nth-child(2) { --in: 100ms; }
.scards:not(.is-settled) .scard:nth-child(3) { --in: 200ms; }
.scards:not(.is-settled) .scard:nth-child(4) { --in: 300ms; }
.scards:not(.is-settled) .scard:nth-child(5) { --in: 400ms; }
.scards:not(.is-settled) .scard:nth-child(6) { --in: 500ms; }
/* Object placements from placements.py, measured from safe-b: bottom right, some bleeding off. */
.scard[data-obj="lock"] { --w: 48.9; --r: -0.6; --b: -7.3; }
.scard[data-obj="finger"] { --w: 59.7; --r: 0.0; --b: -16.5; }
.scard[data-obj="id"] { --w: 70.9; --r: 0.4; --b: -6.0; }
.scard[data-obj="gauge"] { --w: 68.5; --r: -1.0; --b: -5.6; }
.scard[data-obj="bank"] { --w: 60.7; --r: 1.7; --b: -7.9; }
.scard[data-obj="refund"] { --w: 56.2; --r: 2.0; --b: -6.8; }

/* -------------------------------------------------------------------- faq -- */
/* Each question is its own soft tile; the open one lifts and its icon turns to a minus.
   main.js slides answers open and closed. */
.faq {
  max-width: 1240px; margin: calc(200 * var(--u)) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: calc(380 * var(--t)) 1fr; column-gap: calc(60 * var(--u)); align-items: start;
}
.faq__title { font-size: calc(60 * var(--t)); position: sticky; top: calc(120 * var(--u)); }
.faq__list { display: grid; gap: calc(12 * var(--u)); }
.faq__list details {
  border: 1px solid color-mix(in oklab, var(--rose) 20%, transparent); border-radius: calc(18 * var(--t));
  background: color-mix(in oklab, #3A1220 32%, transparent);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
.faq__list details[open] {
  background: color-mix(in oklab, #4A1626 60%, transparent); border-color: color-mix(in oklab, var(--rose) 50%, transparent);
  box-shadow: 0 22px 44px -28px hsl(345 90% 35% / .8);
}
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: calc(22 * var(--t)) calc(22 * var(--t)) calc(22 * var(--t)) calc(26 * var(--t));
  font-weight: 700; font-size: calc(19 * var(--t)); letter-spacing: -0.01em; border-radius: inherit;
}
.faq__list summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq__list details:not([open]):hover { border-color: color-mix(in oklab, var(--rose) 40%, transparent); background: color-mix(in oklab, #3A1220 48%, transparent); }
  .faq__list details:not([open]) summary:hover .faq__icon { border-color: var(--rose); }
}
.faq__list summary:focus-visible { outline-offset: -3px; }
.faq__a { overflow: hidden; }
.faq__a p { color: var(--sc-ink-soft); font-size: calc(16.5 * var(--t)); line-height: 1.65; max-width: 60ch; padding: 0 calc(26 * var(--t)) calc(24 * var(--t)); }
.faq__icon {
  flex: none; position: relative; width: calc(32 * var(--t)); height: calc(32 * var(--t)); border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--rose) 55%, transparent);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out), rotate 400ms cubic-bezier(.2, .8, .2, 1);
}
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 1.5px; border-radius: 2px; background: var(--rose); translate: -50% -50%; transition: rotate 400ms cubic-bezier(.2, .8, .2, 1), background-color 300ms; }
.faq__icon::after { rotate: 90deg; }
details[open] .faq__icon { background: var(--ruby); border-color: var(--ruby); rotate: 180deg; }
details[open] .faq__icon::before, details[open] .faq__icon::after { background: #fff; }
details[open] .faq__icon::after { rotate: 0deg; }

/* --------------------------------------------------------------- waitlist -- */
/* The globe section keeps its own wine ground. */
.waitlist { background: radial-gradient(80% 70% at 50% 40%, #2A0513 0%, var(--base) 100%); margin-top: calc(150 * var(--u)); min-height: calc(1024 * var(--u)); overflow: clip; display: grid; place-items: start center; }
.waitlist__globe {
  position: absolute; left: 50%; top: calc(40 * var(--u)); width: calc(1590 * var(--u)); translate: -50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.waitlist__globe img { width: 100%; opacity: .55; }
/* Light runs along the globe's lines into its Southeast Asia hub, without end. */
.pulses { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The lines fade out behind the headline and form, so no streak ever crosses the text. */
.pulses {
  --hole: radial-gradient(ellipse 25% 19% at 50% 36%, transparent 55%, #000 100%);
  -webkit-mask-image: var(--hole); mask-image: var(--hole);
}
.pulses__tracks path { fill: none; stroke: hsl(348 100% 72% / .42); stroke-width: 1.6; }
.pulses__runs path {
  fill: none; stroke: #FFE1E8; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 10 200; stroke-dashoffset: 10; opacity: 0;
  filter: drop-shadow(0 0 5px #FF6B86);
  animation: pulse-run var(--d) cubic-bezier(.5, 0, .8, 1) var(--t) infinite;
}
/* The pulses run only while the section is on screen (main.js sets .is-live). */
.motion .waitlist:not(.is-live) .pulses__runs path, .motion .waitlist:not(.is-live) .pulses__wave { animation-play-state: paused; }
@keyframes pulse-run {
  0% { stroke-dashoffset: 10; opacity: 0; }
  12% { opacity: 1; }
  92% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
.pulses__cities circle { fill: #FFF2F5; filter: drop-shadow(0 0 5px #FF6B86); }
.pulses__hub { fill: #FFF2F5; filter: drop-shadow(0 0 8px #FF6B86) drop-shadow(0 0 16px #FF2D5A); }
.pulses__wave { fill: none; stroke: #FF8FA6; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse-wave 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.pulses__wave--late { animation-delay: 1.2s; }
@keyframes pulse-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(5.5); opacity: 0; } }
.waitlist__glow { position: absolute; left: 50%; top: calc(250 * var(--u)); width: calc(1300 * var(--u)); height: calc(420 * var(--u)); translate: -50% 0; background: radial-gradient(50% 50% at 50% 50%, #12020Add 0%, #12020A99 45%, transparent 75%); }
.waitlist::before, .waitlist::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 0; pointer-events: none; }
.waitlist::before { top: 0; background: linear-gradient(to bottom, var(--base), transparent); }
.waitlist::after { bottom: 0; background: linear-gradient(to top, var(--base), transparent); }
.waitlist__inner { position: relative; z-index: 1; text-align: center; padding-top: calc(285 * var(--u)); }
.waitlist__title { font-size: calc(84 * var(--t)); }
.waitlist .lede { font-size: calc(20 * var(--t)); margin-top: calc(16 * var(--u)); }
.join--split { display: flex; gap: calc(14 * var(--u)); justify-content: center; margin-top: calc(38 * var(--u)); }
.join--split input {
  width: calc(420 * var(--t)); height: calc(56 * var(--t)); padding: 0 calc(26 * var(--t)); font-size: calc(17 * var(--t));
  border: 2px solid var(--rose); border-radius: 999px; background: color-mix(in oklab, #12080C 70%, transparent);
}
.join--split input:focus-visible { box-shadow: 0 0 0 4px color-mix(in oklab, var(--rose) 30%, transparent); }
.join--split .btn { height: calc(56 * var(--t)); font-size: calc(17 * var(--t)); font-weight: 700; padding: 0 calc(30 * var(--t)); }
.join--split .join__note { left: 0; right: 0; text-align: center; font-size: calc(14 * var(--t)); }

/* ----------------------------------------------------------------- footer -- */
/* The skyline is 230/1536 of the footer's width; the logo starts just under its lit stalls. */
.foot { position: relative; max-width: var(--maxw); margin: 0 auto; padding: calc(min(100vw, 1536px) * 0.115 + 40 * var(--u)) calc(115 * var(--u)) calc(60 * var(--u)); }
.foot__skyline { position: absolute; left: 0; right: 0; top: calc(30 * var(--u)); opacity: .9; }
.foot__skyline img { width: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 25%, #000 60%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.foot__top { display: grid; grid-template-columns: 1fr calc(240 * var(--u)) calc(160 * var(--u)); }
.foot__mark { --m: calc(54 * var(--u)); display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: 800; font-size: calc(var(--m) * .617); gap: calc(var(--m) * .2); letter-spacing: -0.025em; line-height: 1; }
.foot__brand p { color: var(--sc-ink-soft); font-size: calc(18 * var(--t)); line-height: 1.45; margin-top: calc(14 * var(--u)); max-width: calc(340 * var(--u)); }
.foot__x { display: inline-grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 1.5px solid #fff; border-radius: 50%; color: #fff; margin-top: calc(22 * var(--u)); }
.foot__x svg { width: 46%; height: 46%; }
.foot__col { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding-top: calc(22 * var(--u)); }
.foot__col h2 { font-size: calc(12.5 * var(--t)); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 calc(18 * var(--u)); }
.foot__col a { color: #E6DADD; text-decoration: none; font-size: calc(16 * var(--t)); }
.foot__col a:hover, .foot__end a:hover { color: var(--rose); }
.foot__legal { margin-top: calc(58 * var(--u)); padding-top: calc(42 * var(--u)); border-top: 2px solid color-mix(in oklab, var(--rose) 70%, transparent); }
.foot__copy { font-size: calc(14 * var(--t)); }
.foot__fine { color: var(--sc-ink-soft); font-size: calc(13 * var(--t)); margin-top: calc(12 * var(--u)); }
.foot__end { display: flex; justify-content: space-between; margin-top: calc(70 * var(--u)); }
.foot__end a { color: #fff; text-decoration: none; font-size: calc(14 * var(--t)); }

/* ------------------------------------------------------------------ phone -- */
@media (max-width: 899px) {
  :root { --g: 22px; }
  html { scroll-padding-top: 64px; }
  .section-title, .how .section-title { font-size: 34px; }

  .bar { height: 64px; padding: 0 var(--g); gap: 12px; }
  .bar.is-solid { height: 60px; background: color-mix(in oklab, #12080C 95%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bar__nav { display: none; }
  .bar__mark { --m: 34px; }
  .bar__cta { font-size: 14px; height: 32px; padding: 0 14px; }
  .btn { font-size: 16px; }

  .hero { min-height: 0; display: block; }
  .hero__backdrop { top: 44%; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
  .hero__backdrop img { object-position: 78% 50%; }
  .hero__inner { display: block; padding: 96px var(--g) 0; }
  .hero__copy { width: auto; }
  .pill { font-size: 13px; padding: 5px 12px; gap: 8px; }
  .pill__dot { width: 9px; height: 9px; }
  .hero__title { font-size: 40px; line-height: 1.04; margin-top: 12px; }
  .hero .lede { font-size: 16.5px; margin-top: 12px; max-width: none; }
  .lede { font-size: 16px; }
  .join input { font-size: 16px; }
  .join--box { display: grid; gap: 14px; width: auto; margin-top: 22px; padding: 0; border: 0; background: none; }
  .join--box input { height: 50px; padding: 0 18px; border: 1px solid color-mix(in oklab, var(--rose) 45%, transparent); border-radius: 14px; background: color-mix(in oklab, #3A1220 55%, transparent); }
  .join--box input:focus-visible { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose) 30%, transparent); }
  .join--box:focus-within { box-shadow: none; }
  .join--box .btn { height: 50px; border-radius: 14px; font-size: 16px; }
  .join__note { position: static; margin-top: 2px; font-size: 14px; }
  .hero__art { width: 128%; margin: 6px 0 0 -14%; }

  /* How it works on phone: no hold. The three screens are a swipe row with the neighbours
     peeking in, dots under it, then the text of the step in the middle. */
  .how.sc-act--pinned { height: auto !important; }
  .how.sc-act--pinned > .how__stage { position: relative; height: auto; overflow: visible; }
  .how__stage { padding: 0 var(--g); }
  .how .section-title { font-size: 34px; }
  .how__body { display: block; margin-top: 18px; }
  .how__body .device { display: none; }
  .how__swipe {
    position: relative; display: flex; margin: 0 calc(-1 * var(--g)); padding: 14px 24vw 30px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .how__swipe::-webkit-scrollbar { display: none; }
  .how__slide { flex: 0 0 52vw; scroll-snap-align: center; }
  .frame {
    display: block; aspect-ratio: 0.49; padding: 3.2%; border-radius: 15% / 7.4%;
    background: linear-gradient(145deg, #f4f5f7, #a3a7ad 38%, #eceef0 62%, #868a91);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 26px 40px -20px hsl(345 95% 42% / .75);
    transform: scale(.84) translateY(5%); opacity: .75;
    transition: transform 650ms var(--spring), opacity 400ms ease;
  }
  .frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 13% / 6.4%; background: #000; box-shadow: 0 0 0 3px #060406; }
  .how__slide.is-active .frame { transform: none; opacity: 1; }
  .how__dots { display: flex; justify-content: center; gap: 4px; }
  .how__dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .how__dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9C8890; transition: background-color 300ms ease, transform 400ms var(--spring); }
  .how__dots button[aria-current="true"]::before { background: var(--rose); transform: scale(1.25); }
  .how__body .how__steps { width: 100%; max-width: none; margin-top: 14px; text-align: center; display: grid; }
  .how__steps li { grid-area: 1 / 1; grid-template-columns: 1fr; justify-items: center; row-gap: 8px; cursor: default; }
  .how__steps li:not(.is-active) { opacity: 0; visibility: hidden; }
  .how__n { width: 32px; height: 32px; font-size: 15px; }
  .how__steps h3 { font-size: 22px; margin: 0; }
  .how__steps p { font-size: 15.5px; margin-top: 4px; }

  /* Made for the trip on phone: a sideways swipe row, the next card peeking in at the right. */
  .trip, .safe { margin-top: 72px; padding: 0 var(--g); }
  .tcards {
    display: flex; gap: 12px; margin: 22px calc(-1 * var(--g)) 0; padding: 0 var(--g);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .tcards::-webkit-scrollbar { display: none; }
  .tcard { flex: 0 0 82vw; scroll-snap-align: start; height: min(500px, max(380px, 56svh)); border-radius: 24px; }
  .tcard h3 { font-size: 25px; padding: 28px 24px 0; }
  .obj { height: min(110cqw, calc(100cqh - 120px)); }
  .fine { font-size: 13px; margin-top: 18px; }

  .where { margin-top: 70px; }
  .where.sc-act--pinned { height: auto !important; }
  .where.sc-act--pinned > .where__stage { position: relative; height: auto; overflow: visible; }
  .where__stage { padding: 66px var(--g) 12px; }
  .where .section-title { text-align: left; font-size: 30px; }
  .where__grid { grid-template-columns: 1fr; row-gap: 16px; margin-top: 10px; }
  .where__from { display: flex; flex-direction: column; }
  .where__canvas { display: contents; }
  .where__map { order: -1; margin: 0 calc(-1 * var(--g)); }
  .where__label { font-size: 18px; margin-top: 14px; }
  .where__pills { position: static; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; margin-top: 10px; pointer-events: auto; }
  .where__pills .tag { position: static; translate: none; font-size: 13px; gap: 8px; padding: 9px 10px; border-radius: 10px; white-space: normal; line-height: 1.2; }
  .where__pills .tag[data-route="au"] { order: 1; }
  .where__pills .tag[data-route="br"] { order: 2; }
  .where__pills .tag[data-route="sol"] { order: 3; }
  .where__at .where__label { margin-top: 0; }
  .where__tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .country { gap: 10px; padding: 12px 10px 12px 12px; border-radius: 12px; }
  .country__flag { width: 34px; height: 34px; }
  .country b { font-size: 15.5px; }
  .soon { font-size: 11.5px; padding: 2px 9px; margin-top: 4px; white-space: nowrap; }

  /* Safe by design on phone: two columns of cards, object at the bottom right (same placements as
     desktop, sized by the card's width). */
  .scards { --k: 0.84; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .scard { height: 200px; border-radius: 18px; }
  .scard h3 { font-size: 17px; line-height: 1.2; padding: 16px 14px 0; max-width: none; }

  .faq { display: block; margin-top: 80px; padding: 0 var(--g); }
  .faq__title { font-size: 40px; margin: 0 0 20px; position: static; }
  .faq__list { gap: 10px; }
  .faq__list details { border-radius: 14px; }
  .faq__list summary { font-size: 16.5px; padding: 17px 14px 17px 18px; gap: 14px; }
  .faq__a p { font-size: 15px; padding: 0 18px 18px; }
  .faq__icon { width: 28px; height: 28px; }

  .waitlist { margin-top: 70px; min-height: 0; padding-bottom: 330px; }
  .waitlist__globe { width: 1240px; top: 10px; left: 47%; }
  .waitlist__globe img { opacity: .6; }
  /* Phone: only the routes below the form run, so no mask is needed, and the light carries no
     blur filters; both keep the always-running pulses cheap to paint. */
  .pulses { -webkit-mask-image: none; mask-image: none; }
  .pulses__tracks path:nth-child(-n+2), .pulses__runs path:nth-child(-n+4) { display: none; }
  .pulses__runs path, .pulses__cities circle, .pulses__hub { filter: none; }
  .pulses__runs path { stroke-width: 4; }
  .waitlist__glow { top: 20px; width: 520px; height: 440px; }
  .waitlist__inner { padding: 40px var(--g) 0; width: 100%; }
  .waitlist__title { font-size: 50px; line-height: 1.02; }
  .waitlist .lede { font-size: 16.5px; margin-top: 12px; color: #CDBDC2; }
  .join--split { display: grid; justify-content: stretch; gap: 14px; margin-top: 28px; }
  .pulses { --hole: radial-gradient(ellipse 22% 25% at 51% 24%, transparent 60%, #000 100%); }
  .join--split input { width: 100%; height: 52px; font-size: 16px; padding: 0 20px; border-width: 2px; }
  .join--split .btn { height: 52px; font-size: 16px; width: 100%; }
  .join--split .join__note { font-size: 14px; }

  .foot { padding: 30px var(--g) 60px; }
  .foot__skyline { display: none; }
  .foot__top { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__mark { --m: 42px; }
  .foot__brand p { font-size: 15.5px; margin-top: 8px; }
  .foot__x { width: 36px; height: 36px; margin-top: 14px; }
  .foot__col { gap: 8px; padding-top: 0; }
  .foot__col h2 { font-size: 13px; margin-bottom: 4px; }
  .foot__col a { font-size: 15px; padding: 2px 0; }
  .foot__legal { margin-top: 26px; padding-top: 20px; }
  .foot__copy { font-size: 14px; }
  .foot__fine { font-size: 12.5px; line-height: 1.5; margin-top: 10px; }
  .foot__end { margin-top: 22px; }
  .foot__end a { font-size: 13.5px; }
}



/* Where it works on phone plays once, on its own, the first time the map comes on screen, instead
   of following the scroll. main.js adds these classes in turn and they stay: s-home (home countries
   light, pills in), s-routes (the three routes draw together), s-ring (arrowheads and ring),
   s-away (the four countries light), s-tiles (tiles in). */
.where.is-loop .map__home .map__dots, .where.is-loop .map__away .map__dots { stroke: #E8456A; transition: stroke 600ms ease; }
.where.is-loop.s-home .map__home .map__dots { stroke: #FFB3C3; }
.where.is-loop.s-away .map__away .map__dots { stroke: #FFE3EA; }
.where.is-loop .map__away { filter: none; }
.where.is-loop [data-reveal] { stroke-dashoffset: 100; }
.where.is-loop.s-routes [data-reveal] { stroke-dashoffset: 0; transition: stroke-dashoffset 2000ms cubic-bezier(.45, 0, .25, 1); }
.where.is-loop .routes__heads path { opacity: 0; }
.where.is-loop.s-ring .routes__heads path { opacity: 1; transition: opacity 200ms ease; }
.where.is-loop .routes__ring, .where.is-loop .routes__glow { opacity: 0; transform: scale(.55); }
.where.is-loop.s-ring .routes__ring, .where.is-loop.s-ring .routes__glow { opacity: 1; transform: none; transition: opacity 500ms ease, transform 750ms var(--spring); }
.where.is-loop .where__pills .tag, .where.is-loop .country { transition: opacity 450ms ease, transform 650ms var(--spring); }
.where.is-loop:not(.s-pills) .where__pills .tag, .where.is-loop:not(.s-tiles) .country { opacity: 0; transform: translateY(12px); }
.where.is-loop .country:nth-child(2) { transition-delay: 80ms; }
.where.is-loop .country:nth-child(3) { transition-delay: 160ms; }
.where.is-loop .country:nth-child(4) { transition-delay: 240ms; }

/* Reduced motion: nothing holds, floats or travels. The map shows its finished state, the phone
   faces front on step 1 and its steps can be picked by tapping. */
@media (prefers-reduced-motion: reduce) {
  .sc-act--pinned { height: auto !important; }
  .sc-act--pinned > .sc-stage { position: relative; }
  .device { --ry: 0deg; --rx: 0deg; --rz: 0deg; }
  .device__float, .device__shadow, .device.is-turning .device__glare { animation: none; }
  .device__body, .device__shot, .how__steps li, .how__n, .faq__list details, .faq__icon, .faq__icon::before, .faq__icon::after { transition: none; }
  .frame, .how__dots button::before, .obj, .part, .part img, .chip__flip, .gift__lid, .scard, .scard::after, .scard__obj, .scard__glow { transition: none; }
  .spark { animation: none; }
  .hero .rise, .hero__stage, .hero__glow, .bulb, .steam i, .bokeh i { animation: none; }
  .scard:hover .scard__obj, .scard.is-lit .scard__obj { transform: none; }
  .scard.is-lit .scard__obj img { animation: none; }
  .pulses__runs path { animation: none; opacity: 0; }
  .pulses__wave { animation: none; opacity: 0; }
}