/* ========== Dark theme: Gym Charcoal (soft graphite, not pure black) ==========
   Fitness UI standard (Material #121212 baseline, Apple/Nike elevated charcoal).
   Tokens: canvas → raised → surface (interactive elevation).
*/
html[data-theme="dark"] {
    --sj-canvas: #161616;
    --sj-raised: #1E1E1E;
    --sj-surface: #2A2A2A;
    --sj-deep: #121212;
    --sj-mid: #181818;
    --sj-hover: #333333;
    --sj-border: #3A3A3A;
}

[data-theme="dark"] body,
[data-theme="dark"] .bg-\[\#0D0D0D\] { background-color: var(--sj-canvas) !important; }
[data-theme="dark"] .bg-\[\#0D0D0D\]\/80 { background-color: rgba(22, 22, 22, 0.88) !important; }
[data-theme="dark"] .bg-\[\#1A1A1A\] { background-color: var(--sj-raised) !important; }
[data-theme="dark"] .bg-\[\#1A1A1A\]\/30 { background-color: rgba(30, 30, 30, 0.5) !important; }
[data-theme="dark"] .bg-\[\#252525\] { background-color: var(--sj-surface) !important; }
[data-theme="dark"] .bg-\[\#050505\] { background-color: var(--sj-deep) !important; }

[data-theme="dark"] .from-\[\#0D0D0D\] {
    --tw-gradient-from: var(--sj-canvas) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(22, 22, 22, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-theme="dark"] .via-\[\#0D0D0D\]\/60 {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(22, 22, 22, 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
[data-theme="dark"] .to-\[\#1A1A1A\] { --tw-gradient-to: var(--sj-raised) var(--tw-gradient-to-position); }
[data-theme="dark"] .via-\[\#1A1A1A\] {
    --tw-gradient-to: rgba(30, 30, 30, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--sj-raised) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
[data-theme="dark"] .to-\[\#111\] { --tw-gradient-to: var(--sj-raised) var(--tw-gradient-to-position); }
[data-theme="dark"] .from-\[\#1a1a1a\] {
    --tw-gradient-from: var(--sj-raised) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(30, 30, 30, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-theme="dark"] .via-\[\#0f0f0f\] {
    --tw-gradient-to: rgba(24, 24, 24, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--sj-mid) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
[data-theme="dark"] .to-\[\#050505\] { --tw-gradient-to: var(--sj-deep) var(--tw-gradient-to-position); }

[data-theme="dark"] #insights,
[data-theme="dark"] .story-block,
[data-theme="dark"] #how-it-works,
[data-theme="dark"] #faq,
[data-theme="dark"] #cdn-section,
[data-theme="dark"] #testimonials,
[data-theme="dark"] #nutrition,
[data-theme="dark"] #footer { background-color: var(--sj-canvas) !important; }
[data-theme="dark"] .story-block:nth-child(even),
[data-theme="dark"] #problem,
[data-theme="dark"] #wellness { background-color: var(--sj-raised) !important; }
[data-theme="dark"] .story-media img { background-color: var(--sj-surface) !important; }

/* Interactive elevation: cards/inputs sit on surface, not raised (mirror light white cards) */
[data-theme="dark"] #faq .search-input,
[data-theme="dark"] #faq .faq-section,
[data-theme="dark"] #faq .faq-no-results,
[data-theme="dark"] #lang-select,
[data-theme="dark"] .editorial-split-media-card,
[data-theme="dark"] #nutrition .nutrition-overlay-detect,
[data-theme="dark"] #footer .bg-\[\#1A1A1A\] { background-color: var(--sj-surface) !important; }
[data-theme="dark"] #faq .faq-section-header:hover,
[data-theme="dark"] #faq .faq-question-header:hover { background-color: var(--sj-hover) !important; }
[data-theme="dark"] #faq .faq-expand-icon { background-color: var(--sj-hover) !important; }

[data-theme="dark"] #cta {
    background: linear-gradient(180deg, var(--sj-raised) 0%, var(--sj-canvas) 100%) !important;
}
[data-theme="dark"] #cta-wellness {
    background: linear-gradient(to bottom right, var(--sj-raised), var(--sj-mid), var(--sj-deep)) !important;
}
[data-theme="dark"] .hero-status-pill {
    background-color: var(--sj-surface);
    border-color: var(--sj-border);
}

/* ========== Main Features pill (all themes) ========== */
/* Dark mode: pumpkin tint + soft orange text */
#main-features-pill { background-color: rgba(234,88,12,0.28) !important; }
#main-features-pill .text-fresh-green-light,
#main-features-pill .text-fresh-green-aa,
#main-features-pill .text-green-dark,
#main-features-pill .text-vibrant-orange-aa,
#main-features-pill .text-orange-dark { color: #FB923C !important; }

/* Solution cards in #pain-solutions */
#pain-solutions .text-fresh-green-aa,
#pain-solutions .text-vibrant-orange-aa {
    color: #FB923C !important;
}
#pain-solutions .bg-light-green,
#pain-solutions .bg-light-orange {
    background-color: rgba(234, 88, 12, 0.15) !important;
}

/* Hero status pill + Problem/Solution pill (all locales; not in compiled tailwind.css) */
.hero-status-pill {
    /* Always a dark capsule (even in light) — brand contrast chip */
    background-color: #2A2A2A;
    border: 1px solid #333333;
}
.hero-status-pill__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background-color: #ea580c;
}
.hero-status-pill__text {
    color: #d1d1d1;
}

/* ========== Hero 2 (#hero-2): swappable orange accents (CSS variables + optional blue presets) ========== */
/*
  Usage (index.html): wrap the “Problems We Focus On” + #pain-solutions sections in:
    <div id="hero-2" class="hero-2"> … </div>
  To try blues, add one modifier on the same element, e.g.:
    <div id="hero-2" class="hero-2 hero-2--blue-a"> … </div>
  Presets: hero-2--blue-a (cobalt/sky), hero-2--blue-b (cyan/ice), hero-2--blue-c (navy/slate).
*/
#hero-2 {
    /* Problem quote accent: cool slate-400 steel — clinical, factual (premium sport aesthetic) */
    --hero2-pain: #94A3B8;
    --hero2-pain-bg: rgba(148, 163, 184, 0.10);
    /* Light-mode equivalents */
    --hero2-pain-light: #475569;
    --hero2-pain-bg-light: rgba(71, 85, 105, 0.10);
}

#hero-2 .hero-2-pain-accent {
    color: var(--hero2-pain) !important;
}

#hero-2 .bg-light-orange {
    background-color: var(--hero2-pain-bg) !important;
}

#hero-2.hero-2--blue-a {
    --hero2-gradient-start: #122046;
    --hero2-gradient-mid: #1a3257;
    --hero2-gradient-end: #93c5fd;
    --hero2-pain: #47658b;
    --hero2-pain-bg: rgba(140, 155, 180, 0.22);
    --hero2-pain-light: #ced2de;
    --hero2-pain-bg-light: rgba(176, 186, 202, 0.18);
}

#hero-2.hero-2--blue-b {
    --hero2-gradient-start: #0e7490;
    --hero2-gradient-mid: #22d3ee;
    --hero2-gradient-end: #e0f2fe;
    --hero2-pain: #38bdf8;
    --hero2-pain-bg: rgba(14, 165, 233, 0.22);
    --hero2-pain-light: #0369a1;
    --hero2-pain-bg-light: rgba(14, 165, 233, 0.18);
}

#hero-2.hero-2--blue-c {
    --hero2-gradient-start: #1e3a8a;
    --hero2-gradient-mid: #2563eb;
    --hero2-gradient-end: #bfdbfe;
    --hero2-pain: #7dd3fc;
    --hero2-pain-bg: rgba(37, 99, 235, 0.22);
    --hero2-pain-light: #1e40af;
    --hero2-pain-bg-light: rgba(37, 99, 235, 0.18);
}

/* ========== Light theme: Athletic Mist (soft concrete, not pure white) ==========
   Mirrors dark Gym Charcoal. Tokens: canvas → raised → surface.
   --sj-hover is ≥1 step darker than surface/raised for visible feedback.
*/
html[data-theme="light"] {
    --sj-canvas: #F7F7F7;
    --sj-raised: #EEEEEE;
    --sj-surface: #FFFFFF;
    --sj-deep: #E4E4E4;
    --sj-mid: #EBEBEB;
    --sj-hover: #E4E4E4;
    --sj-ink: #1A1A1A;
    --sj-muted: #6B7280;
}

/* ========== Light theme overrides ========== */
[data-theme="light"] body,
[data-theme="light"] .bg-\[\#0D0D0D\] { background-color: var(--sj-canvas) !important; color: var(--sj-ink); }
[data-theme="light"] .bg-\[\#0D0D0D\]\/80 { background-color: rgba(247,247,247,0.92) !important; }
[data-theme="light"] .bg-\[\#1A1A1A\] { background-color: var(--sj-raised) !important; }
[data-theme="light"] .bg-\[\#1A1A1A\]\/30 { background-color: rgba(238,238,238,0.55) !important; }
[data-theme="light"] .bg-\[\#252525\] { background-color: var(--sj-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-theme="light"] .bg-\[\#050505\] { background-color: var(--sj-deep) !important; }
[data-theme="light"] .text-white { color: var(--sj-ink) !important; }
[data-theme="light"] .text-white\/80 { color: rgba(26,26,26,0.8) !important; }
[data-theme="light"] .text-white\/90 { color: rgba(26,26,26,0.9) !important; }
[data-theme="light"] .text-gray-300 { color: #4B5563 !important; }
[data-theme="light"] .text-gray-400 { color: var(--sj-muted) !important; }
[data-theme="light"] #hero .hero-subtitle { color: var(--sj-muted) !important; }
[data-theme="light"] .text-gray-muted-aa { color: var(--sj-muted) !important; }
[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .border-\[\#2A2A2A\] { border-color: #E0E0E0 !important; }
[data-theme="light"] .glass-card { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .card-hover:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
[data-theme="light"] .hero-gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: #c2410c !important;
}

/* Hero 1: "Improve Your Performance." — solid amber in light mode (gradient clips poorly on mist) */
[data-theme="light"] .hero-improve-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: #D97706 !important;
}

[data-theme="light"] .gradient-text { background: linear-gradient(135deg, var(--sj-ink) 0%, #4B5563 100%) !important; }
[data-theme="light"] .from-\[\#0D0D0D\] { --tw-gradient-from: var(--sj-canvas) var(--tw-gradient-from-position); --tw-gradient-to: rgba(247,247,247,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
[data-theme="light"] .via-\[\#0D0D0D\]\/60 { --tw-gradient-from: var(--sj-canvas) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(247,247,247,.6) var(--tw-gradient-via-position), var(--tw-gradient-to); }
[data-theme="light"] .to-\[\#1A1A1A\] { --tw-gradient-to: var(--sj-raised) var(--tw-gradient-to-position); }
[data-theme="light"] .via-\[\#1A1A1A\] { --tw-gradient-to: rgba(238,238,238,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--sj-raised) var(--tw-gradient-via-position), var(--tw-gradient-to); }
[data-theme="light"] .to-\[\#111\] { --tw-gradient-to: var(--sj-raised) var(--tw-gradient-to-position); }
[data-theme="light"] .from-\[\#1a1a1a\] {
    --tw-gradient-from: var(--sj-raised) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(238,238,238,0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-theme="light"] .via-\[\#0f0f0f\] {
    --tw-gradient-to: rgba(235,235,235,0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--sj-mid) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
[data-theme="light"] .to-\[\#050505\] { --tw-gradient-to: var(--sj-deep) var(--tw-gradient-to-position); }
[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.05) !important; }
[data-theme="light"] #lang-select { background-color: var(--sj-surface) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--sj-ink) !important; }
[data-theme="light"] .shadow-green-900\/10 { --tw-shadow-color: rgba(15,76,58,0.15); }
[data-theme="light"] .theme-toggle-btn { color: var(--sj-muted) !important; }
[data-theme="light"] .theme-toggle-btn:hover { color: var(--sj-ink) !important; background-color: var(--sj-hover) !important; }
/* Light mode: remove the top "smoke" fade on the hero shots (images 2 & 3) only.
   The shared .hero-bg-mask masks all three images together, so we drop the top-edge
   gradient there and re-apply it to the base photo alone — keeping its blend while
   leaving the app screenshots crisp at the top. Desktop only (mobile keeps its mask). */
@media (min-width: 768px) {
    [data-theme="light"] #hero .hero-bg-mask {
        -webkit-mask-image:
            linear-gradient(to top right, transparent 0%, transparent 18%, rgba(0,0,0,0.35) 25%, black 55%, black 100%),
            linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 6%, black 28%, black 100%);
        mask-image:
            linear-gradient(to top right, transparent 0%, transparent 18%, rgba(0,0,0,0.35) 25%, black 55%, black 100%),
            linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 6%, black 28%, black 100%);
    }
    [data-theme="light"] #hero .hero-bg-wrap .hero-bg-img--base {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 6%, black 28%, black 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 6%, black 28%, black 100%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
}
/* Hero status pill + Problem/Solution pill: dark capsule + orange dot on light theme */
[data-theme="light"] #hero .hero-content .hero-status-pill,
[data-theme="light"] #hero-section-2.hero-status-pill { background-color: #1E1E1E !important; border-color: #333333 !important; }
[data-theme="light"] #hero .hero-content .hero-status-pill__text,
[data-theme="light"] #hero-section-2 .hero-status-pill__text { color: #d1d1d1 !important; }
[data-theme="light"] #hero .hero-content .hero-status-pill__dot,
[data-theme="light"] #hero-section-2 .hero-status-pill__dot { background-color: #ea580c !important; }
/* Main Features pill: light mode – subtle pumpkin tint + dark orange text (WCAG AA on mist) */
[data-theme="light"] #main-features-pill { background-color: rgba(234,88,12,0.14) !important; }
[data-theme="light"] #main-features-pill .text-fresh-green-light,
[data-theme="light"] #main-features-pill .text-fresh-green-aa,
[data-theme="light"] #main-features-pill .text-green-dark,
[data-theme="light"] #main-features-pill .text-vibrant-orange-aa,
[data-theme="light"] #main-features-pill .text-orange-dark { color: #c2410c !important; }

/* Orange pills (Hero): solid #ea580c, white text */
[data-theme="light"] #hero div.bg-vibrant-orange { background-color: #ea580c !important; }
[data-theme="light"] #hero div.bg-vibrant-orange span { color: #FFFFFF !important; }
[data-theme="light"] #hero-section-2 .text-orange-dark { color: #c2410c !important; }
[data-theme="light"] #pain-solutions [style*="color: #FFA07A"] { color: #c2410c !important; }
[data-theme="light"] #pain-solutions .bg-light-orange { background-color: rgba(234,88,12,0.15) !important; }
[data-theme="light"] #hero-2 .hero-2-pain-accent { color: var(--hero2-pain-light) !important; }
[data-theme="light"] #hero-2 .bg-light-orange { background-color: var(--hero2-pain-bg-light) !important; }
[data-theme="light"] #pain-solutions .text-fresh-green-light,
[data-theme="light"] #pain-solutions .text-vibrant-orange-aa { color: #c2410c !important; }
[data-theme="light"] #pain-solutions .text-fresh-green-aa { color: #c2410c !important; }
[data-theme="light"] #pain-solutions .bg-light-green,
[data-theme="light"] #pain-solutions .bg-light-orange { background-color: rgba(234,88,12,0.12) !important; }
[data-theme="light"] .pain-swipe-text { color: var(--sj-muted) !important; }
[data-theme="light"] .pain-swipe-btn { color: #4B5563 !important; background-color: var(--sj-mid) !important; }
[data-theme="light"] .pain-swipe-btn:hover { background-color: var(--sj-hover) !important; }
[data-theme="light"] .pain-dot-active { background-color: #4B5563 !important; }
[data-theme="light"] .pain-dot-inactive { background-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .pain-dot:hover { background-color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .border-white\/30 { border-color: rgba(0,0,0,0.18) !important; }

/* Section surfaces — Athletic Mist hierarchy */
[data-theme="light"] #insights,
[data-theme="light"] .story-block,
[data-theme="light"] #how-it-works,
[data-theme="light"] #faq,
[data-theme="light"] #cdn-section,
[data-theme="light"] #testimonials,
[data-theme="light"] #nutrition,
[data-theme="light"] #footer { background-color: var(--sj-canvas) !important; }
[data-theme="light"] .story-block:nth-child(even),
[data-theme="light"] #problem,
[data-theme="light"] #wellness { background-color: var(--sj-raised) !important; }
[data-theme="light"] .story-media img { background-color: var(--sj-mid) !important; }
[data-theme="light"] #faq .search-input,
[data-theme="light"] #faq .faq-section,
[data-theme="light"] #faq .faq-no-results { background-color: var(--sj-surface) !important; }
/* Hover ≥1 step darker than white surface (and readable on raised parents) */
[data-theme="light"] #faq .faq-section-header:hover,
[data-theme="light"] #faq .faq-question-header:hover { background: var(--sj-hover) !important; }
[data-theme="light"] #faq .faq-expand-icon { background: var(--sj-mid) !important; }

/* Problem / Why one journal */
[data-theme="light"] #problem {
    background-color: var(--sj-raised) !important;
    border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] #problem .text-white { color: var(--sj-ink) !important; }
[data-theme="light"] #problem .text-gray-400,
[data-theme="light"] #problem .problem-lead { color: var(--sj-muted) !important; }
/* Secondary CTA (cta-wellness): light gradient to match page background */
[data-theme="light"] #cta-wellness { background: linear-gradient(to bottom right, var(--sj-raised), #E8E8E8, #E0E0E0) !important; }
[data-theme="light"] #cta-wellness .text-white { color: var(--sj-ink) !important; }
[data-theme="light"] #cta-wellness .text-white\/90 { color: rgba(26,26,26,0.9) !important; }
/* Microcopy under App Store / Play buttons — text-gray-200 is illegible on light gradient */
[data-theme="light"] #cta-wellness .text-gray-200 { color: #4B5563 !important; }
/* Final CTA: light theme — match page neutrals (no colorful gradient) */
[data-theme="light"] #cta {
    background: linear-gradient(to bottom, var(--sj-raised), var(--sj-canvas)) !important;
    border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] #cta .text-white { color: var(--sj-ink) !important; }
[data-theme="light"] #cta .text-gray-400 { color: var(--sj-muted) !important; }
[data-theme="light"] #cta a.bg-white.text-black { border: 1px solid #E0E0E0 !important; }
[data-theme="light"] #footer .bg-\[\#1A1A1A\] { background-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] #footer .hover\:bg-fresh-green:hover { background-color: #ea580c !important; }
[data-theme="light"] #footer .hover\:bg-vibrant-orange:hover { background-color: #ea580c !important; }

/* Accent hover utilities (privacy/terms pages; not in compiled Tailwind) */
.hover\:text-vibrant-orange:hover { color: #ea580c; }
.hover\:bg-vibrant-orange:hover { background-color: #ea580c; }
[data-theme="light"] #footer a.w-10.h-10 { color: #4B5563 !important; }
[data-theme="light"] #footer a.w-10.h-10:hover { color: #FFFFFF !important; }
[data-theme="light"] .bg-light-orange .text-orange-dark { color: #c2410c !important; }
[data-theme="light"] .border-green-900\/30,
[data-theme="light"] .border-orange-900\/30 { border-color: rgba(234,88,12,0.25) !important; }
[data-theme="light"] #footer .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }

/* Blog index: "Back to home" hover — orange accent (matches blog title / Read more), dark mode only */
[data-theme="dark"] .blog-back-link:hover {
    color: #ea580c !important;
}

/* Footer brand tagline: subtle nudge right (below logo + name row) */
footer .grid > div:first-child > p.text-gray-400.mb-6 {
    padding-left: 0.75rem;
}
html.dir-rtl footer .grid > div:first-child > p.text-gray-400.mb-6 {
    padding-left: 0;
    padding-right: 0.75rem;
}

/* Footer horizontal padding: match root index.html (blog pages use tighter .section-inner for content) */
#footer .section-inner {
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    #footer .section-inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 768px) {
    #footer .section-inner {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}
@media (min-width: 1024px) {
    #footer .section-inner {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* Mobile hero: top-align brand + CTAs under title (bullet-proof vs cached Tailwind) */
@media (max-width: 767px) {
    #hero {
        display: flex !important;
        flex-direction: column !important;
    }
    #hero .hero-grid {
        display: contents !important;
    }
    #hero .hero-content {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        order: 1 !important;
        padding-top: 0.75rem !important;
    }
    #hero .hero-content > p {
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important;
    }
    #hero .hero-content h1 {
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    #hero .hero-secondary-col {
        order: 2 !important;
    }
    #hero .hero-secondary-col .hero-secondary-top {
        display: flex !important;
        flex-direction: column !important;
    }
    #hero .hero-cta-buttons {
        order: 1 !important;
    }
    #hero .hero-tagline-block {
        order: 2 !important;
    }
    #hero .hero-bg-wrap {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        order: 3 !important;
        width: 100% !important;
        height: 15rem !important;
        margin-top: 0.75rem !important;
    }
}

/* ========== Header logos (theme swap) ========== */
.header-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}
@media (min-width: 640px) {
    .header-logo { height: 2.75rem; max-width: 12.5rem; }
}
[data-theme="light"] .header-logo--dark { display: none !important; }
[data-theme="dark"] .header-logo--light { display: none !important; }

/* Header bar — soft editorial bar */
#header {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
[data-theme="light"] #header {
    background-color: rgba(255, 249, 245, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(12px);
}
[data-theme="dark"] #header {
    background-color: rgba(22, 22, 22, 0.88) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Header CTA — orange pill */
.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    background-color: #ea580c;
    color: #FFFFFF !important;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.header-cta:hover {
    background-color: #c2410c;
    color: #FFFFFF !important;
}
@media (max-width: 639px) {
    .header-cta {
        padding: 0.45rem 0.65rem;
        font-size: 0.6875rem;
        max-width: 6.75rem;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }
}

/* Promo ticker: Safari/iOS compositing (fixed bar + overflow-x on body) */
#site-top-bar,
.promo-ticker-viewport {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.promo-ticker-track {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Promo ticker soft charcoal (both themes) */
[data-theme="dark"] .promo-ticker,
[data-theme="light"] .promo-ticker {
    background-color: #2A2A2A !important;
    color: #FFFFFF !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] .promo-ticker .promo-ticker-item {
    color: #FFFFFF !important;
}

/* ========== Hero editorial (pastel peach + split) ========== */
#hero.hero--editorial {
    background: linear-gradient(165deg, rgba(234, 88, 12, 0.1) 0%, #161616 48%, #161616 100%);
}
[data-theme="light"] #hero.hero--editorial {
    background: linear-gradient(165deg, #FEECE2 0%, #FFF9F5 42%, #F7F7F7 100%) !important;
}
#hero.hero--editorial .hero-bg-wrap { display: none !important; }
#hero.hero--editorial .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    position: relative;
    z-index: 10;
    min-width: 0;
}
@media (min-width: 768px) {
    #hero.hero--editorial .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2.5rem 3rem;
        min-height: min(72vh, 640px);
    }
}
#hero.hero--editorial .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: center !important;
    text-align: left;
    order: 1;
    min-width: 0;
}
#hero.hero--editorial .hero-brand {
    font-family: 'Syne', 'SF Pro Display', sans-serif;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    margin: 0 0 1rem;
    color: #FFFFFF;
    font-size: clamp(2.75rem, 8vw, 5.5rem);
}
[data-theme="light"] #hero.hero--editorial .hero-brand,
[data-theme="light"] #hero.hero--editorial .hero-brand span {
    color: #1A1A1A !important;
}
#hero.hero--editorial .hero-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fb923c;
    border-left: none !important;
    padding-left: 0 !important;
    margin: 0 0 1.25rem !important;
    max-width: 30rem;
}
[data-theme="light"] #hero.hero--editorial .hero-eyebrow {
    color: #c2410c !important;
}
#hero.hero--editorial .hero-tagline {
    font-family: 'Syne', 'SF Pro Display', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 1rem;
    max-width: 30rem !important;
    text-align: left;
    font-size: clamp(1.5rem, 4.2vw, 2.35rem) !important;
}
#hero.hero--editorial .hero-tagline .hero-tagline-accent,
#hero.hero--editorial .hero-tagline .text-vibrant-orange {
    color: #ea580c !important;
    font-style: italic;
    font-weight: 700;
}
[data-theme="light"] #hero.hero--editorial .hero-tagline .text-white {
    color: #1A1A1A !important;
}
#hero.hero--editorial .hero-subtitle {
    text-align: left !important;
    align-self: flex-start !important;
    max-width: 30rem !important;
    margin: 0 0 1.75rem !important;
    color: #9ca3af;
}
[data-theme="light"] #hero.hero--editorial .hero-subtitle {
    color: #4B5563 !important;
}
#hero.hero--editorial .hero-cta-buttons {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    order: unset !important;
}
#hero.hero--editorial .hero-cta-buttons .hero-btn {
    width: auto !important;
    min-width: 0 !important;
    border-radius: 0.75rem;
}
#hero.hero--editorial .hero-visual {
    position: relative;
    width: 100%;
    min-height: 220px;
    border-radius: 1.25rem;
    overflow: hidden;
    order: 2;
}
#hero.hero--editorial .hero-visual-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    object-position: center right;
}
@media (min-width: 768px) {
    #hero.hero--editorial .hero-visual {
        min-height: 420px;
        height: min(64vh, 560px);
        border-radius: 1.5rem;
    }
    #hero.hero--editorial .hero-visual-img {
        min-height: 100%;
        height: 100%;
    }
}
@media (max-width: 767px) {
    #hero.hero--editorial {
        display: flex !important;
        flex-direction: column;
    }
    #hero.hero--editorial .hero-grid {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #hero.hero--editorial .hero-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1.5rem !important;
    }
    #hero.hero--editorial .hero-visual {
        order: 3;
        min-height: 240px;
        max-height: 320px;
    }
    #hero.hero--editorial .hero-cta-buttons {
        width: 100% !important;
    }
    #hero.hero--editorial .hero-cta-buttons .hero-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    #hero.hero--editorial .hero-tagline { margin-top: 0 !important; }
}

/* ========== Store CTA buttons (App Store / Google Play) ========== */
.sj-store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.65rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
}
.sj-store-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}
.sj-store-btn__label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.95;
}
.sj-store-btn__label--upper {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sj-store-btn__name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.sj-store-btn i {
    font-size: 1.375rem;
    flex-shrink: 0;
}
.sj-store-btn--wide {
    min-width: 12.5rem;
}
.sj-store-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
}
.sj-store-btn--outline:hover,
.sj-store-btn--outline:focus-visible {
    background-color: #ea580c;
    border-color: #ea580c;
    color: #fff;
}
.sj-store-btn--outline:active {
    background-color: #f97316;
    border-color: #f97316;
    color: #fff;
}
.sj-store-btn--icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    min-width: 0;
}
.sj-store-btn--icon i {
    font-size: 1.25rem;
}
.sj-store-btn--icon:hover,
.sj-store-btn--icon:focus-visible,
.sj-store-btn--icon:active {
    transform: translateY(-1px);
}
[data-theme="light"] .sj-store-btn--outline {
    border-color: rgba(26, 26, 26, 0.35);
    color: var(--sj-ink);
}
[data-theme="light"] .sj-store-btn--outline:hover,
[data-theme="light"] .sj-store-btn--outline:focus-visible {
    background-color: #ea580c;
    border-color: #ea580c;
    color: #fff;
}
[data-theme="light"] .sj-store-btn--outline:active {
    background-color: #f97316;
    border-color: #f97316;
    color: #fff;
}