/*
  AI Doc ZX — Light Theme Override
  Load this AFTER the existing page <style> block.
  No HTML class changes are required.
*/

:root {
  --bg: #f6f9fd;
  --bg-2: #edf4fb;
  --panel: #ffffff;
  --panel-2: #f1f6fc;
  --line: rgba(22, 50, 78, .13);
  --text: #10253b;
  --muted: #526a82;
  --blue: #2d98f0;
  --blue-2: #126ed0;
  --cyan: #087fb6;
  --green: #20a96c;
  --gold: #9a6a00;
  --white: #ffffff;
  --shadow: 0 22px 58px rgba(37, 74, 110, .14);
}

html { color-scheme: light; }

body {
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 152, 240, .14), transparent 34rem),
    radial-gradient(circle at 88% 15%, rgba(98, 216, 255, .13), transparent 29rem),
    linear-gradient(180deg, #fbfdff 0%, #f6f9fd 42%, #f2f7fc 100%);
}

p { color: var(--muted); }
strong { color: #10253b; }
.eyebrow { color: #087fb6; }

.topbar {
  border-bottom-color: rgba(22, 50, 78, .11);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 22px rgba(33, 68, 101, .06);
}

.brand { color: #10253b; }
.brand-mark {
  color: #fff;
  background: linear-gradient(145deg, var(--blue-2), #2853b8);
  box-shadow: 0 8px 24px rgba(18, 110, 208, .24);
}

.top-cta {
  color: #126ed0;
  background: #ffffff;
  border: 1px solid rgba(18, 110, 208, .24);
  box-shadow: 0 7px 20px rgba(31, 82, 131, .08);
}

.button {
  color: #fff;
  background: linear-gradient(135deg, #126ed0, #2d98f0);
  box-shadow: 0 12px 28px rgba(18, 110, 208, .22);
}

.button.secondary {
  color: #155f9f;
  background: rgba(255, 255, 255, .58);
  border-color: rgba(18, 110, 208, .24);
}

.hero h1 { color: #10253b; }
.hero h1 span {
  background: linear-gradient(90deg, #10253b 7%, #087fb6 88%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-lead { color: #405c76; }
.hero-lead strong { color: #10253b; }

.quick-benefits li {
  border-color: rgba(22, 50, 78, .12);
  background: rgba(255, 255, 255, .78);
  color: #314f69;
  box-shadow: 0 4px 12px rgba(42, 76, 108, .04);
}

.microcopy { color: #6d8297; }

.product-visual::before { background: rgba(45, 152, 240, .20); }
.product-visual img { filter: drop-shadow(0 24px 34px rgba(44, 76, 105, .20)); }

.trust-strip {
  border-block-color: rgba(22, 50, 78, .11);
  background: rgba(255, 255, 255, .60);
}

.trust-item { border-right-color: rgba(22, 50, 78, .11); }
.trust-item b { color: #10253b; }
.trust-item span { color: #657c92; }

.card {
  border-color: rgba(22, 50, 78, .12);
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(245,249,253,.95));
  box-shadow: 0 13px 32px rgba(35, 70, 103, .08);
}

.card .num,
.step-num {
  background: rgba(18, 110, 208, .10);
  color: #087fb6;
}

.demo-section,
.value-section {
  background: linear-gradient(180deg, #eef6fd 0%, #f4f9fd 100%);
  border-block: 1px solid rgba(22, 50, 78, .07);
}

.demo-copy {
  border-color: rgba(18, 110, 208, .14);
  background: linear-gradient(155deg, rgba(223, 240, 255, .92), rgba(255,255,255,.92));
  box-shadow: 0 16px 38px rgba(35, 70, 103, .08);
}

/* Lighten the HTML demo mockup too, so the whole sales page reads as one theme. */
.app-mock {
  border-color: rgba(22, 50, 78, .14);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.app-top {
  border-bottom-color: rgba(22, 50, 78, .11);
  background: #f3f7fb;
}
.app-top strong { color: #16314b; }

.input-demo,
.analysis-demo,
.freq-demo {
  border-color: rgba(22, 50, 78, .10);
  background: #f8fbfe;
}
.demo-label { color: #667f97; }
.demo-input { color: #17334c; }
.match { border-bottom-color: rgba(22, 50, 78, .08); }
.match b { color: #17334c; }
.match small { color: #667f97; }
.percent { color: #087fb6; }
.parasite-line {
  border-top-color: rgba(22, 50, 78, .11);
  color: #49647d;
}
.freq-row { color: #5b738a; }
.freq-row b { color: #17334c; }
.caption { color: #768ba0; }

.checklist li { color: #3f5a73; }
.checklist li::before { color: #fff; background: var(--green); }

.screenshot-frame {
  border-color: rgba(22, 50, 78, .11);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.notice {
  border-color: rgba(174, 126, 15, .24);
  background: rgba(255, 231, 167, .34);
  color: #75550f;
}

.different {
  background: linear-gradient(180deg, transparent, rgba(45, 152, 240, .075), transparent);
}

.authority {
  border-block-color: rgba(22, 50, 78, .10);
  background: rgba(255, 255, 255, .48);
}

.authority-box {
  border-color: rgba(22, 50, 78, .12);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 16px 42px rgba(35, 70, 103, .08);
}

.authority-stat {
  background: linear-gradient(145deg, rgba(18,110,208,.11), rgba(98,216,255,.11));
}
.authority-stat strong { color: #087fb6; }
.authority-stat span { color: #425f78; }

.quote {
  border-left-color: #2d98f0;
  background: #f4f8fc;
  color: #294963;
}
.quote cite { color: #6b8298; }

.value-card span { color: #667f97; }

.price-box {
  border-color: rgba(18, 110, 208, .22);
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 152, 240, .13), transparent 24rem),
    #ffffff;
  box-shadow: 0 24px 65px rgba(35, 70, 103, .14);
}
.price { color: #10253b; }
.price-sub { color: #516b84; }
.included div { color: #38546e; }

.payment-placeholder {
  border-color: rgba(22, 50, 78, .22);
  background: #f7fafd;
}
.payment-placeholder b { color: #10253b; }
.payment-placeholder span { color: #687f95; }
.after-buy { color: #627b92; }

.faq details,
details {
  border-color: rgba(22, 50, 78, .11);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 6px 18px rgba(35, 70, 103, .04);
}
summary { color: #17334c; }
summary::after { color: #087fb6; }

.final-close .inner {
  background: linear-gradient(145deg, rgba(220, 239, 255, .92), rgba(255,255,255,.92));
  border-color: rgba(22, 50, 78, .11);
  box-shadow: 0 18px 44px rgba(35, 70, 103, .08);
}

footer {
  border-top-color: rgba(22, 50, 78, .11);
  color: #6d8398;
}
footer a { color: #446782; }

.mobile-buy {
  border-color: rgba(22, 50, 78, .14);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 38px rgba(35, 70, 103, .17);
}
.mobile-buy b { color: #17334c; }
.mobile-buy small { color: #667f97; }
.mobile-buy a { color: #fff; background: #126ed0; }

@media (max-width: 920px) {
  .trust-item:nth-child(-n+2) { border-bottom-color: rgba(22, 50, 78, .11); }
}