/* Nordic base override — Nordic precision palette applied on top of existing page styles */

:root {
  color-scheme: light !important;
  --bg: #FAFAF7 !important;
  --glass: #FFFFFF !important;
  --glass-hover: #F5F5EF !important;
  --border: #E6E6DD !important;
  --border-hover: #D4D4C7 !important;
  --accent: #0D4D3F !important;
  --accent-2: #0D4D3F !important;
  --text: #0C0C0A !important;
  --muted: #6E6E64 !important;
  --warning: #B4541A !important;

  --nordic-ink-1: #0C0C0A;
  --nordic-ink-2: #3A3A34;
  --nordic-ink-3: #6E6E64;
  --nordic-ink-4: #9A9A8E;
  --nordic-rule: #E6E6DD;
  --nordic-rule-2: #D4D4C7;
  --nordic-bg: #FAFAF7;
  --nordic-elev: #FFFFFF;
  --nordic-sunk: #F2F2EC;
  --nordic-acc: #0D4D3F;
  --nordic-acc-soft: #E8F0ED;
  --nordic-acc-border: #B8D0C8;
}

html, body {
  background: #FAFAF7 !important;
  color: #0C0C0A !important;
  font-family: "Switzer", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.005em !important;
  line-height: 1.55 !important;
}

a { color: #0C0C0A; }
a:hover { color: #0D4D3F; text-decoration: none; }

/* =============== TYPOGRAPHY =============== */
h1, h2, h3, h4, h5, h6 {
  color: #0C0C0A !important;
  letter-spacing: -0.02em;
}
h1 { font-weight: 500 !important; }
h2 { font-weight: 500 !important; }
h3 { font-weight: 500 !important; }
h4, h5, h6 { font-weight: 500 !important; }

p, li, td {
  color: #3A3A34 !important;
}
p.muted, .muted, footer, small {
  color: #6E6E64 !important;
}
strong, b {
  color: #0C0C0A !important;
  font-weight: 600 !important;
}

/* =============== TOP NAV =============== */
.top-nav {
  max-width: 1280px !important;
  padding: 14px 40px !important;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #E6E6DD;
}
.brand {
  color: #0C0C0A !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
}
.brand::before {
  content: "D";
  display: inline-flex;
  width: 22px;
  height: 22px;
  background: #0D4D3F;
  color: #FFFFFF;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.nav-links a {
  color: #3A3A34 !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  font-weight: 450 !important;
  transition: color 140ms ease;
}
.nav-links a:hover {
  color: #0D4D3F !important;
  background: transparent !important;
  text-decoration: none;
}
.nav-links a.active {
  color: #0D4D3F !important;
  background: #E8F0ED !important;
}
.nav-cta,
.nav-link-primary {
  background: #0C0C0A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.nav-cta:hover,
.nav-link-primary:hover {
  background: #0D4D3F !important;
}
.nav-links .nav-link-mobile-show {
  background: #F2F2EC !important;
  border: 1px solid #D4D4C7 !important;
  color: #3A3A34 !important;
}

/* =============== CONTAINER =============== */
.container {
  max-width: 1280px !important;
}

/* =============== CARDS =============== */
.card,
.flow-step,
.info-card,
.benefit-card,
.step-card,
.format-item,
.faq-item,
.faq-section,
.price-card {
  background: #FFFFFF !important;
  border: 1px solid #E6E6DD !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.card h1, .card h2, .card h3, .card h4,
.flow-step h3, .flow-step .flow-title,
.info-card h4,
.benefit-card h3,
.step-card h3 {
  color: #0C0C0A !important;
}

.card p, .card li,
.flow-desc,
.info-card p,
.info-card li,
.benefit-card p {
  color: #3A3A34 !important;
}

/* Preview images & code blocks */
img.preview,
img {
  border-color: #E6E6DD !important;
  background: #F2F2EC !important;
}
.code {
  background: #F2F2EC !important;
  border-color: #E6E6DD !important;
  color: #3A3A34 !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

/* =============== FLOW NUMBERS / BADGES =============== */
.flow-num {
  background: #0D4D3F !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
.step-number {
  color: #0D4D3F !important;
  background: transparent !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* =============== PILLS & BADGES =============== */
.pill,
.pill-green,
.pill-ext {
  background: #E8F0ED !important;
  color: #0D4D3F !important;
  border: 1px solid #B8D0C8 !important;
  box-shadow: none !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
}
.mini-badge {
  background: #F2F2EC !important;
  color: #6E6E64 !important;
  border-radius: 3px !important;
}

.file-pill {
  background: #FFFFFF !important;
  border: 1px solid #E6E6DD !important;
  color: #3A3A34 !important;
  border-radius: 4px !important;
}
.file-pill:hover {
  background: #F5F5EF !important;
  border-color: #D4D4C7 !important;
  color: #0D4D3F !important;
}
.thumb {
  border: 1px solid #E6E6DD !important;
  background: #F2F2EC !important;
  border-radius: 4px !important;
}

/* =============== BUTTONS =============== */
.btn-primary {
  background: #0C0C0A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
}
.btn-primary:hover {
  background: #0D4D3F !important;
}
.btn-secondary {
  background: transparent !important;
  color: #3A3A34 !important;
  border: 1px solid #D4D4C7 !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
}
.btn-secondary:hover {
  background: #F2F2EC !important;
  border-color: #9A9A8E !important;
  color: #0C0C0A !important;
}

/* =============== FAQ =============== */
.faq-item summary,
.faq-item h6,
.faq-question {
  color: #0C0C0A !important;
  font-weight: 500 !important;
}
.faq-answer {
  color: #3A3A34 !important;
}
.faq-chevron {
  color: #6E6E64 !important;
}

/* =============== STICKY CTA =============== */
.sticky-cta-inner {
  background: #FFFFFF !important;
  border: 1px solid #D4D4C7 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  color: #3A3A34 !important;
}
.sticky-cta-text {
  color: #3A3A34 !important;
}
.sticky-cta-text strong { color: #0C0C0A !important; }
.sticky-cta-btn {
  background: #0C0C0A !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.sticky-cta-btn:hover { background: #0D4D3F !important; }

/* =============== FOOTER =============== */
footer {
  max-width: 1280px !important;
  margin: 48px auto 0 !important;
  padding: 40px !important;
  border-top: 1px solid #E6E6DD !important;
  background: transparent !important;
  color: #6E6E64 !important;
  text-align: center !important;
}
footer a {
  color: #3A3A34 !important;
  border-bottom: 1px dotted #E6E6DD !important;
}
footer a:hover {
  color: #0D4D3F !important;
  border-bottom-color: #0D4D3F !important;
}

/* =============== WARNING BOX =============== */
.warning {
  background: #FBF0E7 !important;
  border: 1px solid #EBCBA7 !important;
  border-left: 3px solid #B4541A !important;
  border-radius: 6px !important;
  color: #3A3A34 !important;
  padding: 18px 22px !important;
}
.warning strong {
  color: #0C0C0A !important;
  font-weight: 600 !important;
}
.warning a {
  color: #B4541A !important;
  border-bottom: 1px solid #EBCBA7 !important;
}
.warning a:hover {
  color: #7A3710 !important;
  border-bottom-color: #B4541A !important;
}

/* =============== BLOG ARTICLE =============== */
article h1 {
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}
article h2 {
  font-size: 24px !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}
article h3 {
  font-size: 18px !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}
article p, article li {
  color: #3A3A34 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
article a {
  color: #0D4D3F !important;
  border-bottom: 1px solid #B8D0C8 !important;
}
article a:hover {
  border-bottom-color: #0D4D3F !important;
}
article blockquote {
  border-left: 3px solid #0D4D3F !important;
  background: #F2F2EC !important;
  color: #3A3A34 !important;
  padding: 14px 18px !important;
  border-radius: 0 4px 4px 0 !important;
}

/* =============== LIST BULLETS =============== */
/* Older page styles set `ul { color: #cdd4e0 }` for dark-theme bullets.
   On light Nordic bg that made `::marker` invisible. */
ul, ol {
  color: #3A3A34 !important;
}

/* =============== POSTER / CATEGORY BADGES =============== */
.badge {
  color: #6E6E64 !important;
  font-weight: 500 !important;
}

/* =============== RESPONSIVE TOP NAV =============== */
@media (max-width: 640px) {
  .top-nav {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .nav-links {
    flex-wrap: wrap !important;
  }
}

/* =============== MISC OVERRIDES =============== */
hr {
  border: none !important;
  border-top: 1px solid #E6E6DD !important;
}
code, pre {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  background: #F2F2EC !important;
  color: #3A3A34 !important;
  border-radius: 3px !important;
}