/* editorial.css — Editor's Tech v2.0 override layer for toukenai.com
   Loaded AFTER style.css — cascade wins. OKLCH tokens only, no hex.
   design.md: warm ink + amber + serif display. No video/particles/forms. */

:root {
  --p-ink-100: oklch(96% 0.0088 90);
  --p-ink-300: oklch(92% 0.012 85);
  --p-ink-600: oklch(45% 0.015 260);
  --p-ink-700: oklch(32% 0.018 260);
  --p-ink-900: oklch(20% 0.015 265);
  --p-amber-300: oklch(85% 0.13 75);
  --p-amber-500: oklch(75% 0.1675 55);
  --p-amber-600: oklch(68% 0.15 50);
  --p-border: oklch(90% 0.01 85);
  --p-paper: oklch(98% 0.006 90);
  --p-serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, "Times New Roman", serif;
  --p-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

/* --- body / canvas: warm paper --- */
html, body {
  background: var(--p-paper) !important;
  color: var(--p-ink-700) !important;
  font-family: var(--p-sans);
}

/* --- typography: serif display headings --- */
h1, h2, h3, .hero h1, .section-title, .case-title, .step-title {
  font-family: var(--p-serif) !important;
}
.hero h1 {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--p-ink-900) !important;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: clamp(1.75rem, 7vw, 3rem) !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero p { overflow-wrap: break-word; }
.hero-subtitle, .hero-tagline {
  color: var(--p-ink-600) !important;
}
.hero-tagline {
  border-left-color: var(--p-amber-500) !important;
}

/* --- hero canvas --- */
.hero {
  background: linear-gradient(180deg, var(--p-ink-100) 0%, var(--p-paper) 100%) !important;
  text-align: left;
}
.hero-content { max-width: 640px; margin: 0; text-align: left; }
.hero p { margin-left: 0; }
.hero-container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-container { grid-template-columns: 1fr; gap: 2rem; }
  .hero { text-align: center; padding-left: 1rem; padding-right: 1rem; }
  .hero-content { max-width: 100%; text-align: center; min-width: 0; }
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    justify-items: center;
    justify-content: center;
  }
  .stat-item { min-width: 0; text-align: center; }
}
@media (max-width: 480px) {
  .stat-number { font-size: 1.75rem !important; }
  .cta-buttons { flex-direction: column; width: 100%; }
  .cta-buttons .btn { width: 100%; justify-content: center; }
  .hero-promo { font-size: 0.95rem; }
}

/* --- stats trust bar --- */
.stats {
  border-top: 1px solid var(--p-border) !important;
  gap: 2rem;
}
.stat-number {
  font-family: var(--p-serif) !important;
  color: var(--p-ink-900) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
.stat-item:last-child .stat-number,
.stat-item:nth-child(2) .stat-number { color: var(--p-amber-600) !important; }
.stat-label { color: var(--p-ink-600) !important; }

/* --- buttons: amber primary --- */
.btn-primary {
  background: var(--p-amber-500) !important;
  color: var(--p-ink-900) !important;
  box-shadow: 0 2px 12px oklch(75% 0.1675 55 / 0.35) !important;
}
.btn-primary:hover { background: var(--p-amber-600) !important; filter: brightness(0.96); }
.btn-secondary {
  background: transparent !important;
  color: var(--p-ink-700) !important;
  border: 1.5px solid var(--p-ink-600) !important;
}

/* --- section headers --- */
section h2 {
  font-family: var(--p-serif) !important;
  color: var(--p-ink-900) !important;
}
/* subtle amber rule under section titles */
.services-section h2::after,
.team-section h2::after,
.faq-section h2::after,
.credentials-section h2::after,
.why-section h2::after,
.opensource-section h2::after,
.author-bio-section h2::after,
.contact-section h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--p-amber-500);
  margin-top: 0.75rem;
  border-radius: 2px;
}

/* --- cards: warm paper --- */
.svc-card, .cred-card, .content-card, .faq-item, .case-image, .logo-showcase {
  background: var(--p-paper) !important;
  border-color: var(--p-border) !important;
}
.svc-card:hover, .cred-card:hover {
  border-color: var(--p-amber-300) !important;
  box-shadow: 0 6px 24px oklch(45% 0.015 260 / 0.08) !important;
}
.svc-title, .step-title, .case-title { color: var(--p-ink-900) !important; }
.cred-badge { background: var(--p-amber-500) !important; }

/* --- header: warmer hairline --- */
header {
  background: oklch(98% 0.006 90 / 0.92) !important;
  border-bottom: 1px solid var(--p-border) !important;
}

/* --- contact / WeChat block: warm amber, not teal --- */
.contact-box {
  background: linear-gradient(135deg, var(--p-ink-700), var(--p-ink-900)) !important;
}
.contact-box h2, .contact-box h4 { color: var(--p-amber-300) !important; }

/* --- footer --- */
footer {
  background: var(--p-ink-900) !important;
  color: var(--p-ink-300) !important;
}
footer a { color: var(--p-amber-300) !important; }

/* --- links inline --- */
main a:not(.btn):not(.nav-links a) {
  text-decoration-color: var(--p-amber-500);
}

/* --- mobile safety: prevent horizontal overflow --- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .hero-container { min-width: 0; }
  .hero-visual { min-width: 0; max-width: 100%; }
}

/* --- privacy page inline teal kill --- */
.policy-wrap .updated { color: var(--p-amber-600) !important; }
.policy-wrap h2 {
  color: var(--p-ink-900) !important;
  border-left-color: var(--p-amber-500) !important;
}
.policy-wrap a { color: var(--p-amber-600) !important; }

/* --- com theme-color left as meta; force leftover promo teal in style.css vars already remapped --- */
.btn-promo, .nav-external, .hero-promo, .team-role, .svc-title, .why-number, .stat-number,
.news-tag, .value-icon, .contact-badge, .case-head::before {
  /* rely on var(--primary) remap above; hex-locked rules below */
}
.hero-promo {
  color: var(--p-amber-600) !important;
  background: oklch(75% 0.1675 55 / 0.14) !important;
}
.btn-promo { color: var(--p-amber-600) !important; }
.nav-external { color: var(--p-amber-600) !important; }
.team-role, .svc-title, .why-number, .stat-number, .news-tag {
  color: var(--p-amber-600) !important;
}
.value-icon {
  background: oklch(75% 0.1675 55 / 0.14) !important;
  color: var(--p-amber-600) !important;
}
.contact-badge {
  background: var(--p-amber-500) !important;
  color: var(--p-ink-900) !important;
}
.case-head::before {
  background: linear-gradient(180deg, var(--p-amber-500), var(--p-ink-700)) !important;
}
.sticky-cta, .promo-banner {
  background: linear-gradient(135deg, var(--p-ink-700), var(--p-ink-900)) !important;
}
.metric-num {
  background: linear-gradient(135deg, var(--p-amber-500), var(--p-ink-700)) !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.cat-install {
  background: oklch(75% 0.1675 55 / 0.15) !important;
  color: var(--p-amber-600) !important;
}
.logo { color: var(--p-ink-900) !important; }
a:focus-visible { outline-color: var(--p-amber-500) !important; }

/* ===== FIX: section headers must not be white / transparent ===== */
.section-header h2,
.section-header p,
.fde-section h2,
.fde-section h3,
.fde-section p,
section h2,
section h3 {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: unset !important;
  background-image: none !important;
  background: none !important;
}
.section-header h2 { color: var(--p-ink-900) !important; }
.section-header p,
.fde-section .section-header p { color: var(--p-ink-600) !important; }
.fde-intro h3 { color: var(--p-ink-900) !important; border-left-color: var(--p-amber-500) !important; }
.fde-intro p { color: var(--p-ink-600) !important; }
/* why-section stays dark card: keep light text there only */
.why-section .section-header h2 { color: var(--p-paper) !important; }
.why-section .section-header p { color: oklch(88% 0.01 85) !important; }

/* ===== FIX: mobile hero horizontal overflow (375/768) ===== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .hero { padding: 3rem 1rem !important; overflow: hidden; }
  .hero-container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    overflow-wrap: break-word;
  }
  .hero h1 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hero p, .hero-subtitle, .hero-tagline, .hero-desc, .hero-promo {
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-visual { display: none !important; }
  .stats { max-width: 100%; }
  .stat-item { min-width: 0; }
  .cta-buttons { flex-direction: column; width: 100%; }
  .cta-buttons .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.55rem !important; }
  .hero-tagline { font-size: 1.1rem !important; }
}