/* ----------------------------------------------------------------------------
 * Voice Keyboard Pro — Chrome editorial design system
 * Global override stylesheet. Loaded AFTER each page's inline <style>, so it
 * trumps the legacy purple/navy palette and rounded card chrome.
 *
 * Tokens (override existing CSS vars where possible):
 *   --navy   → pure black (#000)
 *   --accent → pure black (was purple)
 *   Type:     System serif Black + italic for emphasis ("New York" on iOS, system serif on web)
 *   Mono:     System monospace for caps eyebrows (SF Mono / Menlo / monospace)
 *   Borders:  Hairline 0.75px black, sharp 0pt corners (near-zero where corners help legibility)
 * --------------------------------------------------------------------------- */

:root {
  --navy: #000 !important;
  --navy-hover: #111 !important;
  --accent: #000 !important;
  --accent-hover: #111 !important;
  --brand: #000 !important;
  --primary: #000 !important;
  --bg: #FAFAFA !important;
  --bg-soft: #FAFAFA !important;
  --text: #0A0A0F !important;
  --text-secondary: rgba(10, 10, 15, 0.55) !important;
  --border: rgba(0, 0, 0, 0.12) !important;
  --chrome-green: #0DB86E;
  --chrome-warn: #E84F2E;
}

html, body {
  background: #FAFAFA !important;
  color: #0A0A0F !important;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography ------------------------------------------------------------ */

body, p, li, td, dd, .nav-brand-text, .hero-sub, .hero-meta, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5,
.section-title, .hero h1, .hero-aspire-text h1, .hero-aspire-text .hero-headline,
.feature-title, .pricing-title, .price, .stat-number {
  font-family: "New York", "Iowan Old Style", "Georgia", "Times New Roman", serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0A0A0F !important;
}

h1, .section-title, .hero h1, .hero-aspire-text h1 {
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
}

/* Editorial italic flourish — apply via .editorial-italic on inner span */
.editorial-italic, em.editorial-italic {
  font-style: italic !important;
  font-family: "New York", "Iowan Old Style", "Georgia", serif !important;
  font-weight: 900 !important;
}

/* Mono caps eyebrow */
.eyebrow, .kicker, .label-caps,
.section-eyebrow, .pricing-eyebrow, .feature-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: rgba(10, 10, 15, 0.55) !important;
}

/* --- Navigation ------------------------------------------------------------ */

nav, header > nav, .nav, header.site-header {
  background: #FAFAFA !important;
  border-bottom: 0.75px solid #000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-brand-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  color: #000 !important;
}

.nav-icon, .nav-icon img, header .logo, .site-logo {
  filter: none !important;
}

.nav-links a:not(.nav-download):not(.nav-download-alt), nav a:not(.nav-download):not(.nav-download-alt) {
  color: #0A0A0F !important;
  font-weight: 500;
}

/* --- Buttons / CTAs ------------------------------------------------------- */

.nav-download, .hero-cta, .cta-primary, .btn-primary, .pricing-cta,
button.primary, .download-btn, a.download-btn,
.hero-cta-appstore, .cta-appstore {
  background: #000 !important;
  color: #FFF !important;
  border: 0.75px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 14px 20px !important;
  transition: opacity 0.2s ease;
}
.nav-download:hover, .hero-cta:hover, .cta-primary:hover,
.btn-primary:hover, .pricing-cta:hover, .download-btn:hover {
  background: #111 !important;
  color: #FFF !important;
  transform: none !important;
  opacity: 0.92;
}

.nav-download-alt, .cta-secondary, .btn-secondary {
  background: #FFF !important;
  color: #000 !important;
  border: 0.75px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
.nav-download-alt:hover, .cta-secondary:hover {
  background: #000 !important;
  color: #FFF !important;
  transform: none !important;
}

/* --- Sections + Cards ----------------------------------------------------- */

section { background: #FAFAFA !important; }

.section-title {
  font-size: clamp(28px, 4vw, 48px) !important;
}

.feature-card, .pricing-card, .step, .moment-card,
.app-card, .integration-card, .use-case-card, .workflow-card, .guide-card,
.tool-card, .tools-card, .blog-card, .related-card {
  background: #FFF !important;
  border: 0.75px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}
.feature-card:hover, .pricing-card:hover, .step:hover, .app-card:hover,
.tool-card:hover, .blog-card:hover, .integration-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #FFF !important;
}

.feature-card .feature-icon svg,
.feature-card svg {
  stroke: #000 !important;
}

/* --- Hero ----------------------------------------------------------------- */

.hero, .hero-aspire {
  background: #FAFAFA !important;
}
.hero-aspire-photo, .hero-particle, .hero-waveform {
  display: none !important;  /* photographic / decorative noise — strip out */
}
.hero h1, .hero-aspire-text h1, .hero-aspire-text .hero-headline {
  font-size: clamp(40px, 7vw, 84px) !important;
  line-height: 0.98 !important;
}
.hero-sub, .hero-aspire-sub {
  font-size: clamp(15px, 1.6vw, 18px) !important;
  color: rgba(10, 10, 15, 0.6) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  font-weight: 400 !important;
}
.hero-meta, .hero-aspire-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-size: 10px !important;
  color: rgba(10, 10, 15, 0.55) !important;
}

/* --- Footer --------------------------------------------------------------- */

footer, .site-footer {
  background: #FAFAFA !important;
  border-top: 0.75px solid #000 !important;
  color: #0A0A0F !important;
  box-shadow: none !important;
}
footer a, .site-footer a {
  color: #0A0A0F !important;
}
footer h3, footer h4, .site-footer h3, .site-footer h4 {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: #000 !important;
}

/* --- Pricing -------------------------------------------------------------- */

.pricing-card, .pricing-tier {
  border-radius: 0 !important;
  border: 0.75px solid #000 !important;
  box-shadow: none !important;
}
.pricing-card.featured, .pricing-tier.featured {
  background: #000 !important;
  color: #FFF !important;
}
.pricing-card.featured *, .pricing-tier.featured * {
  color: #FFF !important;
}
.price {
  font-family: "New York", "Iowan Old Style", Georgia, serif !important;
  font-weight: 900 !important;
}

/* --- Blog ----------------------------------------------------------------- */

.blog-card, .blog-post-card, .post-card {
  border-radius: 0 !important;
  border: 0.75px solid #000 !important;
  box-shadow: none !important;
  background: #FFF !important;
}
.blog-card h2, .blog-card h3, .post-card h2, .post-card h3 {
  font-family: "New York", "Iowan Old Style", Georgia, serif !important;
  font-weight: 900 !important;
  font-style: italic;
}

/* Blog reading view */
article.blog-article, .post-content, .blog-content {
  font-family: "New York", "Iowan Old Style", Georgia, serif !important;
}
article.blog-article p, .post-content p {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  font-size: 18px;
  line-height: 1.7;
}

/* --- Tools index --------------------------------------------------------- */

.tools-grid .tool, .tools-grid .tool-card,
.tool-card, .tools-card {
  background: #FFF !important;
  border: 0.75px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tool-card:hover, .tools-card:hover { transform: none !important; box-shadow: none !important; }

/* --- Generic rounded → sharp ---------------------------------------------- */

[class*="rounded"], .card, .panel, .badge, .tag, .pill {
  border-radius: 0 !important;
}

input[type="text"], input[type="email"], input[type="search"], textarea, select {
  border-radius: 0 !important;
  border: 0.75px solid #000 !important;
  background: #FFF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
}

/* --- Anti-decoration ------------------------------------------------------ */

.gradient-bg, .gradient-text, .glassmorphism { background: transparent !important; }

/* --- Hairlines as section dividers --------------------------------------- */

hr {
  border: none !important;
  border-top: 0.75px solid rgba(0,0,0,0.1) !important;
  height: 0 !important;
}

/* --- Accessibility / focus ---------------------------------------------- */

:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 2px;
}