/* =====================================================================
   MPay — design system
   Palette mined from the live app and marketing site, not invented.
   Dark is the brand's native mode; light is a genuine second design,
   not an inversion.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand — fixed across both themes */
  --violet:      #a067e7;
  --violet-deep: #461989;
  --indigo:      #3030bd;
  --peri:        #8395ff;
  --peri-dim:    #6c81ff;
  --cyan:        #12b7f4;
  --orange:      #e66e39;
  --green:       #00b900;

  /* dark theme surfaces (default) */
  --bg:        #0d0e18;
  --bg-2:      #10111d;
  --surface:   #141524;
  --surface-2: #1a1b2e;
  --raised:    #22243c;
  --line:      #2a2c46;
  --line-2:    #3b3e61;

  --ink:      #f2f3fa;
  --ink-2:    #b9bcd4;
  --ink-3:    #8286a5;

  --accent:      var(--peri);
  --accent-ink:  #0b0c14;
  --focus:       var(--cyan);

  /* spacing — 4px base */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 9px;

  --wrap: 1180px;
  --prose: 68ch;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 8px 30px -12px rgb(0 0 0 / .7);
  --shadow-3: 0 24px 70px -24px rgb(0 0 0 / .85);
  --glow:     0 0 60px -12px rgb(131 149 255 / .45);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 160ms;
  --med:  260ms;

  color-scheme: dark;
}

/* light theme — designed, not inverted */
:root[data-theme="light"] {
  --bg:        #f7f7fb;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f2f2f8;
  --raised:    #ebebf4;
  --line:      #e0e0ec;
  --line-2:    #cbcbdd;

  --ink:      #14152a;
  --ink-2:    #4a4d68;
  --ink-3:    #6b6f8c;

  --accent:      #4f46e5;
  --accent-ink:  #ffffff;
  --focus:       #0b8fc4;

  --shadow-1: 0 1px 2px rgb(20 21 42 / .06);
  --shadow-2: 0 8px 30px -14px rgb(20 21 42 / .18);
  --shadow-3: 0 24px 70px -28px rgb(20 21 42 / .22);
  --glow:     0 0 50px -14px rgb(79 70 229 / .25);

  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  font-weight: 600;
}
h1 { font-size: clamp(2.15rem, 1.3rem + 3.6vw, 4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.6rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
p  { margin: 0 0 var(--s4); text-wrap: pretty; }

/* Long tokens (addresses, URLs) must never blow out the layout. */
code, .mono, .addr {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  overflow-wrap: anywhere;
}

/* ---------- a11y ---------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--peri);
  margin-bottom: var(--s4);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peri));
}
:root[data-theme="light"] .eyebrow { color: var(--accent); }

.lede { font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); color: var(--ink-2); max-width: var(--prose); }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s6);
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--med) var(--ease),
              background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--peri) 0%, var(--violet) 55%, var(--indigo) 100%);
  color: #fff;
  box-shadow: 0 6px 24px -8px rgb(131 149 255 / .6);
}
.btn-primary:hover { box-shadow: 0 12px 36px -10px rgb(131 149 255 / .75); }
:root[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #4338ca 100%);
  box-shadow: 0 6px 22px -10px rgb(99 102 241 / .55);
}

.btn-ghost {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-color: var(--line-2);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--peri); background: var(--surface-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.center .btn-row { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--med) var(--ease), background-color var(--med) var(--ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--line); }

.nav { display: flex; align-items: center; gap: var(--s5); height: 68px; }

.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.22rem;
  letter-spacing: -.03em; text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--peri), var(--violet) 60%, var(--indigo));
  display: grid; place-items: center;
  box-shadow: 0 3px 12px -3px rgb(131 149 255 / .55);
}
.brand-mark svg { width: 17px; height: 17px; }

.nav-links { display: none; align-items: center; gap: var(--s1); margin-inline-start: auto; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  padding: var(--s2) var(--s3); border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--surface); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* dropdown */
.nav-group { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s1);
  background: none; border: 0; cursor: pointer;
  padding: var(--s2) var(--s3); border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav-toggle:hover { color: var(--ink); background: var(--surface); }
.nav-toggle svg { width: 13px; height: 13px; transition: transform var(--fast) var(--ease); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  min-width: 480px; padding: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1);
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  display: block; padding: var(--s3); border-radius: var(--radius-sm);
  text-decoration: none; transition: background-color var(--fast) var(--ease);
}
.nav-menu a:hover { background: var(--surface-2); }
.nav-menu strong { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
.nav-menu span  { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }

.nav-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
@media (min-width: 1024px) { .nav-actions { margin-inline-start: var(--s4); } }

.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; color: var(--ink-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; min-height: 42px; padding-inline: var(--s5); font-size: .9rem; } }

.burger { display: grid; }
@media (min-width: 1024px) { .burger { display: none; } }

/* mobile drawer */
.drawer {
  position: fixed; inset: 68px 0 0; z-index: 55;
  background: var(--bg); overflow-y: auto;
  padding: var(--s5) 0 var(--s8);
}
.drawer[hidden] { display: none; }
.drawer h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); margin: var(--s5) 0 var(--s2); font-family: "Inter", sans-serif; font-weight: 600;
}
.drawer a {
  display: block; padding: var(--s3) 0; text-decoration: none;
  color: var(--ink-2); border-bottom: 1px solid var(--line); font-size: 1rem;
  min-height: 48px;
}
.drawer a:hover { color: var(--ink); }
.drawer .btn { width: 100%; margin-top: var(--s5); }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% -20% auto; height: 130%;
  background:
    radial-gradient(52% 46% at 22% 8%,  rgb(131 149 255 / .20), transparent 65%),
    radial-gradient(46% 44% at 82% 22%, rgb(160 103 231 / .18), transparent 62%),
    radial-gradient(40% 38% at 60% 78%, rgb(18 183 244 / .10),  transparent 68%);
  pointer-events: none; z-index: 0;
}
:root[data-theme="light"] .hero::before { opacity: .5; }
.hero > * { position: relative; z-index: 1; }

.hero-grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.03fr .97fr; gap: var(--s8); } }

.hero h1 { margin-bottom: var(--s5); }
.hero .lede { margin-bottom: var(--s6); }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3), var(--glow);
}

.proof-line {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-3);
}
.proof-line svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }

/* ---------- stat band ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s5); padding: var(--s6);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.stat-n {
  font-family: "Space Grotesk", sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--peri), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .stat-n { background: linear-gradient(135deg, #4f46e5, #7c3aed); -webkit-background-clip: text; background-clip: text; }
.stat-l { font-size: .82rem; color: var(--ink-3); margin-top: var(--s2); }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  padding: var(--s6); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease),
              box-shadow var(--med) var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card h3 { margin-bottom: var(--s2); }
.card p:last-child { margin-bottom: 0; color: var(--ink-2); font-size: .94rem; }

.card-icon {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: var(--s4);
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgb(131 149 255 / .16), rgb(160 103 231 / .16));
  border: 1px solid rgb(131 149 255 / .22);
  color: var(--peri);
}
:root[data-theme="light"] .card-icon { color: var(--accent); border-color: rgb(79 70 229 / .2); }
.card-icon svg { width: 20px; height: 20px; }

/* steps */
.steps { counter-reset: step; display: grid; gap: var(--s6); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; }
.step-img {
  border-radius: var(--radius); border: 1px solid var(--line);
  margin-bottom: var(--s5); aspect-ratio: 1/1; object-fit: cover; width: 100%;
}
.step-n {
  counter-increment: step;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; margin-bottom: var(--s3);
  background: linear-gradient(135deg, var(--peri), var(--violet));
  color: #fff; font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step-n::before { content: counter(step); }

/* ---------- problem block ---------- */
.prose-block { max-width: var(--prose); }
.prose-block p { color: var(--ink-2); }
.prose-block p:last-child { margin-bottom: 0; }

/* ---------- merchants ---------- */
.merch-group { margin-bottom: var(--s7); }
.merch-group:last-child { margin-bottom: 0; }
.merch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.merch-head h3 { margin: 0; }
.merch-head p { margin: 0; font-size: .875rem; color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-2);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--peri); color: var(--ink); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--peri); flex-shrink: 0; }

/* ---------- network table ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
th, td { padding: var(--s4) var(--s5); text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--ink-2); }
td strong { color: var(--ink); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s3); max-width: 860px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--fast) var(--ease);
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  padding: var(--s5) var(--s6); cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.02rem; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  rotate: 45deg; transition: rotate var(--med) var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; }
.faq .faq-body { padding: 0 var(--s6) var(--s5); color: var(--ink-2); font-size: .95rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- callout ---------- */
.callout {
  display: flex; gap: var(--s4); padding: var(--s5);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); font-size: .93rem; color: var(--ink-2);
}
.callout svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }
.callout-warn { border-color: rgb(230 110 57 / .35); background: rgb(230 110 57 / .07); }
.callout-warn svg { color: var(--orange); }
.callout-info svg { color: var(--cyan); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-2); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgb(131 149 255 / .16), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: var(--s4); }
.cta-band .lede { margin: 0 auto var(--s6); }

/* ---------- blog ---------- */
.post-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.post-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.post-card img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.post-card-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.1rem; margin-bottom: var(--s2); }
.post-card p { font-size: .9rem; color: var(--ink-2); margin-bottom: var(--s4); flex: 1; }
.post-meta { font-size: .78rem; color: var(--ink-3); display: flex; gap: var(--s3); align-items: center; }

.post-body { max-width: var(--prose); font-size: 1.05rem; }
.post-body h2 { margin-top: var(--s8); }
.post-body h3 { margin-top: var(--s6); }
.post-body p, .post-body li { color: var(--ink-2); }
.post-body ul, .post-body ol { padding-left: var(--s5); margin-bottom: var(--s4); }
.post-body li { margin-bottom: var(--s2); }
.post-body a { color: var(--peri); text-underline-offset: 3px; }
:root[data-theme="light"] .post-body a { color: var(--accent); }
.post-body strong { color: var(--ink); }
.post-body blockquote {
  margin: var(--s6) 0; padding: var(--s4) var(--s5);
  border-left: 3px solid var(--peri); background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-hero {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line);
  margin-bottom: var(--s7); box-shadow: var(--shadow-2);
}

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: .82rem; color: var(--ink-3); margin-bottom: var(--s5); }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink-2); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .5; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); margin-top: var(--s7); background: var(--bg-2); }
.footer-grid { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.7fr repeat(4, 1fr); } }
.footer-grid h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); margin-bottom: var(--s4); font-family: "Inter", sans-serif; font-weight: 600; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.footer-grid a { font-size: .89rem; color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-about p { font-size: .89rem; color: var(--ink-3); max-width: 34ch; }

.socials { display: flex; gap: var(--s2); margin-top: var(--s5); }
.socials a {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.socials a:hover { color: var(--ink); border-color: var(--peri); }
.socials svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-size: .8rem; color: var(--ink-3);
}
.footer-note { max-width: 76ch; font-size: .78rem; color: var(--ink-3); line-height: 1.6; margin-top: var(--s5); }

/* ---------- scroll reveal ----------
   Gated behind .js so that content is never invisible when scripting is
   unavailable, blocked, or errored. The class is set by an inline script in
   <head>, so there is no flash of visible-then-hidden content either. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  }
  .js [data-reveal].in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* <picture> is an inline wrapper by default, which breaks the flex/grid
   children it sits inside. Make it behave like the img it contains. */
picture { display: contents; }

/* Footer column headings are real <h2>s so the document outline stays valid,
   but they must not look like page headings. */
.footer-h,
.drawer-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s4);
}
.drawer-label { margin-top: var(--s5); }

/* A hero with no media beside it doesn't need the full bottom gutter — its own
   padding plus the next section's would otherwise stack into ~200px of void. */
.hero-text { padding-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.hero-text + section { padding-top: clamp(2.25rem, 4vw, 3.25rem); }

/* WCAG 2.2 AA (2.5.8) wants pointer targets at 24x24 CSS px. Footer and
   in-page nav links sit at ~18px on their text alone, so the height is padded
   out without moving anything visually. Inline links inside prose are exempt
   under the same criterion and are left alone. */
.footer-grid a,
.crumbs a,
.faq + p a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* =====================================================================
   Paid-traffic landing (/start)
   ===================================================================== */

.site-header--bare { position: static; backdrop-filter: none; background: transparent; }
.nav--bare { justify-content: space-between; height: 72px; }
.nav--bare .brand { text-decoration: none; }

.header-note {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin: 0; font-size: .82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgb(0 185 0 / .18);
  flex-shrink: 0;
}
@media (max-width: 480px) { .header-note { display: none; } }

/* One CTA carries the whole page, so it is bigger than the site default. */
.btn-lg {
  min-height: 56px;
  padding-inline: var(--s7);
  font-size: 1.02rem;
}

.hero--ads { padding-top: clamp(2rem, 4vw, 3.5rem); }

.tick-list {
  list-style: none; padding: 0;
  margin: var(--s6) 0 0;
  display: grid; gap: var(--s3);
}
.tick-list li {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: .95rem; color: var(--ink-2);
}
.tick-list svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }

.site-footer--bare { margin-top: 0; }
.site-footer--bare .footer-bottom nav { display: flex; gap: var(--s3); align-items: center; }
.site-footer--bare .footer-bottom a {
  color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
}
.site-footer--bare .footer-bottom a:hover { color: var(--ink); text-decoration: underline; }

/* Six merchant groups reflow to 4+2 in the auto-fit grid at desktop widths,
   which leaves two orphans. Pin to three columns so it reads 3+3. */
@media (min-width: 900px) {
  .grid-3-fixed { grid-template-columns: repeat(3, 1fr); }
}

/* Affiliate disclosure. Legally this has to be clear and conspicuous, so it
   gets a bordered panel and body-size text rather than the greyed-out
   small print the rest of the footer legalese sits in. */
.disclosure {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s5);
  margin-bottom: var(--s5);
  max-width: 78ch;
}
.disclosure p {
  margin: 0 0 var(--s3);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.disclosure p:last-child { margin-bottom: 0; }
.disclosure strong { color: var(--ink); }
.disclosure a {
  color: var(--peri);
  text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 24px;
}
:root[data-theme="light"] .disclosure a { color: var(--accent); }

/* Affiliate identity. The wordmark is the domain, not the product name, and
   the badge states the relationship in the header rather than leaving it to
   the footer alone. */
.brand-word { font-weight: 700; letter-spacing: -.03em; }
.brand-tld  { color: var(--ink-3); font-weight: 500; }

.brand-badge {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  align-self: center;
}
@media (max-width: 420px) { .brand-badge { display: none; } }

/* The affiliate wordmark plus badge is wider than the old one, which was
   enough to wrap the first nav item at ~1280px. */
.nav-toggle { white-space: nowrap; }
.nav { gap: var(--s4); }
@media (min-width: 1024px) and (max-width: 1200px) {
  .brand-badge { display: none; }
  .nav-link, .nav-toggle { padding-inline: var(--s2); font-size: .86rem; }
}

/* The badge sits beside the wordmark rather than inside the link, so the
   link's accessible name matches its visible text. */
.brand + .brand-badge { margin-inline-start: calc(var(--s2) * -1 + var(--s3)); }