/* ==========================================================================
   BudPing — site styles
   ==========================================================================
   Written whole, once. The previous file had been edited by a series of
   find-and-slice deletions, one of which ran with an end marker it could
   not find; that made the end index minus one and silently cut off
   everything after it. It happened more than once, which is why whole
   sections kept losing their styling.

   Ordered by the page: tokens, keyframes, base, chrome, then each scene
   in the order it is scrolled through. The palette is the app's own,
   from src/components/brand/logo.ts and src/core/theme/tokens.ts.
   ========================================================================== */

:root {
  --sora: 'Sora', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;

  /* the mark */
  --leather: #0A0D0F;
  --pocket: #12171A;
  --card-lit: #BFFBFF;
  --card: #55DEF8;
  --card-deep: #16A7CC;
  --card-dark: #0A7194;
  --chip: #D9B45B;
  --lip: #C4CED5;

  /* the app's semantics */
  --jade: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --violet: #7c6cf0;

  --gut: clamp(22px, 5vw, 86px);
  --out: cubic-bezier(0.16, 1, 0.3, 1);

  --ground: #05161B;
  --on-ground: #e9f6fa;
}

/* ==========================================================================
   Keyframes
   ==========================================================================
   All of them, here, belonging to no component. One defined beside the
   thing that used it went missing when that thing was replaced, and the
   rule referencing it silently did nothing.
   ========================================================================== */

@keyframes slideUp  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes driftA   { to { transform: translate3d(12vw, 9vh, 0) scale(1.18); } }
@keyframes driftB   { to { transform: translate3d(-11vw, -8vh, 0) scale(0.88); } }
@keyframes float    { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes twinkle  { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.8; } }
@keyframes unroll   { to { transform: translateY(-50%); } }
@keyframes mutter   { 0% { opacity: 0; transform: translateY(6px); } 10%, 38% { opacity: 0.85; transform: none; } 52%, 100% { opacity: 0; } }
@keyframes wheel    { 0% { opacity: 0; transform: translate(-50%, 0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 13px); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes turn     { to { transform: rotate(360deg); } }
@keyframes ring     { 0% { transform: scale(0.72); opacity: 0; } 18% { opacity: 0.75; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ctaSheen { 0%, 62% { transform: skewX(-18deg) translateX(-120%); } 100% { transform: skewX(-18deg) translateX(560%); } }
@keyframes ctaBreathe {
  0%, 100% { box-shadow: 0 10px 28px -10px rgba(85, 222, 248, 0.85), 0 0 0 0 rgba(85, 222, 248, 0.55); }
  50%      { box-shadow: 0 14px 42px -6px rgba(85, 222, 248, 1), 0 0 0 11px rgba(85, 222, 248, 0); }
}
@keyframes ctaNudge {
  0%, 74%, 100% { transform: rotate(0deg) scale(1); }
  77% { transform: rotate(-6deg) scale(1.07); }
  80% { transform: rotate(6deg) scale(1.07); }
  83% { transform: rotate(-4deg) scale(1.05); }
  86% { transform: rotate(3deg) scale(1.03); }
  89% { transform: rotate(0deg) scale(1); }
}
@keyframes ctaSpin { to { --a: 360deg; } }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFill { to { opacity: 1; } }
@keyframes introLinesOut { to { opacity: 0; } }
@keyframes glare { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes popIn   { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes dayPulse  { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes drawCheck { 0%, 20% { stroke-dashoffset: 18; opacity: 1; } 45%, 80% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes barWave   { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@keyframes shackle   { 0%, 42% { transform: translateY(0); } 52%, 78% { transform: translateY(-6px); } 88%, 100% { transform: translateY(0); } }
@keyframes bellSwing { 0%, 55%, 100% { transform: rotate(0); } 8% { transform: rotate(14deg); } 16% { transform: rotate(-12deg); } 24% { transform: rotate(8deg); } 32% { transform: rotate(-4deg); } 40% { transform: rotate(0); } }
@keyframes badge     { 0%, 55%, 100% { transform: scale(1); } 10% { transform: scale(1.4); } 20% { transform: scale(1); } }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes grain    {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, -3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-2%, 4%); }
  80%  { transform: translate(5%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #05161B; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--on-ground);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain, so large flat areas of colour do not read as flat. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}

h1, h2 {
  margin: 0;
  font-family: var(--sora);
  font-weight: 800;
  letter-spacing: -0.052em;
  line-height: 0.93;
  text-wrap: balance;
}
h1 { letter-spacing: -0.058em; }
h3 { margin: 0; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.028em;
}

.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--card); outline-offset: 4px; border-radius: 6px; }

.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 22px;
}
.kicker.dark { opacity: 0.5; }

.say { font-size: clamp(16px, 1.75vw, 19px); max-width: 44ch; opacity: 0.7; margin-top: 26px; }
.say.light { opacity: 0.58; }

.example {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
}

/* ==========================================================================
   The open
   ========================================================================== */

.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #05161B;
  transition: background 0.55s ease;
}
.intro-mark { width: clamp(120px, 16vw, 180px); height: auto; overflow: visible; will-change: transform; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)); }
.intro-lines rect, .intro-lines path {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: introDraw 1.15s var(--out) forwards;
}
.intro-lines rect:nth-child(2) { animation-delay: 0.13s; }
.intro-lines rect:nth-child(3) { animation-delay: 0.28s; }
.intro-lines path { animation-delay: 0.38s; }
.intro-fill { opacity: 0; animation: introFill 1.5s ease-in-out 1.05s forwards; }
.intro.away { background: transparent; pointer-events: none; }
/* held while the tab is in the background; see intro() */
.intro.intro-wait .intro-lines rect, .intro.intro-wait .intro-lines path,
.intro.intro-wait .intro-lines, .intro.intro-wait .intro-fill { animation-play-state: paused; }
.intro-lines { animation: introLinesOut 1.2s ease 1.15s forwards; }
.intro.away .intro-lines { opacity: 0; }
.intro.done { display: none; }
/* the header's own mark waits until the flying one has landed on it */
.introing .top .mark { opacity: 0; }
.top .mark { transition: opacity 0.2s; }

/* ==========================================================================
   Chrome
   ========================================================================== */

.scroll-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; }
.scroll-rail i { display: block; height: 100%; width: 0; background: var(--card); }

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 18px;
  padding: 22px var(--gut);
  color: var(--on-ground);
}
@media (max-width: 720px) { .top { padding: 16px var(--gut); } }

.brand {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--sora); font-weight: 800; font-size: 24px; letter-spacing: -0.05em;
}
.brand.small { font-size: 16px; gap: 9px; }
@media (max-width: 720px) { .top .brand { font-size: 20px; gap: 11px; } }

/* The icon always carries an explicit size. Without one the inline SVG
   grows to whatever box it is in, which once filled the viewport. */
.mark {
  display: block;
  width: 44px; height: 44px;
  flex: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}
.brand.small .mark { width: 28px; height: 28px; }
@media (max-width: 720px) { .top .mark { width: 36px; height: 36px; } }
.mark svg { width: 100%; height: 100%; display: block; }

.cta-small {
  position: relative;
  margin-left: auto;
  font-size: 15.5px; font-weight: 700;
  padding: 13px 24px; border-radius: 999px;
  color: #04232b;
  background: linear-gradient(135deg, var(--card) 0%, #7ee9d6 100%);
  box-shadow: 0 10px 28px -12px rgba(85, 222, 248, 0.9);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.25s, transform 0.4s var(--out);
}
.cta-small:hover { box-shadow: 0 14px 34px -12px rgba(85, 222, 248, 1); }
@media (max-width: 720px) { .cta-small { font-size: 13.5px; padding: 10px 17px; } }

/* The header button is the one thing on the page asking to be pressed,
   so it behaves like it: a light runs round its edge, its glow breathes,
   a sheen crosses it, and every five seconds it gives a small shake.
   The shake is added to whatever the magnet has done rather than
   replacing it, so hovering and shaking do not fight. */
.cta-small {
  animation: ctaBreathe 2.4s ease-in-out infinite, ctaNudge 5.2s ease-in-out infinite;
  animation-composition: replace, add;
}
.cta-small::after {
  content: '';
  position: absolute; inset: 1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--a), rgba(255, 255, 255, 0) 0deg 230deg, rgba(255, 255, 255, 0.98) 300deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ctaSpin 2s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.join button { animation: ctaBreathe 2.4s ease-in-out infinite 0.8s; }

.cta-small::before, .join button::before {
  content: '';
  position: absolute; top: -40%; bottom: -40%; left: -30%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg) translateX(-120%);
  animation: ctaSheen 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.join button::before { animation-delay: 1.4s; }
.cta-small > *, .join button > * { position: relative; z-index: 2; }

[data-magnet] { will-change: transform; }

/* ==========================================================================
   Scene frame and glows
   ========================================================================== */

.scene {
  position: relative;
  min-height: 100svh;
  padding: clamp(86px, 12vh, 140px) var(--gut) clamp(56px, 9vh, 110px);
  display: grid;
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.glow-a {
  width: 60vw; height: 60vw; min-width: 420px; min-height: 420px;
  top: -24vw; left: -14vw;
  background: radial-gradient(circle, rgba(85, 222, 248, 0.3), transparent 66%);
  animation: driftA 24s var(--out) infinite alternate;
}
.glow-b {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  bottom: -20vw; right: -10vw;
  background: radial-gradient(circle, rgba(217, 180, 91, 0.16), transparent 68%);
  animation: driftB 30s var(--out) infinite alternate;
}
.glow-night {
  width: 56vw; height: 56vw; min-width: 400px; min-height: 400px;
  top: -18vw; left: 8vw;
  background: radial-gradient(circle, rgba(124, 150, 240, 0.2), transparent 68%);
  animation: driftA 34s var(--out) infinite alternate;
}
.glow-bento {
  width: 60vw; height: 60vw; min-width: 400px; min-height: 400px;
  top: -20vw; left: -12vw;
  background: radial-gradient(circle, rgba(124, 108, 240, 0.22), transparent 66%);
  animation: driftB 31s var(--out) infinite alternate;
}
.glow-five {
  width: 58vw; height: 58vw; min-width: 400px; min-height: 400px;
  top: 10vh; right: -20vw;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2), transparent 68%);
  animation: driftB 32s var(--out) infinite alternate;
}
.glow-six {
  width: 64vw; height: 64vw; min-width: 420px; min-height: 420px;
  bottom: -26vw; right: -14vw;
  background: radial-gradient(circle, rgba(85, 222, 248, 0.3), transparent 64%);
  animation: driftA 26s var(--out) infinite alternate;
}

/* Content above the glow. Named wrappers only: a blanket selector here
   once matched every absolutely positioned thing in a scene and dropped
   it into normal flow. */
.one-grid, .scene-copy, .five-inner, .six-grid, .bento-head, .bento { position: relative; z-index: 2; }

/* Entrances start from hidden and end at the resting state, so a broken
   animation costs an entrance rather than the content. */
.scene-copy, .five-inner, .six-grid {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--out), transform 0.9s var(--out);
}
.scene.live .scene-copy,
.scene.live .five-inner,
.scene.live .six-grid { opacity: 1; transform: none; }

.scene h1 .w, .scene h2 .w { display: inline-block; will-change: transform, opacity; }
.scene h1, .scene h2 { padding-bottom: 0.08em; }

/* ==========================================================================
   ONE — the pile and the phone
   ========================================================================== */

.scene-one { align-content: start; padding-top: clamp(118px, 17vh, 190px); }

.one-grid { display: block; width: 100%; pointer-events: none; }
.one-copy { max-width: min(760px, 100%); }
.scene-one h1 { font-size: clamp(38px, 6.4vw, 88px); }
.scene-one .say { margin-top: 26px; opacity: 0.45; font-size: 15px; }

/* The changing word owns its box so the line never jumps. The space
   after it is the one in the markup; a margin here as well doubled it. */
.swapper {
  display: inline-block;
  text-align: left;
  vertical-align: baseline;
  transition: width 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
}
#country-n { display: inline-block; }

/* The canvas covers the whole scene so a lifted coin is never clipped
   and a drag is never dropped at an edge. */
.pile { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pile #coins { pointer-events: auto; }
/* pan-y leaves vertical scrolling to the browser; a press that lands on
   a coin cancels it from the handler, so a coin can still be thrown. */
#coins { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }

.scroll-hint {
  position: absolute; bottom: 30px; left: var(--gut);
  width: 21px; height: 34px;
  border: 2px solid currentColor; border-radius: 999px;
  opacity: 0.2; z-index: 4; pointer-events: none;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; border-radius: 2px;
  background: currentColor; transform: translateX(-50%);
  animation: wheel 1.9s var(--out) infinite;
}
@media (max-width: 1100px) { .scroll-hint { display: none; } }

/* ---------- the phone ---------- */
/* The screen is a recording of the app. Nothing on it is drawn here; the
   frame around it is, and it keeps a real handset's proportions so the
   recording is shown at the shape it was made at. */

/* It stands on the same floor the coins land on, so they bank against
   it and bounce off its top. Height-capped so a short window gets a
   shorter phone rather than one that runs up under the header. */
.phone-stage {
  position: absolute;
  bottom: 0; right: clamp(24px, 7vw, 140px);
  z-index: 4;
  perspective: 1500px;
  pointer-events: none;
}
/* The pile runs in front of the phone on every size: on the desktop so
   a lifted coin passes over the screen rather than behind it, and on a
   phone so the handset stands in the pile at the foot of the screen. */
.pile { z-index: 5; }

/* Held still and facing the reader, like a rendered product shot. The
   depth comes from the body: a steel rim, a bevel into the glass, a
   dark edge showing beneath, and a shadow on the floor. It used to
   follow the cursor and later to breathe; both made it feel loose. */
.phone {
  position: relative;
  width: min(clamp(236px, 19vw, 284px), 33svh);
  transform-style: preserve-3d;
  /* every part of the handset below is sized in cqw, a hundredth of this
     width, so a small phone is the same phone smaller and not a remote
     control with a thick frame and a tiny screen */
  container-type: inline-size;
}
.phone::after {
  content: '';
  position: absolute; left: 6%; right: 6%; bottom: -10px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 70%);
  filter: blur(5px);
  z-index: -1;
}

/* A body with thickness. The front plate carries a steel rim drawn as a
   masked gradient; a back plate sits fourteen pixels behind it and a
   side face, with the buttons, stands between them. Turned a little,
   the side and the back show, and the thing reads as a handset rather
   than a picture of one. */
.phone-body {
  position: relative;
  padding: 3.2cqw;
  border-radius: 17.6cqw;
  /* a brushed steel band, lit from the top left */
  background: linear-gradient(160deg, #b9c5cd 0%, #6a7985 16%, #27343c 42%, #1b262e 58%, #566570 84%, #aab7bf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 60px 100px -40px rgba(0, 0, 0, 0.95);
  transform-style: preserve-3d;
}
/* keys that stand proud of the band: two on the left, one on the right */
.phone-keys i {
  position: absolute; width: 1.4cqw; border-radius: 0.7cqw;
  background: linear-gradient(180deg, #8f9ca6, #3b4851 50%, #78858f);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.phone-keys i:nth-child(1) { left: -1cqw; top: 20%; height: 7%; }
.phone-keys i:nth-child(2) { left: -1cqw; top: 29%; height: 7%; }
.phone-keys i:nth-child(3) { right: -1cqw; top: 24%; height: 11%; }
.phone-body::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transform: translateZ(2px);
}
.phone-back {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, #2a3740 0%, #05090c 100%);
  transform: translate(0, 2.1cqw);
}
.phone-side { display: none; }
.phone-side i {
  position: absolute; left: 3px; width: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #4d5e69, #1b2830);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.phone-side i:nth-child(1) { top: 36px; height: 34px; }
.phone-side i:nth-child(2) { top: 84px; height: 56px; }
.phone-side i:nth-child(3) { top: 160px; height: 84px; }

.phone-screen {
  position: relative;
  border-radius: 14.8cqw;
  overflow: hidden;
  /* a dark bezel between the steel and the glass; the glass is inset */
  padding: 2.5cqw;
  background: #070c10;
  display: block;
  transform: translateZ(1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 6px rgba(0, 0, 0, 0.9);
}
.phone-screen > .phone-status { border-radius: 12.7cqw 12.7cqw 0 0; }
.phone-screen > .phone-video { border-radius: 0 0 12.7cqw 12.7cqw; }
/* glass: a diagonal sheet of light, drifting very slowly */
.phone-glare {
  position: absolute; inset: 2.5cqw; border-radius: 12.7cqw; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.06) 100%);
  mix-blend-mode: screen;
  animation: glare 11s ease-in-out infinite alternate;
}
/* the screen's light on the floor */
.phone-stage::before {
  content: ''; position: absolute; left: 50%; bottom: -34px;
  width: 170%; height: 150px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(85, 222, 248, 0.24), transparent 70%);
  filter: blur(16px); z-index: -1; pointer-events: none;
}

.phone-status {
  position: relative;
  height: 16.2cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.1cqw 8.5cqw 0 9.9cqw;
  background: linear-gradient(90deg, #22c3df 0%, #20b9dc 55%, #1d9fd8 100%);
  color: #fff;
  font-family: var(--body); font-weight: 600; font-size: 4.4cqw; letter-spacing: -0.01em;
}
.phone-island {
  position: absolute; top: 3.9cqw; left: 50%; transform: translateX(-50%);
  width: 29.6cqw; height: 8.5cqw; border-radius: 999px;
  background: #04090d;
}
.ps-sys { display: inline-flex; align-items: flex-end; gap: 0.7cqw; height: 3.9cqw; }
.ps-sys i { width: 1.05cqw; background: #fff; border-radius: 0.35cqw; }
.ps-sys i:nth-child(1) { height: 1.4cqw; }
.ps-sys i:nth-child(2) { height: 2.1cqw; }
.ps-sys i:nth-child(3) { height: 2.8cqw; }
.ps-sys i:nth-child(4) { height: 3.9cqw; }
.ps-sys b { width: 7cqw; height: 3.5cqw; margin-left: 2.1cqw; border-radius: 1cqw; border: 0.5cqw solid rgba(255,255,255,0.9); position: relative; }
.ps-sys b::after { content: ''; position: absolute; inset: 0.5cqw; right: 1cqw; background: #fff; border-radius: 0.35cqw; }

.phone-video {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 600 / 1298;
  margin-top: -1px;
  background: #0b1b24;
}

/* Below the desktop layout the phone follows the headline rather than
   sitting beside it, which on an actual phone is also where somebody
   would expect to see one. */
/* On a phone the hero is one screen exactly. The headline takes what it
   needs, the handset is sized from whatever height is left, and the
   coins land at the foot of that same screen, where they can be seen.
   A hero taller than the screen put the pile below the fold. */
@media (max-width: 1100px) {
  /* exactly one screen, never taller: the pile lands at the foot of the
     screen and the handset's foot stays in view while the hero is pinned.
     The copy is tightened so the handset gets the room. */
  .scene-one { height: 100svh; min-height: 0; padding-top: 76px; padding-bottom: 10px; }
  .scene-one .kicker { font-size: 10.5px; letter-spacing: 0.16em; margin-bottom: 6px; }
  .scene-one h1 { font-size: clamp(28px, 7.6vw, 34px); }
  .scene-one .say { margin-top: 6px; font-size: 13px; }
  .phone-stage {
    position: relative; top: auto; right: auto; transform: none;
    display: grid; justify-content: center;
    margin: 10px auto 0;
  }
  /* As wide as the screen's height allows with the whole handset in view.
     On a phone the status strip is not a strip: the island floats over
     the app's own header, as on a real handset, which makes the handset
     2.05 times its width tall instead of 2.18. The copy above and the
     floor below take about 237px. */
  .phone { width: clamp(180px, calc((100svh - 237px) / 2.05), 80vw); }
  .phone-status {
    position: absolute; left: 2.5cqw; right: 2.5cqw; top: 2.5cqw;
    background: transparent; z-index: 2;
  }
  .ps-time, .ps-sys { visibility: hidden; }
  .phone-screen > .phone-video { border-radius: 12.7cqw; }
  .phone::after, .phone-stage::before { display: none; }
}

/* ---------- the cards pulled from the phone ---------- */
/* One line for each card, where the headline was, on wide screens. */
.pull-copy {
  position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%);
  width: min(520px, 36vw); height: 60%;
  z-index: 4; pointer-events: none;
}
@media (max-width: 1100px) { .pull-copy { display: none; } }
.pcap { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; will-change: transform, opacity; }
.pcap .kicker { margin-bottom: 14px; }
.pcap h3 { font-family: var(--sora); font-weight: 800; font-size: clamp(34px, 3.6vw, 54px); letter-spacing: -0.045em; line-height: 0.98; margin: 0 0 18px; text-wrap: balance; }
.pcap p:last-child { font-size: clamp(15px, 1.3vw, 18px); opacity: 0.62; max-width: 40ch; line-height: 1.55; }

/* The app's own card, at page size: the account's accent under a gloss,
   the wallet pressed into the middle, the amount at the foot. Hidden and
   parked inside the phone until the scroll pulls one out. */
.pull { position: absolute; inset: 0; z-index: 6; pointer-events: none; perspective: 1500px; }

/* Two faces on one card, so a full turn in the air shows a back rather
   than a mirrored front. No filter and no partial opacity on the card
   itself: either one flattens its 3D context and the back face would be
   drawn as a mirrored front. The shadow lives on the faces. */
.pcard {
  position: absolute; left: 0; top: 0;
  width: 440px; height: 204px;
  color: #fff;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pc-face {
  position: absolute; inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pc-front {
  background:
    linear-gradient(118deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 34%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.14) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 64%, black) 100%);
}
.pc-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(118deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, black) 0%, color-mix(in srgb, var(--accent) 30%, black) 100%);
}
/* the backs: one feature each, drawn small but legible at page size */
.pc-back { padding: 16px 20px 14px; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.pb-head { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.pb-head svg { width: 18px; height: 18px; }

.pb-rows, .pb-tx { display: grid; gap: 5px; align-content: start; }
.pb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); font-size: 12.5px; }
.pb-row b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.pb-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.9); }
.pb-row em { font-family: var(--mono); font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; }
.pb-row em.in { color: #b9f5dc; } .pb-row em.out { color: #ffd1d9; }
.pb-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pb-more { font-size: 11px; color: rgba(255, 255, 255, 0.5); padding: 2px 10px 0; }

.pb-rings { display: flex; justify-content: space-around; align-items: start; padding-top: 4px; }
.pb-ring { display: grid; justify-items: center; gap: 2px; position: relative; }
.pb-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.pb-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 5; }
.pb-ring circle.on { stroke: var(--c); stroke-linecap: round; stroke-dasharray: calc(var(--p) * 1.2566) 125.66; }
.pb-ring b { position: absolute; top: 22px; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.pb-ring i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.7); }

.pb-pie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 2px 4px 0; }
.pb-pie svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.pb-pie circle { fill: none; stroke-width: 9; }
.pb-legend { display: grid; gap: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.86); }
.pb-legend span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pb-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pb-legend b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; font-variant-numeric: tabular-nums; color: #fff; }
.pb-tx .pb-row { padding: 5px 10px; font-size: 12px; }
.pc-name { position: absolute; left: 22px; top: 20px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.pc-btn {
  position: absolute; right: 20px; top: 18px;
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.pc-btn svg { width: 24px; height: 24px; color: rgba(10, 30, 36, 0.8); }
.pc-wallet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); display: grid; justify-items: center; gap: 2px; }
.pc-wallet svg { width: 132px; height: auto; fill: rgba(0, 0, 0, 0.26); }
.pc-wallet b { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0.32em; color: rgba(0, 0, 0, 0.32); }
.pc-amt { position: absolute; left: 22px; bottom: 20px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pc-ago { position: absolute; right: 22px; bottom: 24px; font-size: 13px; opacity: 0.78; }

/* while the cards have the stage the copy steps aside without easing
   of its own, so the scroll alone decides where it is */
.scene-one.pulling .scene-copy { transition: none; }

/* ==========================================================================
   TWO — midnight
   ========================================================================== */

.scene-two { align-content: end; justify-items: start; }
.two-copy { max-width: min(620px, 100%); }
.scene-two h2 { font-size: clamp(36px, 7vw, 80px); }
.scene-two .say { max-width: 38ch; }

.stars { position: absolute; inset: 0; z-index: 1; }
.stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #cfe6ff;
  animation: twinkle var(--t, 4s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.moon {
  position: absolute; top: 8%; left: 14%;
  width: clamp(90px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(220,238,255,0.22), rgba(140,175,210,0.06) 60%, transparent 72%);
  filter: blur(2px); z-index: 1;
}

.clock-wrap { position: absolute; top: 50%; right: clamp(-30px, 3vw, 10%); transform: translateY(-62%); z-index: 2; }
.clock { position: relative; width: clamp(180px, 27vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.clock-face {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #d4dce6 62%, #9fabbb);
  box-shadow: 0 0 90px 12px rgba(150, 200, 230, 0.2),
              inset 0 -10px 26px rgba(0,0,0,0.2),
              inset 0 8px 18px rgba(255,255,255,0.85);
}
.clock-time {
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: clamp(28px, 4.6vw, 50px);
  color: #2a3340; letter-spacing: -0.03em;
}
.hand { position: absolute; background: #2a3340; border-radius: 2px; transform-origin: 50% 100%; bottom: 50%; left: 50%; opacity: 0.28; z-index: 1; }
.hand-h { width: 4px; height: 24%; transform: translateX(-50%) rotate(352deg); }
.hand-m { width: 3px; height: 36%; transform: translateX(-50%) rotate(282deg); }
.hand-s { width: 1.5px; height: 40%; background: var(--rose); opacity: 0.85; transform: translateX(-50%) rotate(0deg); }
.clock-pin { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #2a3340; transform: translate(-50%, -50%); z-index: 3; }
.clock-time { z-index: 2; }
.clock-ampm {
  position: absolute; left: 50%; top: 64%; transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono); font-size: clamp(10px, 1.1vw, 13px); letter-spacing: 0.22em;
  color: #2a3340; opacity: 0.55;
}

.tape {
  position: absolute; top: 0; bottom: 0; right: 34%;
  width: 180px; z-index: 2; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
}
.tape-strip { display: grid; gap: 14px; padding-top: 10px; animation: unroll 26s linear infinite; }
.tape-strip span {
  font-family: var(--mono); font-size: 13px; color: #8ba6c4;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(190, 215, 240, 0.045);
  border: 1px solid rgba(190, 215, 240, 0.07);
  white-space: nowrap;
}
.tape-strip span.wrong { color: #7d8ba0; text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; }
@media (max-width: 1100px) { .tape { display: none; } }

.mutter { position: absolute; left: var(--gut); top: 18%; display: grid; gap: 10px; font-family: var(--mono); font-size: 13px; z-index: 3; }
.mutter span { opacity: 0; color: #93a7c4; animation: mutter 7s var(--out) infinite; animation-delay: var(--d); }
@media (max-width: 820px) {
  .mutter, .moon { display: none; }
  /* the clock joins the flow above the words rather than sitting on them */
  .scene-two { align-content: center; justify-items: center; }
  .clock-wrap { position: relative; top: auto; right: auto; transform: none; margin-bottom: 34px; }
  .two-copy { justify-self: start; }
}

/* ==========================================================================
   WHAT IT DOES — five tiles
   ==========================================================================
   The section is as tall as its content, not a screen. Each tile is an
   icon in motion, a title, and one line. The cards this replaced said
   the same things at four times the height.
   ========================================================================== */

.scene-bento {
  min-height: 0;
  align-content: start;
  padding-top: clamp(72px, 10vh, 120px);
  padding-bottom: clamp(60px, 9vh, 110px);
}
.scene-bento h2 { font-size: clamp(28px, 4vw, 48px); }
.bento-head { margin-bottom: clamp(22px, 3.2vw, 36px); }

.features { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Each tile leans toward the pointer (two custom properties set from
   script) and lifts a little under it. */
.tile {
  position: relative;
  overflow: hidden;
  width: calc(20% - 9.6px);
  padding: 22px 18px 20px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(196, 206, 213, 0.07), rgba(196, 206, 213, 0.022));
  border: 1px solid rgba(196, 206, 213, 0.1);
  display: grid; justify-items: start; align-content: start; gap: 7px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: border-color 0.4s var(--out), transform 0.35s var(--out);
}
.tile:hover { --lift: -4px; border-color: color-mix(in srgb, var(--c) 42%, transparent); }
@media (max-width: 1000px) { .tile { width: calc(33.333% - 8px); } }
@media (max-width: 620px) {
  .tile { width: calc(50% - 6px); padding: 18px 14px 16px; }
  .tile-ico { width: 52px; height: 52px; }
  .tile-ico svg { width: 34px; height: 34px; }
  .tile h3 { font-size: 14px; }
  .tile p { font-size: 12.5px; }
}

/* They arrive one after another when the scene does. */
.scene-bento.live .tile { animation: popIn 0.7s var(--out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.tile:nth-child(2) { --i: 1; } .tile:nth-child(3) { --i: 2; } .tile:nth-child(4) { --i: 3; } .tile:nth-child(5) { --i: 4; }

.tile[data-glow]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in srgb, var(--c) 18%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.4s;
}
.tile[data-glow]:hover::before { opacity: 1; }

.tile-ico {
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  margin-bottom: 6px;
}
.tile-ico svg { width: 40px; height: 40px; overflow: visible; display: block; }
.tile h3 { font-family: var(--sora); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.tile p { font-size: 13px; opacity: 0.58; line-height: 1.45; }

/* the icons in motion */
.ico-ring { transform-box: fill-box; transform-origin: center; animation: turn 16s linear infinite; }
.ico-day { animation: dayPulse 3s ease-in-out infinite; }
.ico-check { stroke-dasharray: 18; stroke-dashoffset: 18; animation: drawCheck 3s ease-in-out infinite; }
.ico-bar { transform-box: fill-box; transform-origin: bottom; animation: barWave 3.6s ease-in-out infinite; }
.ico-bar.b2 { animation-delay: 0.4s; }
.ico-bar.b3 { animation-delay: 0.8s; }
.ico-shackle { animation: shackle 4s ease-in-out infinite; }
.ico-bell { transform-box: fill-box; transform-origin: 50% 0; animation: bellSwing 3.4s ease-in-out infinite; }
.ico-badge { transform-box: fill-box; transform-origin: center; animation: badge 3.4s ease-in-out infinite; }

/* ==========================================================================
   FIVE — privacy
   ========================================================================== */

/* As tall as its content. A full screen each for this and the waitlist,
   both centring short content, put six hundred pixels of nothing between
   them on a desktop. */
.scene-five { min-height: 0; align-content: center; padding-top: clamp(80px, 11vh, 130px); padding-bottom: clamp(70px, 10vh, 120px); }
.scene-five h2 { font-size: clamp(32px, 3.6vw, 50px); }

#shield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.five-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.95fr);
  gap: clamp(22px, 3.5vw, 56px); align-items: center; width: 100%;
}
.five-copy { min-width: 0; }
@media (max-width: 920px) {
  .five-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .shield-mark { justify-self: center; }
}

/* The mark between the words and the cards, with everything arriving at
   it and stopping. It is in the layout, so it is on every screen size;
   pinned to the scene's centre it was hidden behind a column on narrow
   windows and switched off on phones. No plate behind it. */
.shield-mark {
  position: relative;
  width: clamp(200px, 22vw, 290px); min-height: clamp(200px, 22vw, 290px);
  display: grid; place-items: center; pointer-events: none;
}
.sm-icon {
  position: relative; z-index: 2;
  display: block;
  width: clamp(80px, 8vw, 108px);
  height: clamp(80px, 8vw, 108px);
  filter: drop-shadow(0 0 44px rgba(85, 222, 248, 0.5)) drop-shadow(0 20px 38px rgba(0, 0, 0, 0.8));
  animation: float 7s ease-in-out infinite;
}
.sm-icon svg { width: 100%; height: 100%; display: block; }
.sm-pulse {
  position: absolute;
  width: clamp(200px, 22vw, 290px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(85, 222, 248, 0.26);
  animation: ring 4.6s ease-out infinite;
}
.sm-pulse-2 { animation-delay: 2.3s; }

.locks { display: grid; gap: 12px; }
.lock {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 16px;
  padding: 20px 22px; border-radius: 16px;
  background: rgba(196, 206, 213, 0.05);
  border: 1px solid rgba(196, 206, 213, 0.1);
}
.scene-five.live .lock { animation: slideUp 0.68s var(--out) backwards; animation-delay: calc(0.12s + var(--i) * 0.1s); }
.lock-ico {
  grid-row: 1 / 3;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  color: var(--card);
  background: rgba(85, 222, 248, 0.1);
  border: 1px solid rgba(85, 222, 248, 0.2);
}
.lock-ico svg { width: 23px; height: 23px; }
.lock b { font-size: 16px; font-weight: 600; align-self: end; }
.lock > span:last-of-type { font-size: 14px; opacity: 0.55; line-height: 1.5; }

.locks-fine { margin-top: 8px; font-size: 13.5px; opacity: 0.5; line-height: 1.55; }
.locks-fine a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   SIX — the waitlist
   ========================================================================== */

.scene-six { min-height: 0; align-content: center; padding-top: clamp(70px, 9vh, 110px); padding-bottom: clamp(90px, 12vh, 150px); }
.scene-six h2 { font-size: clamp(40px, 7vw, 84px); }

.six-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 80px); align-items: center; width: 100%;
}
.six-inner { min-width: 0; width: 100%; max-width: 620px; }
/* The art stays on narrow screens; it fills the space under the form. */
@media (max-width: 900px) { .six-grid { grid-template-columns: minmax(0, 1fr); } .six-art { min-height: 300px; } }

.join { margin-top: clamp(30px, 4.5vw, 46px); max-width: 540px; }
.join-row { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px) { .join-row { justify-content: center; } .join input { flex-basis: 100%; } }
.join input {
  flex: 1 1 230px; min-width: 0;
  padding: 17px 22px; border-radius: 999px;
  border: 2px solid rgba(196, 206, 213, 0.2);
  background: rgba(196, 206, 213, 0.07);
  font-family: var(--body); font-size: 16px; color: inherit;
  transition: border-color 0.25s, background 0.25s;
}
.join input::placeholder { color: rgba(233, 246, 250, 0.35); }
.join input:focus { outline: none; border-color: var(--card); background: rgba(196, 206, 213, 0.12); }

.join button {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--card) 0%, #7ee9d6 100%);
  color: #04232b;
  font-family: var(--body); font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 34px -14px rgba(85, 222, 248, 0.9);
  transition: transform 0.4s var(--out), box-shadow 0.25s, opacity 0.25s;
}
.join button:hover { box-shadow: 0 18px 44px -14px rgba(85, 222, 248, 1); }
.join button:disabled { opacity: 0.6; cursor: default; }
.btn-text { display: inline; }
.btn-spin {
  display: none; width: 15px; height: 15px;
  border: 2px solid rgba(4, 35, 43, 0.3); border-top-color: #04232b;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.join button.busy .btn-spin { display: block; }

.join-msg { min-height: 24px; margin-top: 14px; font-size: 14.5px; }
.join-msg.good { color: #5eead4; }
.join-msg.bad  { color: #fbbf5c; }

.counted { margin-top: 24px; font-size: 15px; opacity: 0.6; }
.counted b { font-family: var(--mono); font-size: 19px; opacity: 1; color: var(--card); }
.fine { margin-top: 26px; font-size: 13px; opacity: 0.45; max-width: 46ch; }
.fine a { text-decoration: underline; text-underline-offset: 3px; }

.six-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.mark-big {
  display: block;
  width: clamp(150px, 18vw, 210px); height: clamp(150px, 18vw, 210px);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(85, 222, 248, 0.25));
  animation: float 7s ease-in-out infinite;
}
.mark-big svg { width: 100%; height: 100%; display: block; }

.orbit { position: absolute; inset: 0; display: grid; place-items: center; animation: turn 34s linear infinite; }
.orbit span {
  position: absolute;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 16px; color: var(--card);
  background: rgba(5, 22, 27, 0.82);
  border: 1px solid rgba(85, 222, 248, 0.26);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.9);
  transform: rotate(var(--a)) translateY(clamp(-160px, -20vw, -120px)) rotate(calc(-1 * var(--a)));
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding: 32px var(--gut) 46px;
  border-top: 1px solid rgba(196, 206, 213, 0.12);
  font-size: 13.5px; opacity: 0.65;
}
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.foot-note { max-width: 56ch; line-height: 1.5; }
.foot .social {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em;
  opacity: 0.9; transition: color 0.25s, opacity 0.25s;
}
.foot .social svg { width: 18px; height: 18px; }
.foot .social:hover { color: var(--card); opacity: 1; }
@media (max-width: 620px) { .foot .social { margin-left: 0; } }

/* ==========================================================================
   The policy page
   ========================================================================== */

body.doc { background: #05161B; color: #e9f6fa; }
.doc-wrap { max-width: 740px; margin-inline: auto; padding: clamp(60px, 10vh, 110px) var(--gut) 90px; }
.doc h1 { font-size: clamp(34px, 5.5vw, 56px); margin-bottom: 10px; }
.doc .stamp-date { font-family: var(--mono); font-size: 12px; opacity: 0.45; letter-spacing: 0.08em; }
.doc h2 { font-size: clamp(20px, 2.6vw, 25px); margin-top: 46px; margin-bottom: 12px; }
.doc p, .doc li { font-size: 16px; opacity: 0.78; line-height: 1.68; }
.doc p + p { margin-top: 14px; }
.doc ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.doc strong { opacity: 1; font-weight: 600; }
.doc a { color: var(--card); text-decoration: underline; text-underline-offset: 3px; }
.doc-note {
  margin-top: 26px; padding: 18px 22px; border-radius: 14px;
  background: rgba(217, 180, 91, 0.1); border: 1px solid rgba(217, 180, 91, 0.3);
  font-size: 14.5px; opacity: 0.9;
}
.doc-back { display: inline-block; margin-bottom: 30px; font-size: 14px; opacity: 0.6; }
.doc-back:hover { opacity: 1; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(196, 206, 213, 0.12); vertical-align: top; }
.doc th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; font-weight: 400; }
.doc td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .doc td:first-child { white-space: normal; } }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .scene-copy, .five-inner, .six-grid { opacity: 1; transform: none; }
  .ico-check { stroke-dashoffset: 0; }
  .sm-pulse { opacity: 0.4; transform: scale(1); }
}