/* ══════════════════════════════════════════════════════════════════
   fx-bridge.css — loaded after fx.css on every page.
   A. Dedicated LIGHT MODE design (tokens, depth, rhythm)
   B. Legacy component bridge: .page-hero, .section-head, .card, .btn,
      forms, pills, alerts, tables, .cta-block → the fx look, both themes.
   Selectors use :not(#_) where legacy theme.css rules carry !important.
   ══════════════════════════════════════════════════════════════════ */

/* ── A. Light mode ─────────────────────────────────────────────── */
html[data-theme="light"]{
  --fx-warm:#b45309;                 /* amber-700: warm accent, 5:1 on white */
  --fx-blue:#1d4ed8;
  --fx-ink:#0b1530;
  --fx-card-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -14px rgba(15,23,42,.16);
  --fx-card-shadow-hover:0 2px 4px rgba(15,23,42,.06),0 22px 44px -18px rgba(29,78,216,.28);
  --bg:#f5f7fb;--bg-alt:#ffffff;--bg-card:#ffffff;--bg-sunken:#eef2f8;
  --border:#e2e7f0;--border-light:#edf1f7;
  --text:#0b1530;--text-2:#3c4864;--muted:#5d6984;
}
html[data-theme="light"] body{background:var(--bg)}

/* depth: cards lift off the page instead of being thin outlines */
html[data-theme="light"] :is(.fxp-card,.fx-case,.fxp-pf-card,.fx-quote,.fx-table-wrap,.ff-news,.fxp-contact-list,.fxp-hero-stats,.loc-card,.loc-faq-item,.fxp-faq details):not(#_){box-shadow:var(--fx-card-shadow)!important;border-color:var(--border)!important}
html[data-theme="light"] :is(a.fxp-card,.fx-case,.fxp-pf-card):hover:not(#_){box-shadow:var(--fx-card-shadow-hover)!important}

/* rhythm: white heroes + alternating white / soft sections */
html[data-theme="light"] .fxp-hero{background:radial-gradient(50% 70% at 92% 0%,rgba(29,78,216,.10),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(180,83,9,.07),transparent 70%),#fff;border-bottom-color:var(--border)}
html[data-theme="light"] .fxp-hero::before{opacity:.55}
html[data-theme="light"] .fxp-section.alt,html[data-theme="light"] .fx-compare{background:#fff}
html[data-theme="light"] .fx-work{background:radial-gradient(60% 50% at 85% 0%,rgba(29,78,216,.06),transparent 70%),var(--bg)}
html[data-theme="light"] .fxp-stats{background:#fff}
html[data-theme="light"] .fx-browser,html[data-theme="light"] .fxp-pf-frame{background:linear-gradient(180deg,#eef2f8,#fff)}
html[data-theme="light"] .fx-browser-bar,html[data-theme="light"] .fxp-pf-bar{background:#f5f7fb}
html[data-theme="light"] .fx-table thead th{background:#f5f7fb}
html[data-theme="light"] .fx-table .fx-us{background:rgba(29,78,216,.05)}
html[data-theme="light"] .fx-final-grid,html[data-theme="light"] .fxp-cta-box{background:radial-gradient(70% 120% at 0% 0%,rgba(29,78,216,.14),transparent 60%),radial-gradient(60% 90% at 100% 100%,rgba(180,83,9,.10),transparent 60%),#fff;box-shadow:var(--fx-card-shadow)}
html[data-theme="light"] .fxp-btn-ghost:not(#_),html[data-theme="light"] .fx-btn-ghost:not(#_){background:#fff!important;border-color:#d6dce8!important}
html[data-theme="light"] .fxp-btn-primary,html[data-theme="light"] .fx-btn-primary{box-shadow:0 8px 20px -8px rgba(37,99,235,.55)}
html[data-theme="light"] .fxp-icon{background:#eaf0ff;color:#1d4ed8}
html[data-theme="light"] .fx-quote-result:not(#_){background:#e6f6ef!important;color:#0f7a4f!important}
html[data-theme="light"] .fx-yes:not(#_){background:#dcf5e7!important;color:#15803d!important}
html[data-theme="light"] .fx-part:not(#_){background:#fdf0dc!important;color:#b45309!important}
html[data-theme="light"] .fxp-checks li::before{background-color:#dcf5e7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
html[data-theme="light"] .fxp-pf-result{background:#fff7ed;border-color:#fde3c4}

/* light footer = deep navy anchor (gives the page a solid base) */
html[data-theme="light"] .ff{--text:#f4f6fc;--text-2:#b8c3dd;--muted:#8d9bbd;--border:#22305a;--border-light:#1b2749;--bg:#08112a;--bg-card:#101d40;--primary:#7aa7ff;--fx-warm:#f4b860;background:#0b1530;color:#b8c3dd}
html[data-theme="light"] .ff-news{box-shadow:none!important}
html[data-theme="light"] .ff-giant span{color:rgba(122,167,255,.45)}

/* table row labels should not inherit the global mono <th> rule */
html[data-theme] .fx-table tbody th:not(#_){font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important}

/* ── B. Legacy bridge (both themes) ────────────────────────────── */
/* Page heroes */
html[data-theme] .page-hero:not(#_){position:relative;padding:clamp(56px,8vw,104px) 0 clamp(44px,6vw,72px)!important;border-bottom:1px solid var(--border);overflow:hidden;
  background:radial-gradient(55% 70% at 90% 0%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%),radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--fx-warm) 9%,transparent),transparent 70%),var(--bg)!important}
html[data-theme="light"] .page-hero:not(#_){background:radial-gradient(50% 70% at 92% 0%,rgba(29,78,216,.10),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(180,83,9,.07),transparent 70%),#fff!important}
html[data-theme] .page-hero::before{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(var(--border-light) 1px,transparent 1px),linear-gradient(90deg,var(--border-light) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 80% at 80% 0%,#000,transparent 75%);pointer-events:none}
html[data-theme] .page-hero .hero-particles{display:none!important}
html[data-theme] .page-hero>:is(.container,.section-inner){position:relative;z-index:1;max-width:var(--fx-shell);margin:0 auto;padding:0 20px}
html[data-theme] .page-hero h1:not(#_){max-width:900px;margin:0 0 18px!important;font-size:clamp(40px,6vw,72px)!important;line-height:1.02!important;letter-spacing:-.05em!important;font-weight:800!important;color:var(--text)!important}
html[data-theme] .page-hero :is(.hero-accent,.accent,h1 span):not(#_){font-family:var(--fx-serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.01em!important;color:var(--fx-warm)!important}
html[data-theme] .page-hero p:not(#_){max-width:660px;font-size:clamp(17px,1.6vw,19px)!important;line-height:1.65!important;color:var(--text-2)!important}
html[data-theme] :is(.page-hero,.section-head,.section,.fxp) .eyebrow:not(#_){display:inline-flex!important;align-items:center;gap:10px;margin-bottom:16px;padding:0!important;border:0!important;background:none!important;font:600 12px/1 var(--fx-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--fx-warm)!important}
html[data-theme] :is(.page-hero,.section-head,.section,.fxp) .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
html[data-theme] .page-hero .breadcrumb:not(#_){margin-top:26px;font:500 12px/1 var(--fx-mono)!important;letter-spacing:.06em}
html[data-theme] .page-hero .breadcrumb :is(a,span):not(#_){color:var(--muted)!important}
html[data-theme] .page-hero .breadcrumb a:hover:not(#_){color:var(--primary)!important}

/* Section heads */
html[data-theme] .section-head h2:not(#_){font-size:clamp(28px,3.6vw,46px)!important;line-height:1.05!important;letter-spacing:-.04em!important;font-weight:800!important;color:var(--text)!important}
html[data-theme] .section-head p:not(#_){font-size:17px;line-height:1.65;color:var(--text-2)!important}

/* Cards */
html[data-theme] :is(.card,.why-card,.service-card,.product-card,.post-card,.blog-card,.course-card,.empty-state,.contact-form-card):not(#_){border:1px solid var(--border)!important;border-radius:18px!important;background:var(--bg-card)!important}
html[data-theme="light"] :is(.card,.why-card,.service-card,.product-card,.post-card,.blog-card,.course-card,.empty-state,.contact-form-card):not(#_){box-shadow:var(--fx-card-shadow)!important}
html[data-theme] :is(.product-card,.post-card,.blog-card,.course-card):hover:not(#_){transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--primary) 50%,var(--border))!important}

/* Buttons */
html[data-theme] .btn:not(#_){border-radius:12px!important;font-weight:700!important;letter-spacing:0!important;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s!important}
html[data-theme] .btn:hover:not(#_){transform:translateY(-2px)}
html[data-theme] .btn-primary:not(#_){background:#2563eb!important;border-color:#2563eb!important;color:#fff!important}
html[data-theme] .btn-primary:hover:not(#_){background:#1d4ed8!important}
html[data-theme] .btn-primary :is(i,span):not(#_){color:#fff!important}
html[data-theme] :is(.btn-secondary,.btn-outline):not(#_){background:var(--bg-card)!important;border:1px solid var(--border)!important;color:var(--text)!important}
html[data-theme] :is(.btn-secondary,.btn-outline):hover:not(#_){border-color:var(--primary)!important}
html[data-theme="light"] .btn-primary:not(#_){box-shadow:0 8px 20px -8px rgba(37,99,235,.55)}

/* Forms */
html[data-theme] :is(.form-control,.form-select):not(#_){border:1px solid var(--border)!important;border-radius:12px!important;background:var(--bg)!important;color:var(--text)!important;transition:border-color .2s,box-shadow .2s}
html[data-theme="light"] :is(.form-control,.form-select):not(#_){background:#fff!important}
html[data-theme] :is(.form-control,.form-select):focus:not(#_){outline:0!important;border-color:var(--primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)!important}
html[data-theme] .form-label:not(#_){font-size:13px!important;font-weight:600!important;color:var(--text-2)!important}

/* Pills / filters */
html[data-theme] .action-pill:not(#_){border:1px solid var(--border)!important;border-radius:999px!important;background:var(--bg-card)!important;color:var(--text-2)!important;font-weight:600!important}
html[data-theme] .action-pill.active:not(#_){background:var(--text)!important;border-color:var(--text)!important;color:var(--bg)!important}

/* Alerts */
html[data-theme] .alert:not(#_){border-radius:12px!important}

/* Legacy CTA block → fx CTA look */
html[data-theme] .cta-block:not(#_){border:1px solid var(--border)!important;border-radius:28px!important;background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--fx-blue) 45%,transparent),transparent 60%),radial-gradient(60% 90% at 100% 100%,color-mix(in srgb,var(--fx-warm) 18%,transparent),transparent 60%),var(--bg-card)!important}
html[data-theme] .cta-block :is(h2,p,div):not(#_){color:var(--text)!important}
html[data-theme] .cta-block p:not(#_){color:var(--text-2)!important}
html[data-theme] .cta-block .btn-white:not(#_){background:#2563eb!important;color:#fff!important;border-color:#2563eb!important}
html[data-theme] .cta-block .btn-white :is(i,span):not(#_){color:#fff!important}
html[data-theme] .cta-block .btn-white-outline:not(#_){background:var(--bg-card)!important;color:var(--text)!important;border:1px solid var(--border)!important}

/* Tables */
html[data-theme] .table:not(#_){border-radius:14px;overflow:hidden}
html[data-theme] .table th:not(#_){background:var(--bg-alt)!important;color:var(--muted)!important}

/* Long-form prose (privacy, terms, posts) */
.fx-prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--text-2)}
.fx-prose :is(h2,h3){color:var(--text);letter-spacing:-.02em;line-height:1.25;margin:2em 0 .6em}
.fx-prose h2{font-size:28px}.fx-prose h3{font-size:21px}
.fx-prose p,.fx-prose ul,.fx-prose ol{margin:0 0 1.2em}
.fx-prose a{color:var(--primary)}
.fx-prose img{max-width:100%;border-radius:14px}
.fx-prose blockquote{margin:1.5em 0;padding:4px 0 4px 20px;border-left:3px solid var(--fx-warm);font-size:19px;color:var(--text)}

/* Blog cards: designed placeholder when a post has no image */
html[data-theme] .blog-img-placeholder:not(#_){display:grid;place-items:center;aspect-ratio:16/9;height:auto!important;background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--primary) 40%,transparent),transparent 60%),radial-gradient(60% 80% at 0% 100%,color-mix(in srgb,var(--fx-warm) 30%,transparent),transparent 60%),#0b1530!important;color:rgba(255,255,255,.85)!important;font-size:34px}
html[data-theme] .blog-img-placeholder i:not(#_){color:rgba(255,255,255,.85)!important}
html[data-theme] .blog-card h3 a:not(#_),html[data-theme] .blog-card h3:not(#_){color:var(--text)!important;letter-spacing:-.02em}
html[data-theme] .blog-card:hover h3 a:not(#_){color:var(--primary)!important}
/* Shop / product image placeholders */
html[data-theme] :is(.product-img-placeholder,.product-image-placeholder):not(#_){background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--primary) 30%,transparent),transparent 60%),var(--bg-alt)!important;color:var(--primary)!important}

/* Academy course: tip box readable in both themes */
html[data-theme] .academy-sidebar-note:not(#_){background:color-mix(in srgb,var(--fx-warm) 10%,var(--bg-card))!important;border:1px solid color-mix(in srgb,var(--fx-warm) 28%,var(--border))!important;border-radius:16px!important}
html[data-theme] .academy-sidebar-note :is(strong,p):not(#_){color:var(--text)!important;opacity:1!important}
html[data-theme] .academy-sidebar-note p:not(#_){color:var(--text-2)!important}
html[data-theme] .academy-sidebar-note i:not(#_){color:var(--fx-warm)!important}

/* ── Homepage hero: dedicated light-mode atmosphere (all hero styles) ── */
html[data-theme="light"] .ft-hero:not(#_){
  background:
    radial-gradient(46% 62% at 78% 46%,rgba(37,99,235,.30),transparent 70%),
    radial-gradient(28% 40% at 100% 0%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(34% 48% at 0% 100%,rgba(245,158,11,.20),transparent 70%),
    radial-gradient(rgba(29,78,216,.10) 1px,transparent 1.3px) 0 0/22px 22px,
    linear-gradient(160deg,#e4ecff 0%,#eef3ff 40%,#f8faff 100%)!important;
  border-bottom:1px solid #d9e2f5}
html[data-theme="light"] .ft-hero .hero-particles{opacity:.45}
html[data-theme="light"] .ft-hero h1 span{background:linear-gradient(90deg,#1d4ed8,#6d28d9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="light"] .ft-hero .fth-pill{background:#fff;border-color:#d4ddf2;box-shadow:0 1px 2px rgba(15,23,42,.05)}
html[data-theme="light"] .ft-hero .fth-chips span{background:#fff;border-color:#d4ddf2}
html[data-theme="light"] .ft-hero .fth-result{background:#fff;border-color:#d4ddf2;box-shadow:0 2px 4px rgba(15,23,42,.05),0 18px 34px -14px rgba(29,78,216,.35)}
html[data-theme="light"] .ft-hero .fth-btn-primary{box-shadow:0 10px 22px -10px rgba(37,99,235,.7)}
html[data-theme="light"] .ft-hero .fth-btn-ghost{background:#fff;border-color:#cfd8ea}
html[data-theme="light"] .agency-proof{background:#fff!important;border-top:1px solid #e2e7f0}
@media (max-width:980px){
  html[data-theme="light"] .ft-hero:not(#_){background:
    radial-gradient(80% 30% at 50% 82%,rgba(37,99,235,.30),transparent 72%),
    radial-gradient(60% 24% at 100% 0%,rgba(124,58,237,.18),transparent 70%),
    radial-gradient(60% 24% at 0% 100%,rgba(245,158,11,.18),transparent 70%),
    radial-gradient(rgba(29,78,216,.10) 1px,transparent 1.3px) 0 0/22px 22px,
    linear-gradient(180deg,#e4ecff 0%,#eef3ff 50%,#f8faff 100%)!important}
}

/* Shop trust strip */
.shop-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.shop-trust span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg-card);font-size:13.5px;font-weight:600;color:var(--text)}
.shop-trust i{color:var(--primary)}

/* Footer is always dark: show the logo in white in every theme */
html[data-theme] .ff .ff-logo img:not(#_){filter:brightness(0) invert(1)}
html[data-theme] .ff .ff-logo.has-dark-logo .site-logo-light:not(#_){display:none}
html[data-theme] .ff .ff-logo.has-dark-logo .site-logo-dark:not(#_){display:inline-block}
html[data-theme] .ff .ff-wordmark:not(#_){color:#fff}