/* ═══════════════════════════════════════════════════════════════
   DARK SCRUB — Typography & Design Refresh
   Loaded AFTER all inline styles to override defaults
   ═══════════════════════════════════════════════════════════════ */

/* ─── BODY TEXT: SWITCH TO INTER ──────────────────────────── */
body,
p,
li,
td,
dd,
th,
label,
span,
div,
blockquote,
figcaption {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── KEEP MONO FONTS WHERE THEY BELONG ───────────────────── */
.nav-links a,
.nav-brand,
.nav-cta,
.section-label,
.hero-label,
.page-label,
.footer-legal,
[class*="mono"],
[class*="terminal"],
[class*="tag"],
[class*="label"]:not(label),
code,
pre,
kbd,
samp,
.stat-number,
.stat-label,
.exposure-label,
.process-step-number,
.step-num,
.step-time,
.price-label,
.onetime-card .price-label,
.trust-icon,
.cam-corner,
.table-disclaimer,
.compare-table .cat-row td,
.compare-table td:first-child,
.monthly-table thead th {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Share Tech Mono for nav items — minimum 13px */
.nav-links a,
.nav-back,
.footer-links a {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: max(13px, inherit);
}

/* Chakra Petch for headings */
h1, h2, h3 {
  font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   BRIGHTEN DIM TEXT COLORS
   ═══════════════════════════════════════════════════════════════ */

/* Body text — was #c4c4cc or #8a8a9e, now brighter */
body {
  color: #d0d0dc;
  line-height: 1.7;
}

/* Paragraphs and general content */
p, li, td, dd {
  color: #d0d0dc;
}

/* Descriptions, subtitles, muted content */
.section-desc,
.hero-sub,
.page-desc,
.page-subtitle,
.service-card p,
.price-card p,
.sub-info p,
.trust-card p,
.unique-card p,
.choose-list li,
.onetime-card .price-desc,
.monthly-table td,
.compare-table td {
  color: #b8b8c8;
}

/* Muted helper text */
.note,
.table-disclaimer,
.cta-footer,
.promise-footnote {
  color: #a0a0b0;
}

/* Footer links */
.footer-links a {
  color: #9a9aaa;
}

.footer-legal {
  color: #9a9aaa;
}

/* Form labels */
label,
.form-label,
legend {
  color: #c0c0cc;
}

/* FAQ answer text */
.faq-answer,
.faq-body,
.answer,
.accordion-content,
.accordion-body,
details > div,
details > p,
details p,
.faq-item p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #c8c8d4;
  line-height: 1.7;
  font-size: 15px;
}

/* Blog body text */
.blog-article-body p,
.article-content p,
article p {
  color: #d0d0dc;
}

/* ═══════════════════════════════════════════════════════════════
   MINIMUM FONT SIZES
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: nothing below 13px */
body {
  font-size: max(14px, 0.875rem);
}

p, li, td, dd, span, label {
  font-size: max(13px, inherit);
}

/* ═══════════════════════════════════════════════════════════════
   LINE HEIGHT
   ═══════════════════════════════════════════════════════════════ */

p, li, td, dd {
  line-height: 1.7;
}

/* Blog article paragraphs get extra breathing room */
.blog-article-body p,
.article-content p,
article p {
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   FORM INPUT BORDERS (Critical for mobile visibility)
   ═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="search"],
select,
textarea {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 10px 12px;
  color: #e0e0e8;
  font-size: 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: #e63333;
  box-shadow: 0 0 0 1px rgba(230, 51, 51, 0.3);
  outline: none;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: #6a6a7e;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG ARTICLE STYLING
   ═══════════════════════════════════════════════════════════════ */

/* Hero image for blog articles (inline, after h1) */
.blog-hero-image {
  width: 100%;
  max-width: 1200px;
  max-height: 400px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  margin: 0 auto 2rem auto;
  display: block;
  border: 1px solid rgba(255, 0, 0, 0.15);
}

/* Blog article h1 — pure white, larger */
.blog-article-body h1,
article h1 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
}

/* Blog article body text — brighter, larger */
.blog-article-body p,
article p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #d0d0dc;
  font-size: 17px;
  line-height: 1.8;
  max-width: 720px;
  margin-bottom: 1.4em;
}

/* Bold text — pure white for emphasis */
.blog-article-body strong,
article strong {
  color: #ffffff;
}

/* h2 section headers — DS red, uppercase */
.blog-article-body h2,
article h2 {
  font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
  border-left: 3px solid #dc1e1e;
  padding-left: 12px;
  margin-top: 2.5rem;
  margin-bottom: 0.8em;
  color: #dc1e1e;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* h3 subheaders — bright, larger */
.blog-article-body h3,
article h3 {
  font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
  border-left: 3px solid #e63333;
  padding-left: 12px;
  margin-top: 2rem;
  margin-bottom: 0.8em;
  color: #e8e8f0;
  font-size: 19px;
  font-weight: 600;
}

/* Blockquotes — red border, brighter text */
.blog-article-body blockquote,
article blockquote {
  border-left: 3px solid #dc1e1e;
  padding-left: 1.5rem;
  margin: 1.5em 0;
  color: #e0e0e8;
  font-style: italic;
}

.blog-article-body ul,
.blog-article-body ol,
article ul,
article ol {
  padding-left: 20px;
  margin-bottom: 1.4em;
}

.blog-article-body ul li::marker,
article ul li::marker {
  color: #e63333;
}

.blog-article-body ol li::marker,
article ol li::marker {
  color: #e63333;
  font-weight: 600;
}

.blog-article-body li,
article li {
  color: #d0d0dc;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 0.4em;
}

/* Blog CTA at end of articles */
.blog-cta {
  margin-top: 48px;
  padding: 32px;
  border: 1px solid #14141e;
  background: #08080c;
  text-align: center;
}

.blog-cta h3 {
  font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  border: none;
  padding-left: 0;
}

.blog-cta a {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: #e63333;
  color: #000;
  padding: 14px 32px;
  text-decoration: none;
  transition: all 0.2s;
}

.blog-cta a:hover {
  background: #ff4444;
  box-shadow: 0 0 30px rgba(230, 51, 51, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body, p, li, td, dd {
    font-size: max(15px, 1rem);
  }

  /* More visible form borders on mobile */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    min-height: 48px;
    border-color: rgba(255, 255, 255, 0.3);
    font-size: 16px; /* prevents iOS zoom */
  }

  .blog-article-body p,
  article p {
    font-size: 16px;
  }

  .faq-answer,
  .faq-body,
  .answer,
  .accordion-content,
  details p {
    font-size: 15px;
  }
}