/* ============================================================================
   payeer.online — Payeer theme layer (site-wide).

   Loaded by every public page, always AFTER /css/light-theme.css, and scoped
   to body.pe-theme so it cannot reach the merchant portal or the checkout,
   which carry their own copy of these tokens.

   SPECIFICITY
   light-theme.css writes rules as deep as
   `html[data-theme="light"] body.site-dark .contact-form .form-group select`.
   Repeating the scope class puts every rule here above those without needing
   !important or edits to the shared stylesheets.

   COLOURS — sampled from the legacy payeer.com screens
     logo "PAY"      #000000     logo "EER"   #64B3DF   <- the brand blue
     marketing navy  #192B45     auth navy    #042553
     navy glow       #14417B     CTA green    #2ECC06
     balance cards   #76C46F  #3DBEF0  #F28A49  #6589A4

   COLOURS — derived, because the sampled ones fail contrast
     --cyan #1F6E9E  the brand blue is 2.2:1 on white, so text and icons on a
                     white surface use this darker step of the same hue
                     (5.6:1). #64B3DF stays for navy grounds, where it is 6.1:1.
     green CTA       keeps full strength with a near-black label (9.3:1);
                     white on it is 2.2:1, as it was on payeer.com too.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens -- */

html body.pe-theme.pe-theme.pe-theme {
  /* dark is the default state on this site (data-theme is absent) */
  --pe-navy: #08111e;
  --pe-navy-deep: #050b14;
  --pe-navy-glow: #0d2645;
  --pe-sky: #7bc2e8;
  --pe-green: #3fde18;
  --pe-green-dark: #34c012;
  --pe-green-label: #06210a;
  --pe-on-navy: #e8f0f7;
  --pe-on-navy-2: #9fb4c8;
  --pe-navy-rule: rgba(255, 255, 255, 0.11);
  --pe-navy-rule-hi: rgba(255, 255, 255, 0.28);

  --pe-c-usd: #4f9a49;
  --pe-c-eur: #2a8fbe;
  --pe-c-btc: #c2732f;
  --pe-c-eth: #5c7d95;

  --bg: #0b0e13;
  --bg2: #12171e;
  --bg3: #1a212a;
  --surface: #141c27;
  --surface2: #1b2532;
  --card: #141c27;
  --border: #232e3d;
  --border2: #334152;
  --cyan: #7bc2e8;
  --green: #46c69c;
  --gold: #ddb166;
  --purple: #9985ff;
  --red: #f0897c;
  --text: #e7eef5;
  --muted: #8595a6;
  --muted2: #7d8b9c;   /* captions need to clear AA on the dark grounds too */
  --white: #ffffff;
  --gradient: linear-gradient(180deg, #3fde18, #3fde18);
  --gradient2: linear-gradient(180deg, #7bc2e8, #7bc2e8);

  --pe-font: Figtree, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans Arabic', 'Noto Sans Bengali', sans-serif;
  --pe-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* the --seo-* set, shared by nav.css and every sibling page */
  --seo-bg: #0b0e13;
  --seo-bg2: #12171e;
  --seo-bg3: #1a212a;
  --seo-surface: #141c27;
  --seo-surface2: #1b2532;
  --seo-border: #232e3d;
  --seo-border2: #334152;
  --seo-cyan: #7bc2e8;
  --seo-green: #46c69c;
  --seo-text: #e7eef5;
  --seo-muted: #8595a6;
  --seo-muted2: #64758a;
  --seo-white: #ffffff;
  --seo-heading: #ffffff;
  --seo-code-bg: #12171e;
  --seo-gradient: linear-gradient(180deg, #3fde18, #3fde18);

  /* style.css keeps its own names; --accent-color used to be a #ff6b35 orange */
  --primary-color: #7bc2e8;
  --secondary-color: #3fde18;
  --accent-color: #3fde18;
  --text-dark: #e7eef5;
  --text-light: #8595a6;
  --bg-light: #12171e;
  --bg-white: #0b0e13;
  --border-color: #232e3d;
  --success-color: #46c69c;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 54px -24px rgba(0, 0, 0, 0.85);
}

html[data-theme='light'] body.pe-theme.pe-theme.pe-theme {
  --pe-navy: #192b45;
  --pe-navy-deep: #0f1e33;
  --pe-navy-glow: #14417b;
  --pe-sky: #64b3df;
  --pe-green: #2ecc06;
  --pe-green-dark: #26ac05;
  --pe-green-label: #08290a;
  --pe-on-navy: #e8f0f7;
  --pe-on-navy-2: #9fb4c8;

  --pe-c-usd: #357f2e;
  --pe-c-eur: #1b7ea8;
  --pe-c-btc: #b85a17;
  --pe-c-eth: #4a6479;

  --bg: #ffffff;
  --bg2: #f2f6f9;
  --bg3: #e7eef4;
  --surface: #ffffff;
  --surface2: #f2f6f9;
  --card: #ffffff;
  --border: #e1e9ef;
  --border2: #c6d4df;
  --cyan: #1f6e9e;
  --green: #0f7a3c;
  --gold: #8a5a05;
  --purple: #5b46b8;
  --red: #b32218;
  --text: #14202e;
  --muted: #5a6d80;
  --muted2: #64758a;   /* #97A8B7 was 2.4:1 on white and carries captions */
  --white: #0e1319;
  --gradient: linear-gradient(180deg, #2ecc06, #2ecc06);
  --gradient2: linear-gradient(180deg, #1f6e9e, #1f6e9e);

  --seo-bg: #ffffff;
  --seo-bg2: #f2f6f9;
  --seo-bg3: #e7eef4;
  --seo-surface: #ffffff;
  --seo-surface2: #f2f6f9;
  --seo-border: #e1e9ef;
  --seo-border2: #c6d4df;
  --seo-cyan: #1f6e9e;
  --seo-green: #0f7a3c;
  --seo-text: #14202e;
  --seo-muted: #5a6d80;
  --seo-muted2: #97a8b7;
  --seo-white: #0e1319;
  --seo-heading: #0e1319;
  --seo-code-bg: #f2f6f9;
  --seo-gradient: linear-gradient(180deg, #2ecc06, #2ecc06);

  --primary-color: #1f6e9e;
  --secondary-color: #0f7a3c;
  --accent-color: #0f7a3c;
  --text-dark: #14202e;
  --text-light: #5a6d80;
  --bg-light: #f2f6f9;
  --bg-white: #ffffff;
  --border-color: #e1e9ef;
  --success-color: #0f7a3c;
  --shadow: 0 2px 4px rgba(6, 20, 38, 0.06);
  --shadow-lg: 0 22px 48px -22px rgba(6, 20, 38, 0.38);
}

/* dark-theme.css paints a cyan grid over the sibling pages' body. */
html body.pe-theme.pe-theme.pe-theme {
  background-image: none;
  background-color: var(--bg);
  color: var(--text);
}

/* ------------------------------------------------------------ typography -- */

html body.pe-theme.pe-theme.pe-theme,
html body.pe-theme.pe-theme.pe-theme h1,
html body.pe-theme.pe-theme.pe-theme h2,
html body.pe-theme.pe-theme.pe-theme h3,
html body.pe-theme.pe-theme.pe-theme h4,
html body.pe-theme.pe-theme.pe-theme .section-title,
html body.pe-theme.pe-theme.pe-theme .chip,
html body.pe-theme.pe-theme.pe-theme .btn-primary,
html body.pe-theme.pe-theme.pe-theme .btn-secondary,
html body.pe-theme.pe-theme.pe-theme .btn-white,
html body.pe-theme.pe-theme.pe-theme .p-btn {
  font-family: var(--pe-font);
}

html body.pe-theme.pe-theme.pe-theme h1,
html body.pe-theme.pe-theme.pe-theme h2,
html body.pe-theme.pe-theme.pe-theme h3,
html body.pe-theme.pe-theme.pe-theme h4 {
  letter-spacing: -0.032em;
  text-wrap: balance;
}

html body.pe-theme.pe-theme.pe-theme .stat-num,
html body.pe-theme.pe-theme.pe-theme .stat-n,
html body.pe-theme.pe-theme.pe-theme .cnt,
html body.pe-theme.pe-theme.pe-theme .sec-count,
html body.pe-theme.pe-theme.pe-theme .speed-val,
html body.pe-theme.pe-theme.pe-theme .price-num,
html body.pe-theme.pe-theme.pe-theme .txn-amt2,
html body.pe-theme.pe-theme.pe-theme code,
html body.pe-theme.pe-theme.pe-theme pre {
  font-family: var(--pe-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------- the navy top region -- */

html body.pe-theme.pe-theme.pe-theme .notice-bar {
  background: var(--pe-navy-deep);
  color: var(--pe-on-navy-2);
  border-bottom: 1px solid var(--pe-navy-rule);
}

html body.pe-theme.pe-theme.pe-theme .notice-bar b {
  color: var(--pe-green);
}

html body.pe-theme.pe-theme.pe-theme .notice-bar a {
  color: var(--pe-sky);
}

html body.pe-theme.pe-theme.pe-theme .site-nav {
  background: var(--pe-navy);
  border-bottom: 1px solid var(--pe-navy-rule);
  box-shadow: none;
  backdrop-filter: none;
}

html body.pe-theme.pe-theme.pe-theme .site-nav .nav-menu > li > a,
html body.pe-theme.pe-theme.pe-theme .site-nav .nav-menu > li > button {
  color: var(--pe-on-navy-2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

html body.pe-theme.pe-theme.pe-theme .site-nav .nav-menu > li > a:hover,
html body.pe-theme.pe-theme.pe-theme .site-nav .nav-menu > li > button:hover {
  color: #fff;
}

/* The nav sits on navy in both themes, so the light-text banner is always the
   right one — and this class is not `logo-text`, so the site-wide theme swap
   leaves it alone. */
html body.pe-theme.pe-theme.pe-theme img.home-banner {
  height: 1.4rem;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  border: 0;
}

html body.pe-theme.pe-theme.pe-theme .site-nav .theme-toggle-btn,
html body.pe-theme.pe-theme.pe-theme .site-nav .locale-switcher-select {
  background: transparent;
  border: 1px solid var(--pe-navy-rule);
  border-radius: 999px;
  color: var(--pe-on-navy);
}

html body.pe-theme.pe-theme.pe-theme .site-nav .theme-toggle-btn:hover,
html body.pe-theme.pe-theme.pe-theme .site-nav .locale-switcher-select:hover {
  border-color: var(--pe-navy-rule-hi);
}

html body.pe-theme.pe-theme.pe-theme .site-nav .locale-switcher-select option {
  background: var(--pe-navy-deep);
  color: var(--pe-on-navy);
}

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

html body.pe-theme.pe-theme.pe-theme .hero {
  background:
    radial-gradient(ellipse 110% 80% at 50% 0%, var(--pe-navy-glow) 0%, transparent 60%),
    var(--pe-navy);
  color: var(--pe-on-navy);
  /* the nav is fixed, so the hero has to clear it plus the announce chip */
  padding: 6rem 2rem 3.25rem;
}

/* The space scene goes: comets, nebulas and planets are not the payeer world.
   The faint star field stays, restyled as the constellation their own hero
   carried, because it is the one decoration that belongs. */
html body.pe-theme.pe-theme.pe-theme .hero-grid,
html body.pe-theme.pe-theme.pe-theme .hero-glow-1,
html body.pe-theme.pe-theme.pe-theme .hero-glow-2,
html body.pe-theme.pe-theme.pe-theme .hero-glow-3,
html body.pe-theme.pe-theme.pe-theme .comet,
html body.pe-theme.pe-theme.pe-theme .nebula,
html body.pe-theme.pe-theme.pe-theme .planet,
html body.pe-theme.pe-theme.pe-theme .planet-ring {
  display: none !important;
}

html body.pe-theme.pe-theme.pe-theme .star {
  background: var(--pe-sky);
  box-shadow: none;
  opacity: 0.55;
}

html body.pe-theme.pe-theme.pe-theme .star-large {
  width: 2px;
  height: 2px;
}

html body.pe-theme.pe-theme.pe-theme .hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.038em;
}

html body.pe-theme.pe-theme.pe-theme .hero-sub {
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .hero-announce {
  background: transparent;
  border: 1px solid var(--pe-navy-rule);
  border-radius: 999px;
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .hero-dot {
  background: var(--pe-green);
}

html body.pe-theme.pe-theme.pe-theme .hero .geo-tldr,
html body.pe-theme.pe-theme.pe-theme .hero-geo .geo-tldr {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--pe-navy-rule);
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .hero .geo-updated {
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .hero .grad-text,
html body.pe-theme.pe-theme.pe-theme .hero .grad2-text {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--pe-sky);
}

/* the trust strip under the hero buttons */
html body.pe-theme.pe-theme.pe-theme .hero .trust-row,
html body.pe-theme.pe-theme.pe-theme .hero-trust {
  border-top: 1px solid var(--pe-navy-rule);
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .hero .trust-item strong,
html body.pe-theme.pe-theme.pe-theme .hero-trust strong,
html body.pe-theme.pe-theme.pe-theme .hero-trust b {
  color: #fff;
  font-family: var(--pe-mono);
  font-variant-numeric: tabular-nums;
}

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

html body.pe-theme.pe-theme.pe-theme .btn-primary,
html body.pe-theme.pe-theme.pe-theme .btn-secondary,
html body.pe-theme.pe-theme.pe-theme .btn-white,
html body.pe-theme.pe-theme.pe-theme .p-btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.012em;
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .btn-primary {
  background: var(--pe-green);
  color: var(--pe-green-label);
  border: 2px solid transparent;
}

html body.pe-theme.pe-theme.pe-theme .btn-primary::before {
  display: none;
}

html body.pe-theme.pe-theme.pe-theme .btn-secondary {
  border: 2px solid var(--pe-sky);
  color: var(--pe-sky);
  background: transparent;
  backdrop-filter: none;
}

html body.pe-theme.pe-theme.pe-theme .btn-secondary::before {
  display: none;
}

html body.pe-theme.pe-theme.pe-theme .btn-white {
  border: 2px solid var(--pe-navy-rule-hi);
  background: transparent;
  color: var(--pe-on-navy);
}

@media (hover: hover) and (pointer: fine) {
  html body.pe-theme.pe-theme.pe-theme .btn-primary:hover {
    background: var(--pe-green-dark);
    transform: none;
    opacity: 1;
    box-shadow: none;
  }

  html body.pe-theme.pe-theme.pe-theme .btn-secondary:hover {
    background: rgba(100, 179, 223, 0.14);
    border-color: var(--pe-sky);
    box-shadow: none;
  }

  html body.pe-theme.pe-theme.pe-theme .btn-white:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
}

/* Buttons sitting on a light section need the darker blue for the outline. */
html[data-theme='light'] body.pe-theme.pe-theme.pe-theme .section-wrap .btn-secondary,
html[data-theme='light'] body.pe-theme.pe-theme.pe-theme .section .btn-secondary {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* -------------------------------------------------- section chrome + type -- */

html body.pe-theme.pe-theme.pe-theme .section-wrap.alt {
  background: var(--bg2);
}

html body.pe-theme.pe-theme.pe-theme .section-wrap.dark {
  background: var(--bg3);
}

/* The Payeer eyebrow: uppercase, wide tracking, short green rule under it. */
html body.pe-theme.pe-theme.pe-theme .chip {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--pe-green);
  border-radius: 0;
  color: var(--muted);
  padding: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  margin-bottom: 1.1rem;
}

html body.pe-theme.pe-theme.pe-theme .section-title {
  color: var(--white);
  font-weight: 800;
}

html body.pe-theme.pe-theme.pe-theme .grad-text,
html body.pe-theme.pe-theme.pe-theme .grad2-text {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--cyan);
}

html body.pe-theme.pe-theme.pe-theme .divider {
  background: var(--border);
}

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

html body.pe-theme.pe-theme.pe-theme .bento-card,
html body.pe-theme.pe-theme.pe-theme .sec-card,
html body.pe-theme.pe-theme.pe-theme .industry-card,
html body.pe-theme.pe-theme.pe-theme .int-card,
html body.pe-theme.pe-theme.pe-theme .faq-item,
html body.pe-theme.pe-theme.pe-theme .stat-box,
html body.pe-theme.pe-theme.pe-theme .step-item,
html body.pe-theme.pe-theme.pe-theme .sol-feat,
html body.pe-theme.pe-theme.pe-theme .wl-feat,
html body.pe-theme.pe-theme.pe-theme .ci-item,
html body.pe-theme.pe-theme.pe-theme .pm,
html body.pe-theme.pe-theme.pe-theme .cs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .bento-card:hover,
html body.pe-theme.pe-theme.pe-theme .sec-card:hover,
html body.pe-theme.pe-theme.pe-theme .industry-card:hover,
html body.pe-theme.pe-theme.pe-theme .int-card:hover,
html body.pe-theme.pe-theme.pe-theme .pm:hover {
  border-color: var(--cyan);
  transform: none;
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .b-bar,
html body.pe-theme.pe-theme.pe-theme .mini-bar {
  background: var(--pe-green);
}

/* Emoji are doing icon duty across this page. Rather than let them float at
   whatever size the font picks, they get one consistent tile so they read as a
   deliberate set. */
html body.pe-theme.pe-theme.pe-theme .b-icon,
html body.pe-theme.pe-theme.pe-theme .ind-icon,
html body.pe-theme.pe-theme.pe-theme .sec-ico,
html body.pe-theme.pe-theme.pe-theme .sec-icon2,
html body.pe-theme.pe-theme.pe-theme .int-card-icon,
html body.pe-theme.pe-theme.pe-theme .ci-icon,
html body.pe-theme.pe-theme.pe-theme .wl-feat-icon,
html body.pe-theme.pe-theme.pe-theme .sol-tab-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.9rem;
}

html body.pe-theme.pe-theme.pe-theme .step-circle {
  background: var(--pe-green);
  color: var(--pe-green-label);
  border: 0;
  font-family: var(--pe-mono);
  font-weight: 700;
}

/* --------------------------------------------------------------- figures -- */

html body.pe-theme.pe-theme.pe-theme .stat-num,
html body.pe-theme.pe-theme.pe-theme .stat-n,
html body.pe-theme.pe-theme.pe-theme .cnt,
html body.pe-theme.pe-theme.pe-theme .sec-count {
  color: var(--white);
  font-weight: 600;
}

html body.pe-theme.pe-theme.pe-theme .stat-lbl,
html body.pe-theme.pe-theme.pe-theme .stat-l {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

html body.pe-theme.pe-theme.pe-theme .speed-fill {
  background: var(--pe-green);
}

html body.pe-theme.pe-theme.pe-theme .speed-track {
  background: var(--surface2);
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ tabs -- */

html body.pe-theme.pe-theme.pe-theme .tab-btn,
html body.pe-theme.pe-theme.pe-theme .int-tab,
html body.pe-theme.pe-theme.pe-theme .sol-tab,
html body.pe-theme.pe-theme.pe-theme .sdk-pill,
html body.pe-theme.pe-theme.pe-theme .wl-method-btn,
html body.pe-theme.pe-theme.pe-theme .ctag,
html body.pe-theme.pe-theme.pe-theme .pay-pill {
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .tab-btn.active,
html body.pe-theme.pe-theme.pe-theme .int-tab.active,
html body.pe-theme.pe-theme.pe-theme .sol-tab.active,
html body.pe-theme.pe-theme.pe-theme .wl-method-btn.active {
  background: var(--surface2);
  border-color: var(--cyan);
  color: var(--cyan);
}

html body.pe-theme.pe-theme.pe-theme .pay-dot {
  background: var(--pe-green);
}

html body.pe-theme.pe-theme.pe-theme .yes {
  color: var(--green);
}

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

html body.pe-theme.pe-theme.pe-theme .site-footer,
html body.pe-theme.pe-theme.pe-theme footer {
  background: var(--pe-navy-deep);
  color: var(--pe-on-navy-2);
  border-top: 1px solid var(--pe-navy-rule);
}

html body.pe-theme.pe-theme.pe-theme .site-footer a,
html body.pe-theme.pe-theme.pe-theme footer a {
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .site-footer a:hover,
html body.pe-theme.pe-theme.pe-theme footer a:hover {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme .site-footer h4,
html body.pe-theme.pe-theme.pe-theme footer h4 {
  color: #fff;
}

/* ----------------------------------------------------------------- misc -- */

html body.pe-theme.pe-theme.pe-theme .fab {
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme ::selection {
  background: rgba(100, 179, 223, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  html body.pe-theme.pe-theme.pe-theme *,
  html body.pe-theme.pe-theme.pe-theme *::before,
  html body.pe-theme.pe-theme.pe-theme *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------- gradient text kills -- */

/* Several figures paint themselves with `background:var(--gradient)` plus
   background-clip:text. With the gradient now a flat green that renders as
   bright green type on white (2.2:1), so these opt out and take a real colour. */
html body.pe-theme.pe-theme.pe-theme .stat-num,
html body.pe-theme.pe-theme.pe-theme .b-stat,
html body.pe-theme.pe-theme.pe-theme .p-price-num,
html body.pe-theme.pe-theme.pe-theme .footer-brand-logo__text span {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .stat-num,
html body.pe-theme.pe-theme.pe-theme .b-stat,
html body.pe-theme.pe-theme.pe-theme .p-price-num {
  color: var(--white);
}

html body.pe-theme.pe-theme.pe-theme .footer-brand-logo__text span {
  color: var(--pe-sky);
}

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

/* The footer sits on navy in both themes, so its text has to come from the
   on-navy tokens rather than the page's --muted, which is dark in light mode. */
html body.pe-theme.pe-theme.pe-theme footer p,
html body.pe-theme.pe-theme.pe-theme footer li,
html body.pe-theme.pe-theme.pe-theme footer li a,
html body.pe-theme.pe-theme.pe-theme footer .f-col p,
html body.pe-theme.pe-theme.pe-theme footer .f-desc,
html body.pe-theme.pe-theme.pe-theme footer .f-follow-link,
html body.pe-theme.pe-theme.pe-theme footer .f-bottom,
html body.pe-theme.pe-theme.pe-theme footer .footer-bottom,
html body.pe-theme.pe-theme.pe-theme footer small {
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme footer .f-heading,
html body.pe-theme.pe-theme.pe-theme footer h4,
html body.pe-theme.pe-theme.pe-theme footer strong,
html body.pe-theme.pe-theme.pe-theme footer b {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme footer li a:hover,
html body.pe-theme.pe-theme.pe-theme footer .f-follow-link:hover {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme footer .footer-top,
html body.pe-theme.pe-theme.pe-theme footer .f-bottom,
html body.pe-theme.pe-theme.pe-theme footer .footer-bottom {
  border-color: var(--pe-navy-rule);
}

/* ============================================================================
   Contrast fixes.
   Found by measuring every text node against the surface actually painted
   behind it, in both themes. Each rule below is a real failure, not a tidy-up.
   ============================================================================ */

/* The outline button is sky-blue, which only clears AA on navy. On a light
   section it has to use the darker step of the same hue. */
html[data-theme='light'] body.pe-theme.pe-theme.pe-theme .btn-secondary {
  border-color: var(--cyan);
  color: var(--cyan);
}

html[data-theme='light'] body.pe-theme.pe-theme.pe-theme .hero .btn-secondary,
html[data-theme='light'] body.pe-theme.pe-theme.pe-theme footer .btn-secondary {
  border-color: var(--pe-sky);
  color: var(--pe-sky);
}

/* .btn-white is built for a dark band; on a light section it was 1.2:1. */
html[data-theme='light'] body.pe-theme.pe-theme.pe-theme .btn-white {
  border-color: var(--border2);
  color: var(--text);
}

html[data-theme='light'] body.pe-theme.pe-theme.pe-theme .hero .btn-white,
html[data-theme='light'] body.pe-theme.pe-theme.pe-theme footer .btn-white {
  border-color: var(--pe-navy-rule-hi);
  color: var(--pe-on-navy);
}

/* These buttons keep their own blue fill and white label, which clears AA
   already — they only need the pill shape. */
html body.pe-theme.pe-theme.pe-theme .form-submit,
html body.pe-theme.pe-theme.pe-theme .newsletter-btn,
html body.pe-theme.pe-theme.pe-theme .wl-pay-btn,
html body.pe-theme.pe-theme.pe-theme .p-btn {
  border-radius: 999px;
}

/* The search button is solid --cyan, so its label goes white (5.6:1) rather
   than near-black (3.6:1). */
html body.pe-theme.pe-theme.pe-theme .hero-search button,
html body.pe-theme.pe-theme.pe-theme .geo-search button,
html body.pe-theme.pe-theme.pe-theme .search-btn {
  color: #fff;
  border-radius: 999px;
}

/* The code sample is a dark band, so its syntax colours come from the on-navy
   set. Light-theme.css was painting them for a white background. */
html body.pe-theme.pe-theme.pe-theme .code-wrap {
  background: var(--pe-navy-deep);
  border-color: rgba(255, 255, 255, 0.11);
}

html body.pe-theme.pe-theme.pe-theme .code-body,
html body.pe-theme.pe-theme.pe-theme .code-body code,
html body.pe-theme.pe-theme.pe-theme .code-body pre {
  color: #c7d5e2;
}

html body.pe-theme.pe-theme.pe-theme .code-lang {
  color: #93a6ba;
}

html body.pe-theme.pe-theme.pe-theme .ck,
html body.pe-theme.pe-theme.pe-theme .code-docs-link {
  color: #7bc2e8;
}

html body.pe-theme.pe-theme.pe-theme .cf {
  color: #e0b872;
}

html body.pe-theme.pe-theme.pe-theme .cs2,
html body.pe-theme.pe-theme.pe-theme .cstr {
  color: #86e06a;
}

html body.pe-theme.pe-theme.pe-theme .cm2,
html body.pe-theme.pe-theme.pe-theme .ccm {
  color: #8fa4b8;
}

/* Hardcoded brand blues that light-theme.css left at #0284c7. */
html body.pe-theme.pe-theme.pe-theme .cnt,
html body.pe-theme.pe-theme.pe-theme .p-withdrawal {
  color: var(--cyan);
}

/* A hardcoded #e74c3c that measured 3.8:1 on white. */
html body.pe-theme.pe-theme.pe-theme .pm-more-link,
html body.pe-theme.pe-theme.pe-theme .pm-footer-link a {
  color: var(--red);
}

/* Decorative quote glyph was pure white on a white card. */
html body.pe-theme.pe-theme.pe-theme .testi-q {
  color: var(--border2);
}

/* Muted captions that fell to --muted2 on a white surface. */
html body.pe-theme.pe-theme.pe-theme .wl-preview-note,
html body.pe-theme.pe-theme.pe-theme .wl-preview-caption,
html body.pe-theme.pe-theme.pe-theme .wl-section .wl-caption {
  color: var(--muted);
}

/* Footer headings and small print sit on navy in both themes. */
html body.pe-theme.pe-theme.pe-theme footer h3,
html body.pe-theme.pe-theme.pe-theme footer h2 {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme footer .footer-copy,
html body.pe-theme.pe-theme.pe-theme footer .f-copy {
  color: var(--pe-on-navy-2);
}

/* The footer banner is the light-text asset in both themes, same as the nav. */
html body.pe-theme.pe-theme.pe-theme footer img.home-banner {
  height: 1.35rem;
  width: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

/* ============================================================================
   Chrome the sibling pages share with the home page but style differently.
   ============================================================================ */

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-menu a:not(.btn-login):not(.btn-primary),
html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-dropdown-trigger {
  color: var(--pe-on-navy-2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-menu a:not(.btn-login):not(.btn-primary):hover,
html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-menu a:not(.btn-login):not(.btn-primary).active,
html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-dropdown-trigger:hover {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-dropdown-menu {
  background: var(--pe-navy-deep);
  border: 1px solid var(--pe-navy-rule);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-dropdown-menu a {
  color: var(--pe-on-navy-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-dropdown-menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .mobile-menu-toggle span {
  background: var(--pe-on-navy);
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-menu a.btn-login {
  border: 2px solid var(--pe-navy-rule-hi);
  color: var(--pe-on-navy);
  background: transparent;
  border-radius: 999px;
}

html body.pe-theme.pe-theme.pe-theme nav.site-nav .nav-menu a.btn-primary {
  background: var(--pe-green);
  color: var(--pe-green-label);
  border-radius: 999px;
  box-shadow: none;
}

/* The sibling pages' own page header sits on the navy field, like the home
   hero, so the whole site opens the same way. */
html body.pe-theme.pe-theme.pe-theme .page-header,
html body.pe-theme.pe-theme.pe-theme .page-hero,
html body.pe-theme.pe-theme.pe-theme .hero-section {
  background:
    radial-gradient(ellipse 110% 90% at 50% 0%, var(--pe-navy-glow) 0%, transparent 62%),
    var(--pe-navy);
  color: var(--pe-on-navy);
  border-bottom: 1px solid var(--pe-navy-rule);
}

html body.pe-theme.pe-theme.pe-theme .page-header h1,
html body.pe-theme.pe-theme.pe-theme .page-hero h1,
html body.pe-theme.pe-theme.pe-theme .hero-section h1 {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme .page-header p,
html body.pe-theme.pe-theme.pe-theme .page-hero p,
html body.pe-theme.pe-theme.pe-theme .hero-section p,
html body.pe-theme.pe-theme.pe-theme .page-header .subtitle {
  color: var(--pe-on-navy-2);
}

/* Cards and icon tiles the sibling pages use under their own names. */
html body.pe-theme.pe-theme.pe-theme .content-card,
html body.pe-theme.pe-theme.pe-theme .info-card,
html body.pe-theme.pe-theme.pe-theme .feature-card,
html body.pe-theme.pe-theme.pe-theme .service-card,
html body.pe-theme.pe-theme.pe-theme .value-card,
html body.pe-theme.pe-theme.pe-theme .team-card,
html body.pe-theme.pe-theme.pe-theme .resource-card,
html body.pe-theme.pe-theme.pe-theme .case-card,
html body.pe-theme.pe-theme.pe-theme .case-study-card,
html body.pe-theme.pe-theme.pe-theme .solution-card,
html body.pe-theme.pe-theme.pe-theme .post-card,
html body.pe-theme.pe-theme.pe-theme .blog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .feature-card:hover,
html body.pe-theme.pe-theme.pe-theme .service-card:hover,
html body.pe-theme.pe-theme.pe-theme .case-card:hover,
html body.pe-theme.pe-theme.pe-theme .case-study-card:hover,
html body.pe-theme.pe-theme.pe-theme .solution-card:hover,
html body.pe-theme.pe-theme.pe-theme .post-card:hover,
html body.pe-theme.pe-theme.pe-theme .blog-card:hover {
  border-color: var(--cyan);
  transform: none;
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme .card-icon,
html body.pe-theme.pe-theme.pe-theme .feature-icon,
html body.pe-theme.pe-theme.pe-theme .service-icon,
html body.pe-theme.pe-theme.pe-theme .value-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.9rem;
}

html body.pe-theme.pe-theme.pe-theme .section-eyebrow,
html body.pe-theme.pe-theme.pe-theme .page-chip,
html body.pe-theme.pe-theme.pe-theme .eyebrow {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--pe-green);
  border-radius: 0;
  color: var(--muted);
  padding: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1.1rem;
}

html body.pe-theme.pe-theme.pe-theme .cta-button,
html body.pe-theme.pe-theme.pe-theme .cta-section .btn-primary {
  background: var(--pe-green);
  color: var(--pe-green-label);
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: none;
  font-weight: 700;
}

html body.pe-theme.pe-theme.pe-theme .cta-button:hover {
  background: var(--pe-green-dark);
}

/* ----------------------------------------------------------------- forms -- */

html body.pe-theme.pe-theme.pe-theme input[type='text'],
html body.pe-theme.pe-theme.pe-theme input[type='email'],
html body.pe-theme.pe-theme.pe-theme input[type='search'],
html body.pe-theme.pe-theme.pe-theme input[type='tel'],
html body.pe-theme.pe-theme.pe-theme input[type='number'],
html body.pe-theme.pe-theme.pe-theme select,
html body.pe-theme.pe-theme.pe-theme textarea {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
}

html body.pe-theme.pe-theme.pe-theme input:focus,
html body.pe-theme.pe-theme.pe-theme select:focus,
html body.pe-theme.pe-theme.pe-theme textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(100, 179, 223, 0.28);
}

html body.pe-theme.pe-theme.pe-theme ::placeholder {
  color: var(--muted2);
}

/* ============================================================================
   The sibling pages use nav.navbar rather than nav.site-nav, so the same
   treatment is repeated for that structure.
   ============================================================================ */

html body.pe-theme.pe-theme.pe-theme nav.navbar {
  background: var(--pe-navy);
  border-bottom: 1px solid var(--pe-navy-rule);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu > li > a,
html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-dropdown-trigger {
  color: var(--pe-on-navy-2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu > li > a:hover,
html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu > li > a.active,
html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-dropdown-trigger:hover {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-dropdown-menu {
  background: var(--pe-navy-deep);
  border: 1px solid var(--pe-navy-rule);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-dropdown-menu a {
  color: var(--pe-on-navy-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-dropdown-menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .mobile-menu-toggle span {
  background: var(--pe-on-navy);
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu a.btn-login,
html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu a.btn-primary {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.012em;
  font-size: 0.86rem;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu a.btn-login {
  border: 2px solid var(--pe-navy-rule-hi);
  color: var(--pe-on-navy);
  background: transparent;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .nav-menu a.btn-primary {
  background: var(--pe-green);
  color: var(--pe-green-label);
  box-shadow: none;
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .theme-toggle-btn,
html body.pe-theme.pe-theme.pe-theme nav.navbar .locale-switcher-select {
  background: transparent;
  border: 1px solid var(--pe-navy-rule);
  border-radius: 999px;
  color: var(--pe-on-navy);
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .theme-toggle-btn:hover,
html body.pe-theme.pe-theme.pe-theme nav.navbar .locale-switcher-select:hover {
  border-color: var(--pe-navy-rule-hi);
}

html body.pe-theme.pe-theme.pe-theme nav.navbar .locale-switcher-select option {
  background: var(--pe-navy-deep);
  color: var(--pe-on-navy);
}

/* Sibling page sections. */
html body.pe-theme.pe-theme.pe-theme .page-content {
  background: var(--bg);
}

html body.pe-theme.pe-theme.pe-theme .content-section,
html body.pe-theme.pe-theme.pe-theme .page-content section {
  background: transparent;
}

html body.pe-theme.pe-theme.pe-theme .geo-tldr {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pe-green);
  border-radius: 0 10px 10px 0;
  color: var(--text);
}

html body.pe-theme.pe-theme.pe-theme .geo-tldr .geo-updated {
  color: var(--muted);
}

html body.pe-theme.pe-theme.pe-theme .cta-section {
  background:
    radial-gradient(ellipse 110% 100% at 50% 100%, var(--pe-navy-glow) 0%, transparent 62%),
    var(--pe-navy);
  color: var(--pe-on-navy);
  border-top: 1px solid var(--pe-navy-rule);
}

html body.pe-theme.pe-theme.pe-theme .cta-section h2,
html body.pe-theme.pe-theme.pe-theme .cta-section h3 {
  color: #fff;
}

html body.pe-theme.pe-theme.pe-theme .cta-section p {
  color: var(--pe-on-navy-2);
}

html body.pe-theme.pe-theme.pe-theme .cta-section .btn-secondary {
  border-color: var(--pe-sky);
  color: var(--pe-sky);
}

/* Case study cards: the category tag and the attribution line both measured
   just under 4.5:1 on their tinted card. */
html body.pe-theme.pe-theme.pe-theme .case-study-category {
  color: var(--cyan);
  font-weight: 700;
}

html body.pe-theme.pe-theme.pe-theme cite,
html body.pe-theme.pe-theme.pe-theme .case-study-quote cite {
  color: var(--muted);
  font-style: normal;
}

/* ============================================================================
   Payment-methods widget.
   It ships its own dark styling and light-theme.css only half-adapts it, so
   these rules are scoped tightly enough to beat
   `html[data-theme='light'] .payeer-pm-widget .tab-btn.active .cnt`.
   ============================================================================ */

html body.pe-theme.pe-theme.pe-theme .payeer-pm-widget .tab-btn .cnt,
html body.pe-theme.pe-theme.pe-theme .payeer-pm-widget .tab-btn.active .cnt {
  color: var(--cyan);
  background: var(--surface2);
}

html body.pe-theme.pe-theme.pe-theme .payeer-pm-widget .footer a {
  color: var(--cyan);
  font-weight: 600;
}

html body.pe-theme.pe-theme.pe-theme .pm-widget-copy {
  font-size: 11px;
  margin-top: 0.45rem;
  color: var(--muted2);
}

/* ---------------------------------------------------- remaining contrast -- */

/* Near-black on the solid --cyan search button was 3.6:1; white is 5.6:1. */
html body.pe-theme.pe-theme.pe-theme .hero-site-search button,
html body.pe-theme.pe-theme.pe-theme .site-search button,
html body.pe-theme.pe-theme.pe-theme .geo-search button {
  color: #fff;
  border-radius: 999px;
}

html body.pe-theme.pe-theme.pe-theme .geo-updated,
html body.pe-theme.pe-theme.pe-theme .geo-updated time {
  color: var(--muted);
}

/* The growth bars carried a label on a cyan gradient. Green with a near-black
   label matches the CTA and reads at 9:1. */
html body.pe-theme.pe-theme.pe-theme .growth-bar-fill {
  background: var(--pe-green);
  color: var(--pe-green-label);
  font-weight: 600;
}

html body.pe-theme.pe-theme.pe-theme .growth-bar-track {
  background: var(--surface2);
  border: 1px solid var(--border);
}

/* Eyebrows and captions that sit inside a navy band need the on-navy ink. */
html body.pe-theme.pe-theme.pe-theme .page-header .page-chip,
html body.pe-theme.pe-theme.pe-theme .page-header .chip,
html body.pe-theme.pe-theme.pe-theme .page-header .eyebrow,
html body.pe-theme.pe-theme.pe-theme .hero .chip,
html body.pe-theme.pe-theme.pe-theme .cta-section .chip {
  color: var(--pe-on-navy-2);
}

/* Code token spans were inheriting a white background inside the navy code
   block, which put the amber literal at 1.9:1. */
html body.pe-theme.pe-theme.pe-theme .code-body span,
html body.pe-theme.pe-theme.pe-theme .code-body code,
html body.pe-theme.pe-theme.pe-theme .code-body pre {
  background: transparent;
}

html body.pe-theme.pe-theme.pe-theme .code-body .cs {
  color: #86e06a;
}

html body.pe-theme.pe-theme.pe-theme .code-body .cn {
  color: #ff9d6e;
}

html body.pe-theme.pe-theme.pe-theme .code-body .cm2 {
  color: #8fa4b8;
}

/* Decorative quotation glyph. */
html body.pe-theme.pe-theme.pe-theme .testi-q {
  color: var(--muted2);
}

/* White-label preview captions sit on the sunk band, where --muted2 is 4.2:1. */
html body.pe-theme.pe-theme.pe-theme .wl-section > div,
html body.pe-theme.pe-theme.pe-theme .wl-preview + div,
html body.pe-theme.pe-theme.pe-theme .wl-body > div:last-child {
  color: var(--muted);
}

/* ============================================================================
   Page-specific colours the shared stylesheets left behind.
   Each one was measured against the surface actually painted behind it; the
   selectors are deep enough to beat rules like
   `body.blog-body.site-dark .blog-footer .blog-back-to-site`.
   ============================================================================ */

/* --- blog and search --------------------------------------------------- */

/* The back-to-site button carried a purple gradient in light and a cyan/green
   one in dark, neither of which is a Payeer colour. It becomes the green pill
   the rest of the site uses, with the same near-black label. */
html body.pe-theme.pe-theme.pe-theme .blog-footer .blog-back-to-site,
html body.pe-theme.pe-theme.pe-theme .blog-footer .blog-back-to-site:hover {
  background: var(--pe-green);
  color: var(--pe-green-label) !important;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

html body.pe-theme.pe-theme.pe-theme .blog-footer .blog-back-to-site:hover {
  background: var(--pe-green-dark);
}

/* #4338CA in light, #0284C7 once light-theme.css got to it — 4.1:1 either way. */
html body.pe-theme.pe-theme.pe-theme .blog-read-more,
html body.pe-theme.pe-theme.pe-theme .search-result-type,
html body.pe-theme.pe-theme.pe-theme .blog-tag {
  color: var(--cyan);
}

/* --- api docs ---------------------------------------------------------- */

/* These badges were coloured for a dark page: #FFC041 measured 1.5:1 and
   #FF8A8A 2.3:1 once the page went light. */
html body.pe-theme.pe-theme.pe-theme .badge.private {
  background: var(--warn-wash, rgba(138, 90, 5, 0.1));
  color: var(--gold);
  border: 1px solid rgba(138, 90, 5, 0.25);
}

html body.pe-theme.pe-theme.pe-theme .badge.required,
html body.pe-theme.pe-theme.pe-theme .status-code.error {
  background: rgba(179, 34, 24, 0.1);
  color: var(--red);
  border: 1px solid rgba(179, 34, 24, 0.25);
}

html body.pe-theme.pe-theme.pe-theme .badge.public,
html body.pe-theme.pe-theme.pe-theme .status-code.success {
  background: rgba(15, 122, 60, 0.1);
  color: #0d6b34;
}

html:not([data-theme='light']) body.pe-theme.pe-theme.pe-theme .badge.public,
html:not([data-theme='light']) body.pe-theme.pe-theme.pe-theme .status-code.success {
  color: var(--green);
}

html body.pe-theme.pe-theme.pe-theme .badge.optional {
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* --- sandbox ----------------------------------------------------------- */

/* #D97706 on white was 3.2:1. */
html body.pe-theme.pe-theme.pe-theme .sandbox-banner {
  color: var(--gold);
  border-color: rgba(138, 90, 5, 0.3);
}

/* The sandbox call-to-action was a #8B5CF6 purple with a white label (4.2:1),
   and off-theme besides. */
html body.pe-theme.pe-theme.pe-theme .btn-cta {
  background: var(--pe-green);
  color: var(--pe-green-label);
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

html body.pe-theme.pe-theme.pe-theme .btn-cta:hover {
  background: var(--pe-green-dark);
  opacity: 1;
}