/* ============================================================
   Batwa — about.html, the whole stylesheet (marketing page).
   Never loaded by the app, never precached by sw.js.

   One file instead of four: the page used to block its first paint on the
   app's tokens, base and 97 KB components.css, of which it used about 1 KB.
   This file carries the light-theme tokens the page actually reads, the few
   components it borrows (.card, .btn), and the landing-page layout. The page
   is light-only, so there are no dark rules here at all.

   If you change a token or a .btn/.card rule in the app's CSS and want the
   about page to follow, copy it here too — on purpose, not by accident.
   ============================================================ */

:root {
  color-scheme: light;
  --c-bg:            #F5F4FC;
  --c-bg-deep:       #EEEBFA;
  --c-surface:       #FFFFFF;
  --c-border:        rgba(23, 19, 58, 0.07);
  --c-border-strong: rgba(23, 19, 58, 0.14);
  --c-ink:        #17133A;
  --c-ink-soft:   #4A4668;
  --c-muted:      #837FA3;
  --c-violet:      #6248F5;
  --c-violet-soft: #EEEAFE;
  --c-aqua-soft:   #E3F5FC;
  --grad-action: linear-gradient(135deg, #5B3DF0 0%, #8257F6 100%);
  --shadow-xs:    0 1px 2px rgba(23, 19, 58, 0.05);
  --shadow-card:  0 1px 2px rgba(23, 19, 58, 0.04), 0 10px 28px -10px rgba(23, 19, 58, 0.12);
  --shadow-lift:  0 2px 6px rgba(23, 19, 58, 0.06), 0 18px 44px -12px rgba(23, 19, 58, 0.18);
  --clay-hi:  rgba(255, 255, 255, 0.85);
  --clay-lo:  rgba(98, 72, 245, 0.10);
  --clay-drop: 0 12px 28px -12px rgba(98, 72, 245, 0.22);
  --clay-surface:
    inset 0 1.5px 0 var(--clay-hi),
    inset 0 -2px 0 var(--clay-lo),
    0 1px 2px rgba(23, 19, 58, 0.04),
    var(--clay-drop);
  --clay-soft:
    inset 2px 2px 6px rgba(255, 255, 255, 0.95),
    inset -2px -3px 6px rgba(98, 72, 245, 0.10),
    0 6px 14px -6px rgba(98, 72, 245, 0.25);
  --clay-soft-press:
    inset 2px 3px 8px rgba(98, 72, 245, 0.16),
    inset -1px -1px 3px rgba(255, 255, 255, 0.6),
    0 1px 3px -1px rgba(98, 72, 245, 0.15);
  --clay-ink-hi: rgba(255, 255, 255, 0.34);
  --clay-ink-lo: rgba(12, 4, 60, 0.26);
  --clay-btn:
    inset 3px 3px 8px var(--clay-ink-hi),
    inset -3px -4px 8px var(--clay-ink-lo);
  --clay-btn-press:
    inset 3px 4px 10px var(--clay-ink-lo),
    inset -1px -1px 3px rgba(255, 255, 255, 0.14);
  --glow-violet: 0 12px 26px -8px rgba(91, 61, 240, 0.55);
  --glow-press:  0 3px 8px -4px rgba(23, 19, 58, 0.30);
  --r-sm:   10px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --font: "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.375rem;
  --t-fast: 160ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Root-relative on purpose, same as css/base.css: public file, unhashed. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-var.woff2") format("woff2");
}
/* ---- Borrowed from components.css: the only app components this page uses ---- */
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-surface);
  border: 1px solid var(--c-border);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 18px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast);
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(0.97); }
.btn-primary { background: var(--grad-action); color: #fff; box-shadow: var(--clay-btn), var(--glow-violet); }
.btn-ghost   { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border-strong); box-shadow: var(--clay-soft); }
.btn-primary:active { box-shadow: var(--clay-btn-press), var(--glow-press); }
.btn-ghost:active { box-shadow: var(--clay-soft-press); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-block { width: 100%; }
.btn[hidden] { display: none; }
svg.ico { display: inline-block; vertical-align: -0.16em; flex: 0 0 auto; }
.btn svg.ico { vertical-align: middle; }

/* ---- Base (the parts of base.css this page needs) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-base); font-weight: 600; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; touch-action: manipulation;
}
a { color: var(--c-violet); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
:focus-visible {
  outline: 3px solid rgba(98, 72, 245, 0.55);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }
.grow { flex: 1 1 auto; min-width: 0; }
.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;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-var.woff2") format("woff2");
}

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ab-pad: var(--s-9);
  /* --c-muted (#837FA3) is 3.5:1 on this page's lavender: too faint for the
     small text it is used for here. The app keeps its own token untouched. */
  --ab-muted: #686489;
  --ab-topbar: 60px;
}
@media (min-width: 900px) { :root { --ab-pad: 96px; --ab-topbar: 68px; } }

body { overflow-x: hidden; background: var(--c-surface); }

/* Detached hero shell: the soft lavender canvas floats inside a white page,
   the way most soft-UI landing pages frame their first screen. */
.ab-shell {
  width: min(1440px, 100% - 24px); margin: 12px auto;
  border-radius: var(--r-xl); background: var(--c-bg);
  box-shadow: var(--shadow-xs); overflow: hidden; position: relative;
}
@media (min-width: 900px) {
  .ab-shell { width: min(1440px, 100% - 32px); margin-block: 16px; border-radius: 36px; }
}
.ab-shell .ab-wrap { width: min(1200px, 100% - 32px); }
@media (min-width: 900px) { .ab-shell .ab-wrap { width: min(1200px, 100% - 96px); } }

.ab-wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

.ab-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink); font-weight: 600;
}
.ab-skip:focus { left: 12px; top: 12px; }

h1, h2, h3 { text-wrap: balance; }

/* =================== Top bar =================== */
.ab-top {
  position: relative; z-index: 2; background: transparent;
  border-bottom: 0;
}
.ab-top .ab-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: var(--ab-topbar);
}
.ab-brand { display: flex; align-items: center; gap: 10px; color: var(--c-ink); }
.ab-brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.ab-top nav { display: flex; align-items: center; gap: var(--s-2); }

/* =================== Sections =================== */
.ab-sec { padding: var(--ab-pad) 0; }
.ab-alt { background: var(--c-bg-deep); }
.ab-sec h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  max-width: 18ch;
}
.ab-lead {
  margin-top: var(--s-4); color: var(--c-ink-soft);
  font-size: var(--fs-md); line-height: 1.6; max-width: 58ch;
}
.ab-eyebrow {
  display: inline-flex; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-violet);
}
.ab-eyebrow b {
  background: var(--c-violet-soft); padding: 5px 11px;
  border-radius: var(--r-pill); font-weight: 700;
}
.ab-hand {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.125rem; color: var(--ab-muted); line-height: 1.3;
}
.ab-mono {
  display: inline-block; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: -0.01em;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--c-aqua-soft); color: var(--c-ink-soft);
}
.ab-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* =================== Hero =================== */
.ab-hero { padding-top: var(--s-6); padding-bottom: var(--s-8); position: relative; z-index: 1; }
@media (min-width: 900px) { .ab-hero { padding-top: var(--s-7); padding-bottom: var(--s-9); } }
.ab-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  margin-top: var(--s-4);
}
.ab-hero h1 em { display: none; font-style: normal; color: var(--c-violet); }
@media (min-width: 900px) { .ab-hero h1 em { display: block; } }
.ab-hero .ab-hand { margin-top: var(--s-4); }
.ab-art { position: relative; margin-top: var(--s-8); width: 80%; margin-inline: auto; }
.ab-art img { width: 100%; height: auto; position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ab-art.is-float img { animation: ab-float 6s ease-in-out infinite; }
}
@keyframes ab-float { 50% { transform: translateY(-14px); } }

.ab-glow { position: absolute; inset: -12% -6%; z-index: 0; pointer-events: none; }
.ab-glow::before, .ab-glow::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(48px);
}
.ab-glow::before {
  inset: 12% 8% 18% 8%;
  background: radial-gradient(closest-side, var(--c-violet-soft), transparent);
  filter: blur(10px);
}
.ab-glow::after {
  width: 44%; padding-bottom: 44%; right: 2%; top: 6%;
  background: radial-gradient(circle, rgba(47, 182, 233, 0.30), transparent 70%);
}

@media (min-width: 900px) {
  .ab-hero .ab-wrap {
    display: grid; grid-template-columns: 52% 48%;
    align-items: center; gap: var(--s-8);
  }
  .ab-art { margin-top: 0; width: 100%; }
}

/* =================== Stats =================== */
.ab-stats {
  display: grid; gap: var(--s-4); margin-top: var(--s-7);
  grid-template-columns: 1fr;
}
.ab-stats .card { padding: var(--s-6); }
.ab-stats b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
}
.ab-stats p { margin-top: var(--s-3); color: var(--c-muted); font-size: var(--fs-sm); }
@media (min-width: 640px) { .ab-stats { grid-template-columns: repeat(3, 1fr); } }

/* =================== Card grids =================== */
.ab-grid { display: grid; gap: var(--s-4); margin-top: var(--s-7); grid-template-columns: 1fr; }
.ab-grid .card { padding: var(--s-5); }
.ab-grid h3 { font-size: var(--fs-md); margin-top: var(--s-3); }
.ab-grid p { margin-top: var(--s-2); color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }
@media (min-width: 640px) { .ab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ab-grid { grid-template-columns: repeat(3, 1fr); } }
.ab-grid.ab-three { grid-template-columns: 1fr; }
@media (min-width: 900px) { .ab-grid.ab-three { grid-template-columns: repeat(3, 1fr); } }

.ab-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-violet-soft); color: var(--c-violet);
}
.ab-logos { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.ab-logos img {
  width: 34px; height: 34px; border-radius: 10px; background: #fff;
  padding: 4px; box-shadow: var(--shadow-xs);
}

/* =================== Dark band (shared spaces) =================== */
.ab-band {
  background: #171331;
  --c-ink: #F3F1FF;
  --c-ink-soft: rgba(255, 255, 255, 0.78);
  --c-muted: rgba(255, 255, 255, 0.72);
  --c-surface: rgba(255, 255, 255, 0.06);
  --c-border: rgba(255, 255, 255, 0.12);
  --c-violet: #B9A8FF;
  --c-violet-soft: rgba(155, 133, 255, 0.18);
  --clay-surface: inset 0 1px 0 rgba(155, 133, 255, 0.18), 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  color: var(--c-ink);
}
.ab-band .ab-mono { background: rgba(86, 199, 242, 0.16); color: #BFE9FA; }
.ab-band ul { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.ab-band li { display: flex; gap: var(--s-3); align-items: flex-start; }
.ab-band li b { font-family: var(--font-display); font-weight: 700; color: var(--c-violet); }
.ab-band .ab-note {
  margin-top: var(--s-6); font-size: var(--fs-sm);
  color: var(--c-muted); max-width: 52ch;
}
@media (min-width: 900px) {
  .ab-band .ab-wrap {
    display: grid; grid-template-columns: 46% 54%;
    align-items: center; gap: var(--s-8);
  }
  .ab-band .ab-art { order: -1; margin-top: 0; width: 100%; }
}

/* =================== Screenshots =================== */
.ab-shots {
  display: flex; gap: var(--s-4); margin-top: var(--s-7);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3); scrollbar-width: none;
}
.ab-shots::-webkit-scrollbar { display: none; }
.ab-shots figure { flex: 0 0 62%; scroll-snap-align: center; margin: 0; }
.ab-shots img {
  width: 100%; height: auto; border-radius: 28px;
  border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-lift);
  background: var(--c-surface);
}
.ab-shots figcaption {
  margin-top: var(--s-3); font-size: var(--fs-xs);
  color: var(--c-muted); line-height: 1.45;
}
@media (min-width: 900px) {
  .ab-shots { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .ab-shots figure { flex: none; }
}

/* =================== Steps =================== */
.ab-steps { display: grid; gap: var(--s-5); margin-top: var(--s-7); counter-reset: step; }
.ab-steps li { display: flex; gap: var(--s-4); align-items: flex-start; }
.ab-steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-violet-soft); color: var(--c-violet);
}
.ab-steps h3 { font-size: var(--fs-md); }
.ab-steps p { margin-top: 4px; color: var(--c-muted); font-size: var(--fs-sm); }
@media (min-width: 900px) { .ab-steps { grid-template-columns: repeat(3, 1fr); } }

/* =================== FAQ =================== */
.ab-faq-sec .ab-wrap { text-align: center; }
.ab-faq-sec h2 { margin-inline: auto; }
.ab-faq {
  margin: var(--s-7) auto 0; display: grid; gap: var(--s-3);
  max-width: 760px; text-align: left;
}
.ab-faq details {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--clay-surface);
  padding: var(--s-4) var(--s-5);
  transition: border-color .28s var(--ease-out), box-shadow .28s var(--ease-out),
              background-color .28s var(--ease-out);
}
.ab-faq details.is-open {
  border-color: color-mix(in srgb, var(--c-violet) 28%, var(--c-border));
  box-shadow: var(--clay-surface), 0 14px 32px -16px rgba(98, 72, 245, 0.35);
}
.ab-faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-md);
  list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-4);
  color: var(--c-ink); transition: color .2s var(--ease-out);
}
.ab-faq summary:hover, .ab-faq details.is-open summary { color: var(--c-violet); }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary:focus-visible {
  outline: 2px solid var(--c-violet); outline-offset: 4px; border-radius: var(--r-sm);
}
/* the plus: two bars, the vertical one shrinks to a dash as it rotates */
.ab-faq summary i {
  flex: 0 0 auto; position: relative; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-violet-soft);
  transition: transform .32s var(--ease-out), background-color .28s var(--ease-out);
}
.ab-faq summary i::before, .ab-faq summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-violet);
  border-radius: 2px; translate: -50% -50%;
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
.ab-faq summary i::before { width: 12px; height: 2px; }
.ab-faq summary i::after { width: 2px; height: 12px; }
.ab-faq details.is-open summary i { transform: rotate(180deg); background: var(--c-violet); }
.ab-faq details.is-open summary i::before, .ab-faq details.is-open summary i::after { background: #fff; }
.ab-faq details.is-open summary i::after { transform: scaleY(0); opacity: 0; }
.ab-faq-body { overflow: hidden; }
.ab-faq p { padding-top: var(--s-3); color: var(--c-ink-soft); font-size: var(--fs-base); line-height: 1.6; }
.ab-faq p a { color: var(--c-violet); font-weight: 600; }

/* =================== Author =================== */
.ab-author { text-align: center; }
.ab-author .ab-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.ab-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--c-violet-soft); border: 3px solid var(--c-surface);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .ab-avatar { width: 112px; height: 112px; } }
.ab-author h2 { max-width: none; font-size: clamp(1.5rem, 5vw, 2rem); }
.ab-author p { color: var(--c-ink-soft); max-width: 46ch; }
.ab-ph { display: inline-block; line-height: 0; margin-top: var(--s-4); }
.ab-ph img { max-width: 100%; height: auto; }

/* =================== Footer =================== */
/* The footer mirrors the hero: the same detached shell, closing the page the
   way it opened. One row of brand, links and credit; one line of meta; and a
   wordmark cut off by the shell's bottom edge, so it reads as depth, not height. */
.ab-foot { padding: 12px 0; }
.ab-foot-shell {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(1440px, 100% - 24px); margin-inline: auto;
  border-radius: var(--r-xl); background: var(--c-bg);
  box-shadow: var(--shadow-xs);
  padding: var(--s-6) var(--s-5) var(--s-9);
}
@media (min-width: 900px) {
  .ab-foot { padding: 16px 0; }
  .ab-foot-shell {
    width: min(1440px, 100% - 32px); border-radius: 36px;
    padding: var(--s-6) var(--s-9) var(--s-9);
  }
}
.ab-foot-row {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  text-align: center;
}
.ab-foot-row .ab-brand img { border-radius: 8px; }
.ab-foot-row .ab-brand span { font-size: 1.125rem; }
.ab-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); }
.ab-foot nav a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft);
  padding: 6px 2px; position: relative;
}
.ab-foot nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--c-violet);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.ab-foot nav a:hover { color: var(--c-violet); }
.ab-foot nav a:hover::after { transform: scaleX(1); }
.ab-foot-by {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--ab-muted);
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.ab-foot-by a { color: var(--c-ink); font-weight: 600; }
.ab-foot-by a:hover { color: var(--c-violet); }
.ab-foot-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2FB6A0;
  box-shadow: 0 0 0 3px rgba(47, 182, 160, 0.22);
  animation: ab-pulse 2.4s ease-in-out infinite;
}
@keyframes ab-pulse { 50% { box-shadow: 0 0 0 6px rgba(47, 182, 160, 0.10); } }
.ab-foot-meta {
  position: relative; z-index: 1;
  margin-top: var(--s-5); display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px var(--s-4); font-size: var(--fs-xs); color: var(--ab-muted);
}
.ab-foot-meta .ab-hand { font-size: 1.05rem; color: var(--c-violet); }
.ab-foot-mark {
  position: absolute; left: 50%; bottom: -0.30em; translate: -50% 0; z-index: 0;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(5.5rem, 22vw, 15rem); line-height: 1; white-space: nowrap;
  pointer-events: none; user-select: none;
  background: linear-gradient(180deg, var(--c-violet) 0%, transparent 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.26;
}
@media (min-width: 900px) {
  .ab-foot-row { flex-direction: row; justify-content: space-between; text-align: left; }
  .ab-foot-meta { justify-content: flex-start; }
  .ab-foot-mark { left: auto; right: -0.04em; translate: 0 0; bottom: -0.36em; }
}
@media (prefers-reduced-motion: reduce) { .ab-foot-dot { animation: none; } }

/* =================== Sticky mobile CTA =================== */
.ab-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-border);
}
@media (min-width: 900px) { .ab-sticky { display: none; } }
body { padding-bottom: 96px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* =================== Reveal =================== */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* =================== Install counter =================== */
/* "1,280+ / Downloads so far": the count rounded down to a multiple of 5, and
   not shown at all below 5. The band is hidden in the HTML so a small count
   never flashes. A returning visitor who has seen a count of 5 or more gets it
   painted before the first frame (inline script), so nothing moves; a
   first-ever visit shows the band when the relay answers, which moves the
   content below it once. The band sits under the hero, so that shift is below
   the first screen on phones (measured CLS 0.045 on desktop, still "good"). */
.ab-count { padding: clamp(32px, 6vw, 64px) 0; text-align: center; }
.ab-count[hidden] { display: none; }
.ab-count h2 {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  max-width: none; margin-inline: auto;
}
.ab-count-num {
  display: block; min-height: 1.05em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 12vw, 6rem); line-height: 1.05; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--c-violet);
}
.ab-count-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 3.4vw, 1.5rem); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--c-ink);
}