/* ==========================================================================
   ACM Theme Layer v1
   Inner (detail) pages ko home page ke design se match karta hai.
   - Sirf visual layer: content, images, routes aur backend unchanged.
   - Hatana ho to index.html se 2 lines (theme css/js) remove kar do.
   Structure:
     1. Tokens (home ke :root se)        5. Buttons
     2. Base + typography                6. Cards, FAQ, forms
     3. Header + ticker + progress       7. Footer
     4. Hero, sheets, dark bands         8. Reduced motion
   ========================================================================== */

/* 1. TOKENS ----------------------------------------------------------------- */
:root {
  --deep: #0e0a15;
  --deep-2: #161021;
  --ink: #241b34;
  --orange: #ff6a2b;
  --orange-2: #ff8f55;
  --orange-soft: rgba(255, 106, 43, .14);
  --sheet: #f7f3ef;
  --sheet-2: #efe8e1;
  --text: #1c1526;
  --muted: #6c6377;
  --line: rgba(36, 27, 52, .12);
  --line-dark: rgba(255, 255, 255, .12);
  --white-soft: rgba(255, 255, 255, .72);
  --th-radius: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --th-font: "Manrope", system-ui, sans-serif;
  --th-display: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
  --th-mono: "JetBrains Mono", ui-monospace, monospace;

  /* existing app variables -> home palette */
  --font-heading: var(--th-display);
  --brand-heading: 270 29% 12%;      /* #1c1526 */
  --brand-paragraph: 273 9% 43%;     /* #6c6377 */
  --brand-border: 25 14% 87%;
  --brand-section: 30 33% 95%;       /* #f7f3ef */
  --brand-ink: #241b34;
  --btn-radius: 999px;
  --btn-shadow: 0 14px 34px rgba(255, 106, 43, .32);
  --btn-shadow-hover: 0 18px 40px rgba(255, 106, 43, .36);
  --brand-gradient: linear-gradient(90deg, var(--orange), var(--orange-2));
}

/* Dark scope: kisi bhi dark area me app ke variables ko light-on-dark bana do */
.th-dark,
.detail-page-hero,
[data-th="hero"],
[data-th="dark"],
.markets-features-band--dark,
.about-dual-rail,
.pn-duo--terminal,
.accounts-dark-panel,
footer {
  --brand-heading: 0 0% 100%;
  --brand-paragraph: 265 12% 76%;
  --brand-border: 265 22% 24%;
  --brand-section: 265 33% 9%;
  --brand-ink: #ffffff;
}

/* 2. BASE + TYPOGRAPHY -------------------------------------------------------- */
body {
  font-family: var(--th-font);
  background: var(--deep);
  -webkit-font-smoothing: antialiased;
}
.page-shell__main--sticky-safe,
main main { background: var(--sheet) !important; }

.site-section-title,
.pn-title,
main main :is(h1, h2) {
  font-family: var(--th-display);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}
main main h3 { font-family: var(--th-display); letter-spacing: -.025em; }

.site-section-title--hero .site-section-title__word { font-size: clamp(2.4rem, 5.4vw, 5rem); }
.site-section-title__word--accent,
.site-section-title--dark .site-section-title__word--accent {
  background: none !important;
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}

/* Eyebrow = home ka ".label" (dash + uppercase) */
.site-section-eyebrow,
.about-studio-banner-eyebrow,
.pn-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--th-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange) !important;
}
.site-section-eyebrow::before,
.about-studio-banner-eyebrow::before,
.pn-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.text-center .site-section-eyebrow,
.about-studio-banner-eyebrow--center { justify-content: center; }

.site-section-description { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }

.price-mono, .dhv-price, .market-ticker__price { font-family: var(--th-mono); }

::selection { background: var(--orange); color: #fff; }

/* 3. HEADER + TICKER + PROGRESS ---------------------------------------------- */
header[data-acm-header] { transition: transform .6s var(--ease); }

.site-navbar-bar {
  background: rgba(14, 10, 21, .55) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-dark) !important;
  box-shadow: none !important;
  transition: background .4s;
}
html.th-solid .site-navbar-bar { background: rgba(14, 10, 21, .9) !important; }

/* light logo on dark header (home jaisa) */
.site-navbar-bar .site-logo img { content: url("/home-new/assets/img/logo-anjali-light.png"); }

.site-navbar .site-nav-link {
  position: relative;
  color: rgba(255, 255, 255, .78) !important;
}
.site-navbar .site-nav-link:hover,
.site-navbar .site-nav-link--active { color: #fff !important; }
.site-navbar a.site-nav-link::before,
.site-navbar a.site-nav-link::after {
  content: none;
}
.site-navbar a.site-nav-link::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 6px;
  height: 2px;
  border: 0;
  box-shadow: none;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-navbar a.site-nav-link:hover::after,
.site-navbar a.site-nav-link--active::after { transform: scaleX(1); transform-origin: left; }

.site-navbar :is(.site-navbar-cta-link, a[href*="login"]) { color: rgba(255, 255, 255, .85) !important; }
.site-navbar .site-navbar-cta-secondary {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}
.site-navbar button[aria-controls="mobile-nav-drawer"] {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.market-ticker {
  background: rgba(14, 10, 21, .78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark) !important;
  color: #fff;
}
.market-ticker * { border-color: var(--line-dark) !important; }
.market-ticker .slash-ribbon__item { color: #fff; }
.market-ticker .text-brand-primary,
.market-ticker .slash-ribbon__item > :first-child { color: var(--orange) !important; }
.market-ticker .price-mono, .market-ticker__price { color: #fff !important; }
.market-ticker .text-emerald-600 { color: #22c55e !important; }
.market-ticker .text-rose-500 { color: #ff5a6e !important; }

.scroll-progress-track { height: 3px !important; background: transparent !important; z-index: 300 !important; }
.scroll-progress-bar { background: linear-gradient(90deg, var(--orange), var(--orange-2)) !important; }

/* 4. HERO, SHEETS, DARK BANDS ------------------------------------------------- */
.detail-page > section.detail-page-hero,
.detail-page-hero,
[data-th="hero"] {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(50% 50% at 74% 44%, rgba(255, 106, 43, .22), transparent 70%),
    radial-gradient(40% 50% at 8% 92%, rgba(120, 70, 200, .18), transparent 70%),
    linear-gradient(180deg, #0e0a15 0%, #150f20 60%, #0e0a15 100%) !important;
  padding-bottom: calc(clamp(2rem, 4vw, 3.5rem) + 40px) !important;
}
/* masked 64px grid (home hero) */
.detail-page-hero::before,
[data-th="hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}
:is(.detail-page-hero, [data-th="hero"], [data-th="dark"], .th-dark, .markets-features-band--dark, .about-dual-rail, .pn-duo--terminal)
  :is(.site-section-title, h1, h2, h3, h4) { color: #fff; }
:is(.detail-page-hero, [data-th="hero"]) :is(p, li):not([class*="eyebrow"]):not([class*="kicker"]):not(.dhv-card *) { color: var(--white-soft); }
:is(.detail-page-hero, [data-th="hero"]) :is(.bg-white, .bg-white\/90, .bg-white\/80):not(.dhv-card):not(.premium-button) {
  background-color: rgba(255, 255, 255, .05) !important;
  border-color: var(--line-dark) !important;
}

/* hero ke andar light showcase panel -> transparent glass */
.detail-page-hero .detail-page-hero-showcase {
  background: rgba(255, 255, 255, .025) !important;
  border-color: var(--line-dark) !important;
  box-shadow: none !important;
}

/* hero mockup cards -> glass chips (home .hchip) */
.dhv-card--light,
.dhv-card--accent-soft,
.dhv-blog-chip,
.dhv-blog-simple-chip {
  background: rgba(22, 16, 33, .66) !important;
  background-color: rgba(22, 16, 33, .66) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35) !important;
  color: #fff !important;
  border-radius: 18px !important;
}
:is(.dhv-card--light, .dhv-card--accent-soft, .dhv-blog-chip, .dhv-blog-simple-chip) :is(p, span, strong, b, div, h3, h4, small) { color: inherit; }
:is(.dhv-card--light, .dhv-card--accent-soft, .dhv-blog-chip, .dhv-blog-simple-chip) .text-brand-primary { color: var(--orange) !important; }
:is(.dhv-card--light, .dhv-card--accent-soft) .dhv-price { color: #fff !important; }

/* Light content "sheets": rounded top + overlap (home .sheet) */
.detail-page > section:not(.detail-page-hero):not(.markets-features-band--dark):not(.about-dual-rail):not(.pn-duo--terminal):not([data-th]),
.detail-page > div > section:not(.markets-features-band--dark):not(.about-dual-rail):not(.pn-duo--terminal):not([data-th]),
[data-th="sheet"] {
  background-color: var(--sheet) !important;
}
.detail-page > section.detail-page-hero + :is(section, div),
[data-th="hero"] + :is(section, div) {
  position: relative;
  z-index: 3;
  margin-top: -40px !important;
  border-radius: 40px 40px 0 0;
  background-color: var(--sheet);
  overflow: clip;
}
.detail-page > section.bg-white:not(.detail-page-hero),
.detail-page section .bg-white.section-shell:not(.detail-page-hero),
.detail-page .bg-\[\#faf8f5\],
.detail-page .bg-\[\#f4f6fa\] { background-color: var(--sheet) !important; background-image: none !important; }

/* Dark bands: home ka .dark-band (rounded top + corner glow) */
.markets-features-band--dark,
.about-dual-rail,
.pn-duo--terminal,
[data-th="dark"] {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(50% 40% at 80% 0%, rgba(255, 106, 43, .18), transparent 70%),
    var(--deep) !important;
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  /* extra 40px for the next sheet's overlap, keeping the band's own padding-bottom */
  border-bottom: 40px solid transparent;
  background-clip: border-box;
  z-index: 4;
}
:is(.markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, [data-th="dark"]) + :is(section, div) {
  position: relative;
  z-index: 5;
  margin-top: -40px;
  border-radius: 40px 40px 0 0;
  overflow: clip;
}
:is(.markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, [data-th="dark"]) p { color: var(--white-soft); }

/* 5. BUTTONS: pill + fill sweep up (home .btn) -------------------------------- */
.premium-button,
.btn-premium-primary,
.btn-brand,
.btn-brand-outline,
.get-started__btn,
.newsletter-pill-btn,
.pn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
  min-height: 46px;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease) !important;
}
.premium-button:hover { transform: none; filter: none; }
.premium-button::after,
.btn-premium-primary::after,
.btn-brand::after,
.btn-brand-outline::after,
.get-started__btn::after,
.newsletter-pill-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit;
  background: #fff !important;
  transform: translateY(102%) !important;
  transition: transform .5s var(--ease) !important;
}
:is(.premium-button, .btn-premium-primary, .btn-brand, .btn-brand-outline, .get-started__btn, .newsletter-pill-btn):hover::after { transform: translateY(0) !important; }
:is(.premium-button, .btn-premium-primary, .btn-brand, .btn-brand-outline, .get-started__btn, .newsletter-pill-btn) svg { transition: transform .4s var(--ease); }
:is(.premium-button, .btn-premium-primary, .btn-brand, .btn-brand-outline, .get-started__btn, .newsletter-pill-btn):hover svg { transform: translateX(4px); }

/* primary = orange; hover -> white fill + ink text */
.btn-premium-primary,
.btn-brand,
a.bg-brand-primary.btn-brand,
button.bg-brand-primary.btn-brand {
  background: var(--orange) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(255, 106, 43, .32) !important;
}
:is(.btn-premium-primary, .btn-brand):hover { color: var(--ink) !important; }

/* secondary on light = .btn-line (ink fill) */
.btn-brand-outline {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.btn-brand-outline::after { background: var(--ink) !important; }
.btn-brand-outline:hover { color: #fff !important; border-color: var(--ink) !important; }

/* secondary on dark = .btn-ghost (white fill) */
:is(.detail-page-hero, [data-th="hero"], [data-th="dark"], .markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, footer, .site-navbar) .btn-brand-outline,
.site-navbar .site-navbar-cta-secondary {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
}
:is(.detail-page-hero, [data-th="hero"], [data-th="dark"], .markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, footer, .site-navbar) .btn-brand-outline::after { background: #fff !important; }
:is(.detail-page-hero, [data-th="hero"], [data-th="dark"], .markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, footer, .site-navbar) .btn-brand-outline:hover,
.site-navbar .site-navbar-cta-secondary:hover { color: var(--ink) !important; border-color: #fff !important; }

/* 6. CARDS, FAQ, FORMS -------------------------------------------------------- */
.detail-feature-card,
.page-feature-card,
.markets-feature-card:not(.markets-feature-card--on-dark),
.get-started__card,
.premium-card {
  border-radius: 22px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  box-shadow: 0 30px 60px rgba(36, 27, 52, .06) !important;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s !important;
}
:is(.detail-feature-card, .page-feature-card, .markets-feature-card:not(.markets-feature-card--on-dark), .get-started__card):hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(36, 27, 52, .1) !important;
  border-color: rgba(255, 106, 43, .4) !important;
}
.markets-feature-card--on-dark {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--line-dark) !important;
  border-radius: 22px !important;
  transition: border-color .45s, background-color .45s;
}
.markets-feature-card--on-dark:hover { border-color: rgba(255, 106, 43, .45) !important; background: rgba(255, 255, 255, .07) !important; }

/* Light cards: titles and body copy stay dark. Icons, badges and buttons keep their own colors. */
:is(
  .get-started__card,
  .detail-feature-card,
  .page-feature-card,
  .markets-feature-card:not(.markets-feature-card--on-dark),
  .premium-card,
  .account-types-panel__card
) {
  color: var(--text);
  --brand-heading: 270 29% 12%;
  --brand-paragraph: 273 9% 43%;
  --brand-ink: #241b34;
}
:is(
  .get-started__card,
  .detail-feature-card,
  .page-feature-card,
  .markets-feature-card:not(.markets-feature-card--on-dark),
  .premium-card,
  .account-types-panel__card
) :is(h1, h2, h3, h4, h5, h6, .get-started__title, strong, b) {
  color: var(--text) !important;
}
:is(
  .get-started__card,
  .detail-feature-card,
  .page-feature-card,
  .markets-feature-card:not(.markets-feature-card--on-dark),
  .premium-card,
  .account-types-panel__card
) :is(p, li, dd, .get-started__desc) {
  color: var(--muted) !important;
}
.markets-faq-wrap [data-scroll-own] > div :is(button, p, span, li) {
  color: var(--text);
}

/* FAQ (home card recipe) */
.markets-faq-wrap [data-scroll-own] > div {
  border-radius: 18px !important;
  border-color: var(--line) !important;
  background: #fff !important;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.markets-faq-wrap [data-scroll-own] > div:has(> button[aria-expanded="true"]) {
  border-color: rgba(255, 106, 43, .45) !important;
  box-shadow: 0 18px 40px rgba(36, 27, 52, .08);
}
.markets-faq-wrap button[aria-expanded] { font-family: var(--th-display); font-weight: 700; }

/* Forms */
.premium-input,
.premium-form :is(input, select, textarea),
.cfd-calculator__input,
.cfd-calculator__currency-select {
  border-radius: 14px !important;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
:is(.premium-input, .premium-form input, .premium-form select, .premium-form textarea, .cfd-calculator__input, .cfd-calculator__currency-select):focus-visible {
  outline: none !important;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 106, 43, .16) !important;
}
.premium-card { border-radius: var(--th-radius) !important; }

/* Calculators: home ka dark calc panel */
.cfd-calculator {
  border-radius: 36px !important;
  background: radial-gradient(60% 70% at 0% 0%, rgba(255, 106, 43, .2), transparent 60%), var(--ink) !important;
}

/* Images / media frames */
.detail-page :is(.scene-3d, figure, .rounded-2xl, .rounded-3xl):has(> img:not([class*="cutout"])) { border-radius: var(--th-radius); }

/* Focus ring for keyboard users */
main main :is(a, button):focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* 7. FOOTER (home .footer) ----------------------------------------------------- */
footer {
  background: var(--deep) !important;
  color: var(--white-soft) !important;
  position: relative;
  z-index: 6;
  margin-top: -40px;
  border-radius: 40px 40px 0 0;
  overflow: clip !important;
}
footer .newsletter-spotlight {
  background:
    radial-gradient(50% 50% at 50% 40%, rgba(255, 106, 43, .2), transparent 70%),
    var(--deep) !important;
}
footer :is([class*="bg-white"], .bg-brand-section):not(.premium-button):not(.btn-brand):not(.newsletter-pill-btn) {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--line-dark) !important;
  box-shadow: none !important;
}
footer :is(h2, h3, h4, strong) { color: #fff; }
footer .footer-nav-col :is(h2, h3, h4, p:first-child) { color: var(--orange) !important; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
footer .footer-nav-col a {
  display: inline-block;
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 600;
  transition: color .3s, transform .3s var(--ease);
}
footer .footer-nav-col a:hover { color: #fff !important; transform: translateX(4px); }
footer .footer-social-icon {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--line-dark) !important;
  color: #fff !important;
  transition: background-color .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
footer .footer-social-icon:hover { background: var(--orange) !important; border-color: var(--orange) !important; transform: translateY(-3px); }
footer .text-brand-primary, footer [class*="eyebrow"] { color: var(--orange) !important; }
footer :is(.border-t, .border-b, [class*="border-brand-border"]) { border-color: var(--line-dark) !important; }
footer :is(img[src*="logo-anjali-acm"]) { content: url("/home-new/assets/img/logo-anjali-light.png"); }
.slash-ribbon--newsletter { background: var(--orange) !important; color: #fff !important; }
.slash-ribbon--newsletter * { color: #fff !important; }

/* Chat FAB stays orange; ensure on top of dark footer */
.acm-support-widget button { box-shadow: 0 14px 34px rgba(255, 106, 43, .38) !important; }

/* 8. REDUCED MOTION ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .premium-button::after, .btn-premium-primary::after, .btn-brand::after, .btn-brand-outline::after { transition: none !important; }
  :is(.detail-feature-card, .page-feature-card, .get-started__card):hover { transform: none; }
  header[data-acm-header] { transition: none; }
}

/* Mobile */
@media (max-width: 760px) {
  .detail-page > section.detail-page-hero + :is(section, div),
  [data-th="hero"] + :is(section, div),
  :is(.markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, [data-th="dark"]),
  :is(.markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, [data-th="dark"]) + :is(section, div),
  footer { border-radius: 28px 28px 0 0; margin-top: -28px; }
}

/* 9. DETAIL PAGES — banner dark, uske baad light sheet.
   Account pages (.detail-page--accounts) aur hero / footer same rehte hain. */
.detail-page:not(.detail-page--accounts) :is(
  .markets-features-band--dark,
  .about-dual-rail,
  .pn-duo--terminal,
  .shade-panel,
  .markets-cta-band--dark,
  section[data-th="dark"]
):not(.detail-page-hero):not([data-th="hero"]) {
  color: var(--text) !important;
  background: var(--sheet) !important;
  background-image: none !important;
  box-shadow: 0 18px 40px rgba(36, 27, 52, .06) !important;
}
.detail-page:not(.detail-page--accounts) :is(
  .markets-band-veil,
  .markets-band-glow,
  .about-dual-rail__bg,
  .pn-duo__mesh,
  .shade-panel__media,
  .shade-panel__shade,
  .shade-panel__glow
) {
  display: none !important;
}
.detail-page:not(.detail-page--accounts) :is(
  .markets-features-band--dark,
  .about-dual-rail,
  .pn-duo--terminal,
  .shade-panel,
  .markets-cta-band--dark,
  section[data-th="dark"]
) :is(
  .site-section-title,
  .site-section-title__word,
  .site-section-title--on-dark,
  .about-dual-rail__heading,
  .about-dual-card__title,
  .pn-title,
  .pn-title--light,
  h1, h2, h3, h4
) {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor;
}
.detail-page:not(.detail-page--accounts) :is(
  .markets-features-band--dark,
  .about-dual-rail,
  .pn-duo--terminal,
  .shade-panel,
  .markets-cta-band--dark,
  section[data-th="dark"]
) :is(
  p,
  li,
  .site-section-description,
  .site-section-description--on-dark,
  .about-dual-rail__lead,
  .about-dual-card__label,
  .about-dual-card__row p,
  .pn-prose--light p,
  .pn-lead--light,
  .get-started__subtitle,
  .pn-dock__meta .pn-kicker
) {
  color: #5c5468 !important;
}
.detail-page:not(.detail-page--accounts) :is(
  .markets-features-band--dark,
  .about-dual-rail,
  .pn-duo--terminal,
  .shade-panel,
  .markets-cta-band--dark
) :is(
  [class*="eyebrow"],
  .pn-kicker--dark,
  .text-brand-primary,
  .site-section-title__word--accent
) {
  color: var(--orange) !important;
  -webkit-text-fill-color: currentColor;
}
.detail-page:not(.detail-page--accounts) :is(
  .markets-feature-card--on-dark,
  .about-dual-card,
  .about-dual-card--muted,
  .about-dual-card--brand
) {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(36, 27, 52, .1) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 40px rgba(36, 27, 52, .08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.detail-page:not(.detail-page--accounts) .markets-feature-card--on-dark h3,
.detail-page:not(.detail-page--accounts) .about-dual-card :is(h3, h4, .about-dual-card__title) {
  color: var(--text) !important;
}
.detail-page:not(.detail-page--accounts) .markets-feature-card--on-dark p,
.detail-page:not(.detail-page--accounts) .about-dual-card :is(p, .about-dual-card__row p) {
  color: #5c5468 !important;
}
.detail-page:not(.detail-page--accounts) .markets-features-band--dark .markets-feature-card:hover,
.detail-page:not(.detail-page--accounts) .about-dual-card:hover {
  background: #fff !important;
  border-color: rgba(255, 106, 43, .45) !important;
  box-shadow: 0 22px 48px rgba(36, 27, 52, .12) !important;
}
.detail-page:not(.detail-page--accounts) .about-dual-card__icon--x {
  background: rgba(28, 21, 38, .06) !important;
  color: #5c5468 !important;
}
.detail-page:not(.detail-page--accounts) .about-dual-card__icon--check {
  background: rgba(255, 106, 43, .14) !important;
  color: var(--orange) !important;
}
.detail-page:not(.detail-page--accounts) .pn-chip {
  color: #c2410c !important;
  background: rgba(255, 106, 43, .1) !important;
  border-color: rgba(255, 106, 43, .35) !important;
}
.detail-page:not(.detail-page--accounts) .pn-cta--ghost-light,
.detail-page:not(.detail-page--accounts) :is(.shade-panel, .markets-cta-band--dark) a[class*="bg-white/"] {
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: rgba(28, 21, 38, .22) !important;
  backdrop-filter: none !important;
}
.detail-page:not(.detail-page--accounts) .pn-cta--ghost-light:hover,
.detail-page:not(.detail-page--accounts) :is(.shade-panel, .markets-cta-band--dark) a[class*="bg-white/"]:hover {
  background: rgba(255, 106, 43, .08) !important;
  border-color: rgba(255, 106, 43, .45) !important;
  color: var(--text) !important;
}
.detail-page:not(.detail-page--accounts) .market-highlights-panel__notes p {
  background: #fff !important;
  border-color: rgba(36, 27, 52, .1) !important;
  color: #5c5468 !important;
}

/* 10. QA FIXES ------------------------------------------------------------------ */

/* Mobile drawer: white panel, keep dark ink + dark logo (light-logo swap is for the bar only) */
#mobile-nav-drawer { color: var(--text); }
#mobile-nav-drawer .site-logo img { content: normal; }
#mobile-nav-drawer :is(a, button, span, p):not([class*="text-brand-primary"]):not(.btn-brand):not(.premium-button):not([class*="bg-brand"]) { -webkit-text-fill-color: currentColor; }

/* Dark accounts panel (how-to-deposit "Deposit Methods") */
.accounts-dark-panel :is(.site-section-title, .site-section-title__word:not(.site-section-title__word--accent), h2, h3, h4) {
  color: #fff !important;
  -webkit-text-fill-color: currentColor;
}

/* White chips / blobs inside dark heroes -> glass */
:is(.detail-page-hero, [data-th="hero"]) .dhv-shade--soft {
  background: radial-gradient(circle, rgba(255, 106, 43, .16) 0%, rgba(255, 106, 43, .05) 45%, transparent 72%) !important;
}
:is(.detail-page-hero, [data-th="hero"]) :is(.dhv-blog-simple-stats > div, .dhv-timeline__step) {
  background: rgba(22, 16, 33, .66) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3) !important;
  color: #fff;
}
:is(.detail-page-hero, [data-th="hero"]) .dhv-timeline__step.is-hot,
:is(.detail-page-hero, [data-th="hero"]) .dhv-blog-simple-stats > div:first-child {
  border-color: rgba(255, 106, 43, .45) !important;
  background: linear-gradient(135deg, rgba(255, 106, 43, .16), rgba(22, 16, 33, .7)) !important;
}
:is(.detail-page-hero, [data-th="hero"]) :is(.dhv-blog-simple-stats > div, .dhv-timeline__step) :is(b, strong) { color: #fff !important; }
:is(.detail-page-hero, [data-th="hero"]) .dhv-blog-simple-stats > div:first-child strong { color: var(--orange) !important; }
:is(.detail-page-hero, [data-th="hero"]) :is(.dhv-blog-simple-stats > div, .dhv-timeline__step) :is(span, small, p) { color: rgba(255, 255, 255, .62) !important; }
:is(.detail-page-hero, [data-th="hero"]) .dhv-timeline__step i { background: rgba(255, 255, 255, .55); }
:is(.detail-page-hero, [data-th="hero"]) .dhv-timeline__step.is-hot i { background: var(--orange); }
:is(.detail-page-hero, [data-th="hero"]) .dhv-gauge__value strong { color: #fff !important; }

/* First sheet after a hero that has no top padding of its own (/contact) */
.detail-page > section.detail-page-hero + section:not([class*="pt-"]):not([class*="py-"]),
[data-th="hero"] + section:not([class*="pt-"]):not([class*="py-"]) {
  padding-top: clamp(2.75rem, 5vw, 4.5rem) !important;
}

/* Pages without a dark hero (404 etc.): solid header so nav text stays readable */
html.th-nohero .site-navbar-bar { background: rgba(14, 10, 21, .94) !important; }
html.th-nohero .market-ticker { background: rgba(14, 10, 21, .9) !important; }

/* Pill hover: white sweep needs dark text */
:is(.get-started__btn, .newsletter-pill-btn):hover,
:is(.get-started__btn, .newsletter-pill-btn):focus-visible {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
}

/* White / glass pills on detail pages: hover fill is white, so the label stays black */
:is(a, button):is(.premium-button, .btn-brand-outline, .pn-cta)[class*="bg-white"]:hover,
:is(a, button):is(.premium-button, .btn-brand-outline, .pn-cta)[class*="bg-white"]:focus-visible {
  color: #1c1526 !important;
  -webkit-text-fill-color: #1c1526 !important;
}
:is(a, button):is(.premium-button, .btn-brand-outline, .pn-cta)[class*="bg-white"]:hover :is(span, svg, strong, em),
:is(a, button):is(.premium-button, .btn-brand-outline, .pn-cta)[class*="bg-white"]:focus-visible :is(span, svg, strong, em) {
  color: #1c1526 !important;
  -webkit-text-fill-color: #1c1526 !important;
}
:is(.get-started__btn, .newsletter-pill-btn) :is(span, svg) { position: relative; z-index: 1; }
:is(.get-started__btn, .newsletter-pill-btn):hover :is(span, svg) { color: var(--ink) !important; }

/* Last content block clears the footer overlap */
:is(.page-shell__main--sticky-safe, main main) { padding-bottom: 40px; }
@media (max-width: 760px) {
  :is(.markets-features-band--dark, .about-dual-rail, .pn-duo--terminal, [data-th="dark"]) { border-bottom-width: 28px; }
  :is(.page-shell__main--sticky-safe, main main) { padding-bottom: 28px; }
}

/* Tool banner photos stay visible on first paint (motion used to fade them in from 0). */
.dhv-compose--toolimg img { opacity: 1 !important; }

/* Detail-page photos paint with the page. Scroll reveals were holding their parents at opacity 0 until they entered the viewport, so images looked unloaded. */
.acm-img-ready {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

/* Featured blog card sits on its own dark image shade */
.blog-featured .blog-featured__title { color: #fff !important; }
.blog-featured .blog-featured__excerpt { color: rgba(255, 255, 255, .78) !important; }
.blog-featured:hover .blog-featured__title { color: #ffb089 !important; }