:root {
  color-scheme: light;
  --ink: #10201e;
  --muted: #5d6d6a;
  --line: #dce7e4;
  --panel: #ffffff;
  --soft: #f3f8f6;
  --dark: #0b1f22;
  --green: #00a878;
  --green-dark: #067055;
  --blue: #1769e0;
  --cyan: #21b8d6;
  --amber: #f2b84b;
  --coral: #e85f4f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #f7fbfa;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.page { min-height: 100vh; transition: filter .2s ease; }
body.payment-active .page { filter: blur(6px); pointer-events: none; user-select: none; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  border-bottom: 1px solid rgba(16,32,30,.1);
  background: rgba(247,251,250,.92);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 950; color: var(--ink); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--dark);
  color: #9ef3d2;
  box-shadow: 0 10px 24px rgba(11,31,34,.18);
}
.nav-links { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; font-weight: 800; }
.nav-links a:hover { color: var(--green-dark); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn.primary { background: var(--green); color: #041411; box-shadow: 0 14px 30px rgba(0,168,120,.22); }
.btn.primary:hover { background: #12bd89; }
.btn.secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.secondary:hover { border-color: rgba(23,105,224,.36); color: var(--blue); }
.hero {
  width: min(1180px, calc(100% - 28px));
  min-height: calc(100svh - 64px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 24px;
  padding: 18px 0 34px;
}
.hero-copy, .workbench, .matrix-table, .plan, .guide-card, .feature-grid article, .faq-grid article, .monitor-grid article {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(16,32,30,.08);
}
.hero-copy {
  padding: 24px;
  background: linear-gradient(145deg, #ffffff 0%, #f0faf7 72%);
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: 52px; line-height: 1.02; }
h2 { margin-bottom: 12px; font-size: 34px; line-height: 1.08; }
h3 { margin-bottom: 8px; font-size: 18px; }
.lead, .section-head p, .resource-hero p, .page-hero p { color: var(--muted); font-size: 18px; line-height: 1.55; }
.hero-actions, .panel-actions, .section-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mobile-demo { display: none; }
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.hero-metrics span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(16,32,30,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-size: 12px;
}
.hero-metrics strong { color: var(--ink); font-size: 22px; }
.workbench { padding: 18px; }
.workbench-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.workbench-head h2 { font-size: 26px; margin-bottom: 0; }
.status-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e8f8f1;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 950;
}
.input-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}
.source-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tag {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 0 12px;
  cursor: pointer;
  font-weight: 850;
}
.tag.active { background: var(--dark); border-color: var(--dark); color: #9ef3d2; }
.risk-output { display: grid; grid-template-columns: .55fr 1.45fr; gap: 10px; }
.score-box {
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 14px;
  border-radius: 8px;
  background: var(--dark);
  color: #d8fff0;
}
.score-box span, .score-box small { color: #a8c8c0; font-weight: 800; }
.score-box strong { font-size: 52px; line-height: 1; color: #fff; }
.mini-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mini-matrix div {
  min-height: 58px;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}
.mini-matrix span { color: var(--muted); font-size: 12px; font-weight: 800; }
.mini-matrix strong { font-size: 14px; }
.output-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.output-tabs article {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.output-tabs span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.unlock-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fff7df;
  border: 1px solid rgba(242,184,75,.55);
}
.unlock-card[hidden] { display: none; }
.unlock-card div { display: grid; gap: 4px; }
.unlock-card span { color: #765b16; font-size: 13px; }
.proof-band {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.proof-band div {
  padding: 14px;
  border-radius: 8px;
  background: var(--dark);
  color: #d8fff0;
}
.proof-band strong, .proof-band span { display: block; }
.proof-band span { color: #a8c8c0; font-size: 13px; line-height: 1.45; margin-top: 4px; }
.section, .page-hero, .resource-hero, .resource-layout, .checkout-page, .legal {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
}
.section { padding: 34px 0; }
.section-head { max-width: 760px; margin-bottom: 18px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-grid article, .faq-grid article, .monitor-grid article { padding: 18px; }
.feature-grid p, .faq-grid p, .monitor-grid span, .guide-card p, .guide-card li, .plan p, .plan li {
  color: var(--muted);
  line-height: 1.55;
}
.two-col { display: grid; grid-template-columns: .88fr 1.12fr; gap: 18px; align-items: center; }
.matrix-table { overflow: hidden; }
.matrix-table div { display: grid; grid-template-columns: .6fr 1fr 1fr; }
.matrix-table span { padding: 13px; border-bottom: 1px solid var(--line); line-height: 1.35; }
.matrix-table div:first-child span { background: var(--dark); color: #fff; font-weight: 950; }
.matrix-table div:last-child span { border-bottom: 0; }
.monitor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.monitor-grid article { display: grid; gap: 7px; }
.monitor-grid strong { color: var(--green-dark); }
.pricing { scroll-margin-top: 72px; }
.pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 16px; }
.pricing-head p { max-width: 720px; color: var(--muted); line-height: 1.55; }
.pricing-controls { display: grid; gap: 10px; justify-items: end; min-width: 270px; }
.billing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.billing-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  cursor: pointer;
  font-weight: 900;
}
.billing-toggle button.active { color: #fff; background: var(--dark); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.plan { position: relative; padding: 16px; display: grid; gap: 9px; align-content: start; }
.plan.featured { border-color: rgba(0,168,120,.65); box-shadow: 0 24px 60px rgba(0,168,120,.15); }
.recommended {
  position: absolute;
  top: -12px;
  left: 14px;
  border-radius: 999px;
  background: var(--amber);
  color: #342200;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
}
.plan-top { min-height: 112px; }
.price-line { display: flex; align-items: baseline; gap: 6px; }
.price-line span { font-size: 36px; font-weight: 950; color: var(--ink); }
.price-line small { color: var(--muted); font-weight: 850; }
.billing-note { min-height: 46px; font-size: 13px; }
.allowance { color: var(--green-dark) !important; font-weight: 950; }
.plan ul { margin: 0; padding-left: 18px; }
.plan li { margin: 7px 0; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.guide-grid a {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.guide-grid span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.final-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding: 22px;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
}
.final-cta p { color: #b8cdc8; max-width: 780px; }
.page-hero, .resource-hero, .checkout-page { padding: 48px 0 24px; }
.page-hero.compact { max-width: 980px; }
.resource-hero { max-width: 980px; }
.resource-hero h1, .page-hero h1, .checkout-page h1 { font-size: 46px; }
.resource-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 0 28px;
}
.guide-card { padding: 20px; }
.guide-card h2 { font-size: 24px; }
.guide-card li { margin-bottom: 9px; }
.product-bridge { grid-column: span 2; background: #eef8ff; }
.checkout-page {
  min-height: calc(100svh - 64px);
  display: grid;
  place-items: center;
}
.checkout-page > div {
  width: min(860px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16,32,30,.1);
}
.checkout-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.checkout-summary span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: #f8fbfa; font-weight: 850; }
.legal { max-width: 900px; padding: 48px 0 60px; }
.legal h1 { font-size: 44px; }
.legal h2 { margin-top: 28px; font-size: 24px; }
.legal p { color: var(--muted); line-height: 1.72; }
.footer {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 30px 0 44px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  border-top: 1px solid var(--line);
}
.footer p { color: var(--muted); line-height: 1.55; }
.footer-brand { margin-bottom: 10px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.footer-grid h2 { font-size: 14px; margin: 0 0 9px; }
.footer-grid a { display: block; margin: 8px 0; color: #315b72; font-weight: 800; font-size: 14px; }
.fineprint { font-size: 12px; }
.payment-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8,22,25,.46);
  backdrop-filter: blur(10px);
}
.payment-backdrop[hidden] { display: none; }
.payment-card {
  position: relative;
  width: min(500px, 100%);
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 30px 100px rgba(0,0,0,.32);
}
.payment-card p { color: var(--muted); line-height: 1.55; }
.payment-card .btn { margin-top: 12px; }
.icon-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
}
[hidden] { display: none !important; }
@media (max-width: 980px) {
  .nav-links { display: none; }
  .topbar { width: calc(100% - 20px); }
  .hero, .two-col, .resource-layout, .footer { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 16px; }
  .feature-grid, .monitor-grid, .proof-band, .plans, .faq-grid, .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-head, .final-cta { display: grid; }
  .pricing-controls { justify-items: start; }
  .product-bridge { grid-column: span 1; }
  h1 { font-size: 42px; }
}
@media (max-width: 640px) {
  .topbar .btn { display: none; }
  .hero, .section, .proof-band, .page-hero, .resource-hero, .resource-layout, .checkout-page, .legal, .footer { width: calc(100% - 20px); }
  .hero-copy, .workbench, .checkout-page > div { padding: 16px; }
  h1, .resource-hero h1, .page-hero h1, .checkout-page h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .lead, .section-head p, .resource-hero p, .page-hero p { font-size: 16px; }
  .mobile-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
  .input-grid, .risk-output, .mini-matrix, .output-tabs, .hero-metrics, .feature-grid, .monitor-grid, .proof-band, .plans, .faq-grid, .guide-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .panel-actions .btn, .section-actions .btn, .unlock-card .btn, .pricing-controls .btn { width: 100%; }
  .unlock-card { grid-template-columns: 1fr; }
  .plan-top { min-height: auto; }
  .matrix-table { font-size: 13px; }
}