/* Inter, served from here rather than Google Fonts (scripts/site-fonts.mjs makes these files) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/inter-800.woff2) format('woff2'); }

/* Larpy — the same palette as the app */
:root {
  --bg: #0e0e0f;
  --bg-2: #121214;
  --surface: #18181a;
  --surface-2: #222224;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --text: #f4f4f5;
  --text-2: #a1a1a6;
  --text-3: #6e6e73;
  --up: #34c77b;
  --up-soft: rgba(52, 199, 123, 0.12);
  --down: #f0616d;
  --radius: 22px;
  --wrap: 1180px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* the page zoom on big screens (bottom of this file); viewport units are zoomed with it */
  --z: 1;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
/* the page still scrolls, it just shows no bar (a grey one on Windows) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.035em; line-height: 1.04; font-weight: 700; text-wrap: balance; }
.sub, .lead { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(52, 199, 123, 0.6); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 123, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 199, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 123, 0); }
}

/* intro: only while html.play-intro is set (index.html), over everything until the logo has landed in the nav.
   Timeline: halves fly in 0.12–0.72s, snap 0.72s, eyes light up and blink, "larpy" slides out 0.95s,
   the curtain lifts 1.6s while the logo flies into the nav, which takes over at 2.15s.
   Nothing in it is ever scaled up: Safari draws an element once at its own size and stretches that picture,
   which comes out blurry. So the logo is laid out at its big size (--s0 times the nav's) and shrinks into
   the nav (--k0 is 1 / --s0), and the mark is drawn at the size its pulse peaks at */
.intro { display: none; }
html.play-intro .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none;
  animation: intro-done 2.15s steps(1, end) both;
}
.intro::before { content: ''; position: absolute; inset: 0; background: var(--bg); animation: intro-fade-out 0.5s ease 1.6s both; }
.intro::after { content: ''; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 199, 123, 0.2), rgba(52, 199, 123, 0.06) 55%, transparent); animation: intro-glow 1.9s ease both; }
.intro-brand { --s0: 2.8; --k0: 0.357143; position: relative; z-index: 1; animation: intro-fly 0.55s cubic-bezier(.65, 0, .25, 1) 1.55s both; }
/* laid out exactly like .brand in the nav, only --s0 times bigger, so it lands on top of it */
.intro-lockup { --gap: calc(8px * var(--s0)); --ww: calc(52px * var(--s0)); display: flex; align-items: center; gap: var(--gap); color: var(--text); font-weight: 800; font-size: calc(20px * var(--s0)); letter-spacing: -0.04em; animation: intro-center 0.5s cubic-bezier(.2, .8, .2, 1) 0.95s both; }
/* 1.16 times the nav's mark, shrunk back to it except at the top of the pulse; the negative margin keeps
   its place in the row the nav's size */
.intro-mark { --m: calc(30px * var(--s0)); width: calc(var(--m) * 1.16); height: calc(var(--m) * 1.16); margin: calc(var(--m) * -0.08); flex: none; overflow: visible; transform: scale(0.862069); animation: intro-pulse 0.42s cubic-bezier(.3, 1.6, .5, 1) 0.7s both; }
.intro-mark path, .intro-mark circle, .intro-mark use { transform-box: fill-box; transform-origin: 50% 50%; }
.intro-half { fill: currentColor; }
.intro-l { animation: intro-half-l 0.6s cubic-bezier(.3, 1.35, .5, 1) 0.12s both; }
.intro-r { animation: intro-half-r 0.6s cubic-bezier(.3, 1.35, .5, 1) 0.12s both; }
.intro-whole { color: currentColor; animation: intro-show 0.05s linear 0.72s both; }
.intro-eyes { fill: var(--up); animation: intro-eyes 0.9s ease 0.74s both; }
.intro-ring { fill: none; stroke: var(--up); stroke-width: 1.4; animation: intro-ring 0.75s cubic-bezier(.2, .8, .3, 1) 0.72s both; }
.intro-word { white-space: nowrap; animation: intro-word 0.5s cubic-bezier(.2, .8, .2, 1) 0.95s both; }
/* the nav's own logo shows the moment the flying one lands on it */
html.play-intro .nav .brand { animation: intro-nav-brand 2.15s steps(1, end) both; }
@keyframes intro-done { to { visibility: hidden; } }
@keyframes intro-nav-brand { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-fade-out { to { opacity: 0; } }
@keyframes intro-glow { 0% { opacity: 0; scale: 0.6; } 40% { opacity: 1; scale: 1; } 80% { opacity: 0.8; } 100% { opacity: 0; scale: 1.3; } }
/* the logo shrinks into the nav; app.js measures where that is (--fx, --fy) */
@keyframes intro-fly { from { transform: none; } to { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--k0)); } }
/* the mark starts in the middle, then makes room for the word beside it */
@keyframes intro-center { from { transform: translateX(calc((var(--ww) + var(--gap)) / 2)); } to { transform: none; } }
@keyframes intro-half-l { from { opacity: 0; transform: translate(-34px, 8px) rotate(-28deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes intro-half-r { from { opacity: 0; transform: translate(34px, 8px) rotate(28deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes intro-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-pulse { 0% { transform: scale(0.862069); } 45% { transform: none; } 100% { transform: scale(0.862069); } }
@keyframes intro-eyes {
  0% { opacity: 0; transform: none; }
  14% { opacity: 1; }
  48% { transform: none; }
  56% { transform: scaleY(0.12); }
  64% { transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: none; }
}
@keyframes intro-ring { 0% { opacity: 0; transform: scale(0.55); } 18% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes intro-word { from { opacity: 0; transform: translateX(calc(-14px * var(--s0))); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .intro-brand { --s0: 2.3; --k0: 0.434783; } }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 14, 15, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.04em; }
.brand-mark { width: 30px; height: 30px; color: var(--text); }
.links { display: flex; gap: 6px; margin-left: auto; }
.links a { text-decoration: none; color: var(--text-2); font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
.links a:hover, .links a.active { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.links .menu-only { display: none; }
.menu-btn { display: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 15.5px/1 var(--font); letter-spacing: -0.01em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn .ic { transition: transform 0.2s; }
.btn:hover .ic { transform: translateX(3px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
/* magnetic buttons (magnetic.js): a .btn leans toward a nearby cursor by --mx/--my and its label by
   --lx/--ly, following quickly and springing back when the cursor moves away */
.magnetic { translate: var(--mx, 0px) var(--my, 0px); transition: translate 0.55s cubic-bezier(.2, 1.7, .4, 1), transform 0.18s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.magnetic-label { display: inline-block; translate: var(--lx, 0px) var(--ly, 0px); transition: translate 0.55s cubic-bezier(.2, 1.7, .4, 1); }
.magnetic.is-pulled, .magnetic.is-pulled .magnetic-label { transition-duration: 0.15s, 0.18s, 0.2s, 0.2s, 0.2s; transition-timing-function: ease-out; }
.btn-light { background: var(--text); color: var(--bg); box-shadow: 0 8px 30px -10px rgba(255, 255, 255, 0.35); }
.btn-light:hover { background: #fff; }
.btn-ghost { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--border-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-outline { color: var(--text); border-color: var(--border-strong); background: transparent; width: 100%; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.06); }

/* section basics */
.section { padding: 64px 0; position: relative; }
/* the coin band already makes room above the first one */
.cloud + .section { padding-top: 40px; }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--up); margin-bottom: 18px; }
h2 { font-size: clamp(36px, 5vw, 58px); }
h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.sub { color: var(--text-2); font-size: 18px; margin-top: 18px; }
.soft { color: var(--text-3); }

/* hero: as tall as the window, with the whole phone in view however short the window is */
.hero {
  --vh: calc(100vh / var(--z));
  padding: 32px 0 48px; position: relative; overflow: hidden;
  min-height: calc(var(--vh) - 64px); display: flex; align-items: center;
}
@supports (height: 100svh) { .hero { --vh: calc(100svh / var(--z)); } }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%);
  opacity: 0.6; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; position: relative; }
/* "Coming soon to the App Store" above the headline */
.hero-badge { margin-bottom: 22px; }
.hero h1 { font-size: clamp(44px, min(7.4vw, var(--vh) * 0.115), 92px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; }
.hero h1 .soft { display: block; margin-top: 12px; font-size: 0.56em; letter-spacing: -0.04em; line-height: 1.05; }
.lead { margin-top: 26px; font-size: 19px; color: var(--text-2); max-width: 520px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* the waitlist: an email field and a button in one pill (app.js) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.waitlist { position: relative; margin-top: 34px; max-width: 480px; }
.waitlist-row { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--border-strong); transition: border-color 0.2s, box-shadow 0.2s; }
.waitlist-row:focus-within { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 4px rgba(52, 199, 123, 0.14); }
/* 16px so iPhones don't zoom in on the field */
.waitlist input[type='email'] { flex: 1; width: 0; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 500 16px/1 var(--font); outline: none; }
.waitlist input[type='email']::placeholder { color: var(--text-3); }
/* a browser filling in a saved email paints the field its own colour (Chrome's blue, Safari's yellow):
   the colour change is put off for good, so the pill stays see-through, and the text keeps ours.
   Two rules, because a browser that doesn't know one of the selectors would drop the other with it */
.waitlist input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 600000s 0s, color 600000s 0s; }
.waitlist input:autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 600000s 0s, color 600000s 0s; }
.waitlist .btn { flex: none; height: 48px; padding: 0 22px; }
.waitlist .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-msg { margin-top: 12px; color: var(--text-2); font-size: 14px; }
.waitlist-msg.is-error { color: var(--down); }
.waitlist.is-done .waitlist-row { display: none; }
/* Cloudflare Turnstile's box, only there when it needs a click (app.js) */
.waitlist-check { display: flex; justify-content: center; }
.waitlist-check > * { margin-top: 10px; }
.waitlist.is-done .waitlist-check { display: none; }
.waitlist.is-done .waitlist-msg { margin-top: 0; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; background: var(--up-soft); color: var(--text); font-size: 15.5px; font-weight: 600; }
.waitlist.is-done .waitlist-msg::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--up) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230b0b0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.waitlist-alt { margin-top: 14px; color: var(--text-3); font-size: 14px; }
.waitlist-alt a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.waitlist-alt a:hover { color: var(--text); }
.waitlist-alt .ic { align-self: center; width: 15px; height: 15px; }
@media (max-width: 360px) {
  .waitlist input[type='email'] { padding: 0 14px; }
  .waitlist .btn { padding: 0 16px; }
}
.hero-note { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 14.5px; }
/* on phones, an arrow at the bottom of the first screen to the phone below it */
.scroll-hint { display: none; }

.hero-visual {
  /* the phone's width: its height (844/390 of it) plus the nav, the hero's padding and the hint under it fit the window */
  --pw: clamp(190px, (var(--vh) - 184px) * 0.462, 340px);
  position: relative; display: flex; justify-content: center; padding-bottom: 40px;
}
.hero .iphone-lg { --w: var(--pw); }
.glow { position: absolute; width: calc(var(--pw) * 1.65); height: calc(var(--pw) * 1.65); top: calc(var(--pw) * 0.2); border-radius: 50%; background: radial-gradient(circle, rgba(52, 199, 123, 0.16), transparent 62%); filter: blur(10px); pointer-events: none; }

.up { color: var(--up); }
.down { color: var(--down); }

/* iPhone frame */
.iphone {
  --w: 290px;
  /* one point of an iPhone 15 Pro's 393pt-wide screen */
  --u: calc(var(--w) * 0.932 / 393);
  position: relative; width: var(--w); flex: none;
  aspect-ratio: 390 / 844;
  padding: calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.175);
  background: linear-gradient(150deg, #4a4a50 0%, #1c1c1f 22%, #2b2b2f 60%, #121214 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 calc(var(--w) * 0.012) #050506,
    0 50px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px #000;
}
.iphone-lg { --w: 318px; z-index: 2; }
.iphone .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.14); background: var(--bg); display: flex; flex-direction: column; }
.iphone .screen img { width: 100%; flex: 1; object-fit: cover; object-position: top; min-height: 0; }
/* the status bar of an iPhone 15 Pro, in its points (--u is one point of a 393pt-wide screen):
   the Dynamic Island 126 × 37 from 11 down, the time and the icons centred on it in the space either side */
.statusbar {
  position: relative; flex: none; height: calc(var(--u) * 54);
  display: grid; grid-template-columns: 1fr calc(var(--u) * 126) 1fr;
  color: #fff; background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font);
}
.statusbar > b, .sb-icons { display: flex; align-items: center; justify-content: center; padding-top: calc(var(--u) * 6); }
.statusbar > b { grid-column: 1; padding-left: calc(var(--u) * 6); font-size: calc(var(--u) * 17); font-weight: 600; letter-spacing: -0.025em; }
.island { position: absolute; left: 50%; top: calc(var(--u) * 11); translate: -50% 0; width: calc(var(--u) * 126); height: calc(var(--u) * 37.3); border-radius: 999px; background: #000; }
.sb-icons { grid-column: 3; gap: calc(var(--u) * 5.5); padding-right: calc(var(--u) * 4); }
.sb-icons svg { flex: none; color: #fff; }
.sb-icons .sb-signal { width: calc(var(--u) * 17.4); height: calc(var(--u) * 11.6); }
.sb-icons .sb-wifi { width: calc(var(--u) * 16.5); height: calc(var(--u) * 11.8); }
/* the battery with its percentage in it, filled as far as it's charged */
.sb-icons .batt {
  position: relative; flex: none; display: grid; place-items: center;
  width: calc(var(--u) * 24.5); height: calc(var(--u) * 13); margin-right: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 4.2);
  background: linear-gradient(90deg, #fff 87%, rgba(255, 255, 255, 0.35) 87%);
  padding-top: calc(var(--u) * 0.8);
  color: var(--bg); font-size: calc(var(--u) * 10.5); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.sb-icons .batt::after { content: ''; position: absolute; right: calc(var(--u) * -2.6); top: 50%; translate: 0 -50%; width: calc(var(--u) * 1.4); height: calc(var(--u) * 4.4); border-radius: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0; background: rgba(255, 255, 255, 0.4); }

/* the phones are a click-through of the app (demo.js) */
.iphone .app { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.iphone .app::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--w) * 0.022); z-index: 5; width: 36%; height: calc(var(--w) * 0.013); border-radius: 99px; background: rgba(255, 255, 255, 0.75); transform: translateX(-50%); pointer-events: none; }
.app .view { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--bg); }
.app .view::-webkit-scrollbar { display: none; }
.app .canvas { position: relative; width: 100%; }
.app .canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the real app (live.js) on top once it has loaded */
.iphone .live-app { position: absolute; left: 0; z-index: 4; width: 390px; border: 0; transform-origin: 0 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.iphone.is-app .live-app { opacity: 1; pointer-events: auto; }
.app .spot { position: absolute; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
.app .spot:hover { background: rgba(255, 255, 255, 0.04); }
.app .spot.flash, .app .spot:active { background: rgba(255, 255, 255, 0.1); }
.app .spot:focus-visible { outline: 2px solid var(--up); outline-offset: -2px; }
.view.in-push { animation: in-push 0.38s cubic-bezier(.2, .8, .2, 1) both; }
.view.out-push { animation: out-push 0.38s cubic-bezier(.2, .8, .2, 1) both; }
.view.in-back { animation: out-push 0.38s cubic-bezier(.2, .8, .2, 1) reverse both; }
.view.out-back { animation: in-push 0.38s cubic-bezier(.2, .8, .2, 1) reverse both; }
.view.in-modal { animation: in-modal 0.38s cubic-bezier(.2, .8, .2, 1) both; }
.view.out-close { animation: in-modal 0.34s cubic-bezier(.4, 0, .8, .4) reverse both; }
.view.in-fade { animation: in-fade 0.22s ease both; }
@keyframes in-push { from { transform: translateX(100%); } }
@keyframes out-push { to { transform: translateX(-28%); filter: brightness(0.6); } }
@keyframes in-modal { from { transform: translateY(100%); } }
@keyframes in-fade { from { opacity: 0; } }
.demo-hint { position: absolute; left: 50%; bottom: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; translate: -50% 0; white-space: nowrap; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.demo-hint svg { width: 16px; height: 16px; color: var(--up); }
.iphone:not(.is-live) ~ .demo-hint { display: none; }
/* the hero phone opens the real app (live.js) the way iOS opens one: its launch screen until it's
   ready, then the app. The screenshots underneath only show if the app can't load (.no-app) */
.launch { display: none; }
.js .iphone[data-live] .launch {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--u) * 54); z-index: 3;
  display: grid; place-items: center; background: var(--bg); transition: opacity 0.35s ease;
}
.launch svg { width: 27%; aspect-ratio: 1; color: #fff; animation: launch-breathe 1.8s ease-in-out infinite; }
@keyframes launch-breathe { 50% { opacity: 0.55; scale: 0.96; } }
/* the app fades in over it; it stays opaque underneath so the screenshots never show through */
.iphone.is-app .launch svg { animation: none; opacity: 0; transition: opacity 0.3s; }
.iphone.no-app .launch { opacity: 0; pointer-events: none; }
/* "Tap around" once there's something to tap */
.js .iphone[data-live]:not(.is-app):not(.no-app) ~ .demo-hint { display: none; }
.js .iphone[data-live].is-app ~ .demo-hint { display: inline-flex; }

/* coins rolling past under a glowing line; point at one (or tap it) and it lights up in its own colour */
.cloud { position: relative; padding: 14px 0 10px; overflow: hidden; }
.cloud::before { content: ''; position: absolute; top: 0; left: 50%; width: min(820px, 86%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(52, 199, 123, 0.18) 22%, rgba(120, 230, 170, 0.75) 50%, rgba(52, 199, 123, 0.18) 78%, transparent); }
.cloud::after { content: ''; position: absolute; top: -90px; left: 50%; width: min(700px, 96%); height: 230px; translate: -50% 0; background: radial-gradient(closest-side, rgba(52, 199, 123, 0.15), rgba(52, 199, 123, 0.09) 30%, rgba(52, 199, 123, 0.04) 58%, rgba(52, 199, 123, 0.012) 80%, transparent); pointer-events: none; }
.lane { position: relative; z-index: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.lane-track { display: flex; width: max-content; animation: roll 80s linear infinite; }
/* roomy enough top and bottom that a lit ticker's glow isn't cut off */
.lane-set { display: flex; align-items: center; gap: 76px; padding: 32px 38px; }
@keyframes roll { to { transform: translateX(-50%); } }
.coin { position: relative; display: inline-flex; align-items: center; flex: none; padding: 6px 4px; border: 0; background: none; color: rgba(255, 255, 255, 0.5); font: inherit; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.35s ease; }
.coin span { transition: color 0.35s ease, text-shadow 0.35s ease; }
/* .hot: under the cursor (app.js), .lit: just tapped */
.coin.hot, .coin.lit { color: color-mix(in srgb, var(--c) 72%, #fff); }
/* the word itself lights up in its colour: a tight glow on the letters and a softer one around them */
.coin.hot span, .coin.lit span { text-shadow: 0 0 8px color-mix(in srgb, var(--c) 90%, transparent), 0 0 22px color-mix(in srgb, var(--c) 70%, transparent), 0 0 42px color-mix(in srgb, var(--c) 45%, transparent); }
.coin:focus-visible { outline: 2px solid var(--up); outline-offset: 4px; border-radius: 10px; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  --c: var(--up);
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(180deg, #1b1b1e, var(--surface) 46%); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 30px; display: flex; flex-direction: column; gap: 10px;
}
/* each tile glows faintly in its own colour from the top corner, a little more when you point at it */
.tile::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--c) 13%, transparent), transparent 60%); opacity: 0.8; transition: opacity 0.4s ease, background 0.6s ease; pointer-events: none; }
.tile:hover { border-color: var(--border-strong); }
.tile:hover::before { opacity: 1; }
.tile-memes { --c: #4da2ff; }
.tile-cards { --c: #e0c34f; }
.tile-lock { --c: #b26bff; }
.tile-currency { --c: #25f4ee; }
.tile-markets:has(.chart-card.is-down) { --c: var(--down); }
.tile p { color: var(--text-2); font-size: 15.5px; }
.tile-markets { grid-column: span 4; grid-row: span 2; flex-direction: row; gap: 28px; min-height: 520px; }
.tile-markets .tile-text { flex: 1; align-self: stretch; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
/* "Live" up top, the words at the bottom */
.tile-markets .tile-text .chip { margin-bottom: auto; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-strong); color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.tile-markets h3, .tile-memes h3 { font-size: 26px; }
.pro-tag { display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: var(--up-soft); color: var(--up); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
/* Live charts: a real Bitcoin chart you can scrub and switch ranges on */
.chart-card { flex: none; width: 54%; align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding: 20px; margin: -10px -10px -10px 0; border-radius: 18px; background: #101012; border: 1px solid var(--border); color: var(--up); transition: color 0.5s ease; }
.chart-card.is-down { color: var(--down); }
.chart-head { display: flex; align-items: center; gap: 12px; color: var(--text); }
.chart-head img { width: 40px; height: 40px; border-radius: 50%; }
.chart-name { display: flex; flex-direction: column; line-height: 1.25; }
.chart-name small { color: var(--text-2); font-size: 13px; }
.chart-price { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.chart-price b { font-size: 22px; letter-spacing: -0.02em; }
.chart-price em { font-style: normal; font-weight: 600; font-size: 13.5px; }
.chart-plot { position: relative; flex: 1; min-height: 200px; transition: opacity 0.3s ease; }
.chart-card.is-loading .chart-plot { opacity: 0.4; }
/* the line draws itself in from the left the first time the tile scrolls into view */
.js .tile-markets .chart-plot svg { clip-path: inset(-20px 100% -20px -20px); transition: clip-path 1.5s cubic-bezier(.6, 0, .2, 1) 0.25s; }
.js .tile-markets.in .chart-plot svg { clip-path: inset(-20px -20px -20px -20px); }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.chart-line { fill: none; stroke: currentColor; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-cross { stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0; }
.chart-dot { fill: currentColor; stroke: #101012; stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; }
.chart-tip { position: absolute; top: -6px; translate: -50% -100%; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); font-size: 12.5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.chart-card.is-reading .chart-cross, .chart-card.is-reading .chart-dot, .chart-card.is-reading .chart-tip { opacity: 1; }
.chart-ranges { position: relative; display: flex; gap: 6px; }
.chart-ranges button { position: relative; z-index: 1; flex: 1; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: 600 13px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.25s, transform 0.2s cubic-bezier(.2, .8, .2, 1); }
.chart-ranges button:hover { color: var(--text); }
.chart-ranges button:active { transform: scale(0.92); }
.chart-ranges button[aria-selected='true'] { color: var(--text); }
/* the highlight behind the picked range slides over to the next one (widgets.js) */
.range-pill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none; transition: transform 0.5s cubic-bezier(.3, 1.25, .5, 1), width 0.5s cubic-bezier(.3, 1.25, .5, 1); }

/* Memecoins too: the coins as they look in the app */
.tile-memes { grid-column: span 2; grid-row: span 2; container-type: inline-size; }
/* a narrow Memecoins tile (around iPad width) drops the sparklines before the prices get cut off */
@container (max-width: 290px) {
  .coin-list .spark { display: none; }
}
.coin-list { display: grid; gap: 4px; margin: 14px -10px -10px; padding: 8px; border-radius: 18px; background: #101012; border: 1px solid var(--border); }
.coin-list li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background 0.2s; }
.coin-list li:hover { background: var(--surface); }
.coin-list img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.s-main b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-main small { color: var(--text-2); font-size: 12.5px; }
.spark { width: 60px; height: 24px; flex: none; color: var(--up); }
.spark.down { color: var(--down); }
.spark path { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* a fixed width, so the sparklines line up whatever the price */
.s-price { display: flex; flex-direction: column; align-items: flex-end; width: 84px; flex: none; line-height: 1.25; font-variant-numeric: tabular-nums; }
.s-price b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.s-price em { font-style: normal; font-weight: 600; font-size: 12.5px; }
.tile-cards { grid-column: span 3; min-height: 280px; container-type: inline-size; }
.tile-pay { grid-column: span 3; min-height: 280px; }
.tile-lock { grid-column: span 3; }
.tile-currency { grid-column: span 3; }
.tile-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 8px; }
.tile .tile-icon { color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border-color: color-mix(in srgb, var(--c) 26%, transparent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.tile-icon .ic { width: 22px; height: 22px; }

/* tap a card and it moves to the front, like the big fan under Our own cards (app.js) */
.mini-fan { --card: 252px; --step: min(86px, (100cqw - var(--card) - 12px) / 2); position: relative; height: 218px; margin-top: auto; padding-top: 24px; }
.mini-fan img { position: absolute; right: 6px; bottom: 32px; width: var(--card); border-radius: 13px; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.9); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), translate 0.3s cubic-bezier(.2, .8, .2, 1); }
.mini-fan img[data-slot="0"] { z-index: 1; transform: translate(calc(var(--step) * -2), 24px) rotate(-10deg); }
.mini-fan img[data-slot="1"] { z-index: 2; transform: translate(calc(var(--step) * -1), 12px) rotate(-3deg); }
.mini-fan img[data-slot="2"] { z-index: 3; transform: rotate(5deg); }
.mini-fan img.lift { animation: mini-lift 0.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes mini-lift { 40% { translate: 0 -34px; } }
@media (hover: hover) {
  .tile-cards:hover .mini-fan img[data-slot="0"] { transform: translate(calc(var(--step) * -2 - 16px), 24px) rotate(-12deg); }
  .tile-cards:hover .mini-fan img[data-slot="2"] { transform: translate(10px, 0) rotate(6deg); }
  .mini-fan img:not([data-slot="2"]):hover { translate: 0 -10px; }
}

.rows { margin-top: auto; display: grid; gap: 8px; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.row-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #2c2c30; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.row-main b, .row-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main b { font-size: 15px; font-weight: 600; }
.row-main small { color: var(--text-2); font-size: 12.5px; }
.row-amt { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }


/* point at a card and it tilts toward the cursor; press one on a phone and it gives under your finger
   (app.js sets --rx, --ry, --lift, --s, --px, --py).
   Cards also tip up into place as they scroll in (scroll reveal, bottom of this file) */
:is(.tile, .plan, .steps li, .uses-grid li, .contact, .card-fan) {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --s: 1;
  transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: transform 0.8s cubic-bezier(.2, .8, .2, 1), opacity 0.7s ease, border-color 0.3s, box-shadow 0.4s;
}
:is(.tile, .plan, .steps li, .uses-grid li, .contact, .card-fan).tilting {
  transition: transform 0.16s ease-out, opacity 0.7s ease, border-color 0.3s, box-shadow 0.4s;
}
:is(.tile, .plan, .steps li, .uses-grid li, .contact).tilting { border-color: var(--border-strong); box-shadow: 0 50px 80px -44px rgba(0, 0, 0, 0.95); }
.uses-grid li.tilting { border-color: color-mix(in srgb, var(--c) 34%, transparent); }
/* what's inside drifts a little the other way, so the card has some depth */
.tile :is(.chart-card, .coin-list, .mini-fan, .rows, .tile-icon), .uses-grid .use-icon, .steps .num, .contact .tile-icon {
  translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px);
  transition: translate 0.8s cubic-bezier(.2, .8, .2, 1), transform 0.45s cubic-bezier(.3, 1.4, .5, 1);
}
.tilting :is(.chart-card, .coin-list, .mini-fan, .rows, .tile-icon, .use-icon, .num) { transition: translate 0.16s ease-out, transform 0.45s cubic-bezier(.3, 1.4, .5, 1); }

/* how */
.how-grid { display: block; }
.how-grid .steps { grid-template-columns: repeat(3, 1fr); }
.how-grid .steps li { flex-direction: column; }
.steps { display: grid; gap: 14px; counter-reset: step; }
.steps li { position: relative; display: flex; gap: 18px; padding: 22px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.steps .num { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: var(--text); color: var(--bg); }
.steps h3 { font-size: 18px; margin-bottom: 6px; }
.steps p { color: var(--text-2); font-size: 15.5px; }
/* what people use it for: one big tile each, lit in its own colour */
.uses { margin-top: 48px; }
.uses-title { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.035em; margin-bottom: 22px; }
.uses-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.uses-grid li {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  min-height: 188px; padding: 24px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--border);
}
.uses-grid li::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 62%); opacity: 0.75; transition: opacity 0.35s ease; }
.use-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.use-icon svg { width: 30px; height: 30px; }
.uses-grid b { font-size: 19px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
@media (hover: hover) {
  .uses-grid li:hover { border-color: color-mix(in srgb, var(--c) 34%, transparent); }
  .uses-grid li:hover::before { opacity: 1; }
  .uses-grid li:hover .use-icon { transform: scale(1.1) rotate(-6deg); }
}

/* cards */
.cards-section { overflow: hidden; }
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.card-fan { --k: 1; position: relative; height: calc(400px * var(--k)); }
.card-fan img { position: absolute; left: 50%; top: 50%; width: calc(360px * var(--k)); border-radius: calc(20px * var(--k)); box-shadow: 0 40px 60px -26px rgba(0, 0, 0, 0.95); transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), translate 0.3s cubic-bezier(.2, .8, .2, 1); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card-fan img.lift { animation: card-lift 0.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes card-lift { 40% { translate: 0 calc(-48px * var(--k)); } }
.card-fan img[data-slot="0"] { z-index: 1; transform: translate(-50%, -50%) translate(calc(-70px * var(--k)), calc(-72px * var(--k))) rotate(-14deg); }
.card-fan img[data-slot="1"] { z-index: 2; transform: translate(-50%, -50%) translate(calc(-24px * var(--k)), calc(-24px * var(--k))) rotate(-6deg); }
.card-fan img[data-slot="2"] { z-index: 3; transform: translate(-50%, -50%) translate(calc(24px * var(--k)), calc(24px * var(--k))) rotate(3deg); }
.card-fan img[data-slot="3"] { z-index: 4; transform: translate(-50%, -50%) translate(calc(70px * var(--k)), calc(70px * var(--k))) rotate(10deg); }
@media (hover: hover) {
  .card-fan:hover img[data-slot="0"] { transform: translate(-50%, -50%) translate(calc(-104px * var(--k)), calc(-72px * var(--k))) rotate(-16deg); }
  .card-fan:hover img[data-slot="3"] { transform: translate(-50%, -50%) translate(calc(104px * var(--k)), calc(70px * var(--k))) rotate(12deg); }
  .card-fan img:not([data-slot="3"]):hover { translate: 0 calc(-14px * var(--k)); }
}
.ticks { display: grid; gap: 12px; margin-top: 28px; }
.ticks li { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 15.5px; }
.ticks .ic { color: var(--up); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 18px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 32px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); transform-style: preserve-3d; }
/* a tilting plan's price and badge stand off it */
.plan .price, .plan .badge { transform: translateZ(0); transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.plan.plan-best.tilting { box-shadow: 0 50px 100px -40px rgba(52, 199, 123, 0.5); }
.plan.tilting .price { transform: translateZ(36px); }
.plan.tilting .badge { transform: translateZ(54px); }
.plan .ticks { margin: 22px 0 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.plan .btn { margin-top: auto; width: 100%; }
.plan-name { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.price { font-size: 50px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.1; margin-top: 6px; }
.price span { white-space: nowrap; font-size: 17px; font-weight: 500; color: var(--text-2); letter-spacing: 0; margin-left: 6px; }
.plan-note { color: var(--text-2); font-size: 14.5px; }
.plan-best { background: linear-gradient(180deg, #1d1d20, #141416); border-color: var(--border-strong); box-shadow: 0 30px 80px -40px rgba(52, 199, 123, 0.35); }
.badge { position: absolute; top: -12px; right: 24px; padding: 6px 12px; border-radius: 999px; background: var(--up); color: #0b0b0c; font-size: 12.5px; font-weight: 700; }
.fine { text-align: center; color: var(--text-3); font-size: 13.5px; margin-top: 26px; }

/* faq */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 24px 72px; align-items: start; }
.faq-grid .section-head { margin-bottom: 0; position: sticky; top: 110px; }
.faq details { border-bottom: 1px solid var(--border); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 1px 20px 0; font-weight: 600; font-size: 17px;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
/* the chevron sits in a round button and turns over when the answer opens */
.faq summary::after {
  content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong); background-color: rgba(255, 255, 255, 0.03);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23a1a1a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 16px;
  transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), background-color 0.2s, border-color 0.2s;
}
.faq summary:hover::after { background-color: rgba(255, 255, 255, 0.08); }
.faq details[open] summary::after { transform: rotate(180deg); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.faq details.closing summary::after { transform: none; background-color: rgba(255, 255, 255, 0.03); border-color: var(--border-strong); }
.faq details p { color: var(--text-2); padding: 0 0 22px; max-width: 620px; }
.faq details a { color: var(--text); }
.contact { position: relative; grid-column: 2; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); margin-top: 20px; }
.contact-head { display: flex; gap: 14px; align-items: center; }
.contact-head .tile-icon { margin: 0; }
.contact-head p { color: var(--text-2); font-size: 14.5px; }
.contact-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pill-link { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 14px; text-decoration: none; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); transition: background 0.2s, border-color 0.2s; }
.pill-link:hover { background: #2a2a2e; border-color: var(--border-strong); }
.pill-link-wide { grid-column: 1 / -1; }

/* closing band */
.cta-band { padding: 16px 0 80px; }
.cta-inner {
  position: relative; overflow: hidden; text-align: center; isolation: isolate;
  padding: 88px 24px; border-radius: 32px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.cta-inner::before {
  /* the green glow follows the cursor around the closing band */
  content: ''; position: absolute; z-index: -2; left: var(--gx, 50%); top: var(--gy, 0%); width: 900px; height: 900px; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(52, 199, 123, 0.28) 0%, rgba(52, 199, 123, 0.14) 35%, rgba(52, 199, 123, 0.04) 68%, rgba(52, 199, 123, 0) 100%);
  filter: blur(48px); pointer-events: none; transition: left 0.7s cubic-bezier(.2, .8, .2, 1), top 0.7s cubic-bezier(.2, .8, .2, 1);
}
.cta-inner::after {
  /* fine grain on top breaks up the colour steps a smooth dark gradient shows on most screens */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta-mark { width: 70px; height: 70px; margin: 0 auto 22px; display: block; }
.cta-inner h2 { font-size: clamp(44px, 6.4vw, 78px); letter-spacing: -0.05em; }
.cta-inner p { color: var(--text-2); font-size: 18px; margin: 20px auto 32px; max-width: 460px; }
.cta-inner .waitlist { margin: 0 auto; text-align: left; }
.cta-inner .waitlist-msg, .cta-inner .waitlist-alt { text-align: center; font-size: 14px; }
.cta-inner .waitlist-msg { margin: 12px auto 0; }
.cta-inner .waitlist-alt { margin: 14px auto 0; }
.cta-inner .waitlist.is-done { text-align: center; }

/* footer */
.footer { border-top: 1px solid var(--border); padding: 56px 0 40px; background: #0a0a0b; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-line { color: var(--text-2); margin-top: 10px; font-size: 14.5px; }
.socials { display: flex; gap: 8px; margin-top: 18px; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); transition: background 0.2s; }
.socials a:hover { background: var(--surface-2); }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 24px 64px; align-content: flex-start; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col h3 { margin-bottom: 4px; color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-col a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px 60px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13px; }
.disclaimer { max-width: 640px; text-align: right; }

/* scroll reveal: only when the script runs, and never when motion is reduced. Things slide up (translate,
   so it never fights a card's tilt), cards tip up into place and headings come out of a blur */
.js .reveal { opacity: 0; translate: 0 22px; transition: opacity 0.7s ease, translate 0.8s cubic-bezier(.2, .8, .2, 1), filter 0.8s ease; }
.js .reveal.in { opacity: 1; translate: none; }
.js :is(.tile, .plan, .steps li, .uses-grid li, .contact, .card-fan).reveal:not(.tilting) { transition: opacity 0.7s ease, translate 0.9s cubic-bezier(.2, .8, .2, 1), transform 0.9s cubic-bezier(.2, .8, .2, 1), border-color 0.3s, box-shadow 0.4s; }
.js :is(.tile, .plan, .steps li, .uses-grid li, .contact, .card-fan).reveal:not(.in) { --rx: 16deg; --s: 0.96; translate: 0 36px; }
.js :is(.section-head, .uses-title, .cards-grid > div:not(.card-fan)).reveal:not(.in) { filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js :is(.tile, .plan, .steps li, .uses-grid li, .contact, .card-fan).reveal:not(.in), .js .reveal:not(.in) { opacity: 1; translate: none; filter: none; --rx: 0deg; --s: 1; transition: none; }
  .js .tile-markets .chart-plot svg { clip-path: none; transition: none; }
  .range-pill, .chart-card { transition: none; }
  .lane-track, .dot, .launch svg, .scroll-hint .ic, .notfound-mask { animation: none !important; }
  .app .view { animation-duration: 0.01s !important; }
  .links, .links a { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* tablet */
@media (max-width: 1020px) {
  .hero-grid, .how-grid, .cards-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .hero .waitlist { margin-left: auto; margin-right: auto; text-align: left; }
  .hero .waitlist-msg, .hero .waitlist.is-done { text-align: center; }
  .hero { display: block; min-height: 0; padding: 56px 0 72px; }
  .hero-visual { --pw: clamp(220px, (var(--vh) - 150px) * 0.462, 318px); padding: 30px 0 46px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile-markets { grid-column: span 2; min-height: 470px; }
  .tile-memes { grid-column: span 2; grid-row: auto; flex-direction: row; padding-bottom: 30px; }
  .tile-memes .tile-text { flex: 1; align-self: flex-end; }
  .tile-memes .coin-list { flex: none; width: 52%; margin: -10px -10px -10px 0; }
  .tile-cards, .tile-pay, .tile-lock, .tile-currency { grid-column: span 1; }
  .plans { grid-template-columns: minmax(0, 480px); }
  .uses-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .uses-grid li { grid-column: span 2; min-height: 168px; }
  .uses-grid li:nth-child(n + 4) { grid-column: span 3; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .section-head { position: static; }
  .contact { grid-column: 1; }
  .card-fan { order: 2; --k: 0.9; }
}

/* phone */
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  .nav-inner { gap: 12px; }
  .nav-cta { display: none; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); background: transparent; padding: 0 12px; cursor: pointer; }
  .menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.25s; }
  .menu-btn[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .links {
    position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 2px; margin: 0;
    padding: 10px 18px 20px; background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
    display: flex; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
    transition: clip-path 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease, visibility 0s linear 0.4s;
  }
  .links.open { visibility: visible; opacity: 1; clip-path: inset(0 0 -80px 0); transition: clip-path 0.5s cubic-bezier(.2, .8, .2, 1), opacity 0.2s ease, visibility 0s; }
  .links a { font-size: 17px; padding: 14px 12px; border-radius: 12px; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.2, .8, .2, 1), color 0.2s, background 0.2s; }
  .links.open a { opacity: 1; transform: none; }
  .links.open a:nth-child(2) { transition-delay: 0.04s; }
  .links.open a:nth-child(3) { transition-delay: 0.08s; }
  .links.open a:nth-child(4) { transition-delay: 0.12s; }
  .links.open a:nth-child(5) { transition-delay: 0.16s; }
  .links.open a:nth-child(6) { transition-delay: 0.2s; }
  .links .menu-only { display: block; margin-top: 8px; text-align: center; background: var(--text); color: var(--bg); font-weight: 600; }
  .section { padding: 44px 0; }
  .cloud + .section { padding-top: 28px; }
  .section-head { margin-bottom: 26px; }
  .hero { padding: 40px 0 56px; }
  /* the first screen is the words and the phone sits right below it: it starts loading straight away,
     so by the time you scroll down to it the app is up instead of its launch screen */
  .hero-copy { min-height: calc(var(--vh) - 64px - 40px); display: flex; flex-direction: column; }
  .hero-copy .hero-badge { align-self: center; margin-top: auto; }
  .scroll-hint {
    display: inline-flex; align-items: center; gap: 8px; align-self: center; margin-top: auto; padding: 22px 14px 14px;
    color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none;
  }
  .scroll-hint .ic { width: 16px; height: 16px; rotate: 90deg; animation: hint-bob 1.8s ease-in-out infinite; }
  @keyframes hint-bob { 50% { translate: 0 4px; } }
  .lead { font-size: 17px; }
  .btn { height: 50px; }
  .hero-visual { --pw: clamp(210px, (var(--vh) - 130px) * 0.462, 270px); }
  .bento { grid-template-columns: 1fr; }
  .tile-markets, .tile-memes, .tile-cards, .tile-pay, .tile-lock, .tile-currency { grid-column: auto; }
  .tile-markets, .tile-memes { flex-direction: column; min-height: 0; }
  .tile-markets .tile-text, .tile-memes .tile-text { align-self: auto; }
  .chart-card, .tile-memes .coin-list { width: auto; margin: 16px -14px -14px; }
  .chart-plot { min-height: 190px; }
  .how-grid .steps { grid-template-columns: 1fr; }
  .how-grid .steps li { flex-direction: row; }
  .uses { margin-top: 36px; }
  .uses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .uses-grid li, .uses-grid li:nth-child(n + 4) { grid-column: auto; min-height: 150px; padding: 18px; gap: 22px; border-radius: 20px; }
  .uses-grid li:last-child { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .use-icon { width: 50px; height: 50px; border-radius: 16px; }
  .use-icon svg { width: 25px; height: 25px; }
  .uses-grid b { font-size: 17px; }
  .cloud { padding: 6px 0 2px; }
  .lane-set { gap: 44px; padding: 28px 22px; }
  .coin { font-size: 16px; }
  .lane { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .mini-fan { --card: min(190px, 62cqw); --step: min(59px, (100cqw - var(--card) - 12px) / 2); height: 186px; }
  .mini-fan img { border-radius: 11px; }
  .card-fan { --k: 0.64; height: calc(500px * var(--k)); }
  .plans { grid-template-columns: 1fr; }
  .price { font-size: 44px; }
  .cta-band { padding: 8px 0 0; }
  .cta-inner { padding: 72px 24px 80px; border-radius: 0; border-width: 1px 0; }
  .footer-bottom { flex-direction: column; }
  .disclaimer { text-align: left; }
}

/* privacy page */
.legal { padding: 64px 0 110px; }
.crumbs { display: flex; gap: 8px; margin-bottom: 26px; color: var(--text-3); font-size: 14.5px; }
.legal .crumbs a { color: var(--text-3); text-decoration: none; }
.legal .crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }
.legal-summary { margin: 0 0 8px; padding: 26px 28px; border: 1px solid rgba(52, 199, 123, 0.28); border-radius: 22px; background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(52, 199, 123, 0.09), transparent 60%), var(--bg-2); }
.legal .legal-summary h2 { margin-top: 0; }
.legal ul.legal-checks { list-style: none; padding: 0; margin: 18px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.legal-checks li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15.5px; }
.legal-checks .ic { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: var(--bg); background: var(--up); }
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; width: 100%; }
  .legal-summary { padding: 22px 20px; }
  .legal ul.legal-checks { grid-template-columns: 1fr; }
}
.legal-wrap { max-width: 760px; }
.legal h1 { font-size: clamp(40px, 6vw, 60px); letter-spacing: -0.045em; }
.legal-date { color: var(--text-3); margin: 14px 0 34px; font-size: 14.5px; }
.legal h2 { font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 12px; }
.legal h3 { font-size: 18px; letter-spacing: -0.01em; margin: 26px 0 8px; }
.legal h2[id] { scroll-margin-top: 90px; }
.legal p, .legal li { color: var(--text-2); font-size: 16.5px; }
.legal p + p { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 22px; margin: 12px 0; display: grid; gap: 8px; }
.legal b { color: var(--text); font-weight: 600; }
.legal a { color: var(--text); text-underline-offset: 3px; }

/* 404 */
.notfound { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh / var(--z)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 96px 24px 48px; }
.notfound h1 { font-size: clamp(36px, 6vw, 56px); letter-spacing: -0.045em; }
.notfound p { color: var(--text-2); margin-bottom: 14px; }
/* 404: the logo in the corner and "404" with the mask for its 0, on the hero's green glow */
.notfound-brand { position: absolute; top: 22px; left: 24px; z-index: 1; }
.notfound-glow { position: absolute; z-index: -1; left: 50%; top: 46%; width: min(760px, 140vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(52, 199, 123, 0.16), transparent 62%); filter: blur(10px); pointer-events: none; }
.notfound-code { display: flex; align-items: center; font-size: clamp(112px, 24vw, 210px); font-weight: 800; line-height: 0.9; letter-spacing: -0.07em; background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.28)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound-mask { width: 0.9em; height: 0.9em; margin: 0 -0.05em 0 0.01em; translate: 0 0.03em; color: var(--text); filter: drop-shadow(0 10px 40px rgba(52, 199, 123, 0.35)); animation: notfound-breathe 2.8s ease-in-out infinite; }
@keyframes notfound-breathe { 50% { opacity: 0.8; scale: 0.96; } }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* waitlist admin (admin.html, admin.js) */
.admin-nav { gap: 12px; }
.admin-chip { padding: 3px 9px; border-radius: 999px; background: var(--up-soft); color: var(--up); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.admin-updated { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.admin-icon-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: background 0.2s; }
.admin-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
.admin-icon-btn .ic { width: 17px; height: 17px; }
.admin-icon-btn.is-spinning .ic { animation: admin-spin 0.7s linear infinite; }
@keyframes admin-spin { to { rotate: 360deg; } }
.admin { max-width: 1120px; padding-top: 28px; padding-bottom: 96px; }
.admin .waitlist input { flex: 1; width: 0; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 500 16px/1 var(--font); outline: none; }
.admin .waitlist input::placeholder { color: var(--text-3); }
.admin-label { color: var(--text-2); font-size: 13.5px; font-weight: 500; }

/* the key, on a card of its own */
.admin-login { max-width: 440px; margin: 9vh auto 0; padding: 36px 32px 28px; text-align: center; border-radius: 28px; background: radial-gradient(120% 90% at 50% 0%, rgba(52, 199, 123, 0.13), transparent 60%), var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.admin-login-mark { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 20px; background: var(--up-soft); border: 1px solid rgba(52, 199, 123, 0.3); color: var(--text); }
.admin-login-mark svg { width: 40px; height: 40px; }
.admin-login h1 { font-size: 28px; letter-spacing: -0.035em; }
.admin-login p { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.admin-login code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 13px; }
.admin-login .waitlist { margin-top: 24px; max-width: none; text-align: left; }
.admin-login .waitlist-msg { min-height: 1.4em; text-align: center; }
.admin-remember { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--text-2); font-size: 14px; cursor: pointer; }
.admin-remember input { width: 17px; height: 17px; accent-color: #34c77b; }
.admin-warn { margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 176, 32, 0.1); border: 1px solid rgba(255, 176, 32, 0.4); color: var(--text); font-size: 14px; line-height: 1.5; }
.admin-warn code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font-size: 12.5px; }

/* the big number, with how the list grew this month along its bottom, and four smaller ones */
.admin-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }
.admin-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 240px; padding: 24px 28px 0; border-radius: 26px; background: radial-gradient(90% 120% at 0% 0%, rgba(52, 199, 123, 0.16), transparent 60%), var(--surface); border: 1px solid rgba(52, 199, 123, 0.22); }
.admin-hero-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.admin-total { font-size: clamp(64px, 9vw, 100px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-delta { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--up-soft); color: var(--up); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-delta .ic { width: 15px; height: 15px; }
.admin-hero-sub { color: var(--text-2); font-size: 15px; }
.admin-spark { display: block; width: calc(100% + 56px); height: 64px; margin: auto -28px 0; }
.admin-spark-area { fill: rgba(52, 199, 123, 0.12); }
.admin-spark-line { fill: none; stroke: var(--up); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.admin-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-stats li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.admin-stats b { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.admin-stats small { color: var(--text-3); font-size: 13px; }
.admin-stats small.is-up { color: var(--up); }
.admin-stats small.is-down { color: var(--down); }

/* cards */
.admin-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.admin-card { position: relative; padding: 22px 24px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); }
.admin-card h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.admin-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.admin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); }
.admin-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 13px/1 var(--font); cursor: pointer; transition: background 0.2s, color 0.2s; }
.admin-seg button:hover { color: var(--text); }
.admin-seg button[aria-pressed='true'] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* the chart: columns from one baseline (or the list's size as a line), recessive hairlines, a tip on hover */
/* the chart fills its card, which is as tall as the one beside it */
.admin-chart-card { display: flex; flex-direction: column; }
.admin-chart { position: relative; flex: 1; min-height: 240px; touch-action: pan-y; }
/* out of the flow, so the drawing never holds the box at its old size */
.admin-chart svg { position: absolute; inset: 0; display: block; overflow: visible; }
.admin-chart .grid { stroke: var(--border); }
.admin-chart .base { stroke: var(--border-strong); }
.admin-chart text { fill: var(--text-3); font: 500 11.5px var(--font); font-variant-numeric: tabular-nums; }
.admin-chart .bar { fill: var(--up); opacity: 0.9; transition: opacity 0.15s; }
.admin-chart.is-hover .bar { opacity: 0.4; }
.admin-chart .bar.is-on { opacity: 1; }
.admin-chart .area { fill: rgba(52, 199, 123, 0.1); }
.admin-chart .line { fill: none; stroke: var(--up); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.admin-chart .cross { stroke: var(--border-strong); }
.admin-chart .dot { fill: var(--up); stroke: var(--surface); stroke-width: 2; }
.admin-tip { position: absolute; z-index: 2; translate: -50% -100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8); white-space: nowrap; pointer-events: none; font-size: 14px; }
.admin-tip em { color: var(--up); font-style: normal; font-weight: 600; }
.admin-tip small { color: var(--text-2); font-size: 12.5px; }

/* which form, and which email providers */
.admin-split { display: flex; gap: 2px; height: 12px; margin: 16px 0 14px; }
.admin-split span { min-width: 4px; border-radius: 4px; }
.admin-split.is-empty { border-radius: 4px; background: var(--surface-2); }
.admin-legend { display: grid; gap: 10px; }
.admin-legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.admin-legend i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--c); }
.admin-legend span { flex: 1; color: var(--text-2); }
.admin-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-legend em { width: 44px; text-align: right; color: var(--text-3); font-style: normal; font-variant-numeric: tabular-nums; }
.admin-side-gap { margin-top: 28px; }
.admin-domains { display: grid; gap: 12px; margin-top: 14px; }
.admin-domains li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: 14px; }
.admin-domains span { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.admin-domains b { font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-domains i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.admin-domains i::after { content: ''; display: block; width: var(--w); height: 100%; border-radius: 4px; background: rgba(255, 255, 255, 0.3); }
.admin-empty-note { color: var(--text-3); font-size: 14px; }

/* the list */
.admin-list { margin-top: 14px; }
.admin-count { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.admin-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-3); transition: border-color 0.2s; }
.admin-search:focus-within { border-color: rgba(255, 255, 255, 0.28); }
.admin-search .ic { width: 16px; height: 16px; }
/* 16px so iPhones don't zoom in on the field */
.admin-search input { width: 190px; min-width: 0; border: 0; background: transparent; color: var(--text); font: 500 16px/1 var(--font); outline: none; }
.admin-search input::placeholder { color: var(--text-3); }
.admin-list .btn .ic { width: 16px; height: 16px; }
.admin-rows li { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-top: 1px solid var(--border); }
.admin-rows li:first-child { border-top: 0; }
.admin-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 700; text-transform: uppercase; }
.admin-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-row-main b { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-main small { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13px; }
.admin-src { display: inline-flex; align-items: center; gap: 6px; }
.admin-src::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.admin-del { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
.admin-rows li:hover .admin-del, .admin-del:focus-visible { opacity: 1; }
.admin-del:hover { background: rgba(240, 97, 109, 0.12); color: var(--down); }
.admin-del .ic { width: 17px; height: 17px; }
@media (hover: none) { .admin-del { opacity: 1; } }
.admin-rows .admin-empty { justify-content: center; padding: 34px 8px; color: var(--text-2); text-align: center; }
.admin-more { margin-top: 12px; }
.admin-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13.5px; }
.admin-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14.5px; font-weight: 600; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); animation: admin-toast 0.3s cubic-bezier(.2, .8, .2, 1); }
@keyframes admin-toast { from { opacity: 0; translate: -50% 12px; } }
@media (max-width: 900px) {
  .admin-top, .admin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .admin { padding-top: 18px; }
  .admin-updated { display: none; }
  .admin-login { margin-top: 5vh; padding: 30px 20px 22px; }
  .admin-hero { min-height: 210px; padding: 22px 20px 0; }
  .admin-spark { width: calc(100% + 40px); margin: auto -20px 0; }
  .admin-stats { gap: 10px; }
  .admin-stats li { padding: 16px; }
  .admin-stats b { font-size: 26px; }
  .admin-card { padding: 18px 16px 20px; border-radius: 22px; }
  .admin-chart { min-height: 200px; }
  .admin-list .admin-controls { width: 100%; }
  .admin-search { flex: 1 1 100%; }
  .admin-search input { width: 100%; }
}

/* big screens: everything a size up, so the page doesn't look tiny on a Mac */
@media (min-width: 1280px) { :root { --z: 1.1; } body { zoom: var(--z); } }
@media (min-width: 1600px) { :root { --z: 1.2; } }
@media (min-width: 1920px) { :root { --z: 1.32; } }