/* bMusic — marketing site
   Dark-first, single theme, taken from the app's own palette (a deep green-teal
   with the icon's green as the accent). No web fonts, no framework: the whole
   site is one stylesheet so first paint costs one request. */

/* ---------- tokens ---------- */
:root {
  --bg: #07140f;
  --bg-tint: #0b1e18;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text: #eff7f2;
  --text-dim: #a8c4b7;
  --text-faint: #7e9c8e;

  --brand: #22c55e;
  --brand-bright: #5ee08e;
  --brand-deep: #0f9d58;
  --teal: #2dd4bf;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;

  --wrap: 1160px;
  --wrap-narrow: 800px;

  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --shadow-brand: 0 20px 60px -18px rgba(15, 157, 88, 0.55);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* No `scroll-behavior: smooth` here: it breaks the browser's scroll restoration
   on Back navigation (you land at the top instead of where you left). In-page
   anchor scrolling is done in site.js, which does not affect history. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--brand-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -0.022em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.7rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); letter-spacing: -0.028em; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
em { font-style: normal; color: var(--brand-bright); }

:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 6px; }

.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--brand-deep); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(60px, 7.5vw, 112px) 0; position: relative; }
.section--tint { background: var(--bg-tint); border-block: 1px solid var(--line); }
.section__head { max-width: 780px; margin-bottom: clamp(32px, 4.5vw, 60px); }
.section__head h2 { margin-bottom: .35em; }
.prose h2 { margin-bottom: .5em; }
.prose p { color: var(--text-dim); }
.lede { font-size: clamp(1.02rem, .96rem + .35vw, 1.18rem); color: var(--text-dim); }
.fine { font-size: .92rem; color: var(--text-faint); }
.center { text-align: center; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-bright); margin: 0 0 .8em;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(7, 20, 15, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(7, 20, 15, 0.94); }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.site-header__brand { color: var(--text); text-decoration: none; margin-right: auto; }
.site-header__brand:hover { text-decoration: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { border-radius: 22%; display: block; }
.logo__word { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { color: var(--text-dim); font-size: .96rem; font-weight: 500; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav__cta { color: #fff !important; }

.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 12px; cursor: pointer; position: relative;
}
.nav-toggle__bars {
  position: absolute; left: 12px; top: 20px; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px; transition: background .12s;
}
/* Positioned against the middle bar, so left/width are its own, not the button's. */
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  background: inherit; border-radius: inherit; transition: transform .22s;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { background: var(--text); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- language picker ---------- */
.langpick { position: relative; }
.langpick > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; font-size: .9rem; color: var(--text-dim);
  border: 1px solid var(--line); white-space: nowrap;
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary:hover { color: var(--text); border-color: var(--brand); }
.langpick[open] > summary { color: var(--text); border-color: var(--brand); }
.langpick__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 172px; max-height: 60vh; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; border-radius: 14px; border: 1px solid var(--line-strong);
  background: rgba(11, 30, 24, .98); box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.langpick__menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .93rem; color: var(--text-dim); }
.langpick__menu a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.langpick__menu a[aria-current] { color: var(--brand-bright); font-weight: 600; }

/* ---------- language suggestion strip ----------
   Above the header, scrolls away with the page (the header is what sticks).
   Every row ships hidden; the inline script next to the markup un-hides at most
   one, so `[hidden]` has to keep winning over the `display: flex` below — a bare
   `.langsuggest__row { display: flex }` would override the UA's hidden rule and
   show every language at once, to everyone. */
.langsuggest { background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.langsuggest[hidden], .langsuggest__row[hidden] { display: none; }
.langsuggest__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; }
.langsuggest__text { margin: 0; flex: 1 1 240px; font-size: .95rem; color: var(--text-dim); }
.langsuggest__close {
  /* `auto` rather than a gap: when the row wraps on a narrow screen the close
     button belongs at the far edge, not tucked against the link. */
  flex: none; width: 34px; height: 34px; margin-inline-start: auto; margin-inline-end: -8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-dim);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.langsuggest__close:hover { color: var(--text); background: var(--surface-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: .98rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; box-shadow: var(--shadow-brand); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- store badge ----------
   Official Apple artwork, so the rules come from the guidelines rather than from
   taste: `--badge-h` is never below Apple's 40 px onscreen minimum, the clear
   space of one quarter of that height is supplied as padding (the SVG is bare
   artwork), and there is no hover transform, filter or opacity — modifying or
   animating the badge is explicitly disallowed. */
.store-buttons {
  --badge-h: 44px;
  display: flex; flex-wrap: wrap; align-items: center;
  margin: calc(26px - var(--badge-h) / 4) calc(var(--badge-h) / -4) 0;
}
.store-buttons--compact { --badge-h: 40px; }
.store-badge { display: inline-flex; }
.store-badge img { display: block; width: auto; }
.store-badge--apple { padding: calc(var(--badge-h) / 4); }
.store-badge--apple img { height: var(--badge-h); }

/* ---------- "coming to the App Store" ----------
   What stands where the badge will go until there is a listing to link to (see
   SITE.appStoreUrl). Deliberately not badge-shaped: it is a statement, not a
   button, and nothing here should look like something to tap. */
.coming {
  margin-top: 26px; padding: 16px 20px; max-width: 34em;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: rgba(34, 197, 94, .07);
}
.coming--compact { margin-top: 18px; padding: 13px 16px; }
.coming__title { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-weight: 650; }
.coming__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(45, 212, 191, .16); flex: none; }
.coming__body { margin: 0; font-size: .94rem; color: var(--text-dim); }
.cta .coming { margin-inline: auto; text-align: start; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(48px, 6.5vw, 100px) 0 clamp(56px, 7.5vw, 106px); overflow: hidden; }
.hero__aurora {
  position: absolute; inset: -30% -10% auto; height: 780px; pointer-events: none;
  background:
    radial-gradient(46% 42% at 74% 22%, rgba(34, 197, 94, .42) 0%, transparent 70%),
    radial-gradient(38% 36% at 18% 8%, rgba(45, 212, 191, .3) 0%, transparent 70%),
    radial-gradient(30% 30% at 52% 46%, rgba(15, 157, 88, .18) 0%, transparent 70%);
}
.hero__inner {
  position: relative; display: grid; gap: clamp(38px, 5vw, 68px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
}
.hero__text h1 { margin-bottom: .38em; }
.hero__text .lede { max-width: 34em; }

.badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 7px 15px 7px 12px; border-radius: 999px; font-size: .84rem; font-weight: 500;
  color: var(--text-dim); background: var(--surface); border: 1px solid var(--line-strong);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(45, 212, 191, .16); }

.hero__points {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding: 0; margin: 26px 0 0; font-size: .92rem; color: var(--text-faint);
}
.hero__points li { display: flex; align-items: center; gap: 8px; }
.hero__points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: none; }

.hero__media { position: relative; display: flex; justify-content: center; }
.hero__stage { position: relative; width: min(310px, 68vw); }
.hero__glow {
  position: absolute; inset: 6% 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, .42) 0%, transparent 68%);
}

/* floating chips around the hero phone */
.chip {
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 14px; font-size: .84rem; font-weight: 500;
  background: rgba(9, 26, 20, .88); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow); color: var(--text); white-space: nowrap;
}
.chip--a { top: 9%; left: -58px; animation: float 7s ease-in-out infinite; }
.chip--b { bottom: 13%; right: -52px; animation: float 8.5s ease-in-out infinite reverse; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.wave i { width: 3px; border-radius: 2px; background: var(--brand-bright); animation: bar 1.1s ease-in-out infinite; }
.wave i:nth-child(1) { height: 6px;  animation-delay: 0s; }
.wave i:nth-child(2) { height: 12px; animation-delay: .12s; }
.wave i:nth-child(3) { height: 16px; animation-delay: .24s; }
.wave i:nth-child(4) { height: 10px; animation-delay: .36s; }
.wave i:nth-child(5) { height: 7px;  animation-delay: .48s; }
@keyframes bar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* ---------- phone frame ---------- */
.phone { position: relative; width: min(280px, 62vw); }
.phone__frame {
  position: relative; padding: 9px; border-radius: 42px;
  background: linear-gradient(160deg, #2b4a3d 0%, #0e1f19 46%, #1d3a2e 100%);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .09) inset;
}
.phone__shot { width: 100%; border-radius: 34px; display: block; }
.phone--hero { width: min(310px, 68vw); }

/* ---------- stats ---------- */
.stats { padding: 26px 0 6px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 22px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.stat strong {
  display: block; font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.2rem); font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fff 0%, var(--brand-bright) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { font-size: .86rem; color: var(--text-faint); }

/* ---------- cards ---------- */
.cards { display: grid; gap: 18px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  padding: 28px; border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--line); transition: border-color .22s, transform .22s, background .22s;
}
.card p { color: var(--text-dim); margin-bottom: 0; }
.card--link { display: block; color: inherit; }
.card--link:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-3px); background: var(--surface-2); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px; color: #fff;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: var(--shadow-brand);
}
.card__more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: .92rem; color: var(--brand-bright); }
.card__more::after { content: " →"; }

/* ---------- feature rows ---------- */
.feature-rows { display: grid; gap: clamp(52px, 6.5vw, 92px); }
.feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.feature-row--flip .feature-row__text { order: 2; }
.feature-row--flip .feature-row__media { order: 1; }
.feature-row__text p { color: var(--text-dim); }
.feature-row__media { display: flex; justify-content: center; }

.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 30px; color: var(--text-dim); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(34, 197, 94, .18);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .5);
}
.ticks li::after {
  content: ""; position: absolute; left: 5.5px; top: .74em; width: 7px; height: 3.5px;
  border-left: 2px solid var(--brand-bright); border-bottom: 2px solid var(--brand-bright);
  transform: rotate(-45deg);
}
.ticks--lg li { padding-left: 34px; margin-bottom: 2px; }
.ticks + .fine { margin-top: 22px; }

/* ---------- definition lists ---------- */
.deflist { margin: 22px 0 0; display: grid; gap: 18px; }
.deflist dt { font-weight: 650; margin-bottom: 4px; }
.deflist dd { margin: 0; color: var(--text-dim); font-size: .98rem; }
.deflist--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.deflist--cards > div { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }

/* ---------- comparison ---------- */
/* The table scrolls sideways on a phone rather than reflowing: a comparison that
   stacks into twelve one-column lists has stopped being a comparison. The scroller
   is focusable and labelled so it can be reached and read without a mouse. */
/* `position: relative` here is load-bearing, not decoration. Every mark cell
   carries an `.sr-only` label, and `.sr-only` is `position: absolute` — with an
   unpositioned scroller its containing block is the `.section` above instead, so
   it was laid out at the 620 px table's coordinates while being clipped by
   nothing, and the page itself gained ~140 px of sideways scroll on a phone
   (thatbin/bMusic#351). Positioning the scroller makes it their containing block
   again, so the labels are clipped and scrolled with the table they belong to. */
.compare__scroll { position: relative; overflow-x: auto; margin-top: 30px; border-radius: var(--radius); border: 1px solid var(--line); }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .96rem; }
.compare caption { padding: 18px 20px 0; text-align: start; color: var(--text-faint); font-size: .92rem; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: start; }
.compare thead th { font-size: .86rem; font-weight: 650; color: var(--text-dim); white-space: nowrap; vertical-align: bottom; }
.compare tbody th { font-weight: 500; color: var(--text); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare__cell { text-align: center; width: 1%; white-space: nowrap; font-size: 1.15rem; line-height: 1; }
.compare__cell--yes { color: var(--brand-bright); }
.compare__cell--partial { color: var(--text-dim); }
.compare__cell--no { color: var(--text-faint); }
.compare__us { background: rgba(34, 197, 94, .09); }
.compare thead .compare__us { color: var(--brand-bright); font-weight: 700; }
.compare__scroll + .fine { margin-top: 16px; }

/* ---------- privacy ---------- */
.privacy__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.privacy__media { display: flex; justify-content: center; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A guide's steps are read in order and each one is a paragraph, so they stack
   rather than sitting side by side. */
.steps--stack { grid-template-columns: 1fr; }
.step { padding: 26px 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.step h3 { margin-bottom: .35em; }
.step p { color: var(--text-dim); margin-bottom: 0; }
.step__n { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--brand-bright); margin-bottom: 10px; }
.steps + .fine { margin-top: 22px; }

/* ---------- pills ---------- */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 26px 0 0; }
.pills li { padding: 7px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); }

/* ---------- page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(44px, 5.5vw, 84px) 0 clamp(34px, 4.5vw, 60px); }
.page-hero--tall { padding-block: clamp(80px, 12vw, 160px); text-align: center; }
.page-hero__inner { position: relative; max-width: 820px; }
.page-hero--tall .page-hero__inner { margin-inline: auto; }
.page-hero__inner--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(30px, 5vw, 64px); align-items: center; max-width: var(--wrap);
}
.page-hero__media { display: flex; justify-content: center; }
.crumbs { font-size: .86rem; color: var(--text-faint); margin-bottom: 18px; }
.crumbs a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.crumbs span[aria-hidden] { padding-inline: 4px; opacity: .5; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s, background .2s; }
.faq__item[open] { border-color: var(--line-strong); background: var(--surface-2); }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; position: relative; font-weight: 600; font-size: 1.02rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  margin-top: -6px; border-right: 2px solid var(--brand-bright); border-bottom: 2px solid var(--brand-bright);
  transform: rotate(45deg); transition: transform .22s;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__answer { padding: 0 22px 20px; color: var(--text-dim); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------- cta ---------- */
.cta { text-align: center; }
.cta__inner {
  position: relative; padding: clamp(44px, 6vw, 76px) 26px; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(34, 197, 94, .14) 0%, rgba(11, 30, 24, .6) 60%);
  overflow: hidden;
}
.cta__glow { position: absolute; inset: auto -20% -60%; height: 320px; background: radial-gradient(50% 60% at 50% 50%, rgba(15, 157, 88, .45) 0%, transparent 70%); }
.cta h2, .cta p, .cta .store-buttons, .cta .coming { position: relative; }
.cta .lede { max-width: 56ch; margin-inline: auto; }
.cta .store-buttons { justify-content: center; }
.cta__fine { margin: 20px 0 0; font-size: .88rem; color: var(--text-faint); position: relative; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-tint); padding: clamp(48px, 6vw, 76px) 0 34px; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 64px); }
.site-footer__brand p { color: var(--text-faint); font-size: .94rem; margin: 16px 0 0; max-width: 34ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.site-footer__col h3 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer__col a { color: var(--text-dim); font-size: .94rem; }
.site-footer__col a:hover { color: var(--text); }
.site-footer__legal { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer__legal p { color: var(--text-faint); font-size: .82rem; margin: 0 0 6px; }

/* ---------- reveal ----------
   Hidden only when the `js` class is set (added by an inline head script), so a
   failed or blocked script can never leave the page blank. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero__inner, .privacy__inner, .feature-row, .page-hero__inner--split { grid-template-columns: 1fr; }
  .feature-row--flip .feature-row__text, .feature-row--flip .feature-row__media { order: initial; }
  .hero__media, .privacy__media, .page-hero__media { order: 2; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--stack { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  /* The drawer is fixed to the top with no bottom edge, so whatever does not fit
     under the fold is simply unreachable: the page behind it is what scrolls, and
     the drawer does not move with it. With the language picker open that is most
     of the language list (thatbin/bMusic#485). Bound it to the space it actually
     has and let the panel itself be the scroller. */
  .site-nav {
    position: fixed; inset: 66px 0 auto; display: none; flex-direction: column;
    align-items: stretch; gap: 0; padding: 12px 22px 24px;
    background: rgba(7, 20, 15, .98); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 66px);
    max-height: calc(100dvh - 66px); /* the address bar's height is not the page's */
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .site-nav__cta { margin-top: 16px; border-bottom: 0 !important; justify-content: center; }
  /* In the drawer the picker opens in the flow instead of floating over it. A
     menu positioned against a pill that sits near the bottom of a panel hangs off
     the screen however tall the panel is allowed to be, and its own `60vh`
     scroller would be a second scroller inside the drawer's. Opened in the flow
     it is just more of the one list the drawer already scrolls. */
  .langpick__menu {
    position: static; max-height: none; min-width: 0; margin-top: 8px;
    background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .cards--2, .cards--3, .steps, .deflist--cards { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip--a { left: -10px; }
  .chip--b { right: -10px; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  /* Apple's onscreen minimum; the badge must not be stretched to fill a row. */
  .store-buttons { --badge-h: 40px; }
  .chip { font-size: .76rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- CJK typography ----------
   Japanese and Chinese have no spaces, so a headline breaks mid-word by default.
   auto-phrase breaks on phrase boundaries instead; browsers without it fall back
   to the previous behaviour. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .lede,
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3, html[lang="zh-Hans"] .lede,
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3, html[lang="zh-Hant"] .lede {
  word-break: auto-phrase;
  line-break: strict;
}

@media print {
  .site-header, .site-footer, .cta, .store-buttons, .coming { display: none; }
  body { background: #fff; color: #000; }
}