/* bestwhmcspaymentgateway.com
   One stylesheet for every page. A framed grid on a light grey canvas: hairline guides
   down both sides of the content, a hairline between sections, white cells inside.
   Orange is the accent and the band under the hero; ink is the one dark section and the
   footer; green marks success states only.

   Type: Geist (text and display) and Geist Mono (eyebrows, labels, IDs), both variable,
   latin subset, self-hosted under /fonts with their OFL licences. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2');
}

:root {
  /* Palette. Contrast against white / canvas: ink 18.6 / 17.1, ink-soft 11.0 / 10.1,
     muted 5.8 / 5.3, orange-ink 5.1 / 4.7, green 5.1. On orange (#fa4616): ink 5.4,
     white 3.5 (large numerals only). On dark (#0f1012): white 19, on-dark-muted 7.5,
     orange 5.3, footer small print 5.6. */
  --ink: #111113;
  --ink-soft: #3a3a40;
  --muted: #66666d;
  --line: #e2e2de;
  --line-strong: #cfcfca;
  --canvas: #f4f4f1;
  --paper: #ffffff;
  --sunken: #f8f8f6;
  --orange: #fa4616;
  --orange-ink: #c93a10;
  --orange-deep: #a8300b;
  --orange-wash: #fff4ef;
  --orange-tint: #ffe2d6;
  --green: #157f3b;
  --green-fill: #1f9d55;
  --green-wash: #eaf6ee;
  --green-line: #cbe7d5;
  --no: #8f2a0c;
  --no-wash: #fdf0ec;
  --dark: #0f1012;
  --dark-2: #17181b;
  --dark-line: rgba(255, 255, 255, 0.1);
  --on-dark: #f4f4f1;
  --on-dark-muted: #a3a3a8;
  --footer-small: #8b8b92;

  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale. */
  --fs-h1: clamp(2.5rem, 1.2rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-display: clamp(2.5rem, 1.3rem + 3.8vw, 4.5rem);
  --fs-stat: clamp(3rem, 1.6rem + 4.6vw, 5.75rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

  /* Spacing: a 4 px base. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  --frame: 1280px;
  --section-y: clamp(36px, 6.4vw, 96px);
  --header-h: 64px;
  /* The text column beside a heading or a visual, on wide screens. */
  --text-col: minmax(0, 26rem);

  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(17, 17, 19, 0.05), 0 8px 24px -10px rgba(17, 17, 19, 0.14);
  --shadow-lg: 0 1px 2px rgba(17, 17, 19, 0.05), 0 24px 56px -24px rgba(17, 17, 19, 0.28);
  --dots: radial-gradient(circle at 1px 1px, rgba(17, 17, 19, 0.09) 1px, transparent 1.4px);
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
ul[role='list'], ol[role='list'] { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 0.9em; }
strong, b { font-weight: 600; }
::selection { background: var(--orange-tint); color: var(--ink); }

a { color: inherit; }
a:hover { color: var(--orange-ink); }

:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.i { width: 1.25em; height: 1.25em; flex: none; }

/* The frame: content sits between two hairline guides, from the header to the footer. */
.wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 48rem) {
  :root { --gutter: clamp(24px, 3.2vw, 48px); }
  .wrap {
    width: min(100% - 48px, var(--frame));
    border-inline: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------- type */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.eyebrow-num { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow-num::after {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}

h1, h2 {
  font-weight: 420;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 em, h2 em { font-style: normal; color: var(--muted); }

h3, h4 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

/* --------------------------------------------------------------- buttons */

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--orange-ink);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(17, 17, 19, 0.16);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.button:hover { background: var(--orange-deep); color: #fff; }

.button.secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.05);
}
.button.secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }

.button.small { min-height: 38px; padding: 0 16px; font-size: 0.875rem; border-radius: 9px; }

.text-link { font-weight: 500; text-underline-offset: 3px; }

/* The trust line under every download button: a lock, then short facts joined by " · ".
   Phones keep the first two. */
.trust {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: var(--s-3);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}
.trust .i { width: 13px; height: 13px; margin-top: 2px; }
@media (max-width: 40rem) {
  .trust-more { display: none; }
}

/* "See all" links under a component: an arrow after each. */
.link-row { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.link-row a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.link-row a::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--orange-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h14M13.5 6.5 19 12l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h14M13.5 6.5 19 12l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 0.15s ease;
}
.link-row a:hover { color: var(--orange-ink); }
.link-row a:hover::after { translate: 3px 0; }
@media (max-width: 40rem) {
  .link-row { flex-direction: column; }
  .link-row a { min-height: 40px; font-size: 0.9375rem; }
}

/* Fine print under a component or a card, its star footnote. */
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.fine a { color: var(--ink-soft); text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.fine a:hover { color: var(--orange-ink); }
.fn-star { margin-left: 1px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 244, 241, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; border-radius: 8px; flex: none; }
.brand img { width: 36px; height: 36px; image-rendering: pixelated; }
.brand:hover { opacity: 0.85; }

.site-header nav ul { display: flex; align-items: center; gap: var(--s-1); list-style: none; }

.site-header nav a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.site-header nav a:not(.button):hover { color: var(--ink); background: rgba(17, 17, 19, 0.05); }
.site-header nav a[aria-current]:not(.button) { color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.site-header .nav-button { margin-left: var(--s-2); }
.nav-ext { width: 11px; height: 11px; margin-left: 5px; color: var(--muted); }

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.menu-button svg { width: 22px; height: 22px; }
.menu-button .close { display: none; }
.menu-button[aria-expanded='true'] .open { display: none; }
.menu-button[aria-expanded='true'] .close { display: block; }

@media (max-width: 52rem) {
  html.js .menu-button { display: grid; }
  .site-header .wrap { flex-wrap: wrap; }
  html.js .site-header nav { display: none; flex-basis: 100%; }
  html.js .site-header.is-open nav { display: block; padding-bottom: var(--s-4); }
  .site-header nav ul { flex-wrap: wrap; }
  html.js .site-header nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding-top: var(--s-2); }
  html.js .site-header nav a:not(.button) { width: 100%; min-height: 48px; padding: 0 4px; font-size: 1rem; }
  html.js .site-header .nav-button { margin: var(--s-3) 0 0; }
  html.js .site-header .nav-button .button { width: 100%; min-height: 48px; }
}

/* ------------------------------------------------------------------ hero */

.hero .wrap { padding-block: clamp(32px, 6vw, 96px) clamp(40px, 6.4vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

.hero-text { container-type: inline-size; }

.hero-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--orange);
}

.hero h1 {
  max-width: 7.5em;
  text-wrap: wrap;
  margin-top: var(--s-5);
  font-size: var(--fs-h1);
  font-size: clamp(2.5rem, 11.4cqi, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero .lede { margin-top: var(--s-5); max-width: 30rem; }
.hero .actions { margin-top: var(--s-6); }
.hero .trust { margin-top: var(--s-4); }
@media (max-width: 30rem) {
  .hero-eyebrow { gap: 8px; font-size: 0.6875rem; letter-spacing: 0.05em; }
  .hero .trust { margin-top: var(--s-3); }
  .hero h1 { margin-top: var(--s-4); }
  .hero .lede { margin-top: var(--s-4); }
  .hero .actions { margin-top: var(--s-5); gap: var(--s-2); }
  .hero .actions .button { flex: 1 1 100%; }
  .hero-grid { gap: 32px; }
}

.hero-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.hero-media.is-image img { width: 100%; }
.hero-media .video { border-radius: 0; }

/* The empty hero frame: a product window waiting for its picture. Decorative and
   deliberately quiet; the build warns while it is in use. */
.hero-media.is-empty { display: flex; flex-direction: column; aspect-ratio: 16 / 11; }
@media (min-width: 40rem) and (max-width: 62rem) {
  .hero-media { width: min(100%, 600px); }
  .hero-media.is-empty { aspect-ratio: 16 / 9; }
}

.hm-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
}
.hm-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.hm-bar span {
  flex: 0 1 44%;
  height: 20px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.hm-body {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--dots) 0 0 / 18px 18px, var(--sunken);
}
.hm-logo {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper) url(/images/logo.svg) center / 60px no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.06), 0 16px 40px -12px rgba(17, 17, 19, 0.22);
}

/* ------------------------------------------------------------------ band */

.band { background: var(--orange); color: var(--ink); }
.band .wrap { border-color: rgba(255, 255, 255, 0.4); }

.band-marks {
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding-block: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.band-label {
  flex: none;
  max-width: 9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.band-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}
.band-mark { width: 44px; height: 44px; fill: #fff; color: #fff; transform: scale(var(--s, 1)); }
/* "+ N more" closes the row in the marks' white, at large-text size (white on orange is 3.5:1). */
.band-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.band-more a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.band-more a:focus-visible { outline-color: var(--ink); }

.stats { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: clamp(32px, 4vw, 52px) clamp(16px, 2vw, 28px) clamp(36px, 4.4vw, 60px);
}
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.4); }
.stat:first-child { padding-left: 0; }

.stat dd {
  color: #fff;
  font-size: var(--fs-stat);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-extra { font-size: max(0.36em, 24px); font-weight: 400; letter-spacing: -0.02em; }

.stat dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (max-width: 62rem) {
  .band-marks { flex-direction: column; align-items: flex-start; }
  .band-label { max-width: none; }
  .band-list { justify-content: flex-start; gap: var(--s-3) var(--s-5); }
  .band-mark { width: 38px; height: 38px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.4); }
}

@media (max-width: 30rem) {
  .band-marks { gap: var(--s-3); padding-block: 18px; }
  .band-list { flex-wrap: nowrap; justify-content: space-between; gap: 4px; width: 100%; }
  .band-mark { width: 28px; height: 28px; }
  .band-more a { min-height: 32px; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
  .stat { padding: 22px 12px 24px; gap: var(--s-2); }
  .stat dd { font-size: 2.75rem; }
  .stat-extra { display: block; margin-top: 6px; }
  .hero-media.is-empty { aspect-ratio: 2 / 1; }
}

/* -------------------------------------------------------------- sections */

.section > .wrap { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.band + .section > .wrap { border-top: 0; }

.section-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }

.section-head { max-width: 46rem; }
.section-head h2 { margin-top: var(--s-5); font-size: var(--fs-h2); }
.section-head > p:not(.eyebrow) { margin-top: var(--s-5); max-width: 36rem; font-size: 1.0625rem; color: var(--ink-soft); }
@media (max-width: 40rem) {
  .section-grid { gap: 24px; }
  .section-head h2 { margin-top: var(--s-3); }
  .section-head > p:not(.eyebrow) { margin-top: var(--s-3); font-size: 1rem; line-height: 1.55; }
}

/* A full-width section's head on wide screens: the heading on the left, its line beside it,
   both on the baseline, so the block below starts sooner. */
@media (min-width: 64rem) {
  .section:not(.split, .faq, .cta) .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--text-col);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: end;
    max-width: none;
  }
  .section:not(.split, .faq, .cta) .section-head > .eyebrow { grid-column: 1 / -1; }
  .section:not(.split, .faq, .cta) .section-head > h2 { grid-column: 1; max-width: 14em; }
  .section:not(.split, .faq, .cta) .section-head > p:not(.eyebrow) { grid-column: 2; margin-top: 0; padding-bottom: 4px; }
}
.section-head > p:not(.eyebrow) + p { margin-top: var(--s-3); }
.section-head strong { color: var(--ink); font-weight: 600; }

.section-head ul {
  margin-top: var(--s-6);
  list-style: none;
  border-top: 1px solid var(--line);
}
.section-head li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.section-head li strong { display: block; margin-bottom: 2px; font-weight: 500; }

.section-body > * + * { margin-top: var(--s-5); }

.section-body > h3 {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 420;
  letter-spacing: -0.03em;
}
.section-body h3 em { font-style: normal; color: var(--muted); }
.section-body > h3 + p { margin-top: var(--s-3); max-width: 40rem; color: var(--ink-soft); }
.section-body > h3 + p strong { color: var(--ink); }
@media (max-width: 40rem) {
  .section-body > * + * { margin-top: var(--s-4); }
  .section-body > h3 { margin-top: var(--s-6); padding-top: var(--s-5); font-size: 1.375rem; }
  .note { font-size: 0.875rem; }
  .section-head ul { margin-top: var(--s-4); }
  .section-head li { padding: 10px 0; font-size: 0.9375rem; line-height: 1.5; }
  .section-head li strong { display: inline; margin: 0 4px 0 0; }
}

.note { max-width: 46rem; font-size: 0.9375rem; color: var(--ink-soft); }
.note strong { color: var(--ink); }
.note a { text-underline-offset: 3px; text-decoration-color: var(--orange); }

.sources {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
}
.sources a { color: var(--ink-soft); text-underline-offset: 3px; }

@media (min-width: 64rem) {
  .section.split .section-grid,
  .section.faq .section-grid {
    grid-template-columns: var(--text-col) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }
  .section.split.flip .section-grid { grid-template-columns: minmax(0, 1fr) var(--text-col); }
  .section.split.flip .section-head { order: 2; }
  .section.faq .section-grid { align-items: start; }
  .section.faq .section-head { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* The one dark section. */
.section.dark { background: var(--dark); color: var(--on-dark); }
.section.dark > .wrap { border-color: var(--dark-line); border-top: 0; }
.section.dark .eyebrow { color: var(--orange); }
.section.dark h2 em { color: var(--on-dark-muted); }
.section.dark .section-head > p:not(.eyebrow),
.section.dark .section-head li { color: var(--on-dark-muted); }
.section.dark .section-head strong { color: #fff; }
.section.dark .section-head ul,
.section.dark .section-head li { border-color: var(--dark-line); }
.section.dark :focus-visible { outline-color: #fff; }
.section.dark + .section > .wrap { border-top: 0; }

/* Closing call to action. */
.section.cta > .wrap { text-align: center; }
.section.cta .section-head { max-width: 52rem; margin-inline: auto; }
.section.cta .section-head::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--s-6);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper) url(/images/logo.svg) center / 44px no-repeat;
  image-rendering: pixelated;
  box-shadow: var(--shadow);
}
.section.cta h2 { margin-top: 0; font-size: var(--fs-display); }
.section.cta .section-head > p:not(.eyebrow) { margin-inline: auto; }
.section.cta .section-head > p:not(.actions) a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--orange); }
.section.cta .actions { justify-content: center; margin-top: var(--s-6); }
.section.cta .section-head > p.trust { justify-content: center; max-width: none; margin-top: var(--s-4); font-size: 0.75rem; color: var(--muted); }
@media (max-width: 40rem) {
  .section.cta .section-head::before { width: 56px; height: 56px; margin-bottom: var(--s-5); border-radius: 14px; background-size: 34px; }
  .section.cta h2 { font-size: 2.25rem; }
  .section.cta .actions { margin-top: var(--s-5); }
  .section.cta .actions .button { flex: 1 1 100%; }
  .section.cta .section-head > p.trust { margin-top: var(--s-3); font-size: 0.75rem; }
}

/* The stage a UI illustration sits on: a quiet dotted panel. */
.viz-renewals,
.card .viz {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 56px) clamp(14px, 3vw, 48px);
  border: 1px solid var(--line);
  background: var(--dots) 0 0 / 16px 16px, var(--sunken);
}

.ui-card {
  width: 100%;
  max-width: 440px;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.4;
}

.ui-title {
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.pill .i { width: 12px; height: 12px; }
.pill-ok { border-color: var(--green-line); background: var(--green-wash); color: var(--green); }
.pill-due { border-color: var(--orange-tint); background: var(--orange-wash); color: var(--orange-ink); }

.whop-mark { width: auto; height: 1em; aspect-ratio: 36 / 19; flex: none; }

/* Brand squares: a method's mark in white on its own colour. */
.mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--mark-ink, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mark-icon { width: 22px; height: 22px; fill: currentColor; color: inherit; }
.mark-mono { font-size: 0.875rem; font-weight: 650; letter-spacing: -0.03em; }
.mark.small { width: 28px; height: 28px; border-radius: 7px; }
.mark.small .mark-icon { width: 16px; height: 16px; }
.mark.small .mark-mono { font-size: 0.6875rem; }
.mark.tiny { width: 24px; height: 24px; border-radius: 6px; }
.mark.tiny .mark-icon { width: 15px; height: 15px; }

/* --------------------------------------------------------------- ranking */

.ranking { border: 1px solid var(--line-strong); background: var(--paper); }

.ranking {
  --rank-cols: 48px minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) 168px;
}
@media (max-width: 72rem) {
  .ranking { --rank-cols: 36px minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 140px; }
  .rank, .rank-labels { padding-inline: var(--s-4); gap: var(--s-3); }
}

.rank-labels {
  display: grid;
  grid-template-columns: var(--rank-cols);
  gap: var(--s-4);
  padding: 12px var(--s-5);
  border-bottom: 1px solid var(--line-strong);
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rank {
  display: grid;
  grid-template-columns: var(--rank-cols);
  gap: var(--s-4);
  align-items: center;
  padding: 22px var(--s-5);
  border-bottom: 1px solid var(--line);
}
.rank:last-child { border-bottom: 0; }
.rank.is-top { background: var(--orange-wash); box-shadow: inset 3px 0 0 var(--orange); }

.rank-num { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.rank.is-top .rank-num { color: var(--orange-ink); }

.rank-head h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; }
.rank-head h3 a { text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.rank-mark { height: 15px; }
.rank-head p { margin-top: 2px; font-size: 0.875rem; color: var(--muted); }

.rank dl { display: contents; }
.rank dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rank dd { font-size: 0.9375rem; color: var(--ink-soft); }
.rank .rank-fee dd { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.rank.is-top dd { color: var(--ink); }
.rank-action { justify-self: end; }
.rank-action .button { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
/* The pick's trust line: one row under its cells, ending under the button. */

/* Narrow screens: one compact card per gateway. The rank sits beside the name; the three
   facts are label and value rows across the card's full width. */
@media (max-width: 56rem) {
  .rank-labels { display: none; }
  .rank { grid-template-columns: 28px minmax(0, 1fr); gap: 0; padding: 14px var(--s-4) 12px; }
  .rank-num { align-self: start; padding-top: 3px; }
  .rank-head h3 { font-size: 1.0625rem; }
  .rank-head p { font-size: 0.8125rem; line-height: 1.45; }
  .rank dl { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); margin-top: 10px; padding-top: 3px; border-top: 1px dashed var(--line-strong); }
  .rank dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-3); padding: 5px 0 0; }
  .rank dt {
    position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
    padding-top: 2px;
    font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted);
  }
  .rank dd { font-size: 0.875rem; line-height: 1.45; }
  .rank.is-top dl { border-color: var(--orange-tint); }
  .rank-action { grid-column: 1 / -1; justify-self: stretch; margin-top: 12px; }
  .rank-action .button { width: 100%; min-height: 44px; }
}
@media (max-width: 40rem) {
}

/* ------------------------------------------------------------ why cards */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 0;
  background: var(--paper);
  transition: background-color 0.2s ease;
}
.why-card:hover { background: #fffcfa; }
.why-card:focus-within { outline: 2px solid var(--orange-ink); outline-offset: -2px; }

.why-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunken);
  color: var(--ink);
}
.why-icon .i { width: 19px; height: 19px; }

.why-card h3 { margin-top: var(--s-5); font-size: 1.1875rem; }
.why-card h3 a { color: inherit; text-decoration: none; }
.why-card h3 a::after { content: ''; position: absolute; inset: 0; }
.why-card h3 a:focus-visible { outline: none; }
.why-card > p { margin-top: 6px; font-size: 0.9375rem; color: var(--muted); }

.why-go {
  position: absolute;
  top: 30px;
  right: 28px;
  width: 20px;
  height: 20px;
  color: var(--line-strong);
  transition: color 0.2s ease, transform 0.2s ease;
}
.why-card:hover .why-go { color: var(--orange-ink); transform: translateX(3px); }

/* The tray: the same height on every card, open at the bottom where the card's edge crops it. */
.why-ui { margin-top: auto; padding-top: var(--s-5); }
.why-tray {
  height: 126px;
  overflow: hidden;
  padding: 14px 14px 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--sunken);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.mini-rows > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 2px; border-bottom: 1px dashed var(--line-strong); }
.mini-rows > div:first-child { padding-top: 2px; }
.mini-rows dt { color: var(--muted); }
.mini-rows dd { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--ink); }

.mini-list { display: grid; gap: 6px; }
.mini-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.mini-list li .mark.tiny { width: 22px; height: 22px; margin-left: -2px; }
.mini-list li .mark.tiny .mark-icon { width: 14px; height: 14px; }
.mini-list img { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.08); }
.mini-state { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.mini-state .i { width: 13px; height: 13px; }
.mini-state.is-ok { color: var(--green); }

.mini-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--sunken);
  border: 1px solid var(--line);
  color: var(--ink);
}
.mini-ico .i { width: 13px; height: 13px; }
.mini-ico.is-ok { background: var(--green-fill); border-color: var(--green-fill); color: #fff; }

.mini-marks { display: grid; grid-template-columns: repeat(4, 40px); justify-content: space-between; gap: 10px; padding-top: 4px; }

@media (max-width: 56rem) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: a plain list, the icon beside the words, no trays. */
@media (max-width: 40rem) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-4); padding: 14px 44px 14px 16px; }
  .why-icon { grid-row: 1 / 3; width: 36px; height: 36px; }
  .why-card h3 { margin-top: 0; font-size: 1.0625rem; }
  .why-card > p { margin-top: 2px; font-size: 0.875rem; line-height: 1.45; }
  .why-ui { display: none; }
  .why-go { top: 50%; right: 16px; translate: 0 -50%; }
}

/* ----------------------------------------------------------------- costs */

/* The fee table and the renewal bars: side by side on wide screens, one framed block. */
.costs { display: grid; gap: var(--s-4); }
@media (min-width: 64rem) {
  .costs { grid-template-columns: minmax(0, 1fr) var(--text-col); gap: 0; }
  .costs .costs-bars { display: flex; flex-direction: column; border-left: 0; padding: 22px var(--s-5); }
  .costs .bars { flex: 1; align-content: space-evenly; }
  .costs .bars li { grid-template-columns: 120px minmax(0, 1fr) 76px; gap: var(--s-3); }
}

.costs-table { border: 1px solid var(--line); background: var(--paper); overflow-x: auto; }
.costs-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.costs-table caption {
  caption-side: bottom;
  padding: 12px var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--sunken);
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: left;
}
.costs-table :is(th, td) { padding: 16px var(--s-5); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.costs-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.costs-table thead th {
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: bottom;
  /* "PayPal Checkout" wraps under its column on a phone instead of widening the table. */
  white-space: normal;
}
.costs-table :is(th, td):first-child { text-align: left; }
.costs-table tbody th { font-weight: 500; }
.costs-table td { color: var(--ink-soft); font-size: 1.0625rem; }
.costs-table .lead { background: var(--orange-wash); color: var(--ink); font-weight: 600; }
.costs-table thead .lead { color: var(--orange-ink); }
.costs-table thead .lead .th-mark { display: inline-block; height: 10px; margin-right: 8px; vertical-align: -1px; }

.costs-bars { padding: var(--s-5); border: 1px solid var(--line); background: var(--paper); }
.costs-foot { grid-column: 1 / -1; margin-top: var(--s-3); }
.costs-title {
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bars { display: grid; gap: var(--s-3); }
.bars li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; align-items: center; gap: var(--s-4); }
.bar-name { font-size: 0.875rem; font-weight: 500; }
.bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.bar { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--line-strong); }
.bars .lead .bar { background: var(--orange); }
.bar-value { text-align: right; font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bars .lead .bar-value { color: var(--ink); font-weight: 650; }
@media (max-width: 30rem) {
  .costs { gap: var(--s-3); }
  .costs-table :is(th, td) { padding: 11px 12px; }
  .costs-table td { font-size: 0.9375rem; }
  .costs-table caption { padding: 10px 12px; font-size: 0.75rem; }
  .costs-bars { padding: var(--s-4) 12px; }
  .costs-foot { margin-top: var(--s-1); }
  .bars li { grid-template-columns: 52px minmax(0, 1fr) 70px; gap: var(--s-3); }
}

/* ------------------------------------------------------- country checker */

/* Wide screens: the search and the two numbers on the left, the excluded list on the right. */
.checker { border: 1px solid var(--line); background: var(--paper); }
@media (min-width: 64rem) {
  .checker { display: grid; grid-template-columns: minmax(0, 1fr) var(--text-col); grid-template-areas: 'panel out' 'facts out'; }
  .checker-panel { grid-area: panel; }
  .checker .checker-facts { grid-area: facts; border-bottom: 0; }
  .checker-out { grid-area: out; border-left: 1px solid var(--line); background: var(--sunken); }
  html:not(.js) .checker { grid-template-areas: 'facts out'; }
}

.checker-panel { padding: var(--s-6) clamp(20px, 3vw, 32px) var(--s-5); border-bottom: 1px solid var(--line); }
html:not(.js) .checker-panel { display: none; }

.checker-label { display: block; margin-bottom: var(--s-3); font-size: 0.9375rem; font-weight: 500; }

.checker-field { position: relative; }
.checker-field .i { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.checker-field input {
  width: 100%;
  height: 56px;
  padding: 0 16px 0 48px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  font-size: 1.0625rem;
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.04);
  -webkit-appearance: none;
  appearance: none;
}
.checker-field input::placeholder { color: var(--muted); opacity: 1; }
.checker-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' fill='none' stroke='%2366666d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  cursor: pointer;
}
.checker-field input:focus { outline: 2px solid var(--orange-ink); outline-offset: 1px; border-color: transparent; }

.checker-answer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  margin-top: var(--s-4);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunken);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.35;
}
.checker-answer img { width: 24px; height: 18px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.08); }
.checker-answer:is([data-state='yes'], [data-state='partial']) { border-color: var(--green-line); background: var(--green-wash); color: var(--green); font-weight: 500; }
.checker-answer:is([data-state='no'], [data-state='payouts']) { border-color: #f6d3c7; background: var(--no-wash); color: var(--no); font-weight: 500; }

.checker-also { margin-top: var(--s-3); font-size: 0.8125rem; color: var(--muted); }
.checker-also button {
  margin: 2px 0;
  padding: 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8125rem;
  cursor: pointer;
}
.checker-also button:hover { border-color: var(--ink); }

.checker-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.checker-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: var(--s-5) clamp(20px, 3vw, 32px); }
.checker-facts > div + div { border-left: 1px solid var(--line); }
.checker-facts dd { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.checker-facts dt { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

.checker-out { padding: var(--s-5) clamp(20px, 3vw, 32px) var(--s-6); }
.checker-sub {
  margin-bottom: var(--s-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.excluded { display: flex; flex-wrap: wrap; gap: 6px; }
.excluded li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sunken);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.excluded img { width: 18px; height: 13.5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.08); }
.checker-note { margin-top: var(--s-3); font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.checker-note + .checker-note { margin-top: var(--s-1); }
@media (min-width: 64rem) {
  .checker-out { padding-top: var(--s-6); }
  .excluded li { background: var(--paper); }
}

@media (max-width: 40rem) {
  .checker-panel { padding: var(--s-5) var(--s-4) var(--s-4); }
  .checker-label { margin-bottom: var(--s-2); }
  .checker-field input { height: 50px; font-size: 1rem; }
  .checker-answer { min-height: 50px; margin-top: var(--s-3); padding: 10px 14px; font-size: 0.9375rem; }
  .checker-facts > div { padding: var(--s-4); }
  .checker-facts dd { font-size: 2.25rem; }
  .checker-facts dt { font-size: 0.75rem; }
  .checker-out { padding: var(--s-4) var(--s-4) var(--s-5); }
  .excluded { gap: 5px; }
  .excluded li { gap: 5px; padding: 1px 7px 1px 4px; font-size: 0.71875rem; }
  .excluded img { width: 16px; height: 12px; }
}

/* --------------------------------------------------- payment methods */

.explorer { border: 1px solid var(--line); background: var(--paper); }

.explorer-tabs {
  display: flex;
  gap: var(--s-1);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
html:not(.js) .explorer-tabs { display: none; }

.explorer-tabs button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-bottom: -1px;
  padding: 16px 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.explorer-tabs button:hover { color: var(--ink); }
.explorer-tabs button span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
}
.explorer-tabs button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--orange); }
.explorer-tabs button[aria-pressed='true'] span { background: var(--orange-wash); box-shadow: inset 0 0 0 1px var(--orange-tint); color: var(--orange-ink); }
.explorer-tabs button:focus-visible { outline-offset: -4px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: var(--s-2);
  padding: var(--s-4);
}
.tile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tile[hidden] { display: none; }
.tile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.tile-text b { font-size: 0.9375rem; font-weight: 500; }
.tile-region { overflow: hidden; font-size: 0.8125rem; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.tile-brands { display: flex; gap: 4px; margin-top: 4px; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 20px; border: 1px solid var(--line); border-radius: 4px; color: var(--brand); }
.brand-mark .i { width: 20px; height: 20px; fill: currentColor; }

.tile-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
}
.tile-badge .i { width: 14px; height: 14px; }
.tile-badge.renews { background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green-line); color: var(--green); }
.tile-badge.once { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }

/* A method that unlocks after Whop verifies the business, or after a setup step in Whop. */
.tile-lock { display: inline-grid; place-items: center; margin-left: 6px; vertical-align: -1px; color: var(--muted); }
.tile-lock .i { width: 12px; height: 12px; }

/* With scripts, "All" starts with the featured methods; the button below shows every one in
   place, in a box of bounded height that scrolls. Phones start with fewer. */
html.js .explorer.is-collapsed[data-view='all'] .tile.is-more { display: none; }
html.js .explorer:not(.is-collapsed)[data-view='all'] .tiles { max-height: 40rem; overflow-y: auto; overscroll-behavior: contain; }
.explorer-more { display: none; border-top: 1px solid var(--line); }
html.js .explorer[data-view='all'] .explorer-more { display: block; }
.explorer-more button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.explorer-more button::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.explorer-more button[aria-expanded='true']::after { rotate: 180deg; }
.explorer-more button:hover { background: var(--sunken); }
.explorer-more button:focus-visible { outline-offset: -4px; }

/* Phones: one row per method, like a settings list: the mark, the name, where it works on
   the right, then the badge. */
@media (max-width: 40rem) {
  .explorer-tabs { padding: 0 var(--s-1); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .explorer-tabs:focus-within { -webkit-mask-image: none; mask-image: none; }
  .explorer-tabs button { padding: 13px 10px 11px; font-size: 0.8125rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .tile { gap: 10px; min-height: 44px; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .tile:hover { box-shadow: none; }
  .tile .mark { width: 26px; height: 26px; border-radius: 7px; }
  .tile .mark-icon { width: 16px; height: 16px; }
  .tile .mark-mono { font-size: 0.75rem; }
  .tile-text { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .tile-text b { flex: none; font-size: 0.875rem; }
  .tile-region { font-size: 0.75rem; text-align: right; white-space: normal; line-height: 1.3; }
  .tile-brands { gap: 3px; margin-top: 0; }
  .brand-mark { width: 26px; height: 18px; }
  .brand-mark .i { width: 18px; height: 18px; }
  .tile .tile-badge { width: 22px; height: 22px; font-size: 0.625rem; }
  .tile .tile-badge .i { width: 12px; height: 12px; }
  .explorer .legend { gap: var(--s-2) var(--s-4); padding: 10px var(--s-3); font-size: 0.75rem; }
  .legend-long { display: none; }
  html.js .explorer.is-collapsed[data-view='all'] .tile.is-wide-only { display: none; }
  html.js .explorer:not(.is-collapsed)[data-view='all'] .tiles { max-height: 30rem; }
  .explorer-more button { min-height: 44px; font-size: 0.8125rem; }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: 14px var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--sunken);
  font-size: 0.8125rem;
  color: var(--muted);
}
.legend > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend .tile-badge { width: 22px; height: 22px; }
.legend .tile-lock { flex: none; width: 22px; height: 22px; margin: 0; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

.gateways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.gw { padding: clamp(24px, 3vw, 32px); background: var(--paper); }
.gw-for {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.gw h4 { margin-top: var(--s-2); font-size: 1.375rem; letter-spacing: -0.025em; }
.gw-points li { display: flex; gap: var(--s-3); padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-soft); }
.gw-points .i { width: 18px; height: 18px; margin-top: 2px; }
.gw-points .yes .i { color: var(--green-fill); }
.gw-points .no .i { color: var(--muted); }

/* Each gateway's methods as pills of one height: the card brands and wallets as their own
   wordmarks, the rest as a small mark and a name, then "+ N more". */
.gw-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s-4) 0 var(--s-5); }
.pay-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--paper);
  color: var(--brand, var(--ink));
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.pay-pill .wordmark { display: block; fill: currentColor; }
.pay-pill.is-apple-pay { padding: 0; border: 0; color: #000; }
.pay-pill.is-google-pay { color: #3c4043; }
.pay-pill .pill-mark { width: 20px; height: 20px; border-radius: 5px; box-shadow: none; }
.pay-pill .pill-mark .mark-icon { width: 13px; height: 13px; }
.pay-pill .pill-mark .mark-mono { font-size: 0.5625rem; }
.pp-label { color: var(--ink); }
.pay-pill.is-more { border-style: dashed; color: var(--muted); }
.pay-pill.is-filled { border-color: var(--brand); background: var(--brand); color: #fff; }
.pp-text { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }

/* One line under both gateways: where the customer pays. */
.gw-stay {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 16px clamp(24px, 3vw, 32px);
  background: var(--sunken);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.gw-stay strong { color: var(--ink); font-weight: 500; }
.gw-stay-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); }
.gw-stay-icon .i { width: 18px; height: 18px; }

/* Phones: the two gateways stay side by side, so they read as a comparison. The pills drop
   their names (the mark stays, the name is still read out) and shrink with their wordmarks. */
@media (max-width: 40rem) {
  .gw { padding: 14px 12px 6px; }
  .gw-for { font-size: 0.625rem; letter-spacing: 0.06em; line-height: 1.35; }
  .gw h4 { margin-top: 4px; font-size: 1.0625rem; }
  .gw-pills { margin: 8px 0 10px; gap: 4px; }
  .pay-pill { height: 26px; padding: 0 6px; border-radius: 6px; font-size: 0.75rem; }
  .pay-pill .wordmark { width: auto; height: calc(var(--wh, 12px) * 0.8); }
  .pay-pill.is-apple-pay .wordmark { height: 26px; }
  .pay-pill .pp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pay-pill .pill-mark { width: 18px; height: 18px; }
  .pay-pill .pill-mark .mark-icon { width: 12px; height: 12px; }
  .gw-points li { gap: 6px; padding: 8px 0; font-size: 0.8125rem; line-height: 1.4; }
  .gw-points .i { width: 14px; height: 14px; margin-top: 1px; }
  .gw-stay { align-items: flex-start; gap: 10px; padding: 12px; font-size: 0.8125rem; }
  .gw-stay-icon { width: 28px; height: 28px; border-radius: 8px; }
  .gw-stay-icon .i { width: 15px; height: 15px; }
}

/* -------------------------------------------------------------- renewals */

.r-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunken);
}
.r-card { flex: 1; min-width: 0; }
.r-card b { display: block; font-weight: 600; }
.r-card small { font-size: 0.75rem; color: var(--muted); }

.r-list { margin-top: var(--s-3); }
.r-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.r-date { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.r-inv { font-weight: 500; }
.r-amt { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.r-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: 0.8125rem; color: var(--muted); }
.r-foot .i { width: 16px; height: 16px; }

@media (max-width: 40rem) {
  .viz-renewals { padding: 0; border: 0; background: none; }
  .viz-renewals .ui-card { max-width: none; padding: var(--s-4); box-shadow: var(--shadow); }
  .viz-renewals .ui-title { margin-bottom: var(--s-3); }
  .r-head { padding: 10px; }
  .r-list li { padding: 10px 2px; }
  .r-foot { margin-top: var(--s-3); }
}
@media (max-width: 26rem) {
  .r-list li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .r-amt { display: none; }
}

/* --------------------------------------------------------- orchestration */

.viz-route {
  padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px);
  border: 1px solid var(--dark-line);
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--dark-2);
}

.route { display: flex; flex-direction: column; max-width: 480px; margin-inline: auto; color: var(--ink); }

.rn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--paper);
  font-size: 0.875rem;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
}
.rn-text { display: flex; flex-direction: column; min-width: 0; }
.rn-text b { font-weight: 600; }
.rn-text small { font-size: 0.75rem; color: var(--muted); }
.rn-amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.rn-logo { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.rn-logo .whop-mark { height: 15px; }
.rn-whop { box-shadow: 0 0 0 3px rgba(250, 70, 22, 0.35), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }

.rlink { position: relative; display: block; width: 2px; height: 26px; margin-inline: auto; background: rgba(255, 255, 255, 0.16); }
.rlink i { position: absolute; inset: 0; background: var(--orange); transform-origin: top; }
.rl-paid i { background: var(--green-fill); }

.rtree {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  padding-top: 26px;
}
.rrail {
  position: absolute;
  top: 0;
  left: calc((100% - 24px) / 6);
  right: calc((100% - 24px) / 6);
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.rrail .ra { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: var(--orange); transform-origin: right; }

.rrow { position: relative; }
.rbranch { position: absolute; left: 50%; top: -26px; width: 2px; height: 26px; margin-left: -1px; background: rgba(255, 255, 255, 0.16); }
.rbranch i { position: absolute; inset: 0; transform-origin: top; }
.rr-a .rbranch i { background: var(--orange); }
.rr-b .rbranch i { background: var(--green-fill); }

.rn-proc {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 112px;
  padding: 14px 8px;
  text-align: center;
}
.rn-proc b { font-size: 0.8125rem; font-weight: 600; }
.rn-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); }
.rn-icon .i { width: 16px; height: 16px; }
.rn-state { padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; }
.rr-a .rn-state { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); }
.rr-b .rn-state { background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green-line); color: var(--green); }
.rr-b .rn-icon { border-color: var(--green-fill); background: var(--green-fill); color: #fff; }
.rr-c .rn-proc { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: var(--on-dark-muted); }
.rr-c .rn-proc b { font-weight: 500; }
.rr-c .rn-icon { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); }

.rn-paid .rn-icon { border-color: var(--green-fill); background: var(--green-fill); color: #fff; }
.rn-paid { box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.45), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }

/* The loop: card to Whop, Whop to Processor A (declined), then B (approved), then paid.
   Every element's resting state is the finished one, so without motion the outcome shows. */
@media (prefers-reduced-motion: no-preference) {
  .viz-route .rl-whop i { animation: route-down 6s ease-in-out infinite; }
  .viz-route .rn-whop { animation: route-whop 6s ease-in-out infinite; }
  .viz-route .rrail .ra { animation: route-bus 6s ease-in-out infinite; }
  .viz-route .rr-a .rbranch i { animation: route-drop-a 6s ease-in-out infinite; }
  .viz-route .rr-a .rn-state, .viz-route .rr-a .rn-icon { animation: route-show-a 6s ease-in-out infinite; }
  .viz-route .rr-b .rbranch i { animation: route-drop-b 6s ease-in-out infinite; }
  .viz-route .rr-b .rn-state { animation: route-show-b 6s ease-in-out infinite; }
  .viz-route .rr-b .rn-icon { animation: route-icon-b 6s ease-in-out infinite; }
  .viz-route .rl-paid i { animation: route-drop-paid 6s ease-in-out infinite; }
  .viz-route .rn-paid { animation: route-paid 6s ease-in-out infinite; }
  .viz-route.is-paused * { animation-play-state: paused !important; }
}

/* 6 s: the card reaches Whop by 0.5 s, A declines at 1.6 s, B approves at 2.3 s, the
   invoice is paid at 3 s, and the outcome holds until 5.5 s. */
@keyframes route-down { 0%, 2% { transform: scaleY(0); } 8%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes route-whop {
  0%, 8% { box-shadow: 0 0 0 0 rgba(250, 70, 22, 0), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }
  12%, 92% { box-shadow: 0 0 0 3px rgba(250, 70, 22, 0.35), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(250, 70, 22, 0), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }
}
@keyframes route-bus { 0%, 12% { transform: scaleX(0); } 18%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes route-drop-a { 0%, 18% { transform: scaleY(0); } 22%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes route-show-a { 0%, 22% { opacity: 0; } 26%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes route-drop-b { 0%, 30% { transform: scaleY(0); } 35%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes route-show-b { 0%, 35% { opacity: 0; } 39%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes route-icon-b {
  0%, 35% { background: var(--sunken); border-color: var(--line); color: var(--sunken); }
  39%, 92% { background: var(--green-fill); border-color: var(--green-fill); color: #fff; }
  100% { background: var(--sunken); border-color: var(--line); color: var(--sunken); }
}
@keyframes route-drop-paid { 0%, 41% { transform: scaleY(0); } 46%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes route-paid {
  0%, 46% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(31, 157, 85, 0), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }
  50%, 92% { opacity: 1; box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.45), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }
  100% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(31, 157, 85, 0), 0 16px 32px -16px rgba(0, 0, 0, 0.6); }
}

@media (max-width: 40rem) {
  .viz-route { padding: 20px 12px; }
  .rn { padding: 10px 12px; }
  .rlink { height: 20px; }
  .rtree { gap: var(--s-2); padding-top: 20px; }
  .rrail { left: calc((100% - 16px) / 6); right: calc((100% - 16px) / 6); }
  .rbranch { top: -20px; height: 20px; }
  .rn-proc { min-height: 86px; padding: 8px 4px; }
  .rn-proc b { font-size: 0.75rem; }
  .rn-logo { width: 34px; height: 34px; }
}

/* ----------------------------------------------------- cards (balance) */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.card { display: flex; flex-direction: column; padding: 0 clamp(24px, 3vw, 36px) clamp(28px, 3vw, 36px); background: var(--paper); }
.card .viz { order: -1; min-height: 280px; margin: 0 calc(-1 * clamp(24px, 3vw, 36px)) var(--s-6); border: 0; border-bottom: 1px solid var(--line); }
.card h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
.card > p { margin-top: var(--s-2); max-width: 32rem; color: var(--ink-soft); }
.card > p strong { color: var(--ink); }
.card > p.fine { margin-top: var(--s-1); color: var(--muted); }
.card h3 em { font-style: normal; color: var(--muted); }

/* A card across the whole grid: a big two-tone heading beside its table (the payout times). */
.card.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-top: clamp(28px, 3vw, 40px); }
.card-wide h3 { max-width: 14em; font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem); font-weight: 420; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
@media (min-width: 64rem) {
  .card.card-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
}

.payouts table { width: 100%; border-collapse: collapse; }
.payouts thead th {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}
.payouts tbody :is(th, td) { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.payouts tbody th { width: 36%; padding-right: var(--s-4); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }
.payouts td b { display: block; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.payouts td span { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.payouts .fine { margin-top: var(--s-3); }
@media (max-width: 40rem) {
  .card.card-wide { gap: var(--s-3); padding-top: var(--s-5); }
  .card-wide h3 { font-size: 1.375rem; }
  .payouts thead th { padding-bottom: 6px; }
  .payouts tbody :is(th, td) { padding: 8px 0; }
  .payouts tbody th { width: 32%; padding-right: var(--s-3); font-size: 0.8125rem; line-height: 1.4; }
  .payouts td b { font-size: 0.9375rem; }
  .payouts td span { margin-top: 0; font-size: 0.8125rem; line-height: 1.4; }
  .payouts .fine { margin-top: var(--s-2); }
}

@media (max-width: 48rem) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .card .viz { min-height: 0; }
}
/* Phones: the balance overlaps the card's corner instead of sitting under it. */
@media (max-width: 40rem) {
  .card { padding: 0 var(--s-4) var(--s-5); }
  .card .viz { margin: 0 calc(-1 * var(--s-4)) var(--s-4); padding: 18px 14px; }
  .card h3 { font-size: 1.1875rem; }
  .card > p { font-size: 0.9375rem; line-height: 1.5; }
  .viz-wcard .wcard-scene { display: grid; justify-content: stretch; gap: 0; width: min(300px, 80vw); }
  .viz-wcard .wcard { justify-self: end; width: 184px; margin-right: 4px; }
  .viz-wcard .wcard-balance { justify-self: start; width: 168px; margin-top: -44px; padding: 12px; }
  .wcard-balance .mini-rows > div { padding: 5px 0; }
  .wcard-spend { margin-top: var(--s-2); }
  .viz-ads .ui-card { padding: var(--s-4); }
  /* The Meta ads picture adds little on a phone; its two lines say it. */
  .card .viz-ads { display: none; }
  .card:has(.viz-ads) { padding-top: var(--s-5); }
}

.wcard-scene { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); }

.wcard {
  position: relative;
  width: 232px;
  aspect-ratio: 1.586;
  overflow: hidden;
  border-radius: 14px;
  /* Matte graphite with one soft sheen: a premium card, not a gradient effect. */
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(160deg, #24252a 0%, #111214 62%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 40px -18px rgba(17, 17, 19, 0.6);
  transform: rotate(-4deg);
}
.wcard-mark { position: absolute; left: 18px; top: 18px; height: 15px; }
.wcard-chip { position: absolute; left: 18px; top: 46%; width: 32px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, #efe2bd, #b49c62); }
.wcard-num { position: absolute; left: 18px; bottom: 16px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.85); }
.wcard-visa { position: absolute; right: 16px; bottom: 6px; width: 48px; height: 48px; fill: #fff; color: #fff; }

.wcard-balance { position: relative; z-index: 1; flex: none; width: 212px; padding: var(--s-4); }
@media (min-width: 30rem) {
  .wcard-scene { gap: var(--s-5); }
}
.wcard-balance .ui-title { margin-bottom: var(--s-2); }
.wcard-balance .mini-rows dd { font-size: 0.8125rem; }
.wcard-spend { display: flex; align-items: center; gap: 6px; margin-top: var(--s-3); color: var(--green); font-size: 0.75rem; font-weight: 500; }
.wcard-spend .i { width: 14px; height: 14px; }

.viz-ads .ui-card { max-width: 360px; }
.ads-head { display: flex; align-items: center; gap: var(--s-3); }
.ads-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ads-title b { font-weight: 600; }
.ads-title small { font-size: 0.75rem; color: var(--muted); }
.ads-budget { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; }
.ads-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line-strong);
  font-size: 0.8125rem;
  color: var(--muted);
}
.ads-pay {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  border: 1px solid var(--orange-tint);
  border-radius: 999px;
  background: var(--orange-wash);
  color: var(--ink);
  font-weight: 500;
}
.ads-pay .whop-mark { height: 10px; }

/* -------------------------------------------------------- inside WHMCS */

.pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--paper);
  counter-reset: none;
}
.pipe-step { position: relative; display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) var(--s-5); }
.pipe-step + .pipe-step { border-left: 1px solid var(--line); }

/* Connectors: an arrow on the line between two steps. */
.pipe-step + .pipe-step::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 34px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5' fill='none' stroke='%23111113' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.06);
}

.pipe-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
}
.pipe-label { min-height: 2.6em; margin-top: var(--s-4); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

.pipe-ui {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunken);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.pipe-label + .pipe-ui { margin-top: var(--s-5); }
.pu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.pu-row .whop-mark { height: 12px; }
.pu-row .whop-mark + b { margin-right: auto; }
.pu-amt { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pu-btn { align-self: flex-start; padding: 6px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 500; }
.pu-meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pipe-ui code {
  align-self: flex-start;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.pu-sync { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.pu-sync > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pu-sync code { padding: 0; border: 0; background: none; color: var(--muted); }
.pu-sync em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 70rem) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-step:nth-child(3) { border-left: 0; }
  .pipe-step:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .pipe-step:nth-child(3)::before { left: 50%; top: -15px; margin-left: -15px; transform: rotate(90deg); }
}
/* Phones: a vertical timeline. The numbers sit on one rail down the left, each step's
   words and UI beside its number. */
@media (max-width: 40rem) {
  .pipeline { grid-template-columns: minmax(0, 1fr); padding: var(--s-2) 0; }
  .pipe-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-4); padding: 10px var(--s-4); }
  .pipe-step + .pipe-step { border: 0; }
  .pipe-step + .pipe-step::before { content: none; }
  .pipe-step:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--s-4) + 13.5px); top: 46px; bottom: -10px; width: 1px; background: var(--line-strong); }
  .pipe-num { width: 28px; height: 28px; grid-row: 1 / 3; align-self: start; }
  .pipe-label { min-height: 0; margin-top: 3px; font-size: 1rem; }
  .pipe-label + .pipe-ui { margin-top: var(--s-2); }
  .pipe-ui { flex-flow: row wrap; align-items: center; padding: 10px 12px; gap: 6px 8px; }
  .pu-row, .pu-sync { flex: 1 1 100%; }
  .pu-amt { flex: 1; font-size: 1.0625rem; }
  .pu-btn { align-self: center; }
  .pu-sync { padding: 6px 10px; }
  .pu-sync > span { flex-direction: row; align-items: baseline; gap: var(--s-2); }
}

/* ----------------------------------------------------------------- setup */

.setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); }
.setup-step { display: flex; flex-direction: column; padding: var(--s-6) clamp(20px, 2.6vw, 32px); }
.setup-step + .setup-step { border-left: 1px solid var(--line); }
.setup-num { font-size: 3.5rem; font-weight: 300; letter-spacing: -0.06em; line-height: 1; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.setup-step h3 { margin-top: var(--s-5); font-size: 1.25rem; }
.setup-step > p { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-soft); }
.setup-step > p code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); font-size: 0.8125rem; }

.setup-ui { margin-top: auto; padding-top: var(--s-5); }
.setup-ui > * { font-size: 0.8125rem; }
.setup-ui {
  display: flex;
  flex-direction: column;
}
.su-files, .su-gw { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); }
.su-files li { display: flex; align-items: center; gap: var(--s-2); padding: 5px 2px; min-width: 0; }
.su-files .i { width: 15px; height: 15px; color: var(--muted); }
.su-files code { overflow: hidden; font-size: 0.75rem; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.su-gw { display: grid; gap: 6px; }
.su-gw li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-weight: 500; }
.su-label { font-family: var(--mono); font-size: 0.6875rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.su-field {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--paper);
  font-family: var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.su-field .i { width: 15px; height: 15px; color: var(--muted); }
.su-btn { align-self: flex-start; margin-top: 10px; padding: 8px 14px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 500; }

@media (max-width: 56rem) {
  .setup { grid-template-columns: minmax(0, 1fr); }
  .setup-step + .setup-step { border-left: 0; border-top: 1px solid var(--line); }
}
/* One column: the number beside the step. Phones drop the screen piece. */
@media (max-width: 56rem) {
  .setup-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-5); }
  .setup-num { grid-row: 1 / 4; font-size: 2.5rem; }
  .setup-step h3 { margin-top: 2px; }
  .setup-ui { max-width: 28rem; padding-top: var(--s-4); }
}
@media (max-width: 40rem) {
  .setup-step { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s-3); padding: 18px var(--s-4); }
  .setup-num { font-size: 2rem; }
  .setup-step h3 { font-size: 1.0625rem; }
  .setup-step > p { margin-top: 2px; font-size: 0.875rem; line-height: 1.5; }
  .setup-ui { display: none; }
}

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 22px 56px 22px 0;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.125rem; }
.faq summary:hover h3 { color: var(--orange-ink); }
.faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 30px;
  height: 30px;
  translate: 0 -50%;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat,
    var(--paper);
}
.faq details[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat, var(--paper);
}
.faq summary:focus-visible { outline-offset: 4px; }
.faq details > :not(summary) { max-width: 44rem; padding-bottom: 24px; color: var(--ink-soft); }
.faq details > :not(summary) strong { color: var(--ink); }
.faq details a { text-underline-offset: 3px; text-decoration-color: var(--orange); }
@media (max-width: 40rem) {
  .faq summary { padding: 14px 44px 14px 0; }
  .faq summary h3 { font-size: 1rem; }
  .faq summary::after { width: 28px; height: 28px; right: 0; }
  .faq details > :not(summary) { padding-bottom: 18px; font-size: 0.9375rem; }
}

/* ----------------------------------------------------------------- video */

/* A facade until play: the poster, one button over all of it, then the player in the same
   16:9 box (guides.js). The cue (the length, then the play disc) sits top right, in the band
   the tutorial title card leaves empty above its heading; --play-right and --play-top move
   it for a poster laid out otherwise. */
.video {
  --play-right: 14%;
  --play-top: 16%;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--sunken);
}
.video-poster,
.video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-poster { object-fit: cover; }
/* contain, not cover: the full-screen player keeps the whole frame on any screen. */
.video video { object-fit: contain; }
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-cue {
  position: absolute;
  right: var(--play-right);
  top: var(--play-top);
  display: flex;
  align-items: center;
  gap: clamp(8px, 2cqi, 12px);
}
.video-play-icon {
  display: grid;
  place-items: center;
  width: 64px;
  width: clamp(40px, 12cqi, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange-ink);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(201, 58, 16, 0.12), 0 14px 32px -12px rgba(17, 17, 19, 0.55);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.video-play-icon svg { width: 40%; height: 40%; margin-left: 8%; fill: currentColor; }
.video-play:hover .video-play-icon { background: var(--orange-deep); transform: scale(1.05); }
.video-play:focus-visible { outline: none; }
.video-play:focus-visible .video-play-icon { outline: 3px solid var(--orange-ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
/* The length, as a small UI piece: readable on a light or a dark poster. */
.video-time {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.75rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.06);
}
.video video:focus-visible { outline-offset: -3px; }
/* Without scripts the <noscript> player covers the poster and the button has nothing to do. */
html:not(.js) .video-play { display: none; }
@media (max-width: 30rem) {
  .video-time { padding: 1px 5px; font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .video-play-icon { transition: none; }
}

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--dark); color: var(--on-dark-muted); font-size: 0.875rem; }
.site-footer .wrap { padding-block: clamp(48px, 6vw, 80px) var(--s-6); border-color: var(--dark-line); }
.site-footer :focus-visible { outline-color: #fff; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--dark-line);
}
@media (min-width: 56rem) {
  .footer-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); }
}

.footer-brand .brand img { width: 44px; height: 44px; }
.footer-brand p { max-width: 24rem; margin-top: var(--s-4); line-height: 1.6; }

.footer-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-6); }
.footer-groups h2 {
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
}
.footer-groups ul { list-style: none; }
.footer-groups li + li { margin-top: 10px; }
.footer-groups a { color: var(--on-dark-muted); text-decoration: none; }
.footer-groups a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-links a { display: inline-flex; align-items: center; gap: 10px; }
.contact-links img { width: 16px; height: 16px; image-rendering: pixelated; }

.footer-bottom { display: grid; gap: var(--s-2); padding-top: var(--s-5); font-size: 0.75rem; line-height: 1.6; color: var(--footer-small); }
.footer-bottom a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.footer-bottom a:hover { color: #fff; }
.footer-disclosure { color: var(--on-dark-muted); }

@media (max-width: 40rem) {
  .site-footer .wrap { padding-block: 40px var(--s-5); }
  .footer-top { gap: var(--s-6); padding-bottom: var(--s-6); }
  .footer-brand { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .footer-brand .brand img { width: 40px; height: 40px; }
  .footer-brand p { margin-top: 0; font-size: 0.8125rem; }
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .footer-groups li + li { margin-top: 4px; }
  .footer-bottom { padding-top: var(--s-4); font-size: 0.6875rem; }
}

/* ------------------------------------------------------------ inner pages */

.page-head .wrap { padding-block: clamp(32px, 6vw, 88px) clamp(36px, 5vw, 64px); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.breadcrumb li + li::before { content: '/'; margin-right: 6px; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--ink); }

.page-head .eyebrow { margin-top: var(--s-7); }
.page-head .breadcrumb + .eyebrow, .page-head .eyebrow:first-child { margin-top: var(--s-6); }
.page-head h1 { max-width: 20ch; margin-top: var(--s-4); font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.25rem); }
.page-head .lede { max-width: 42rem; margin-top: var(--s-5); }
.page-head .lede strong { color: var(--ink); }

/* An article's byline under the lede: author, published, updated, reading time, joined by dots.
   A dot that would start a line falls outside the box and is clipped. */
.article-meta { overflow: hidden; margin-top: var(--s-5); padding-block: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.meta-list { display: flex; flex-wrap: wrap; gap: 2px 0; margin-left: -22px; }
.meta-list > span { position: relative; padding-left: 22px; }
.meta-list > span::before { content: '·'; content: '·' / ''; position: absolute; left: 8px; color: var(--line-strong); }
.article-meta a { color: var(--ink); font-weight: 500; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.page-body .wrap { padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-aside:empty { display: none; }
.page-toc { display: none; }

@media (min-width: 64rem) {
  .page-grid { grid-template-columns: 220px minmax(0, 46rem); gap: clamp(48px, 7vw, 120px); }
  .page-aside:empty { display: block; }
  .page-toc { position: sticky; top: calc(var(--header-h) + 32px); display: block; }
}

.page-toc strong {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-toc ul { list-style: none; border-left: 1px solid var(--line); }
.page-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}
.page-toc a:hover { border-left-color: var(--orange); color: var(--ink); }

.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.7; }
.prose strong { color: var(--ink); }
.prose h2 {
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.prose > h2:first-child { padding-top: 0; border-top: 0; }
.prose h2 + * { margin-top: 0.8em; }
.prose h3 { margin-top: 1.8em; font-size: 1.1875rem; }
.prose h3 + * { margin-top: 0.5em; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.25em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--orange-ink); }
.prose ol:not([class]) > li::marker { font-family: var(--mono); font-size: 0.875em; }
.prose a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-ink); }
.prose a.button { color: #fff; text-decoration: none; }
.prose a.button.secondary { color: var(--ink); }
.prose :not(pre) > code { padding: 0.12em 0.4em; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 0.86em; color: var(--ink); }
.prose .actions { margin-top: var(--s-6); }
.prose > .actions:first-child { margin-top: 0; }
.prose .actions + * { margin-top: var(--s-5); }
.prose .trust { color: var(--muted); line-height: 1.45; }
.prose .actions + .trust { margin-top: var(--s-3); }
.prose .trust + * { margin-top: var(--s-5); }

.article-table { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
.article-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.article-table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.article-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.article-table thead th {
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-table td { color: var(--ink-soft); }
.article-table td:first-child { color: var(--ink); font-weight: 500; }

.guide-figure { margin-top: var(--s-6); }
.guide-figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.guide-figure figcaption { margin-top: var(--s-3); font-size: 0.8125rem; color: var(--muted); }
.guide-image-trigger { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); background: none; cursor: zoom-in; }

.guide-image-dialog { max-width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.guide-image-dialog::backdrop { background: rgba(15, 16, 18, 0.82); }
.guide-image-dialog img { max-height: 88vh; border-radius: 10px; }
.guide-image-close {
  position: absolute;
  top: -48px;
  right: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9px;
  background: var(--dark);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}
.guide-image-close:focus-visible { outline-color: #fff; }
html.guide-image-open { overflow: hidden; }

.checksum { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.checksum code { color: var(--ink-soft); }

.release { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); background: var(--paper); }
.prose > .release + .release, .prose .release + .release { margin-top: var(--s-4); }
.prose .release h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.release-date { margin-top: 6px !important; font-family: var(--mono); font-size: 0.75rem; color: var(--muted) !important; }
.release > * + * { margin-top: 0.9em; }
.release ul { padding-left: 1.25em; }

.partner { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); background: var(--paper); }
.partner-badge { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.partner-badge svg { width: 18px; height: 18px; }
.prose .partner p { margin: 0; }
.partner-disclosure { font-size: 0.8125rem; color: var(--muted) !important; }

/* Related pages ({{related}}, {{siblings}}): a framed grid of link cards under a mono label. */
.related-guides { border: 1px solid var(--line); background: var(--paper); }
.related-guides strong {
  display: block;
  padding: 12px var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.related-guides ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; padding-left: 0 !important; background: var(--line); list-style: none; }
.prose .related-guides li { position: relative; margin: 0; padding: 18px var(--s-5); background: var(--paper); }
.related-guides li:hover { background: #fffcfa; }
.prose .related-guides a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--ink); font-weight: 500; text-decoration: none; }
.related-guides a::after { content: ''; position: absolute; inset: 0; }
.related-guides li:focus-within { outline: 2px solid var(--orange-ink); outline-offset: -2px; }
.related-guides a:focus-visible { outline: none; }
.related-go { width: 18px; height: 18px; color: var(--line-strong); transition: color 0.2s ease, transform 0.2s ease; }
.related-guides li:hover .related-go { color: var(--orange-ink); transform: translateX(3px); }
.related-guides span { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }

/* Comparison tables ({{gateway-table}}, {{gateway-overview}}): criteria as rows, gateways as
   columns, the first (Whop's) highlighted. Narrow articles stack each row (see below). */
.compare { border: 1px solid var(--line); background: var(--paper); }
.compare table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.compare :is(th, td) { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
.compare thead :is(th, td) { background: var(--sunken); font-size: 1rem; font-weight: 600; color: var(--ink); }
.compare thead .lead { background: var(--orange-wash); box-shadow: inset 0 3px 0 var(--orange); }
.compare thead a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.compare .th-mark { display: inline-block; height: 13px; margin-right: 8px; vertical-align: -1px; }
.compare tbody th { width: 26%; font-weight: 500; color: var(--ink); }
.compare td { color: var(--ink-soft); }
.compare .lead { background: var(--orange-wash); color: var(--ink); }

.fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.fee-group { padding: var(--s-5); background: var(--paper); }
.fee-group h3 { margin: 0; font-size: 1.0625rem; }
.fee-group p { margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.fee-group dl div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0; border-bottom: 1px dashed var(--line-strong); font-size: 0.875rem; }
.fee-group dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.verified { font-size: 0.8125rem; color: var(--muted); }

.cost-model { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); background: var(--paper); }
.cost-model label { display: grid; gap: 4px; font-size: 0.8125rem; color: var(--muted); }
.cost-model input { height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); }
.cost-inputs, .cost-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); }
.cost-quotes fieldset { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: 10px; }
.cost-results { font-weight: 500; }

/* --------------------------------------------------- alternatives articles */

/* `type: article`. The header: the intro (breadcrumb, eyebrow, two-tone h1, lede, byline) and
   the verdict card, beside it on wide screens in the text-column width, under it otherwise.
   The body: the numbered contents list (sticky on wide screens, a framed box above the article
   otherwise) and the article, whose paragraphs keep reading width while its components (the
   ranking, the tables, the cards, the steps) take the column's full width. The article column
   is a container, so those components switch to their stacked forms by the room they have. */

.page-head.has-verdict .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-7); align-items: start; }
.page-head.has-verdict .breadcrumb { grid-column: 1 / -1; }
.page-head.has-verdict .page-intro > :first-child { margin-top: 0; }
.page-head.has-verdict .verdict { margin-top: var(--s-2); }
@media (min-width: 64rem) {
  .page-head.has-verdict .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); column-gap: clamp(40px, 5vw, 80px); }
  .page-head.has-verdict .verdict { margin-top: 0; }
}

.verdict {
  container: verdict / inline-size;
  display: grid;
  gap: var(--s-4);
  max-width: 46rem;
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  box-shadow: inset 0 3px 0 var(--orange), var(--shadow);
}
.verdict-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.verdict-rank { display: inline-flex; align-items: center; gap: 10px; }
.verdict-rank::after { content: ''; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.verdict-title { display: flex; align-items: baseline; gap: 12px; font-size: 1.5rem; font-weight: 450; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.verdict-mark { height: 0.62em; translate: 0 0.02em; }
.verdict-reason { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
.verdict-facts { display: grid; border-top: 1px solid var(--line); }
.verdict-facts > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); }
.verdict-facts dt { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.verdict-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.verdict-facts b { font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.verdict-facts dd span { font-size: 0.8125rem; color: var(--muted); }
.verdict-cta { padding-top: var(--s-1); }
.verdict-cta .actions { align-items: center; gap: var(--s-3) var(--s-5); }
.verdict-cta .text-link { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; }
.verdict-cta .trust { margin-top: var(--s-3); }
.verdict-disclosure { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
/* A verdict as wide as a tablet: the three facts side by side. */
@container verdict (min-width: 36rem) {
  .verdict-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .verdict-facts > div { padding: 12px 16px 12px 0; border-bottom: 0; }
  .verdict-facts > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
  .verdict-facts dd { flex-direction: column; gap: 2px; }
}

/* The body: contents beside the article on wide screens, a framed box above it otherwise. */
@media (min-width: 64rem) {
  .article-page .page-grid { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); }
}
.article-page .page-toc { display: block; }
.article-page .page-toc ul { counter-reset: toc; }
.article-page .page-toc li { counter-increment: toc; }
.article-page .page-toc a { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); }
.article-page .page-toc a::before {
  content: counter(toc, decimal-leading-zero);
  content: counter(toc, decimal-leading-zero) / '';
  padding-top: 1px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.article-page .page-toc a:hover::before { color: var(--orange-ink); }
@media (max-width: 63.99rem) {
  .article-page .page-aside { margin-bottom: var(--s-7); }
  .article-page .page-toc { padding: var(--s-4) var(--s-5) var(--s-3); border: 1px solid var(--line); background: var(--paper); }
  .article-page .page-toc ul { border-left: 0; }
  .article-page .page-toc a { margin-left: 0; padding: 8px 0; border-left: 0; border-top: 1px dashed var(--line); }
  .article-page .page-toc li:first-child a { border-top: 0; }
}

/* With scripts, the contents list above an article folds into one row: "On this page", the
   number of sections and a chevron. It opens in place (the page's data-menu toggle) and
   closes on a link, a click elsewhere or Escape. Beside the article it is never folded. */
.toc-toggle { display: none; }
@media (max-width: 63.99rem) {
  html.js .article-page .page-aside { margin-bottom: var(--s-5); }
  html.js .article-page .page-toc { padding: 0; }
  html.js .article-page .page-toc > strong { display: none; }
  html.js .article-page .toc-toggle {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--s-4) 0 var(--s-5);
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }
  html.js .article-page .toc-toggle:focus-visible { outline-offset: -3px; }
  html.js .article-page .toc-toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    margin: -3px 4px 0 0;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    rotate: 45deg;
  }
  html.js .article-page .page-toc.is-open .toc-toggle::after { margin-top: 4px; rotate: -135deg; }
  .toc-count { margin-left: auto; color: var(--muted); letter-spacing: 0.04em; text-transform: none; }
  html.js .article-page .page-toc:not(.is-open) ul { display: none; }
  html.js .article-page .page-toc ul { padding: 0 var(--s-5) var(--s-2); border-top: 1px solid var(--line); }
}

.article-page .prose { container: article / inline-size; max-width: none; counter-reset: section; }
.article-page .prose > :is(p, ul:not([class]), ol:not([class]), blockquote, h3) { max-width: 44rem; }
.article-page .prose > :is(.pains, .ranking, .modules, .compare, .steps, .versus, .faq, .related-guides) { margin-top: var(--s-6); }

/* Each ## opens a numbered section: its number sits on the hairline above it, as in the
   contents list. The number is decoration; screen readers skip it. */
.article-page .prose > h2 {
  counter-increment: section;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.article-page .prose > h2::before {
  content: counter(section, decimal-leading-zero);
  content: counter(section, decimal-leading-zero) / '';
  display: block;
  margin-bottom: var(--s-5);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--orange-ink);
  background: linear-gradient(var(--line), var(--line)) right 50% / calc(100% - 3.25em) 1px no-repeat;
}
.article-page .prose > h2:first-child { margin-top: 0; }
.article-page .prose > h2 + p { margin-top: var(--s-4); }
.article-page .prose > h3 { margin-top: var(--s-7); font-size: 1.25rem; }
.prose .sources { color: var(--muted); }
.prose .sources a { color: var(--ink-soft); text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; }
.prose .sources a:hover { color: var(--orange-ink); text-decoration-color: currentColor; }
.article-page .prose > .closing { margin-top: clamp(48px, 6vw, 80px); }

/* Components that sit inside the prose keep their own spacing, not the prose's. */
.prose .rank-list > li { margin: 0; }
.prose .rank-head h3 { margin: 0; }
.prose .rank-head p { margin-top: 2px; line-height: 1.5; }
.prose .rank p.rank-action { margin: 0; }

/* {{versus}}: two framed columns side by side, Whop's first with the orange edge. */
.versus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.vs-side { padding: var(--s-5); background: var(--paper); }
.vs-side.is-whop { box-shadow: inset 0 3px 0 var(--orange); }
.prose .vs-side h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 1.1875rem; }
.vs-mark { flex: none; height: 12px; }
.prose .vs-side ul { margin-top: var(--s-3); padding-left: 0; list-style: none; }
.prose .vs-side li { position: relative; margin: 0; padding: 10px 0 10px 26px; border-top: 1px dashed var(--line-strong); font-size: 0.9375rem; line-height: 1.55; }
.prose .vs-side li:first-child { border-top: 0; }
.prose .vs-side li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); rotate: -45deg; }
.prose .vs-side:not(.is-whop) li::before { border-color: var(--muted); }
@container article (min-width: 40rem) {
  .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A callout: a `>` blockquote in an article. */
.prose blockquote { padding: 16px 20px 16px 22px; border: 1px solid var(--orange-tint); border-left: 3px solid var(--orange); background: var(--orange-wash); }
.prose blockquote p { color: var(--ink); }
.prose blockquote p + p { margin-top: 0.6em; }

/* {{pain-points}}: numbered framed cards, two across when there is room. Each ends with its
   source, then a footer with Whop's mark: how Whop compares. */
.pains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.prose .pains > li { display: flex; flex-direction: column; margin: 0; padding: var(--s-5) var(--s-5) 0; background: var(--paper); }
.prose .pain-num { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--orange-ink); }
.prose .pain h3 { margin-top: var(--s-3); font-size: 1.1875rem; line-height: 1.25; }
.prose .pain h3 + p { margin-top: var(--s-2); }
.prose .pain > p:not([class]) { font-size: 0.9375rem; line-height: 1.6; }
.prose .pain-source { margin-top: var(--s-3); font-family: var(--mono); font-size: 0.6875rem; line-height: 1.6; color: var(--muted); }
.pain-source span { color: var(--muted); }
.prose .pain-source a { color: var(--ink-soft); text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; }
.prose .pain-source { margin-bottom: var(--s-5); }
.prose .pain-whop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto calc(-1 * var(--s-5)) 0;
  padding: 14px var(--s-5) 16px;
  border-top: 1px solid var(--line);
  background: var(--orange-wash);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}
.pain-mark { flex: none; height: 11px; translate: 0 1px; }
@container article (min-width: 40rem) {
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .pains > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* {{steps}}: numbered steps on one rail, the number large and light like the setup steps. */
.steps { border: 1px solid var(--line); background: var(--paper); }
.prose .steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-4); margin: 0; padding: var(--s-5); }
.prose .steps > li + li { border-top: 1px solid var(--line); }
.step-num { font-size: 2.5rem; font-weight: 300; letter-spacing: -0.06em; line-height: 1; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.step-text { max-width: 42rem; }
.prose .step-text h3 { margin-top: 2px; font-size: 1.125rem; }
.prose .step-text > p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; }
.prose .step-text > p + p { margin-top: 0.6em; }

/* {{whmcs-modules}}: the modules WHMCS ships. Wide: one table, status chips per version and
   marks per feature; each module's data and note on a second line across the row. */
.modules-frame { border: 1px solid var(--line); background: var(--paper); }
.modules-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; }
.modules-table :is(th, td) { padding: 12px 10px; text-align: left; vertical-align: middle; }
.modules-table thead th {
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
}
.modules-table thead .mod-groups th { padding-bottom: 4px; border-bottom: 0; color: var(--ink-soft); }
.modules-table thead .mod-groups th[rowspan] { vertical-align: bottom; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.modules-table thead .mod-groups th[colspan] { text-align: center; }
.modules-table :is(th, td):first-child { padding-left: var(--s-5); }
.modules-table :is(th, td):last-child { padding-right: var(--s-5); }
.modules-table .mod-status { width: 7.5rem; text-align: center; }
.modules-table .mod-mark { width: 5.25rem; text-align: center; }
.modules-table .mod-main:not(:first-child) > * { border-top: 1px solid var(--line); }
.modules-table .mod-main > * { padding-top: 16px; padding-bottom: 6px; }
.modules-table tbody th { font-weight: 400; }
.mod-name { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.mod-type { display: inline-block; margin-top: 4px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; line-height: 1.6; color: var(--ink-soft); vertical-align: 1px; white-space: nowrap; }
.modules-table .mod-more td { padding-top: 0; padding-bottom: 16px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.mod-data { color: var(--ink-soft); }
.mod-data .i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; color: var(--muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.chip .i { width: 12px; height: 12px; }
.chip.is-recommended { border-color: var(--orange-tint); background: var(--orange-wash); color: var(--orange-ink); }
.chip.is-deprecated { border-color: var(--line); background: var(--sunken); color: var(--no); }
.chip.is-deprecated .i { width: 11px; height: 11px; }
.chip.is-absent { border-style: dashed; background: transparent; color: var(--muted); }

.mk { display: inline-grid; justify-items: center; gap: 2px; }
.mk .i { width: 18px; height: 18px; }
.mk.is-yes { color: var(--green); }
.mk.is-no { color: var(--muted); }
.mk.is-no .i { width: 15px; height: 15px; }
.mk.is-part { color: var(--ink-soft); }
.mk small { font-size: 0.6875rem; line-height: 1.25; color: var(--ink-soft); }

.modules-notes { margin-top: var(--s-3); }
.prose .modules-notes li { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }
.prose .modules-notes li + li { margin-top: 4px; }
.modules .sources { margin-top: var(--s-3); }

/* {{closing}}: the article's close, as the home page closes: the logo tile, a two-tone line,
   the download buttons and the trust line, centred in a framed, dotted panel. */
.closing { padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); border: 1px solid var(--line); background: var(--dots) 0 0 / 16px 16px, var(--sunken); text-align: center; }
.closing::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-5);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper) url(/images/logo.svg) center / 34px no-repeat;
  image-rendering: pixelated;
  box-shadow: var(--shadow);
}
.prose .closing-title { max-width: 18em; margin: 0 auto; padding: 0; border: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.08; }
.prose .closing > p:not(.actions, .trust) { max-width: 34rem; margin: var(--s-4) auto 0; }
.prose .closing .actions { justify-content: center; margin-top: var(--s-6); }
.prose .closing .trust { justify-content: center; margin-top: var(--s-3); }

/* FAQ questions inside an article keep the accordion's own spacing. */
.prose .faq summary h3 { margin: 0; }
.prose .faq details > p { margin-top: 0; }

/* The ranking in an article column: its own column widths, and the stacked cards when the
   column is narrow, whatever the window. */
.article-page .ranking { --rank-cols: 32px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.article-page .rank, .article-page .rank-labels { padding-inline: var(--s-4); gap: var(--s-3); }
.article-page .rank-action .button { padding: 0 14px; }
@container article (max-width: 52rem) {
  .rank-labels { display: none; }
  .rank { grid-template-columns: 28px minmax(0, 1fr); gap: 0; padding: 14px var(--s-4) 12px; }
  .rank-num { align-self: start; padding-top: 3px; }
  .rank-head h3 { font-size: 1.0625rem; }
  .rank-head p { font-size: 0.8125rem; line-height: 1.45; }
  .rank dl { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); margin-top: 10px; padding-top: 3px; border-top: 1px dashed var(--line-strong); }
  .rank dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-3); padding: 5px 0 0; }
  .rank dt { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; padding-top: 2px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
  .rank dd { font-size: 0.875rem; line-height: 1.45; }
  .rank.is-top dl { border-color: var(--orange-tint); }
  .rank-action { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
  .rank-action .button { min-height: 44px; }
}
@container article (max-width: 30rem) {
  .rank-action { justify-self: stretch; }
  .rank-action .button { width: 100%; }
  .rank dl > div { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* "Show all" under a long table (the comparison, a modules table with many modules). On a
   phone, with scripts, an article starts with the first rows; the button shows the rest in
   place. Without scripts, or on a wider screen, every row shows and the button doesn't. */
.table-more { display: none; }
@media (max-width: 40rem) {
  html.js .article-page .is-collapsible.is-collapsed .is-more { display: none; }
  html.js .article-page .is-collapsible .table-more { display: block; margin-top: -1px; border-top: 1px solid var(--line); }
}
.table-more button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s-4);
  border: 0;
  background: var(--sunken);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.table-more button::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.table-more button[aria-expanded='true']::after { rotate: 180deg; }
.table-more button:hover { background: var(--orange-wash); }
.table-more button:focus-visible { outline-offset: -4px; }

/* Narrow articles: the comparison stacks each criterion into a heading and one line per
   gateway, the gateway's name run in before its value so the value takes the full width; the
   modules table stacks each module into a card. Both keep their table roles. */
@container article (max-width: 40rem) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare :is(table, tbody, tr, th, td) { display: block; width: auto; }
  .compare tbody tr { padding: 10px var(--s-3) 12px; border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody :is(th, td) { padding: 0; border: 0; }
  .compare tbody th { width: auto; margin-bottom: 4px; padding-inline: 8px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; color: var(--muted); }
  .compare tbody td { padding: 5px 8px; font-size: 0.8125rem; line-height: 1.5; }
  .compare tbody td + td { margin-top: 2px; }
  .compare tbody td::before { content: attr(data-gateway); margin-right: 0.45em; font-weight: 600; color: var(--ink); }
}
@container article (max-width: 50rem) {
  .modules-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .modules .modules-table, .modules .modules-table tbody { display: block; width: 100%; }
  .modules .modules-table :is(tr, th, td) { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  /* One card per module: the name, the version chips, then (on a line of their own) the marks,
     then where the data lives and the note. */
  .modules .modules-table tr.mod-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px var(--s-4) 12px; }
  .modules .modules-table tr.mod-main:not(:first-child) { border-top: 1px solid var(--line); }
  .modules .modules-table tr.mod-main:not(:first-child) > * { border-top: 0; }
  .modules .modules-table tr.mod-main::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .modules .modules-table tr.mod-main > th { flex-basis: 100%; order: 0; }
  .modules .modules-table tr.mod-main > .mod-status { display: inline-flex; align-items: center; gap: 6px; order: 1; }
  .modules .modules-table tr.mod-main > .mod-status::before { content: attr(data-label); font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
  .modules .modules-table tr.mod-main > .mod-mark { display: inline-flex; align-items: center; gap: 5px; order: 3; font-size: 0.8125rem; color: var(--ink-soft); }
  .modules .modules-table tr.mod-main > .mod-mark::after { content: attr(data-label); }
  .modules .modules-table tr.mod-main > .mod-mark:has(.is-no)::after { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
  .modules .modules-table tr.mod-main > .mod-mark:has(.is-part)::after { content: none; }
  .modules .modules-table tr.mod-main > .mod-mark:has(.is-part)::before { content: attr(data-label) ':'; }
  .modules .modules-table tr.mod-main > .mod-mark:has(.is-part) .i { display: none; }
  .modules .modules-table tr.mod-more > td { padding: 0 var(--s-4) 16px; }
  .modules .mk { display: inline-flex; align-items: center; gap: 4px; }
  .modules .mk .i { width: 15px; height: 15px; }
  .modules .mk.is-no .i { width: 13px; height: 13px; }
  .modules .mk small { font-size: 0.75rem; }
}

/* Phones: the same article, denser. Tighter section spacing, 15 px prose, smaller card text,
   the pain number beside its title, each step's text under its number and title at full
   width, and smaller closing and related panels, so an article stays about as tall as the
   home page. Nothing is hidden. */
@media (max-width: 40rem) {
  .article-page .page-head .breadcrumb + .eyebrow { margin-top: var(--s-5); }
  .article-page .page-head h1 { margin-top: var(--s-3); }
  .article-page .page-head .lede { margin-top: var(--s-4); font-size: 1rem; line-height: 1.55; }
  .article-page .article-meta { margin-top: var(--s-3); font-size: 0.8125rem; }
  .article-page .page-head .wrap { padding-bottom: 28px; }
  .article-page .page-body .wrap { padding-block: 20px var(--s-7); }

  .verdict { gap: var(--s-3); padding: var(--s-4); }
  .verdict-title { font-size: 1.1875rem; }
  .verdict-reason { font-size: 0.875rem; line-height: 1.5; }
  .verdict-facts > div { padding: 7px 0; }
  .verdict-facts b { font-size: 0.9375rem; }
  .verdict-facts dd span { font-size: 0.75rem; line-height: 1.45; }
  .verdict-cta { padding-top: 0; }
  .verdict-cta .actions { gap: var(--s-2) var(--s-5); }
  .verdict-cta .actions .button { flex: 1 1 100%; }
  .verdict-disclosure { margin-top: var(--s-2); padding-top: var(--s-2); }

  .article-page .prose > :is(p:not([class]), blockquote), .article-page .prose > :is(ul, ol):not([class]) > li { font-size: 0.9375rem; line-height: 1.58; }
  .article-page .prose > * + * { margin-top: 0.85em; }
  .article-page .prose > h2 { margin-top: 40px; font-size: 1.5rem; }
  .article-page .prose > h2::before { margin-bottom: var(--s-3); }
  .article-page .prose > h2 + p { margin-top: var(--s-3); }
  .article-page .prose > h3 { margin-top: 28px; font-size: 1.125rem; }
  .article-page .prose > h3 + * { margin-top: var(--s-2); }
  .article-page .prose > :is(ul, ol):not([class]) > li + li { margin-top: 0.35em; }
  .article-page .prose > :is(.pains, .ranking, .modules, .compare, .steps, .versus, .faq, .related-guides) { margin-top: var(--s-5); }
  .article-page .prose > .closing { margin-top: var(--s-6); }
  .prose blockquote { padding: 12px 14px 12px 16px; }
  .prose blockquote p { line-height: 1.55; }

  .prose .pains > li { position: relative; padding: 14px var(--s-4) 0; }
  .prose .pain-num { position: absolute; top: 17px; right: var(--s-4); }
  .prose .pain h3 { margin-top: 0; padding-right: 2.5rem; font-size: 1.0625rem; }
  .prose .pain > p:not([class]) { font-size: 0.875rem; line-height: 1.5; }
  .prose .pain-source { margin-block: var(--s-2) var(--s-3); }
  .prose .pain-whop { margin-inline: calc(-1 * var(--s-4)); padding: 9px var(--s-4) 10px; font-size: 0.8125rem; line-height: 1.45; }

  .article-page .rank { padding: 11px var(--s-4) 9px; }
  .article-page .rank dl { margin-top: 8px; }
  .article-page .rank dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-2); padding-top: 2px; }
  .article-page .rank dd { font-size: 0.8125rem; }
  .article-page .rank-action { margin-top: 10px; }

  .article-page .modules .modules-table tr.mod-main { gap: 6px 12px; padding: 12px var(--s-4) 8px; }
  .article-page .modules .modules-table .mod-name { display: inline; margin-right: 6px; }
  .article-page .modules .mod-type { margin-top: 0; }
  .article-page .modules .chip { padding: 2px 8px; font-size: 0.6875rem; }
  .article-page .modules .modules-table tr.mod-more > td { padding: 0 var(--s-4) 12px; font-size: 0.78125rem; line-height: 1.45; }
  .prose .modules-notes li { font-size: 0.8125rem; }

  .vs-side { padding: var(--s-4); }
  .prose .vs-side h3 { font-size: 1.0625rem; }
  .prose .vs-side ul { margin-top: var(--s-2); }
  .prose .vs-side li { padding: 7px 0 7px 24px; font-size: 0.875rem; line-height: 1.45; }
  .prose .vs-side li::before { top: 13px; }

  .article-table :is(th, td) { padding: 9px 12px; }

  .prose .steps > li { grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s-2); padding: 12px var(--s-4) 13px; }
  .prose .steps .step-text { display: contents; }
  .step-num { grid-row: 1; font-size: 1.375rem; line-height: 1.1; }
  .prose .step-text h3 { grid-column: 2; margin-top: 0; font-size: 1rem; line-height: 1.35; }
  .prose .step-text > p { grid-column: 1 / -1; margin-top: 4px; font-size: 0.875rem; line-height: 1.5; }

  .article-page .faq summary { padding-block: 12px; }
  .article-page .faq details > p { line-height: 1.6; }

  .related-guides strong { padding: 10px var(--s-4); }
  .prose .related-guides li { padding: 10px var(--s-4) 11px; }
  .related-guides span { font-size: 0.8125rem; line-height: 1.45; }

  .closing { padding: 28px var(--s-4); }
  .closing::before { width: 40px; height: 40px; margin-bottom: var(--s-3); border-radius: 10px; background-size: 24px; }
  .prose .closing-title { font-size: 1.375rem; }
  .prose .closing > p:not(.actions, .trust) { margin-top: var(--s-3); font-size: 0.875rem; line-height: 1.5; }
  .prose .closing .actions { margin-top: var(--s-5); }
  .closing .actions .button { flex: 1 1 100%; }
}

/* ------------------------------------------- country and currency lists */

/* `wide: true` pages: the article takes the frame's width; its prose stays at reading width. */
.page-wide .page-grid { grid-template-columns: minmax(0, 1fr); }
.page-wide .prose { max-width: none; }
.page-wide .prose > :is(p, ul:not([class]), ol:not([class])) { max-width: 46rem; }

/* The summary strip at the top: big numbers in a framed row, the first one in orange. */
.list-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); }
.list-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: var(--s-5) clamp(16px, 3vw, 32px); }
.list-stats > div + div { border-left: 1px solid var(--line); }
.list-stats dd { font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.list-stats > div:first-child dd { color: var(--orange-ink); }
.list-stats dt { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }

/* The list: search and filter chips (scripts only), then groups of dense columns. */
.clist { border: 1px solid var(--line); background: var(--paper); }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-4); border-bottom: 1px solid var(--line); background: var(--sunken); }
html:not(.js) .list-tools { display: none; }
.prose .list-tools p { margin: 0; }
.list-search { position: relative; flex: 1 1 18rem; max-width: 30rem; }
.list-search .i { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.list-search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.list-search input::placeholder { color: var(--muted); opacity: 1; }
.list-search input:focus { outline: 2px solid var(--orange-ink); outline-offset: 1px; border-color: transparent; }
.list-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.list-chips button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.list-chips button:hover { border-color: var(--ink); color: var(--ink); }
.list-chips button span { padding: 1px 7px; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
.list-chips button[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: #fff; }
.list-chips button[aria-pressed='true'] span { background: rgba(255, 255, 255, 0.14); box-shadow: none; color: #fff; }

.list-group[hidden] { display: none; }
.list-group + .list-group { border-top: 1px solid var(--line); }
.prose .list-group h3 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-4) var(--s-4) 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.list-group h3 span { color: var(--muted); }
.prose .clist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0 var(--s-5);
  margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-4);
}
.prose .clist-grid li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--line); line-height: 1.25; }
.clist-grid li[hidden] { display: none; }
.clist-grid img { flex: none; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.08); }
.ci-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-name { font-size: 0.875rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.ci-name b { margin-right: var(--s-2); font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; }
.ci-name sup { color: var(--orange-ink); }
.ci-tag { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-ink); }
.ci-tag.is-both { color: var(--muted); }
.prose .clist :is(.list-empty, .list-foot) { margin: 0; padding: var(--s-3) var(--s-4); font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.prose .clist .list-foot { border-top: 1px solid var(--line); background: var(--sunken); }
.prose .clist .list-foot sup { color: var(--orange-ink); }

/* Where a business can't be based: framed groups of chips, the sanctions list across the top. */
.xlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.xgroup { padding: var(--s-5); background: var(--paper); }
.xgroup:first-child { grid-column: 1 / -1; }
.prose .xgroup h3 { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: 1rem; }
.xgroup h3 span { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.prose .xgroup p { margin-top: var(--s-3); font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.prose .excluded { padding: 0; }
.prose .excluded li { margin: 0; line-height: 1.4; color: var(--ink-soft); }

/* Codes the module doesn't accept: one framed row each. */
.prose .xrows { border: 1px solid var(--line); background: var(--paper); }
.prose .xrows li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin: 0; padding: 14px var(--s-4); border-top: 1px solid var(--line); line-height: 1.5; }
.prose .xrows li:first-child { border-top: 0; }
.xrows b { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.xrows span { font-size: 0.875rem; color: var(--muted); }

@media (max-width: 40rem) {
  .list-stats > div { padding: var(--s-4) 10px; }
  .list-stats dd { font-size: 1.875rem; }
  .list-stats dt { font-size: 0.6875rem; }
  .list-tools { padding: var(--s-3); gap: var(--s-3); }
  .list-search { flex-basis: 100%; max-width: none; }
  .list-search input { height: 44px; }
  .list-chips button { min-height: 36px; padding: 0 10px; font-size: 0.8125rem; }
  .prose .clist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); padding: var(--s-1) var(--s-3) var(--s-3); }
  .prose .list-group h3 { padding: var(--s-3) var(--s-3) 0; }
  .prose .clist-grid li { gap: 8px; min-height: 44px; }
  .clist-grid img { width: 18px; height: 13.5px; }
  .ci-name { font-size: 0.8125rem; }
  .ci-tag { font-size: 0.625rem; }
  .xlist { grid-template-columns: minmax(0, 1fr); }
  .xgroup { padding: var(--s-4); }
  .prose .xrows li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px var(--s-3); }
}

/* -------------------------------------------------------- motion off */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}