/* ================================================================
   Visual Polish — Mega Bundle B
   Full dark theme consistency, mobile-first responsive fixes,
   login/signup card redesign, typography tightening, CTA polish.
   Loads LAST via injection middleware — overrides inline styles.
   ================================================================ */

/* ── 1. GLOBAL DARK THEME FOUNDATION ────────────────────────────── */

/* NUCLEAR FIX: Override CSS variables at :root so var(--sand), var(--slate),
   var(--foam) resolve to dark-theme-safe values. --ink stays dark because
   it's used in hero/pricing backgrounds. Text overrides use explicit selectors. */
:root {
  --sand: #0a0f1a !important;
  --slate: rgba(255,255,255,0.6) !important;
  --foam: #111827 !important;
}

/* Global heading color override — beats inline color: var(--ink) on h2/h3 */
h1, h2, h3, h4, h5, h6 {
  color: rgba(255,255,255,0.95) !important;
}

/* Body text in light-themed sections that now have dark backgrounds.
   Targets .how-section, .closing, generic body-level text.
   Avoids overriding sections that are ALREADY dark-themed (hero, pricing, contrast). */
.how-section p,
.how-section li,
.closing p,
.closing li,
.social-proof-section p,
.social-proof-section li,
.social-proof-section span,
.reassurance-section p,
.reassurance-section li {
  color: rgba(255,255,255,0.6) !important;
}

/* Fix the old (strikethrough) list from being too bright */
.old .contrast-list li {
  color: rgba(255,255,255,0.35) !important;
}

/* Ensure section labels are coral accent */
.section-label {
  color: #ff6b4a !important;
}
.section-label-light {
  color: #ff6b4a !important;
}

/* Force dark backgrounds everywhere — kill all light/sand leaks */
body {
  background: #0a0f1a !important;
  color: rgba(255,255,255,0.92) !important;
}

html {
  background: #0a0f1a !important;
  overflow-x: hidden;
}

/* Selection color uses brand accent */
::selection {
  background: rgba(255,107,74,0.3) !important;
  color: #fff !important;
}
::-moz-selection {
  background: rgba(255,107,74,0.3) !important;
  color: #fff !important;
}

/* Dark scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0f1a; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) #0a0f1a; }


/* ── 2. LANDING PAGE — HERO SECTION ─────────────────────────────── */

/* Kill the light sand gradient at bottom of hero */
.hero::after {
  background: linear-gradient(to bottom, transparent, #0a0f1a) !important;
}

/* Hero fills viewport properly */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(170deg, #0a0f1a 0%, #0d1a2f 55%, #0a1628 100%) !important;
}

/* Hero CTA buttons — coral primary, ghost secondary */
.hero-ctas a:first-child,
.hero-inner a[href*="signup"],
.hero-inner a[href*="get-started"],
a.nav-cta,
.ft-cta-btn:not(.ft-cta-btn--waitlist) {
  background: #ff6b4a !important;
  color: #fff !important;
  border: none !important;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  border-radius: 10px;
  transition: background 0.15s, transform 0.1s;
}

.hero-ctas a:first-child:hover,
.hero-inner a[href*="signup"]:hover,
.hero-inner a[href*="get-started"]:hover,
a.nav-cta:hover,
.ft-cta-btn:not(.ft-cta-btn--waitlist):hover {
  background: #f55c3a !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Social proof bar below hero */
.hero-inner .stats-row,
.stats-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 24px;
}


/* ── 3. LANDING PAGE SECTIONS — ALL DARK ────────────────────────── */

/* How-section (was light/sand — text was invisible on dark bg) */
.how-section {
  background: #0a0f1a !important;
  color: rgba(255,255,255,0.92) !important;
}

.how-section h2 {
  color: rgba(255,255,255,0.95) !important;
}

.how-section .section-label {
  color: #ff6b4a !important;
}

.how-section .capability h3 {
  color: rgba(255,255,255,0.92) !important;
}

.how-section .capability p {
  color: rgba(255,255,255,0.55) !important;
}

.how-section .capability-number {
  color: rgba(255,255,255,0.06) !important;
}

.how-section .capability {
  border-top-color: rgba(255,255,255,0.06) !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}

.capability {
  border-top-color: rgba(255,255,255,0.06) !important;
}

.capability:nth-child(odd) {
  border-right-color: rgba(255,255,255,0.06) !important;
}

.capability h3 {
  color: rgba(255,255,255,0.92) !important;
}

.capability p {
  color: rgba(255,255,255,0.55) !important;
}

.capability-number {
  color: rgba(255,255,255,0.06) !important;
}

/* Reassurance section — dark themed */
.reassurance-section {
  background: linear-gradient(135deg, #0f1520 0%, #111827 100%) !important;
  border-top: 1px solid rgba(255,107,74,0.12) !important;
  border-bottom: 1px solid rgba(255,107,74,0.12) !important;
}

.reassurance-inner h3 {
  color: rgba(255,255,255,0.95) !important;
}

.reassurance-inner p {
  color: rgba(255,255,255,0.55) !important;
}

/* Social proof section — dark themed */
.social-proof-section {
  background: linear-gradient(175deg, #0d1220 0%, #0a0f1a 45%, #0b1018 100%) !important;
}

.social-proof-section::before {
  background-image: radial-gradient(circle, rgba(255,107,74,0.03) 1px, transparent 1px) !important;
}

.social-proof-section::after {
  background: radial-gradient(circle, rgba(255,180,60,0.04) 0%, transparent 68%) !important;
}

.sp-headline {
  color: rgba(255,255,255,0.95) !important;
}

.sp-sub {
  color: rgba(255,255,255,0.5) !important;
}

/* Testimonial cards — dark */
.testimonial-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.85);
}

.testimonial-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.3) !important;
  border-color: rgba(255,107,74,0.2) !important;
}

.testimonial-text {
  color: rgba(255,255,255,0.75) !important;
}

.testimonial-author {
  border-top-color: rgba(255,255,255,0.06) !important;
}

.author-name {
  color: rgba(255,255,255,0.9) !important;
}

.author-role,
.author-props {
  color: rgba(255,255,255,0.4) !important;
}

.testimonial-quote-mark {
  color: #ff6b4a !important;
  opacity: 0.3 !important;
}

/* Trust badges — dark (override white background) */
.trust-badges,
.badges-row {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

.trust-badge {
  border-right-color: rgba(255,255,255,0.06) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

.trust-badge:hover {
  background: rgba(255,107,74,0.06) !important;
}

.trust-badge-text {
  color: rgba(255,255,255,0.75) !important;
}

/* Closing section */
.closing {
  background: #0a0f1a !important;
}

.closing h2 {
  color: rgba(255,255,255,0.95) !important;
}

.closing p {
  color: rgba(255,255,255,0.5) !important;
}

/* Footer — dark */
footer {
  background: #070a12 !important;
  color: rgba(255,255,255,0.3) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
}

footer a {
  color: rgba(255,255,255,0.5) !important;
}

footer a:hover {
  color: #ff6b4a !important;
}

.footer-grid h4,
.footer-col h4 {
  color: rgba(255,255,255,0.7) !important;
}

.footer-bottom {
  border-top-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.25) !important;
}


/* ── 4. LOGIN PAGE — DARK THEME REDESIGN ────────────────────────── */

/* Target login and signup pages specifically */
body:has(form#login-form),
body:has(form#signup-form) {
  background: #0a0f1a !important;
}

/* Login/signup nav */
body:has(form#login-form) nav,
body:has(form#signup-form) nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Login/signup main area — remove dead space */
body:has(form#login-form) .main,
body:has(form#signup-form) .main {
  background: #0a0f1a !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  align-items: flex-start !important;
  padding-top: 10vh !important;
}

/* Card — dark themed */
body:has(form#login-form) .card,
body:has(form#signup-form) .card {
  background: #111827 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
  max-width: 420px;
}

body:has(form#login-form) .card-label,
body:has(form#signup-form) .card-label {
  color: #ff6b4a !important;
}

body:has(form#login-form) h1,
body:has(form#signup-form) h1 {
  color: rgba(255,255,255,0.95) !important;
}

body:has(form#signup-form) .subtitle {
  color: rgba(255,255,255,0.5) !important;
}

body:has(form#login-form) label,
body:has(form#signup-form) label {
  color: rgba(255,255,255,0.65) !important;
}

body:has(form#login-form) input,
body:has(form#signup-form) input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

body:has(form#login-form) input::placeholder,
body:has(form#signup-form) input::placeholder {
  color: rgba(255,255,255,0.25) !important;
}

body:has(form#login-form) input:focus,
body:has(form#signup-form) input:focus {
  border-color: rgba(255,107,74,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,107,74,0.1) !important;
}

/* Login/signup button — coral */
body:has(form#login-form) .btn,
body:has(form#signup-form) .btn {
  background: #ff6b4a !important;
  color: #fff !important;
  border-radius: 10px !important;
  min-height: 48px;
  font-size: 16px !important;
}

body:has(form#login-form) .btn:hover:not(:disabled),
body:has(form#signup-form) .btn:hover:not(:disabled) {
  background: #f55c3a !important;
}

body:has(form#login-form) .btn:disabled,
body:has(form#signup-form) .btn:disabled {
  background: rgba(255,107,74,0.35) !important;
  color: rgba(255,255,255,0.5) !important;
}

/* Footer links in login/signup */
body:has(form#login-form) .footer-link,
body:has(form#signup-form) .footer-link {
  color: rgba(255,255,255,0.4) !important;
}

body:has(form#login-form) .footer-link a,
body:has(form#signup-form) .footer-link a {
  color: #ff6b4a !important;
}

/* Error message — dark */
body:has(form#login-form) .error,
body:has(form#signup-form) .error {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.3) !important;
  color: #fca5a5 !important;
}

/* Signup trust strip */
body:has(form#signup-form) .trust-strip .trust-item {
  color: rgba(255,255,255,0.5) !important;
}

body:has(form#signup-form) .trust-strip .trust-check {
  color: #22c55e !important;
}

/* Signup success input */
body:has(form#signup-form) input.success-input {
  border-color: rgba(34,197,94,0.5) !important;
}

/* Signup duplicate notice */
body:has(form#signup-form) .duplicate-notice {
  background: rgba(0,102,255,0.08) !important;
  border-color: rgba(0,102,255,0.2) !important;
  color: rgba(255,255,255,0.7) !important;
}

body:has(form#signup-form) .duplicate-notice a {
  color: #ff6b4a !important;
}

/* Field errors/hints */
body:has(form#signup-form) .field-error {
  color: #fca5a5 !important;
}

body:has(form#signup-form) .field-hint {
  color: #4ade80 !important;
}


/* ── 5. ALL PUBLIC PAGES — DARK THEME BLANKET ───────────────────── */

/* Catch-all for any section using sand/white/light backgrounds */
.section-label {
  color: #ff6b4a !important;
}

/* Any remaining h2s on dark bg */
h2 {
  color: rgba(255,255,255,0.95);
}

/* Links — coral accent for dark bg */
a:visited {
  color: rgba(255,107,74,0.7);
}

.logo, .logo:visited,
.nav-brand, .nav-brand:visited {
  color: white !important;
}


/* ── 6. PRICING SECTION POLISH ──────────────────────────────────── */

/* Pricing cards */
.pricing-card {
  background: rgba(255,255,255,0.02);
}

.pricing-card--featured {
  background: rgba(255,107,74,0.06) !important;
}

/* Tier CTA — coral featured */
.tier-cta--featured {
  background: #ff6b4a !important;
  border-color: #ff6b4a !important;
  color: #fff !important;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.tier-cta--featured:hover {
  background: #f55c3a !important;
  color: #fff !important;
  text-decoration: none !important;
}


/* ── 7. ROI CALCULATOR — DARK THEME ─────────────────────────────── */

#roi-calc-section,
.roi-section,
[id*="roi"] {
  background: #0d1220 !important;
}

.roi-card,
.roi-card-inner {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px;
}

/* Slider styling */
input[type="range"] {
  accent-color: #ff6b4a;
}

/* ROI metric numbers */
.roi-value,
.roi-number,
[class*="roi"] .value,
[class*="roi"] .number {
  color: #ff6b4a !important;
  font-weight: 700;
}


/* ── 8. COMPARISON TABLE POLISH ─────────────────────────────────── */

.comparison-wrap {
  background: rgba(255,255,255,0.01);
}

.comparison-table {
  min-width: 100%;
}

/* On mobile, ensure horizontal scroll is smooth */
@media (max-width: 768px) {
  .comparison-wrap {
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
}


/* ── 9. CONTENT PAGES — DARK THEME ──────────────────────────────── */

/* Privacy, Terms, About, Blog, Changelog, Help, Security, Accessibility, etc. */
.content-page,
.legal-page,
.page-content,
article,
main {
  color: rgba(255,255,255,0.85);
}

/* Content headings */
.content-page h1,
.content-page h2,
.content-page h3,
.legal-page h1,
.legal-page h2,
article h1,
article h2,
article h3 {
  color: rgba(255,255,255,0.95);
}

/* Content paragraphs */
.content-page p,
.legal-page p,
article p {
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}

/* Content links */
.content-page a,
.legal-page a,
article a {
  color: #ff6b4a;
}

/* Lists */
.content-page li,
.legal-page li,
article li {
  color: rgba(255,255,255,0.65);
}


/* ── 10. COMPARISON & MIGRATION PAGES — DARK THEME ──────────────── */

/* These pages may have light backgrounds */
.compare-hero,
.migration-hero,
.switch-hero {
  background: linear-gradient(180deg, #0d1526 0%, #0a0f1a 100%) !important;
}

/* Feature comparison cards */
.comparison-card,
.feature-card,
.advantage-card,
.migration-step {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px;
}

.comparison-card h3,
.feature-card h3,
.advantage-card h3 {
  color: rgba(255,255,255,0.92) !important;
}

.comparison-card p,
.feature-card p,
.advantage-card p {
  color: rgba(255,255,255,0.55) !important;
}


/* ── 11. COMPLIANCE CHECK PAGE ──────────────────────────────────── */

.compliance-calculator,
.calc-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px;
}

.compliance-calculator input,
.compliance-calculator select,
.calc-card input,
.calc-card select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-radius: 8px;
}

.compliance-calculator label,
.calc-card label {
  color: rgba(255,255,255,0.65) !important;
}


/* ── 12. BOOK-A-CALL PAGE ───────────────────────────────────────── */

.booking-card,
.call-card,
.slot-picker {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}


/* ── 13. MOBILE RESPONSIVE — GLOBAL FIXES (375px-480px) ─────────── */

/* Kill horizontal scroll everywhere */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Ensure content doesn't touch screen edges */
@media (max-width: 480px) {
  .hero {
    padding: 32px 16px 24px !important;
  }

  .hero-inner {
    padding: 0 4px;
  }

  /* Stats row stacks vertically */
  .stats-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  /* Full-width CTAs */
  .hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .hero-ctas a,
  .hero-ctas button {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Pricing card full width */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Section padding */
  .how-section,
  .contrast-section,
  .reassurance-section,
  .social-proof-section,
  .pricing-section,
  .why-section,
  .closing {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Footer stacks to 1 column */
  .footer-grid,
  footer .grid,
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Testimonials stack */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Comparison table: horizontal scroll hint */
  .comparison-wrap {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 0;
  }

  /* Why stats stack */
  .why-stats {
    grid-template-columns: 1fr !important;
  }

  /* SP stats stack */
  .sp-stats {
    grid-template-columns: 1fr !important;
  }

  .sp-stat {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  .sp-stat:last-child {
    border-bottom: none !important;
  }

  /* Free trial callout stacks */
  .free-trial-callout {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    text-align: center;
  }

  .free-trial-right {
    align-items: center !important;
  }

  .scarcity-wrap {
    text-align: center !important;
  }

  .scarcity-bar-wrap {
    margin: 0 auto !important;
  }
}

/* Tablet fixes */
@media (max-width: 768px) and (min-width: 481px) {
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sp-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ── 14. MOBILE — LOGIN/SIGNUP CARD FIX ─────────────────────────── */

@media (max-width: 480px) {
  body:has(form#login-form) .main,
  body:has(form#signup-form) .main {
    padding: 24px 16px !important;
    padding-top: 5vh !important;
    align-items: flex-start !important;
  }

  body:has(form#login-form) .card,
  body:has(form#signup-form) .card {
    padding: 28px 20px !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
}


/* ── 15. TYPOGRAPHY — CONSISTENT DARK THEME ─────────────────────── */

/* All headings on dark bg — !important needed to beat inline <style> blocks */
h1, h2, h3, h4, h5, h6 {
  color: rgba(255,255,255,0.95) !important;
}

/* Fix any remaining light-mode text */
.section-title {
  color: rgba(255,255,255,0.92) !important;
}

/* Consistent body text — !important to beat inline styles using --ink/--slate */
p {
  color: rgba(255,255,255,0.65) !important;
}

li {
  color: rgba(255,255,255,0.65) !important;
}

/* Slate text override for dark */
.stat-label,
.hero-sub {
  color: rgba(255,255,255,0.5) !important;
}

/* Section labels — coral accent */
.section-label,
.section-label-light {
  color: #ff6b4a !important;
}

/* Capability section — text visibility on dark bg */
.capability-number {
  color: rgba(255,255,255,0.06) !important;
}

.capability {
  border-top-color: rgba(255,255,255,0.06) !important;
}

.capability:nth-child(odd) {
  border-right-color: rgba(255,255,255,0.06) !important;
}

/* Contrast section — before/after lists */
.contrast-section {
  background: #0d1220 !important;
}

.contrast-col h3 {
  color: rgba(255,255,255,0.5) !important;
}

.contrast-list li {
  color: rgba(255,255,255,0.7) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Old → strikethrough */
.contrast-col.old .contrast-list li {
  color: rgba(255,255,255,0.35) !important;
}

/* New → bright */
.contrast-col.new .contrast-list li {
  color: rgba(255,255,255,0.85) !important;
}

/* Inline color overrides for text using var(--ink) or var(--slate) */
[style*="color: var(--ink)"],
[style*="color:var(--ink)"],
[style*="color: var(--slate)"],
[style*="color:var(--slate)"] {
  color: rgba(255,255,255,0.65) !important;
}

/* Author names in testimonials */
.author-name {
  color: rgba(255,255,255,0.9) !important;
}

.author-detail {
  color: rgba(255,255,255,0.4) !important;
}


/* ── 16. CTA BUTTONS — CONSISTENT ACROSS ALL PAGES ─────────────── */

/* All primary CTAs: coral background, white text, 48px min height */
.btn-primary,
.cta-primary,
a.btn-cta-gradient,
.wf-btn-primary,
button[type="submit"]:not(.btn):not(.book-submit):not(.modal-submit) {
  background: #ff6b4a !important;
  color: #fff !important;
  min-height: 48px;
  border: none !important;
  border-radius: 10px;
  font-weight: 700;
}

/* Ghost/secondary buttons */
.btn-secondary,
.cta-secondary,
.ft-cta-btn--waitlist,
.ft-book-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.7) !important;
  min-height: 48px;
  border-radius: 10px;
}

.btn-secondary:hover,
.cta-secondary:hover,
.ft-cta-btn--waitlist:hover,
.ft-book-btn:hover {
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}


/* ── 17. NAV — CONSISTENT DARK ──────────────────────────────────── */

nav,
.site-nav {
  background: rgba(10,15,26,0.95) !important;
}

.nav-brand,
.logo {
  color: #fff !important;
}

.logo span,
.nav-brand span {
  color: #ff6b4a !important;
}


/* ── 18. FORM INPUTS — DARK THEME (ALL PAGES) ──────────────────── */

/* Target forms inside dark containers */
.book-field input,
.book-field textarea,
.book-field select,
.modal-field input,
.modal-field textarea,
.modal-field select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}


/* ── 19. ERROR/STATUS PAGES ─────────────────────────────────────── */

/* 404, 500, offline pages */
.error-page,
.offline-page {
  background: #0a0f1a !important;
  color: rgba(255,255,255,0.85) !important;
}


/* ── 20. PRINT STYLESHEET ───────────────────────────────────────── */

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  nav, footer, .hero::before, .hero::after,
  .site-nav, .nav-hamburger {
    display: none !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a { color: #333 !important; }
  h1, h2, h3 { color: #000 !important; }
  p { color: #333 !important; }
}


/* ── 21. ACCESSIBILITY TOUCH TARGETS ────────────────────────────── */

@media (max-width: 768px) {
  button, a.btn, a.nav-cta, a.nav-signin,
  .tier-cta, .ft-cta-btn, .ft-book-btn,
  .book-submit, .modal-submit {
    min-height: 44px !important;
    min-width: 44px;
  }
}


/* ── 22. NO HORIZONTAL SCROLL FIX — SAFETY NET ─────────────────── */

/* Catch any elements that could cause horizontal overflow */
img, video, iframe, table, pre, code {
  max-width: 100%;
}

.hero-inner,
.content,
.sp-inner,
.pricing-inner,
.why-inner,
.contrast-inner,
.closing,
.reassurance-inner {
  max-width: 100%;
  overflow-x: hidden;
}


/* ── 23. SPECIFIC PAGE FIXES ────────────────────────────────────── */

/* Roadmap page — cards dark */
.roadmap-item,
.roadmap-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Blog page — cards dark */
.blog-card,
.blog-post {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.blog-card h3,
.blog-post h2 {
  color: rgba(255,255,255,0.92) !important;
}

.blog-card p,
.blog-post p {
  color: rgba(255,255,255,0.55) !important;
}

/* Help page — FAQ dark */
.faq-item,
.help-card,
.help-category {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Changelog page */
.changelog-entry,
.changelog-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Status page */
.status-card,
.service-status {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* About page */
.team-card,
.value-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}


/* ── 24. HOVER STATES — CONSISTENT ──────────────────────────────── */

a:hover {
  text-decoration: none;
}

.testimonial-card:hover,
.pricing-card:hover,
.roadmap-card:hover,
.blog-card:hover,
.faq-item:hover,
.help-card:hover {
  border-color: rgba(255,107,74,0.2) !important;
}


/* ── 25. ISLAND BADGE / SOCIAL PROOF BAR POLISH ─────────────────── */

.social-proof-bar {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.proof-stat {
  border-right: 1px solid rgba(255,255,255,0.06);
}

.proof-stat:last-child {
  border-right: none;
}


/* ── 26. SEARCH PAGE ────────────────────────────────────────────── */

.search-input,
.search-bar input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-radius: 10px;
}

.search-results .result-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}


/* ── 27. PAYMENT SUCCESS PAGE ───────────────────────────────────── */

.payment-success,
.success-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px;
}


/* ── 28. GUARANTEE / SOCIAL PROOF BAR IN PRICING ────────────────── */

.guarantee-badge {
  background: rgba(34,197,94,0.1) !important;
  border-color: rgba(34,197,94,0.25) !important;
  color: #22c55e !important;
}

.social-proof-inner {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* Billing toggle */
.billing-toggle,
.toggle-wrap {
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: 4px;
}

.billing-toggle button.active,
.toggle-btn.active {
  background: #ff6b4a !important;
  color: #fff !important;
}


/* ── EXTRA: Elements using rgba(10,15,26,...) dark text that needs flipping ── */

/* Tier features, pricing text */
.tier-name {
  color: rgba(255,255,255,0.9) !important;
}

.tier-price {
  color: rgba(255,255,255,0.95) !important;
}

.tier-desc {
  color: rgba(255,255,255,0.5) !important;
}

.tier-features li {
  color: rgba(255,255,255,0.65) !important;
}

.tier-features li::before {
  color: #22c55e !important;
}

.tier-badge {
  background: #ff6b4a !important;
  color: #fff !important;
}

/* Feature grid items in pricing */
.feature-grid-item,
.feature-item {
  color: rgba(255,255,255,0.65) !important;
}

.feature-grid-item strong,
.feature-item strong {
  color: rgba(255,255,255,0.9) !important;
}

/* FAQ section */
.faq-question,
details summary {
  color: rgba(255,255,255,0.85) !important;
}

.faq-answer,
details p,
details > div {
  color: rgba(255,255,255,0.55) !important;
}

details {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Pricing note */
.pricing-note {
  color: rgba(255,255,255,0.35) !important;
}

/* Book-a-call section at bottom */
.closing a[href*="book-a-call"],
a[style*="background:rgba(10,15,26"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* Know a PM section */
.referral-section,
[style*="background: linear-gradient(135deg, rgba(255,107"] {
  border-radius: 16px;
}

/* ── 29. DARK MODE CSS OVERRIDE ─────────────────────────────────── */

/* Override the dark-mode.css if it tries to invert to light */
[data-theme="dark"] {
  --ink: #0a0f1a;
  --sand: #0a0f1a;
}


/* ── 30. SECTION SPACING CONSISTENCY ────────────────────────────── */

.how-section,
.contrast-section,
.pricing-section,
.why-section,
.social-proof-section,
.closing,
.reassurance-section {
  padding-top: clamp(60px, 10vw, 120px);
  padding-bottom: clamp(60px, 10vw, 120px);
}

@media (max-width: 768px) {
  .how-section,
  .contrast-section,
  .pricing-section,
  .why-section,
  .social-proof-section,
  .closing,
  .reassurance-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}


/* ── 31. USE-CASE TABS (if present) ─────────────────────────────── */

.use-case-tabs .tab,
.tab-list .tab {
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 20px;
}

.use-case-tabs .tab.active,
.tab-list .tab.active {
  background: rgba(255,107,74,0.1) !important;
  color: #ff6b4a !important;
  border-color: rgba(255,107,74,0.3) !important;
}


/* ── 32. LOGO HEADER FIX — full "NEXIS" ─────────────────────── */

/* Ensure the logo always shows "Wave" + "front" properly */
.logo, .nav-brand {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}


/* ── 33. SMOOTH PAGE TRANSITIONS ────────────────────────────────── */

@keyframes vp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: vp-fade-in 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section 34 — NEXIS Brand Identity
   ═══════════════════════════════════════════════════════════════════════════ */

/* Logo wordmark: NEX in white, IS in coral */
.logo .brand-accent,
nav .logo > span,
a.logo > span {
  color: #ff6b4a !important;
}

.logo,
a.logo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: white !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* NEXIS accent on product badges */
.nexis-badge {
  background: linear-gradient(135deg, #6366f1 0%, #ff6b4a 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Update hero gradient accent color for NEXIS brand */
:root {
  --nexis-indigo: #6366f1;
  --nexis-coral: #ff6b4a;
  --nexis-dark: #0a0f1a;
}