/* ============================================================
   CLAIR PRO — thème override pour cissp.pocketlearn.io
   À charger EN DERNIER sur chaque page, après styles.css,
   button-styles.css et modal-styles.css :
   <link rel="stylesheet" href="clair-pro-theme.css">
   Tokens : voir design_handoff_clair_pro/README.md
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
    /* Remap des variables Matrix vers Clair Pro */
    --neon-green: #14532D;            /* primary */
    --neon-green-glow: rgba(0, 0, 0, 0);
    --dark-green: #E2E8E3;            /* bordures cartes */
    --darker-green: #EEF2EE;          /* séparateurs */
    --black: #F4F6F4;                 /* fond d'écran */
    --dark-gray: #FFFFFF;             /* surfaces */
    --light-gray: #6B7A6E;            /* texte muted */
    --text-color: #1A241C;            /* texte */
    --premium-gold: #B45309;          /* warning (remplace l'or) */
    --premium-gold-glow: rgba(0, 0, 0, 0);
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
    --font-sans: 'JetBrains Mono', 'SF Mono', monospace;
    /* Tokens Clair Pro supplémentaires */
    --cp-primary: #14532D;
    --cp-primary-dark: #0F3F22;
    --cp-primary-tint: #E7EFE8;
    --cp-on-primary: #EAF5EC;
    --cp-secondary: #7DDF9A;
    --cp-text: #1A241C;
    --cp-text-body: #3A463C;
    --cp-muted: #6B7A6E;
    --cp-faint: #8A968C;
    --cp-border: #E2E8E3;
    --cp-success: #15803D;
    --cp-warning: #B45309;
    --cp-danger: #B91C1C;
}

/* ---- Global : plus aucun glow ---- */
*, *::before, *::after { text-shadow: none !important; }

html {
    background-color: var(--black) !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    min-height: 100% !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--black) !important;
    color: var(--cp-text-body);
    font-family: var(--font-mono);
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: 100vh !important;
    position: relative !important;
}

body.menu-open,
body.modal-open {
    overflow: hidden !important;
}

/* Pluie Matrix supprimée */
.matrix-bg, .digital-rain { display: none !important; }

h1, h2, h3, h4, h5, h6 { color: var(--cp-primary); }
p { color: var(--cp-text-body); }
a { color: var(--cp-primary); }
a:hover { color: var(--cp-primary-dark); }

/* ---- Header / nav ---- */
header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid var(--cp-border) !important;
    backdrop-filter: blur(10px);
}
header a, nav ul li a, .nav-link,
header nav.main-nav ul.nav-list li.nav-item a.nav-link { color: var(--cp-text-body) !important; }
nav ul li a:hover, .nav-link:hover, nav ul li a.active, .nav-link.active,
header nav.main-nav ul.nav-list li.nav-item a.nav-link:hover,
header nav.main-nav ul.nav-list li.nav-item a.nav-link.active {
    color: var(--cp-primary) !important;
    background: var(--cp-primary-tint) !important;
}
.logo-subtitle { color: var(--cp-muted) !important; }
.logo-text .site-title { color: var(--cp-primary) !important; }
.mobile-menu-button svg, .close-menu-button svg { fill: var(--cp-primary) !important; }
.logo, .logo * { color: var(--cp-primary) !important; }
.logo svg path, .logo svg { fill: var(--cp-primary) !important; }
/* Menu mobile */
nav.main-nav, .nav-list { background-color: transparent; }
@media (max-width: 767px) {
    nav.main-nav, .nav-list, .mobile-menu {
        background-color: #FFFFFF !important;
        border-color: var(--cp-border) !important;
    }
}
.hamburger span, .menu-toggle span { background-color: var(--cp-primary) !important; }

/* ---- Hero / terminal ---- */
.terminal-text { color: var(--cp-primary); }
.terminal-content::before { color: var(--cp-muted); }
.cursor { background-color: var(--cp-primary); box-shadow: none !important; }
.hero-banner, .hero { background: transparent !important; }

/* ---- Boutons CTA : pleins, verts profonds, sans glow ---- */
a.cta-button, .cta-button, .nav-link.cta-button,
a[href="#features"].cta-button, a[href="index.html#download"].cta-button,
.app-store-button.cta-button,
body.blog nav.main-nav .nav-list .nav-item a.cta-button {
    background-color: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    border: 2px solid var(--cp-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    letter-spacing: 0.06em;
    font-weight: 700;
}
a.cta-button:hover, .cta-button:hover {
    background-color: var(--cp-primary-dark) !important;
    border-color: var(--cp-primary-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(20, 83, 45, 0.25) !important;
    transform: translateY(-2px);
}
a.cta-button.special-offer, .cta-button.special-offer {
    background-color: var(--cp-warning) !important;
    border-color: var(--cp-warning) !important;
    color: #FFFFFF !important;
    animation: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
a.cta-button.special-offer:hover, .cta-button.special-offer:hover {
    background-color: #9A4708 !important;
    border-color: #9A4708 !important;
}
.app-store-button:hover { filter: none !important; }

/* ---- Sections ---- */
.features, .premium-section, .faq-section { background-color: transparent !important; }
/* Titres de section : suppression des dégradés néon/or clippés */
.section-title, #premium .section-title, .flip-card-back h3 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--cp-primary) !important;
    -webkit-text-fill-color: var(--cp-primary) !important;
}
.flip-card-back h3 {
    color: var(--cp-secondary) !important;
    -webkit-text-fill-color: var(--cp-secondary) !important;
}
#download .section-title, .download .section-title {
    color: var(--cp-on-primary) !important;
    -webkit-text-fill-color: var(--cp-on-primary) !important;
}
.section-subtitle { color: var(--cp-muted) !important; }

/* Cartes features */
.feature-card, .flip-card-front {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.feature-card:hover { box-shadow: 0 4px 12px rgba(20, 83, 45, 0.10) !important; }
.feature-icon { color: var(--cp-primary) !important; }
.feature-card h3 { color: var(--cp-text) !important; }
.feature-card p { color: var(--cp-muted); }
.stat-number, .stat strong, .stat-value { color: var(--cp-primary) !important; }
.stat-value.premium { color: var(--cp-warning) !important; }
.stat-label { color: var(--cp-faint) !important; }

/* Dos des cartes flip : vert profond, accents #7DDF9A */
.flip-card-back,
.premium-section .flip-card-back {
    background: var(--cp-primary) !important;
    border: 1px solid var(--cp-primary) !important;
    border-radius: 14px !important;
}
@supports (-webkit-touch-callout: none) {
    .flip-card-back { background: #14532D !important; }
}
.flip-card-back h3 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--cp-secondary) !important;
    -webkit-text-fill-color: var(--cp-secondary);
}
.flip-card-back p, .flip-card-back p.text-light { color: var(--cp-on-primary) !important; }
.flip-icon { color: rgba(255, 255, 255, 0.6) !important; }

/* Premium : chip warning au lieu d'or néon */
.feature-card.premium { border-color: #ECD9C3 !important; }
.feature-card.premium .feature-icon { color: var(--cp-warning) !important; }
.premium-section .section-title { color: var(--cp-primary) !important; }

/* ---- Slideshow screenshots ---- */
.screenshot-container {
    box-shadow: 0 8px 30px rgba(20, 83, 45, 0.12) !important;
    border: 1px solid var(--cp-border);
}
.screenshot { box-shadow: none !important; border: none !important; }
.dot { background: #C2CCC4 !important; }
.dot.active { background: var(--cp-primary) !important; }

/* ---- FAQ ---- */
.faq-section { background-color: transparent !important; }
.faq-item {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 12px !important;
    border-left: 3px solid var(--cp-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}
.faq-item:hover {
    box-shadow: 0 4px 12px rgba(20, 83, 45, 0.08) !important;
}
.faq-question {
    background-color: transparent !important;
    border-radius: 12px !important;
    transition: background-color 0.2s ease !important;
}
.faq-question:hover {
    background-color: var(--cp-primary-tint) !important;
}
.faq-question h3 { color: var(--cp-text) !important; }
.faq-question:hover h3 { color: var(--cp-primary) !important; }
.faq-question i { color: var(--cp-primary) !important; }
.faq-answer, .faq-answer p, .faq-answer li { color: var(--cp-text-body) !important; }

/* ---- Tableau comparatif ---- */
.comparison-table-container table { border-color: var(--cp-border) !important; }
.comparison-table-container th {
    background: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    border-color: var(--cp-primary) !important;
}
.comparison-table-container td {
    background: #FFFFFF !important;
    color: var(--cp-text-body) !important;
    border-color: var(--darker-green) !important;
}

/* ---- Section download : héro vert profond ---- */
.download { background: var(--cp-primary) !important; }
.download h2, .download .section-title { color: var(--cp-on-primary) !important; }
.download p { color: rgba(234, 245, 236, 0.85) !important; }

/* ---- Footer ---- */
footer {
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--cp-border) !important;
    color: var(--cp-muted) !important;
}
footer p, footer li { color: var(--cp-muted) !important; }
footer a, .footer-links ul li a, footer .footer-contact a, .footer-content a {
    color: var(--cp-text-body) !important;
}
footer a:hover, .footer-links ul li a:hover, footer .footer-contact a:hover {
    color: var(--cp-primary) !important;
    border-bottom-color: var(--cp-primary) !important;
}
footer h3, footer h4 { color: var(--cp-primary) !important; }

/* ---- Modales (waiting list, coupon) ---- */
.modal { background-color: rgba(26, 36, 28, 0.45) !important; }
.modal-content {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 16px !important;
    color: var(--cp-text) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}
.modal-content h2, .modal-content h3 { color: var(--cp-primary) !important; }
.modal-content p, .modal-content label { color: var(--cp-text-body) !important; }
.modal-content .close, .close-modal { color: var(--cp-muted) !important; }
.modal-content input, .modal-content textarea, .modal-content select {
    background: #FFFFFF !important;
    border: 1.5px solid #C2CCC4 !important;
    border-radius: 10px !important;
    color: var(--cp-text) !important;
    box-shadow: none !important;
}
.modal-content input:focus, .modal-content textarea:focus {
    border-color: var(--cp-primary) !important;
    outline: none;
}
.modal-content button[type="submit"], .modal-content .submit-button, .modal-content .cta-button {
    background: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.error-message { color: var(--cp-danger) !important; }
.success-message { color: var(--cp-success) !important; }

/* ---- Blog / pages contenu (Clair Pro Design) ---- */
.blog-header, .blog-post-header, .blog-listing, .blog-post-content {
    background: transparent !important;
    box-shadow: none !important;
}

.blog-header .section-subtitle {
    color: var(--cp-muted) !important;
}

.blog-post-header {
    padding: 3rem 0 1.5rem !important;
}

.blog-post-header .post-title,
.blog-post-header h1 {
    color: var(--cp-primary) !important;
    text-shadow: none !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.25 !important;
}

.post-meta,
.post-meta span,
.post-date,
.post-author,
.post-category {
    color: var(--cp-muted) !important;
    font-size: 0.9rem !important;
}

.post-meta i {
    color: var(--cp-primary) !important;
}

/* Article Container (.markdown-content) */
.markdown-content {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 16px !important;
    padding: 2.5rem 3rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-top: 1rem !important;
    margin-bottom: 3rem !important;
    color: var(--cp-text-body) !important;
}

@media (max-width: 768px) {
    .markdown-content {
        padding: 1.5rem 1.25rem !important;
        border-radius: 12px !important;
    }
}

.markdown-content p {
    color: var(--cp-text-body) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.25rem !important;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: var(--cp-primary) !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.markdown-content h1 {
    font-size: 2.2rem !important;
}

.markdown-content h2 {
    font-size: 1.6rem !important;
    border-bottom: 1px solid var(--cp-border) !important;
    padding-bottom: 0.5rem !important;
}

.markdown-content h3 {
    font-size: 1.3rem !important;
}

.markdown-content ul,
.markdown-content ol {
    color: var(--cp-text-body) !important;
    margin-bottom: 1.25rem !important;
    padding-left: 1.5rem !important;
}

.markdown-content li {
    color: var(--cp-text-body) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
}

.markdown-content strong,
.markdown-content b {
    color: var(--cp-text) !important;
    font-weight: 700 !important;
}

.markdown-content a {
    color: var(--cp-primary) !important;
    border-bottom: 1px solid var(--cp-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.markdown-content a:hover {
    color: var(--cp-primary-dark) !important;
    border-bottom-style: solid !important;
}

.markdown-content blockquote {
    border-left: 4px solid var(--cp-primary) !important;
    background: var(--cp-primary-tint) !important;
    color: var(--cp-text-body) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 10px 10px 0 !important;
    margin: 1.5rem 0 !important;
}

.markdown-content code, code, pre code {
    background: var(--cp-primary-tint) !important;
    color: var(--cp-primary) !important;
    border: 1px solid var(--cp-border) !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    text-shadow: none !important;
}

.markdown-content pre, pre {
    background: #F4F6F4 !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 10px !important;
    padding: 1.25rem !important;
    margin: 1.5rem 0 !important;
    overflow-x: auto !important;
    box-shadow: none !important;
}

.markdown-content pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--cp-text) !important;
}

.markdown-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5rem 0 !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.markdown-content th {
    background: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-weight: 700 !important;
}

.markdown-content td {
    background: #FFFFFF !important;
    color: var(--cp-text-body) !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--cp-border) !important;
}

/* Cards on blog listing page (blog.html) */
.blog-grid {
    gap: 1.75rem !important;
}

.blog-post, .blog-card, .post-card, .resource-card, .testimonial-card {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.25s ease !important;
}

.blog-card:hover {
    box-shadow: 0 8px 20px rgba(20, 83, 45, 0.1) !important;
    transform: translateY(-3px) !important;
    border-color: var(--cp-primary) !important;
}

.blog-card-content {
    padding: 1.5rem !important;
}

.blog-card-category {
    display: inline-block !important;
    background: var(--cp-primary-tint) !important;
    color: var(--cp-primary) !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.blog-card-title,
.blog-card-title a {
    color: var(--cp-primary) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    margin-bottom: 0.5rem !important;
}

.blog-card-title a:hover {
    color: var(--cp-primary-dark) !important;
}

.blog-card-excerpt {
    color: var(--cp-text-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.25rem !important;
}

.blog-card-meta {
    color: var(--cp-muted) !important;
    font-size: 0.85rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid var(--cp-border) !important;
    padding-top: 0.75rem !important;
}

.read-more {
    color: var(--cp-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
}

.read-more:hover {
    color: var(--cp-primary-dark) !important;
}

.rss-button {
    background-color: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    border-radius: 10px !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    text-decoration: none !important;
}

.rss-button:hover {
    background-color: var(--cp-primary-dark) !important;
    color: #FFFFFF !important;
}

.blog-loading,
.error-message,
.no-posts {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    color: var(--cp-text-body) !important;
    border-radius: 12px !important;
}

/* ---- Legal Pages (Privacy Policy, Terms of Service) ---- */
.legal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5rem 0 3rem !important;
}
.legal-content .section-title {
    color: var(--cp-primary) !important;
    text-shadow: none !important;
    margin-bottom: 2rem !important;
}
.legal-text {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 14px !important;
    padding: 3rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.legal-text h2 {
    color: var(--cp-primary) !important;
    border-bottom: 1px solid var(--cp-border) !important;
    text-shadow: none !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
}
.legal-text p, .legal-text ul li {
    color: var(--cp-text-body) !important;
}
.legal-text strong {
    color: var(--cp-text) !important;
}
.legal-text a {
    color: var(--cp-primary) !important;
    border-bottom: 1px solid var(--cp-primary) !important;
    text-decoration: none !important;
}
.legal-text a:hover {
    color: var(--cp-primary-dark) !important;
    border-bottom-style: solid !important;
}
blockquote {
    border-left: 3px solid var(--cp-success) !important;
    background: #FFFFFF !important;
    color: var(--cp-text-body) !important;
}
code, pre {
    background: var(--cp-primary-tint) !important;
    color: var(--cp-primary) !important;
    border: none !important;
}

/* ---- Pages /domains ---- */
.domains-header {
    background: transparent !important;
    padding: 5rem 0 2rem !important;
}
.domains-header .section-title {
    color: var(--cp-primary) !important;
}
.domains-header .section-subtitle {
    color: var(--cp-muted) !important;
}
.breadcrumbs, .breadcrumbs a, .breadcrumbs span {
    color: var(--cp-muted) !important;
}
.breadcrumbs a:hover {
    color: var(--cp-primary) !important;
}

.domains-overview {
    background: transparent !important;
}
.domain-intro p {
    color: var(--cp-text-body) !important;
}
.domain-intro strong {
    color: var(--cp-text) !important;
}

.domain-card {
    background: #FFFFFF !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.domain-card:hover {
    box-shadow: 0 4px 12px rgba(20, 83, 45, 0.10) !important;
    border-color: var(--cp-primary) !important;
}

.domain-number {
    background: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.domain-content h2 {
    color: var(--cp-primary) !important;
}
.domain-content p {
    color: var(--cp-text-body) !important;
}

.domain-topics {
    background: var(--cp-primary-tint) !important;
    border-left: 3px solid var(--cp-primary) !important;
    border-radius: 8px !important;
}
.domain-topics h3 {
    color: var(--cp-primary) !important;
}
.domain-topics li {
    color: var(--cp-text-body) !important;
}

.domain-link {
    background: var(--cp-primary-tint) !important;
    color: var(--cp-primary) !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 8px !important;
}
.domain-link:hover {
    background: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
    border-color: var(--cp-primary) !important;
    box-shadow: none !important;
}
.domain-link.coming-soon {
    background: #F4F6F4 !important;
    color: var(--cp-muted) !important;
    border-color: var(--cp-border) !important;
}

.domain-prep-cta {
    background: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
}
.domain-prep-cta h2 {
    color: var(--cp-on-primary) !important;
}
.domain-prep-cta p {
    color: rgba(234, 245, 236, 0.85) !important;
}
.domain-prep-cta .cta-button {
    background-color: #FFFFFF !important;
    color: var(--cp-primary) !important;
    border-color: #FFFFFF !important;
}
.domain-prep-cta .cta-button:hover {
    background-color: var(--cp-primary-tint) !important;
    color: var(--cp-primary-dark) !important;
    border-color: var(--cp-primary-tint) !important;
}

/* ============================================================
   CLAIR PRO — Mobile Responsiveness & iPhone Optimizations
   Fixes oversized fonts, large paddings, and monospaced text
   scale on mobile / iPhone viewports.
   ============================================================ */

@media (max-width: 768px) {
    /* Base typography scaling for mobile screens */
    html {
        font-size: 15px !important;
    }

    body {
        font-size: 0.95rem !important;
    }

    /* Page section paddings */
    .legal-content,
    .domains-header {
        padding: 2.25rem 0 1.25rem !important;
    }

    /* Legal text card padding */
    .legal-text {
        padding: 1.5rem 1.15rem !important;
        border-radius: 12px !important;
    }

    .legal-text h1,
    .legal-content .section-title {
        font-size: 1.7rem !important;
        margin-bottom: 1.15rem !important;
    }

    .legal-text h2 {
        font-size: 1.3rem !important;
        margin-top: 1.35rem !important;
        margin-bottom: 0.65rem !important;
    }

    .legal-text p, 
    .legal-text ul li {
        font-size: 0.925rem !important;
        line-height: 1.55 !important;
    }

    /* Markdown / Article Content on mobile */
    .markdown-content {
        padding: 1.25rem 1rem !important;
        border-radius: 12px !important;
        margin-top: 0.5rem !important;
        margin-bottom: 2rem !important;
    }

    .markdown-content h1 {
        font-size: 1.7rem !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .markdown-content h2 {
        font-size: 1.3rem !important;
        margin-top: 1.35rem !important;
        margin-bottom: 0.65rem !important;
    }

    .markdown-content h3 {
        font-size: 1.1rem !important;
        margin-top: 1.15rem !important;
        margin-bottom: 0.5rem !important;
    }

    .markdown-content p {
        font-size: 0.925rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1rem !important;
    }

    .markdown-content ul,
    .markdown-content ol {
        padding-left: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .markdown-content li {
        font-size: 0.925rem !important;
    }

    .markdown-content blockquote {
        padding: 0.75rem 1rem !important;
        margin: 1.25rem 0 !important;
    }

    /* Blog cards on mobile */
    .blog-grid {
        gap: 1.15rem !important;
    }

    .blog-card-content {
        padding: 1.15rem !important;
    }

    .blog-card-title,
    .blog-card-title a {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
    }

    .blog-card-excerpt {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }

    /* Domains cards on mobile */
    .domain-card {
        padding: 1.15rem !important;
        margin-bottom: 1.15rem !important;
    }

    .domain-content h2 {
        font-size: 1.25rem !important;
    }

    .domain-content p {
        font-size: 0.925rem !important;
    }

    .domain-topics {
        padding: 0.85rem 1rem !important;
    }

    /* Hero & landing page titles on mobile */
    .hero-content h1,
    .hero-content h1.glitch {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .hero-content p {
        font-size: 0.925rem !important;
    }

    .section-title {
        font-size: 1.55rem !important;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
    }

    /* Buttons & Touch Targets on Mobile */
    .cta-button,
    .rss-button,
    .app-store-button {
        padding: 0.6rem 1.15rem !important;
        font-size: 0.875rem !important;
    }

    /* Mobile container side paddings */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 480px) {
    /* Extra fine-tuning for smaller iPhones (iPhone SE, 12/13/14 mini, 375px/390px viewports) */
    html {
        font-size: 14px !important;
    }

    .legal-text,
    .markdown-content {
        padding: 1.1rem 0.85rem !important;
        border-radius: 10px !important;
    }

    .legal-text h1,
    .markdown-content h1,
    .hero-content h1,
    .hero-content h1.glitch {
        font-size: 1.5rem !important;
    }

    .legal-text h2,
    .markdown-content h2,
    .domain-content h2 {
        font-size: 1.2rem !important;
    }

    .legal-text p,
    .markdown-content p,
    .domain-content p,
    .hero-content p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    .blog-card-content {
        padding: 0.95rem !important;
    }

    .blog-card-title,
    .blog-card-title a {
        font-size: 1.05rem !important;
    }

    .container {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
}