/* ===========================================================================
   averon-light.css — light theme.

   NEW FILE. Load AFTER style.css, evaluator-additions.css and
   service-pages.css. Changes appearance only: no HTML, PHP, form, id or
   JavaScript change anywhere.

   READABILITY IS THE POINT. Your pages carry long-form detail people must
   actually read, so this theme is built around that: near-black text on
   white, 1.75 line-height in body copy, a measured line length, and a
   muted tone that still passes contrast rather than fading to grey.

   Remove the one <link> and the site returns to its original styling.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- PALETTE */
:root {
  --navy:        #0F172A;   /* ink — headings, nav, footer */
  --navy-light:  #1E293B;
  --navy-mid:    #172033;

  --accent:      #4F46E5;   /* indigo */
  --accent-2:    #0EA5E9;   /* sky */
  --accent-deep: #4338CA;
  --accent-soft: #EEF2FF;
  --accent-line: #C7D2FE;

  /* Gold is remapped to indigo so every existing gold rule inherits the new
     accent with no markup change. */
  --gold:        #4F46E5;
  --gold-light:  #6366F1;
  --gold-pale:   #EEF2FF;
  --gold-tier:   #4338CA;
  --gold-bg:     #EEF2FF;
  --gold-border: #C7D2FE;

  --cream:       #F8FAFC;   /* alternating section background */
  --cream2:      #F1F5F9;

  --text:        #0F172A;
  --muted:       #475569;   /* passes AA on white — not a pale grey */
  --white:       #FFFFFF;
  --border:      #E2E8F0;
  --border-mid:  #CBD5E1;

  --surface:     #FFFFFF;
  --surface-2:   #F8FAFC;
  --radius:      14px;
  --shadow-sm:   0 1px 2px rgba(15,23,42,.05);
  --shadow:      0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --shadow-lg:   0 2px 6px rgba(15,23,42,.07), 0 18px 44px rgba(15,23,42,.10);
}

/* ------------------------------------------------------------ FOUNDATIONS */
html, body { background: var(--white); }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.011em;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, .sec-title, .eval-title,
.fe-sq h2, .sp-card h3, .svc-card h3, .rt-panel h3, .page-hero h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: -.028em;
  color: var(--text);
}
h1, .page-hero h1, .eval-title { font-weight: 700; }
h2, .sec-title { font-weight: 650; }

/* Long-form reading comfort */
.sp-main p, .sp-main li { font-size: .95rem; line-height: 1.78; color: #334155; }
.sp-main h2 { color: var(--text); }
.sp-main strong { color: var(--text); }
.sp-main a { color: var(--accent); font-weight: 600; }
.sp-main ul > li:before, .sp-main ol > li:before { color: var(--accent) !important; }

/* Kickers as micro-badges */
.lbl, .sp-kicker, .dd-lbl {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-deep) !important;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .68rem !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

/* ------------------------------------------------------------------- NAV
   Kept dark: it anchors the page, carries the logo cleanly, and gives the
   white body a defined edge. Footer matches at the other end. */
.announce-bar {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.72);
  font-size: .76rem;
}
.announce-bar strong { color: #A5B4FC; }

nav {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.nav-links > li > a { color: rgba(255,255,255,.78); font-weight: 500; font-size: .84rem; }
.nav-links > li > a:hover, .nav-links > li > a.active { color: #fff; }

.dropdown {
  background: #fff !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: .45rem;
}
.dropdown a { color: #334155 !important; border-radius: 8px; padding: .5rem .7rem; }
.dropdown a:hover { background: var(--accent-soft); color: var(--accent-deep) !important; }

.mobile-menu { background: #fff; border-top: 1px solid var(--border); }
.mobile-menu a { color: #334155; border-bottom: 1px solid var(--border); }
.nav-hamburger span { background: #fff; }

/* --------------------------------------------------------------- BUTTONS */
.nav-cta, .btn-primary, .rt-btn, .eval-primary, .submit-btn, .tier-btn, .btn-navy {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(79,70,229,.20);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.nav-cta:hover, .btn-primary:hover, .rt-btn:hover:not(:disabled),
.eval-primary:hover:not(:disabled), .submit-btn:hover, .btn-navy:hover {
  background: var(--accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79,70,229,.28);
}
.rt-btn:disabled, .eval-primary:disabled {
  background: #E2E8F0 !important; color: #94A3B8 !important;
  border-color: #E2E8F0 !important; box-shadow: none;
}

.btn-outline, .eval-secondary, .eval-compare-btn {
  background: #fff !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.btn-outline:hover, .eval-secondary:hover {
  border-color: var(--accent) !important; color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ---------------------------------------------------------------- HEROES */
.page-hero {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.page-hero-img { opacity: .06 !important; }
.page-hero h1 { color: var(--text); }
.page-hero h1 em, .sec-title em { color: var(--accent); font-style: normal; }
.page-hero p {
  color: var(--muted) !important; font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
}
.page-hero .lbl { color: var(--accent-deep) !important; }

.hero-split, .section, .g-section, .cta-band { background: transparent !important; }
.hero-left-bg { opacity: .05 !important; }

.trust-bar {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar p { color: var(--muted); font-size: .8rem; }
.trust-bar strong { color: var(--text); }

/* ============================== CARDS ================================== */
.fe-sq, .sp-card, .svc-card, .sp-box, .testimonial, .step, .img-card,
.tier-card, .faq-item, .gb-item, .blog-card, .rt-card, .evaluator-panel,
.contact-form, .sm-card, .sm-empty {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
}
.fe-sq:hover, .sp-card:hover, .svc-card:hover, .testimonial:hover,
.step:hover, .blog-card:hover, .sm-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-mid) !important;
  box-shadow: var(--shadow);
}
.cards-grid { background: var(--border) !important; border: 1px solid var(--border) !important; }
.sp-box { background: var(--surface-2) !important; }
.sp-box.sp-warn { background: #FFFBEB !important; border-color: #FDE68A !important; }
.sp-box h3 { color: var(--text) !important; }

.svc-icon, .step-num {
  background: var(--accent) !important; border-radius: 9px !important; color: #fff !important;
}
.svc-icon svg { stroke: #fff !important; }

.fe-desc, .sp-card p, .svc-card p, .sec-sub, .step p, .fsub { color: var(--muted) !important; }

/* Engine squares */
.fe-btn.fe-paid {
  background: var(--accent) !important; border: 1px solid var(--accent) !important;
  color: #fff !important; border-radius: 8px !important; font-weight: 600 !important;
}
.fe-btn.fe-paid:hover { background: var(--accent-deep) !important; }
.fe-btn.fe-free {
  background: #fff !important; border: 1px solid var(--border-mid) !important;
  color: var(--text) !important; border-radius: 8px !important;
}
.fe-btn.fe-free:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft) !important; }
.fe-btn.fe-soon {
  background: #F8FAFC !important; border: 1px dashed var(--border-mid) !important;
  color: #94A3B8 !important;
}
.fe-samples a { color: var(--accent) !important; border-bottom-color: var(--accent-line) !important; }
.fe-chosen { background: var(--accent-soft) !important; border: 1px solid var(--accent-line) !important; color: var(--accent-deep) !important; }
.fe-change { color: var(--accent) !important; }

/* ======================= UPLOAD / ACTION ZONE ========================== */
.eval-upload, .sp-rail .eval-upload {
  background: var(--accent-soft) !important;
  border: 1.5px dashed var(--accent-line) !important;
  border-radius: 12px !important;
  color: var(--accent-deep) !important;
  padding: 1.4rem 1rem !important;
  flex-direction: column; gap: .45rem; min-height: 98px;
  transition: border-color .18s, background .18s;
}
.eval-upload:hover, .sp-rail .eval-upload:hover {
  border-color: var(--accent) !important; background: #E0E7FF !important;
}
.eval-upload svg, .sp-rail .eval-upload svg {
  stroke: var(--accent) !important; width: 24px !important; height: 24px !important;
}

.rt-input, input[type=text], input[type=email], input[type=file],
select, textarea, .track-form input, .contact-form input,
.contact-form select, .contact-form textarea {
  background: #fff !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 9px !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.rt-input:focus, input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}
::placeholder { color: #94A3B8 !important; }

/* Engine rail */
.rt-panel {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow);
}
.sp-rail-head {
  background: var(--navy) !important;
  border: 1px solid var(--navy) !important; border-bottom: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.sp-rail-head h2 { color: #fff !important; }
.sp-rail-head p { color: rgba(255,255,255,.66) !important; }
.sp-rail .rt-panel { border-radius: 0 0 var(--radius) var(--radius) !important; }

.rt-tier {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.rt-tier:hover { border-color: var(--border-mid) !important; background: var(--surface-2) !important; }
.rt-tier.active {
  border-color: var(--accent) !important; background: var(--accent-soft) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.10);
}
.rt-tier-name { color: var(--text) !important; }
.rt-tier-sub, .rt-note, .sp-ticks div, .eval-privacy-note { color: var(--muted) !important; }
.rt-price { color: var(--accent) !important; font-weight: 700; }
.rt-step label { color: var(--text) !important; }
.rt-selected-note { background: var(--accent-soft) !important; color: var(--accent-deep) !important; }

.rt-status.info    { background: #EEF2FF !important; border-left-color: var(--accent) !important; color: #3730A3 !important; }
.rt-status.success { background: #ECFDF5 !important; border-left-color: #10B981 !important; color: #065F46 !important; }
.rt-status.error   { background: #FEF2F2 !important; border-left-color: #EF4444 !important; color: #991B1B !important; }
.eval-verified-message { color: #065F46 !important; }

/* ---------------------------------------------------------------- TABLES */
.sp-table, .data-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sp-table th, .data-table th { background: var(--navy) !important; color: #fff !important; }
.sp-table td, .data-table td { color: #334155 !important; border-bottom: 1px solid var(--border) !important; }
.sp-table tr:nth-child(even) td { background: var(--surface-2) !important; }
.sp-yes { color: #059669 !important; }
.sp-no  { color: #CBD5E1 !important; }

/* ------------------------------------------------------------------- FAQ */
.sp-faq details {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: .85rem 1.1rem; margin-bottom: .55rem;
}
.sp-faq details:hover, .sp-faq details[open] { border-color: var(--border-mid); box-shadow: var(--shadow-sm); }
.sp-faq summary { color: var(--text) !important; }
.sp-faq summary:after { color: var(--accent) !important; }
.sp-faq details p, .faq-a { color: #334155 !important; }
.faq-q { color: var(--text) !important; }

/* -------------------------------------------------- ANATOMY / SAMPLES */
.sp-anatomy { border-left-color: var(--accent) !important; }
.sp-sec-name { color: var(--text) !important; }
.sp-sec-desc { color: var(--muted) !important; }

.sp-samples { background: var(--navy) !important; border-radius: var(--radius); }
.sp-samples h3 { color: #fff !important; }
.sp-samples p { color: rgba(255,255,255,.68) !important; }
.sp-samples a { background: var(--accent) !important; color: #fff !important; }
.sp-samples a:hover { background: #6366F1 !important; }

.sm-sec-head { border-bottom-color: var(--border) !important; }
.sm-empty { border: 1.5px dashed var(--border-mid) !important; background: var(--surface-2) !important; color: var(--muted) !important; }
.sm-meta { color: var(--accent) !important; }

.sp-soon { background: var(--surface-2) !important; border: 1px solid var(--border) !important; }
.sp-soon-badge { background: #E2E8F0 !important; color: #475569 !important; }

.stars { color: #F59E0B !important; }
.avatar { background: var(--accent) !important; color: #fff !important; }
.t-meta p { color: var(--text) !important; }
.t-meta span { color: var(--muted) !important; }
blockquote { color: #334155 !important; }

.cta-band {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.cta-band h2 { color: var(--text) !important; }
.cta-band p { color: var(--muted) !important; }

.eval-trust-row div {
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: .55rem .7rem; font-size: .74rem; color: var(--muted);
}

/* --------------------------------------------------------------- FOOTER */
footer { background: var(--navy) !important; color: rgba(255,255,255,.62) !important; border-top: none; }
.footer-col h4 { color: #fff !important; }
.footer-col a, .footer-bottom span, .footer-desc { color: rgba(255,255,255,.62) !important; }
.footer-col a:hover { color: #fff !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12) !important; }

/* ------------------------------------------------- MOTION / ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .fe-sq:hover, .sp-card:hover, .btn-primary:hover { transform: none !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}