/* price.studily.org — public pricing hub.
 * The page is deep space: the portal tokens inverted for a dark surface, with a
 * galaxy canvas behind everything. The glass capsule, the flat cards and the
 * single accent are the same shapes as the other portals, just lit differently.
 *
 * `--space` is deliberately separate from `--ink`. `--ink` is a TEXT colour, and
 * rules used it as a dark BACKGROUND (the header panel, the footer). Flipping
 * `--ink` to a light value for the dark theme would have turned them white. */

:root {
  --space: #06070f;
  --bg: #06070f;
  /* Surfaces are SOLID, not translucent washes. The sky belongs between the
     cards; showing stars through the card you are trying to read makes the copy
     compete with the background and makes the panels look like placeholders. */
  --card: #12162a;
  --card-sub: #0d1120;
  --border: rgba(255, 255, 255, 0.14);
  --ink: #f1f5ff;
  --ink-secondary: rgba(232, 238, 255, 0.78);
  --muted: rgba(224, 231, 255, 0.55);
  --subtle: #1c2138;

  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.16);
  --pink: #f472b6;
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.14);
  --amber: #fbbf24;

  /* Height of the fixed capsule bar. Content pads by this so nothing starts
     underneath the chrome. */
  --nav-h: 56px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  /* The footer is a full-width sheet, so its corners are cut much rounder than a
     card's — at card radius it reads as a clipped rectangle, not as a curve. */
  --radius-sheet: 48px;
  --radius-full: 9999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
  /* Anchor jumps land BELOW the fixed capsule instead of under it. */
  scroll-padding-top: calc(var(--nav-h) + 18px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  width: 100%;
}
.main {
  flex: 1;
  /* No top offset — the black panel below runs flush to y=0 and the fixed
     capsule floats OVER it. The panel carries its own clearance instead. */
  padding-top: 0;
  padding-bottom: 60px;
  /* Above the fixed page-wide galaxy canvas. */
  position: relative;
  z-index: 1;
}

/* ─── Chrome: the floating glass capsule ────────────────────────────────── */
/* NO backdrop-filter here. A filter on an ancestor becomes the containing block
   for position:fixed descendants, which would trap the mobile sheet (and its
   backdrop) inside this 56px-tall header box instead of the viewport — the dark
   wash then paints only across the top bar. The capsule has its own solid
   background, so the blur was only ever affecting the transparent gutter. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 6px 16px 4px;
  background: transparent;
}
.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 5px 6px 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  /* The anchor for .lang-menu. Safe here: this only becomes the containing block
     for ABSOLUTE descendants — the sheet is position:fixed and lives on .nav, so
     it still escapes to the viewport the way its backdrop needs. */
  position: relative;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}
.nav-brand-sub {
  color: var(--muted);
  font-weight: 700;
}

/* The brand mark pulses in the direction its arrows point. Transform + opacity
   only — both are compositor properties, so this never costs layout. The REST
   state is full opacity: it is a logo that has to stay legible between pulses. */
.brand-mark {
  width: 22px;
  height: 22px;
  overflow: visible;
  flex: none;
}
.brand-arrow {
  transform-origin: 50% 50%;
  animation: brandArrowPulse 4s cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite;
}
@keyframes brandArrowPulse {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    opacity: 0.3;
    transform: translate(-2px, 2px);
  }
  20% {
    opacity: 1;
    transform: translate(2px, -2px);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-arrow {
    animation: none;
    opacity: 0.9;
  }
}

.nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.nav-links a {
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.nav-links a:hover {
  background: var(--subtle);
  color: var(--ink);
}
.nav-links a.on {
  color: var(--ink);
  background: var(--subtle);
}

/* The header CTA. Two classes so the hero buttons can reuse the base `.btn`
   without inheriting the pill's padding. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn:hover {
  background: var(--subtle);
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  /* On a dark page the primary CTA has to be the light thing, not the dark one.
     `--ink` would have made this a near-white slab with white text on it. */
  background: #eef2ff;
  border-color: #eef2ff;
  color: #07080f;
}
.btn-primary:hover {
  background: #ffffff;
}
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: #0284c7;
}
.nav .btn {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 34px;
  padding: 0 10px;
  /* Pinned to the right corner. `.nav-links` carries the flex:1 that pushes
     chrome rightward, but it is display:none under 720px — without this the
     burger collapses back next to the brand. `.nav-lang` sits immediately
     before it and claims the slack for both, so this only has to be zero. */
  margin-left: 0;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-burger span:last-child {
  width: 70%;
}

/* Mobile sheet. The backdrop lives INSIDE the sheet container so a tap anywhere
   outside the body closes it. */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.nav-sheet[hidden] {
  display: none;
}
/* Full-screen dismiss layer that is INVISIBLE. app.js closes the sheet when the
   backdrop is clicked, so all this element has to do is exist and catch the tap.
   Give it a background and the whole screen goes dark the moment the menu opens —
   the sheet is z-index:40 (its own stacking context), so a wash would paint over
   the page and over the capsule too. Matches the download portal's sheet. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-sheet-body {
  position: absolute;
  /* Above the invisible backdrop, or the links would be unclickable. */
  z-index: 1;
  top: calc(var(--nav-h) + 4px);
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.nav-sheet-body a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
}
.nav-sheet-body a:hover,
.nav-sheet-body a.on {
  background: var(--subtle);
}
.nav-sheet-foot {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--accent) !important;
}

/* ─── Fallback notice ───────────────────────────────────────────────────── */
.api-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  background: rgba(251, 191, 36, 0.14);
  border-top: 1px solid rgba(251, 191, 36, 0.32);
  color: #fcd34d;
  font-size: 12.5px;
  font-weight: 600;
}
.api-banner[hidden] {
  display: none;
}
.api-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* ─── Black header panel ────────────────────────────────────────────────── */
/* Header panel. No background and no radius: the fixed page-wide sky is the only
   sky, and an opaque panel with rounded bottom corners drew a seam and two
   notches across it. This is now just the padded block of content it always was,
   sitting in the page. */
.price-hero {
  color: #fff;
  position: relative;
  padding: calc(var(--nav-h) + 34px) 18px 48px;
  /* Clips the coin's spark sheet to the panel, and keeps particles flying wide
     of the coin from adding scroll overflow. */
  overflow: hidden;
  /* `pan-y` reserves vertical drags for the page but hands horizontal ones to
     galaxy.js. Without it the browser claims every touch gesture and the planets
     are dead on phones. The coin sets its own `touch-action: none` and still wins
     over its own area. */
  touch-action: pan-y;
}

/* Painted by galaxy.js. Sits at the bottom of the panel's stacking order and
   takes no pointer events, so the coin's drag target is unaffected. */
.galaxy-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* The page-wide sky. Fixed, so it holds still while the page scrolls — the
   nebula reads as something far away rather than as wallpaper on the document. */
.galaxy-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ─── Corner planets ────────────────────────────────────────────────────── */
/* One sphere per pricing card, straddling a corner: about half of it is outside
   the card, so it ornaments the box instead of sitting on the copy. The canvas IS
   the drag target, so `pointer-events` is on and the card keeps every click it
   had — the only thing it covers is the corner padding it pokes into. */
.corner-planet {
  position: absolute;
  width: 84px;
  height: 84px;
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  border-radius: 50%;
}
.corner-planet:active {
  cursor: grabbing;
}
.cp-tr {
  top: -44px;
  right: -44px;
}
.cp-tl {
  top: -44px;
  left: -44px;
}
.cp-br {
  bottom: -44px;
  right: -44px;
}
.cp-bl {
  bottom: -44px;
  left: -44px;
}

@media (max-width: 620px) {
  /* The cards run to the panel edge here, so a planet hanging off the side would
     be half off screen. Pull them in and shrink them. */
  .corner-planet {
    width: 66px;
    height: 66px;
  }
  /* A 48px radius eats a seventh of a 354px sheet. */
  .footer {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
  .cp-tr {
    top: -26px;
    right: -14px;
  }
  .cp-tl {
    top: -26px;
    left: -14px;
  }
  .cp-br {
    bottom: -26px;
    right: -14px;
  }
  .cp-bl {
    bottom: -26px;
    left: -14px;
  }
}
.price-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  /* Above the galaxy canvas. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.price-hero h1 {
  font-size: clamp(34px, 7.5vw, 58px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* The coin is drawn on a canvas (see coin.js) — an actual cylinder rather than
   two flat planes, so it keeps its thickness at 90° and its lighting is
   re-derived every frame. These rules only size the slot and own the pointer
   behaviour: `touch-action: none` stops a horizontal drag from scrolling the
   page instead of spinning the coin. */
.coin {
  position: relative;
  width: 80px;
  height: 80px;
  flex: none;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.coin.grabbing {
  cursor: grabbing;
}
/* The spark sheet is deliberately far larger than the coin and centred on it,
   so particles have room to travel before the edge clips them. It is
   pointer-events: none because .coin is the real hit target — without that the
   sheet would swallow clicks across a 208px square of the panel. */
.coin canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  height: 260%;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
}

/* ─── Sections ──────────────────────────────────────────────────────────── */
.section {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.section-alt {
  background: var(--card-sub);
}
.section-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
}
.section-kicker {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.section h2 {
  margin: 8px 0 8px;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: -0.02em;
  font-weight: 800;
}
.section-sub {
  max-width: 620px;
  color: var(--ink-secondary);
}

/* Each card's spark sheet deliberately overhangs the card so sparks can fly out
   past the edge they came from. At a narrow width that overhang reaches beyond
   the viewport and drags the whole document ~27px wider, so the page scrolls
   sideways. Clipping at the section lets the sparks still fly off the card edge
   while stopping them from widening the document.
   `clip` on the x axis only — not `hidden`, which would make the section a
   scroll container and cut the cards' box shadows off vertically. */
#credits {
  overflow-x: clip;
}

/* Free-tier card: one wide card, the list is the whole point of it. */
.free-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 26px;
  margin-top: 24px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Positioning context for the corner planet. No `overflow: hidden` — the
     planet hangs off the corner on purpose. */
  position: relative;
}
.free-head h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.free-price {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.free-price small {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.free-head p {
  margin-top: 10px;
  color: var(--ink-secondary);
  font-size: 14px;
}
.checks {
  list-style: none;
  display: grid;
  gap: 9px;
}
.checks li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--ink-secondary);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
/* ─── Sparks around the free card ───────────────────────────────────────── */
/* The same glint the coin throws off its rim, emitted along this card's four
   edges instead. Painted by galaxy.js onto a canvas that deliberately overhangs
   the card, because sparks have to be able to fly OUTSIDE the edge they came
   from. It takes no pointer events, so the card and its planet keep every click. */
.card-sparks {
  position: absolute;
  inset: -44px;
  z-index: 3;
  pointer-events: none;
}

.checks li strong {
  color: var(--ink);
  font-weight: 700;
}

/* ─── Credit packages ───────────────────────────────────────────────────── */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pack.featured {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.14);
}
.pack-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 3px 11px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pack-badge.free {
  background: var(--green);
}
.pack-badge.value {
  background: #eef2ff;
  color: #07080f;
}
.pack h3 {
  font-size: 16px;
  font-weight: 800;
}
.pack-price {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pack-price .cur {
  font-size: 18px;
  vertical-align: 12px;
  margin-right: 1px;
}
.pack-price .per {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.pack-credits {
  margin-top: 2px;
  color: var(--ink-secondary);
  font-size: 14px;
  font-weight: 600;
}
.pack-unit {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.pack-desc {
  margin-top: 10px;
  color: var(--ink-secondary);
  font-size: 13.5px;
}
.pack .btn {
  margin-top: auto;
  width: 100%;
}
.pack-list {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 14px 0 18px;
  font-size: 13.5px;
  color: var(--ink-secondary);
}
.pack-list li {
  position: relative;
  padding-left: 20px;
}
.pack-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Skeleton placeholders while the packages are in flight — the cards keep their
   shape, so the section does not jump when the data lands. */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeletonSweep 1.3s ease-in-out infinite;
}
@keyframes skeletonSweep {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -20% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}
.pack.skeleton-card {
  height: 268px;
  border-style: dashed;
  box-shadow: none;
}

/* ─── Compare table ─────────────────────────────────────────────────────── */
.table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
table.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
table.compare th,
table.compare td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.compare thead th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card-sub);
}
table.compare thead th:not(:first-child),
table.compare td:not(:first-child) {
  text-align: center;
}
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td {
  border-bottom: 0;
}
table.compare tbody th {
  font-weight: 600;
  color: var(--ink-secondary);
}
table.compare td {
  color: var(--ink-secondary);
}
table.compare td.yes {
  color: var(--green);
  font-weight: 800;
}
table.compare td.no {
  color: rgba(255, 255, 255, 0.34);
  font-weight: 700;
}
.compare-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ─── Payment methods ───────────────────────────────────────────────────── */
.pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}
.pay-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.pay-chip .tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--green);
}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.faq {
  margin-top: 22px;
  border-top: 1px solid var(--border);
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 2px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--subtle);
  color: var(--ink-secondary);
  font-size: 16px;
  font-weight: 700;
}
.faq details[open] summary::after {
  content: "–";
}
.faq .faq-body {
  padding: 0 2px 18px;
  max-width: 680px;
  color: var(--ink-secondary);
  font-size: 14px;
}
.faq .faq-body a {
  color: var(--accent);
  font-weight: 600;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
/* Matches the header panel: same black, same galaxy behind it. The radii are the
   mirror of the hero's — that one rounds its bottom corners because it is flush
   with the top of the page, this one rounds its top because it is flush with the
   bottom. */
.footer {
  position: relative;
  /* Clips the content to the rounded top corners. */
  overflow: hidden;
  padding: 40px 0 34px;
  color: #fff;
  z-index: 1;
  /* A sheet rising out of the bottom of the page. The header panel is transparent
     because the sky runs straight through it; this one carries a surface, because
     a rounded corner with nothing behind it is invisible. */
  background: var(--card);
  border-top-left-radius: var(--radius-sheet);
  border-top-right-radius: var(--radius-sheet);
  /* One sky, no seams: vertical scrolling stays the page's while the horizontal
     axis belongs to galaxy.js. */
  touch-action: pan-y;
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  /* Above the galaxy canvas. */
  position: relative;
  z-index: 1;
}
.f-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer .nav-brand {
  color: #fff;
}
.f-tagline {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 600;
}
.f-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.f-col h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.f-col a {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}
.f-col a:hover {
  color: #fff;
}
.f-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
}
.f-aco {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 12.5px;
}
.f-aco svg {
  width: 15px;
  height: 15px;
  display: block;
  flex: none;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .free-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav .btn {
    display: none;
  }
  .price-hero {
    padding: calc(var(--nav-h) + 22px) 18px 36px;
  }
  .coin {
    width: 62px;
    height: 62px;
  }
  .section {
    padding: 36px 0;
  }
}

@media (min-width: 721px) {
  .nav-sheet {
    display: none !important;
  }
}

/* ─── Pay page (payment.html) ───────────────────────────────────────────── */
/* Same sky, same chrome as the pricing page — this is a step deeper into the
   same site, not a separate product. */
.pay-hero .price-hero-inner h1 { letter-spacing: -0.02em; }
.pay-placeholder {
  color: var(--muted); font-size: 13.5px; margin: 14px 0 0; line-height: 1.6;
}
.pay-placeholder a { color: var(--accent); }

/* Step one — the packs. Buttons, so they are keyboard-reachable and the chosen
   one is announced; the .on state is what a radio dot would have been. */
.pay-pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.pay-pick {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  text-align: left; padding: 16px 18px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink);
  font-family: inherit; transition: border-color 0.15s ease, transform 0.15s ease;
}
.pay-pick:hover { border-color: var(--accent); transform: translateY(-1px); }
.pay-pick.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, rgba(56,189,248,0.18)); }
.pay-pick-top { display: flex; align-items: center; gap: 8px; }
.pay-pick-name { font-size: 14.5px; font-weight: 700; }
.pay-pick-price { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.pay-pick-price .cur { font-size: 15px; font-weight: 700; vertical-align: super; margin-right: 1px; }
.pay-pick-meta { font-size: 12px; color: var(--muted); }

/* Step two — the ways to pay. */
.pay-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 18px; }
.pay-method {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 13px 15px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink); font-family: inherit;
  transition: border-color 0.15s ease;
}
.pay-method:hover { border-color: var(--accent); }
.pay-method.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, rgba(56,189,248,0.18)); }
.pay-method-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--border); transition: background 0.15s ease;
}
.pay-method.on .pay-method-dot { background: var(--accent); }
.pay-method-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-method-name { font-size: 14px; font-weight: 700; }
.pay-method-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* The "where to send it" table. Rows are wide enough for an IBAN without
   wrapping mid-number, which is what causes people to mistype them. */
.pay-detail {
  margin-top: 18px; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card);
}
.pay-detail h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.pay-detail-desc { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.pay-detail-table { display: flex; flex-direction: column; gap: 1px; }
.pay-detail-row {
  display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.4fr) auto;
  gap: 10px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.pay-detail-row:last-child { border-bottom: 0; }
.pay-detail-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.pay-detail-v { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.pay-copy {
  padding: 5px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: var(--card-sub); border: 1px solid var(--border);
  border-radius: var(--radius-full); color: var(--ink-secondary);
  font-family: inherit; flex: none;
}
.pay-copy:hover { border-color: var(--accent); }
.pay-copy.done { color: var(--green); border-color: var(--green); }
.pay-detail-inst { font-size: 13px; color: var(--ink-secondary); margin: 12px 0 0; line-height: 1.6; }

/* The running summary — the amount to type into a banking app, kept in view. */
.pay-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--card-sub); border: 1px solid var(--border);
}
.pay-summary-item { display: flex; flex-direction: column; gap: 3px; }
.pay-summary-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.pay-summary-v { font-size: 14px; font-weight: 700; }
.pay-summary-amount { font-size: 19px; letter-spacing: -0.3px; }

/* Step three — the form. */
.pay-form { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.pay-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pay-field { display: flex; flex-direction: column; gap: 6px; }
.pay-field > span { font-size: 12.5px; font-weight: 700; }
.pay-field > span b { color: var(--accent); }
.pay-field small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pay-field input,
.pay-field textarea {
  width: 100%; padding: 11px 13px; font-family: inherit; font-size: 14px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pay-field input:focus,
.pay-field textarea:focus { outline: 2px solid var(--accent-soft, rgba(56,189,248,0.25)); border-color: var(--accent); }
.pay-field input[type="file"] { padding: 9px 11px; font-size: 13px; }
.pay-field textarea { resize: vertical; min-height: 76px; }

.pay-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.pay-actions-note { font-size: 12px; color: var(--muted); max-width: 46ch; line-height: 1.5; }
.pay-actions .btn[disabled] { opacity: 0.55; pointer-events: none; }

/* The result panel replaces the form, so it has to carry the whole message. */
.pay-result { margin-top: 18px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); }
.pay-result h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.pay-result p { font-size: 13.5px; line-height: 1.65; margin: 0 0 8px; color: var(--ink-secondary); }
.pay-result code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px;
  background: var(--card-sub); border: 1px solid var(--border); border-radius: 6px;
  color: var(--ink);
}
.pay-result-fine { font-size: 12px !important; color: var(--muted) !important; margin-bottom: 0 !important; }
.pay-result-good { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.35); }
.pay-result-bad { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.35); }

/* The payment page's footer carries only the parent-company mark, so its bottom
   row is held to the right instead of spread across two columns. */
.f-bottom-end { justify-content: flex-end; }

.pay-actions + .pay-actions { margin-top: 0; }
.pay-cta-row { margin-top: 18px; }

@media (max-width: 620px) {
  .pay-detail-row { grid-template-columns: 1fr auto; }
  .pay-detail-k { grid-column: 1 / -1; }
  .pay-detail-v { font-size: 13px; }
}

/* ─── Language picker ───────────────────────────────────────────────────── */
/* Ported from the download site (apps/dl) so the control is identical across
   the sites rather than a third interpretation of the same idea. Relaxed, not
   a chip: no border and no background at rest, just the glyph, a caret and a
   soft hover. It claims the slack with margin-left:auto, which parks it — and
   the burger behind it — on the right edge at every width. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 7px;
  /* Logical, not margin-left: under dir="rtl" the bar mirrors and the control
     has to travel with it. */
  margin-inline-start: auto;
  flex: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
}
.nav-lang:hover {
  background: var(--subtle);
}
.nav-lang-icon {
  width: 19px;
  height: 19px;
  display: block;
}
/* Drawn, not an icon: two borders rotated 45deg. It flips while the panel is
   open, so the caret always points at what it controls. */
.nav-lang-caret {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.nav-lang[aria-expanded='true'] .nav-lang-caret {
  transform: rotate(-135deg);
  margin-top: 3px;
}
/* Mid-run the button is dimmed rather than removed: hiding it would reflow the
   capsule on every language switch. */
.nav-lang[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* The active language code. Reads as a small chip so it registers without
   competing with the nav links; hidden entirely on English. */
.nav-lang-code {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--subtle);
  color: var(--accent);
}
.nav-lang-code[hidden] {
  display: none;
}

/* Anchored to the CAPSULE, not the viewport, so on a wide screen it hangs under
   the bar instead of drifting to the right edge of a 900px-wide card. This is
   why .nav-inner is position:relative below. */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  /* Logical edge: mirrors to the left under dir="rtl" along with the button. */
  inset-inline-end: 4px;
  z-index: 50;
  width: min(268px, calc(100vw - 28px));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: langIn 0.16s ease-out;
}
@keyframes langIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu {
    animation: none;
  }
}
/* Re-asserted because the rule above sets display:flex. */
.lang-menu[hidden] {
  display: none;
}
/* 90 languages cannot be scanned by eye, so the field comes first and the list
   scrolls behind it. The field is flex:none so it stays put while the list
   moves under it. */
.lang-search-wrap {
  flex: none;
}
.lang-search {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--subtle);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}
.lang-search::placeholder {
  color: var(--ink-secondary);
  opacity: 0.7;
}
.lang-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.lang-empty {
  padding: 12px 10px;
  font-size: 13px;
  opacity: 0.65;
}
.lang-empty[hidden] {
  display: none;
}
.lang-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 11px;
  cursor: pointer;
  /* `start`, not `left`, so a RTL language mirrors correctly. */
  text-align: start;
}
/* Filtered-out rows use the hidden attribute, so display:flex needs overriding. */
.lang-item[hidden] {
  display: none;
}
.lang-item:hover {
  background: var(--subtle);
}
.lang-item.on {
  background: var(--subtle);
  font-weight: 700;
}
.lang-item[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.lang-native {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-en {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.55;
}
/* The tick is always in the DOM and only revealed on the active row, so the
   rows never change width as the selection moves. */
.lang-check {
  flex: none;
  display: none;
  color: var(--accent);
}
.lang-check svg {
  width: 16px;
  height: 16px;
  display: block;
}
.lang-item.on .lang-check {
  display: block;
}

/* CJK sets noticeably looser in these headings; without this the H1/H2 look
   over-tracked once the page is translated. */
.lang-cjk h1,
.lang-cjk .section-kicker {
  letter-spacing: 0;
}
/* Arabic, Hebrew, Urdu, Persian and Pashto flip the document, so the numbered
   and bulleted runs have to follow the text rather than sit on the left. */
.lang-rtl .free-card li,
.lang-rtl .pay-detail-row {
  text-align: start;
}
.lang-rtl .faq-a,
.lang-rtl .faq-q {
  text-align: start;
}

/* Visually hidden, still announced. Used for a section heading whose visual
   equivalent was removed but whose anchor and label are still needed. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}