/* ==========================================================================================
   Desk · the "pastel" theme · the shared sheet of the whole site: index, launch, coin and explore
   (each page adds only what is its own in <page>.css, loaded after this file)

   DESIGN NOTE
   Palette   ground #F7F5FF (lavender-cream) · surface #FFFFFF · ink #1E1A3C (15.3:1 on ground)
             ink-2 #5B5680 (6.3:1 on ground, 6.8:1 on white, 5.3:1 on the hero stage, 5.6:1 on the footer)
             line #DCD3F9 (cards stand off the ground) · line-2 #E9E3FC (rules inside a card)
             stage #E6DEFF · footer #ECE6FF
             violet #6245F0, the one confident colour, used generously: buttons, the "All 12 coins" pill,
             the step numerals, the share bubble, the arrival bar (white on it 5.8:1) · violet-deep #4E31D8
             (hover, link text, 7.6:1 on white) · live green #0F7A52 (5.4:1 on white) with a #12B76A dot
             Ticker tiles, background / border / text (text contrast on its tile) / arrival wash:
             NVDA mint #CFF2E0/#A6E2C4/#0B5A3A 6.9 /#C3EDD7 · AAPL peach #FFDCC8/#F7BE9E/#80350F 6.7 /#FFD1B8
             AMZN sky #CFE6FD/#A6CCF6/#144C80 6.9 /#C2DEFC · WETH, ETH lilac #E6DDFF/#C9B8FA/#4A2D9C 7.5 /#DDD1FF
             USDG lemon #FFEEA6/#EBD173/#5E4A00 7.3 /#FFE88C · BABA rose #FFD8E5/#F2ADC4/#8E1F4D 6.6 /#FFCADB
             cbBTC aqua #C9EFEF/#98DADA/#0D5656 6.9 /#BAEAEA · DELL lime #E0F2BC/#C0DE86/#3F5A0A 6.6 /#D6EDA6
             (grey time text on every wash: 4.7:1 or more)
   Type      Nunito (rounded sans, SIL OFL 1.1, variable 200-1000), self-hosted woff2, one family.
             Headline 850 at 40 px (phone) / 64 px (desktop), -0.025em. Section titles 850 at 30 / 42 px.
             Card names 850 at 19-24 px. Big money 850 at 22-34 px with the cents at 0.6em.
             Receipt money: amount and dollars both 800 in ink, kept on one line with their tile.
             Body 500 at 17 / 18 px. Tiles and labels 700-800 at 15 px. Nothing under 15 px.
             Nunito's default figures are tabular, so amounts line up without a feature switch.
   Radius    surfaces 24 px · hero stage 32 px · step numerals 14 px · ticker tiles 8-14 px · buttons pill.
   Edges     flat surfaces with 1 px tinted borders; one soft violet-tinted shadow on the hero card and its
             receipt only. No glass, no glow, no gradient wash.
   Spacing   8 px base. Hero to receipts: 72 px on the phone, 72 px on desktop, so the receipts heading and
             its first rows sit inside a 1440 x 900 first screen. Other sections 48 / 64 px apart.
   Motion    one: the newest receipt bounces in gently (620 ms, a small overshoot) washed in its tile's colour,
             held 1.2 s and faded over 1.5 s, with a 4 px violet bar on its left edge fading with it; the rows
             below glide down. prefers-reduced-motion removes it.
   The ditches: colour lives in real product parts (ticker tiles, coin avatars ringed by what they pay,
             violet buttons and numerals) laid on bright, flat UI surfaces, so the page is cheerful without a
             prop or a stunt, and it is built from cards and chips with a clear hierarchy, so it never reads as
             a grey column of type and hairlines.
   Shared    one nav and one footer on every page (the current page: violet-deep text and a 3 px violet bar;
             Launch is the violet call to action everywhere else), the page title (.page-title 40 / 52 / 56 px),
             section titles (30 / 42), card heads (22 / 24), the violet numeral squares (.step-n 44 px, .lc-n
             36 px), tiles (.tk), tile toggles (.ft-in on Coins, .mt on Launch: 44 px, 14 px radius, a 2 px violet
             ring and the small violet check when picked), the chip, the coin card, the receipt rows (.rc on Home,
             .rc.crc with its "Bought with" line on the coin page and in How it works), panels, buttons, the
             hours line and Verify. Every section has 48 px (phone) or 64 px (desktop) above and below it, and
             every page's last block ends 80 px above the footer.
   ========================================================================================== */

@font-face {
  font-family: "Nunito Desk";
  src: url("fonts/Nunito-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #F7F5FF;
  --surface: #FFFFFF;
  --ink: #1E1A3C;
  --ink-2: #5B5680;
  --line: #DCD3F9;
  --line-2: #E9E3FC;
  --line-hover: #C2B3F7;
  --stage: #E6DEFF;
  --stage-line: #D6CBFA;
  --foot: #ECE6FF;
  --violet: #6245F0;
  --violet-deep: #4E31D8;
  --violet-soft: #E9E3FF;
  --live: #0F7A52;
  --live-dot: #12B76A;
  --wrap: 1200px;
  --gut: 20px;
  --font: "Nunito Desk", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* the eight tile hues: each sets a background, a border, a text colour and its arrival wash */
.t-mint  { --bg: #CFF2E0; --bd: #A6E2C4; --fg: #0B5A3A; --wash: #C3EDD7; }
.t-peach { --bg: #FFDCC8; --bd: #F7BE9E; --fg: #80350F; --wash: #FFD1B8; }
.t-sky   { --bg: #CFE6FD; --bd: #A6CCF6; --fg: #144C80; --wash: #C2DEFC; }
.t-lilac { --bg: #E6DDFF; --bd: #C9B8FA; --fg: #4A2D9C; --wash: #DDD1FF; }
.t-lemon { --bg: #FFEEA6; --bd: #EBD173; --fg: #5E4A00; --wash: #FFE88C; }
.t-rose  { --bg: #FFD8E5; --bd: #F2ADC4; --fg: #8E1F4D; --wash: #FFCADB; }
.t-aqua  { --bg: #C9EFEF; --bd: #98DADA; --fg: #0D5656; --wash: #BAEAEA; }
.t-lime  { --bg: #E0F2BC; --bd: #C0DE86; --fg: #3F5A0A; --wash: #D6EDA6; }
.t-more  { --bg: #F1EEFB; --bd: #DCD6F0; --fg: #4A4566; }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: 800; }
a { color: var(--violet-deep); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 20;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 800;
}
.skip:focus { left: 12px; }

/* form controls take the page's font; text for screen readers only; groups that never break */
input, select, textarea, button { font: inherit; color: inherit; letter-spacing: inherit; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nw, .nobr { white-space: nowrap; }

/* ---------- tiles ---------- */

.tk {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
}

/* a small label pill in the neutral tile colours (with .t-more): "Sample wallet", "Optional" */
.chip {
  display: inline-block; padding: 0 10px; border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg); font-size: 15px; font-weight: 800; line-height: 26px; white-space: nowrap;
}

/* tile toggles: a stock tile you can pick (the Coins filters, the Launch Pays menu). The hero's stage tile at
   44 px; picked, a 2 px violet ring and the hero's small violet check (.pick, below) */
.ft-in, .mt {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--bd); border-radius: 14px; background: var(--bg); color: var(--fg);
  font-size: 16px; font-weight: 850; letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.ft:hover .ft-in, .mt:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--fg); }
.ft input:checked + .ft-in, .mt[aria-pressed="true"], .mt[aria-pressed="true"]:hover {
  border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet);
}
.ft-in .pick, .mt .pick { display: none; box-shadow: 0 0 0 2.5px var(--surface); }
.ft input:checked + .ft-in .pick, .mt[aria-pressed="true"] .pick { display: grid; }

/* ---------- coin avatar: the initial inside a ring of what the coin pays ---------- */

.av {
  --ring: #AE97F7;
  flex: none;
  display: inline-block;
  width: 40px; height: 40px;
  padding: 4px;
  border-radius: 50%;
  background: var(--ring);
}
.av-in {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px; font-weight: 900; line-height: 1;
}
.av-lg { width: 56px; height: 56px; padding: 5px; }
.av-lg .av-in { font-size: 22px; }

/* ---------- nav ---------- */

.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { position: relative; width: 30px; height: 22px; flex: none; }
.brand-mark span { position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; }
.brand-mark span:first-child { left: 0; background: var(--violet); }
.brand-mark span:last-child { left: 9px; background: #7FD9B0; box-shadow: 0 0 0 2.5px var(--ground); }
.brand-name { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }

.links { display: flex; align-items: center; gap: 4px; }
.links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 999px; color: var(--ink); font-weight: 800; text-decoration: none;
  transition: background-color 0.15s ease;
}
.links a:hover { background: var(--violet-soft); }
/* Launch is the call to action on every page: the primary button's violet at the nav's size */
.links a.link-launch { background: var(--violet); color: #fff; box-shadow: inset 0 -3px 0 rgba(30, 10, 120, 0.22); }
.links a.link-launch:hover { background: var(--violet-deep); }
/* the current page (on a coin page, the Coins section it sits under): violet-deep text and a short violet bar;
   on the Launch page the call to action steps back to the same plain mark */
.links a[aria-current] { position: relative; color: var(--violet-deep); }
.links a[aria-current]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 3px;
  background: var(--violet);
}
.links a.link-launch[aria-current] { background: none; box-shadow: none; }
.links a.link-launch[aria-current]:hover { background: var(--violet-soft); }
.live {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 4px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--live); font-size: 15px; font-weight: 800;
  transition: opacity 0.3s ease;
}
.live.gone { opacity: 0; }
.live[hidden] { display: none; }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--live-dot); box-shadow: 0 0 0 3px #D3F5E3; flex: none;
}
.live-dot[hidden] { display: none; }

/* ---------- the title of an inner page (Launch a coin, Coins, a coin's name): the hero's type, a size down ---------- */

.page-title { font-size: 40px; font-weight: 850; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }

/* ---------- hero ---------- */

.hero { display: grid; gap: 36px; padding-top: 20px; padding-bottom: 32px; }
.hero h1 {
  font-size: 40px; font-weight: 850; line-height: 1.08; letter-spacing: -0.025em;
  margin-bottom: 18px; text-wrap: balance;
}
.h1a, .h1b { display: block; }
.h1b { color: var(--violet); }
.sub { color: var(--ink-2); font-size: 18px; line-height: 1.5; max-width: 30em; margin-bottom: 28px; text-wrap: pretty; }

.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 22px; border-radius: 999px;
  font-size: 17px; font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--violet); color: #fff; box-shadow: inset 0 -3px 0 rgba(30, 10, 120, 0.22); }
.btn-primary:hover { background: var(--violet-deep); }
.btn-soft { background: var(--surface); color: var(--violet-deep); border: 1px solid var(--line); }
.btn-soft:hover { border-color: var(--line-hover); }
button.btn { margin: 0; border: 0; cursor: pointer; }
button.btn-soft { border: 1px solid var(--line); }

/* the stage: a sample coin card, its latest receipt and four tiles from the pay menu */
.stage {
  position: relative; margin: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 12px 66px;
  background: var(--stage); border: 1px solid var(--stage-line); border-radius: 32px;
}
.float {
  position: absolute; z-index: 1;
  padding: 7px 13px; border: 1px solid var(--bd); border-radius: 14px;
  background: var(--bg); color: var(--fg);
  font-size: 16px; font-weight: 850; letter-spacing: 0.02em; line-height: 1.3;
}
/* the two Lantern picked from the menu carry a small violet check */
.pick {
  position: absolute; top: -9px; right: -9px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--violet); color: #fff; box-shadow: 0 0 0 2.5px var(--stage);
}
.pick svg { display: block; }
.fl-1 { top: 18px; left: 18px; transform: rotate(-3deg); }
.fl-2 { bottom: 18px; left: 26px; transform: rotate(3deg); }
.fl-3 { bottom: 16px; right: 24px; transform: rotate(-3deg); }
.fl-4 { display: none; }

.share {
  position: relative; z-index: 3; align-self: flex-end;
  margin: 0 6px -14px 0;
  padding: 9px 16px; border-radius: 999px;
  background: var(--violet); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 10px 22px -14px rgba(78, 49, 216, 0.8);
}
.share b { font-weight: 900; }

.hcard {
  position: relative; z-index: 2; width: 100%; max-width: 380px;
  padding: 26px 20px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 28px 50px -34px rgba(62, 38, 170, 0.45);
}
.hc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hc-name { font-size: 24px; font-weight: 850; line-height: 1.15; letter-spacing: -0.01em; }
.hc-meta { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.hc-paid { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }

.terms { margin: 0; display: grid; gap: 10px; }
.terms > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.terms dt { color: var(--ink-2); font-size: 15px; font-weight: 700; white-space: nowrap; }
.terms dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.lbl { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.big { font-size: 32px; font-weight: 850; line-height: 1.15; letter-spacing: -0.02em; }
.cents { font-size: 0.6em; font-weight: 800; color: var(--ink-2); letter-spacing: 0; }

.toast {
  position: relative; z-index: 3; align-self: flex-start;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px;
  width: calc(100% - 10px); max-width: 360px; margin: -12px 0 0 0;
  padding: 12px 16px 13px;
  background: var(--surface); border: 1px solid #B2E4C9; border-radius: 20px;
  box-shadow: 0 18px 34px -26px rgba(15, 122, 82, 0.6);
}
.toast > div { display: contents; }
.toast-check {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #CFF2E0; color: #0B5A3A; border: 1px solid #A6E2C4;
}
.toast-check svg { width: 16px; height: 16px; }
.toast-head { color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.4; }
.toast-line { grid-column: 1 / -1; font-size: 16px; font-weight: 600; line-height: 1.5; }

/* receipt money: amount, tile and dollars on one line, all ink, same weight */
.money { white-space: nowrap; }
.money .amt, .money .usd { color: var(--ink); font-weight: 800; }

/* ---------- sections ---------- */

.sec { padding-top: 48px; padding-bottom: 48px; }
.receipts-sec { padding-top: 40px; }
.sec-head h2 {
  font-size: 30px; font-weight: 850; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.sec-head h2 .live-dot { width: 11px; height: 11px; box-shadow: 0 0 0 4px #D3F5E3; }
.lede { color: var(--ink-2); font-size: 17px; max-width: 34em; text-wrap: pretty; }
.lede b { color: var(--ink); }
.sec-head { margin-bottom: 22px; }

.sec-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.sec-row .sec-head { margin-bottom: 0; }

/* the market-hours line, shown only while New York is closed */
.hours {
  display: flex; align-items: center; gap: 10px; max-width: 36em;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.45;
}
.hours[hidden] { display: none; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }

/* ---------- live receipts ---------- */

.receipts { list-style: none; margin: 0; padding: 4px; }
.rc {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas: "av coin time" "av what what";
  column-gap: 12px; row-gap: 0; align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  line-height: 1.42;
}
.rc + .rc::before {
  content: ""; position: absolute; top: 0; left: 64px; right: 12px; height: 1px; background: var(--line-2);
}
.rc .av { grid-area: av; align-self: start; margin-top: 2px; }
.rc .tk { line-height: 21px; }
.rc-coin { grid-area: coin; color: var(--ink); font-weight: 850; text-decoration: none; }
.rc-coin:hover { color: var(--violet-deep); }
.rc-what { grid-area: what; }
.rc-to { color: var(--ink); }
.rc-time { grid-area: time; justify-self: end; color: var(--ink-2); font-size: 15px; font-weight: 700; }

/* a round's receipt with what it bought: the round, what it paid, the "Bought with" line, a check in the colour
   of what it paid (the coin page's receipts, and step 3 of How it works) */
.rc.crc {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "ic n time" "ic paid paid" "ic d d";
  padding: 12px;
}
.crc-ic {
  grid-area: ic; align-self: start; margin-top: 2px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--bd); color: var(--fg);
}
.crc-ic svg { display: block; }
.crc-n { grid-area: n; color: var(--ink); font-weight: 850; }
.crc-n .rc-coin { font-weight: 850; }
.crc-paid { grid-area: paid; }
.crc-d { grid-area: d; margin-top: 4px; color: var(--ink-2); font-size: 15px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }

/* the one motion: bounce in, washed in the colour of what it paid, with a violet bar; both fade */
.rc.arrive {
  animation: rc-in 620ms cubic-bezier(0.3, 0.8, 0.3, 1) both, rc-wash 2700ms linear both;
}
.rc.arrive::after {
  content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px;
  background: var(--violet);
  animation: rc-bar 2700ms linear both;
}
@keyframes rc-in {
  0%   { opacity: 0; transform: translateY(-18px) scale(0.96); }
  55%  { opacity: 1; transform: translateY(5px) scale(1.01); }
  80%  { transform: translateY(-2px) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes rc-wash {
  0%   { background-color: var(--wash); }
  44%  { background-color: var(--wash); animation-timing-function: ease-in-out; }
  100% { background-color: rgba(255, 255, 255, 0); }
}
@keyframes rc-bar {
  0%   { opacity: 1; }
  44%  { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}

/* ---------- coins ---------- */

.pill-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 18px;
  background: var(--violet); border-radius: 999px;
  color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(30, 10, 120, 0.22);
  transition: background-color 0.15s ease;
}
.pill-link:hover { background: var(--violet-deep); }

.coins { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* phone: a compact card. Head row: avatar, name and ticker, the paid total on the right.
   Second row: Paired with and Pays side by side. */
.coin {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head paid" "terms terms";
  gap: 12px 10px; align-items: center;
  padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  transition: border-color 0.15s ease;
}
.coin:hover { border-color: var(--line-hover); }
.coin-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-width: 0; }
.coin-id { min-width: 0; }
.coin-name { font-size: 19px; font-weight: 850; line-height: 1.2; letter-spacing: -0.01em; }
.coin-name a { color: var(--ink); text-decoration: none; }
.coin-name a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.coin-name a:focus-visible { outline: none; }
.coin-name a:focus-visible::after { outline: 3px solid var(--violet); outline-offset: 2px; }
.coin-meta { color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.35; }
.coin-holders { display: none; }
.coin-paid {
  grid-area: paid;
  display: flex; flex-direction: column-reverse; align-items: flex-end; text-align: right;
}
.coin-paid .big { font-size: 22px; }
.coin-paid .cents { font-size: max(15px, 0.6em); }
.coin .terms { grid-area: terms; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
/* "Paid to 1,840 holders" on the compact phone card; from 720 px the count is in the meta line */
.coin .c-n { display: inline; }
.coin .c-pl { display: none; }
/* "+3 more" on desktop; on narrower cards "+3", with "more" kept for screen readers */
.more-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- how it works ---------- */

.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; margin: 24px 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
  padding: 20px 20px 22px; background: var(--bg); border: 1px solid var(--bd); border-radius: 24px;
}
/* the violet numeral square: How it works and How it pays (44 px), the Launch form's cards (36 px) */
.step-n, .lc-n {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--violet); border-radius: 14px;
  color: #fff; font-size: 20px; font-weight: 900; line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(30, 10, 120, 0.22);
}
.lc-n { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
.step h3 { font-size: 22px; font-weight: 850; line-height: 1.2; }
.step > p { grid-column: 1 / -1; margin-top: 12px; color: var(--ink); }

/* How it works: under each step, the product part it is about, in a white card like the hero's: the pair and
   what it pays (step 1), the vault's split (step 2), one receipt with what the vault bought (step 3) */
.steps-parts .step { grid-template-rows: auto auto 1fr; }
/* side by side, the three parts fill the rest of their equal-height cards, their content centred */
.step-part {
  grid-column: 1 / -1; align-self: stretch; margin-top: 18px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--bd); border-radius: 18px;
}
.step-part.terms { gap: 8px; align-content: center; }
.step-part.rc { align-content: center; }
.vsplit { display: flex; flex-direction: column; justify-content: center; }
.vsplit-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin-bottom: 8px; }
.vsplit-h b { font-size: 15px; }
.vbar { display: flex; gap: 3px; height: 14px; }
.vbar span { border-radius: 999px; }
.vb-h { flex: 70; }
.vb-p, .vb-r { flex: 15; }
.vb-h, .vk-h { background: var(--violet); }
.vb-p, .vk-p { background: #AE97F7; }
.vb-r, .vk-r { background: #D6CBFA; }
.vkey { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.vkey li { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 15px; font-weight: 700; white-space: nowrap; }
.vkey b { color: var(--ink); }
.vkey i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
/* the receipt in a card this small: the check beside the round, the money across the card's full width */
.step-part.rc.crc {
  grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ic n time" "paid paid paid" "d d d";
  column-gap: 10px; row-gap: 2px; padding: 12px 16px 13px; border-radius: 18px; background: var(--surface); line-height: 1.45;
}
.step-part .crc-ic { width: 28px; height: 28px; margin-top: 0; align-self: center; }
.step-part .crc-ic svg { width: 16px; height: 16px; }
.step-part .crc-d { margin-top: 2px; }

/* ---------- verify ---------- */

.verify { list-style: none; margin: 0; padding: 4px 20px; }
.verify li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.verify li + li { border-top: 1px solid var(--line-2); }
.vi {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--bd); color: var(--fg);
}
.verify p { padding-top: 2px; }
.addr {
  display: inline-block; padding: 0 8px; border-radius: 8px; line-height: 26px;
  background: var(--violet-soft); color: var(--violet-deep); font-weight: 800; white-space: nowrap;
}

/* ---------- footer ---------- */

.foot { background: var(--foot); border-top: 1px solid var(--stage-line); margin-top: 32px; padding: 40px 0 48px; }
.foot-in { display: grid; gap: 18px; }
.foot .brand-mark span:last-child { box-shadow: 0 0 0 2.5px var(--foot); }
.foot-lines { display: grid; gap: 8px; }
.foot-lines p { color: var(--ink-2); font-size: 15px; max-width: 62em; text-wrap: pretty; }
.foot-lines .sample { color: var(--ink); font-weight: 800; }

/* ---------- narrow phones: the nav keeps the live pill, Coins and Launch inside the gutter ---------- */

@media (max-width: 379.98px) {
  .links { gap: 2px; }
  .links a { padding: 0 10px; }
  .links a[aria-current]::after { left: 10px; right: 10px; }
  .live { gap: 6px; margin-right: 2px; padding: 0 9px; }
}

/* ---------- phones: the name is Stackpad, so the nav keeps the brand, the live pill, Coins and Launch inside the gutter by
   setting the pill as its dot alone under 420 px (the word stays for screen readers) and the name a size down under 380 ---------- */

@media (max-width: 419.98px) {
  .live { gap: 0; margin-right: 2px; padding: 0 11px; font-size: 0; }
}
@media (max-width: 379.98px) {
  .brand { gap: 8px; }
  .brand-name { font-size: 22px; }
  .live { padding: 0 9px; margin-right: 0; }
}

/* ---------- tablet ---------- */

@media (min-width: 720px) {
  :root { --gut: 32px; }
  .hero h1 { font-size: 52px; }
  .sub { font-size: 20px; }
  .stage { min-height: 520px; padding: 72px 24px 76px; }
  .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
  .toast > div { display: block; }
  .toast-check { width: 32px; height: 32px; }
  .toast-check svg { width: 20px; height: 20px; }
  .hcard { max-width: 380px; }
  .share { align-self: center; margin: 0 0 -14px 0; transform: translateX(104px); }
  .toast { align-self: center; width: auto; max-width: 380px; margin: -12px 0 0 0; transform: translateX(-56px); }
  .fl-1 { top: 30px; left: 30px; }
  .fl-2 { bottom: auto; top: 44%; left: auto; right: 16px; transform: rotate(3deg); }
  .fl-3 { bottom: 28px; right: 40px; }
  .fl-4 { display: block; top: 30%; left: 14px; transform: rotate(-2deg); }

  /* the coin card grows back into a column: head, terms, then the paid total */
  .coins { grid-template-columns: 1fr 1fr; gap: 16px; }
  .coin { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .coin-name { font-size: 20px; }
  .coin-paid {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2);
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 2px 12px; text-align: left;
  }
  .coin-paid .big { font-size: 26px; }
  .coin .terms { gap: 10px; padding-top: 0; border-top: 0; }
  .coin-holders { display: inline; }
  .coin .c-n { display: none; }
  .coin .c-pl { display: inline; }
  .page-title { font-size: 52px; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* tablet and narrow desktop: three cards side by side are too narrow for their parts, so each step is one wide
   card, its part beside the words */
@media (min-width: 720px) and (max-width: 1279.98px) {
  .steps-parts { grid-template-columns: 1fr; }
  .steps-parts .step {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 320px); grid-template-rows: auto 1fr;
    grid-template-areas: "n h part" "p p part"; column-gap: 14px;
  }
  .steps-parts .step-n { grid-area: n; }
  .steps-parts .step h3 { grid-area: h; }
  .steps-parts .step > p { grid-area: p; align-self: start; }
  .steps-parts .step-part { grid-area: part; margin: 0 0 0 14px; align-self: center; }
}

/* ---------- desktop ---------- */

@media (min-width: 1080px) {
  body { font-size: 18px; }
  .top-in { min-height: 80px; }
  .links { gap: 8px; }
  .links a { padding: 0 16px; }
  .links a[aria-current]::after { left: 16px; right: 16px; }
  .page-title { font-size: 56px; line-height: 1.04; }

  .hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding-top: 16px; padding-bottom: 40px; }
  .hero h1 { font-size: 64px; line-height: 1.04; margin-bottom: 22px; }
  .sub { font-size: 21px; margin-bottom: 34px; }
  .btn { min-height: 60px; padding: 0 30px; font-size: 18px; }

  .stage { min-height: 520px; padding: 60px 24px 64px; }
  .hcard { padding: 26px 24px 26px; }
  .fl-1 { top: 26px; left: 34px; }
  .fl-3 { bottom: 24px; right: 44px; }
  .more-word { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }

  .sec { padding-top: 64px; padding-bottom: 64px; }
  .receipts-sec { padding-top: 32px; }
  .sec-head h2 { font-size: 42px; margin-bottom: 10px; }
  .lede { font-size: 18px; }
  .sec-head.inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
  .sec-head.inline h2 { margin-bottom: 0; }
  .sec-row { margin-bottom: 24px; }
  .receipts-sec .sec-row { margin-bottom: 18px; }
  .split { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }
  .split .sec-head { margin-bottom: 0; }

  /* receipts across the full width: name, what it paid, to how many, when.
     The "to N holders" column starts at one left edge straight after the paid column. */
  .receipts { padding: 6px; }
  .rc {
    grid-template-columns: 40px 180px 300px 1fr 64px;
    grid-template-areas: "av coin paid to time";
    column-gap: 20px; padding: 12px 20px;
    line-height: 1.5;
  }
  .rc + .rc::before { left: 80px; right: 20px; }
  .rc .av { align-self: center; margin-top: 0; }
  .rc .tk { line-height: 24px; }
  .rc-what { display: contents; }
  .rc-paid { grid-area: paid; }
  .rc-to { grid-area: to; justify-self: start; color: var(--ink-2); font-weight: 700; }
  .rc-time { font-size: 16px; }
  .rc.arrive::after { left: 5px; top: 12px; bottom: 12px; }

  .coins { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .coin { padding: 24px; gap: 18px; }
  .coin-name { font-size: 22px; }

  .band { padding: 80px 0; margin: 0; }
  .band .sec-head { margin-bottom: 32px; }
  .steps { gap: 20px; }
  .step { padding: 26px 28px 30px; }
  .step h3 { font-size: 24px; }
  .step > p { margin-top: 16px; }
  .step-part { margin-top: 20px; }

  .verify { padding: 8px 28px; }
  .verify li { padding: 20px 0; }

  .foot { padding: 56px 0 64px; margin-top: 16px; }
  .foot-in { grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
}

/* ---------- live mode (api.js, live.js): the states the API can be in. Nothing here shows in mock mode: these are
   new elements, or the hidden state of parts that are always shown there ---------- */

/* the bar at the top: "sample" on a served page in mock mode (?mock=1), the keeper's lag in live mode */
.site-bar { background: var(--violet-soft); border-bottom: 1px solid var(--line); }
.site-bar[hidden] { display: none; }
.site-bar-in { padding-top: 10px; padding-bottom: 10px; color: var(--violet-deep); font-size: 15px; font-weight: 800; line-height: 1.45; }
.site-bar-stale { background: #FFF6D6; border-bottom-color: #EBD173; }
.site-bar-stale .site-bar-in { color: #5E4A00; }

/* the whole page as one state (loading, a refusal, a coin on its way): main shows only the panel */
main[data-state] > :not(.lstate) { display: none; }
.lstate { padding-top: 24px; padding-bottom: 48px; }
.lstate-in { display: grid; justify-items: center; gap: 12px; padding: 40px 20px 36px; text-align: center; }
.lstate .empty-i {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%;
  background: var(--violet-soft); border: 1px solid var(--line); color: var(--violet-deep);
}
.lstate-h { font-size: 26px; font-weight: 850; line-height: 1.3; letter-spacing: -0.015em; max-width: 22em; text-wrap: balance; }
.lstate p { color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.lstate .ctas { justify-content: center; margin-top: 8px; }

/* a line in place of receipts or coins: loading, none yet, not loaded */
.rc-note { padding: 18px 20px; color: var(--ink-2); font-weight: 700; line-height: 1.5; }
.coins-note { grid-column: 1 / -1; display: grid; justify-items: start; gap: 14px; padding: 22px 24px; color: var(--ink-2); font-weight: 700; }

/* a live coin's logo in its avatar; addresses and transactions linked to the explorer */
.av-in img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.addr a, a.tx-link { color: inherit; text-decoration: none; }
.addr a:hover, a.tx-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* parts the live pages hide when there is nothing to show */
.addr[hidden], .toast[hidden], .share[hidden], .float[hidden], .terms[hidden], .hc-paid[hidden], .step-part[hidden],
.btn[hidden] { display: none; }

@media (min-width: 1080px) {
  .lstate { padding-top: 32px; padding-bottom: 64px; }
  .lstate-in { padding: 56px 32px 52px; }
  .lstate-h { font-size: 32px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rc.arrive, .rc.arrive::after { animation: none; }
  .rc.arrive::after { display: none; }
  *, *::before, *::after { transition: none !important; }
}