/* JAMB Pro — marketing site design system.
   Tokens mirror the app (lib/theme.js) so the site and product feel like one thing.
   No external fonts or JS: the whole page is one request + images. */

:root {
  --brand: #0E8C44;
  --brand-dark: #0A6E36;
  --brand-soft: #E4F3E9;
  --brand-tint: #F0F8F2;
  --ink: #15181D;
  --ink-soft: #2A2E35;
  --bg: #F4F5F3;
  --card: #FFFFFF;
  --fill: #EFF1ED;
  --border: #E7E9E4;
  --border-strong: #D7DAD3;
  --text: #15181D;
  /* Slightly darker than the app's own muted tokens. The phone renders small
     type at high DPI; on a web page these need to clear WCAG AA (4.5:1). */
  --text-muted: #5E656C;
  --text-faint: #6E757C;
  /* Green for TEXT on light surfaces. --brand (#0E8C44) is only 4.33:1 on
     white, so it stays for fills/icons and this darker green carries copy. */
  --brand-ink: #0A6E36;
  --mark-bg: #FDEFC4;
  --violet: #7A5AF8;
  --violet-soft: #EFEAFD;
  --warning: #F2A33C;
  --danger: #E5484D;
  --on-ink: #FFFFFF;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(21,24,29,.04), 0 8px 24px rgba(21,24,29,.06);
  --shadow-float: 0 8px 30px rgba(21,24,29,.12);
  --wrap: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #27A65B;
    --brand-dark: #1C7E45;
    --brand-soft: #15301F;
    --brand-tint: #13241A;
    --ink: #10141A;
    --ink-soft: #1C222B;
    --bg: #0F1216;
    --card: #181C22;
    --fill: #212730;
    --border: #272D35;
    --border-strong: #333B45;
    --text: #ECEFF1;
    --text-muted: #A7ADB4;
    --text-faint: #8A9199;
    /* inverted for dark surfaces: lighter, not darker */
    --brand-ink: #4FC483;
    --mark-bg: #54431A;
    --violet: #9A82FA;
    --violet-soft: #241E3A;
    --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --shadow-float: 0 8px 30px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }
/* class-based display rules outrank the UA [hidden] rule, so make it explicit */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* height:auto is essential — the HTML width/height attributes are presentational
   hints, so without this the intrinsic pixel height wins over the CSS width. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 80px; }

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

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; }
p { margin: 0 0 1em; }
mark { background: var(--mark-bg); color: var(--text); padding: 0 .18em; border-radius: 4px; font-weight: 700; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text); letter-spacing: -.02em; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
/* :not(.btn) matters — without it this rule outranks .btn-primary's own colour
   (0-1-1 vs 0-1-0) and paints the "Get the app" label muted grey on green. */
.nav-links a:not(.btn) { color: var(--text-muted); font-size: 15px; font-weight: 600; }
.nav-links a:not(.btn):hover { color: var(--text); text-decoration: none; }
/* Mobile keeps the "Get the app" CTA; only the text links go. Hiding the whole
   nav removed the only above-the-fold download button on phones. */
@media (max-width: 860px) {
  .nav-links a:not(.btn) { display: none; }
  .nav-links { gap: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 16px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* --brand-dark, not --brand: white on #0E8C44 is 4.33:1, just under AA for
   button-sized text. The app's own darker green clears it at 6.5:1. */
.btn-primary { background: var(--brand-dark); color: #fff; box-shadow: 0 6px 18px rgba(14,140,68,.24); }
.btn-primary:hover { background: var(--brand-dark); filter: brightness(.88); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-soft); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--fill); }
.btn-sm { padding: 10px 16px; font-size: 15px; }

/* store buttons — text-only, no fake badges */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 22px; border-radius: 14px; min-width: 208px;
  transition: transform .12s ease, background .16s ease;
}
.store-btn:hover { text-decoration: none; transform: translateY(-2px); background: var(--ink-soft); }
.store-btn .glyph { font-size: 26px; line-height: 1; }
/* text-align:left matters: .cta-band centres its contents, which would otherwise
   centre each label line independently and stagger them. */
.store-btn .st { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-btn .st small { font-size: 11px; opacity: .72; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.store-btn .st b { font-size: 16.5px; font-weight: 700; }

/* ---------- pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-soft); color: var(--brand-ink);
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
}
.pill-neutral { background: var(--fill); color: var(--text-muted); }
.pill-violet { background: var(--violet-soft); color: var(--violet); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--card); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--text);
}

/* ---------- sections ---------- */
section { padding: clamp(54px, 8vw, 96px) 0; }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: 18px; margin: 14px 0 0; }
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink); margin: 0 0 12px;
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 52px; align-items: center; }
.hero p.lede { font-size: 19.5px; color: var(--text-muted); margin: 20px 0 28px; max-width: 30em; }
.hero h1 .accent { color: var(--brand-ink); }
.hero-cta { display: flex; flex-direction: column; gap: 16px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; color: var(--text-muted); font-size: 14.5px; font-weight: 600; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.tick { color: var(--brand-ink); font-weight: 800; }
.hero-shot { position: relative; display: flex; justify-content: center; }
.hero-shot .phone { width: min(330px, 82%); box-shadow: var(--shadow-float); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-shot { order: -1; }
  .hero-shot .phone { width: min(272px, 70%); }
}

/* Store screenshots carry their own baked-in marketing caption above the device.
   .phone is a framing window showing only the device, so the page's own headings
   do the talking. Measured on the 1242x2688 sources: the caption ends at y~749,
   the device runs y~888 to y~2556, leaving 132px of green fade below it. Cropping
   at y=762 puts ~126px of white above the device to match that 132px, so the
   device sits optically centred. margin-top is a % of the frame's width. */
.phone {
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 1242 / 1926;
  background: var(--card);
}
.phone img { width: 100%; margin-top: -61.35%; }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 18px; text-align: center;
}
.stat b { display: block; font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.stat span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px;
}
.card h3 { margin-bottom: 9px; }
.card p { color: var(--text-muted); margin: 0; font-size: 15.5px; }
.card-link { display: block; color: inherit; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.card-link:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.tile {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 22px; margin-bottom: 15px;
}
.tile.violet { background: var(--violet-soft); color: var(--violet); }
.tile.warm { background: #FDF0DE; color: #B9791F; }

/* ---------- steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; position: relative; }
.step-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-bottom: 14px;
}
.step h3 { font-size: 18.5px; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 15.5px; margin: 0; }

/* ---------- screenshots ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.shot figure { margin: 0; }
.shot .phone { border: 1px solid var(--border); border-radius: 20px; }
.shot figcaption { margin-top: 13px; font-size: 14.5px; color: var(--text-muted); font-weight: 600; text-align: center; }
@media (max-width: 640px) {
  .shots { grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .shot { scroll-snap-align: center; }
}

/* ---------- subject list (mirrors in-app rows) ---------- */
.subjects { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.subj { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.subj:last-child { border-bottom: 0; }
.subj-name { font-weight: 700; font-size: 15.5px; }
.subj-count { margin-left: auto; color: var(--text-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; width: 96px; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
@media (max-width: 560px) { .bar { display: none; } }

/* ---------- comparison ---------- */
.compare { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 15.5px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 800; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--brand-ink); font-weight: 800; }
.compare .no { color: var(--text-faint); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
blockquote.quote {
  margin: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
blockquote.quote p { font-size: 16.5px; margin: 0 0 14px; }
/* column + margin-top:auto drops the attribution to the bottom of the card, so a
   short quote and a long one still line their citations up. */
blockquote.quote { display: flex; flex-direction: column; height: 100%; }
blockquote.quote cite { font-style: normal; font-size: 13.5px; color: var(--text-muted); font-weight: 700; margin-top: auto; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 20px;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 17px;
  padding: 17px 0; list-style: none; display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--text-muted); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 0 18px; color: var(--text-muted); }
.faq .answer p { margin: 0 0 12px; }
.faq .answer a { font-weight: 700; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink); color: var(--on-ink);
  border-radius: 26px; padding: clamp(36px, 6vw, 62px) clamp(24px, 5vw, 56px);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.74); font-size: 18px; max-width: 34em; margin: 16px auto 28px; }
.cta-band .stores { justify-content: center; }
.cta-band .store-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.cta-band .store-btn:hover { background: rgba(255,255,255,.18); }
.cta-band .fineprint { color: rgba(255,255,255,.5); font-size: 13.5px; margin: 22px 0 0; }

/* ---------- guide pages ---------- */
.crumbs { font-size: 14px; color: var(--text-muted); padding-top: 26px; }
.crumbs a { color: var(--text-muted); font-weight: 600; }
.guide-hero { padding: 26px 0 30px; }
.guide-hero h1 { font-size: clamp(30px, 4.6vw, 46px); }
.guide-hero .lede { font-size: 19px; color: var(--text-muted); margin-top: 16px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-faint); font-size: 13.5px; margin-top: 16px; font-weight: 600; }
.prose { font-size: 17.5px; }
.prose h2 { margin: 44px 0 14px; font-size: clamp(23px, 2.9vw, 30px); }
.prose h3 { margin: 30px 0 10px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 9px; }
.prose blockquote {
  margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--brand);
  background: var(--brand-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text);
}
.prose blockquote p:last-child { margin: 0; }
.callout {
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm); padding: 20px 22px; margin: 26px 0;
}
.callout h3 { margin: 0 0 8px; font-size: 18px; }
.callout p:last-child { margin: 0; }
.toc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin: 28px 0; }
.toc h2 { font-size: 14px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 12px !important; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 7px; }
.inline-cta {
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  border-radius: var(--radius); padding: 26px; margin: 34px 0; text-align: center;
}
.inline-cta h3 { margin-bottom: 8px; }
.inline-cta p { color: var(--text-muted); margin-bottom: 18px; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 52px 0 40px; background: var(--card); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.foot-grid h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 9px; }
.foot-grid a { color: var(--text-muted); font-size: 15px; }
.foot-grid a:hover { color: var(--text); }
.foot-about p { color: var(--text-muted); font-size: 14.5px; max-width: 32em; }
.disclaimer {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 13px; line-height: 1.65;
}
.disclaimer a { color: var(--text-muted); }

.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) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- "Try one" sample question ----------
   Mirrors the in-app question screen: year pill, instruction line, lettered
   option rows, green/red reveal states and the explanation panel. Progressive
   enhancement — with JS off, the answer stays visible in the <details>. */
.taster { margin: 40px 0; padding: 0; }  /* cancel the global section padding */
.taster > h2 { margin-bottom: 8px; }
.taster > p.taster-lede { color: var(--text-muted); margin-bottom: 20px; }

.qcard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(18px, 3vw, 26px);
}
.qcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.qyear {
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.qsubj { font-size: 12.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; }
.qinstr { font-size: 15px; color: var(--text-muted); font-style: italic; margin: 0 0 10px; }
.qtext { font-size: 17.5px; font-weight: 600; margin: 0 0 18px; line-height: 1.5; }

.qopts { display: grid; gap: 10px; }
.qopt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 13px 15px; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--text);
  transition: border-color .14s ease, background .14s ease;
}
.qopt:hover:not(:disabled) { border-color: var(--border-strong); background: var(--fill); }
.qopt:disabled { cursor: default; }
.qletter {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fill); color: var(--text-muted);
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
}
.qopt .qtick { margin-left: auto; font-weight: 800; font-size: 17px; opacity: 0; }

.qopt.sel { border-color: var(--brand-ink); background: var(--brand-tint); }
.qopt.sel .qletter { background: var(--brand-ink); color: #fff; }

.qopt.correct { border-color: var(--brand-ink); background: var(--brand-soft); }
.qopt.correct .qletter { background: var(--brand-ink); color: #fff; }
.qopt.correct .qtick { opacity: 1; color: var(--brand-ink); }
.qopt.wrong { border-color: var(--danger); background: var(--danger-soft, #FCEAEA); }
.qopt.wrong .qletter { background: var(--danger); color: #fff; }
.qopt.wrong .qtick { opacity: 1; color: var(--danger); }

.qcheck { margin-top: 16px; }
.qcheck[disabled] { opacity: .45; cursor: default; transform: none; }

.qexp { margin-top: 18px; border-radius: 14px; padding: 16px 18px; background: var(--fill); border: 1px solid var(--border); }
.qexp.ok { background: var(--brand-soft); border-color: var(--brand-soft); }
.qexp.no { background: var(--danger-soft, #FCEAEA); border-color: var(--danger-soft, #FCEAEA); }
.qexp-head { font-weight: 800; margin: 0 0 8px; font-size: 15.5px; }
.qexp.ok .qexp-head { color: var(--brand-ink); }
.qexp.no .qexp-head { color: var(--danger); }
.qexp p:last-child { margin: 0; }
.qexp p { font-size: 15.5px; color: var(--text); }

.taster-foot { margin-top: 16px; font-size: 15px; color: var(--text-muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qopt.wrong { background: #3A1D1F; }
  :root:not([data-theme="light"]) .qexp.no { background: #3A1D1F; border-color: #3A1D1F; }

  /* Store buttons in dark mode.
     --ink (#10141A) sits at 1.02:1 against --bg (#0F1216), so the button shape
     disappears entirely and only the label survives. Brand green restores it at
     3.68:1.
     --brand-dark, NOT --brand: white on --brand is 3.14:1 and fails AA on the
     small label. --brand-dark is 5.10:1.
     Hover darkens rather than lightens — every lighter green drops the label
     below 4.5:1. */
  :root:not([data-theme="light"]) .store-btn { background: var(--brand-dark); }
  :root:not([data-theme="light"]) .store-btn:hover { background: #186E3C; }
  /* On green the .72 label opacity lands at 3.45:1, so it goes full-strength;
     size, weight and letter-spacing still mark it as secondary. */
  :root:not([data-theme="light"]) .store-btn .st small { opacity: 1; }

  /* The CTA band is dark in both themes and already had a treatment that works
     against its own ink background — keep it translucent, not green. */
  :root:not([data-theme="light"]) .cta-band .store-btn { background: rgba(255,255,255,.1); }
  :root:not([data-theme="light"]) .cta-band .store-btn:hover { background: rgba(255,255,255,.18); }
  :root:not([data-theme="light"]) .cta-band .store-btn .st small { opacity: .72; }
}

/* ---------- small screens ----------
   Phones are the primary device for this audience, so CTAs go full-width for
   thumb reach and the type scale eases down a touch. */
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  /* keep both stores on one row; they shrink rather than stack */
  .stores { gap: 8px; flex-wrap: nowrap; }
  .store-btn { min-width: 0; flex: 1 1 0; padding: 10px 11px; gap: 8px; }
  .store-btn .glyph { font-size: 18px; }
  .store-btn .st small { font-size: 9px; letter-spacing: .04em; }
  .store-btn .st b { font-size: 13.5px; white-space: nowrap; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-links .btn { width: auto; padding: 9px 15px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero p.lede { font-size: 18px; }
  .section-head p { font-size: 16.5px; }
  .prose { font-size: 16.5px; }
  .taster > h2 { font-size: clamp(22px, 6.4vw, 26px); }
  .qtext { font-size: 16.5px; }
  .qopt { font-size: 15.5px; padding: 12px 13px; gap: 11px; }
  .qcard, .card, .step { padding-left: 17px; padding-right: 17px; }
  .cta-band { border-radius: 20px; }
  .crumbs { font-size: 13px; }
}