/* ==========================================================================
   HANDLED. — Jukebox Future Design System
   Shared stylesheet. Load AFTER inline <style> blocks so token overrides win.
   Updated 2026-04-23.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,500;1,500&display=swap');

/* --------------------------------------------------------------------------
   1. Token overrides
   Same variable names as legacy site, new Jukebox Future values.
   -------------------------------------------------------------------------- */
:root {
  /* Cream family (page backgrounds — kept as dominant surface) */
  --stone:        #F1E5D0;  /* primary cream background */
  --stone-light:  #F8F0E1;  /* lighter cream for alt sections */
  --stone-mid:    #E8DCC5;  /* mid cream for banded sections */
  --cream:        #FEFCF8;  /* lightest — cards, surfaces */

  /* Ink family (warm dark, not pure black) */
  --ink:          #1A1612;  /* primary text, dark backgrounds */
  --ink-soft:     #3A3128;  /* secondary text */
  --ink-muted:    #8A7E66;  /* tertiary / captions */

  /* Accents — teal is primary, rust is secondary warm */
  --accent:       #2D8A8A;  /* PRIMARY — CTAs, links, hovers (was orange) */
  --accent-warm:  #4FC4C4;  /* bright teal for status + hovers on dark */
  --accent-deep:  #1F6A6A;  /* deep teal for pressed / focused states */
  --sage:         #B8412A;  /* reused slot — now rust secondary accent */
  --rust:         #B8412A;  /* drop caps, italic emphasis */
  --mustard:      #C98E4B;  /* tertiary warm — rarely used */
  --brass:        #A89472;  /* metallic borders */

  /* Typography — Editorial Film pairing */
  --display: 'Instrument Serif', Georgia, serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --italic:  'Cormorant Garamond', Georgia, serif;
  --body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Borders — warmer than legacy stone borders */
  --border:         1px solid rgba(26, 22, 18, 0.14);
  --border-strong:  1px solid rgba(26, 22, 18, 0.28);
}

/* --------------------------------------------------------------------------
   2. Global texture + selection — DARK CANVAS
   Warm ink is the primary canvas. Halftone dots carry the brand signature.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--ink);
  background-image:
    radial-gradient(rgba(241, 229, 208, 0.05) 1px, transparent 1px);
  background-size: 6px 6px;
  color: var(--cream);
}

::selection { background: var(--accent); color: var(--cream); }

/* --------------------------------------------------------------------------
   3. Typography refinements
   Instrument Serif looks best in mixed case with slightly negative tracking.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.hero h1,
.content-section h3,
.section-header h2,
.cta-section h2,
.email-capture h3,
.footer-val {
  font-family: var(--display);
  letter-spacing: -0.015em;
  font-weight: 400;
}

/* Italic emphasis uses Cormorant Garamond italic for that editorial lift */
h1 em, h2 em, h3 em,
.hero h1 em,
.cta-section h2 em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* Mono — slightly tighter tracking than legacy */
.hero-eyebrow,
.section-number,
.section-header h2,
.breadcrumb,
.btn,
.footer-label,
.related-reads-title {
  font-family: var(--mono);
}

/* --------------------------------------------------------------------------
   4. Button refresh
   Legacy outlined buttons stay — just swap the fill color.
   -------------------------------------------------------------------------- */
.btn-filled:hover,
.btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn-filled {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn-filled:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Links + accent color usage
   -------------------------------------------------------------------------- */
a { transition: color 0.2s ease; }
.breadcrumb a:hover,
.nav-cta,
.footer-sub a,
.system-bar .nav-cta,
.hero-eyebrow {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   6. New utility classes — use on any page for Jukebox Future components
   Prefixed .h- to avoid collisions with legacy classes.
   -------------------------------------------------------------------------- */

/* Straight badge — no rotation, clean outlined rectangle */
.h-badge {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  background: transparent;
}
.h-badge.solid {
  background: var(--accent);
  color: var(--cream);
}

/* Ornamental fleuron divider */
.h-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}
.h-divider::before,
.h-divider::after {
  content: '';
  flex: 1;
  border-top: 1.5px dashed rgba(26, 22, 18, 0.25);
}
.h-divider span {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
}

/* Chapter label — mono uppercase with letter-spacing */
.h-chapter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
}

/* Drop cap for editorial paragraphs */
.h-dropcap::first-letter {
  font-family: var(--display);
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.1em 0 0;
  color: var(--rust);
}

/* Pulsing status dot */
.h-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--accent-warm);
  animation: h-pulse 1.6s ease-in-out infinite;
}
@keyframes h-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}

/* Blinking caret for terminal-style accents */
.h-caret {
  display: inline-block;
  width: 8px;
  height: 0.9em;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 2px;
  animation: h-blink 1s step-end infinite;
}
@keyframes h-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. Legacy component tweaks
   Soft adjustments that pull existing pages toward the new aesthetic
   without breaking their layout.
   -------------------------------------------------------------------------- */

/* Accent word inside headlines — when wrapped in <em> */
.hero h1 em,
.cta-section h2 em {
  color: var(--accent);
}

/* System bar / nav hover — teal */
.system-bar .nav-links a:hover,
.system-bar .nav-cta {
  color: var(--accent);
}

/* CTA section on dark — replace old orange glow with teal */
.cta-section .label {
  color: var(--accent-warm);
}
.cta-section h2 em {
  color: var(--accent-warm);
}

/* Footer accent color refresh */
.footer-sub a {
  color: var(--accent);
}
.footer-sub a:hover {
  color: var(--accent-warm);
}

/* Related-link hover and focus states */
.related-link:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* Comparison table highlights */
.comparison-table .highlight-row {
  background: rgba(45, 138, 138, 0.06);
}
.comparison-table .highlight-row .tool-name {
  color: var(--accent);
}

/* Savings callout on dark — bump to brighter teal */
.savings-cell .savings-number {
  color: var(--accent);
}

/* Email input focus state */
.email-form input[type="email"]:focus {
  border-color: var(--accent);
}

/* Hero bullet accents */
.content-section ul li::before {
  background: var(--accent);
}

/* ==========================================================================
   8. JUKEBOX FUTURE — Dark Canvas + Alternating Cream Bands
   Added 2026-04-23. Primary canvas is ink; bands opt into cream via
   .band-cream or automatically via .services-split / .pricing-section.
   ========================================================================== */

/* Default text colors on dark canvas */
h1, h2, h3, h4, h5, h6 { color: var(--cream); }
p, li, td, th, label { color: rgba(241, 229, 208, 0.85); }

/* Links default to bright teal on dark, cream on hover */
a { color: var(--accent-warm); }
a:hover { color: var(--cream); }

/* Header / nav bar — inherits dark, add soft divider */
.system-bar {
  background: var(--ink);
  color: var(--cream);
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.system-bar a { color: var(--cream); }
.system-bar a:hover { color: var(--accent-warm); }
.system-bar .brand-name { color: var(--cream); }
.system-bar .meta { color: rgba(241, 229, 208, 0.55); }
.system-bar .nav-toggle { color: var(--cream); border-color: rgba(241, 229, 208, 0.25); }
.system-bar > div { border-right-color: rgba(241, 229, 208, 0.14) !important; }

/* Hero — dark primary */
.hero {
  background: var(--ink);
  color: var(--cream);
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.hero h1 { color: var(--cream); }
.hero h1 em { color: var(--accent-warm); font-family: var(--italic); }
.hero-body { color: rgba(241, 229, 208, 0.78) !important; }
.hero-eyebrow { color: var(--accent-warm) !important; }
.hero-meta {
  color: rgba(241, 229, 208, 0.55) !important;
  border-top-color: rgba(241, 229, 208, 0.14) !important;
}
.hero::before { color: rgba(241, 229, 208, 0.25) !important; }
.crop-mark::before, .crop-mark::after { background: rgba(241, 229, 208, 0.4) !important; }

/* Section header — dark default, numbered accent in teal */
.section-header {
  background: var(--ink);
  color: var(--cream);
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.section-header h2 { color: var(--cream); }
.section-header .section-number { color: var(--accent-warm) !important; }

/* Proof / testimonial section — dark */
.proof-section {
  background: var(--ink);
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.proof-header .label { color: var(--accent-warm) !important; }
.proof-header h2 { color: var(--cream); }
.proof-card {
  background: rgba(241, 229, 208, 0.04);
  border-color: rgba(241, 229, 208, 0.12) !important;
}
.proof-quote { color: rgba(241, 229, 208, 0.88) !important; }
.proof-author { color: var(--cream) !important; }
.proof-role { color: rgba(241, 229, 208, 0.55) !important; }

/* Toolbox — dark */
.toolbox-section {
  background: var(--ink);
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.toolbox-header-bar { color: var(--cream); }
.toolbox-header-bar .label { color: var(--accent-warm) !important; }
.toolbox-header-bar h2 { color: var(--cream); }
.toolbox-item {
  background: rgba(241, 229, 208, 0.04);
  border-color: rgba(241, 229, 208, 0.12) !important;
  color: var(--cream);
}
.toolbox-item:hover {
  background: var(--accent) !important;
  color: var(--cream);
}
.toolbox-name { color: var(--cream); }
.toolbox-price { color: var(--accent-warm); }

/* Process section — dark */
.process-section, .process-grid {
  background: var(--ink);
}
.process-card {
  background: rgba(241, 229, 208, 0.04);
  border-color: rgba(241, 229, 208, 0.12) !important;
}

/* FAQ — dark */
.faq-section { background: var(--ink); border-bottom-color: rgba(241, 229, 208, 0.14) !important; }
.faq-item { border-color: rgba(241, 229, 208, 0.12) !important; }
.faq-question { color: var(--cream); }
.faq-answer { color: rgba(241, 229, 208, 0.78); }

/* CTA section — already dark, just keep accent fresh */
.cta-section { background: var(--ink); }

/* Site footer — dark */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  border-top-color: rgba(241, 229, 208, 0.14) !important;
}
.footer-cell {
  border-right-color: rgba(241, 229, 208, 0.14) !important;
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.footer-label { color: var(--accent-warm); }
.footer-val { color: var(--cream); }
.footer-sub { color: rgba(241, 229, 208, 0.55); }

/* Buttons on dark — outlined cream by default */
.btn {
  border-color: rgba(241, 229, 208, 0.4);
  color: var(--cream);
}
.btn:hover {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}
.btn-filled {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}
.btn-filled:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* --------------------------------------------------------------------------
   CREAM BANDS — opt-in sections that break the dark rhythm.
   Auto-applied to services-split + pricing-section. Additional sections
   can add .band-cream or .section-header--cream.
   -------------------------------------------------------------------------- */

.band-cream,
.services-split,
.pricing-section,
.section-header--cream,
.section-header.cream {
  background: var(--stone);
  color: var(--ink);
  border-bottom-color: rgba(26, 22, 18, 0.12) !important;
}

.band-cream h1, .band-cream h2, .band-cream h3, .band-cream h4,
.services-split h1, .services-split h2, .services-split h3, .services-split h4,
.pricing-section h1, .pricing-section h2, .pricing-section h3, .pricing-section h4,
.section-header--cream h2,
.section-header.cream h2 {
  color: var(--ink);
}

.band-cream p, .band-cream li,
.services-split p, .services-split li,
.pricing-section p, .pricing-section li {
  color: var(--ink-soft);
}

/* Cream band labels + accent numbers get deep teal for readability */
.band-cream .label,
.services-left .label,
.pricing-header .label,
.section-header--cream .section-number,
.section-header.cream .section-number {
  color: var(--accent) !important;
}

.services-left h2 em,
.pricing-header h2 em,
.band-cream h2 em {
  color: var(--accent) !important;
}

.services-left { background: var(--stone); border-right-color: rgba(26, 22, 18, 0.12) !important; }
.services-right { background: var(--stone-light); }
.service-item { border-bottom-color: rgba(26, 22, 18, 0.1) !important; color: var(--ink); }
.service-item:hover { background: rgba(26, 22, 18, 0.03); }
.service-num { color: var(--accent); }
.service-name { color: var(--ink); }
.service-desc { color: var(--ink-soft); }

/* Pricing cards on cream band */
.pricing-grid {
  background: rgba(26, 22, 18, 0.12);
  border-color: rgba(26, 22, 18, 0.14) !important;
}
.tier {
  background: var(--cream);
  color: var(--ink);
}
.tier.featured {
  background: var(--ink);
  color: var(--cream);
}
.tier.featured .tier-name,
.tier.featured .tier-tagline,
.tier.featured .tier-price,
.tier.featured .tier-note,
.tier.featured .tier-features li { color: var(--cream); }
.tier.featured .tier-features li::before { background: var(--accent-warm); }
.tier.featured .tier-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.tier.featured .tier-btn.primary:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tier-name { color: var(--ink); }
.tier-tagline { color: var(--ink-soft); }
.tier-price { color: var(--ink); }
.tier-note { color: var(--ink-muted); }
.tier-features li { color: var(--ink-soft); }
.tier-features li::before { background: var(--accent); }
.tier-btn { border-color: var(--ink); color: var(--ink); }
.tier-btn:hover { background: var(--ink); color: var(--cream); }
.tier-btn.primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tier-btn.primary:hover { background: var(--accent); border-color: var(--accent); }

/* Pricing header text colors */
.pricing-header h2 { color: var(--ink); }
.pricing-header p { color: var(--ink-soft); }

/* Buttons INSIDE cream bands flip back to ink treatment */
.band-cream .btn,
.services-split .btn,
.pricing-section .btn {
  border-color: var(--ink);
  color: var(--ink);
}
.band-cream .btn:hover,
.services-split .btn:hover,
.pricing-section .btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.band-cream .btn-filled,
.services-split .btn-filled,
.pricing-section .btn-filled {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.band-cream .btn-filled:hover,
.services-split .btn-filled:hover,
.pricing-section .btn-filled:hover {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   LONG-FORM CONTENT on dark — override inline rules that hardcode ink-soft
   -------------------------------------------------------------------------- */
.content-section {
  color: rgba(241, 229, 208, 0.88);
  border-bottom-color: rgba(241, 229, 208, 0.14) !important;
}
.content-section h3 { color: var(--cream) !important; }
.content-section p { color: rgba(241, 229, 208, 0.82) !important; }
.content-section ul li,
.content-section ol li { color: rgba(241, 229, 208, 0.82); }
.content-section strong { color: var(--cream); }

.deliverable-list li {
  color: rgba(241, 229, 208, 0.82) !important;
  border-bottom-color: rgba(241, 229, 208, 0.1) !important;
}
.deliverable-list li strong { color: var(--cream); }
.deliverable-list li::before { background: var(--accent-warm) !important; }

/* Tier page hero price stack */
.hero-price { color: var(--cream) !important; }
.hero-price-note { color: rgba(241, 229, 208, 0.6) !important; }
.popular-badge {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}

/* Breadcrumb on dark */
.breadcrumb,
.breadcrumb a {
  color: rgba(241, 229, 208, 0.65);
}
.breadcrumb a:hover { color: var(--accent-warm); }
.breadcrumb .sep { color: rgba(241, 229, 208, 0.3); }

/* Related reads block on dark */
.related-reads-title { color: var(--accent-warm); }
.related-link {
  background: rgba(241, 229, 208, 0.04);
  border-color: rgba(241, 229, 208, 0.12) !important;
  color: var(--cream);
}
.related-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--cream);
}

/* Email capture block on dark */
.email-capture {
  background: rgba(241, 229, 208, 0.04);
  border-color: rgba(241, 229, 208, 0.14) !important;
}
.email-capture h3 { color: var(--cream) !important; }
.email-capture p { color: rgba(241, 229, 208, 0.75) !important; }
.email-form input[type="email"] {
  background: rgba(241, 229, 208, 0.06);
  border-color: rgba(241, 229, 208, 0.22);
  color: var(--cream);
}
.email-form input[type="email"]::placeholder { color: rgba(241, 229, 208, 0.45); }

/* Comparison tables on dark */
.comparison-table { background: transparent; color: var(--cream); }
.comparison-table th,
.comparison-table td {
  border-color: rgba(241, 229, 208, 0.12) !important;
  color: rgba(241, 229, 208, 0.82);
}
.comparison-table th { color: var(--cream); }
.comparison-table .highlight-row { background: rgba(45, 138, 138, 0.12); }
.comparison-table .highlight-row .tool-name { color: var(--accent-warm); }

/* Hero variant — if a page wants a CREAM hero, use .hero.hero-cream */
.hero.hero-cream {
  background: var(--stone);
  color: var(--ink);
}
.hero.hero-cream h1 { color: var(--ink); }
.hero.hero-cream h1 em { color: var(--accent); }
.hero.hero-cream .hero-body { color: var(--ink-soft) !important; }
.hero.hero-cream .hero-eyebrow { color: var(--accent) !important; }
.hero.hero-cream .hero-meta { color: var(--ink-muted) !important; border-top-color: rgba(26, 22, 18, 0.14) !important; }