@import url('/quotefleet-color-system.css');

/* Phase BQ: WeFixTrades-style skin for secondary public pages. */
.qf-public-wft {
  --accent: #6E8BFF; /* on-dark TEXT/link accent (accentOnDark); was cobalt #0D3CFC → failed WCAG (~2.5:1) on dark. Solid cobalt button fills below stay hardcoded. */
  --accent-ink: #ffffff;
  --accent-soft: rgba(13,60,252,.14);
  --qf-wft-bg: #181D1F;
  --qf-wft-panel: #22282A;
  --qf-wft-panel-2: #22282A;
  --qf-wft-line: rgba(255,255,255,.12);
  --qf-wft-line-strong: rgba(255,255,255,.22);
  --qf-wft-text: #FFFFFF;
  --qf-wft-muted: #B1C5CE;
  --qf-wft-faint: rgba(177,197,206,.74);
  --qf-wft-blue: #0D3CFC;
  --qf-wft-cream: #E4EDF1;
  --qf-wft-radius: 8px;
  background: #181D1F;
  color: var(--qf-wft-muted);
}
.qf-public-wft .topnav {
  background: #22282A;
  border-bottom: 1px solid var(--qf-wft-line-strong);
  backdrop-filter: blur(14px);
}
.qf-public-wft .topnav-inner {
  min-height: 42px;
  padding-block: var(--space-1);
}
.qf-public-wft .brand-mark {
  font-weight: 900;
  letter-spacing: -0.035em;
}
/* Unified minimal rising-rate-line mark (matches landing header/footer).
 * Render the inline SVG bare; drop the old "QF + check" monogram badge. */
.qf-public-wft .brand-mark .logo {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.qf-public-wft .brand-mark .logo svg { display: block; width: 26px; height: 26px; }
.qf-public-wft .brand-mark .logo::before,
.qf-public-wft .brand-mark .logo::after {
  content: none;
  display: none;
}
.qf-public-wft .nav-link,
.qf-public-wft .signin {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.qf-public-wft .btn-primary {
  background: #0D3CFC;
  color: #FFFFFF;
  border-color: #0D3CFC;
  box-shadow: none;
  border-radius: 4px;
}
.qf-public-wft .btn-primary:hover { border-color: #FFFFFF; }
.qf-public-wft .btn-primary .arr { color: #FFFFFF; }
.qf-public-wft .btn-secondary {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0D3CFC;
  border-radius: 4px;
}
.qf-public-wft .btn-secondary:hover { border-color: #0D3CFC; }
.qf-public-wft .hero {
  padding-top: var(--space-7-5);
  padding-bottom: var(--space-4);
}
.qf-public-wft .hero::before {
  background: radial-gradient(ellipse 50% 34% at 50% 12%, rgba(13,60,252,.16), transparent 68%);
}
.qf-public-wft .hero h1,
.qf-public-wft .support-shell h1,
.qf-public-wft .sec-shell h1 {
  color: var(--qf-wft-text);
  font-weight: 900;
  letter-spacing: -.055em;
}
.qf-public-wft .container,
.qf-public-wft .support-shell,
.qf-public-wft .sec-shell {
  position: relative;
  z-index: 1;
}
.qf-public-wft .pricing,
.qf-public-wft .support-grid,
.qf-public-wft .sec-shell .card-row {
  gap: var(--space-1);
}
.qf-public-wft .price-card,
.qf-public-wft .support-card,
.qf-public-wft .support-note,
.qf-public-wft .support-table,
.qf-public-wft .sec-shell .ct-card,
.qf-public-wft .sec-shell .footer-note,
.qf-public-wft main.container > div[style*="text-align: center"] {
  background: #22282A !important;
  border: 1px solid var(--qf-wft-line) !important;
  border-radius: var(--qf-wft-radius) !important;
  box-shadow: 0 28px 70px -55px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.qf-public-wft .price-card.featured {
  border-color: rgba(13,60,252,.58) !important;
  box-shadow: 0 0 0 1px rgba(13,60,252,.18), 0 28px 70px -55px rgba(0,0,0,.85) !important;
}
.qf-public-wft .price-card h3,
.qf-public-wft .support-card h3,
.qf-public-wft .support-shell h2,
.qf-public-wft .sec-shell h2,
.qf-public-wft .sec-shell .lead-line,
.qf-public-wft .sec-shell .ct-card h4,
.qf-public-wft main.container h3 {
  color: var(--qf-wft-text) !important;
}
.qf-public-wft .price,
.qf-public-wft .support-card a,
.qf-public-wft .sec-shell a {
  color: var(--qf-wft-text) !important;
}
.qf-public-wft .price .per,
.qf-public-wft .muted,
.qf-public-wft .support-shell p,
.qf-public-wft .support-shell li,
.qf-public-wft .support-card p,
.qf-public-wft .support-table td,
.qf-public-wft .support-table th,
.qf-public-wft .sec-shell p,
.qf-public-wft .sec-shell li,
.qf-public-wft .sec-shell .ct-card p,
.qf-public-wft .sec-shell h3,
.qf-public-wft .sec-shell .footer-note {
  color: var(--qf-wft-muted) !important;
}
.qf-public-wft .support-pill,
.qf-public-wft .sec-shell .pill,
.qf-public-wft .tag {
  color: #FFFFFF !important;
  background: rgba(13,60,252,.16) !important;
  border: 1px solid rgba(13,60,252,.42) !important;
}
.qf-public-wft .support-table th,
.qf-public-wft .support-table td {
  border-color: var(--qf-wft-line) !important;
}
.qf-public-wft .support-table th {
  background: rgba(255,255,255,.04) !important;
}
.qf-public-wft .site-footer {
  background: #22282A;
  border-top: 1px solid var(--qf-wft-line);
  color: #B1C5CE;
}
.qf-public-wft .site-footer a {
  color: #FFFFFF;
}
.qf-public-wft .site-footer a:hover {
  color: #FFFFFF;
}
@media (max-width: 760px) {
  .qf-public-wft .hero h1,
  .qf-public-wft .support-shell h1,
  .qf-public-wft .sec-shell h1 { font-size: 38px !important; }
  .qf-public-wft .support-shell,
  .qf-public-wft .sec-shell { padding-inline: var(--space-2); }
}

/* ─────────────────────────────────────────────────────────────────
   LIGHT THEME — Maersk-clean (white surfaces, deep-navy ink, blue
   accent, navy CTAs). Opted in via html[data-theme="light"]. All rules
   below are [data-theme]-scoped, so they are exempt from the hardcoded-
   color guard and never touch the DARK default above. The strategy:
   (1) re-point the local --qf-wft-* palette vars to the global light
   tokens so every var()-driven rule (incl. the sibling dpa / tools /
   marketplace sheets) flips automatically, then (2) explicitly override
   the rules that hardcode dark hex — here and in quotefleet-color-
   system.css — using html[data-theme="light"] body.qf-public-wft … so
   the higher specificity + !important beats color-system's !important.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .qf-public-wft {
  --accent: #0D3CFC;                    /* on light, brand blue reads as itself */
  --accent-soft: rgba(13, 60, 252, .10);
  --qf-wft-bg: var(--bg);
  --qf-wft-panel: var(--surface);
  --qf-wft-panel-2: var(--surface);
  --qf-wft-line: var(--border);
  --qf-wft-line-strong: var(--border-strong);
  --qf-wft-text: var(--ink);
  --qf-wft-muted: var(--muted);
  --qf-wft-faint: var(--muted-soft);
  --qf-wft-cream: var(--accent);        /* paired dark-on-cream rules re-inked below */
}

/* Page canvas + base text (beats color-system body.qf-public-wft). */
html[data-theme="light"] body.qf-public-wft {
  background: var(--bg) !important;
  color: var(--ink-soft) !important;
}
html[data-theme="light"] body.qf-public-wft .topnav,
html[data-theme="light"] .qf-public-wft .topnav {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] body.qf-public-wft .hero,
html[data-theme="light"] body.qf-public-wft .section,
html[data-theme="light"] body.qf-public-wft main {
  background: var(--bg) !important;
}

/* Headings / brand / strong text → deep navy. */
html[data-theme="light"] body.qf-public-wft h1,
html[data-theme="light"] body.qf-public-wft h2,
html[data-theme="light"] body.qf-public-wft h3,
html[data-theme="light"] body.qf-public-wft h4,
html[data-theme="light"] body.qf-public-wft .brand-mark,
html[data-theme="light"] body.qf-public-wft .price,
html[data-theme="light"] body.qf-public-wft .sec-shell .lead-line {
  color: var(--ink) !important;
}

/* Body copy / muted / list text → cool grey (AA on white). */
html[data-theme="light"] body.qf-public-wft p,
html[data-theme="light"] body.qf-public-wft li,
html[data-theme="light"] body.qf-public-wft .muted,
html[data-theme="light"] body.qf-public-wft .muted-small,
html[data-theme="light"] body.qf-public-wft .price .per,
html[data-theme="light"] body.qf-public-wft .support-table td,
html[data-theme="light"] body.qf-public-wft .sec-shell h3 {
  color: var(--muted) !important;
}

/* Links → navy body-link (was white-on-dark). */
html[data-theme="light"] body.qf-public-wft a {
  color: var(--ink-soft) !important;
}
html[data-theme="light"] body.qf-public-wft a:hover {
  color: var(--accent) !important;
}
/* …but keep WHITE label on the solid brand-blue primary button (the generic
   anchor rule above would otherwise paint its text navy-on-blue). */
html[data-theme="light"] body.qf-public-wft a.btn-primary,
html[data-theme="light"] body.qf-public-wft .btn-primary,
html[data-theme="light"] body.qf-public-wft a.btn-primary:hover,
html[data-theme="light"] body.qf-public-wft .btn-primary .arr {
  color: var(--accent-ink) !important;
}

/* Cards / panels / tables → white surface, hairline border, soft shadow
   (beats both color-system and the local #22282A !important card rule). */
html[data-theme="light"] body.qf-public-wft .price-card,
html[data-theme="light"] body.qf-public-wft .support-card,
html[data-theme="light"] body.qf-public-wft .support-note,
html[data-theme="light"] body.qf-public-wft .support-table,
html[data-theme="light"] body.qf-public-wft .sec-shell .ct-card,
html[data-theme="light"] body.qf-public-wft .sec-shell .footer-note,
html[data-theme="light"] body.qf-public-wft main.container > div[style*="text-align: center"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] body.qf-public-wft .price-card.featured {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-lg) !important;
}
html[data-theme="light"] body.qf-public-wft .support-card h3,
html[data-theme="light"] body.qf-public-wft .price-card h3,
html[data-theme="light"] body.qf-public-wft .sec-shell .ct-card h4 {
  color: var(--ink) !important;
}

/* Pills / tags / eyebrows → accent text on a faint accent tint. */
html[data-theme="light"] body.qf-public-wft .support-pill,
html[data-theme="light"] body.qf-public-wft .sec-shell .pill,
html[data-theme="light"] body.qf-public-wft .tag {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: rgba(13, 60, 252, .28) !important;
}

/* Table header tint (was rgba(255,255,255,.04) — invisible on white). */
html[data-theme="light"] body.qf-public-wft .support-table th {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] body.qf-public-wft .support-table td {
  border-color: var(--border) !important;
}

/* Footer. */
html[data-theme="light"] body.qf-public-wft .site-footer {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
html[data-theme="light"] body.qf-public-wft .site-footer a {
  color: var(--ink-soft) !important;
}
html[data-theme="light"] body.qf-public-wft .site-footer a:hover {
  color: var(--accent) !important;
}

/* Secondary button: white-on-white is invisible in light → ghost w/ border. */
html[data-theme="light"] body.qf-public-wft .btn-secondary {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--ink) !important;
}
html[data-theme="light"] body.qf-public-wft .btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────────────────────────────────────────
   PREMIUM GLASS — PRICING CARDS (funnel surface 3). Matches the
   canonical landing-glass.css system (blur/saturate + translucent
   tint + hairline border + soft shadow), tuned to this page's
   #22282A (rgb 34,40,42) panel base. Appended at EOF so no baselined
   guard line shifts; every color is rgba()/token (guard-exempt) and
   all spacing stays on the 8px ramp. -webkit-backdrop-filter is paired
   and an @supports-not SOLID fallback ships for legibility.
   Readability: card tint alpha ≥0.5 so numbers / feature lists / copy
   on the card stay AA. Featured (Pro) = accent OUTLINE + glow, never a
   bright fill. A vibrant radial band sits behind the section so the
   glass has something to refract.
   ───────────────────────────────────────────────────────────────── */

/* Vibrant gradient band behind the pricing grid (refraction source). */
.qf-public-wft .pricing.pricing-2up {
  position: relative;
  z-index: 0;
}
.qf-public-wft .pricing.pricing-2up::before {
  content: '';
  position: absolute;
  inset: -48px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 52% at 28% 18%, rgba(13, 60, 252, 0.34), transparent 70%),
    radial-gradient(56% 46% at 80% 32%, rgba(88, 120, 255, 0.22), transparent 72%);
  filter: blur(8px);
}
html[data-theme="light"] body.qf-public-wft .pricing.pricing-2up::before {
  background:
    radial-gradient(60% 52% at 28% 18%, rgba(13, 60, 252, 0.16), transparent 70%),
    radial-gradient(56% 46% at 80% 32%, rgba(88, 120, 255, 0.12), transparent 72%);
}

/* DARK (default) — regularMaterial glass slab. */
.qf-public-wft .price-card {
  background: rgba(34, 40, 42, 0.60) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.qf-public-wft .price-card.featured {
  border-color: rgba(13, 60, 252, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(13, 60, 252, 0.36),
    0 10px 34px rgba(13, 60, 252, 0.22),
    0 8px 32px rgba(0, 0, 0, 0.30) !important;
}

/* LIGHT — frosted white glass. */
html[data-theme="light"] body.qf-public-wft .price-card {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(15, 37, 64, 0.10) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  box-shadow: 0 8px 32px rgba(10, 37, 64, 0.10) !important;
}
html[data-theme="light"] body.qf-public-wft .price-card.featured {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 1px rgba(13, 60, 252, 0.22),
    0 12px 40px rgba(13, 60, 252, 0.14) !important;
}

/* SOLID fallback where backdrop-filter is unsupported (stays legible). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qf-public-wft .price-card {
    background: rgba(34, 40, 42, 0.98) !important;
  }
  html[data-theme="light"] body.qf-public-wft .price-card {
    background: rgba(255, 255, 255, 0.98) !important;
  }
}