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

/* Phase BQ: WeFixTrades-style skin for secondary public pages. */
.qf-public-wft {
  --accent: #8DA2F9; /* on-dark TEXT/link accent (accentOnDark); the #3356EE fill is 3.00:1 on this dark band (AA-large only); the lightened step is 7.02:1. Solid fills below stay the accent. */
  --accent-ink: #ffffff;
  --accent-soft: rgba(51,86,238,.22);
  --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: #90A1B9;
  --qf-wft-faint: rgba(144,161,185,.82);
  --qf-wft-blue: #3356EE;
  --qf-wft-cream: #E4EDF1;
  --qf-wft-radius: 12px;
  background: #181D1F;
  color: var(--qf-wft-muted);
}
.qf-public-wft .topnav {
  background: #22282A;
  border-bottom: 1px solid var(--qf-wft-line-strong);
}
.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: #3356EE;
  color: #FFFFFF;
  border-color: #3356EE;
  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: #3356EE;
  border-radius: 4px;
}
.qf-public-wft .btn-secondary:hover { border-color: #3356EE; }
.qf-public-wft .hero {
  padding-top: var(--space-7-5);
  padding-bottom: var(--space-4);
}
.qf-public-wft .hero::before {
  background: rgba(51, 86, 238,.16);
}
.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: var(--qf-shadow-md), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.qf-public-wft .price-card.featured {
  border-color: rgba(51, 86, 238,.58) !important;
  box-shadow: 0 0 0 1px rgba(51, 86, 238,.18), var(--qf-shadow-md) !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(51, 86, 238,.16) !important;
  border: 1px solid rgba(51, 86, 238,.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: #3356EE;                    /* on light, brand blue reads as itself */
  --accent-soft: rgba(51, 86, 238, .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);         /* --muted-soft is DE-EMPHASIS only: this token inks 11px form labels (2.63:1 on white) */
  --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(51, 86, 238, .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;
}
/* DARK (default) — regularMaterial glass slab. */
.qf-public-wft .price-card {
  background: rgb(34, 40, 42) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  box-shadow: var(--qf-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.qf-public-wft .price-card.featured {
  border-color: rgba(51, 86, 238, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(51, 86, 238, 0.36), var(--qf-shadow-lift), var(--qf-shadow-md) !important;
}

/* LIGHT — frosted white glass. */
html[data-theme="light"] body.qf-public-wft .price-card {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(15, 37, 64, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: var(--qf-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 rgba(51, 86, 238, 0.22), var(--qf-shadow-lift) !important;
}

/* SOLID fallback where backdrop-filter is unsupported (stays legible). */
.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;
}