/*
Theme Name: 5Trade Custom
Theme URI: https://5trade.live/
Author: Novamira
Description: Custom PHP theme for the 5Trade multi-market trading platform marketing site. Ported 1:1 from the 5Trade React source site's design tokens and components.
Version: 1.1.0
Requires PHP: 8.0
Text Domain: 5trade-custom
*/

:root {
  /* ── Layout gutter (matches React --mobile-padding / --desktop-padding:
   *  16px below 768px, 32px at 768px+). Container-style classes below
   *  reference var(--gutter) instead of hardcoding 24px so the
   *  horizontal padding actually changes at the same breakpoint as the
   *  original site instead of sitting at a fixed value on every
   *  screen size. ── */
  --gutter: 16px;

  /* ── Brand / Primary (matches React --primary) ── */
  --accent: #BD1E3E;
  --accent-dark: #A01934;
  --accent-darker: #8A1530;
  --accent-soft: #FDF2F4;

  /* ── Backgrounds ── */
  --bg: #FFFFFF;
  --wash-grey: #F9FAFB;
  --surface-alt: #F3F4F6;
  --surface-card-hover: #E5E7EB;

  /* ── Text (matches React --text-primary / --text-secondary / --text-tertiary) ── */
  --ink: #111827;
  --ink-heading: #0F172A;
  --muted: #6B7280;
  --muted-strong: #374151;
  --muted-soft: #4B5563;
  --faint: #9CA3AF;

  /* ── Borders ── */
  --border: #F3F4F6;
  --border-strong: #E5E7EB;

  /* ── Status / Trading (matches React) ── */
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --danger: #BD1E3E;
  --danger-bg: #FDF2F4;

  /* ── Risk banner (matches React RiskDisclosure) ── */
  --risk-bg: #FEF3C7;
  --risk-border: #F59E0B;
  --risk-text: #78350F;
  --risk-icon: #B45309;

  /* ── Navy / dark surfaces ── */
  --navy: #0F172A;
  --navy-dark: #0B1120;

  /* ── Auth pages (unchanged — not present in React source) ── */
  --auth-blue: #1F72D0;
  --auth-blue-light: #2E86DE;
  --auth-teal: #12879F;

  --font: Inter, "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --container: 1200px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

/* Every heading below is styled entirely by its own inline font-size/
   weight/color (matching each page's exact design), so this just
   cancels the browser's default h1–h6 margin/weight/size — without it,
   converting the old div-based "headings" to real semantic tags would
   visually shift spacing throughout the site. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; }

button { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }

img { max-width: 100%; display: block; }

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.nav-item:hover .nav-dropdown { display: block !important; }
.nav-dropdown.is-open { display: block !important; }

.hov-brand-outline:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft) !important; }
.hov-darken:hover { background: var(--accent-dark) !important; }
.hov-menurow:hover { background: rgba(189, 30, 62, 0.06) !important; color: var(--accent) !important; }
.hov-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(15,23,42,.35) !important; }
.hov-card-border:hover { border-color: rgba(189,30,62,.35) !important; box-shadow: 0 20px 40px -28px rgba(15,23,42,.4); }
.hov-border-only:hover { border-color: rgba(189,30,62,.25); box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
.hov-tile:hover { border-color: rgba(211,47,47,.25); box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateY(-2px); }
.hov-highlight-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: rgba(189,30,62,.35); }
.hov-footer-link:hover { color: var(--accent) !important; }
.hov-cta-dark:hover { background: var(--navy-dark) !important; }

::selection { background: var(--accent-soft); color: var(--ink); }

[data-panel][hidden] { display: none !important; }
.accordion-body[hidden] { display: none !important; }
.risk-banner.is-closed { display: none !important; }
.chat-bubble[hidden] { display: none !important; }
/* These three elements carry an inline display: style (flex/grid) for
   their visible layout, which — being inline — silently wins over the
   [hidden] attribute's default `display:none` from the UA stylesheet.
   Same fix as the three rules above, just extended to cover the blog
   category filter, academy level filter, and IPO status tabs, which
   otherwise looked like they filtered (the tab pill highlight moves)
   while the cards underneath never actually hid. */
[data-blog-cat][hidden] { display: none !important; }
[data-academy-level][hidden] { display: none !important; }
[data-tab-panel][hidden] { display: none !important; }

.tab-pill { cursor: pointer; }
.tab-pill.is-active { background: var(--accent) !important; color: #ffffff !important; }

/* ══════════════════════════════════════════
   Header — ported from React Header.module.css
   ══════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(189, 30, 62, 0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
/* WordPress injects a fixed admin toolbar (32px desktop / 46px on screens
   ≤782px) above the page for logged-in users. Our sticky header defaults to
   top:0, which is correct for logged-out visitors but sticks partly under/
   behind that toolbar for logged-in admins, visually cropping whatever sits
   just below it (the hero eyebrow/headline). This keeps the header pinned
   directly beneath the admin bar instead, whichever height WP is using. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
.site-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo { display: flex; align-items: center; flex: none; }
.site-logo img { height: 32px; width: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 28px; flex: 1; }
.nav-link {
  text-decoration: none;
  color: var(--muted-soft);
  font-weight: 500;
  font-size: 15px;
  transition: color .2s ease;
  white-space: nowrap;
}
.nav-link:hover { color: var(--accent); }
.nav-link.is-active { color: var(--accent); font-weight: 700; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--muted-soft); font-weight: 500; font-size: 15px; background: none;
}
.nav-toggle.is-active-parent { color: var(--accent); font-weight: 700; }
.nav-toggle .chev { font-size: 12px; color: var(--faint); transition: transform .2s ease; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.14);
  padding: 8px;
  z-index: 110;
}
/* .nav-item's hoverable box only wraps the toggle label itself — the
   dropdown is absolutely positioned, so it never extends the parent's
   box down to meet it. That leaves the 14px gap above (the visual
   spacing between toggle and card, kept as-is) as a "dead zone": with
   nothing painted there, moving the cursor through it isn't hovering
   .nav-item *or* .nav-dropdown, so :hover ends and the dropdown closes
   before the cursor ever reaches it. This invisible strip is a
   descendant of .nav-dropdown itself, covering exactly that gap, so
   crossing it keeps the hover chain (and the dropdown) intact — with
   no visual change. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}
.nav-dropdown a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 14px; color: var(--muted-strong); font-weight: 500;
}
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.btn-outline {
  height: 32px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 13px;
  border: 1.5px solid var(--border-strong); color: var(--ink); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-primary {
  height: 32px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 13px;
  background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(189,30,62,.28);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════
   Risk banner — ported from React RiskDisclosure
   ══════════════════════════════════════════ */
.risk-banner {
  background: var(--risk-bg);
  border-bottom: 1px solid var(--risk-border);
  color: var(--risk-text);
  font-size: 12px;
  line-height: 1.5;
}
.risk-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.risk-banner-inner strong { font-weight: 700; color: var(--risk-text); }
.risk-banner-inner a { color: var(--risk-text); text-decoration: underline; font-weight: 600; white-space: nowrap; }
.risk-banner-inner a:hover { color: #451A03; }
.risk-banner-close { color: var(--risk-text); margin-left: auto; padding: 4px; border-radius: 4px; flex: none; }
.risk-banner-close:hover { background: rgba(120,53,15,.12); }

/* ══════════════════════════════════════════
   Footer — ported from React Footer.module.css
   ══════════════════════════════════════════ */
.site-footer { background: var(--wash-grey); border-top: 1px solid var(--border-strong); padding: 40px 0 24px; }
.footer-divider { border-top: 1px solid var(--border-strong); margin: 28px 0; }
.footer-brand-desc { font-size: 13px; color: var(--muted); line-height: 1.65; max-width: 320px; }
.footer-social-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--border-strong);
  background: #fff; display: flex; align-items: center; justify-content: center; color: var(--muted-strong);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-col-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink); text-transform: uppercase; margin: 0 0 12px; }
.footer-link { font-size: 13.5px; font-weight: 500; color: var(--muted); display: block; padding: 4.5px 0; }
.footer-link:hover { color: var(--accent); }
.footer-risk-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); margin: 0 0 10px; }
.footer-risk-text { display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.6; color: var(--faint); max-height: 56px; overflow: hidden; position: relative; transition: max-height .4s ease; }
.footer-risk-text::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 36px; background: linear-gradient(to bottom, transparent, var(--wash-grey)); pointer-events: none; transition: opacity .3s ease; }
.footer-risk-text.is-expanded { max-height: 2000px; }
.footer-risk-text.is-expanded::after { opacity: 0; }
.footer-risk-text p { margin: 0; }
.footer-readmore { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 10px; }
.footer-readmore:hover { opacity: .75; }
.footer-copyright { font-size: 12px; color: var(--faint); }
.footer-gotop {
  position: fixed; bottom: 24px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(189,30,62,.35); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease; z-index: 999;
}
.footer-gotop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.footer-gotop:hover { background: var(--accent-dark); transform: translateY(-3px); }
/* Footer link grid — real site forces exactly 6 fixed columns on desktop
   (never wraps based on content width, columns just narrow), and exactly
   2 columns on mobile. An auto-fit/minmax approach wraps earlier than this
   at in-between widths, which is what was happening before. */
.footer-bottom-bar { display:flex; flex-direction:column; gap:8px; }
@media (min-width: 769px) { .footer-bottom-bar { flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
@media (min-width: 540px) and (max-width: 768px) {
  .footer-link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .footer-link-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; }
}

/* FAQ-lite accordion (Open Account page) — native <details>/<summary>,
   individual cards with a CSS-only +/− marker, ported exactly from
   OpenAccountPage.module.css rather than the chevron-JS pattern used
   elsewhere on the site. */
.faq-lite-item {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 4px 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-lite-item[open] {
  border-color: rgba(189, 30, 62, .32);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.faq-lite-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-lite-item summary::-webkit-details-marker { display: none; }
.faq-lite-item summary::after {
  content: '+';
  color: var(--accent);
  font-size: 22px;
  font-weight: 700;
  flex: none;
}
.faq-lite-item[open] summary::after { content: '−'; }
.faq-lite-item p { color: #4B5563; font-size: 14px; line-height: 1.7; padding: 0 0 16px; margin: 0; }

/* ══════════════════════════════════════════
   Trustpilot badge — ported from React TrustpilotBadge
   ══════════════════════════════════════════ */
.trustpilot-badge {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 12px; max-width: 100%;
  border-radius: 12px; background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(15,23,42,.06); text-decoration: none; color: #1F2937; font-size: 12.5px; font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
.trustpilot-badge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.1); }
.trustpilot-badge .tp-label { color: var(--muted); font-weight: 500; }
.trustpilot-badge .tp-rating-label { font-weight: 700; color: var(--ink); }
.trustpilot-stars { display: inline-flex; gap: 2px; }
.trustpilot-star { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: #00B67A; color: #fff; font-size: 10px; }
.trustpilot-badge .tp-meta { color: var(--muted-soft); font-size: 13px; }
.trustpilot-badge .tp-meta strong { color: var(--ink); font-weight: 700; }
.trustpilot-badge .tp-brand { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); font-size: 13.5px; margin-left: 4px; }
/* Matches TrustpilotBadge.module.css's own @media (max-width: 600px):
   the review-count text drops to its own full-width centered line rather
   than trying to stay inline with the label/stars/brand. */
@media (max-width: 600px) {
  .trustpilot-badge { justify-content: center; text-align: center; gap: 8px; }
  .trustpilot-badge .tp-meta { flex-basis: 100%; text-align: center; }
}

.mobile-menu-btn { display: none; color: var(--ink); padding: 4px; }
.mobile-create-btn { display: none; }

.mobile-overlay {
  position: fixed; top: 56px; left: 0; right: 0;
  background: rgba(255,255,255,.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 40px rgba(0,0,0,.1);
  padding: 32px 24px; transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: all .35s cubic-bezier(.16,1,.3,1); z-index: 99;
  max-height: calc(100vh - 56px); overflow-y: auto; border-radius: 0 0 24px 24px;
}
.mobile-overlay.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav { display: flex; flex-direction: column; gap: 16px; }
.mobile-nav-link { color: var(--muted-strong); font-size: 18px; font-weight: 500; padding: 12px 16px; border-radius: 12px; }
.mobile-nav-link.is-active { background: rgba(189,30,62,.1); color: var(--accent); font-weight: 700; }
.mobile-nav-group { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); margin: 4px 0; }
.mobile-nav-group-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 8px 16px 4px; }
.mobile-nav-sublink { color: var(--muted-strong); font-size: 15px; font-weight: 500; padding: 10px 16px; border-radius: 10px; }
.mobile-nav-sublink.is-active { background: rgba(189,30,62,.08); color: var(--accent); font-weight: 700; }
.mobile-auth { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.06); }
.mobile-auth .btn-outline, .mobile-auth .btn-primary { width: 100%; height: 48px; font-size: 15px; border-radius: 12px; }

/* Matches Header.module.css exactly: the source has a single cutover at
 * 768px (no intermediate compaction step), with .header, .desktopNav,
 * .desktopAuth and .mobileMenuBtn all switching together. A previous
 * pass here had moved this to 900px with an invented 1200px compaction
 * step, based on an incorrect assumption about the source's cutover
 * width — reverted to match the verified source value. */
@media (max-width: 768px) {
  .site-header-inner { height: 60px; }
  .site-logo img { height: 28px; }
  .site-nav, .header-actions .btn-outline, .header-actions .btn-primary { display: none; }
  .header-actions { gap: 8px; }
  .mobile-menu-btn { display: flex; }
  .mobile-create-btn { display: flex; height: 32px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
  .mobile-overlay { top: 60px; max-height: calc(100vh - 60px); }
}

/* ══════════════════════════════════════════
   Hero — ported from React HeroBanner.module.css
   ══════════════════════════════════════════ */
.hero-section {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 55%, #f8fafc 100%);
  color: var(--ink-heading);
  overflow: hidden;
}
.hero-glow-a {
  position: absolute; width: 60vw; height: 60vw; border-radius: 50%; left: 10%; top: -30%;
  background: radial-gradient(circle, rgba(189,30,62,.05) 0%, rgba(248,250,252,0) 70%); pointer-events: none;
}
.hero-glow-b {
  position: absolute; width: 50vw; height: 50vw; border-radius: 50%; right: 5%; bottom: -30%;
  background: radial-gradient(circle, rgba(15,23,42,.04) 0%, rgba(248,250,252,0) 70%); pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: rgba(189,30,62,.08); border: 1px solid rgba(189,30,62,.18); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-bottom: 22px;
}
.hero-headline {
  font-size: clamp(34px, 4.8vw, 58px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em;
  color: var(--ink-heading); margin: 0 0 18px;
}
.hero-accent {
  background: linear-gradient(135deg, var(--ink-heading) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Full-headline 3-stop gradient used on Market, About and Open Account page
   hero titles (ported exactly from ServicePage/AboutPage/OpenAccountPage
   .module.css) — different from .hero-accent above, which only tints part
   of the homepage headline. */
.grad-heading {
  background: linear-gradient(125deg, #0f172a 4%, #bd1e3e 52%, #7f1d1d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.grad-heading-alt {
  background: linear-gradient(128deg, #111827 2%, #bd1e3e 56%, #7f1d1d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.commodity-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #7f1d1d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.legal-heading {
  background: linear-gradient(130deg, #111827 0%, #bd1e3e 56%, #7f1d1d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.legal-list { margin:0; padding:0; display:grid; gap:8px; }
.legal-list li { list-style: none; position: relative; padding-left: 16px; color: #4B5563; line-height: 1.7; }
.legal-list li::before { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: 0; top: 10px; background: rgba(189,30,62,.7); }
.hero-sub { font-size: 17px; color: var(--muted-soft); line-height: 1.65; max-width: 520px; margin: 0 0 26px; }
.hero-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 32px; }
.hero-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-soft); font-weight: 500; }
.hero-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(15,23,42,.25); }
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 30px; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 28px rgba(189,30,62,.55);
  transition: all .2s ease;
}
.hero-btn-primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(189,30,62,.65); }
.hero-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 12px;
  background: rgba(255,255,255,.85); color: var(--accent); font-weight: 700; font-size: 15px;
  border: 1.5px solid rgba(189,30,62,.35); backdrop-filter: blur(4px); transition: all .2s ease;
}
.hero-btn-secondary:hover { background: #fff; color: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px rgba(189,30,62,.18); transform: translateY(-2px); }

.hero-dash-card {
  position: relative; width: 100%; height: 100%; background: #fff; border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06); box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.06);
  overflow: hidden; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
.hero-dash-head { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #FAFBFC; }
.hero-dash-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.hero-ticker-row { display: grid; grid-template-columns: repeat(3,1fr); padding: 14px 16px; border-bottom: 1px solid var(--border); background: #fff; }
.hero-ticker-cell { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; border-right: 1px solid var(--border); }
.hero-ticker-cell:last-child { border-right: none; }
.hero-ticker-cell:first-child { padding-left: 0; }
.hero-dash-foot { display: grid; grid-template-columns: repeat(3,1fr); padding: 14px 16px; border-top: 1px solid var(--border); background: #FAFBFC; }
.hero-foot-cell { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; border-right: 1px solid var(--border); }
.hero-foot-cell:last-child { border-right: none; }
.hero-foot-cell:first-child { padding-left: 0; }

.hero-float {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(15,23,42,.92); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 12px 28px rgba(15,23,42,.25);
  z-index: 2; white-space: nowrap;
}
.hero-float-top { top: -14px; right: -10px; }
.hero-float-bottom { bottom: -14px; left: -10px; background: var(--accent); border-color: rgba(255,255,255,.24); box-shadow: 0 12px 28px rgba(189,30,62,.35); }
.hero-float-ping {
  width: 8px; height: 8px; border-radius: 50%; background: #34D399; display: inline-block;
  box-shadow: 0 0 0 4px rgba(52,211,153,.25); animation: heroPing 1.6s ease-in-out infinite;
}
@keyframes heroPing { 0%,100% { box-shadow: 0 0 0 4px rgba(52,211,153,.25); } 50% { box-shadow: 0 0 0 8px rgba(52,211,153,.05); } }

.hero-usp-band {
  position: relative; z-index: 1; background: rgba(255,255,255,.70); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(15,23,42,.06); border-bottom: 1px solid rgba(15,23,42,.06);
}
.hero-usp-item { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; color: #1F2937; letter-spacing: .01em; }
.hero-usp-divider { width: 1px; height: 22px; background: rgba(15,23,42,.10); flex: none; }

/* Responsive - matches HeroBanner.module.css's two-tier breakpoints
 * (1024px, 768px, 480px) exactly, replacing the single 900px/!important
 * override that used to sit here and didn't reproduce the source's
 * per-element adjustments (button sizing, ticker/foot padding, float
 * pill repositioning, usp wrapping, etc). */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; padding: 64px var(--gutter) 56px; }
  .hero-copy { max-width: 100%; }
  .home-hero-dash-wrap { max-width: 540px; margin: 0 auto; aspect-ratio: 5/4; }
  .hero-usp-item { flex: 1 1 calc(50% - 14px); justify-content: flex-start; }
  .hero-usp-divider { display: none; }
  .home-usp-inner { flex-wrap: wrap; gap: 14px; padding: 20px var(--gutter); }
}

@media (max-width: 768px) {
  .hero-grid { padding: 48px var(--gutter) 40px; gap: 44px; }
  .hero-headline { line-height: 1.1; }
  .hero-sub { font-size: 15px; }
  .hero-trust-row { gap: 8px 10px; }
  .hero-trust-dot { display: none; }
  .hero-btn-primary, .hero-btn-secondary { flex: 1; justify-content: center; padding: 0 18px; font-size: 14px; }
  .hero-float-top { top: -10px; right: 0; font-size: 11px; padding: 8px 12px; }
  .hero-float-bottom { bottom: -10px; left: 0; font-size: 11px; padding: 8px 12px; }
  .hero-ticker-row, .hero-dash-foot { padding: 12px; }
  .hero-ticker-cell, .hero-foot-cell { padding: 0 8px; }
  .home-ticker-price, .ft-label-strong, .home-pnl-value { font-size: 13px; }
  .hero-usp-item { flex: 1 1 calc(50% - 14px); font-size: 13px; }
  .hero-usp-band { padding: 0 8px; }
}

@media (max-width: 480px) {
  .hero-usp-item { flex: 1 1 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════
   Championship banner — ported from React ChampionshipBanner
   ══════════════════════════════════════════ */
.champ-banner { background: var(--accent); color: #fff; padding: 12px 0; overflow: hidden; }
.champ-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; max-width: 1200px; margin: 0 auto; }
.champ-content { flex: 1; overflow: hidden; margin: 0 16px; position: relative; }
.champ-ticker { white-space: nowrap; display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .5px; animation: champScroll 15s linear infinite; }
.champ-ticker span { display: inline-block; }
.champ-divider { margin: 0 24px; opacity: .6; }
.champ-nav { background: rgba(255,255,255,.1); color: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background .2s; flex: none; }
.champ-nav:hover { background: rgba(255,255,255,.2); }
@keyframes champScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@media (max-width: 768px) { .champ-ticker { font-size: 13px; } }
/* ══════════════════════════════════════════
   Blog article body — renders the structured content blocks imported
   from the source's blogPosts*.js (see inc/blog-posts.php). Matches
   BlogPostPage.module.css's general typographic rhythm.
   ══════════════════════════════════════════ */
.blog-article { font-size: 16.5px; line-height: 1.75; color: #374151; }
.blog-article > * + * { margin-top: 20px; }
.blog-article h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: #111827; margin-top: 40px; }
.blog-article h3 { font-size: clamp(19px, 2.2vw, 22px); font-weight: 700; letter-spacing: -0.015em; color: #111827; margin-top: 32px; }
.blog-article h4 { font-size: 17px; font-weight: 700; color: #111827; }
.blog-article p { margin: 0; }
.blog-article ul, .blog-article ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.blog-article li { line-height: 1.65; }
.blog-article a { color: var(--accent); font-weight: 600; text-decoration: underline; }

.blog-quote {
  border-left: 3px solid var(--accent);
  padding: 4px 20px;
  font-size: 17px;
  font-style: italic;
  color: #1F2937;
  background: rgba(189,30,62,.04);
  border-radius: 0 10px 10px 0;
}
.blog-note { font-size: 14px; color: #6B7280; }
.blog-callout {
  background: #FDF2F4;
  border: 1px solid rgba(189,30,62,.18);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  color: #7A1B31;
}

.blog-kv { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.blog-kv-row { display: flex; gap: 6px; flex-wrap: wrap; }
.blog-kv-row dt { font-weight: 700; color: #111827; flex: none; }
.blog-kv-row dd { margin: 0; color: #4B5563; }

.blog-table-wrap { overflow-x: auto; border: 1px solid #EDEFF2; border-radius: 12px; }
.blog-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.blog-table caption { caption-side: top; text-align: left; padding: 14px 16px 0; font-weight: 700; color: #111827; font-size: 14px; }
.blog-table th, .blog-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #EDEFF2; }
.blog-table th { background: #F9FAFB; font-weight: 700; color: #111827; }
.blog-table tr:last-child td { border-bottom: none; }

.blog-faq { display: flex; flex-direction: column; gap: 10px; }
.blog-faq-item { background: #fff; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 4px 18px; }
.blog-faq-item summary { cursor: pointer; list-style: none; padding: 14px 0; font-size: 15px; font-weight: 600; color: #111827; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after { content: '+'; color: var(--accent); font-size: 20px; font-weight: 700; flex: none; }
.blog-faq-item[open] summary::after { content: '−'; }
.blog-faq-item p { color: #4B5563; font-size: 14.5px; line-height: 1.7; padding: 0 0 16px; margin: 0; }

.blog-cta {
  background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
  border-radius: 14px;
  padding: 22px 24px;
  color: #E5E7EB;
  font-size: 15px;
  line-height: 1.6;
}
.blog-cta p { margin: 0 0 12px; }
.blog-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 22px; border-radius: 999px;
  background: var(--accent); color: #ffffff !important;
  font-weight: 700; font-size: 14.5px; text-decoration: none !important;
}

/* Blog page "Featured Story" card — 70/30 split on desktop, stacked on
   mobile (was an even 50/50 auto-fit grid). */
.featured-story-grid { border: 1px solid #EDEFF2; border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 7fr 3fr; }
@media (max-width: 767px) {
  .featured-story-grid { grid-template-columns: 1fr; }
}

/* SVG chevron variant of the FAQ accordion icon (market pages, SEO
   landing pages, algo trading page) rotates smoothly on open/close,
   matching the source's chevron rotation transition. */
.accordion-icon svg { transition: transform 0.25s ease; }

/* Fixed-column grids — these were using auto-fit/minmax, which reflows
   unevenly depending on viewport width (e.g. 5 cards becoming 4+1, or
   6 cards becoming 4+2). Replaced with the exact column counts + the
   exact breakpoints from each page's own source CSS module. */

/* Open Account page */
.openacc-hero-grid { display:grid; gap: clamp(32px, 4vw, 64px); align-items: center; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) {
  .openacc-hero-grid { grid-template-columns: 1fr; }
}
.openacc-steps-grid { display:grid; gap:16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  /* Source explicitly flattens the tilted hero mockup back to upright at
     tablet widths (HeroBanner.module.css: .dashCard { transform: none }
     inside its own @media max-width:1024px) — this was missing here, so
     the tilt was incorrectly still applying on iPad-sized screens. */
  .hero-dash-card { transform: none; }
  .openacc-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .openacc-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .openacc-steps-grid { grid-template-columns: 1fr; }
}
.openacc-requirements-grid { display:grid; gap:18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .openacc-requirements-grid { grid-template-columns: 1fr; }
}
.openacc-benefits-grid { display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .openacc-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .openacc-benefits-grid { grid-template-columns: 1fr; }
}

/* Zero Brokerage page */
.zb-benefits-grid { display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .zb-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .zb-benefits-grid { grid-template-columns: 1fr; }
}
.zb-steps-grid { display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* This page's own source (ZeroBrokeragePage.module.css) wants a bold
 * crimson step number, unlike the pale/near-invisible number the
 * shared .algo-step-num class correctly uses for the Algorithmic
 * Trading page it was written for - scoped override rather than
 * changing the shared class (which would break that other page). */
.zb-steps-grid .algo-step-num { font-size:28px; font-weight:800; color:#BD1E3E; }
.zb-steps-grid .algo-step-card { border-radius:16px; border-color: rgba(148,163,184,.18); box-shadow: 0 2px 8px rgba(15,23,42,.04); }
@media (max-width: 900px) {
  .zb-steps-grid { grid-template-columns: 1fr; }
}

/* Championship page */
.champ-prize-grid { display:grid; gap:16px; grid-template-columns: repeat(5, 1fr); max-width:900px; margin:0 auto; }
@media (max-width: 1024px) { .champ-prize-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .champ-prize-grid { grid-template-columns: repeat(2, 1fr); } }
.champ-steps-grid { display:grid; gap:24px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .champ-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .champ-steps-grid { grid-template-columns: 1fr; } }

/* Affiliate page */
.affiliate-steps-grid { display:grid; gap:24px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .affiliate-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .affiliate-steps-grid { grid-template-columns: 1fr; } }
.affiliate-benefits-grid { display:grid; gap:24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .affiliate-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .affiliate-benefits-grid { grid-template-columns: 1fr; } }
/* Affiliate's own source (AffiliatePage.module.css) wants slightly
 * different card padding/shadow than the Zero Brokerage page whose
 * needs .zb-perk-card was written for - scoped override. */
.affiliate-benefits-grid .zb-perk-card { padding: 28px 24px; box-shadow: none; }
.affiliate-benefits-grid .hov-lift.zb-perk-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); transform: translateY(-3px); }

/* Leverage page */
.leverage-hero-grid { display:grid; gap: 64px; align-items: center; grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 1024px) { .leverage-hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.leverage-facts-grid { display:grid; gap:18px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .leverage-facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .leverage-facts-grid { grid-template-columns: 1fr; } }

/* FAQ page */
.faq-paths-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .faq-paths-grid { grid-template-columns: 1fr; } }

/* Tools page */
.tools-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .tools-grid { grid-template-columns: 1fr; } }

/* App page */
.app-features-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .app-features-grid { grid-template-columns: repeat(2, 1fr); } }

/* Negative Balance Protection page */
.nbp-hero-grid { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; display: grid; gap: 56px; align-items: center; grid-template-columns: 1.3fr 1fr; }
@media (max-width: 1024px) { .nbp-hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.nbp-pillars-grid { display:grid; gap: 28px 48px; max-width:920px; margin:0 auto; grid-template-columns: 1fr 1fr; }
@media (max-width: 1024px) { .nbp-pillars-grid { grid-template-columns: 1fr; } }
.nbp-stage-grid { display:grid; gap:20px; grid-template-columns: 80px 1fr; }
.nbp-stage-grid--last { padding-bottom: 0; }
.nbp-stage-grid--more { padding-bottom: 32px; }
@media (max-width: 768px) { .nbp-stage-grid { grid-template-columns: 60px 1fr; gap: 14px; } }
@media (max-width: 768px) {
	.nbp-hero { padding: 64px 0 56px; }
	.nbp-stages-section, .nbp-pillars-section { padding: 64px 0; }
	.nbp-example-section { padding: 0 0 64px; }
	.nbp-stage-num { width: 44px; height: 44px; font-size: 12px; }
	.nbp-example-card { padding: 32px 22px; }
	.nbp-example-row, .nbp-example-row--highlight { font-size: 13px; }
	.nbp-hero-card { padding: 28px 22px; }
}

/* Support page */
.support-stats-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .support-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .support-stats-grid { grid-template-columns: 1fr; } }
.support-channels-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .support-channels-grid { grid-template-columns: 1fr; } }
.support-help-grid { display: grid; gap: 14px; grid-template-columns: 1.2fr 1fr; }
@media (max-width: 980px) { .support-help-grid { grid-template-columns: 1fr; } }

/* IPO Tracker page */
.ipo-stats-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .ipo-stats-grid { grid-template-columns: 1fr; } }
.ipo-card-facts-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .ipo-card-facts-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Homepage CSS cleanup (task 7, phase 1) ──
   Extracted from repeated inline style="" attributes on front-page.php.
   Same exact property values as before — purely a maintainability change,
   zero visual difference. */
.ft-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.12em; color:#BD1E3E; text-transform:uppercase; }
.ft-eyebrow-wide { font-size:11px; font-weight:700; letter-spacing:0.14em; color:#BD1E3E; text-transform:uppercase; }
.ft-label-muted { font-size:10px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:0.05em; }
.ft-label-strong { font-size:14px; font-weight:700; color:#111827; }
.ft-col-gap8 { display:flex; flex-direction:column; gap:8px; }
.ft-body-sm { font-size:13px; line-height:1.65; color:#6B7280; text-wrap:pretty; }

/* Open Account page CSS cleanup (task 7) */
.oa-block-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.oa-block-sub { font-size: 14px; color: #6B7280; line-height: 1.6; margin-bottom: 18px; }
.ft-col-gap10 { display:flex; flex-direction:column; gap:12px; }

/* Zero Brokerage page CSS cleanup (task 7) */
.zb-section-head { text-align:center; margin-bottom:32px; }
.zb-subhead { font-size:18px; font-weight:700; color:#111827; margin-bottom:10px; }

/* Algo Trading page CSS cleanup (task 7) */
.algo-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #111827; margin-bottom: 10px; }
.container-800 { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); }
.section-alt-64 { background:#F9FAFB; padding: 72px 0; }
.section-head-24 { text-align:center; margin-bottom:24px; }
.body-strong-15 { font-size:15px; font-weight:600; color:#374151; margin-bottom:14px; }
.body-muted-17 { font-size:15px; color:#6B7280; line-height:1.7; }

/* Shared between Championship and Affiliate pages (identical section styling) */
.section-alt-72 { background:#F9FAFB; padding: 72px 0; }
.container-1200 { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.section-head-40 { text-align:center; margin-bottom:40px; }
.section-h2-38 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #111827; margin-bottom: 12px; }
.section-lede-520 { font-size:16px; color:#6B7280; max-width:520px; margin:0 auto; line-height:1.6; }

/* Championship page CSS cleanup (task 7) */
.champ-stat-col { display:flex; flex-direction:column; align-items:center; padding:0 24px; }
.champ-stat-value { font-size:22px; font-weight:800; color:#BD1E3E; }
.champ-stat-label { font-size:12px; color:#9CA3AF; margin-top:2px; font-weight:500; }
.champ-stat-divider { width:1px; height:36px; background:#F3F4F6; }

/* Market pages template CSS cleanup (task 7) */
.market-h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; color:#111827; letter-spacing: -0.02em; line-height:1.18; margin-bottom:10px; }
.market-subhead-col { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.market-center-col { text-align: center; display: flex; flex-direction: column; gap: 6px; }

/* SEO landing pages (7 pages, shared template) CSS cleanup (task 7) */
.seo-eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; color:#BD1E3E; text-transform:uppercase; margin-bottom:10px; }
.seo-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #111827; margin-bottom: 12px; }
.seo-lede { font-size:15px; color:#6B7280; line-height:1.65; max-width:700px; margin:0 auto; }
.cta-row-center { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.seo-body-sm { font-size:13.5px; color:#6B7280; line-height:1.6; }

/* Support page CSS cleanup (task 7) */
.support-h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }

/* Leverage page CSS cleanup (task 7) */
/* (.container-1200 already defined above, reused here) */

/* Negative Balance Protection page CSS cleanup (task 7) */
.nbp-hero-sub { color:rgba(255,255,255,.6); font-size:14px; }
.nbp-item-title { font-size:17px; font-weight:700; color:#111827; margin-bottom:6px; }
.nbp-item-body { font-size:14px; color:#6B7280; line-height:1.65; }
.nbp-row-strong { font-weight:700; color:#ffffff; font-size:16px; }

/* Shared footer social-link row (News, Academy, Blog newsletter sections) */
.social-link { color:#ffffff; font-size:14px; font-weight:600; text-decoration:none; opacity:.85; }
.social-link:hover { opacity:1; color:#FDF2F4; }

/* Tools page CSS cleanup (task 7) */
.tools-label { display:block; font-size: 13px; font-weight: 600; color: #6B7280; margin-bottom: 6px; margin-top: 14px; }
.tools-input { width:100%; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 15px; }
.tools-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #F3F4F6; font-size: 14px; color: #6B7280; }
.tools-value { font-size: 18px; color: #111827; }
.tools-icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: #BD1E3E; }
.tools-card-title { font-size: 22px; font-weight: 700; color: #111827; margin: 0; }
.tools-card-body { color: #6B7280; line-height: 1.6; margin-bottom: 24px; font-size: 15px; }
.tools-result-col { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.tools-card { background: #ffffff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.tools-highlight-row { display: flex; justify-content: space-between; align-items: center; background: #FDF2F4; margin: 8px -12px 0; padding: 16px 12px; border-radius: 8px; font-size: 14px; color: #6B7280; }

/* App page CSS cleanup (task 7) — stat bar is App-specific (24px value vs
   Championship's 22px), rest reuses existing shared classes */
.app-stat-col { display:flex; flex-direction:column; align-items:center; padding:0 24px; }
.app-stat-value { font-size:24px; font-weight:800; color:#BD1E3E; }
.app-stat-label { font-size:12px; color:#9CA3AF; margin-top:2px; font-weight:500; }
.app-stat-divider { width:1px; height:36px; background:#F3F4F6; }
.section-head-48 { text-align: center; margin-bottom: 48px; }

/* IPO Tracker page CSS cleanup (task 7) */
.ipo-label-muted { font-size: 14.5px; color: #9CA3AF; }
.ipo-value-17 { font-size: 17px; font-weight: 700; }
.ipo-stat-value { font-size: 34px; font-weight: 800; color: #BD1E3E; letter-spacing: -0.03em; }
.ipo-body-16 { font-size: 16px; color: #6B7280; }
.ipo-empty-state { grid-column:1/-1; text-align:center; padding:40px 20px; color:#9CA3AF; font-size:14.5px; }

/* Sign Up page CSS cleanup (task 7) */
.signup-body-14 { font-size: 14.5px; line-height: 1.55; color: #475569; }
.signup-label-14 { font-size: 14.5px; font-weight: 600; }
.signup-row-flex { display: flex; gap: 12px; align-items: flex-start; }
.signup-link { color: #1F72D0; font-weight: 600; }
/* Homepage CSS cleanup (task 7, phase 2) — front-page.php.
   Continues the phase-1 pass above: every inline style="" on the
   homepage extracted into classes here. Same exact property values,
   zero visual difference. Dynamic (PHP-driven) colors now use CSS
   custom properties instead of inline declarations, so only the
   variable value is dynamic — not the whole style block. */

/* Reusable section-background utilities (shared across homepage sections) */
.section-white { background:#ffffff; }
.section-alt-f8 { background:#F8F9FB; }
.section-alt-f9 { background:#F9FAFB; }
.home-adv-section { border-top: 1px solid #F3F4F6; }
.home-globalmarkets-section { border-top: 1px solid #F3F4F6; }
.home-tools-section { border-top: 1px solid #F3F4F6; }
.section-alt-pink { background:#FFF5F5; }

/* Reusable tiny utilities */
.link-accent-sm { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#BD1E3E; text-decoration:none; }
.text-accent { color:#BD1E3E; }
.align-self-center { align-self:center; }
.home-section-head-680 { max-width:680px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:6px; }
.home-section-subhead { font-size:15px; font-weight:600; color:#6B7280; margin-top:4px; }
.home-section-lede { font-size:15px; line-height:1.7; color:#6B7280; margin-top:6px; }
.home-section-wrap-72 { padding-top:72px; padding-bottom:72px; display:flex; flex-direction:column; gap:32px; }
@media (max-width: 640px) { .home-section-wrap-72 { padding-top:52px; padding-bottom:52px; } }

/* Hero */
.hero-grid { max-width:1200px; margin:0 auto; padding:88px var(--gutter) 64px; position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.hero-copy { max-width:580px; }
.home-hero-cta-row { display:flex; flex-wrap:wrap; gap:12px; }
.home-hero-dash-wrap { position:relative; aspect-ratio:5/4; }
.hero-dash-head .hero-dash-dot:nth-child(1) { background:#FF5F57; }
.hero-dash-head .hero-dash-dot:nth-child(2) { background:#FFBD2E; }
.hero-dash-head .hero-dash-dot:nth-child(3) { background:#28C840; }
.home-hero-dash-label { margin-left:8px; font-size:11px; font-weight:600; color:#6B7280; letter-spacing:0.04em; }
.home-ticker-name { font-size:10px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:0.06em; }
.home-ticker-price { font-size:14px; font-weight:700; color:#111827; letter-spacing:-0.01em; }
.home-ticker-change { font-size:11px; font-weight:700; color:var(--chg); }
.home-hero-img-wrap { padding:12px 16px 6px; }
.home-hero-img { width:100%; height:auto; display:block; }
.home-pnl-value { font-size:14px; font-weight:800; color:#059669; }
.home-usp-inner { max-width:1200px; margin:0 auto; padding:22px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* News (matches MarketNewsStrip.module.css exactly: fixed 64px section
 * padding, fixed 4/2/1-column breakpoints rather than auto-fit, real
 * shadow-sm border/shadow tokens, and per-element margins inside the
 * card instead of a flattened flex-gap that changed the vertical
 * rhythm - tag→title was 10px, title→body 8px, body→date 12px in the
 * source, not a uniform gap). */
.home-news-wrap { padding-top:64px; padding-bottom:64px; }
.home-news-head-row { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.home-news-head-col { display:flex; flex-direction:column; gap:8px; }
.home-news-h2 { font-size:clamp(24px, 3vw, 32px); font-weight:800; letter-spacing:-0.02em; }
.home-news-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width: 1024px) { .home-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .home-news-grid { grid-template-columns: 1fr; } }
.home-news-card { background:#ffffff; border:1px solid #E5E7EB; border-radius:12px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.home-news-tag { display:inline-block; padding:3px 8px; border-radius:999px; background:#FDF2F4; color:#BD1E3E; font-size:10px; font-weight:700; text-transform:uppercase; margin-bottom:10px; }
.home-news-title { font-size:15px; font-weight:700; line-height:1.4; margin-bottom:8px; }
.home-news-body { font-size:13px; line-height:1.5; color:#6B7280; margin-bottom:12px; }
.home-news-date { font-size:12px; color:#9CA3AF; }
.home-news-links-row { border-top:1px solid #E7EAEE; margin-top:24px; padding-top:24px; display:flex; flex-wrap:wrap; gap:20px; font-size:14px; font-weight:600; color:#6B7280; }
.home-news-link { color:#6B7280; }

/* Markets */
.home-markets-wrap { padding-top:clamp(44px, 5vw, 72px); padding-bottom:clamp(44px, 5vw, 72px); display:flex; flex-direction:column; gap:24px; }
.market-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.market-tab { padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600; background:#F1F5F9; color:#475569; }
.market-tab.is-active { background:#BD1E3E; color:#ffffff; }
.home-market-panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.home-market-panel-title { font-size:18px; font-weight:800; letter-spacing:-0.01em; }
.home-market-badge { display:flex; align-items:center; gap:9px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; }
.home-market-badge--indicative { background:#F1F3F5; color:#3C4453; }
.home-market-badge--live { background:#E8F7EE; color:#157F3C; }
.home-dot { border-radius:999px; display:inline-block; }
.home-dot--grey9 { width:9px; height:9px; background:#9CA3AF; }
.home-dot--green9 { width:9px; height:9px; background:#157F3C; }
.home-dot--green7 { width:7px; height:7px; background:#157F3C; }
.home-market-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
@media (max-width: 1024px) { .home-market-grid { grid-template-columns:repeat(3, 1fr); gap:12px; } }
/* MarketCard.module.css is mobile-first: base rules below are the
 * MOBILE sizing (12px padding, 24px logo, 14.5px price...), with a
 * min-width:769px override for the larger desktop sizing. The
 * previous pass here only had the desktop values applied
 * unconditionally, so every market card rendered oversized on phones. */
.market-card { background:#ffffff; border:1px solid #F1F5F9; border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; box-shadow:0 4px 12px rgba(15,23,42,.03); cursor:pointer; transition: box-shadow .2s ease, border-color .25s ease, background .25s ease; }
.market-card:hover { border-color: rgba(15,23,42,.1); box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.home-market-chip-row { display:flex; justify-content:flex-end; }
.home-market-chip { padding:2px 5px; border-radius:4px; font-size:9.5px; font-weight:700; letter-spacing:0.02em; background:var(--bg); color:var(--fg); }
.home-market-id-row { display:flex; align-items:center; gap:6px; min-width:0; }
.home-market-logo { width:24px; height:24px; border-radius:6px; background:var(--bg); color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.home-market-name-col { display:flex; flex-direction:column; min-width:0; }
.home-market-name { font-size:11px; font-weight:700; letter-spacing:-0.01em; color:#0F172A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.home-market-symbol { font-size:9px; color:#9CA3AF; font-weight:500; margin-top:1px; white-space:nowrap; }
.home-market-price { font-size:14.5px; font-weight:800; letter-spacing:-0.3px; color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-market-spark-wrap { height:28px; }
.home-market-spark-svg { width:100%; height:100%; overflow:visible; }
.home-market-actions { display:flex; gap:4px; }
.home-market-action-btn { flex:1; text-decoration:none; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:#ffffff; font-size:10px; font-weight:700; letter-spacing:0.07em; }
.home-market-action-btn--buy { background:#15803D; }
.home-market-action-btn--sell { background:#BD1E3E; }
.home-market-notice { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:8px; padding-top:6px; font-size:12px; color:#9CA3AF; }

@media (min-width: 769px) {
  .market-card { padding:16px; gap:12px; border-radius:20px; }
  .home-market-logo { width:32px; height:32px; font-size:13px; border-radius:8px; }
  .home-market-name { font-size:14px; }
  .home-market-symbol { font-size:11px; }
  .home-market-chip { font-size:11px; padding:3px 8px; border-radius:6px; }
  .home-market-price { font-size:22px; letter-spacing:-0.5px; }
  .home-market-spark-wrap { height:38px; }
  .home-market-action-btn { height:30px; font-size:11px; border-radius:8px; }
}

/* Advantages */
/* Advantage grid (matches Features.module.css exactly, mobile-first:
 * base rules below are the MOBILE values, overridden at the source's
 * own min-width:769px breakpoint for desktop — not a clamp() and not
 * an auto-fit grid, both of which produced the wrong column count /
 * sizing at in-between viewport widths). */
.home-adv-wrap { padding-top:56px; padding-bottom:56px; display:flex; flex-direction:column; gap:40px; }
.home-adv-head-row { display:flex; flex-direction:column; gap:12px; }
.home-adv-h2 { font-size:clamp(28px, 4vw, 36px); font-weight:800; letter-spacing:-0.02em; }
.home-adv-tagline { font-size:14px; color:#6B7280; line-height:1.65; text-align:left; align-self:flex-start; max-width:280px; }
.home-adv-lede { max-width:700px; margin:0 auto; text-align:center; font-size:15px; line-height:1.7; color:#6B7280; }
.home-adv-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.hov-adv-card { background:#ffffff; border:1px solid #E5E7EB; border-radius:14px; padding:20px 18px 16px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.hov-adv-card:hover { border-color: rgba(211,47,47,.2); box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
.home-adv-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px; }
.home-adv-num { font-size:28px; font-weight:900; color:#F3F4F6; letter-spacing:-0.02em; line-height:1; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.hov-adv-card:hover .home-adv-num { color: rgba(211,47,47,.12); }
.home-adv-tag { padding:2px 7px; border-radius:4px; background:#FEE2E2; color:#BD1E3E; font-size:9px; font-weight:800; letter-spacing:0.1em; }
.home-adv-title { font-size:14px; font-weight:800; color:#111827; line-height:1.3; }
.home-adv-body { font-size:12.5px; line-height:1.6; color:#6B7280; flex:1; }
.home-adv-line { height:2px; width:32px; background:#BD1E3E; border-radius:2px; margin-top:4px; opacity:0; transform:scaleX(0); transform-origin:left; transition: opacity .25s ease, transform .25s ease; }
.hov-adv-card:hover .home-adv-line { opacity:1; transform:scaleX(1); }

@media (min-width: 769px) {
  .home-adv-wrap { padding-top:64px; padding-bottom:64px; }
  .home-adv-head-row { flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .home-adv-tagline { font-size:15px; max-width:320px; text-align:right; align-self:flex-end; }
  .home-adv-grid { grid-template-columns:repeat(3, 1fr); gap:16px; }
  .home-adv-num { font-size:36px; }
  .home-adv-title { font-size:15px; }
  .home-adv-body { font-size:13px; }
  .hov-adv-card { padding:22px 20px 18px; }
}

/* Commodity (matches CommoditySection.module.css exactly: fixed 80px/56px
 * section padding instead of clamp(), fixed grid columns instead of
 * auto-fit at three different grids, correct icon sizing, the missing
 * decorative background circle, and the plain-emoji board icons rather
 * than an invented colored circular badge treatment). */
.home-comm-wrap-bg { position:relative; overflow:hidden; background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%); }
.home-comm-wrap-bg::before {
  content:''; position:absolute; width:540px; height:540px; border-radius:50%;
  left:-220px; bottom:-260px; background:radial-gradient(circle, rgba(189,30,62,.08) 0%, transparent 70%);
  pointer-events:none;
}
.home-comm-grid { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:80px var(--gutter); display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
@media (max-width: 1024px) { .home-comm-grid { grid-template-columns:1fr; gap:40px; } .home-comm-board { max-width:540px; margin:0 auto; width:100%; } }
@media (max-width: 768px) { .home-comm-grid { padding-top:56px; padding-bottom:56px; } .home-comm-cta-primary, .home-comm-cta-secondary { width:100%; justify-content:center; } }
.home-comm-copy { display:flex; flex-direction:column; gap:16px; }
.home-comm-badge { align-self:flex-start; padding:7px 14px; border-radius:999px; background:#FDF2F4; color:#BD1E3E; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.home-comm-h2 { font-size:clamp(28px, 3.8vw, 42px); font-weight:800; line-height:1.1; letter-spacing:-0.02em; }
.home-comm-lede { font-size:16px; line-height:1.7; color:#475569; max-width:560px; }
.home-comm-points-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 1024px) { .home-comm-points-grid { grid-template-columns:1fr; } }
@media (max-width: 768px) { .home-comm-points-grid { gap:12px; } }
.home-comm-point { display:flex; gap:12px; align-items:flex-start; }
.home-comm-point-icon { width:38px; height:38px; border-radius:10px; background:#FDF2F4; color:#BD1E3E; display:flex; align-items:center; justify-content:center; flex:none; }
.home-comm-point-text { display:flex; flex-direction:column; gap:2px; }
.home-comm-point-title { font-size:14px; font-weight:700; color:#0F172A; }
.home-comm-point-body { font-size:13px; color:#6B7280; line-height:1.5; }
.home-comm-cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.home-comm-cta-primary { height:48px; display:inline-flex; align-items:center; padding:0 24px; border-radius:12px; background:#BD1E3E; color:#ffffff; font-size:14px; font-weight:700; box-shadow:0 6px 20px rgba(189, 30, 62,.32); }
.home-comm-cta-secondary { height:48px; display:inline-flex; align-items:center; padding:0 22px; border-radius:12px; border:1.5px solid #E5E7EB; background:#ffffff; font-size:14px; font-weight:600; color:#374151; }
.home-comm-board { background:#ffffff; border:1px solid #F3F4F6; border-radius:22px; padding:24px; box-shadow:0 20px 50px rgba(15,23,42,.08); display:flex; flex-direction:column; gap:16px; }
.home-comm-board-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid #F3F4F6; }
.home-comm-board-title { font-size:13px; font-weight:700; letter-spacing:0.02em; }
.home-comm-board-badge { padding:4px 10px; border-radius:999px; background:#FDF2F4; color:#BD1E3E; font-size:10px; font-weight:700; letter-spacing:0.12em; }
.home-comm-board-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (max-width: 768px) { .home-comm-board-grid { grid-template-columns:1fr; } }
.home-comm-board-item { border:1px solid #F3F4F6; border-radius:12px; padding:14px; display:flex; align-items:center; gap:10px; background:#FAFBFC; }
.home-comm-board-icon { font-size:22px; line-height:1; }
.home-comm-board-text { display:flex; flex-direction:column; }
.home-comm-board-name { font-size:13px; font-weight:700; }
.home-comm-board-note { font-size:11px; color:#6B7280; }

/* Phone CTA */
/* Phone CTA / AccountCTA (matches AccountCTA.module.css: fixed padding
 * values instead of clamp(), a flex row/column swap instead of a grid
 * (so the 1:1.2 text/form width ratio and centered mobile stack match
 * exactly), the missing focus-within state on the input, and the
 * missing mobile font-size:16px on the input which source calls out
 * explicitly as preventing iOS Safari's auto-zoom-on-focus). */
.home-phone-outer { padding-top:40px; padding-bottom:40px; margin-top:10px; }
.home-phone-card { background:#ffffff; border:1px solid #F1F5F9; border-radius:20px; box-shadow:0 4px 20px rgba(15,23,42,.06); padding:30px 40px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:30px; }
.home-phone-h2 { flex:1; font-size:26px; font-weight:700; line-height:1.3; }
.home-phone-input-row { flex:1.2; display:flex; align-items:center; border:1.5px solid #E2E8F0; border-radius:100px; overflow:hidden; background:#F8FAFC; height:48px; transition: all .3s ease; }
.home-phone-input-row:focus-within { border-color:#BD1E3E; box-shadow: 0 0 0 3px #FDF2F4; }
.home-phone-prefix { padding:0 10px 0 18px; font-size:15px; font-weight:600; color:#6B7280; border-right:1.5px solid #E2E8F0; margin-right:10px; }
.phone-input { flex:1; padding:0 18px 0 0; border:none; outline:none; background:transparent; font-size:15px; font-weight:500; }
.phone-input::placeholder { color:#9CA3AF; }
.phone-submit { text-align:center; height:48px; display:flex; align-items:center; justify-content:center; border-radius:100px; background:#C9CDD3; color:#ffffff; font-size:15px; font-weight:700; cursor:pointer; transition: all .3s ease; }
.phone-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(189,30,62,.2); }
.phone-msg { font-size:12.5px; font-weight:600; text-align:center; }

@media (max-width: 900px) {
  .home-phone-outer { padding:16px 0 32px; margin-top:0; }
  .home-phone-card { flex-direction:column; align-items:center; padding:28px 20px; gap:20px; }
  .home-phone-h2 { width:100%; font-size:20px; line-height:1.4; text-align:center; }
  .home-phone-input-row { width:100%; height:56px; }
  .phone-prefix { font-size:16px; flex-shrink:0; }
  .phone-input { font-size:16px; }
  .phone-submit { width:100%; height:56px; font-size:16px; }
}

/* Exposure */
.home-exp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width: 1024px) { .home-exp-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px) { .home-exp-grid { grid-template-columns:1fr; } }
.hov-border-only { background:#ffffff; border:1px solid #E5E7EB; border-radius:14px; padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.home-exp-link { text-decoration:none; color:#111827; font-size:15px; font-weight:800; letter-spacing:-0.01em; }

/* Tools */
.home-section-h2-a { font-size:clamp(26px, 4vw, 38px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.home-section-h2-b { font-size:clamp(24px, 3.5vw, 36px); font-weight:800; letter-spacing:-0.02em; line-height:1.2; }
.home-tools-grid { max-width:880px; margin:0 auto; width:100%; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
@media (max-width: 640px) { .home-tools-grid { grid-template-columns:1fr; } }
.home-tools-card { background:#F9FAFB; border:1px solid #E5E7EB; border-radius:14px; padding:22px 20px; display:flex; align-items:flex-start; gap:16px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-tools-card:hover { border-color: rgba(189,30,62,.25); box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); background: #fff; }
.home-tools-icon { width:40px; height:40px; border-radius:10px; background:#FDF2F4; color:#BD1E3E; display:flex; align-items:center; justify-content:center; flex:none; }
.home-tools-text { display:flex; flex-direction:column; gap:6px; }
.home-tools-title { font-size:14px; font-weight:800; letter-spacing:-0.01em; }

/* Stats band */
.home-stats-wrap { max-width:1200px; margin:0 auto; padding:36px var(--gutter) 32px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.home-stats-h2 { font-size:24px; font-weight:800; letter-spacing:-0.5px; line-height:1.22; }
@media (min-width: 769px) { .home-stats-h2 { font-size:30px; } }
.home-stats-pill { background:#ffffff; border:1.5px solid #E5E7EB; border-radius:12px; padding:14px 22px; display:flex; align-items:center; gap:14px; }
.home-stats-icon { width:40px; height:40px; border-radius:999px; background:#FDF2F4; color:#BD1E3E; display:flex; align-items:center; justify-content:center; }
.home-stats-text { text-align:left; line-height:1.1; }
.home-stats-number { font-size:22px; font-weight:800; letter-spacing:-0.5px; }
.home-stats-label { font-size:12px; font-weight:600; color:#6B7280; margin-top:4px; }
@media (min-width: 769px) {
  .home-stats-number { font-size:28px; }
  .home-stats-label { font-size:13px; }
}

/* Assets */
.home-assets-wrap { max-width:1200px; margin:0 auto; padding:40px var(--gutter); display:flex; flex-direction:column; gap:28px; align-items:center; }
.home-assets-head { text-align:center; display:flex; flex-direction:column; gap:8px; }
.home-assets-h2 { font-size:24px; font-weight:800; letter-spacing:-0.4px; }
.home-assets-grid { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
@media (min-width: 769px) { .home-assets-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; } }
.hov-tile { flex:1 1 calc(50% - 8px); max-width:220px; cursor:pointer; text-decoration:none; color:inherit; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:14px; padding:20px 14px 18px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-assets-title { font-size:12px; font-weight:700; }
.home-assets-body { font-size:11.5px; font-weight:500; line-height:1.45; color:#6B7280; }
@media (min-width: 769px) {
  .home-assets-title { font-size:13.5px; }
  .home-assets-body { font-size:12px; }
}

/* Download CTA */
.home-dl-wrap { max-width:1200px; margin:0 auto; padding:0 var(--gutter) 40px; }
.home-dl-card { background:linear-gradient(135deg, #BD1E3E 0%, #8A1530 100%); border-radius:18px; padding:36px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; color:#ffffff; box-shadow:0 12px 32px rgba(189,30,62,.25); }
.home-dl-copy { flex:1 1 300px; display:flex; flex-direction:column; gap:8px; }
.home-dl-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.15em; opacity:.85; text-transform:uppercase; }
.home-dl-h2 { font-size:clamp(26px, 3vw, 30px); font-weight:800; letter-spacing:-0.01em; line-height:1.2; }
.home-dl-lede { font-size:14px; line-height:1.55; opacity:.85; max-width:460px; }
.home-dl-btn { text-decoration:none; display:inline-flex; align-items:center; padding:11px 20px; border-radius:12px; background:#0F172A; color:#ffffff; font-size:16px; font-weight:700; letter-spacing:-0.005em; border:1px solid rgba(255,255,255,.15); cursor:pointer; }

/* FAQ */
.home-faq-wrap { max-width:1200px; margin:0 auto; padding:56px var(--gutter) 64px; display:flex; flex-direction:column; gap:28px; }
/* FAQ standalone page reuses the same FAQ component/classes as the
 * homepage (FAQPage.jsx literally renders <FAQ/>) - this wrapper adds
 * just the page-specific border-top separator (FAQPage.module.css's
 * .faqWrap) and the component's own section padding on top of it. */
.faq-page-list-wrap { border-top: 1px solid #F3F4F6; padding: 56px var(--gutter) 64px; }
@media (min-width: 769px) { .faq-page-list-wrap { padding: 64px var(--gutter) 72px; } }
@media (min-width: 769px) { .home-faq-wrap { padding:64px var(--gutter) 72px; } }
.home-faq-head { text-align:center; display:flex; flex-direction:column; gap:6px; }
.home-faq-h2 { font-size:26px; font-weight:800; letter-spacing:-0.4px; }
@media (min-width: 769px) { .home-faq-h2 { font-size:32px; } }
.home-faq-sub { font-size:14px; color:#9CA3AF; }
.home-faq-list { max-width:760px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:14px; }
.home-faq-accordion { background:#ffffff; border:1px solid #E5E7EB; border-radius:10px; overflow:hidden; box-shadow:0 1px 2px rgba(17,24,39,.04); transition: border-color .25s ease, box-shadow .25s ease; }
.home-faq-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; cursor:pointer; }
@media (min-width: 769px) { .home-faq-toggle { padding:20px 26px; gap:18px; } }
.home-faq-q-title { font-size:15px; font-weight:700; letter-spacing:-0.1px; }
@media (min-width: 769px) { .home-faq-q-title { font-size:16px; } }
.home-faq-icon { width:30px; height:30px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; background:var(--bg); color:var(--fg); }
.home-faq-body { margin:0 22px 6px; padding-top:0; border-top:1px solid #F3F4F6; }
@media (min-width: 769px) { .home-faq-body { margin:0 26px 6px; } }
.home-faq-item { border-bottom:1px solid #F3F4F6; }
.home-faq-item:first-child { border-top:1px solid #F3F4F6; }
.home-faq-item-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; }
.home-faq-item-q-text { font-size:16px; font-weight:600; color:#111827; line-height:1.4; transition: color .2s ease; }
.home-faq-item-q-text.is-open { color:#BD1E3E; }
.home-faq-item-chevron { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; border:1.5px solid #E5E7EB; color:#9CA3AF; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.home-faq-item-chevron.is-open { border-color:#BD1E3E; color:#BD1E3E; background:#FEE2E2; }
.home-faq-item-chevron svg { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.home-faq-item-chevron.is-open svg { transform: rotate(180deg); }
.home-faq-item-a-wrap { display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1); }
.home-faq-item-a-wrap.is-open { grid-template-rows:1fr; }
.home-faq-item-a-inner { overflow:hidden; }
.home-faq-item-a { font-size:14.5px; color:#374151; line-height:1.75; padding-bottom:20px; padding-right:44px; }

/* Algo Trading page CSS cleanup (task 7, phase 2) — template-algo-trading.php.
   Same exact property values as before — zero visual difference.
   Market-grid section reuses the .home-market-* classes already added
   for the homepage (identical markup/values), and phone-CTA reuses
   .phone-input/.phone-submit/.phone-msg for the same reason. */
.ta-center { text-align:center; }
.algo-strong-dark { color:#111827; }

/* Hero */
.algo-hero { padding: 80px 0 72px; text-align:center; background: linear-gradient(180deg, #FDF2F4 0%, #ffffff 100%); border-bottom: 1px solid #F3F4F6; }
.algo-hero-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.algo-hero-badge { display:inline-flex; align-items:center; gap:6px; padding: 6px 14px; border-radius: 999px; background: rgba(189,30,62,.08); border: 1px solid rgba(189,30,62,.18); color: #BD1E3E; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.algo-hero-h1 { font-size: clamp(28px, 4.5vw, 48px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #0F172A; margin-bottom: 12px; }
.algo-hero-h1-accent { background: linear-gradient(135deg, #BD1E3E 0%, #7F1D1D 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.algo-hero-subhead { font-size:16px; font-weight:600; color:#6B7280; margin-bottom:20px; }
.algo-hero-lede { font-size: 16px; color: #475569; line-height: 1.75; max-width: 640px; margin: 0 auto 28px; }
.algo-checklist { display:flex; flex-direction:column; gap:10px; max-width:420px; margin: 0 auto 32px; }
.algo-checklist-item { display:flex; align-items:center; gap:10px; text-align:left; }
.algo-checklist-text { font-size:15px; color:#0F172A; font-weight:600; }
.algo-hero-cta-row { display: flex; gap: 12px; justify-content:center; flex-wrap: wrap; }
.algo-btn-primary { text-decoration:none; height:48px; display:inline-flex; align-items:center; gap:8px; padding: 0 28px; border-radius: 12px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 14px; box-shadow: 0 6px 20px rgba(189,30,62,.3); transition: all .18s ease; }
.algo-btn-primary:hover { background: #9B1A35; transform: translateY(-2px); }
.algo-btn-secondary { text-decoration:none; height:48px; display:inline-flex; align-items:center; padding: 0 24px; border-radius: 12px; background: #ffffff; color: #374151; font-weight: 600; font-size: 14px; border: 1.5px solid #E5E7EB; transition: all .18s ease; }
.algo-btn-secondary:hover { border-color: #BD1E3E; color: #BD1E3E; }
.algo-btn-primary-sm { text-decoration:none; height:48px; display:inline-flex; align-items:center; gap:8px; padding: 0 28px; border-radius: 12px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 14px; box-shadow: 0 6px 20px rgba(189,30,62,.3); transition: all .18s ease; }
.algo-btn-primary-sm:hover { background: #9B1A35; transform: translateY(-2px); }

/* Advantages — original list items are plain (no card chrome), just an
   icon + paragraph row */
.algo-extra-lede { font-size:15px; color:#6B7280; line-height:1.7; margin-top:12px; }
.algo-advantages-list { display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.algo-advantage-item { display:flex; gap:12px; align-items:flex-start; }
.algo-advantage-text { font-size:15px; line-height:1.65; color:#374151; }
.algo-callout { text-align:center; font-size:16px; font-weight:500; color:#111827; max-width:680px; margin:0 auto 24px; line-height:1.6; }

/* Compare table — original renders a real dark-header table, not a
   light-grey grid card */
.algo-section-pad64 { padding: 72px 0; }
.algo-alt-border { border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; }
.algo-container-900 { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.algo-compare-card { background:#ffffff; border-radius:10px; overflow-x:auto; margin-bottom:24px; }
.algo-compare-inner { min-width:520px; }
.algo-compare-head { display:grid; grid-template-columns: 1fr 1.2fr 1.4fr; padding:14px 18px; background:#0F172A; font-size:14px; font-weight:700; color:#ffffff; border-radius:10px 10px 0 0; }
.algo-compare-row { display:grid; grid-template-columns: 1fr 1.2fr 1.4fr; padding:13px 18px; border-bottom:1px solid #F3F4F6; font-size:14px; align-items:center; }
.algo-compare-row:nth-child(even) { background:#F9FAFB; }
.algo-compare-feature { color:#374151; }
.algo-compare-manual { color:#374151; }
.algo-compare-algo { font-weight:700; color:#BD1E3E; }

/* Why choose us */
.algo-why-list { display:flex; flex-direction:column; gap:16px; max-width:760px; margin:0 auto 24px; }
.algo-why-item { display:flex; gap:12px; align-items:flex-start; background:#ffffff; border:1px solid #E5E7EB; border-radius:12px; padding:16px 18px; }
.algo-why-text { font-size:14px; line-height:1.65; color:#374151; }

/* Steps */
.algo-steps-head { text-align:center; margin-bottom:32px; }
.algo-muted-15 { font-size:15px; color:#6B7280; }
.algo-steps-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
@media (max-width: 1024px) { .algo-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .algo-steps-grid { grid-template-columns: 1fr; } }
.algo-step-card { background:#ffffff; border:1px solid #E5E7EB; border-radius:14px; padding:24px 18px; }
.algo-step-num { font-size:32px; font-weight:900; letter-spacing:-1px; line-height:1; color:#F3F4F6; margin-bottom:10px; }
.algo-step-title { font-size:14px; font-weight:800; color:#111827; margin-bottom:8px; }
.algo-step-text { font-size:13px; color:#6B7280; line-height:1.6; }

/* FAQ (this page's accordion look differs from the homepage's, so it
   gets its own modifier classes rather than reusing home-faq-*) */
.algo-faq-head { text-align:center; margin-bottom:28px; }
.algo-faq-list { max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:8px; }
.algo-faq-accordion { background:#ffffff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.algo-faq-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; cursor: pointer; transition: background .15s ease; }
.algo-faq-toggle:hover { background: #F9FAFB; }
.algo-faq-q { font-size: 14px; font-weight: 700; color: #0F172A; }
.algo-faq-icon { flex: none; color: #BD1E3E; display:flex; }
.algo-faq-body { padding: 0 20px 18px; font-size: 14px; line-height: 1.7; color: #6B7280; }

/* Phone CTA — original is a flat full-width bar (no floating card) */
.algo-phone-section { border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; }
.algo-phone-outer { padding: 20px 0; }
.algo-phone-card { background:transparent; border:none; box-shadow:none; border-radius:0; padding:0; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.algo-phone-title { font-size:18px; font-weight:700; line-height:1.3; }

/* Final CTA — original is a full-bleed gradient section, not a rounded
   card floating on white */
.algo-final-outer { padding: 72px 0; background: linear-gradient(135deg, #BD1E3E 0%, #7F1D1D 100%); }
.algo-final-card { background: transparent; border-radius: 0; padding: 0; max-width: 600px; margin: 0 auto; text-align:center; color:#ffffff; }
.algo-final-h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom:12px; }
.algo-final-lede { font-size:15px; color: rgba(255,255,255,.85); line-height:1.7; margin-bottom:28px; }
.algo-final-btn { text-decoration:none; display:inline-flex; align-items:center; gap:8px; height:48px; padding: 0 28px; border-radius: 12px; background: #ffffff; color: #BD1E3E; font-weight: 700; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: all .18s ease; }
.algo-final-btn:hover { background: #f1f5f9; }

/* Zero Brokerage page CSS cleanup (task 7, phase 2) — template-zero-brokerage.php.
   Same exact property values as before — zero visual difference.
   Reuses .algo-container-900 / .algo-step-card / .algo-step-num / .algo-step-title
   / .algo-step-text / .algo-faq-head / .container-800 / .container-1200 /
   .algo-section-pad64 from the algo-trading pass since those values are identical. */
.mb-10 { margin-bottom:10px; }
.mb-14 { margin-bottom:14px; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }
.mb-24 { margin-bottom:24px; }
.mb-28 { margin-bottom:28px; }
.p-reset { margin:0; }
.container-760 { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.container-780 { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); }
.zb-alt-pad64 { background:#F9FAFB; padding: 64px 0; }
.zb-pad40 { padding: 40px 0; }
.zb-h2 { font-size: clamp(22px, 3.5vw, 34px); font-weight: 700; letter-spacing: -0.02em; color: #0f172a; }
.zb-btn-primary { text-decoration:none; display:inline-flex; align-items:center; gap:6px; padding: 13px 26px; border-radius: 100px; background: #BD1E3E; color: #ffffff; font-weight: 600; font-size: 14px; box-shadow: 0 8px 20px rgba(189,30,62,.28); transition: opacity .15s, transform .15s; }
.zb-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.zb-cta-wrap { text-align:center; margin-top:24px; }

/* Hero */
.zb-hero { text-align:center; padding: 80px 0 64px; }
.zb-hero-h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: #111827; max-width:680px; margin: 0 auto 14px; }
.zb-hero-h1-accent { background: linear-gradient(125deg, #BD1E3E 0%, #7F1D1D 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zb-hero-lede { font-size: 17px; color: #6B7280; line-height: 1.65; margin-bottom: 32px; }

/* Real cost of brokerage */
.zb-body-col { display:flex; flex-direction:column; gap:14px; font-size:15.5px; line-height:1.75; color:#4B5563; }

/* Segment breakdown table */
.zb-table-card { background:#ffffff; border:1px solid #F3F4F6; border-radius:14px; overflow:hidden; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.zb-seg-head { display:grid; grid-template-columns: 2fr 1fr; padding:14px 22px; background:#F9FAFB; font-size:12px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.06em; }
.zb-seg-row { display:grid; grid-template-columns: 2fr 1fr; padding:14px 22px; border-top:1px solid #F3F4F6; align-items:center; }
.zb-seg-link { color:#BD1E3E; font-weight:600; font-size:14px; text-decoration:none; }
.zb-seg-label { font-weight:600; color:#111827; font-size:14px; }
.zb-seg-value { font-weight:700; color:#059669; font-size:14px; }
.zb-note-center { font-size:13px; color:#9CA3AF; line-height:1.6; margin-top:18px; text-align:center; }

/* Open account / perks */
.zb-head-760 { text-align:center; margin-bottom:32px; max-width:760px; margin-left:auto; margin-right:auto; }
.zb-lede-15 { font-size:15px; color:#6B7280; line-height:1.65; }
.zb-perk-card { background:#ffffff; border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:22px; box-shadow: 0 2px 8px rgba(15,23,42,.04); transition: all .2s ease; }
.hov-lift.zb-perk-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.zb-perk-icon { width:42px; height:42px; border-radius:12px; background:rgba(189,30,62,.08); color:#BD1E3E; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.zb-perk-title { font-size:15px; font-weight:700; color:#111827; margin-bottom:8px; }
.zb-perk-text { font-size:13.5px; color:#6B7280; line-height:1.6; }
.zb-note-760 { font-size:14px; color:#6B7280; line-height:1.7; margin-top:28px; max-width:760px; margin-left:auto; margin-right:auto; text-align:center; }

/* Intraday / options body text */
.zb-body-15 { font-size:15.5px; line-height:1.75; color:#4B5563; }

/* Margins table */
.zb-table-card-scroll { background:#ffffff; border:1px solid #F3F4F6; border-radius:14px; overflow-x:auto; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.zb-margins-inner { min-width:560px; }
.zb-margins-head { display:grid; grid-template-columns: 1.4fr 1fr 1fr; padding:14px 22px; background:#F9FAFB; font-size:12px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.06em; }
.zb-margins-row { display:grid; grid-template-columns: 1.4fr 1fr 1fr; padding:12px 22px; border-top:1px solid #F3F4F6; font-size:13.5px; }
.zb-cell-label { font-weight:600; color:#111827; }
.zb-cell-value { color:#374151; }

/* Comparison table */
.zb-compare-inner { min-width:520px; }
.zb-compare-head { display:grid; grid-template-columns: 1.2fr 1.4fr 1fr; padding:14px 22px; background:#F9FAFB; font-size:12px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.06em; }
.zb-compare-row { display:grid; grid-template-columns: 1.2fr 1.4fr 1fr; padding:14px 22px; border-top:1px solid #F3F4F6; font-size:13.5px; align-items:center; }
.zb-cell-highlight { font-weight:700; color:#059669; }

/* FAQ */
.zb-faq-list { display:flex; flex-direction:column; gap:10px; }

/* How to Trade page CSS cleanup (task 7, phase 2) — template-how-to-trade.php.
   Same exact property values as before — zero visual difference.
   .httrade-toc's base rule (position/display) is merged in here together
   with the desktop-visibility media query that used to live in a stray
   <style> block at the bottom of the template file — that block has
   been removed now that the rule lives in the stylesheet where it belongs.
   Reuses .container-800 and .algo-strong-dark from earlier passes. */
.httrade-hero { position:relative; overflow:hidden; padding: 80px 0 48px; background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 42%, #ffffff 100%); }
.httrade-hero::before {
	content:''; position:absolute; width:640px; height:640px; left:-260px; top:-220px; border-radius:50%;
	background: radial-gradient(circle, rgba(189,30,62,.15) 0%, rgba(189,30,62,0) 72%); pointer-events:none;
}
.httrade-hero::after {
	content:''; position:absolute; width:520px; height:520px; right:-220px; bottom:-240px; border-radius:50%;
	background: radial-gradient(circle, rgba(17,24,39,.08) 0%, rgba(17,24,39,0) 72%); pointer-events:none;
}
.httrade-hero > .container-800 { position:relative; z-index:1; }
@media (max-width: 600px) { .httrade-hero { padding: 56px 0 36px; } }
.httrade-badge { width:fit-content; display:inline-flex; align-items:center; gap:8px; padding: 8px 14px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.httrade-h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; color: #111827; line-height: 1.08; letter-spacing:-0.025em; margin-bottom: 16px; }
.httrade-lede { font-size: 17px; color: #4B5563; line-height: 1.7; max-width:720px; margin-bottom: 28px; }
.httrade-cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.httrade-btn-primary { text-decoration:none; height:48px; display:inline-flex; align-items:center; justify-content:center; padding: 0 28px; border-radius: 100px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px rgba(189,30,62,.28); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.httrade-btn-primary:hover { transform: translateY(-2px); background:#A01934; box-shadow: 0 10px 24px rgba(189,30,62,.36); }
.httrade-btn-secondary { text-decoration:none; height:48px; display:inline-flex; align-items:center; gap:8px; padding: 0 24px; border-radius: 100px; background: rgba(255,255,255,.85); color: #BD1E3E; font-weight: 700; font-size: 15px; border: 1.5px solid rgba(189,30,62,.35); transition: all .25s ease; }
.httrade-btn-secondary:hover { transform: translateY(-2px); background:#fff; border-color:#BD1E3E; box-shadow: 0 8px 20px rgba(189,30,62,.18); }
@media (max-width: 600px) {
  .httrade-lede { font-size: 15px; }
  .httrade-cta-row { flex-direction:column; align-items:stretch; }
  .httrade-btn-primary, .httrade-btn-secondary { width:100%; justify-content:center; }
}
.httrade-btn-dark-secondary { text-decoration:none; height:48px; display:inline-flex; align-items:center; gap:8px; padding: 0 24px; border-radius: 100px; background: rgba(255,255,255,.08); color: #ffffff; font-weight: 700; font-size: 15px; border: 1.5px solid rgba(255,255,255,.4); transition: all .25s ease; }
.httrade-btn-dark-secondary:hover { background: rgba(255,255,255,.15); border-color:#ffffff; transform: translateY(-2px); }

.httrade-layout { max-width: 1200px; margin: 0 auto; padding: 48px var(--gutter) 72px; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
@media (max-width: 960px) { .httrade-layout { grid-template-columns: 1fr; gap: 24px; } }
.httrade-toc { position: sticky; top: 88px; align-self:start; padding: 18px 0; border-top: 2px solid #BD1E3E; }
@media (max-width: 960px) {
  .httrade-toc { position: static; border-top: 1px solid rgba(148,163,184,.25); padding: 18px 0 12px; }
  .httrade-toc-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .httrade-toc-link { flex: 0 0 auto; padding: 8px 12px; }
}
.httrade-toc-label { font-size:11px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.httrade-toc-nav { display:flex; flex-direction:column; gap:2px; }
.httrade-toc-link { text-decoration:none; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#4B5563; font-size:13px; font-weight:500; }
.httrade-article { max-width: 760px; min-width:0; }
.httrade-article > section { padding: 36px 0; border-bottom: 1px solid rgba(148,163,184,.18); scroll-margin-top: 80px; }
.httrade-article > section:first-of-type { padding-top: 16px; }
.httrade-article > section:last-of-type { border-bottom: none; }
@media (max-width: 600px) { .httrade-article > section { padding: 28px 0; } }

.httrade-h2 { font-size:clamp(22px, 3vw, 30px); font-weight:800; color:#111827; letter-spacing:-0.02em; line-height:1.2; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
@media (max-width: 600px) { .httrade-h2 { font-size:22px; } }
.httrade-h3 { font-size:17px; font-weight:700; color:#111827; letter-spacing:-0.2px; margin:24px 0 10px; }
.httrade-p { font-size:15px; line-height:1.75; color:#374151; }
.httrade-p--mb14 { margin:0 0 14px; }
.httrade-p--mb18 { margin:0 0 18px; }
.httrade-p--mt14 { margin:14px 0 0; }
.httrade-p--m0 { margin:0; }
.httrade-inline-link { color:#BD1E3E; font-weight:600; }
.httrade-tip-link { color:#BD1E3E; font-weight:700; }
.httrade-ol { margin:0; padding:0 0 0 20px; display:grid; gap:10px; font-size:15px; line-height:1.7; color:#374151; }

.httrade-mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 600px) { .httrade-mini-grid { grid-template-columns: 1fr; } }
.httrade-mini-card { background: linear-gradient(140deg, #ffffff 0%, #f9fafb 100%); border:1px solid rgba(148,163,184,.22); border-radius:12px; padding:16px 18px; transition: border-color .2s ease, box-shadow .2s ease; }
.httrade-mini-card:hover { border-color: rgba(189,30,62,.32); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.httrade-mini-title { font-size:14px; font-weight:700; color:#111827; margin-bottom:6px; }
.httrade-mini-body { font-size:13px; color:#6B7280; line-height:1.55; }

/* Callout box — bg/border/text color are page-content-driven (tip vs
   warning), so they're set once as custom properties on the wrapper
   and inherited by the icon/body through var(), instead of repeating
   the same three dynamic values across three separate style="" attrs. */
.httrade-callout { display:flex; gap:12px; align-items:flex-start; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin:18px 0; }
.httrade-callout-icon { color:var(--fg); flex:none; margin-top:2px; }
.httrade-callout-body { font-size:14.5px; line-height:1.65; color:#374151; }
.httrade-callout-title { display:block; margin-bottom:4px; color:#111827; font-weight:700; }

.httrade-final { position:relative; margin-top:36px; background: linear-gradient(135deg, #0F172A 0%, #1F2937 50%, #BD1E3E 130%); border-radius: 22px; padding: 36px 28px; text-align:center; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
.httrade-final-h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color:#ffffff; letter-spacing:-0.02em; margin-bottom:10px; }
.httrade-final-lede { font-size:15.5px; color:rgba(255,255,255,.85); line-height:1.65; margin:0 auto 22px; max-width:560px; }
.httrade-final .httrade-cta-row { justify-content:center; }
.httrade-final .httrade-btn-primary { background:#ffffff; color:#BD1E3E; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.httrade-final .httrade-btn-primary:hover { background:#F3F4F6; color:#A01934; }

/* SEO Landing page CSS cleanup (task 7, phase 2) — template-seo-landing.php.
   Same exact property values as before — zero visual difference.
   The two PHP helpers (fivetrade_seo_url/fivetrade_seo_cta) and the
   per-section alternating background now output a class name picked
   from a fixed small set (e.g. seo-cta-primary vs seo-cta-secondary,
   section-white vs section-alt-f9) instead of building a style="" string
   at runtime — same visual outcome, no inline CSS generated by PHP.
   One exception stays inline out of necessity: the table section's
   grid-template-columns depends on a per-page column COUNT, not a
   fixed toggle, so only that single property remains dynamic.
   Reuses classes already added for other pages where values matched
   exactly: .zb-body-col, .zb-perk-card/-icon/-title, .zb-table-card-scroll,
   .zb-cta-wrap, .algo-advantage-item/-text, .algo-callout, .algo-faq-head,
   .algo-faq-icon, .algo-step-card/-num/-title, .zb-h2, .algo-strong-dark,
   .text-accent, .ta-center, .p-reset, .cta-row-center, .container-780,
   .mb-10/16/24/28. */
.mb-32 { margin-bottom:32px; }
.mt-6 { margin-top:6px; }
.mt-24 { margin-top:24px; }
.mt-28 { margin-top:28px; }
.seo-checkgrid-list { display:flex; flex-direction:column; gap:14px; }

.seo-cta-primary { text-decoration:none; height:48px; display:inline-flex; align-items:center; gap:6px; padding: 0 26px; border-radius: 12px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 14.5px; }
.seo-cta-secondary { text-decoration:none; height:48px; display:inline-flex; align-items:center; padding: 0 24px; border-radius: 12px; background: #ffffff; color: #374151; font-weight: 600; font-size: 14.5px; border: 1.5px solid #E5E7EB; }

.seo-hero { text-align:center; padding: 80px 0 64px; background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 60%, #ffffff 100%); }
.seo-h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: #0f172a; max-width: 760px; margin: 0 auto 14px; }
.seo-tagline { font-size:18px; font-weight:500; color:#374151; margin-bottom:16px; }
.seo-lede-hero { font-size: 15.5px; color: #4b5563; line-height: 1.7; max-width: 660px; margin: 0 auto; }
.seo-lede2 { font-size: 15px; font-weight:600; color: #111827; line-height: 1.6; margin-bottom: 28px; }

/* Per-page hero title size / max-width — the original gives each of
   these 7 pages its own clamp() and column width for the H1 and lede,
   so the shared .seo-h1 / .seo-lede-hero defaults above (which match
   most pages) are overridden per slug where the source diverges. */
.seo-page-forex-trading .seo-h1 { font-size: clamp(28px, 4.5vw, 48px); max-width: 760px; }
.seo-page-commodity-trading .seo-h1 { font-size: clamp(32px, 5vw, 52px); max-width: 740px; }
.seo-page-commodity-trading .seo-lede-hero { max-width: 640px; }
.seo-page-commodity-trading .seo-finalcta-card { max-width: 640px; }
.seo-page-crypto-trading .seo-h1,
.seo-page-virtual-trading .seo-h1 { font-size: clamp(32px, 5vw, 52px); max-width: 680px; }
.seo-page-copy-trading .seo-h1 { font-size: clamp(30px, 5vw, 50px); max-width: 780px; }
.seo-page-copy-trading .seo-lede-hero { max-width: 680px; }
.seo-page-paper-trading .seo-h1 { font-size: clamp(28px, 4.5vw, 50px); max-width: 760px; }
.seo-page-derivatives-trading .seo-h1 { font-size: clamp(32px, 5vw, 52px); max-width: 680px; }
.seo-trust-list { display:flex; flex-direction:column; gap:10px; max-width:400px; margin: 0 auto 28px; }
.seo-trust-item { display:flex; align-items:center; gap:10px; text-align:left; }
.seo-trust-text { font-size:14px; color:#374151; font-weight:500; }

.seo-section { padding: 56px 0; }
.seo-container-wide { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }

/* prose */
.seo-h2-mb16 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #111827; margin-bottom: 16px; }
.seo-prose-grid { display:grid; gap:32px; align-items:start; }
.seo-prose-grid--solo { grid-template-columns: 1fr; }
.seo-prose-grid--split { grid-template-columns: 1.5fr 1fr; }
.seo-checklist-box { display:flex; flex-direction:column; gap:12px; background:#F9FAFB; border:1px solid #F3F4F6; border-radius:14px; padding:22px; }
.seo-check-item { display:flex; align-items:flex-start; gap:10px; }
.seo-check-text { font-size:13.5px; color:#374151; line-height:1.5; }

/* callout */
.seo-h2-mb10 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #111827; margin-bottom: 10px; }
.seo-callout-sub { font-size:15px; font-weight:600; color:#374151; }
.seo-callout-box { display:flex; gap:14px; align-items:flex-start; background:#FDF2F4; border:1px solid rgba(189,30,62,.16); border-radius:14px; padding:20px 22px; margin-bottom:20px; }
.seo-callout-icon { color:#BD1E3E; flex:none; }
.seo-callout-text { font-size:14.5px; line-height:1.7; color:#374151; }
.seo-callout-p { font-size:15px; line-height:1.7; color:#4B5563; margin:0 0 14px; }

/* cardgrid / grid */
.seo-cardgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); gap:16px; }
.seo-card { background:#ffffff; border:1px solid #F3F4F6; border-radius:14px; padding:22px 20px; }
.seo-card-title { font-size:15px; font-weight:700; color:#111827; margin-bottom:12px; }
.seo-card-items { display:flex; flex-direction:column; gap:8px; }
.seo-card-item { display:flex; align-items:flex-start; gap:8px; }
.seo-card-text { font-size:13px; color:#4B5563; line-height:1.5; }

/* table */
.seo-table-inner-480 { min-width:480px; }
.seo-table-head { display:grid; grid-template-columns: repeat(var(--cols, 3), 1fr); padding:14px 22px; background:#F9FAFB; font-size:12px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.06em; }
.seo-table-row { display:grid; grid-template-columns: repeat(var(--cols, 3), 1fr); padding:13px 22px; border-top:1px solid #F3F4F6; font-size:13.5px; align-items:center; }
.seo-cell-label { font-weight:600; color:#111827; }
.seo-cell-value { color:#4B5563; }
.seo-table-extra { max-width: 820px; margin: 24px auto 0; text-align: left; }
.seo-table-extra-h3 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 16px 0 10px; }
.seo-table-extra-h3:first-child { margin-top: 0; }
.seo-table-extra-p { font-size: 15px; line-height: 1.75; color: #374151; margin: 0 0 6px; }
.seo-exchange-badge { display:inline-block; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.seo-exchange-badge--mcx { background: rgba(189,30,62,.1); color:#BD1E3E; }
.seo-exchange-badge--comex { background: rgba(15,23,42,.08); color:#374151; }

/* steps */
.seo-steps-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr)); gap:18px; }
.seo-ctas2-row { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* faq */
.seo-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.seo-faq-accordion { background:#ffffff; border: 1px solid rgba(148,163,184,.2); border-radius: 14px; overflow: hidden; }
.seo-faq-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; }
.seo-faq-q { font-size: 14.5px; font-weight: 600; color: #0F172A; line-height: 1.45; }
.seo-faq-body { padding: 0 22px 18px; font-size: 13.5px; line-height: 1.7; color: #374151; }

/* finalcta */
.seo-finalcta-section { padding: 72px 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
.seo-finalcta-card { text-align:center; max-width: 680px; margin: 0 auto; color:#ffffff; }
.seo-finalcta-eyebrow { font-size:11px; font-weight:700; letter-spacing:.14em; opacity:.85; text-transform:uppercase; margin-bottom:12px; }
.seo-finalcta-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom:12px; }
.seo-finalcta-body { font-size:15px; opacity:.9; line-height:1.65; max-width:600px; margin:0 auto 22px; }
.seo-finalcta-btn { text-decoration:none; display:inline-flex; align-items:center; height:50px; padding: 0 28px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.seo-finalcta-btn--primary { background: #ffffff; color: #BD1E3E; }
.seo-finalcta-btn--secondary { background: rgba(255,255,255,.1); color:#ffffff; border:1.5px solid rgba(255,255,255,.3); }

/* Open Account page CSS cleanup (task 7, phase 2) — template-openaccount.php.
   Same exact property values as before — zero visual difference.
   Reuses .httrade-inline-link, .section-white, .section-alt-f9,
   .ft-eyebrow, .ft-col-gap10, .grad-heading, .faq-lite-item from
   earlier passes / pre-existing utilities. */
.flex-none { flex:none; }

.oa-hero-bg { background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 42%, #ffffff 100%); }
.oa-hero-container { max-width: 1200px; margin: 0 auto; padding: 80px var(--gutter) 56px; }
@media (max-width: 540px) { .oa-hero-container { padding-top:56px; padding-bottom:40px; } }
.oa-hero-copy { display:flex; flex-direction:column; gap:20px; }
.oa-badge { align-self: flex-start; display:inline-flex; align-items:center; gap:8px; padding: 8px 14px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.oa-h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
.oa-lede { font-size: 17px; line-height: 1.7; color: #4B5563; max-width: 580px; }
.oa-phone-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.oa-phone-group { display: flex; align-items: center; border: 1.5px solid #E5E7EB; border-radius: 100px; overflow: hidden; background: #fff; height: 52px; flex: 1 1 260px; max-width: 340px; transition: border-color .2s ease, box-shadow .2s ease; }
.oa-phone-group:focus-within { border-color: #BD1E3E; box-shadow: 0 0 0 3px rgba(189,30,62,.12); }
.oa-phone-prefix { padding: 0 14px 0 18px; font-size: 15px; font-weight: 700; color: #111827; background: #F9FAFB; height:100%; display:inline-flex; align-items:center; }
.oa-phone-input { flex: 1; padding: 0 18px 0 12px; border: none; outline: none; background: transparent; font-size: 15px; color:#111827; }
.oa-phone-submit { height: 52px; padding: 0 28px; border-radius: 100px; background: #C9CDD3; color: #ffffff; font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.oa-phone-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(189,30,62,.36); }
.oa-phone-msg { font-size: 13px; font-weight: 600; }
.oa-signin-line { font-size: 13.5px; color: #6B7280; }
.oa-stats-card { width:100%; max-width:360px; background: #ffffff; border: 1px solid rgba(148,163,184,.2); border-radius: 18px; padding: 22px; box-shadow: 0 12px 32px rgba(15,23,42,.08); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
@media (max-width: 900px) { .oa-stats-card { order: -1; max-width: 520px; } }
.oa-stat-item { padding: 4px 0; }
.oa-stat-label { font-size: 12.5px; color: #6B7280; font-weight: 600; margin-top:4px; line-height:1.3; }
.oa-stat-value { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }

.oa-section-72 { max-width:1200px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--gutter); display: flex; flex-direction: column; gap: 32px; }
.oa-section-72-gap24 { max-width:1200px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.oa-head-640 { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.oa-h2 { font-size: clamp(26px, 3.8vw, 36px); font-weight: 800; letter-spacing: -0.02em; }
.oa-h2-32 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.oa-h2-sub { font-size: 15.5px; color: #6B7280; line-height: 1.65; margin-top: 4px; }

.oa-step-card { background: #ffffff; border: 1px solid rgba(148,163,184,.2); border-radius: 16px; padding: 22px 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 10px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.oa-step-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: rgba(189,30,62,.28); }
.oa-step-top { display:flex; align-items:center; justify-content:space-between; }
.oa-step-num { font-size: 22px; font-weight: 800; color: #BD1E3E; letter-spacing: -0.5px; }
.oa-step-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(189,30,62,.1); color: #BD1E3E; display: inline-flex; align-items: center; justify-content: center; }
.oa-step-title { font-size: 15.5px; font-weight: 700; color: #111827; }
.oa-step-body { font-size: 13.5px; line-height: 1.6; color: #6B7280; }

.oa-req-card { background: linear-gradient(140deg, #ffffff 0%, #f9fafb 100%); border: 1px solid rgba(148,163,184,.2); border-radius: 18px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.oa-req-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(189,30,62,.1); color: #BD1E3E; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.oa-req-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height:1.55; color: #374151; }
.oa-warning-box { background: rgba(189,30,62,.06); border: 1px solid rgba(189,30,62,.18); border-radius: 12px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: #4B5563; line-height: 1.6; }
.oa-warning-box strong { color: #111827; }

.oa-benefit-card { background: #ffffff; border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.oa-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: rgba(189,30,62,.32); }
.oa-benefit-icon { width: 38px; height: 38px; border-radius: 10px; background: #FDF2F4; color: #BD1E3E; display: flex; align-items: center; justify-content: center; }
.oa-benefit-title { font-size: 15px; font-weight: 800; }
.oa-benefit-text { font-size: 13px; line-height: 1.6; color: #6B7280; }

.oa-faq-wrap { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.oa-faq-head { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.oa-faq-list { display: flex; flex-direction: column; gap: 12px; }
.oa-faq-footer { text-align: center; font-size: 14px; color: #6B7280; }

.oa-final-outer { max-width: 1200px; margin: 0 auto; padding: 24px var(--gutter) 72px; }
.oa-final-card { background: linear-gradient(135deg, #0F172A 0%, #1F2937 50%, #BD1E3E 130%); border-radius: 22px; padding: 44px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; color:#ffffff; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
.oa-final-h2 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; }
.oa-final-lede { font-size: 15.5px; line-height:1.6; color: rgba(255,255,255,.82); max-width:560px; }
.oa-final-btn { cursor:pointer; margin-top:8px; display: inline-flex; align-items:center; height:48px; padding: 0 26px; border-radius: 100px; background: #ffffff; color: #BD1E3E; font-size: 15px; font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: background .2s ease, color .2s ease; }
.oa-final-btn:hover { background: #F3F4F6; color: #A01934; }

/* Market Segment page CSS cleanup (task 7, phase 2) — template-market.php.
   Same exact property values as before — zero visual difference.
   Unlike most other pages, .market-hero-grid/.market-overview-grid/
   .market-benefits-grid/.market-steps-grid/.market-related-grid had NO
   CSS at all before this pass (not even the partial responsive rules
   seen on other pages) — every property, including display:grid and
   gap, was inline. Filled in with the exact current values only; no
   new breakpoints or column counts have been added since none existed
   in the source to preserve.
   Reuses .oa-hero-bg, .oa-hero-copy, .oa-lede, .oa-stats-card,
   .oa-stat-item, .oa-stat-label, .oa-section-72, .oa-h2-sub,
   .oa-benefit-icon/-title/-text, .oa-h2-32, .httrade-inline-link,
   .section-white, .section-alt-f9 from earlier passes. */
.market-hero-grid { max-width: 1200px; margin: 0 auto; padding: 80px var(--gutter) 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .market-hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.market-badge { width: fit-content; display:inline-flex; align-items:center; gap:8px; padding: 8px 14px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 18px; }
.market-h1 { font-size: clamp(30px, 4.6vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.market-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items:center; }
.market-btn-primary { text-decoration: none; display: inline-flex; align-items:center; justify-content:center; padding: 13px 28px; border-radius: 100px; background: #BD1E3E; color: #ffffff; font-size: 15px; font-weight: 700; box-shadow: 0 8px 20px rgba(189,30,62,.28); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.market-btn-primary:hover { transform: translateY(-2px); background:#a01934; box-shadow: 0 10px 24px rgba(189,30,62,.36); }
.market-btn-secondary { text-decoration: none; display: inline-flex; align-items:center; gap:8px; padding: 13px 24px; border-radius: 100px; border: 1.5px solid rgba(189,30,62,.35); background: rgba(255,255,255,.85); color: #BD1E3E; font-size: 15px; font-weight: 700; transition: all .25s ease; }
.market-btn-secondary:hover { transform: translateY(-2px); background:#fff; border-color:#BD1E3E; box-shadow: 0 8px 20px rgba(189,30,62,.18); }
.market-pills-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.market-pill { text-decoration: none; display: inline-block; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #ffffff; color: #475569; border: 1.4px solid #E5E7EB; }
.market-pill.is-active { background: #BD1E3E; color: #ffffff; border-color: #BD1E3E; }
.market-stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }

.market-overview-grid { max-width: 1200px; margin: 0 auto; padding: 32px var(--gutter) 56px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: flex-start; }
@media (max-width: 900px) { .market-overview-grid { grid-template-columns: 1fr; gap: 28px; } }
.market-overview-copy { display: flex; flex-direction: column; gap: 14px; }
.market-overview-p { font-size: 15.5px; line-height: 1.7; color: #475569; }
.market-overview-card { background: #ffffff; border: 1px solid #F3F4F6; border-radius: 18px; padding: 28px; box-shadow: 0 12px 32px rgba(15,23,42,.06); display: flex; flex-direction: column; gap: 14px; align-self: start; }
.market-overview-card-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.market-overview-note { font-size: 13.5px; color: #6B7280; line-height: 1.55; }
.market-overview-list { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.market-overview-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; color: #111827; }

.market-benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .market-benefits-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .market-benefits-grid { grid-template-columns: 1fr; } }
.market-benefit-card { background: #ffffff; border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.market-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: rgba(189,30,62,.32); }

.market-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1024px) { .market-steps-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .market-steps-grid { grid-template-columns: 1fr; } }
.market-step-card { background: #ffffff; border: 1px solid rgba(148,163,184,.2); border-radius: 16px; padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.market-step-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: rgba(189,30,62,.28); }
.market-step-num { font-size: 22px; font-weight: 900; color: #E5E7EB; letter-spacing: -0.02em; }

.market-faq-wrap { max-width: 900px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.market-faq-box { max-width: 760px; margin: 0 auto; width: 100%; background: #ffffff; border: 1px solid #EEF0F3; border-radius: 16px; padding: 8px 24px; }
.market-faq-item { border-bottom: 1px solid #F2F4F6; }
.market-faq-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; }
.market-faq-q { font-size: 15px; font-weight: 600; color: #111827; }
.market-faq-icon { flex: none; font-size: 22px; font-weight: 700; color: #BD1E3E; line-height: 1; }
.market-faq-body { padding: 0 0 18px; font-size: 13.5px; line-height: 1.7; color: #374151; }
.market-faq-footer { text-align: center; font-size: 13.5px; color: #6B7280; }

.market-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .market-related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .market-related-grid { grid-template-columns: 1fr; } }
.market-related-card { text-decoration:none; display:flex; flex-direction:column; background: #ffffff; border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.market-related-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #BD1E3E; text-transform:uppercase; margin-bottom:8px; }
.market-related-name { font-size: 17px; font-weight: 800; color:#111827; margin-bottom:6px; }
.market-related-sub { font-size: 13px; line-height: 1.55; color: #6B7280; margin-bottom:12px; }
.market-related-link { font-size: 13px; font-weight: 700; color: #BD1E3E; display:inline-flex; align-items:center; gap:4px; }

.market-final-outer { max-width: 1200px; margin: 0 auto; padding: 56px var(--gutter) 72px; }
.market-final-card { background: linear-gradient(135deg, #0F172A 0%, #1F2937 50%, #BD1E3E 130%); border-radius: 22px; padding: 44px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; color:#ffffff; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
.market-final-h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.market-final-body { font-size: 15.5px; color: rgba(255,255,255,.82); max-width:560px; }
.market-final-btn { text-decoration:none; margin-top:6px; display: inline-flex; align-items:center; height:48px; padding: 0 26px; border-radius: 100px; background: #ffffff; color: #BD1E3E; font-size: 15px; font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: all .2s ease; }
.market-final-btn:hover { background: #F3F4F6; color: #A01934; }

/* Negative Balance Protection page CSS cleanup (task 7, phase 2) —
   template-negative-balance-protection.php. Same exact property values
   as before — zero visual difference. Fills in .nbp-hero-grid /
   .nbp-pillars-grid / .nbp-stage-grid's missing base display:grid/gap
   (same gap-fixing pattern found on several other pages already).
   The per-stage dynamic padding-bottom (last stage gets 0, others get
   32px) is now a is-last/is-more modifier class instead of an inline
   ternary-built style string. */
.nbp-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0F1320 0%, #1B1F2E 100%); color: #ffffff; padding: 96px 0 88px; }
.nbp-hero-glow { position:absolute; width:1100px; height:600px; left:50%; top:-120px; transform:translateX(-50%); border-radius:50%; background: radial-gradient(closest-side, rgba(189,30,62,.36), transparent 70%); filter: blur(60px); pointer-events:none; }
.nbp-badge { display:inline-flex; align-items:center; gap:6px; padding: 7px 14px; border-radius: 999px; background: rgba(189,30,62,.18); border: 1px solid rgba(189,30,62,.32); color: #F9C8D3; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; }
.nbp-h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 20px; color:#ffffff; }
.nbp-h1-accent { background: linear-gradient(135deg, #F9C8D3 0%, #ffffff 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nbp-lede { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.65; margin-bottom: 32px; max-width: 520px; }
.nbp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.nbp-btn-primary { text-decoration:none; height:50px; display:inline-flex; align-items:center; gap:6px; padding: 0 26px; border-radius: 12px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 15px; box-shadow: 0 6px 24px rgba(189,30,62,.45); transition: all .18s ease; }
.nbp-btn-primary:hover { background: #A01934; transform: translateY(-1px); }
.nbp-btn-secondary { text-decoration:none; height:50px; display:inline-flex; align-items:center; padding: 0 24px; border-radius: 12px; background: rgba(255,255,255,.05); color: #ffffff; font-weight: 600; font-size: 15px; border: 1.5px solid rgba(255,255,255,.18); transition: all .18s ease; }
.nbp-btn-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.nbp-hero-card { position:relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 22px; padding: 36px 32px; text-align:center; overflow:hidden; }
.nbp-hero-card-glow { position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(closest-side, rgba(189,30,62,.18), transparent 60%); pointer-events:none; }
.nbp-hero-icon { position:relative; color:#BD1E3E; margin-bottom:18px; filter: drop-shadow(0 0 20px rgba(189,30,62,.6)); }
.nbp-hero-row { position:relative; padding: 16px 0; }
.nbp-hero-row--divider { border-top: 1px solid rgba(255,255,255,.1); }
.nbp-hero-label { display:block; font-size:11px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.nbp-hero-value { font-size:22px; font-weight:800; color:#ffffff; letter-spacing:-0.01em; }
.nbp-hero-value--green { color:#34D399; }

.nbp-stages-section { background:#FAFBFC; padding: 96px 0 88px; }
.nbp-stages-container { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.nbp-stages-head { text-align:center; margin-bottom:56px; }
.nbp-h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #111827; margin-bottom: 12px; letter-spacing:-0.01em; }
.nbp-stages-sub { color:#6B7280; font-size:16px; max-width:580px; margin:0 auto; line-height:1.6; }
.nbp-stages-list { max-width:700px; margin:0 auto; }
.nbp-stage-marker-col { position:relative; display:flex; flex-direction:column; align-items:center; }
.nbp-stage-num { width:56px; height:56px; border-radius:999px; background:#ffffff; border:2px solid #BD1E3E; color:#BD1E3E; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(189,30,62,.18); flex:none; z-index:1; }
.nbp-stage-line { flex:1; width:2px; background:linear-gradient(180deg, #BD1E3E 0%, rgba(189,30,62,.2) 100%); margin-top:8px; }
.nbp-stage-card { background:#ffffff; border:1px solid #F3F4F6; border-radius:14px; padding:22px 24px; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.nbp-stage-icon { width:36px; height:36px; border-radius:10px; background:rgba(189,30,62,.08); color:#BD1E3E; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }

.nbp-pillars-section { padding: 88px 0; }
.nbp-pillars-container { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }
.nbp-pillars-h2 { text-align:center; font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: #111827; margin-bottom: 48px; letter-spacing:-0.01em; }
.nbp-pillar-item { display:flex; gap:14px; }
.nbp-pillar-icon { color:#BD1E3E; flex:none; margin-top:2px; }

.nbp-example-section { padding: 0 0 96px; }
.nbp-example-container { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.nbp-example-card { background: linear-gradient(180deg, #0F1320 0%, #1B1F2E 100%); color:#ffffff; border-radius:22px; padding: 44px 40px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.nbp-example-label { display:inline-block; font-size:11px; font-weight:700; color:#F9C8D3; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.nbp-example-h2 { font-size:24px; font-weight:800; color:#ffffff; margin-bottom:28px; letter-spacing:-0.01em; }
.nbp-example-rows { display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.1); }
.nbp-example-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.nbp-example-row--highlight { display:flex; justify-content:space-between; align-items:center; background:rgba(52,211,153,.06); border:1px solid rgba(52,211,153,.2); margin:12px -20px 0; padding:18px 20px; border-radius:12px; }
.nbp-example-loss { font-weight:700; color:#FCA5A5; font-size:16px; }
.nbp-example-final { font-weight:700; color:#34D399; font-size:17px; }
.nbp-example-footnote { margin-top:22px; font-size:13px; color:rgba(255,255,255,.55); line-height:1.6; text-align:center; }

/* Leverage page CSS cleanup (task 7, phase 2) — template-leverage.php.
   Same exact property values as before — zero visual difference.
   .leverage-hero-grid/.leverage-facts-grid's missing base
   display:grid/gap filled in (same pattern as several other pages).
   The preset-multiplier buttons' dynamic active state (background/
   border/color driven by comparing the button's value to the default
   500x) is now a plain .is-active modifier instead of three separate
   inline ternaries. Reuses .container-1200. */
.lev-page-bg { background: linear-gradient(180deg, #ffffff 0%, #FBFBFD 60%, #ffffff 100%); }
.lev-hero-container { position:relative; overflow:hidden; max-width: 1200px; margin: 0 auto; padding: 88px var(--gutter) 72px; }
.lev-hero-container::before {
	content:''; position:absolute; top:-200px; right:-240px; width:600px; height:600px; border-radius:50%;
	background: radial-gradient(circle, rgba(189,30,62,.10) 0%, transparent 70%); pointer-events:none;
}
.lev-hero-container > .leverage-hero-grid { position:relative; z-index:1; }
.lev-badge { display:inline-flex; align-items:center; gap:6px; padding: 6px 14px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; }
.lev-h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; color: #111827; line-height: 1.05; margin-bottom: 18px; letter-spacing: -0.02em; }
.lev-h1-accent { background: linear-gradient(135deg, #BD1E3E 0%, #E63D6F 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:1.15em; }
.lev-lede { font-size: 17px; color: #6B7280; line-height: 1.65; margin-bottom: 32px; max-width: 520px; }
.lev-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lev-btn-primary { text-decoration:none; height:50px; display:inline-flex; align-items:center; gap:6px; padding: 0 28px; border-radius: 12px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 15px; box-shadow: 0 4px 18px rgba(189,30,62,.32); transition: all .18s ease; }
.lev-btn-primary:hover { background: #A01934; transform: translateY(-1px); }
.lev-btn-secondary { text-decoration:none; height:50px; display:inline-flex; align-items:center; padding: 0 24px; border-radius: 12px; background: #ffffff; color: #374151; font-weight: 600; font-size: 15px; border: 1.5px solid #E5E7EB; transition: all .18s ease; }
.lev-btn-secondary:hover { border-color: #BD1E3E; color: #BD1E3E; }
.lev-calc-card { background: #ffffff; border: 1px solid #F3F4F6; border-radius: 22px; padding: 28px 26px; box-shadow: 0 12px 48px rgba(17,24,39,.10); }
.lev-calc-head { display:flex; justify-content:space-between; align-items:center; font-size: 12px; font-weight: 700; color: #6B7280; text-transform:uppercase; letter-spacing: 0.1em; margin-bottom: 22px; }
.lev-live-badge { background: rgba(16,185,129,.12); color: #059669; padding: 3px 8px; border-radius: 4px; font-size: 10px; }
.lev-calc-label { display:block; font-size: 12px; font-weight: 600; color: #6B7280; margin-bottom: 8px; text-transform:uppercase; letter-spacing: 0.06em; }
.lev-capital-group { display:flex; align-items:center; background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 0 14px; margin-bottom: 22px; transition: border-color .18s ease; }
.lev-capital-group:focus-within { border-color: #BD1E3E; }
.lev-capital-prefix { color:#9CA3AF; font-weight:600; margin-right:6px; }
.lev-capital-input { flex:1; height:46px; border:none; background:transparent; font-size:18px; font-weight:600; color:#111827; outline:none; }
.lev-presets-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:6px; margin-bottom:24px; }
.lev-preset-btn { padding: 10px 0; background: #F9FAFB; border: 1.5px solid transparent; border-radius: 8px; color: #6B7280; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s ease; }
.lev-preset-btn:hover { color: #BD1E3E; }
.lev-preset-btn.is-active { background: rgba(189,30,62,.1); border-color: #BD1E3E; color: #BD1E3E; }
.lev-result-box { background: linear-gradient(135deg, #FDF2F4 0%, #ffffff 100%); border: 1px solid rgba(189,30,62,.16); border-radius: 12px; padding: 18px; text-align:center; margin-bottom:12px; }
.lev-result-label { display:block; font-size:12px; color:#6B7280; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.lev-result-value { font-size:30px; font-weight:800; color:#BD1E3E; letter-spacing:-0.02em; }
.lev-calc-footnote { font-size:11px; color:#9CA3AF; line-height:1.5; text-align:center; }

.lev-tiers-section { background: #F9FAFB; padding: 80px 0; }.lev-tiers-head { text-align:center; margin-bottom:40px; }
.lev-h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #111827; margin-bottom: 10px; letter-spacing: -0.01em; }
.lev-tiers-sub { color:#6B7280; font-size:15px; max-width:520px; margin:0 auto; line-height:1.6; }
.lev-tiers-table { max-width: 820px; margin: 0 auto; background: #ffffff; border-radius: 16px; border: 1px solid #F3F4F6; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.04); }
.lev-tier-row { display:grid; grid-template-columns: 1.2fr 1fr 1.5fr; align-items:center; padding: 18px 24px; border-bottom: 1px solid #F3F4F6; transition: background .15s ease; }
.lev-tier-row:last-child { border-bottom: none; }
.lev-tier-row:hover { background: #FDF2F4; }
.lev-tier-asset { font-weight:700; color:#111827; font-size:15px; }
.lev-tier-value { font-weight:700; color:#BD1E3E; font-size:16px; letter-spacing:-0.01em; }
.lev-tier-note { font-size:13px; color:#6B7280; }

.lev-facts-section { padding: 80px 0; }
.lev-facts-h2 { text-align:center; font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: #111827; margin-bottom: 40px; letter-spacing: -0.01em; }
.lev-fact-card { background:#ffffff; border:1px solid #F3F4F6; border-radius:14px; padding:24px 20px; transition: all .2s ease; }
.hov-lift.lev-fact-card:hover { border-color: rgba(189,30,62,.2); }
.lev-fact-icon { width:38px; height:38px; border-radius:10px; background:rgba(189,30,62,.08); color:#BD1E3E; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.lev-fact-label { font-size:11px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
.lev-fact-text { font-size:14px; color:#374151; line-height:1.6; }

.lev-warning-section { padding: 0 0 80px; }
.lev-warning-box { display:flex; gap:18px; align-items:flex-start; background:#1F2937; border-radius:16px; padding:28px 32px; color:#ffffff; }
.lev-warning-icon { color:#FBBF24; flex-shrink:0; margin-top:2px; }
.lev-warning-title { font-size:17px; font-weight:700; margin-bottom:6px; }
.lev-warning-text { font-size:14px; color:rgba(255,255,255,.72); line-height:1.65; }
.lev-warning-link { color:#ffffff; text-decoration:underline; }

@media (max-width: 768px) {
  .lev-hero-container { padding-top:56px; padding-bottom:48px; }
  .lev-tiers-section, .lev-facts-section { padding: 56px 0; }
  .lev-tier-row { grid-template-columns: 1fr 1fr; row-gap:4px; padding: 16px 18px; }
  .lev-tier-note { grid-column: 1 / -1; }
  .lev-warning-box { flex-direction: column; padding: 24px; }
}

/* Affiliate page CSS cleanup (task 7, phase 2) — template-affiliate.php.
   Same exact property values as before — zero visual difference.
   .affiliate-steps-grid/.affiliate-benefits-grid's missing base
   display:grid/gap filled in (same pattern as several other pages).
   Reuses .market-badge, .text-accent, .lev-cta-row, .lev-btn-primary,
   .lev-btn-secondary, .zb-perk-card/-icon/-title/-text,
   .seo-finalcta-card/-h2/-btn/-btn--primary, .lev-warning-link,
   .container-800, .section-alt-72, .container-1200, .section-head-40,
   .section-h2-38, .section-lede-520 from earlier passes / pre-existing
   utilities. */
.container-700 { max-width: 700px; margin: 0 auto; padding: 0 var(--gutter); }
.aff-section-72 { padding: 72px 0; }

.aff-hero-section { position:relative; overflow:hidden; padding: 80px 0 64px; }
.aff-hero-section::before {
	content:''; position:absolute; width:640px; height:640px; left:-260px; top:-220px; border-radius:50%;
	background: radial-gradient(circle, rgba(189,30,62,.12) 0%, transparent 70%); pointer-events:none;
}
.aff-hero-grid { position:relative; z-index:1; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 1024px) { .aff-hero-grid { grid-template-columns: 1fr; } .aff-earnings-card { display:none; } }
.aff-h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.1; color: #111827; margin-bottom: 16px; }
.aff-lede { font-size: 17px; color: #6B7280; line-height: 1.6; margin-bottom: 32px; max-width: 480px; }
.aff-earnings-card { background:#ffffff; border:1px solid #F3F4F6; border-radius:20px; padding: 32px 28px; box-shadow: 0 8px 40px rgba(0,0,0,.08); }
.aff-earnings-label { font-size:13px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px; }
.aff-earnings-rows { display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
.aff-earnings-row, .aff-earnings-row--last { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:#F9FAFB; border-radius:10px; font-size:14px; color:#374151; }
.aff-earnings-value, .aff-earnings-value--accent { color:#10B981; font-size:16px; font-weight:700; }
.aff-earnings-footnote { font-size:12px; color:#9CA3AF; line-height:1.5; }

.aff-step-card { background:#ffffff; border: 1px solid #F3F4F6; border-radius:16px; padding:28px 24px; }
.aff-step-icon { width:44px; height:44px; border-radius:12px; background:rgba(189,30,62,.08); color:#BD1E3E; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.aff-step-num { font-size:11px; font-weight:700; color:#D1D5DB; letter-spacing:0.1em; margin-bottom:8px; }
.aff-step-title { font-size:16px; font-weight:700; color:#111827; margin-bottom:8px; }
.aff-step-text { font-size:14px; color:#6B7280; line-height:1.6; }

.aff-eligibility-card { background:#ffffff; border:1px solid #F3F4F6; border-radius:20px; padding: 40px 48px; box-shadow: 0 4px 24px rgba(0,0,0,.05); }
.aff-eligibility-h2 { font-size:22px; font-weight:700; color:#111827; margin-bottom:24px; }
@media (max-width: 768px) { .aff-eligibility-card { padding: 28px 24px; } }
.aff-eligibility-list { display:flex; flex-direction:column; gap:12px; }
.aff-eligibility-item { display:flex; gap:10px; align-items:flex-start; }
.aff-eligibility-text { font-size:14px; color:#374151; line-height:1.6; }

.aff-final-lede { font-size:15px; opacity:.9; margin-bottom:22px; }
.aff-final-footnote { font-size:13px; opacity:.8; margin-top:16px; }

/* Championship page CSS cleanup (task 7, phase 2) — template-championship.php.
   Same exact property values as before — zero visual difference.
   .champ-prize-grid/.champ-steps-grid's missing base display:grid/gap
   filled in (same pattern as several other pages). The prize-rank
   border/text color (data-driven per rank) is now a single CSS custom
   property set once on the card, inherited by the rank label inside it
   instead of two separate dynamic style="" attributes.
   Reuses .algo-container-900, .text-accent, .algo-strong-dark,
   .aff-section-72, .aff-step-card/-icon/-num/-text, .aff-eligibility-card/
   -item/-text, .container-800, .seo-finalcta-card/-h2/-btn/-btn--primary,
   .aff-final-lede/-footnote, .lev-warning-link from earlier passes. */
.champ-hero { position:relative; overflow:hidden; text-align:center; padding: 80px 0 64px; }
.champ-hero::before {
	content:''; position:absolute; width:700px; height:700px; left:50%; top:-200px; transform:translateX(-50%); border-radius:50%;
	background: radial-gradient(circle, rgba(189,30,62,.1) 0%, transparent 70%); pointer-events:none;
}
.champ-hero > .algo-container-900 { position:relative; z-index:1; }
.champ-badge { display:inline-flex; align-items:center; gap:6px; padding: 6px 14px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; }
.champ-h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 800; line-height: 1.1; color: #111827; margin-bottom: 20px; }
.champ-lede { max-width: 560px; margin: 0 auto 36px; font-size: 17px; color: #6B7280; line-height: 1.6; }
.champ-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.champ-btn-primary { text-decoration:none; height:48px; display:inline-flex; align-items:center; padding: 0 28px; border-radius: 10px; background: #BD1E3E; color: #ffffff; font-weight: 600; font-size: 15px; box-shadow: 0 4px 16px rgba(189,30,62,.3); transition: all .18s ease; }
.champ-btn-primary:hover { background: #A01934; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(189,30,62,.38); }
.champ-btn-secondary { text-decoration:none; height:48px; display:inline-flex; align-items:center; padding: 0 28px; border-radius: 10px; background: #ffffff; color: #374151; font-weight: 600; font-size: 15px; border: 1.5px solid #E5E7EB; transition: all .18s ease; }
.champ-btn-secondary:hover { border-color: #BD1E3E; color: #BD1E3E; }
.champ-stats-bar { display: inline-flex; align-items: center; background: #ffffff; border: 1px solid #F3F4F6; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.06); padding: 20px 32px; flex-wrap: wrap; justify-content: center; }

.champ-prize-card { background:#ffffff; border: 1.5px solid #F3F4F6; border-top: 4px solid var(--rank-color); border-radius:16px; padding:28px 16px; text-align:center; box-shadow: 0 2px 12px rgba(0,0,0,.04); transition: transform .18s ease, box-shadow .18s ease; }
.champ-prize-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.09); }
.champ-prize-rank { font-size:20px; font-weight:800; color:var(--rank-color); margin-bottom:6px; }
.champ-prize-label { font-size:12px; color:#9CA3AF; font-weight:600; margin-bottom:12px; text-transform:uppercase; letter-spacing:.08em; }
.champ-prize-spacer { height:20px; }
.champ-prize-amount { font-size:19px; font-weight:800; color:#111827; }

.champ-step-title { font-size:17px; font-weight:700; color:#111827; margin-bottom:8px; }

.champ-rules-head { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.champ-rules-h2 { font-size:22px; font-weight:700; color:#111827; margin:0; }
.champ-rules-list { display:flex; flex-direction:column; gap:14px; }

.champ-final-section { padding: 0 0 72px; }

/* Blog page CSS cleanup (task 7, phase 2) — template-blog.php.
   Same exact property values as before — zero visual difference.
   .featured-story-grid's missing base (border/radius/overflow/display:grid)
   filled in — it only had grid-template-columns before.
   The category-filter pills keep the pre-existing .tab-pill class (site.js
   toggles "is-active" on it via classList on click, governed by the
   existing global `.tab-pill.is-active` rule) and get a SEPARATE new
   modifier class for the PHP-rendered initial state, so neither the
   click behavior nor the page-load look changes. */
.blog-hero-bg { position:relative; overflow:hidden; background: linear-gradient(180deg, #ffffff 0%, #fafbfe 46%, #ffffff 100%); }
.blog-hero-bg::before {
	content:''; position:absolute; width:620px; height:620px; left:-260px; top:-280px; border-radius:50%;
	background: radial-gradient(circle, rgba(189,30,62,.14) 0%, rgba(189,30,62,0) 72%); pointer-events:none;
}
.blog-hero-bg::after {
	content:''; position:absolute; width:510px; height:510px; right:-210px; bottom:-250px; border-radius:50%;
	background: radial-gradient(circle, rgba(16,24,40,.105) 0%, rgba(16,24,40,0) 72%); pointer-events:none;
}
.blog-hero-bg > * { position:relative; z-index:1; }
.blog-hero-container { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 5vw, 76px) var(--gutter) clamp(30px, 3vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.blog-hero-badge { width:fit-content; align-self: flex-start; display:inline-flex; align-items:center; gap: 8px; padding: 8px 13px; margin-bottom: 14px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 13px; font-weight: 700; }
.blog-h1 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.blog-hero-lede { font-size: 18px; line-height: 1.6; color: #475569; max-width: 680px; }

.blog-main-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(52px, 6vw, 88px); display: flex; flex-direction: column; gap: 32px; }
.blog-featured-copy { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 20px; background: #ffffff; }
.blog-featured-badge { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 14px; font-weight: 700; }
.blog-featured-h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.blog-featured-excerpt { font-size: 17px; line-height: 1.65; color: #6B7280; }
.blog-featured-cta { text-decoration:none; align-self: flex-start; display:inline-flex; align-items:center; gap:6px; padding: 17px 30px; border-radius: 999px; background: #BD1E3E; color: #ffffff; font-size: 16.5px; font-weight: 700; cursor: pointer; }
.blog-featured-stat-col { background: #FDF1F3; padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.blog-featured-stat-pill { align-self: flex-start; background: #ffffff; border-radius: 999px; padding: 12px 22px; font-size: 15.5px; font-weight: 700; color: #BD1E3E; box-shadow: 0 10px 24px -18px rgba(19,26,42,.4); }
.blog-featured-stat-text { font-size: 17px; line-height: 1.6; color: #475569; }

.blog-cats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.blog-cat-pill { padding: 12px 24px; border-radius: 999px; font-size: 15.5px; font-weight: 600; cursor: pointer; background: #ffffff; color: #475569; border: 1.4px solid #E7EAEE; }
.blog-cat-pill--active { background: #FDEEF1; color: #BD1E3E; border-color: #F0C3CE; }

.blog-posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .blog-posts-grid { grid-template-columns: 1fr; } }
.blog-post-card { background: #ffffff; border: 1px solid #EDEFF2; border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.blog-post-tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #F5F6F8; color: #475569; font-size: 13px; font-weight: 700; }
.blog-post-title { font-size: 20px; font-weight: 700; line-height: 1.32; letter-spacing: -0.015em; text-wrap: pretty; }
.blog-post-body { font-size: 15.5px; line-height: 1.6; color: #6B7280; text-wrap: pretty; }
.blog-post-meta { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 16px; font-size: 14.5px; color: #9AA1AB; }
.blog-post-link { text-decoration:none; display:inline-flex; align-items:center; gap:4px; font-size:14.5px; font-weight:700; color:#BD1E3E; }

.blog-newsletter-outer { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(52px, 6vw, 88px); }
.blog-newsletter-card { background: linear-gradient(135deg, #111827 0%, #1F2937 100%); border-radius: 12px; padding: 40px; color: #ffffff; }
.blog-newsletter-h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.blog-newsletter-p { color: #D1D5DB; line-height: 1.6; margin: 0 0 24px; max-width: 560px; }
.blog-newsletter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.blog-newsletter-input { flex: 1; min-width: 220px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #ffffff; font-size: 15px; }
.blog-newsletter-btn { padding: 14px 24px; border: none; border-radius: 10px; background: #BD1E3E; color: #ffffff; font-weight: 700; font-size: 15px; cursor: pointer; }
.blog-newsletter-msg { font-size: 14px; margin-top: 8px; }
.blog-social-wrap { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.blog-social-label { display:block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 12px; }
.blog-social-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Support page CSS cleanup (task 7, phase 2) — template-support.php.
   Same exact property values as before — zero visual difference.
   .support-stats-grid/.support-channels-grid/.support-help-grid's
   missing base display:grid/gap filled in (same pattern as several
   other pages). Reuses .blog-hero-bg, .blog-hero-badge, .support-h2
   from earlier passes / pre-existing utilities. */
.sup-hero-container { max-width: 1200px; margin: 0 auto; padding: 84px var(--gutter) 34px; display: flex; flex-direction: column; gap: 34px; }
.sup-hero-copy { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.sup-h1 { font-size: clamp(34px, 5.1vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.sup-lede { font-size: 18px; line-height: 1.7; color: #4B5563; }
@media (max-width: 640px) { .sup-hero-container { padding-top:68px; } .sup-lede { font-size:16px; } }
.sup-stat-card { background: linear-gradient(180deg, #ffffff, #f9fafb); border: 1px solid rgba(148,163,184,.2); border-radius: 16px; padding: 22px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.sup-stat-value { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.sup-stat-label { font-size: 14px; font-weight: 600; color: #6B7280; }

.sup-main-container { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(52px, 6vw, 88px); display: flex; flex-direction: column; gap: 34px; }
.sup-section-head { display: flex; flex-direction: column; gap: 10px; }
.sup-h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em; }
.sup-h2-sub { font-size: 17px; line-height: 1.7; color: #6B7280; }

.sup-channel-card { background: #ffffff; border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sup-channel-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: rgba(189,30,62,.3); }
.sup-channel-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(189,30,62,.1); color: #BD1E3E; display: flex; align-items: center; justify-content: center; }
.sup-channel-title { font-size: 21px; font-weight: 800; color:#111827; margin-bottom:8px; }
.sup-channel-meta { align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: rgba(189,30,62,.08); color: #BD1E3E; font-size: 12px; font-weight: 700; margin-bottom:10px; }
.sup-channel-body { line-height: 1.65; color: #4B5563; margin-bottom:14px; }
.sup-channel-cta { align-self: flex-start; background: #BD1E3E; color: #ffffff; border-radius: 10px; padding: 10px 14px; font-weight: 700; }

.sup-qa-card { background: #ffffff; border: 1px solid rgba(148,163,184,.2); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.sup-qa-item { background: #f9fafb; border: 1px solid rgba(148,163,184,.2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sup-qa-q { font-size: 17px; font-weight: 700; color:#111827; margin-bottom:6px; }
.sup-qa-a { line-height: 1.65; color: #4B5563; }

.sup-form-card { background: #ffffff; border: 1px solid rgba(148,163,184,.2); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.sup-form-lede { line-height: 1.7; color: #4B5563; margin-bottom:14px; }
.sup-form-input { width: 100%; padding: 11px 12px; font-size: 15px; color:#111827; border: 1px solid rgba(148,163,184,.34); border-radius: 11px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.sup-form-select { width: 100%; padding: 11px 12px; font-size: 15px; color:#111827; border: 1px solid rgba(148,163,184,.34); border-radius: 11px; outline: none; background: #ffffff; transition: border-color .15s ease, box-shadow .15s ease; }
.sup-form-textarea { width: 100%; min-height: 130px; padding: 11px 12px; font-size: 15px; color:#111827; border: 1px solid rgba(148,163,184,.34); border-radius: 11px; outline: none; resize: vertical; transition: border-color .15s ease, box-shadow .15s ease; }
.sup-form-input:focus, .sup-form-select:focus, .sup-form-textarea:focus { border-color: rgba(189,30,62,.5); box-shadow: 0 0 0 3px rgba(189,30,62,.08); }
.sup-form-msg { font-size: 14px; font-weight: 600; }
.sup-form-submit { text-align: center; height:44px; display:flex; align-items:center; justify-content:center; border-radius: 11px; background: #BD1E3E; color: #ffffff; font-weight: 700; cursor: pointer; }

/* Create Account (signup) page CSS cleanup (task 7, phase 2) —
   template-signup.php. Same exact property values as before — zero
   visual difference. This template renders its own standalone
   <html>/<head>/<body> (no get_header/get_footer), so the body reset
   is now applied via body_class( 'signup-page' ) — the standard
   WordPress way to add a custom body class — instead of a raw style=""
   attribute on <body>. Reuses .ft-col-gap8, .signup-label-14,
   .signup-row-flex, .signup-body-14, .signup-link (pre-existing). */
.signup-page { margin:0; font-family:Inter, 'Helvetica Neue', system-ui, -apple-system, sans-serif; color:#131A2A; background:#ffffff; }
.signup-page-wrap { min-height:100vh; display:flex; flex-direction:column; }
.signup-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: stretch; }

.signup-left-panel { background: linear-gradient(150deg, #05475A 0%, #12879F 45%, #7FCBD4 100%); color: #ffffff; padding: clamp(36px, 5vw, 68px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.signup-left-top { display: flex; flex-direction: column; gap: 30px; }
.signup-logo-link { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; color: inherit; }
.signup-logo-mark { width: 40px; height: 40px; border-radius: 9px; background: #BD1E3E; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px; }
.signup-logo-bar { width: 4px; background: #ffffff; border-radius: 1px; }
.signup-logo-bar--h10 { height: 10px; }
.signup-logo-bar--h16 { height: 16px; }
.signup-logo-bar--h13 { height: 13px; }
.signup-logo-text { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.signup-headline { font-size: clamp(24px, 2.4vw, 31px); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; max-width: 520px; }
.signup-sub { font-size: 17px; opacity: .95; }
.signup-bullets { display: flex; flex-direction: column; gap: 16px; }
.signup-bullet-row { display: flex; align-items: center; gap: 14px; font-size: 16.5px; font-weight: 700; }
.signup-bullet-check { width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.signup-left-bottom { display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
.signup-subheadline { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.signup-subbody { font-size: 16px; line-height: 1.6; opacity: .95; }

.signup-right-panel { background: #ffffff; padding: clamp(36px, 5vw, 68px); display: flex; align-items: center; }
.signup-form-col { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.signup-h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; }
.signup-form-sub { font-size: 15.5px; color: #6B7280; }
.signup-phone-group { display: flex; border: 1.4px solid #DCE0E5; border-radius: 8px; overflow: hidden; }
.signup-phone-prefix { padding: 14px 14px; background: #F7F8FA; border-right: 1.4px solid #DCE0E5; font-size: 15px; font-weight: 600; white-space: nowrap; }
.signup-phone-input { flex: 1; padding: 14px; font-size: 15px; border: none; outline: none; }
.signup-text-input { width: 100%; padding: 14px; font-size: 15px; border: 1.4px solid #DCE0E5; border-radius: 8px; outline: none; }
.signup-checkbox { width: 20px; height: 20px; flex: none; margin-top: 3px; border: 1.6px solid #9AA1AB; border-radius: 4px; background: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 13px; }
.signup-more-link { font-weight: 700; color: #131A2A; text-decoration: underline; }
.signup-msg { font-size: 13.5px; font-weight: 600; }
.signup-submit { text-align: center; padding: 17px; border-radius: 8px; background: #05475A; color: #ffffff; font-size: 16.5px; font-weight: 700; cursor: pointer; }
.signup-footer { text-align: center; font-size: 15px; color: #475569; }
.signup-footer-link { color: #1F72D0; font-weight: 700; cursor: pointer; text-decoration: none; }

/* Manually-extracted dynamic inline styles - static portion moved to
 * class, only the truly per-item dynamic values stay inline via CSS
 * custom properties (matches the pattern already used by
 * .home-faq-icon / .home-market-chip elsewhere in this file). */
.faq-page-accordion-icon { width:34px; height:34px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--bg); color:var(--fg); }
.academy-filter { padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer; background:var(--bg); color:var(--fg); border:1.4px solid var(--border); }
.legal-item-divider { border-top:1px solid #EDF0F4; padding-top:18px; margin-top:18px; }

/* ===================================================================
 * Auto-migrated inline styles (previously style="" attributes directly
 * in template markup). Extracted mechanically 1:1 into classes below so
 * no CSS is authored inline in PHP anymore - matches the live site's
 * approach of keeping all styling in the stylesheet. Class names are
 * content-hashed (ft-s-XXXXXXXX) since this was a bulk migration, not
 * a manual design pass - safe to rename to something more semantic
 * later, just update the matching class= in the template file too.
 * =================================================================== */
.ft-s-06c2bddb {
	background: linear-gradient(180deg, #ffffff 0%, #FBFBFD 50%, #ffffff 100%);
}

.ft-s-f8cf8f35 {
	position: relative;
	overflow: hidden;
	padding: 80px 0 64px;
	text-align: center;
}

.ft-s-f8cf8f35::before {
	content: '';
	position: absolute;
	width: 700px;
	height: 700px;
	left: 50%;
	top: -200px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(189,30,62,.1) 0%, transparent 70%);
	pointer-events: none;
}

.ft-s-9e4a820e {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	position: relative;
	z-index: 1;
}

.ft-s-fd1f4c60 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.ft-s-c36f26ee {
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 800;
	line-height: 1.1;
	color: #111827;
	margin-bottom: 20px;
}

.ft-s-d45fc64c {
	color: #BD1E3E;
}

.ft-s-628ff5d3 {
	max-width: 560px;
	margin: 0 auto 36px;
	font-size: 17px;
	color: #6B7280;
	line-height: 1.6;
}

.ft-s-7c3bed89 {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.ft-s-92f07519 {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding: 14px 24px;
	border-radius: 14px;
	background: #111827;
	color: #ffffff;
	box-shadow: 0 4px 20px rgba(0,0,0,.18);
	transition: all .18s ease;
}

.ft-s-92f07519:hover {
	background: #1F2937;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0,0,0,.24);
}

.ft-s-34d8cc41 {
	font-size: 17px;
	font-weight: 700;
}

.ft-s-71a613cf {
	display: inline-flex;
	align-items: center;
	background: #ffffff;
	border: 1px solid #F3F4F6;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,.06);
	padding: 20px 32px;
	flex-wrap: wrap;
	justify-content: center;
}

.ft-s-22037802 {
	background: #F9FAFB;
	padding: 72px 0;
}

.ft-s-83a6df7d {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.ft-s-83a6df7d { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.ft-s-f8cf8f35 { padding: 56px 0 48px; }
	.ft-s-71a613cf { padding: 16px 20px; }
	.ft-s-71a613cf .app-stat-col { padding: 0 16px; }
	.ft-s-71a613cf .app-stat-value { font-size: 20px; }
	.app-stat-divider { height: 28px; }
	.ft-s-83a6df7d { grid-template-columns: 1fr; }
	.ft-s-5a306842 { padding: 40px 24px; }
	.ft-s-a358bf3b { font-size: 26px; }
}

.ft-s-800522a2 {
	background: #ffffff;
	border: 1px solid #F3F4F6;
	border-radius: 16px;
	padding: 28px 24px;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ft-s-800522a2:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,.07);
}

.ft-s-752ba151 {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.ft-s-d8ec7b8c {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 8px;
}

.ft-s-b88ea36d {
	font-size: 14px;
	color: #6B7280;
	line-height: 1.6;
}

.ft-s-bcc30987 {
	padding: 72px 0;
}

.ft-s-f4762f8e {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	max-width: 700px;
	margin: 0 auto;
}

.ft-s-9437ec52 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.ft-s-5e499dd5 {
	padding: 0 0 72px;
}

.ft-s-5a306842 {
	background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
	border-radius: 24px;
	padding: 64px 48px;
	text-align: center;
}

.ft-s-a358bf3b {
	font-size: 36px;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 12px;
}

.ft-s-c8b3618e {
	font-size: 16px;
	color: rgba(255,255,255,.7);
	margin-bottom: 32px;
}

.ft-s-f951dcc7 {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ft-s-8ac4836f {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding: 14px 24px;
	border-radius: 14px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	color: #ffffff;
	transition: all .18s ease;
}

.ft-s-8ac4836f:hover {
	background: rgba(255,255,255,.18);
	transform: translateY(-2px);
}

.ft-s-e3fb4162 {
	font-size: 13px;
	color: rgba(255,255,255,.5);
}

.ft-s-bc793b1f {
	color: rgba(255,255,255,.8);
	text-decoration: underline;
}

.ft-s-b36a0d16 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 84px 24px 72px;
}

.ft-s-2b8fc161 {
	margin-bottom: 24px;
	border-radius: 16px;
	overflow: hidden;
}

.ft-s-7f47b263 {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: #111827;
}

.ft-s-50ee3c83 {
	color: inherit;
	text-decoration: none;
}

.ft-s-60676d18 {
	color: #4B5563;
	line-height: 1.75;
	font-size: 17px;
}

.ft-s-48c532de {
	max-width: 840px;
	margin: 32px auto 0;
	display: flex;
	justify-content: space-between;
}

.ft-s-dc4c9042 {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 48px 0;
}

.ft-s-5bffa2e9 {
	font-size: 28px;
	margin: 0 0 12px;
	color: #111827;
}

.ft-s-4f29dcd8 {
	color: #4B5563;
	line-height: 1.7;
}

.ft-s-58967ef9 {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.ft-s-2dbeff70 {
	flex: 1;
	background: linear-gradient(160deg, #EDEFF2 0%, #F4F6F8 60%, #E9ECEF 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	gap: 26px;
}

.ft-s-7ded295a {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	text-decoration: none;
}

.ft-s-21db0ff4 {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #BD1E3E;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	padding: 9px;
}

.ft-s-ea97de26 {
	width: 5px;
	height: 11px;
	background: #ffffff;
	border-radius: 1px;
}

.ft-s-d1211713 {
	width: 5px;
	height: 18px;
	background: #ffffff;
	border-radius: 1px;
}

.ft-s-1d223b6c {
	width: 5px;
	height: 14px;
	background: #ffffff;
	border-radius: 1px;
}

.ft-s-d3a1d66c {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #131A2A;
}

.ft-s-1f050958 {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 18px 50px -18px rgba(19,26,42,.22);
	overflow: hidden;
}

.ft-s-2a663605 {
	padding: 32px 32px 24px;
	text-align: center;
	border-bottom: 1px solid #EEF0F3;
}

.ft-s-8919dd5c {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ft-s-f5fa20c2 {
	margin-top: 8px;
	font-size: 15px;
	color: #6B7280;
}

.ft-s-3bfddc64 {
	padding: 26px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ft-s-00d2fd71 {
	display: flex;
	background: #F1F3F5;
	border-radius: 10px;
	padding: 5px;
}

.ft-s-c4033510 {
	flex: 1;
	text-align: center;
	padding: 11px 8px;
	border-radius: 7px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	background: #ffffff;
	color: #1F72D0;
	box-shadow: 0 1px 3px rgba(19,26,42,.12);
}

.ft-s-52c78344 {
	flex: 1;
	text-align: center;
	padding: 11px 8px;
	border-radius: 7px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	background: transparent;
	color: #6B7280;
	box-shadow: none;
}

.ft-s-29c49f98 {
	position: relative;
	padding-top: 8px;
}

.ft-s-b4404d93 {
	position: absolute;
	top: 0;
	left: 12px;
	background: #ffffff;
	padding: 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #1F72D0;
}

.ft-s-e2149389 {
	width: 100%;
	padding: 15px 14px;
	font-size: 15px;
	border: 1.6px solid #1F72D0;
	border-radius: 8px;
	outline: none;
	color: #131A2A;
}

.ft-s-0d0f95cf {
	width: 100%;
	padding: 15px 14px;
	font-size: 15px;
	border: 1.4px solid #DCE0E5;
	border-radius: 8px;
	outline: none;
	color: #131A2A;
}

.ft-s-0ba526d9 {
	font-size: 13.5px;
	font-weight: 600;
	color: #C0392B;
	margin-top: -6px;
}

.ft-s-f4c25bc1 {
	text-align: center;
	padding: 16px;
	border-radius: 10px;
	background: linear-gradient(180deg, #2E86DE, #1F72D0);
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 22px -10px rgba(31,114,208,.6);
}

.ft-s-b70320a8 {
	text-align: center;
	font-size: 13.5px;
	color: #6B7280;
}

.ft-s-73881906 {
	color: #1F72D0;
	font-weight: 600;
}

.ft-s-259ee2d7 {
	display: flex;
	justify-content: space-between;
	font-size: 14.5px;
	font-weight: 600;
}

.ft-s-bfb5abec {
	color: #1F72D0;
}

.ft-s-60256878 {
	color: #1F72D0;
	cursor: pointer;
	text-decoration: none;
}

.ft-s-eac31138 {
	border-top: 1px solid #EEF0F3;
	padding-top: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.ft-s-8110de2a {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #131A2A;
}

.ft-s-2fb3b911 {
	width: 100%;
	text-align: center;
	padding: 15px;
	border-radius: 999px;
	background: linear-gradient(180deg, #2E86DE, #1F72D0);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.ft-s-c1fb5eaf {
	font-size: 14.5px;
	font-weight: 600;
	color: #131A2A;
}

.ft-s-a2a6f3c6 {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.footer-brand-row { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 8px; }
@media (min-width: 769px) {
  .footer-brand-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
}

.footer-brand-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

.ft-s-b347f4df {
	height: 30px;
	width: auto;
	object-fit: contain;
}

.ft-s-fede4b58 {
	display: flex;
	gap: 10px;
}

.footer-trustpilot-col {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.ft-s-69ded7c7 {
	text-decoration: underline;
}

.ft-s-a5ce51e6 {
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-hero-bg {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(900px 380px at 50% -100px, rgba(189,30,62,.10), transparent 70%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
}
.ft-s-ff9def22 {
	position: relative;
	z-index: 1;
	max-width: 1060px;
	margin: 0 auto;
	padding: 96px 24px 72px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
@media (max-width: 768px) { .ft-s-ff9def22 { padding-top:64px; padding-bottom:48px; } }

.ft-s-b9a90318 {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ft-s-2dea8a96 {
	width: fit-content;
	margin: 0 auto;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #BD1E3E;
}

.ft-s-b0d55ad8 {
	font-size: clamp(34px, 5.4vw, 56px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #111827;
}

.ft-s-bc07c66e {
	font-size: 17px;
	color: #6B7280;
	line-height: 1.65;
	max-width: 580px;
	margin: 0 auto;
}

.ft-s-e143c052 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ft-s-01b7307c {
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	background: #ffffff;
	color: #6B7280;
	transition: all .15s ease;
	border: 1px solid #E5E7EB;}
.ft-s-01b7307c:hover { color: #BD1E3E; border-color: #BD1E3E; }

.ft-s-c94c10f8 {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 24px clamp(28px, 3vw, 40px);
}

.ft-s-80578d30 {
	display: grid;
	gap: 18px;
}

.ft-s-5b15b5d5 {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #ffffff;
	border: 1px solid #F3F4F6;
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: 0 2px 12px rgba(0,0,0,.03);
	transition: all .2s ease;
}

.ft-s-5b15b5d5:hover { border-color: rgba(189,30,62,.3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.faq-path-arrow { color: #9CA3AF; flex-shrink:0; transition: transform .18s ease, color .18s ease; }
.ft-s-5b15b5d5:hover .faq-path-arrow { color: #BD1E3E; transform: translateX(3px); }
.ft-s-f6372faf {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.ft-s-c896c465 {
	flex: 1;
	min-width: 0;
}

.ft-s-62ac9527 {
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 2px;
}

.ft-s-fb79b7a1 {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.5;
}

.ft-s-0b6c8b6d {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 24px clamp(52px, 6vw, 88px);
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ft-s-269ea7a6 {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ft-s-63eafc9b {
	background: #ffffff;
	border: 1px solid #EDEFF2;
	border-radius: 14px;
	padding: 6px 26px;
}

.ft-s-7117880f {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 0;
	cursor: pointer;
}

.ft-s-e7ffb4be {
	font-size: 19.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ft-s-4dba8785 {
	border-top: 1px solid #F2F4F6;
}

.ft-s-2e379cc2 {
	border-bottom: 1px solid #F2F4F6;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ft-s-0e7fdff5 {
	font-size: 17.5px;
	font-weight: 700;
}

.ft-s-68c496b1 {
	font-size: 16px;
	line-height: 1.65;
	color: #6B7280;
}




.faq-stuck-outer { padding-bottom: 80px; }
.ft-s-dc8db6da {
	max-width: 1200px;
	width: calc(100% - (2 * var(--gutter)));
	margin: 0 auto;
	padding: 48px 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
	border-radius: 22px;
	color: #ffffff;
}
@media (max-width: 768px) { .ft-s-dc8db6da { padding: 32px 22px; } }

.ft-s-00c3b6f0 {
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
}

.ft-s-ca0455cb {
	font-size: 15px;
	color: rgba(255,255,255,.7);
	margin-bottom: 24px;
}

.ft-s-ea63bbdc {
	text-decoration: none;
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 28px;
	border-radius: 12px;
	background: #BD1E3E;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 6px 20px rgba(189,30,62,.4);
	transition: all .18s ease;
}
.ft-s-ea63bbdc:hover { background: #A01934; transform: translateY(-2px); }

.ft-s-381d4038 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 24px 48px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ft-s-a6d8396a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 760px;
}

.resource-page-bg { background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 60%, #ffffff 100%); }
.ft-s-fd3d909b {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.ft-s-02afce83 {
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.ft-s-051c7390 {
	font-size: 17px;
	line-height: 1.65;
	color: #6B7280;
	max-width: 640px;
}

.ft-s-595d8810 {
	display: grid;
	gap: 24px;
	margin-top: 12px;
}

.ft-s-dd8d547f {
	font-size: 18px;
	color: #111827;
}

.ft-s-ac987e5c {
	font-size: 22px;
	color: #BD1E3E;
}

.ft-s-0efb9bca {
	margin-top: 16px;
	text-align: center;
	padding: 32px;
	background: #F9FAFB;
	border-radius: 12px;
}

.ft-s-fd9ee5a3 {
	color: #6B7280;
	margin: 0 0 16px;
}

.ft-s-60ec4861 {
	display: inline-block;
	padding: 14px 28px;
	background: #BD1E3E;
	color: #ffffff;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
}

.ft-s-b46a0f90 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.ft-s-857fb212 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	margin-top: 8px;
}

.ft-s-cb691c73 {
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ft-s-39b2332b {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ft-s-baad24db {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	background: #FDF2F4;
	color: #BD1E3E;
}

.ft-s-c8b4d9a9 {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	background: #F9FAFB;
	color: #6B7280;
}

.ft-s-7b11ee0e {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.ft-s-1bb4a800 {
	color: #6B7280;
	line-height: 1.6;
	font-size: 15px;
	margin: 0;
	flex: 1;
}

.ft-s-1887c5d5 {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: #9CA3AF;
}

.ft-s-db255aac {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ft-s-3d18da21 {
	text-decoration: none;
	color: #BD1E3E;
	font-weight: 700;
	font-size: 14px;
	margin-top: 4px;
}

.ft-s-19affbf8 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter) 72px;
}

.ft-s-1e85b8b0 {
	background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
	border-radius: 12px;
	padding: 40px;
	color: #ffffff;
}

.ft-s-0caf7478 {
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
}

.ft-s-b4e23559 {
	color: #D1D5DB;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 560px;
}

.ft-s-d439b77d {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.ft-s-ce65dc1a {
	flex: 1;
	min-width: 220px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.08);
	color: #ffffff;
	font-size: 15px;
}
.ft-s-ce65dc1a::placeholder { color: #9CA3AF; }

.ft-s-b0182f86 {
	padding: 14px 24px;
	border: none;
	border-radius: 10px;
	background: #BD1E3E;
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background .2s ease;
}
.ft-s-b0182f86:hover:not(:disabled) { background: #A01934; }
.ft-s-b0182f86:disabled { opacity: .7; cursor: default; }

.ft-s-0dcae09a {
	font-size: 14px;
	margin-top: 8px;
}
.ft-s-0dcae09a.is-error { color: #FCA5A5; }
.ft-s-0dcae09a.is-success { color: #86EFAC; }
@media (max-width: 640px) {
  .ft-s-1e85b8b0 { padding: 28px 20px; }
  .ft-s-d439b77d { flex-direction: column; }
  .ft-s-b0182f86 { width: 100%; }
}

.ft-s-279666a2 {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.12);
}

.ft-s-5384cd8e {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9CA3AF;
	margin-bottom: 12px;
}

.ft-s-cffe6648 {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.about-page-bg {
	background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 42%, #ffffff 100%);
}
.about-hero-wrap {
	position: relative;
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 24px 54px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.about-hero-wrap::before {
	content: ''; position: absolute; width: 640px; height: 640px; left: -260px; top: -220px;
	border-radius: 50%; background: radial-gradient(circle, rgba(189,30,62,.15) 0%, rgba(189,30,62,0) 72%);
	pointer-events: none;
}
.about-hero-wrap::after {
	content: ''; position: absolute; width: 520px; height: 520px; right: -220px; bottom: -240px;
	border-radius: 50%; background: radial-gradient(circle, rgba(17,24,39,.1) 0%, rgba(17,24,39,0) 72%);
	pointer-events: none;
}
@media (max-width: 640px) { .about-hero-wrap { padding-top:68px; padding-bottom:40px; } }

.ft-s-05aeafb9 {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 1000px;
}

.ft-s-e2424d10 {
	align-self: flex-start;
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 14px;
	font-weight: 700;
}

.ft-s-39320c61 {
	font-size: clamp(34px, 5.2vw, 60px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.ft-s-af5357a9 {
	font-size: 18px;
	line-height: 1.7;
	color: #4B5563;
	max-width: 700px;
}

.about-metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 900px) { .about-metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .about-metrics-grid { grid-template-columns: 1fr; } }

.about-metric-card {
	background: #ffffff;
	border: 1px solid #EDEFF2;
	border-radius: 14px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
@media (max-width: 640px) { .about-metric-card { padding:20px; } }

.ft-s-ff79df4b {
	font-size: clamp(26px, 3.5vw, 38px);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.ft-s-20f35489 {
	font-size: 14px;
	font-weight: 600;
	color: #6B7280;
}

.about-story-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 900px) { .about-story-grid { grid-template-columns: 1fr; } }

.about-story-card {
	position: relative;
	background: linear-gradient(140deg, #ffffff 0%, #F9FAFB 100%);
	border: 1px solid rgba(148,163,184,.2);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
@media (max-width: 640px) { .about-story-card { padding:20px; } }

.ft-s-31319446 {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(189,30,62,.1);
	color: #BD1E3E;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.ft-s-3370c6b9 {
	font-size: 24px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 10px;
}

.about-highlights-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 34px 24px 72px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.about-section-header {
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.about-section-header h2 {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.about-section-header p {
	font-size: 17px;
	line-height: 1.7;
	color: #6B7280;
}

.about-highlights-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 900px) { .about-highlights-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .about-highlights-grid { grid-template-columns: 1fr; } }

.about-highlight-card {
	background: #ffffff;
	border: 1px solid rgba(148,163,184,.18);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (max-width: 640px) { .about-highlight-card { padding:20px; } }

.ft-s-0137240b {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(189,30,62,.1);
	color: #BD1E3E;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.ft-s-70e5be4f {
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 8px;
}

.ft-s-9bb3b9c7 {
	color: #4B5563;
	line-height: 1.65;
}

.ft-s-cde6e739 {
	background: linear-gradient(180deg, #ffffff 0%, #FAFBFE 42%, #ffffff 100%);
	padding-bottom: 72px;
}

.ft-s-c96feaf5 {
	position: relative;
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
	padding: 84px var(--gutter) 30px;
}

.ft-s-c96feaf5::before {
	content: '';
	position: absolute;
	width: 620px;
	height: 620px;
	left: -260px;
	top: -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(189,30,62,.13) 0%, rgba(189,30,62,0) 72%);
	pointer-events: none;
}

.ft-s-c96feaf5::after {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	right: -220px;
	bottom: -220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(17,24,39,.1) 0%, rgba(17,24,39,0) 72%);
	pointer-events: none;
}

.ft-s-2510ef2c {
	max-width: 840px;
	position: relative;
	z-index: 1;
}

.ft-s-f9335d86 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 13px;
	font-weight: 700;
}

.ft-s-a5c27330 {
	font-size: clamp(34px, 5.1vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 14px;
}

.ft-s-ed4e43b4 {
	color: #4B5563;
	line-height: 1.7;
	font-size: 18px;
	margin: 0;
}

.ft-s-75faf291 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.ft-s-70710b0d {
	background: #ffffff;
	padding: 28px 0 0;
}

@media (max-width: 640px) {
	.ft-s-c96feaf5 { padding-top: 68px; }
	.ft-s-ed4e43b4 { font-size: 16px; }
	.ft-s-70710b0d { padding: 20px 0 0; }
}

.ft-s-86a6bc7c {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.ft-s-99f03b64 {
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #BD1E3E;
	background: rgba(189,30,62,.08);
}

.ft-s-bcab86f2 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #BD1E3E;
	background: rgba(189,30,62,.08);
}

.ft-s-6dfb71df {
	font-size: clamp(24px, 3.2vw, 32px);
	letter-spacing: -0.02em;
	color: #111827;
	margin: 0 0 8px;
}

.ft-s-cbc09663 {
	color: #4B5563;
	line-height: 1.75;
	margin: 0;
}

.ft-s-69e761d7 {
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.ft-s-c9a653dd {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: #FDF2F4;
	color: #BD1E3E;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

.ft-s-d8b4f0d5 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	margin: 0;
}

.ft-s-1c4fc71e {
	font-size: 15px;
	line-height: 1.6;
	color: #6B7280;
	text-wrap: pretty;
	margin: 0;
}

.ft-s-69ffdca9 {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	margin: 0;
}

.ft-s-01670a8d {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: #9CA3AF;
}

.ft-s-dd339c4b {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ft-s-a4723970 {
	margin-top: auto;
	padding-top: 8px;
}

.ft-s-ac263565 {
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: #BD1E3E;
	display: flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
}

.ft-s-275b4c76 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 20px;
	margin-top: 12px;
}

.ft-s-b3bfe1b4 {
	display: none;
	visibility: hidden;
}

.ft-s-59705f79 {
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}

.ft-s-8588e44d {
	width: 100%;
}

.ft-s-09f2bf3b {
	color: #6B7280;
	font-size: 12px;
}

.ft-s-a712ff5d {
	width: 260px;
}

.ft-s-478ce377 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px var(--gutter) 48px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ft-s-a4f708e5 {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #BD1E3E;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 14px;
}

.ft-s-93d726a9 {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.ft-s-986d1d0c {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ft-s-535fa416 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
}

.ft-s-e5d3f1a8 {
	font-size: 15px;
	color: #111827;
}

.ft-s-a8952a97 {
	color: #9CA3AF;
	font-size: 13px;
	white-space: nowrap;
}

.ft-s-7c3b07a0 {
	margin-top: 32px;
	padding: 24px;
	background: #FDF2F4;
	border-radius: 12px;
	text-align: center;
}

.ft-s-5b1d2b7c {
	margin: 0;
	color: #374151;
}

.ft-s-0b4bd261 {
	display: inline-block;
	margin-top: 12px;
	padding: 12px 24px;
	background: #BD1E3E;
	color: #ffffff;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
}

.ft-s-4689ab3e {
	background: linear-gradient(180deg, #ffffff 0%, #fafbfe 50%, #ffffff 100%);
	padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3vw, 40px);
}

.ft-s-c6cbe00f {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ft-s-bb34de4c {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	color: #6B7280;
	font-size: 14.5px;
	font-weight: 600;
}

.ft-s-71162c43 {
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 13px;
	font-weight: 700;
}

.ft-s-381a5818 {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin: 0;
}

.ft-s-171d20c5 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: #6B7280;
	font-weight: 500;
}

.ft-s-ceaf962b {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #D1D5DB;
}

.ft-s-d6961e63 {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(36px, 4vw, 56px) 24px;
}

.ft-s-ea9abc2d {
	background: #F9FAFB;
	padding: clamp(40px, 5vw, 64px) 0;
}

.ft-s-b58046a3 {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.ft-s-6000a15d {
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}

.ft-s-05203ef9 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 20px;
}

.ft-s-9e196986 {
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	border: 1px solid #EDEFF2;
	border-radius: 14px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ft-s-b995aeb7 {
	align-self: flex-start;
	padding: 5px 11px;
	border-radius: 999px;
	background: #F5F6F8;
	color: #475569;
	font-size: 12px;
	font-weight: 700;
}

.ft-s-c9d980f4 {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.ft-s-b85099cf {
	font-size: 14px;
	color: #6B7280;
	line-height: 1.55;
	margin: 0;
}

.ft-s-4a5404e5 {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #9AA1AB;
}

.ft-s-fe8bc508 {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	color: #BD1E3E;
}

.ft-s-2c15f7c1 {
	padding: 40px 0 64px;
}

.ft-s-5c4e8d0d {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}

.ft-s-8d560f37 {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #BD1E3E;
	font-weight: 700;
	font-size: 15px;
}

.ft-s-80e7ec68 {
	margin: 0;
	font-weight: 500;
}

.ft-s-4cb8ceeb {
	position: relative;
}

.ft-s-20d3a939 {
	background: #ffffff;
	border: 1px solid #EDEFF2;
	border-radius: 14px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ft-s-6c18949a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.ft-s-d8cd3f33 {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ft-s-88a35c98 {
	padding: 6px 12px;
	border-radius: 6px;
	background: #FDF2F4;
	color: #BD1E3E;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
	white-space: nowrap;
}

.ft-s-4fe362e3 {
	display: grid;
	gap: 18px;
}

.ft-s-8ce19181 {
	border-top: 1px solid #F2F4F6;
	padding-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.ft-s-98bef680 {
	font-size: 15px;
	color: #6B7280;
}

.ft-s-40f2c15f {
	color: #111827;
}

.ft-s-f9e6d592 {
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	color: #BD1E3E;
}

.ft-s-cc3c4e8f {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(44px, 6vw, 88px) 24px;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.ft-s-70c8e6d7 {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 900px;
}

.ft-s-9daea5c5 {
	align-self: flex-start;
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(189,30,62,.08);
	color: #BD1E3E;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.11em;
}

.ft-s-726186af {
	font-size: clamp(34px, 4.4vw, 62px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.ft-s-f3fc6fe6 {
	font-size: 18px;
	line-height: 1.6;
	color: #475569;
	max-width: 640px;
}

.ft-s-88a37277 {
	display: grid;
	gap: 22px;
}

.ft-s-8b055f7a {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.ft-s-cde4449b {
	padding: 13px 30px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	background: #BD1E3E;
	color: #ffffff;
	border: 1.4px solid #BD1E3E;
}

.ft-s-ee3d5a14 {
	padding: 13px 30px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	background: #ffffff;
	color: #475569;
	border: 1.4px solid #E7EAEE;
}

.ft-s-6ff51e5c {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: 22px;
}

.ft-s-2a7aebaa {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px) 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ft-s-6a1cd1c9 {
	font-size: 14.5px;
	color: #6B7280;
	max-width: 480px;
}

.ft-s-972e612a {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	width: 100%;
	max-width: 440px;
	justify-content: center;
}

.ft-s-af264b06 {
	flex: 1 1 220px;
	height: 48px;
	padding: 0 16px;
	border-radius: 10px;
	border: 1.5px solid #E5E7EB;
	outline: none;
	font-size: 14px;
}

.ft-s-06573b22 {
	height: 48px;
	padding: 0 22px;
	border-radius: 10px;
	background: #BD1E3E;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	flex: none;
}

.ft-s-515f0716 {
	font-size: 13px;
	font-weight: 600;
}

.ft-s-7f005863 {
	display: inline-block;
	vertical-align: -3px;
	flex: none;
}

.ft-blog-post-article { max-width: 840px; margin: 0 auto 48px; }
.ft-signin-body { margin:0;font-family:Inter, 'Helvetica Neue', system-ui, -apple-system, sans-serif;color:#131A2A;background:#ffffff; }