/* ============================================
   JUMPAI GLOBAL DESIGN SYSTEM
   Editorial: ink + warm gray paper + terracotta
   Fonts: Fraunces (display) + Inter (body)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..800,0..100&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Editorial design tokens */
    --ink: #1a1d29;
    --ink-soft: #2a2f42;
    --ink-muted: #4a4a52;
    --paper: #d8d4cc;
    --paper-warm: #cdc8be;
    --paper-tint: #c2bcb0;
    --rule: #aea69b;
    --accent: #c2410c;
    --accent-dark: #9c3308;
    --accent-soft: #efd6c8;

    /* Legacy tokens — re-mapped to new system so older inline CSS picks up the new look */
    --primary: #c2410c;
    --secondary: #1a1d29;
    --dark: #1a1d29;
    --light: #d8d4cc;

    /* Brand Scale (re-mapped to warm earth tones) */
    --brand-50: #f3ede4;
    --brand-100: #e7dfd2;
    --brand-200: #cdc8be;
    --brand-500: #c2410c;
    --brand-600: #9c3308;
    --brand-700: #7a2806;
    --brand-900: #4a1602;

    /* Gray Scale (warm grays matching paper) */
    --gray-50: #d8d4cc;
    --gray-100: #cdc8be;
    --gray-200: #c2bcb0;
    --gray-300: #aea69b;
    --gray-400: #8c8478;
    --gray-500: #5a5a52;
    --gray-600: #4a4a42;
    --gray-700: #34342e;
    --gray-800: #1e1e1a;
    --gray-900: #1a1d29;

    /* Success & Error — keep but slightly muted */
    --success-500: #4d8a6a;
    --success-600: #3d6f55;
    --error-500: #b04030;
    --error-600: #8a3024;

    /* Gradients — all collapsed to brand */
    --gradient-1: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%);
    --gradient-2: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%);
    --gradient-3: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%);
    --gradient-primary: linear-gradient(135deg, #c2410c 0%, #9c3308 100%);
    --gradient-brand: linear-gradient(135deg, #c2410c 0%, #9c3308 100%);
    --gradient-dark: linear-gradient(135deg, #0f1219 0%, #1a1d29 100%);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

    /* Spacing (8px grid system) */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 2rem;     /* 32px */
    --space-xl: 3rem;     /* 48px */
    --space-2xl: 4rem;    /* 64px */
    --space-3xl: 5rem;    /* 80px */

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ============================================
   BASE RESETS & TYPOGRAPHY
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings — Fraunces serif display */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}

h3 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 600;
}

h4 {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Paragraphs & Links */
p {
    margin-bottom: 1rem;
    max-width: 65ch;
}

a {
    color: var(--accent);
    transition: color 0.25s ease;
}

a:hover {
    color: var(--accent-dark);
}

/* Lists */
ul, ol {
    margin-bottom: 1rem;
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/* Primary Button - Gradient */
.btn-primary,
.cta-button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary::before,
.cta-button.primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover,
.cta-button.primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.5);
}

.btn-primary:hover::before,
.cta-button.primary:hover::before {
    opacity: 1;
}

.btn-primary:active,
.cta-button.primary:active {
    transform: translateY(-2px) scale(1.01);
}

/* Secondary Button - Border */
.btn-secondary,
.cta-button.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    cursor: pointer;
}

.btn-secondary:hover,
.cta-button.secondary:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* Tertiary Button - Text only */
.btn-tertiary,
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.btn-tertiary::after,
.btn-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.btn-tertiary:hover::after,
.btn-text:hover::after {
    width: 100%;
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

.card,
.product-card,
.feature-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card:hover,
.product-card:hover,
.feature-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-2xl);
    border-color: var(--brand-200);
}

/* ============================================
   NAVIGATION
   ============================================ */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

nav.scrolled {
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    text-decoration: none;
    background: linear-gradient(to right, #fff, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.nav-logo:hover {
    filter: brightness(1.2);
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
    list-style: none;
}

.nav-menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu a:hover {
    color: white;
}

.nav-cta {
    background: var(--gradient-primary);
    color: white !important;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
}

.nav-cta::after {
    display: none;
}

/* Mobile Navigation */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Account for fixed nav */
body {
    padding-top: 70px;
}

/* ============================================
   SECTION LAYOUTS
   ============================================ */

.section {
    padding: var(--space-3xl) 2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.3rem;
    color: var(--gray-500);
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   UTILITIES
   ============================================ */

.text-center {
    text-align: center;
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.bg-light {
    background: var(--light);
}

.bg-white {
    background: white;
}

.bg-dark {
    background: var(--dark);
    color: white;
}

/* Spacing utilities */
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 1024px) {
    .nav-menu {
        gap: 1.5rem;
    }

    .nav-menu a {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }

    nav {
        padding: 0.8rem 1rem;
    }

    .nav-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(15, 23, 42, 0.98);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        transition: left 0.3s ease;
        align-items: flex-start;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu a {
        font-size: 1.2rem;
        width: 100%;
        padding: 0.5rem 0;
    }

    .nav-cta {
        width: 100%;
        text-align: center;
        padding: 0.8rem 1.5rem;
    }

    h1 {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    h2 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .section {
        padding: var(--space-2xl) 1rem;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states */
*:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   LEGACY OVERRIDES
   Catch inline styles & old palettes on pages
   that haven't been hand-converted yet.
   ============================================ */

body, html {
    background: var(--paper) !important;
    color: var(--ink);
}

/* Display headlines → Fraunces serif */
h1, .hero-title, .page-title, .blog-title {
    font-family: var(--font-display) !important;
    font-weight: 500;
    font-style: italic;
}
h2, h3, .section-title, .card-title, .mission-title, .cta-title {
    font-family: var(--font-display) !important;
    font-weight: 600;
}

/* Old purple/indigo gradients → ink dark */
[style*="#667eea"],
[style*="#764ba2"],
[style*="#6366f1"],
[style*="#4f46e5"],
[style*="#8b5cf6"],
[style*="#4338ca"],
[style*="#312e81"],
[style*="rgba(99, 102, 241"],
[style*="rgba(99,102,241"] {
    background-image: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
}

/* Old pink + cyan gradients used in legacy product cards → ink.
   NOTE: #3b82f6 / #2563eb are common text/border colors too, so we only catch
   them when used as a gradient (i.e., inside a linear-gradient() declaration). */
[style*="#f093fb"],
[style*="#f5576c"],
[style*="#4facfe"],
[style*="#00f2fe"] {
    background-image: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
}
[style*="linear-gradient"][style*="#3b82f6"],
[style*="linear-gradient"][style*="#2563eb"] {
    background-image: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
}

/* Inline blue text → ink.  These two colors get used for headings and link copy. */
[style*="color: #3b82f6"],
[style*="color:#3b82f6"],
[style*="color: #2563eb"],
[style*="color:#2563eb"] { color: var(--accent) !important; }

/* Light slate inline backgrounds → warm paper */
[style*="background: #f8fafc"],
[style*="background:#f8fafc"],
[style*="background: #f1f5f9"],
[style*="background:#f1f5f9"],
[style*="background: #eff6ff"],
[style*="background:#eff6ff"] {
    background: var(--paper) !important;
    border-color: var(--rule) !important;
}

/* Inline blue left-borders (related-articles, callouts) → ink/accent */
[style*="border-left: 4px solid #3b82f6"],
[style*="border-left:4px solid #3b82f6"],
[style*="border-left: 4px solid #2563eb"] {
    border-left-color: var(--accent) !important;
}

/* Inline ink text colors used in related-articles snippets → keep ink */
[style*="color: #1e293b"],
[style*="color:#1e293b"],
[style*="color: #1f2937"],
[style*="color:#1f2937"] { color: var(--ink) !important; }

/* Common dark hero/header backgrounds → unified ink */
header[style*="linear-gradient"],
.blog-header,
.page-header[style*="linear-gradient"] {
    background: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
    color: var(--paper) !important;
}

/* CTA buttons that used old indigo → terracotta */
.btn-primary,
.cta-button.primary,
.read-more,
button.cta-button.primary,
a.cta-button.primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(194, 65, 12, 0.32) !important;
}
.btn-primary:hover,
.cta-button.primary:hover,
.read-more:hover {
    background: var(--accent-dark) !important;
    box-shadow: 0 12px 28px rgba(194, 65, 12, 0.42) !important;
}

/* Secondary CTA — match context: light outline on dark, ink outline elsewhere via .on-light */
.cta-button.secondary,
.btn-secondary {
    color: var(--paper) !important;
    border: 2px solid rgba(216, 212, 204, 0.55) !important;
    background: transparent !important;
}
.cta-button.secondary:hover,
.btn-secondary:hover {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-color: var(--paper) !important;
}
.cta-button.secondary.on-light {
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}
.cta-button.secondary.on-light:hover {
    background: var(--ink) !important;
    color: var(--paper) !important;
}

/* Nav CTA on any page */
.nav-cta {
    background: var(--accent) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.25) !important;
}
.nav-cta:hover { background: var(--accent-dark) !important; }

/* Card surfaces — bright cards on the gray paper */
.product-card,
.blog-card,
.pkg-card,
.audience-card,
details {
    background: white !important;
    border: 1px solid var(--rule) !important;
}

/* Status pills (LIVE NU / KOMMER SNART) — already redefined in index.html, also here for inline pages */
.product-card > div[style*="position: absolute"][style*="top: -10px"] {
    top: 1.2rem !important;
    right: 1.2rem !important;
    background: white !important;
    color: var(--ink) !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    background-image: none !important;
}

/* Footer */
footer { background: var(--ink) !important; color: rgba(216, 212, 204, 0.78) !important; }
footer a { color: var(--paper) !important; }
footer h3, footer h4 { color: var(--paper) !important; }

/* Mission section dark */
.mission, .cta { background: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important; }

/* Cream text on dark .cta + .mission (overrides default ink-on-light heading/subtitle colors) */
.cta, .mission { color: #f5f1e8 !important; }
.cta .cta-title, .mission .mission-title,
.cta h1, .cta h2, .cta h3,
.mission h1, .mission h2, .mission h3 { color: #f5f1e8 !important; }
.cta .cta-subtitle, .mission .mission-subtitle,
.cta p, .mission p { color: rgba(245, 241, 232, 0.85) !important; }

/* Generic legacy slate text → ink-muted */
[style*="color: #64748b"],
[style*="color:#64748b"] { color: var(--ink-muted) !important; }
[style*="color: #475569"],
[style*="color:#475569"] { color: var(--ink-muted) !important; }
[style*="color: #94a3b8"],
[style*="color:#94a3b8"] { color: var(--ink-muted) !important; }

/* Brand icon container — for any page that adopts the new icon system */
.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    background: white;
    border: 1px solid var(--rule);
    box-shadow: 0 2px 10px rgba(26, 29, 41, 0.06);
}
.brand-icon.lg { width: 64px; height: 64px; border-radius: 18px; }
.brand-icon.sm { width: 48px; height: 48px; border-radius: 14px; }
.brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Focus states */
*:focus-visible { outline-color: var(--accent); }

/* ============================================
   BLOG ARTICLE PAGE OVERRIDES
   Targets the inline-styled article templates
   under /blog/*.html so they inherit the editorial look
   ============================================ */

/* Article page body */
body { font-family: var(--font-sans) !important; color: var(--ink) !important; background: var(--paper) !important; }

/* Article header (the big colored banner at the top).
   Restricted via :has(h1) so it doesn't clobber sticky NAV elements that also use .header. */
.header:has(h1) {
    background: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
    color: var(--paper) !important;
    padding: 5rem 2rem 4rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.header:has(h1)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-image, none);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.06) brightness(0.72);
    opacity: 0.62;
    z-index: 0;
    pointer-events: none;
}
.header:has(h1) > * {
    position: relative;
    z-index: 2;
}
.header:has(h1)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, #ea7d3c 50%, var(--accent) 75%, transparent 100%);
    opacity: 0.85;
}
.header:has(h1) h1 {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: #f5f1e8 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    max-width: 900px !important;
    margin: 0 auto 1rem !important;
}
.header:has(h1) .meta {
    color: rgba(245, 241, 232, 0.78) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

/* Back link */
.back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin: 2rem !important;
    color: var(--ink) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: color 0.2s ease;
}
.back-link:hover { color: var(--accent) !important; }

/* Article body container — only when .container IS the article body itself.
   For pages where .container is just a max-width wrapper (e.g. inside .hero,
   or wrapping an <article>) we leave it transparent. */
.container:has(> .intro),
.container:has(> .tool-card),
.container:has(> .toc),
.container:has(> .table-of-contents),
.container:has(> .comparison-table),
.container:has(> .pros-cons) {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 4rem 2.5rem !important;
    background: white !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 24px rgba(26, 29, 41, 0.08) !important;
    margin-top: -3rem !important;
    position: relative !important;
    z-index: 2 !important;
}
@media (max-width: 800px) {
    .container:has(> .intro),
    .container:has(> .tool-card),
    .container:has(> .toc),
    .container:has(> .table-of-contents),
    .container:has(> .comparison-table),
    .container:has(> .pros-cons) {
        border-radius: 0 !important;
        margin-top: 0 !important;
    }
}

/* When .container is nested inside .hero (used as a max-width wrapper),
   wipe any white-card styling and inherit the hero's transparent feel. */
.hero .container,
.article-hero .container,
.header:has(h1) .container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
}

/* Default .container — just a max-width wrapper */
.container {
    max-width: 800px;
    margin: 0 auto;
}

/* Lead paragraph / intro */
.intro {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
    line-height: 1.6 !important;
    color: var(--ink) !important;
    margin-bottom: 3rem !important;
    padding: 0 0 0 1.4rem !important;
    background: transparent !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 !important;
}

/* Article headings */
.container h2 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: clamp(1.7rem, 3.2vw, 2.2rem) !important;
    margin: 3.5rem 0 1.2rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
}
.container h3 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
    margin: 2.5rem 0 1rem !important;
    letter-spacing: -0.01em !important;
}
.container h4 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: 1.15rem !important;
}

/* Article body text */
.container p, .container li {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #2a2f42 !important;
}
.container ul, .container ol { margin-left: 1.4rem !important; margin-bottom: 1.5rem !important; }
.container li { margin-bottom: 0.5rem !important; }

/* Tool / feature cards inside articles */
.tool-card,
.guide-section,
.case-section,
.method-card,
.tip-card {
    background: white !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 2px 10px rgba(26, 29, 41, 0.05) !important;
}

.tool-title,
.tool-card h3 {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
}

.tool-meta {
    background: var(--paper) !important;
    border-radius: 12px !important;
    border: 1px solid var(--rule) !important;
}
.meta-item strong { color: var(--ink-muted) !important; }
.meta-item span { color: var(--ink) !important; }

/* Badges */
.badge {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 999px !important;
    padding: 0.32rem 0.85rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}
.badge-free { background: #e7efe7 !important; color: #2d5a3a !important; border-color: #b8d2bf !important; }
.badge-paid { background: #f3e8d9 !important; color: #7a4a18 !important; border-color: #d4b58a !important; }
.badge-gdpr { background: #e0e3ea !important; color: #2a3550 !important; border-color: #b6bcc9 !important; }

/* Use-cases / pros / cons / examples — softened, on-brand */
.use-cases, .pros {
    background: #f3efe8 !important;
    border: 1px solid var(--rule) !important;
    border-radius: 12px !important;
    padding: 1.4rem 1.6rem !important;
}
.use-cases h4, .pros h4 { color: var(--ink) !important; }
.use-cases li:before { color: var(--accent) !important; }

.cons {
    background: #f7f0ec !important;
    border: 1px solid #e0c8bd !important;
    border-radius: 12px !important;
    padding: 1.4rem 1.6rem !important;
}
.cons h4 { color: var(--ink) !important; }

.example-box {
    background: #f6f1e9 !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 1.4rem 1.6rem !important;
}
.example-box h4 { color: var(--ink) !important; }
.example-prompt {
    background: white !important;
    border: 1px solid var(--rule) !important;
    border-radius: 8px !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    color: var(--ink) !important;
}

/* Comparison tables */
.comparison-table {
    border-radius: 12px !important;
    border: 1px solid var(--rule) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(26, 29, 41, 0.05) !important;
}
.comparison-table th {
    background: var(--ink) !important;
    color: var(--paper) !important;
    padding: 1rem !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}
.comparison-table td {
    padding: 0.95rem 1rem !important;
    border-bottom: 1px solid var(--rule) !important;
    color: var(--ink) !important;
}
.comparison-table tr:nth-child(even) { background: #f7f3eb !important; }

/* Article-end CTA box */
.cta-box {
    background: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
    color: var(--paper) !important;
    padding: 3rem 2.5rem !important;
    border-radius: 18px !important;
    text-align: center !important;
    margin: 4rem 0 0 !important;
    position: relative;
    overflow: hidden;
}
.cta-box h2, .cta-box h3 {
    color: #f5f1e8 !important;
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 500 !important;
}
.cta-box p { color: rgba(245, 241, 232, 0.88) !important; }
.cta-box > a, .cta-box .cta-button {
    background: var(--accent) !important;
    color: white !important;
    border-radius: 999px !important;
    padding: 0.9rem 2rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 1rem !important;
    transition: all 0.2s ease;
}
.cta-box > a:hover, .cta-box .cta-button:hover {
    background: var(--accent-dark) !important;
    transform: translateY(-2px);
}

/* Inline links inside cta-box paragraphs — readable on dark navy bg */
.cta-box p a, .cta-box li a {
    color: #f5d6c1 !important;
    text-decoration: underline !important;
    border-bottom: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.cta-box p a:hover, .cta-box li a:hover {
    color: #ffffff !important;
}

/* Inline links inside the article */
.container p a, .container li a {
    color: var(--accent) !important;
    border-bottom: 1px solid rgba(194, 65, 12, 0.4);
    text-decoration: none !important;
}
.container p a:hover, .container li a:hover {
    color: var(--accent-dark) !important;
    border-bottom-color: var(--accent-dark);
}

/* Breadcrumbs */
.breadcrumbs, nav.breadcrumbs {
    max-width: 760px !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 2rem !important;
    font-size: 0.85rem !important;
    color: var(--ink-muted) !important;
}
.breadcrumbs a { color: var(--ink-muted) !important; }
.breadcrumbs a:hover { color: var(--accent) !important; }

/* Tool hyperlinks list at top of article */
.toc, .table-of-contents {
    background: white !important;
    border: 1px solid var(--rule) !important;
    border-radius: 12px !important;
    padding: 1.5rem 1.8rem !important;
    margin: 2rem 0 !important;
}
.toc h3 { font-family: var(--font-display) !important; color: var(--ink) !important; margin-bottom: 0.8rem !important; }
.toc a { color: var(--ink) !important; }
.toc a:hover { color: var(--accent) !important; }

/* ============================================
   BLOG ARTICLE — alternate template (.hero, .lead, article, .tip-box etc.)
   The :has() selector excludes the homepage cinematic hero.
   ============================================ */

/* Blog page banner (when .hero is used as a simple article header) */
.hero:not(:has(.hero-stage)) {
    background: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
    color: var(--paper) !important;
    padding: 5rem 2rem 5rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    display: block !important;
}
.hero:not(:has(.hero-stage))::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-image, none);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.06) brightness(0.72);
    opacity: 0.62;
    z-index: 0;
    pointer-events: none;
}
.hero:not(:has(.hero-stage)) > * {
    position: relative;
    z-index: 2;
}
.hero:not(:has(.hero-stage))::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, #ea7d3c 50%, var(--accent) 75%, transparent 100%);
    opacity: 0.85;
}
.hero:not(:has(.hero-stage)) h1 {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: #f5f1e8 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    max-width: 900px !important;
    margin: 0 auto 1rem !important;
    background: none !important;
    -webkit-text-fill-color: #f5f1e8 !important;
}
.hero:not(:has(.hero-stage)) p,
.hero:not(:has(.hero-stage)) .meta {
    color: rgba(245, 241, 232, 0.85) !important;
    font-family: var(--font-sans) !important;
}
.hero:not(:has(.hero-stage)) .meta {
    font-size: 0.9rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

/* The white article card lifted slightly over the dark banner */
article {
    background: white !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 24px rgba(26, 29, 41, 0.08) !important;
    padding: 3.5rem 3rem !important;
}
@media (max-width: 800px) {
    article { padding: 2rem 1.5rem !important; border-radius: 12px !important; }
}

/* Article body typography */
article h2 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: clamp(1.7rem, 3.2vw, 2.2rem) !important;
    margin: 3rem 0 1.2rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    border-bottom: 1px solid var(--rule) !important;
    padding-bottom: 0.6rem !important;
}
article h3 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
    margin: 2.5rem 0 0.9rem !important;
    letter-spacing: -0.01em !important;
}
article h4 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: 1.15rem !important;
    margin-bottom: 0.6rem !important;
}
article p, article li {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #2a2f42 !important;
}

/* Lead/intro paragraph (italic, accent-bordered) */
.lead, .intro {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(1.15rem, 2vw, 1.3rem) !important;
    line-height: 1.65 !important;
    color: var(--ink) !important;
    background: transparent !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: 0.2rem 0 0.2rem 1.4rem !important;
    margin-bottom: 2.5rem !important;
}

/* Inline callout boxes */
.tip-box {
    background: #f0eee6 !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid #4d8a6a !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.4rem 1.6rem !important;
    margin: 2rem 0 !important;
}
.tip-box h4 { color: var(--ink) !important; }

.warning-box {
    background: #f6f1e9 !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid #c2410c !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.4rem 1.6rem !important;
    margin: 2rem 0 !important;
}
.warning-box h4 { color: var(--ink) !important; }

.highlight-box {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--ink) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.4rem 1.6rem !important;
    margin: 2rem 0 !important;
}
.highlight-box h4, .highlight-box h3 { color: var(--ink) !important; }

/* CTA button (if styled as small chip in cta-box) */
.cta-box .cta-button {
    background: var(--accent) !important;
    color: white !important;
    border-radius: 999px !important;
    padding: 0.9rem 2rem !important;
    font-weight: 600 !important;
}
.cta-box .cta-button:hover { background: var(--accent-dark) !important; }

/* ============================================
   BLOG ARTICLE — case-study template
   (uses .article-hero, .article-content, .stat-card, .info-box etc.)
   ============================================ */

.article-hero {
    background: linear-gradient(135deg, #1a1d29 0%, #2a2f42 100%) !important;
    color: var(--paper) !important;
    padding: 5rem 2rem 4.5rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.article-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, #ea7d3c 50%, var(--accent) 75%, transparent 100%);
    opacity: 0.85;
}
.article-title, .article-hero h1 {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: #f5f1e8 !important;
    font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    max-width: 900px !important;
    margin: 0 auto 1rem !important;
}
.article-subtitle, .article-hero p {
    font-family: var(--font-sans) !important;
    color: rgba(245, 241, 232, 0.85) !important;
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    opacity: 1 !important;
}
.article-meta {
    color: rgba(245, 241, 232, 0.7) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.article-content {
    max-width: 760px !important;
    margin: -3rem auto 3rem !important;
    padding: 3.5rem 3rem !important;
    background: white !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 24px rgba(26, 29, 41, 0.08) !important;
    position: relative !important;
    z-index: 2 !important;
}
@media (max-width: 800px) {
    .article-content { padding: 2rem 1.5rem !important; border-radius: 12px !important; }
}
.article-content h2 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: clamp(1.7rem, 3.2vw, 2.2rem) !important;
    margin: 3rem 0 1.2rem !important;
    line-height: 1.2 !important;
    border-bottom: 1px solid var(--rule) !important;
    padding-bottom: 0.6rem !important;
}
.article-content h3 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
    margin: 2.4rem 0 0.9rem !important;
}
.article-content p, .article-content li {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #2a2f42 !important;
}

/* Stat-cards — turn purple gradient blocks into editorial dark-on-cream */
.stat-card {
    background: var(--paper) !important;
    background-image: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
    padding: 2rem 1.5rem !important;
    border-radius: 16px !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(26, 29, 41, 0.05) !important;
}
.stat-number {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-style: italic !important;
    color: var(--accent) !important;
    font-size: clamp(2.4rem, 5vw, 3rem) !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.02em !important;
}
.stat-label {
    font-family: var(--font-sans) !important;
    color: var(--ink) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Variant callouts for case-study template */
.info-box {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--ink) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.4rem 1.6rem !important;
    margin: 2rem 0 !important;
}
.info-box h4 { color: var(--ink) !important; font-family: var(--font-display) !important; }

.success-box {
    background: #ecf2ee !important;
    border: 1px solid #c4d5ca !important;
    border-left: 3px solid #4d8a6a !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.4rem 1.6rem !important;
    margin: 2rem 0 !important;
}
.success-box h4 { color: #2d5a3a !important; font-family: var(--font-display) !important; }

.challenge-box {
    background: #f6f1e9 !important;
    border: 1px solid #d8cab2 !important;
    border-left: 3px solid #c2410c !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.4rem 1.6rem !important;
    margin: 2rem 0 !important;
}
.challenge-box h4 { color: var(--ink) !important; font-family: var(--font-display) !important; }

/* Sticky white nav at top of case-study */
.header:not(:has(h1)) {
    background: white !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}
.header:not(:has(h1)) .logo { color: var(--accent) !important; font-family: var(--font-display) !important; font-weight: 600 !important; }