/* Protokel light web theme. Values follow the app's semantic design tokens. */
@font-face { font-family: Geist; src: url("fonts/Geist-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Geist; src: url("fonts/Geist-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/InterText-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/InterText-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/InterText-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/InterText-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Barlow; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url("fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg-base: #F6F8F7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #EEF2F1;
  --bg-border: #D8E1DF;
  --text-primary: #17211F;
  --text-secondary: #52635F;
  --text-muted: #5F706B;
  --teal-primary: #0F766E;
  --teal-ghost: #DDF7F2;
  --action-navigate: #245EAF;
}
html { color-scheme: light; }
body { background: var(--bg-base); color: var(--text-primary); font-family: Inter, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: Geist, sans-serif !important; letter-spacing: -0.02em; }
.mono { font-family: Inter, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }
.stat-value, .stat-val, .pricing-price, .draw-number { font-family: Barlow, sans-serif !important; font-variant-numeric: tabular-nums; }
.section-label, .label-sm, .legal-eyebrow, .draw-label, .stat-lbl, .footer-link {
  font-family: Inter, sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--action-navigate) !important;
  outline-offset: 3px;
}
.site-nav {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--bg-border);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-nav-logo, .footer-brand { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; display: block; object-fit: cover; flex: none; }
.brand-wordmark { width: 127px; height: auto; display: block; filter: brightness(0); }
.footer-brand .brand-icon { width: 25px; height: 25px; }
.footer-brand .brand-wordmark { width: 118px; }
.site-nav-cta, .hero-cta-primary, .btn-primary, .pricing-cta-primary, .closing-cta-btn {
  background: #17211F !important; color: #FFFFFF !important; box-shadow: none !important;
}
.site-nav-cta:hover, .hero-cta-primary:hover, .btn-primary:hover, .pricing-cta-primary:hover, .closing-cta-btn:hover {
  background: #0E1513 !important; box-shadow: none !important;
}
.hero-cta-secondary, .btn-secondary, .pricing-cta-secondary { box-shadow: none !important; }
.card, .card-elevated, .feature-card-hover, .results-card, .accordion-item { box-shadow: none !important; }
.feature-card-hover { border-top: 1px solid var(--bg-border) !important; }
.feature-card-hover:hover { background: #EEF2F1 !important; border-color: #7D918C !important; }
.feature-card-hover:nth-child(1) > div:first-child { background: #F6EEDC !important; }
.feature-card-hover:nth-child(1) svg { stroke: #9A563C; }
.feature-card-hover:nth-child(2) > div:first-child { background: #E7F0FC !important; }
.feature-card-hover:nth-child(2) svg { stroke: #245EAF; }
.feature-card-hover:nth-child(3) > div:first-child,
.feature-card-hover:nth-child(4) > div:first-child { background: #F0ECF8 !important; }
.feature-card-hover:nth-child(3) svg,
.feature-card-hover:nth-child(4) svg { stroke: #6552A3; }
.split-input, .results-card { border-color: #7D918C; }
.qp-chip.active, .syringe-btn.active { background: #DDF7F2 !important; border-color: #0F766E !important; color: #0F766E !important; }
.draw-number { color: #17211F !important; }
.closing-cta-inner { background: #DDF7F2 !important; box-shadow: none !important; }
@media (max-width: 600px) {
  .brand-wordmark { width: 105px; }
  .brand-icon { width: 25px; height: 25px; }
  .footer-brand .brand-wordmark { width: 105px; }
}