/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --bg-color: #ffffff; /* Deep Obsidian Slate */
    --card-bg: #ffffff; /* Modern Slate Glass */
    --card-border: #e2e5e1;
    --text-primary: #15201a;
    --text-secondary: #46524b;
    --text-muted: #737d76;
    --primary-color: #0f6b3e; /* Refined Emerald */
    --primary-hover: #0a5230;
    --primary-glow: rgba(15, 107, 62, 0.12);
    --secondary-color: #a16207; /* Golden Amber */
    --secondary-glow: rgba(245, 158, 11, 0.15);
    --accent-gold: #a16207;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(15, 107, 62, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 40%, rgba(212, 140, 17, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 10% 80%, rgba(15, 107, 62, 0.05) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: clip;
    position: relative;
}

/* Background Gradients (Animated/Static Blur Blobs) */
.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.25;
    pointer-events: none;
}

.blur-1 {
    top: 5%;
    left: 10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(15, 107, 62, 0.12) 0%, transparent 75%);
}

.blur-2 {
    top: 35%;
    right: 5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 140, 17, 0.1) 0%, transparent 75%);
}

.blur-3 {
    bottom: 5%;
    left: 15%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, transparent 75%);
}

/* Glassmorphism utility card */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(21, 32, 26, 0.135);
}

/* Typography elements */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text-gradient {
    background: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #0f6b3e;
}

.highlight-green {
    color: var(--primary-color);
}

.gold-color {
    color: var(--accent-gold);
}

/* Modern Soft Pill Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 6%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(21, 32, 26, 0.084);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #15201a;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.brand-logo-link:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.logo-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12), rgba(15, 107, 62, 0.12));
    border: 1px solid rgba(15, 107, 62, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f6b3e;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(21, 32, 26, 0.075);
}

.logo-badge-icon svg {
    display: block;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.logo-main-title {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: #15201a;
}

.logo-main-title .brand-white {
    color: #15201a;
}

.logo-main-title .brand-emerald,
.logo-main-title .highlight-green {
    color: #0f6b3e;
}

.logo-sub-tag {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #56605a;
    text-transform: uppercase;
    margin-top: 1px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.nav-pill-link {
    color: #56605a !important;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.08);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    margin: 0 !important;
    cursor: pointer;
    font-family: inherit;
}

.nav-pill-link:hover {
    color: #15201a !important;
    background: rgba(21, 32, 26, 0.06);
    border-color: rgba(21, 32, 26, 0.16);
    transform: translateY(-1px);
}

.nav-audit-pill {
    background: rgba(15, 107, 62, 0.08) !important;
    border: 1px solid rgba(15, 107, 62, 0.25) !important;
    color: #15201a !important;
}

.nav-audit-pill:hover {
    background: rgba(15, 107, 62, 0.12) !important;
    border-color: rgba(15, 107, 62, 0.45) !important;
    box-shadow: 0 0 14px rgba(15, 107, 62, 0.18);
}

.nav-audit-badge {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(15, 107, 62, 0.4);
    text-transform: uppercase;
}

.nav-cta-btn {
    white-space: nowrap;
    padding: 8px 18px !important;
    font-size: 0.86rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    margin-left: 2px !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(21, 32, 26, 0.16) !important;
    box-shadow: 0 2px 10px rgba(15, 107, 62, 0.18) !important;
    text-decoration: none;
    transition: all 0.25s ease;
}

.nav-cta-btn:hover {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(15, 107, 62, 0.18) !important;
}

/* Standalone Subpage Nav Items */
.nav-back-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #56605a;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.12);
    transition: all 0.2s ease;
}

.nav-back-pill:hover {
    color: #15201a;
    background: rgba(21, 32, 26, 0.06);
    border-color: rgba(21, 32, 26, 0.16);
    transform: translateX(-2px);
}

.reader-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.3);
    color: var(--primary-color);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff !important;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    border: 1px solid rgba(21, 32, 26, 0.16);
    box-shadow: 0 2px 10px rgba(15, 107, 62, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    box-shadow: 0 6px 20px rgba(15, 107, 62, 0.18);
}

.btn-primary-large {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-family: var(--font-display);
    border: 1px solid rgba(21, 32, 26, 0.16);
    box-shadow: 0 4px 16px rgba(15, 107, 62, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary-large:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    box-shadow: 0 8px 24px rgba(15, 107, 62, 0.18);
}

.btn-secondary-large {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(21, 32, 26, 0.05);
    color: #15201a;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-family: var(--font-display);
    border: 1px solid rgba(21, 32, 26, 0.12);
    backdrop-filter: blur(12px);
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.btn-secondary-large:hover {
    background: rgba(21, 32, 26, 0.06);
    border-color: rgba(21, 32, 26, 0.16);
    transform: translateY(-2px);
}

/* Hero Section */
.hero-section {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    padding: 100px 8% 80px 8%;
    align-items: center;
    min-height: 85vh;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 600px;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(15, 107, 62, 0.1);
    border: 1px solid rgba(15, 107, 62, 0.3);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-cta {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.stats-row {
    display: flex;
    gap: 40px;
}

.stat-card h3 {
    font-size: 2rem;
    color: var(--text-primary);
}

.stat-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Mockup Card in Hero */
.mockup-card {
    border-radius: 24px;
    border: 1px solid rgba(21, 32, 26, 0.12);
    overflow: hidden;
}

.card-header {
    background: rgba(21, 32, 26, 0.03);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
}

.card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.card-dot.red { background: #a90e0e; }
.card-dot.yellow { background: #aa700e; }
.card-dot.green { background: #0f6b3e; }

.card-title-text {
    margin-left: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: var(--font-sans);
}

.card-body {
    padding: 30px;
}

.earnings-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.earnings-amount {
    font-size: 3rem;
    font-family: var(--font-display);
    font-weight: 800;
    margin: 10px 0 25px 0;
    color: var(--text-primary);
}

.progress-bar-container {
    margin-bottom: 25px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.progress-bar {
    height: 8px;
    background: rgba(21, 32, 26, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
}

.tips-booster {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(212, 158, 17, 0.08);
    border: 1px solid rgba(189, 140, 15, 0.2);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
}

/* Sections General */
section {
    padding: 80px 8%;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2, .section-header h1 {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

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

/* Interactive Reader Grid */
.reader-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 500px;
    overflow: hidden;
}

.reader-sidebar {
    border-right: 1px solid var(--card-border);
    padding: 20px 0;
    background: rgba(21, 32, 26, 0.022);
}

.sidebar-tab {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 20px 25px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-tab:hover {
    background: rgba(21, 32, 26, 0.02);
    color: var(--text-primary);
}

.sidebar-tab.active {
    background: rgba(15, 107, 62, 0.05);
    color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
}

.tab-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0.5;
}

.tab-title h4 {
    font-size: 1rem;
    font-weight: 600;
}

.tab-title p {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.reader-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.content-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 20px;
}

.current-chapter-label {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.language-toggle {
    display: flex;
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    padding: 4px;
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn.active {
    background: var(--primary-color);
    color: #000000;
}

/* Chapter text styling */
.chapter-pane {
    display: none;
}

.chapter-pane.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.chapter-pane h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.chapter-pane h4 {
    font-size: 1.25rem;
    margin: 25px 0 15px 0;
    color: var(--text-primary);
}

.chapter-pane p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.chapter-pane ol, .chapter-pane ul {
    margin-left: 20px;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.chapter-pane li {
    margin-bottom: 8px;
}

.highlight-box {
    background: rgba(15, 107, 62, 0.05);
    border-left: 4px solid var(--primary-color);
    padding: 20px;
    border-radius: 0 12px 12px 0;
    font-size: 0.95rem;
}

/* Interactive templates styling */
.template-box {
    background: rgba(21, 32, 26, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.template-box:hover {
    background: rgba(21, 32, 26, 0.04);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.template-header {
    padding: 12px 20px;
    background: rgba(21, 32, 26, 0.03);
    border-bottom: 1px solid var(--card-border);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copy-badge {
    font-size: 0.8rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.template-body {
    padding: 20px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Marketing Grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.text-box-card {
    padding: 40px;
}

.text-box-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.text-box-card p {
    color: var(--text-secondary);
    margin-bottom: 25px;
}

.copyable-text {
    background: rgba(21, 32, 26, 0.045);
    border: 1px dashed rgba(21, 32, 26, 0.16);
    border-radius: 12px;
    padding: 20px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copyable-text:hover {
    border-color: var(--primary-color);
    background: rgba(21, 32, 26, 0.05);
}

.copyable-text p, .copyable-text li {
    margin-bottom: 10px;
    color: var(--text-secondary);
}

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

/* Monetization section banner */
.banner-card {
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.banner-text h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.banner-text p {
    color: var(--text-secondary);
    max-width: 700px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--primary-color);
    color: #000000;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
.footer {
    text-align: center;
    padding: 40px;
    border-top: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ==========================================================================
   TikTok & Reels Photo Carousel Studio Styles
   ========================================================================== */
.slideshow-section {
    padding: 80px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.studio-badge {
    background: rgba(211, 18, 18, 0.12) !important;
    color: #9b0d0d !important;
    border-color: rgba(188, 16, 16, 0.3) !important;
    margin-bottom: 15px;
}

.carousel-tabs-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 35px;
    margin-bottom: 40px;
}

.carousel-set-tab {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.carousel-set-tab:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.96);
}

.carousel-set-tab.active {
    border-color: var(--primary-color);
    background: rgba(15, 107, 62, 0.12);
    box-shadow: 0 0 25px rgba(15, 107, 62, 0.18);
}

.carousel-set-tab i {
    font-size: 1.4rem;
    color: var(--primary-color);
}

.carousel-set-tab.active i {
    color: #0f6b3e;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

.tab-meta .set-title {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
}

.tab-meta .set-sub {
    display: block;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.studio-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* 9:16 Phone Mockup */
.phone-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-frame-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.phone-frame {
    width: 360px;
    height: 670px;
    background: #ffffff;
    border: 6px solid #e2e5e1;
    border-radius: 46px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(21, 32, 26, 0.14), 0 0 30px rgba(15, 107, 62, 0.12);
    display: flex;
    flex-direction: column;
}

.phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 24px;
    background: #ffffff;
    border-radius: 20px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.camera-lens {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e5e1;
}

.speaker-grill {
    width: 40px;
    height: 4px;
    background: #ffffff;
    border-radius: 3px;
}

.phone-status-bar {
    height: 40px;
    padding: 12px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #15201a;
    z-index: 50;
}

.phone-status-icons {
    display: flex;
    gap: 6px;
    font-size: 0.7rem;
}

.tiktok-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    z-index: 50;
    font-size: 0.85rem;
}

.tiktok-tabs {
    display: flex;
    gap: 15px;
    font-weight: 600;
    color: rgba(21, 32, 26, 0.6);
    margin: 0 auto;
}

.tiktok-tabs .active-tab {
    color: #15201a;
    position: relative;
}

.tab-indicator {
    width: 24px;
    height: 2px;
    background: #ffffff;
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.tiktok-search-icon {
    color: #15201a;
    font-size: 0.9rem;
}

.tiktok-actions-sidebar {
    position: absolute;
    right: 12px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 50;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.profile-action {
    position: relative;
    margin-bottom: 5px;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f6b3e, #0e93aa);
    border: 2px solid rgba(21, 32, 26, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: #ffffff;
}

.follow-plus {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: #a90e0e;
    color: #ffffff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
}

.action-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7));
}

.heart-icon {
    color: #9b0d0d;
}

.action-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: #15201a;
    text-shadow: 0 1px 3px rgba(21, 32, 26, 0.14);
}

.sound-disc {
    margin-top: 6px;
}

.disc-inner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #e2e5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

.tiktok-bottom-bar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 70px;
    z-index: 50;
    font-size: 0.75rem;
}

.creator-handle {
    font-weight: 700;
    color: #15201a;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.verified-badge {
    color: #0d879c;
    font-size: 0.7rem;
}

.tiktok-caption {
    color: rgba(21, 32, 26, 0.9);
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sound-track {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(21, 32, 26, 0.7);
    font-size: 0.68rem;
}

.phone-slide-counter {
    position: absolute;
    top: 75px;
    right: 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(21, 32, 26, 0.16);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #15201a;
    z-index: 50;
}

.slide-screen {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 85px 65px 95px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at 50% 20%, #ffffff 0%, #ffffff 100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.slide-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    width: 360px;
}

.nav-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(15, 107, 62, 0.1);
}

.slide-dots-container {
    display: flex;
    gap: 6px;
}

.slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(21, 32, 26, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slide-dot.active {
    width: 22px;
    border-radius: 10px;
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(15, 107, 62, 0.18);
}

/* Inspector Column */
.inspector-card {
    padding: 35px;
}

.inspector-header {
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--card-border);
}

.slide-phase-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(15, 107, 62, 0.1);
    border: 1px solid rgba(15, 107, 62, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.inspector-header h3 {
    font-size: 1.6rem;
    color: #15201a;
}

.tool-section {
    margin-bottom: 22px;
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tool-header label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.copy-tool-btn {
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid rgba(21, 32, 26, 0.16);
    color: var(--text-primary);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.copy-tool-btn:hover {
    background: rgba(15, 107, 62, 0.12);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.copy-tool-btn.gold-btn:hover {
    background: rgba(212, 158, 17, 0.12);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.code-box {
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.85rem;
    color: #15201a;
    line-height: 1.5;
    max-height: 130px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-prompt-box {
    border-left: 3px solid var(--accent-gold);
    font-family: monospace;
    color: #9c8a0d;
    font-size: 0.8rem;
}

.strategy-insight-box {
    background: rgba(16, 175, 202, 0.08);
    border: 1px solid rgba(15, 163, 189, 0.25);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(16, 175, 202, 0.12);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.insight-content h4 {
    font-size: 0.95rem;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.insight-content p {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.studio-action-row {
    display: flex;
    gap: 15px;
}

.studio-action-row a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 0.88rem;
}

/* Visual components inside slide viewport */
.slide-visual-hook {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slide-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    width: fit-content;
}

.pill-red { background: rgba(211, 18, 18, 0.12); color: #9c0d0d; border: 1px solid rgba(188, 16, 16, 0.4); }
.pill-green { background: rgba(15, 107, 62, 0.12); color: #0f6b3e; border: 1px solid rgba(15, 107, 62, 0.4); }
.pill-gold { background: rgba(212, 158, 17, 0.12); color: #9c850d; border: 1px solid rgba(189, 140, 15, 0.4); }
.pill-cyan { background: rgba(16, 175, 202, 0.12); color: #0d8b9c; border: 1px solid rgba(15, 163, 189, 0.4); }

.slide-big-title {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #15201a;
}

.slide-subtitle {
    font-size: 0.78rem;
    color: #56605a;
    line-height: 1.35;
}

.batch-comparison-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0;
}

.phone-batch-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.72rem;
}

.phone-batch-card.bad {
    border-color: rgba(188, 16, 16, 0.4);
    background: rgba(211, 18, 18, 0.08);
    opacity: 0.85;
}

.phone-batch-card.elite {
    border-color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    box-shadow: 0 0 15px rgba(15, 107, 62, 0.18);
}

.batch-card-top {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 0.88rem;
    margin-bottom: 2px;
}

.bad-amount { color: #9c0d0d; text-decoration: line-through; }
.elite-amount { color: #0f6b3e; font-size: 0.95rem; }

.batch-details {
    color: #56605a;
    font-size: 0.68rem;
}

.slide-callout-box {
    background: rgba(21, 32, 26, 0.05);
    border-left: 3px solid #0f6b3e;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    color: #39506f;
    margin-top: 4px;
}

.slide-checklist {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.72rem;
}

.slide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.3;
}

.slide-checklist li i {
    color: #0f6b3e;
    margin-top: 2px;
    font-size: 0.75rem;
}

.swipe-pill {
    margin-top: 6px;
    align-self: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0d709c;
    background: rgba(17, 152, 212, 0.12);
    border: 1px dashed rgba(15, 135, 189, 0.4);
    padding: 4px 10px;
    border-radius: 20px;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

.cta-guide-mockup {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12), rgba(16, 175, 202, 0.1));
    border: 1px solid rgba(15, 107, 62, 0.3);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.cta-mockup-badge {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9c850d;
    margin-bottom: 4px;
}

.cta-mockup-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #15201a;
    margin-bottom: 6px;
}

.cta-phone-btn {
    background: #0f6b3e;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 8px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 6px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 107, 62, 0.18);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Digital Product Bundle Section Styles */
.bundle-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.bundle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.bundle-card {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bundle-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 107, 62, 0.15);
}

.bundle-card.gold-border:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 12px 30px rgba(189, 124, 15, 0.15);
}

.bundle-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.bundle-pill {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pill-included {
    background: rgba(15, 107, 62, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(15, 107, 62, 0.3);
}

.pill-upsell {
    background: rgba(212, 140, 17, 0.12);
    color: var(--accent-gold);
    border: 1px solid rgba(189, 124, 15, 0.3);
}

.bundle-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bundle-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

.bundle-features {
    list-style: none;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.bundle-features li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bundle-features li i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.bundle-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.btn-bundle-view {
    flex: 1;
    text-align: center;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-bundle-view:hover {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
}

.btn-bundle-print {
    background: var(--primary-color);
    color: #000000;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-bundle-print:hover {
    background: #0f6b3e;
    color: #ffffff;
}

.btn-bundle-gold {
    background: var(--accent-gold);
    color: #000000;
}

.btn-bundle-gold:hover {
    background: #aa610e;
    color: #ffffff;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr;
        padding-top: 60px;
    }
    .reader-container {
        grid-template-columns: 1fr;
    }
    .reader-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        display: flex;
        overflow-x: auto;
    }
    .sidebar-tab {
        padding: 15px 20px;
        white-space: nowrap;
    }
    .carousel-tabs-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .studio-grid {
        grid-template-columns: 1fr;
    }
    .phone-column {
        margin-bottom: 30px;
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .bundle-grid {
        grid-template-columns: 1fr;
    }
    .banner-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
}

@media (max-width: 640px) {
    .carousel-tabs-container {
        grid-template-columns: 1fr;
    }
    .phone-frame {
        width: 320px;
        height: 600px;
    }
    .slide-nav-controls {
        width: 320px;
    }
    .studio-action-row {
        flex-direction: column;
    }
}

/* ==========================================================================
   California Prop 22 & Seattle Calculator & Chapter 7 Elements
   ========================================================================== */

/* Highlight tab for Chapter 7 in Reader Sidebar */
.sidebar-tab.highlight-tab {
    border-color: rgba(189, 124, 15, 0.4);
    background: linear-gradient(135deg, rgba(212, 140, 17, 0.08) 0%, rgba(15, 107, 62, 0.08) 100%);
}
.sidebar-tab.highlight-tab .tab-num {
    color: var(--accent-gold);
}
.sidebar-tab.highlight-tab.active {
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(189, 124, 15, 0.18);
}

/* Reader Chapter 7 Internal Styles */
.chapter-badge-header {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.formula-card {
    background: rgba(15, 107, 62, 0.08);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 18px 0;
}
.formula-text {
    font-size: 1.05rem;
    color: var(--primary-color);
    font-family: var(--font-display);
    font-weight: 700;
}
.formula-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 6px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.92rem;
}
.data-table th, .data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}
.data-table th {
    background: rgba(21, 32, 26, 0.04);
    color: var(--text-primary);
    font-weight: 600;
}
.tip-box {
    background: rgba(16, 175, 202, 0.08);
    border-left: 4px solid var(--secondary-color);
    padding: 12px 18px;
    border-radius: 8px;
    margin: 16px 0;
    font-size: 0.95rem;
}
.comparison-summary-box {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin: 20px 0;
}
.comp-metric-box {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}
.comp-metric-box.elite-border {
    border-color: rgba(15, 107, 62, 0.4);
    background: rgba(15, 107, 62, 0.05);
}
.comp-metric-box h5 {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.comp-val {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-display);
}
.comp-val.red { color: #9b0d0d; }
.comp-val.green { color: var(--primary-color); }
.comp-yr {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.comp-vs {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-align: center;
}
.highlight-pill-banner {
    background: linear-gradient(135deg, rgba(212, 140, 17, 0.12) 0%, rgba(15, 107, 62, 0.12) 100%);
    border: 1px solid rgba(189, 124, 15, 0.4);
    border-radius: 12px;
    padding: 14px 20px;
    text-align: center;
    font-size: 1.05rem;
    color: #15201a;
    margin-top: 15px;
}

/* Calculator Section */
.calculator-section {
    padding: 80px 5%;
    max-width: 1400px;
    margin: 0 auto;
}
.calc-badge {
    background: rgba(15, 107, 62, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(15, 107, 62, 0.3);
}
.calc-container {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 32px;
    padding: 36px;
    margin-top: 40px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 20px;
    align-items: start;
    box-sizing: border-box;
}
.calc-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}
.calc-card-title h3 {
    font-size: 1.3rem;
    font-weight: 700;
}
.calc-input-group {
    margin-bottom: 22px;
}
.calc-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.calc-label-row label, .calc-input-group > label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-tooltip {
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: help;
}
.info-tooltip:hover {
    color: var(--secondary-color);
}
.calc-value-display {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 4px 10px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--font-display);
}
.calc-value-display input {
    background: transparent;
    border: none;
    outline: none;
    color: #15201a;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    width: 60px;
    text-align: right;
}
.calc-slider {
    width: 100%;
    height: 6px;
    background: rgba(21, 32, 26, 0.06);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    margin: 8px 0;
}
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 0 12px var(--primary-color);
    border: 2px solid rgba(21, 32, 26, 0.16);
    transition: transform 0.15s ease;
}
.calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.slider-marks {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.mark-tier {
    color: var(--accent-gold);
    font-weight: 600;
}
.calc-select {
    width: 100%;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: #15201a;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    outline: none;
    cursor: pointer;
    margin-top: 8px;
    transition: border-color 0.2s;
}
.calc-select:focus {
    border-color: var(--primary-color);
}
.calc-select option {
    background: #ffffff;
    color: #15201a;
}
.input-helper-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Switch toggle */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(21, 32, 26, 0.03);
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
}
.toggle-label-wrap {
    flex: 1;
}
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    margin-left: 14px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(21, 32, 26, 0.06);
    transition: .3s;
    border-radius: 34px;
}
.switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: #ffffff;
    transition: .3s;
    border-radius: 50%;
}
.switch input:checked + .slider {
    background-color: var(--primary-color);
}
.switch input:checked + .slider:before {
    transform: translateX(24px);
}

/* Results Column Styles */
.result-box {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}
.result-box.primary-border {
    border-color: rgba(15, 107, 62, 0.35);
}
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.result-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.result-freq {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.result-amount-large {
    font-size: 2.2rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #15201a;
    letter-spacing: -0.02em;
}
.result-details-row {
    display: flex;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}
.result-details-row strong {
    color: var(--text-primary);
}

/* Adjustment Box */
.adjustment-box {
    border-color: rgba(15, 107, 62, 0.45);
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.08) 0%, rgba(16, 175, 202, 0.05) 100%);
}
.adjustment-box.glow-box {
    box-shadow: 0 0 25px rgba(15, 107, 62, 0.12);
}
.adjustment-amount-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px 0;
}
.adjustment-weekly, .adjustment-biweekly {
    flex: 1;
}
.sub-label {
    font-size: 0.76rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
}
.adj-val {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--primary-color);
}
.adj-val-biweekly {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #0f6b3e;
}
.adjustment-divider {
    width: 1px;
    height: 45px;
    background: rgba(21, 32, 26, 0.06);
}
.adjustment-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.adjustment-note i {
    color: var(--primary-color);
}

/* Healthcare Stipend */
.healthcare-box {
    border-color: rgba(189, 124, 15, 0.35);
    background: rgba(212, 140, 17, 0.04);
}
.health-stipend-row {
    display: flex;
    gap: 24px;
    margin: 8px 0;
}
.health-val {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--accent-gold);
}
.health-val-annual {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: #9c7f0d;
}
.health-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Result Total Card */
.result-total-card {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(16, 175, 202, 0.12) 100%);
    border: 1px solid rgba(15, 107, 62, 0.4);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(21, 32, 26, 0.09);
}
.total-label {
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.total-number {
    font-size: 2.8rem;
    font-weight: 900;
    font-family: var(--font-display);
    color: #15201a;
    line-height: 1.1;
}
.total-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.total-annual {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-top: 4px;
}

/* Head-to-Head Comparison Card */
.calc-comparison-card, .calculator-section .comparison-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 24px;
    margin-top: 28px;
    margin-bottom: 24px;
    box-sizing: border-box;
    width: 100%;
}
.calc-comparison-card .comparison-title, .calculator-section .comparison-card .comparison-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #15201a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.calc-comparison-card .comparison-grid, .calculator-section .comparison-card .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 20px;
    margin-bottom: 18px;
}
.calc-comparison-card .comp-col, .calculator-section .comp-col {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 20px;
    box-sizing: border-box;
}
.calc-comparison-card .comp-col.ca-state, .calculator-section .comp-col.ca-state {
    border-color: rgba(15, 107, 62, 0.4);
    background: rgba(15, 107, 62, 0.06);
    box-shadow: 0 0 20px rgba(15, 107, 62, 0.08);
}
.comp-col-header {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.comp-amount {
    font-size: 1.55rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #15201a;
}
.comp-amount small {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.comp-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.comp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}
.comp-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}
.comp-list li:last-child {
    margin-bottom: 0;
}
.red-x { color: #9b0d0d; }
.green-check { color: var(--primary-color); }

.diff-highlight-banner {
    background: linear-gradient(135deg, rgba(212, 140, 17, 0.12) 0%, rgba(15, 107, 62, 0.12) 100%);
    border: 1px solid rgba(189, 124, 15, 0.5);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    color: #15201a;
    text-align: center;
    box-sizing: border-box;
}
.diff-highlight-banner i {
    font-size: 1.2rem;
    color: var(--accent-gold);
}

.calc-action-bar {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}
.calc-action-bar button {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Badge pills */
.badge-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 6px;
}
.pill-gold {
    background: rgba(212, 140, 17, 0.12);
    color: var(--accent-gold);
    border: 1px solid rgba(189, 124, 15, 0.4);
}
.pill-green {
    background: rgba(15, 107, 62, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(15, 107, 62, 0.4);
}
.pill-yellow {
    background: rgba(212, 165, 17, 0.12);
    color: #9c7f0d;
    border: 1px solid rgba(189, 147, 15, 0.4);
}
.pill-blue {
    background: rgba(16, 175, 202, 0.12);
    color: var(--secondary-color);
    border: 1px solid rgba(15, 163, 189, 0.4);
}
.pill-red {
    background: rgba(211, 18, 18, 0.12);
    color: #9c0d0d;
    border: 1px solid rgba(188, 16, 16, 0.4);
}

/* Responsive Rules for Calculator */
@media (max-width: 1024px) {
    .calc-container {
        grid-template-columns: 1fr;
        padding: 24px;
    }
    .comparison-summary-box {
        grid-template-columns: 1fr;
    }
    .comp-vs {
        display: none;
    }
}
@media (max-width: 640px) {
    .adjustment-amount-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .adjustment-divider {
        display: none;
    }
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    .calc-action-bar {
        flex-direction: column;
    }
    .total-number {
        font-size: 2.2rem;
    }
}

/* GEO (Generative Engine Optimization) & Semantic Quick-Answer Blocks */
.geo-bluf-box {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.08) 0%, rgba(16, 175, 202, 0.04) 100%);
    border: 1px solid rgba(15, 107, 62, 0.35);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0 20px 0;
    box-shadow: 0 4px 20px rgba(21, 32, 26, 0.06);
}

.geo-bluf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.geo-bluf-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(15, 107, 62, 0.4);
}

.geo-bluf-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #15201a;
}

.geo-bluf-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #39506f;
}

.geo-bluf-text strong {
    color: #0f6b3e;
}

/* GEO Structured Benchmark Tables */
.geo-table-wrapper {
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 10px;
    border: 1px solid var(--card-border);
}

.geo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.geo-table th {
    background: rgba(255, 255, 255, 0.96);
    color: var(--primary-color);
    padding: 10px 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--card-border);
}

.geo-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.08);
    color: #2b3630;
}

.geo-table tr:last-child td {
    border-bottom: none;
}

.geo-table tr:nth-child(even) td {
    background: rgba(21, 32, 26, 0.02);
}

/* Calculator State & FAQ SEO Grid */
.calc-geo-faq {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.faq-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.faq-card:hover {
    border-color: rgba(15, 107, 62, 0.4);
    transform: translateY(-2px);
}

.faq-card h4 {
    font-size: 1rem;
    color: #15201a;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.faq-card h4 i {
    color: var(--primary-color);
    margin-top: 3px;
}

.faq-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.faq-card p strong {
    color: #39506f;
}

/* ============================================================
   International Language Selector Dropdown & RTL Styles
   ============================================================ */
.lang-selector-dropdown {
    position: relative;
    display: inline-block;
}

.lang-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.16);
    color: var(--text-primary, #15201a);
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}

.lang-selector-btn:hover,
.lang-selector-dropdown.open .lang-selector-btn {
    background: rgba(15, 107, 62, 0.12);
    border-color: var(--primary-color, #0f6b3e);
    color: var(--primary-color, #0f6b3e);
    box-shadow: 0 0 15px rgba(15, 107, 62, 0.18);
}

.lang-selector-btn i.fa-globe {
    color: var(--primary-color, #0f6b3e);
    font-size: 0.95rem;
}

.lang-selector-btn .caret-icon {
    font-size: 0.65rem;
    transition: transform 0.25s ease;
    color: var(--text-secondary, #56605a);
}

.lang-selector-dropdown.open .caret-icon {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    max-height: 380px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(21, 32, 26, 0.144);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(21, 32, 26, 0.14), 0 0 20px rgba(15, 107, 62, 0.1);
    padding: 8px 6px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.lang-selector-dropdown.open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #56605a);
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.08);
    margin-bottom: 4px;
    font-weight: 700;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-primary, #39506f);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.18s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

[dir="rtl"] .lang-option {
    text-align: right;
}

.lang-option:hover {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    transform: translateX(3px);
}

.lang-option.active {
    background: rgba(15, 107, 62, 0.12);
    color: var(--primary-color, #0f6b3e);
    font-weight: 700;
    border-left: 3px solid var(--primary-color, #0f6b3e);
}

.lang-option .flag {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Custom scrollbar for language dropdown */
.lang-dropdown-menu::-webkit-scrollbar {
    width: 5px;
}
.lang-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.lang-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(21, 32, 26, 0.06);
    border-radius: 9999px;
}
.lang-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #0f6b3e);
}

/* RTL (Right to Left) Arabic Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .lang-selector-dropdown .lang-dropdown-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .lang-option:hover {
    transform: translateX(-3px);
}

[dir="rtl"] .lang-option.active {
    border-left: none;
    border-right: 3px solid var(--primary-color, #0f6b3e);
}

[dir="rtl"] .logo {
    direction: ltr;
}

/* ==========================================================================
   Studio Navigation Dropdown & Top Bar Suite Styles
   ========================================================================== */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-studio-pill {
    color: #9c740d !important;
    background: rgba(212, 140, 17, 0.08) !important;
    border: 1px solid rgba(189, 124, 15, 0.3) !important;
    cursor: pointer;
}

.nav-studio-pill:hover,
.nav-dropdown.open .nav-studio-pill,
.nav-dropdown:hover .nav-studio-pill {
    color: #15201a !important;
    background: rgba(212, 140, 17, 0.12) !important;
    border-color: rgba(189, 124, 15, 0.55) !important;
    box-shadow: 0 0 15px rgba(189, 124, 15, 0.18);
    transform: translateY(-1px);
}

.nav-dropdown .caret-icon {
    font-size: 0.65rem;
    transition: transform 0.25s ease;
    color: #9c740d;
    margin-left: 2px;
}

.nav-dropdown.open .caret-icon,
.nav-dropdown:hover .caret-icon {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 290px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(189, 124, 15, 0.3);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(21, 32, 26, 0.14), 0 0 25px rgba(189, 124, 15, 0.12);
    padding: 8px 6px;
    z-index: 1005;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-dropdown-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9c740d;
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
    margin-bottom: 4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--text-primary, #39506f);
    text-decoration: none;
    font-size: 0.84rem;
    border-radius: 8px;
    transition: all 0.18s ease;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.nav-dropdown-item:hover {
    background: rgba(212, 140, 17, 0.12);
    color: #15201a;
    transform: translateX(3px);
}

.nav-dropdown-item i {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.nav-dropdown-item .item-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-dropdown-item .item-title {
    font-weight: 600;
    line-height: 1.25;
    color: #15201a;
    font-size: 0.84rem;
}

.nav-dropdown-item:hover .item-title {
    color: #9c740d;
}

.nav-dropdown-item .item-desc {
    font-size: 0.72rem;
    color: #56605a;
    margin-top: 2px;
    line-height: 1.2;
}

.highlight-gold {
    color: #9c740d !important;
}

.text-orange {
    color: #9c4d0d !important;
}

.text-cyan {
    color: #0d709c !important;
}

.text-purple {
    color: #540d9c !important;
}

/* ==========================================================================
   2026 GIG EARNINGS AUDIT & INCOME BOOSTER TEST (INTERACTIVE QUIZ)
   ========================================================================== */
.top-announcement-bar {
    background: linear-gradient(90deg, rgba(15, 107, 62, 0.12) 0%, rgba(19, 23, 211, 0.12) 50%, rgba(15, 107, 62, 0.12) 100%);
    border-bottom: 1px solid rgba(15, 107, 62, 0.35);
    padding: 10px 24px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: #15201a;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 101;
}
.top-announcement-bar .pulse-dot {
    width: 9px;
    height: 9px;
    background: #0f6b3e;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(15, 107, 62, 0.18);
    animation: pulseGlow 1.8s infinite;
    display: inline-block;
}
.top-announcement-bar a {
    color: #0f6b3e;
    text-decoration: underline;
    margin-left: 6px;
    font-weight: 700;
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* Audit Card in Hero */
.audit-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.3);
    box-shadow: 0 16px 45px -10px rgba(21, 32, 26, 0.14), 0 0 35px rgba(15, 107, 62, 0.15);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s ease;
}
.audit-card-header {
    background: rgba(21, 32, 26, 0.03);
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.audit-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #15201a;
}
.audit-step-indicator {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    padding: 4px 10px;
    border-radius: 999px;
}
.audit-progress-bar-wrap {
    background: rgba(21, 32, 26, 0.06);
    height: 4px;
    width: 100%;
    position: relative;
}
.audit-progress-bar-fill {
    background: linear-gradient(90deg, #0f6b3e, #0e93aa);
    height: 100%;
    width: 25%;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.audit-body {
    padding: 24px;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.audit-step {
    display: none;
    animation: fadeInStep 0.25s ease forwards;
}
.audit-step.active {
    display: block;
}
@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.audit-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.audit-question {
    font-size: 1.3rem;
    font-weight: 700;
    color: #15201a;
    margin-bottom: 6px;
    line-height: 1.25;
}
.audit-subtitle {
    font-size: 0.88rem;
    color: #56605a;
    margin-bottom: 18px;
}

/* Option Cards (Step 1) */
.options-grid-vertical {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.audit-option-card {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    color: #15201a;
}
.audit-option-card:hover {
    background: rgba(15, 107, 62, 0.08);
    border-color: rgba(15, 107, 62, 0.4);
    transform: translateY(-2px);
}
.audit-option-card.selected {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    box-shadow: 0 0 15px rgba(15, 107, 62, 0.18);
}
.audit-option-card .opt-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.audit-option-card .opt-text h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: #15201a;
    margin-bottom: 2px;
}
.audit-option-card .opt-text p {
    font-size: 0.78rem;
    color: #56605a;
    margin: 0;
}

/* Sliders & Presets (Step 2 & 4) */
.earnings-display-box {
    text-align: center;
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 16px;
    padding: 18px 16px;
    margin-bottom: 16px;
}
.earnings-big-val {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #0f6b3e;
    text-shadow: 0 0 25px rgba(15, 107, 62, 0.18);
    line-height: 1.1;
}
.earnings-unit {
    font-size: 0.95rem;
    color: #56605a;
    font-weight: 500;
}
.audit-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #ffffff;
    outline: none;
    -webkit-appearance: none;
    margin-bottom: 16px;
}
.audit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f6b3e;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(15, 107, 62, 0.18);
    transition: transform 0.15s;
}
.audit-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.preset-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.preset-chip {
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2b3630;
    cursor: pointer;
    transition: all 0.2s;
}
.preset-chip:hover {
    border-color: #0f6b3e;
    color: #0f6b3e;
    background: rgba(15, 107, 62, 0.08);
}
.preset-chip.active {
    background: #0f6b3e;
    color: #ffffff;
    border-color: #0f6b3e;
    font-weight: 700;
}

/* App Selectors (Step 3) */
.apps-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: 14px;
}
.app-select-btn {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #15201a;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.2s;
}
.app-select-btn:hover {
    background: rgba(21, 32, 26, 0.06);
    border-color: rgba(21, 32, 26, 0.16);
}
.app-select-btn.selected {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    color: #0f6b3e;
}
.app-select-btn .check-icon {
    margin-left: auto;
    font-size: 0.82rem;
    opacity: 0;
}
.app-select-btn.selected .check-icon {
    opacity: 1;
}
.app-risk-status {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-weight: 600;
}
.app-risk-status.risk-high {
    background: rgba(211, 18, 18, 0.12);
    border: 1px solid rgba(188, 16, 16, 0.3);
    color: #9c0d0d;
}
.app-risk-status.risk-medium {
    background: rgba(212, 140, 17, 0.12);
    border: 1px solid rgba(189, 124, 15, 0.3);
    color: #9c7a0d;
}
.app-risk-status.risk-optimal {
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.3);
    color: #0f6b3e;
}

/* Nav Actions in Audit */
.audit-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(21, 32, 26, 0.08);
}
.btn-audit-prev {
    background: transparent;
    border: none;
    color: #56605a;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s;
}
.btn-audit-prev:hover {
    color: #15201a;
    background: rgba(21, 32, 26, 0.05);
}
.btn-audit-next {
    background: #0f6b3e;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(15, 107, 62, 0.18);
    transition: all 0.2s;
}
.btn-audit-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 107, 62, 0.18);
}

/* Step 5: Audit Results ("Let's Increase Your Income!") */
.audit-result-header {
    text-align: center;
    margin-bottom: 16px;
}
.audit-result-header h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #15201a;
    margin-top: 4px;
}
.result-stat-cards-row {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.result-stat-card {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}
.result-stat-card.boost-card {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    box-shadow: 0 0 20px rgba(15, 107, 62, 0.18);
}
.result-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #56605a;
    font-weight: 600;
    margin-bottom: 3px;
}
.result-stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #15201a;
}
.result-stat-card.boost-card .result-stat-val {
    color: #0f6b3e;
}
.result-stat-card.boost-card .result-stat-label {
    color: #0f6b3e;
}

.leaks-container {
    background: rgba(21, 32, 26, 0.037);
    border: 1px solid rgba(21, 32, 26, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.leaks-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #9c0d0d;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.leak-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: #2b3630;
    margin-bottom: 6px;
    line-height: 1.35;
}
.leak-item:last-child {
    margin-bottom: 0;
}
.leak-item i {
    color: #9b0d0d;
    font-size: 0.82rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.result-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-claim-blueprint {
    background: linear-gradient(135deg, #0f6b3e 0%, #0e93aa 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 12px 18px;
    border-radius: 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(15, 107, 62, 0.18);
    transition: all 0.25s;
}
.btn-claim-blueprint:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 107, 62, 0.18);
}
.result-sub-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.btn-audit-retake, .btn-audit-preview-link {
    flex: 1;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.12);
    color: #2b3630;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-audit-retake:hover, .btn-audit-preview-link:hover {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
}

/* ==========================================================================
   2026 TAX & MILEAGE MASTER TRACKER SHOWCASE SECTION
   ========================================================================== */
.tracker-section {
    padding: 90px 8%;
    position: relative;
}
.tracker-badge {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border-color: rgba(15, 107, 62, 0.4);
}
.tracker-container {
    margin-top: 40px;
    padding: 30px;
}
.tracker-interactive-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 36px;
    align-items: flex-start;
}
.tracker-calc-card {
    background: rgba(21, 32, 26, 0.02);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 18px;
    padding: 24px;
}
.tracker-table-preview-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 35px rgba(21, 32, 26, 0.14);
    overflow: hidden;
}
.spreadsheet-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
}
.spreadsheet-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #15201a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spreadsheet-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(21, 32, 26, 0.096);
    margin-bottom: 16px;
}
.spreadsheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    text-align: left;
}
.spreadsheet-table th {
    background: #ffffff;
    color: #15201a;
    padding: 8px 10px;
    font-weight: 600;
    border: 1px solid rgba(21, 32, 26, 0.08);
    white-space: nowrap;
}
.spreadsheet-table td {
    padding: 8px 10px;
    border: 1px solid rgba(21, 32, 26, 0.08);
    white-space: nowrap;
    color: #2b3630;
}
.spreadsheet-table tr.total-row {
    background: rgba(15, 107, 62, 0.1);
    font-weight: 700;
    color: #0f6b3e;
}
.tracker-feature-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.tracker-feature-pill {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.084);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #15201a;
}
.tracker-feature-pill i {
    color: #0f6b3e;
    font-size: 1.1rem;
}

/* Phase Headers in Reader Sidebar */
.sidebar-phase-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f6b3e;
    padding: 12px 16px 6px 16px;
    background: rgba(15, 107, 62, 0.05);
    border-left: 2px solid #0f6b3e;
    margin-top: 10px;
    margin-bottom: 4px;
}
.sidebar-phase-title:first-child {
    margin-top: 0;
}

/* ==========================================================================
   3-SECOND BATCH ACCEPTANCE SIMULATOR
   ========================================================================== */
.batch-sim-section {
    padding: 80px 8%;
    background: rgba(255, 255, 255, 0.96);
}
.batch-sim-card {
    max-width: 680px;
    margin: 30px auto 0 auto;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(21, 32, 26, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 35px rgba(21, 32, 26, 0.14);
    position: relative;
    overflow: hidden;
}
.batch-sim-timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: #a90e0e;
    width: 100%;
    transition: width 0.1s linear;
}
.batch-sim-screen {
    background: #ffffff;
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 14px;
    padding: 18px;
    margin: 16px 0;
}
.batch-sim-actions {
    display: flex;
    gap: 14px;
}
.btn-sim-decline {
    flex: 1;
    background: rgba(211, 18, 18, 0.12);
    border: 1px solid #bc1010;
    color: #9c0d0d;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-sim-accept {
    flex: 1;
    background: #0f6b3e;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-sim-decline:hover {
    background: #a90e0e;
    color: #ffffff;
}
.btn-sim-accept:hover {
    background: #0f6b3e;
}

@media (max-width: 1024px) {
    .tracker-interactive-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .apps-selector-grid {
        grid-template-columns: 1fr;
    }
    .result-stat-cards-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shopper Pro Gear & Affiliate Showcase Section
   ========================================================================== */
.gear-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.gear-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
    margin-bottom: 30px;
}

.gear-card {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.gear-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 107, 62, 0.18);
}

.gear-card.featured-gear {
    border-color: rgba(15, 107, 62, 0.4);
    background: linear-gradient(180deg, rgba(15, 107, 62, 0.06) 0%, rgba(21, 32, 26, 0.02) 100%);
}

.gear-badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.gear-category-badge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    background: rgba(15, 107, 62, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(15, 107, 62, 0.3);
}

.gear-roi-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(212, 140, 17, 0.12);
    color: #9c740d;
    border: 1px solid rgba(189, 124, 15, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gear-visual {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(15, 107, 62, 0.1);
    border: 1px solid rgba(15, 107, 62, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 18px;
}

.gear-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
}

.gear-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #9c740d;
    margin-bottom: 14px;
}

.gear-rating-row span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.gear-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 18px;
}

.gear-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.gear-specs-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.gear-specs-list li i {
    color: var(--primary-color);
    margin-top: 3px;
    flex-shrink: 0;
}

.gear-specs-list li strong {
    color: var(--text-primary);
}

.btn-affiliate-amazon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #aa700e 0%, #aa610e 100%);
    color: #ffffff;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(189, 124, 15, 0.18);
    width: 100%;
    text-align: center;
}

.btn-affiliate-amazon:hover {
    background: linear-gradient(135deg, #aa7e0e 0%, #aa700e 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(189, 124, 15, 0.18);
    color: #ffffff;
}

.gear-tax-banner {
    background: rgba(15, 107, 62, 0.08);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.gear-tax-banner i {
    font-size: 1.6rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .gear-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .gear-grid {
        grid-template-columns: 1fr;
    }
    .gear-tax-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Paywall, Content Gating & License Activation Styles
   ========================================================================== */

/* Tab Access Badges in Sidebar */
.sidebar-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-access-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tab-access-pill.preview-pill {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.3);
}

.tab-access-pill.lock-pill {
    background: rgba(211, 18, 18, 0.12);
    color: #9c0d0d;
    border: 1px solid rgba(188, 16, 16, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sidebar-tab.is-unlocked .tab-access-pill.lock-pill {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.3);
}

/* Content Controls Header Upgrades */
.content-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
    flex-wrap: wrap;
    gap: 12px;
}

.chapter-info-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chapter-access-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chapter-access-badge.preview-tag {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.3);
}

.chapter-access-badge.locked-tag {
    background: rgba(211, 18, 18, 0.12);
    color: #9b0d0d;
    border: 1px solid rgba(188, 16, 16, 0.35);
}

.chapter-access-badge.unlocked-tag {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.4);
}

.reader-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-activate-license {
    background: linear-gradient(135deg, rgba(212, 140, 17, 0.12) 0%, rgba(206, 118, 17, 0.12) 100%);
    border: 1px solid rgba(189, 124, 15, 0.4);
    color: #9c740d;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.btn-activate-license:hover {
    background: linear-gradient(135deg, rgba(212, 140, 17, 0.12) 0%, rgba(206, 118, 17, 0.12) 100%);
    border-color: #bd8c0f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(189, 124, 15, 0.18);
}

.pro-unlocked-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.35);
    color: #0f6b3e;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
}

.btn-reset-pro-status {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-reset-pro-status:hover {
    opacity: 1;
    color: #9c0d0d;
}

/* Paywall Overlay & Card */
.paywall-overlay {
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    animation: fadeInPaywall 0.3s ease-out;
}

@keyframes fadeInPaywall {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.paywall-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(188, 16, 16, 0.35);
    box-shadow: 0 20px 50px rgba(21, 32, 26, 0.14), 0 0 30px rgba(188, 16, 16, 0.1);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 620px;
    width: 100%;
    text-align: center;
    position: relative;
    backdrop-filter: blur(16px);
}

.paywall-icon-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(211, 18, 18, 0.12) 0%, rgba(198, 32, 32, 0.12) 100%);
    border: 1px solid rgba(188, 16, 16, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #9c0d0d;
    box-shadow: 0 0 25px rgba(188, 16, 16, 0.18);
}

.paywall-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-gold);
    background: rgba(212, 140, 17, 0.12);
    border: 1px solid rgba(189, 124, 15, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.paywall-card h3 {
    font-size: 1.6rem;
    color: #15201a;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.paywall-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.paywall-perks-box {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: left;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paywall-perks-box .perk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #39506f;
}

.paywall-perks-box .perk-item i {
    color: var(--primary-color);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.paywall-cta-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-paywall-buy {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff !important;
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(15, 107, 62, 0.18);
    transition: all 0.25s ease;
}

.btn-paywall-buy:hover {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15, 107, 62, 0.18);
}

.btn-paywall-license {
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.16);
    color: #2b3630;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-paywall-license:hover {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
    border-color: rgba(21, 32, 26, 0.16);
}

.paywall-secure-notice {
    margin-top: 18px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* License Activation Modal */
.license-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: fadeInModal 0.2s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.license-modal-card {
    background: linear-gradient(145deg, #ffffff 0%, #ffffff 100%);
    border: 1px solid rgba(15, 107, 62, 0.35);
    box-shadow: 0 25px 60px rgba(21, 32, 26, 0.14), 0 0 30px rgba(15, 107, 62, 0.15);
    border-radius: 20px;
    padding: 36px 30px;
    max-width: 480px;
    width: 100%;
    position: relative;
    text-align: center;
}

.license-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.license-modal-close:hover {
    color: #15201a;
}

.license-modal-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0f6b3e;
}

.license-modal-header h3 {
    font-size: 1.4rem;
    color: #15201a;
    margin-bottom: 8px;
}

.license-modal-header p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 22px;
}

.license-input-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.license-input-wrapper input {
    flex: 1;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.16);
    padding: 12px 16px;
    border-radius: 10px;
    color: #15201a;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.license-input-wrapper input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(15, 107, 62, 0.18);
}

.btn-submit-license {
    background: var(--primary-color);
    color: #15201a;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit-license:hover {
    background: #0f6b3e;
}

.license-error-msg {
    color: #9c0d0d;
    font-size: 0.82rem;
    margin-top: 6px;
    margin-bottom: 12px;
}

.license-help-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 14px;
}

.license-help-text a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Bundle Protected Link Status */
.btn-bundle-view.is-locked,
.btn-bundle-print.is-locked {
    position: relative;
}

.btn-bundle-view.is-locked::after,
.btn-bundle-print.is-locked::after {
    content: " 🔒";
    font-size: 0.85rem;
}

.btn-secondary-large.is-vip-locked {
    border-color: rgba(189, 124, 15, 0.45) !important;
    background: rgba(212, 140, 17, 0.08) !important;
    color: #9c8a0d !important;
}

.btn-secondary-large.is-vip-locked:hover {
    border-color: #bd8c0f !important;
    background: rgba(212, 140, 17, 0.12) !important;
    color: #15201a !important;
}

/* ==========================================================================
   Hero Featured 3D Book Showcase Card Styles
   ========================================================================== */

.hero-book-showcase-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    width: 100%;
}

.book-showcase-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.4);
    box-shadow: 0 25px 60px rgba(21, 32, 26, 0.14), 0 0 35px rgba(15, 107, 62, 0.18), 0 0 25px rgba(189, 104, 15, 0.12);
    border-radius: 24px;
    padding: 28px 24px;
    max-width: 460px;
    width: 100%;
    position: relative;
    backdrop-filter: blur(16px);
}

.book-3d-visual {
    position: relative;
    margin: 10px auto 20px;
    max-width: 320px;
    height: 235px;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 45%, #0f6b3e 85%, #ffffff 100%);
    border-radius: 16px;
    border: 2px solid rgba(15, 107, 62, 0.6);
    box-shadow: 15px 20px 40px rgba(21, 32, 26, 0.14), 0 0 30px rgba(15, 107, 62, 0.18), 0 0 15px rgba(189, 104, 15, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    overflow: hidden;
    transform: rotateY(-8deg) rotateX(4deg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.book-3d-visual:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-4px);
    box-shadow: 0 25px 50px rgba(21, 32, 26, 0.14), 0 0 45px rgba(15, 107, 62, 0.18), 0 0 25px rgba(189, 104, 15, 0.18);
}

.book-3d-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(90deg, rgba(21, 32, 26, 0.06) 0%, rgba(21, 32, 26, 0.045) 100%);
    border-right: 1px solid rgba(21, 32, 26, 0.12);
}

/* Instacart Shopping Bag & Carrot Emblem Styles */
.book-cover-emblem {
    margin-left: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.instacart-bag-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 10px rgba(16, 185, 129, 0.4));
}

.instacart-bag-emblem svg {
    width: 44px;
    height: 44px;
}

.book-emblem-badge {
    display: flex;
    flex-direction: column;
}

.book-emblem-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9c560d;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.book-emblem-sub {
    font-size: 0.62rem;
    color: #0f6b3e;
    font-weight: 500;
}

.pdf-cover-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.pdf-cover-logo svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 6px 14px rgba(16, 185, 129, 0.35));
}

.pdf-cover-brand-title {
    margin-top: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f6b3e;
}

.pdf-cover-brand-title span {
    color: #9c560d;
}

.book-tag-pill {
    align-self: flex-start;
    margin-left: 18px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.4);
}

.book-cover-title {
    margin-left: 18px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: #15201a;
    line-height: 1.25;
}

.book-cover-title span {
    color: var(--primary-color);
}

.book-cover-meta {
    margin-left: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.72rem;
    color: #56605a;
}

.book-showcase-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.book-badge-item {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.096);
    color: #39506f;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.book-badge-item i {
    color: var(--primary-color);
}

.book-rating-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.book-stars {
    color: #9c740d;
    font-size: 0.85rem;
}

.book-rating-text {
    font-size: 0.82rem;
    color: #56605a;
}

.book-rating-text strong {
    color: #15201a;
}

.book-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-book-preview {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e !important;
    border: 1px solid rgba(15, 107, 62, 0.4);
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.btn-book-preview:hover {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(15, 107, 62, 0.18);
}

.btn-book-buy {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff !important;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(15, 107, 62, 0.18);
    transition: all 0.25s ease;
}

.btn-book-buy:hover {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Curriculum Showcase Section Styles
   ========================================================================== */

.curriculum-section {
    padding: 70px 8%;
    position: relative;
}

.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 36px;
}

.curriculum-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 18px;
    padding: 24px 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.curriculum-card:hover {
    border-color: rgba(15, 107, 62, 0.35);
    background: rgba(255, 255, 255, 0.96);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(21, 32, 26, 0.09);
}

.curriculum-phase-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.curriculum-card h3 {
    font-size: 1.25rem;
    color: #15201a;
    margin-bottom: 12px;
}

.curriculum-chapters-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.curriculum-chapters-list li {
    font-size: 0.88rem;
    color: #2b3630;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.curriculum-chapters-list li i {
    color: var(--primary-color);
    font-size: 0.85rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.curriculum-banner-card {
    margin-top: 40px;
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.4);
    border-radius: 20px;
    padding: 36px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .navbar {
        padding: 12px 4%;
        flex-wrap: wrap;
        gap: 10px;
    }
    .nav-links {
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 4px;
    }
}

/* ================================================================
   1099 TAX, DEADHEAD MILEAGE & ANNUAL BREAKDOWN TRACKER STYLES
   ================================================================ */

.calculator-main-content {
    padding-top: 68px;
    min-height: 100vh;
}

/* Tab navigation between Prop 22 Guarantee & 1099 Tax Tracker */
.calc-tool-nav-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
    z-index: 990;
    display: flex;
    justify-content: center;
    margin: 0 auto 30px;
    padding: 12px 20px 14px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 107, 62, 0.16);
    box-shadow: 0 8px 30px rgba(21, 32, 26, 0.135);
}

.calc-tool-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.144);
    border-radius: 9999px;
    padding: 6px;
    gap: 8px;
    box-shadow: 0 8px 30px rgba(21, 32, 26, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.calc-tool-tabs::-webkit-scrollbar {
    display: none;
}

.calc-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid transparent;
    color: #56605a;
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}

.calc-tab-btn:hover {
    color: #15201a;
    background: rgba(21, 32, 26, 0.05);
}

.calc-tab-btn.active {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(16, 175, 202, 0.12) 100%);
    border-color: rgba(15, 107, 62, 0.6);
    color: #15201a;
    box-shadow: 0 4px 18px rgba(15, 107, 62, 0.18);
}

.calc-tab-btn i {
    font-size: 1rem;
    color: var(--primary-color);
}

.calc-tab-btn.active i {
    color: #0f6b3e;
}

.tab-badge-pill {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(21, 32, 26, 0.06);
    color: #2b3630;
}

.calc-tab-btn.active .tab-badge-pill {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.5);
}

/* Timeframe breakdown switcher pills (Weekly, Monthly, Annual) */
.timeframe-bar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(21, 32, 26, 0.025);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.timeframe-title-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2b3630;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeframe-pill-group {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.timeframe-pill {
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #56605a;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeframe-pill:hover {
    color: #15201a;
    background: rgba(21, 32, 26, 0.06);
}

.timeframe-pill.active {
    background: var(--primary-color);
    color: #022c22;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(15, 107, 62, 0.18);
}

/* Primary Total Tax Box */
.tax-liability-card {
    background: linear-gradient(135deg, rgba(211, 18, 18, 0.1) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(188, 16, 16, 0.35);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 8px 30px rgba(21, 32, 26, 0.105);
}

.tax-liability-card.green-theme {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-color: rgba(15, 107, 62, 0.4);
}

.tax-card-main-amount {
    font-size: 2.3rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #9c0d0d;
    margin: 8px 0;
}

.tax-card-main-amount.green-val {
    color: #0f6b3e;
}

/* Grid of Mini Metric Cards */
.tax-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tax-metric-card {
    background: rgba(21, 32, 26, 0.03);
    border: 1px solid rgba(21, 32, 26, 0.084);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.tax-metric-title {
    font-size: 0.78rem;
    color: #56605a;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tax-metric-val {
    font-size: 1.18rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: #15201a;
}

.tax-metric-val.highlight {
    color: #0f6b3e;
}

.tax-metric-val.deduct {
    color: #0d4d9c;
}

.tax-metric-val.gold {
    color: #9c740d;
}

/* Deadhead Return Miles Highlight Shield Card */
.deadhead-shield-box {
    background: linear-gradient(135deg, rgba(16, 175, 202, 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 163, 189, 0.4);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 6px 25px rgba(15, 163, 189, 0.15);
}

.deadhead-shield-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.deadhead-shield-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0d709c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deadhead-shield-amount {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: #15201a;
    margin: 4px 0;
}

.deadhead-shield-desc {
    font-size: 0.8rem;
    color: #2b3630;
    line-height: 1.5;
    margin: 0;
}

/* Quarterly Form 1040-ES Schedule Grid */
.quarterly-schedule-wrap {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
}

.quarterly-header-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #39506f;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.quarterly-schedule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.quarterly-card {
    background: rgba(21, 32, 26, 0.025);
    border: 1px solid rgba(21, 32, 26, 0.08);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}

.quarterly-q-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0d709c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.quarterly-due-date {
    font-size: 0.75rem;
    color: #56605a;
    margin-bottom: 6px;
}

.quarterly-amount {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: #9c0d0d;
}

/* Multi-Week Logger Card & Interactive Table */
.tax-logger-card {
    margin-top: 40px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.35);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 15px 45px rgba(21, 32, 26, 0.14);
}

.tax-logger-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
    flex-wrap: wrap;
    gap: 14px;
}

.tax-logger-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #15201a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tax-quick-form-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(21, 32, 26, 0.02);
    border: 1px solid rgba(21, 32, 26, 0.084);
    border-radius: 12px;
    padding: 16px;
    align-items: flex-end;
}

.form-item-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-item-wrap label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #2b3630;
    white-space: nowrap;
}

.form-item-wrap input {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.16);
    border-radius: 8px;
    padding: 9px 12px;
    color: #15201a;
    font-family: var(--font-main);
    font-size: 0.88rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.form-item-wrap input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(15, 107, 62, 0.18);
}

.btn-add-week {
    padding: 9px 18px;
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 38px;
    transition: all 0.2s ease;
}

.btn-add-week:hover {
    box-shadow: 0 4px 15px rgba(15, 107, 62, 0.18);
    transform: translateY(-1px);
}

.tax-table-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.actions-left, .actions-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-action-pill {
    padding: 7px 14px;
    background: rgba(21, 32, 26, 0.04);
    border: 1px solid rgba(21, 32, 26, 0.144);
    border-radius: 8px;
    color: #2b3630;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-action-pill:hover {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
}

.btn-action-pill.btn-emerald {
    background: rgba(15, 107, 62, 0.12);
    border-color: rgba(15, 107, 62, 0.4);
    color: #0f6b3e;
}

.btn-action-pill.btn-emerald:hover {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
}

.btn-delete-row {
    background: transparent;
    border: none;
    color: #56605a;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s;
}

.btn-delete-row:hover {
    color: #9b0d0d;
}

.tax-log-table tr.summary-row {
    background: rgba(15, 107, 62, 0.12) !important;
    font-weight: 700;
    border-top: 2px solid rgba(15, 107, 62, 0.4);
}

.tax-log-table tr.summary-row td {
    color: #15201a;
    font-weight: 700;
}

.tax-log-table tr.projection-row {
    background: rgba(16, 175, 202, 0.1) !important;
    font-weight: 700;
    border-top: 1px dashed rgba(15, 163, 189, 0.4);
}

/* 12-Month Selector Grid & Month Cards */
.tax-months-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 14px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.months-sec-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #15201a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.months-sec-hint {
    font-size: 0.8rem;
    color: #56605a;
}

.tax-months-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .tax-months-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .tax-months-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .tax-months-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.month-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 12px;
    padding: 12px 10px;
    cursor: pointer;
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    user-select: none;
}

.month-card:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(15, 107, 62, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(21, 32, 26, 0.09);
}

.month-card.active {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(16, 175, 202, 0.12) 100%);
    border: 2px solid #0f6b3e;
    box-shadow: 0 0 16px rgba(15, 107, 62, 0.18);
}

.month-card.has-data {
    border-color: rgba(15, 107, 62, 0.45);
}

.month-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.month-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #15201a;
}

.month-card-quarter {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(21, 32, 26, 0.06);
    color: #56605a;
}

.month-card.active .month-card-quarter {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
}

.month-card-gross {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f6b3e;
    margin-bottom: 2px;
}

.month-card.empty .month-card-gross {
    font-size: 0.78rem;
    font-weight: 500;
    color: #56605a;
}

.month-card-subinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #56605a;
}

.month-card-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(17, 91, 212, 0.12);
    color: #0d4d9c;
}

.month-card.empty .month-card-badge {
    background: rgba(21, 32, 26, 0.05);
    color: #56605a;
}

/* Active Month Workspace Card */
.active-month-workspace {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 24px;
}

.active-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
    flex-wrap: wrap;
    gap: 12px;
}

.month-heading-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.month-heading-group h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #15201a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-quarter {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.35);
}

.month-mode-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-mode-tab {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.144);
    color: #2b3630;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-mode-tab:hover {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
}

.btn-mode-tab.active {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    border-color: #0f6b3e;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(15, 107, 62, 0.18);
}

.btn-mode-tab.btn-clear-single-month {
    background: rgba(211, 18, 18, 0.1);
    border-color: rgba(188, 16, 16, 0.25);
    color: #9c0d0d;
}

.btn-mode-tab.btn-clear-single-month:hover {
    background: rgba(211, 18, 18, 0.12);
    color: #9c0d0d;
}

/* Month KPI Banner */
.month-kpi-banner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .month-kpi-banner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 550px) {
    .month-kpi-banner {
        grid-template-columns: repeat(2, 1fr);
    }
}

.month-kpi-box {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 10px;
    padding: 10px 14px;
}

.month-kpi-box .kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #56605a;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.month-kpi-box .kpi-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #15201a;
}

.month-kpi-box .kpi-value.green { color: #0f6b3e; }
.month-kpi-box .kpi-value.blue { color: #0d4d9c; }
.month-kpi-box .kpi-value.red { color: #9c0d0d; }

.form-mode-desc {
    font-size: 0.82rem;
    color: #2b3630;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 107, 62, 0.07);
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid #0f6b3e;
}

.btn-bulk-save {
    background: linear-gradient(135deg, #0e75aa 0%, #0c6698 100%) !important;
}

.btn-bulk-save:hover {
    box-shadow: 0 4px 15px rgba(15, 128, 186, 0.18) !important;
}

/* Annual Recap Card */
.annual-tax-master-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 81, 189, 0.35);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(21, 32, 26, 0.12);
}

.master-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(21, 32, 26, 0.096);
}

.annual-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: #15201a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.annual-recap-table th, .annual-recap-table td {
    font-size: 0.84rem;
}

.annual-recap-table tr.grand-total-row {
    background: rgba(15, 107, 62, 0.12) !important;
    font-weight: 800;
    border-top: 2px solid #0f6b3e;
}

.annual-recap-table tr.grand-total-row td {
    color: #15201a;
    font-size: 0.88rem;
}

.status-badge-active {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
}

.status-badge-empty {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(21, 32, 26, 0.06);
    color: #56605a;
}

.btn-goto-month {
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid rgba(21, 32, 26, 0.144);
    color: #2b3630;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-goto-month:hover {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    color: #0f6b3e;
}

.quarterly-tax-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .quarterly-tax-breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .quarterly-tax-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.tax-log-table tr.projection-row td {
    color: #0d709c;
    font-weight: 700;
}

/* Tab button colors for expenses & review */
.btn-open-expenses-tab {
    background: rgba(117, 17, 212, 0.12) !important;
    border-color: rgba(104, 15, 189, 0.35) !important;
    color: #540d9c !important;
}
.btn-open-expenses-tab:hover {
    background: rgba(117, 17, 212, 0.12) !important;
    color: #510d9c !important;
}

.btn-complete-month-tab {
    background: rgba(16, 175, 202, 0.12) !important;
    border-color: rgba(15, 163, 189, 0.35) !important;
    color: #0d709c !important;
}
.btn-complete-month-tab:hover {
    background: rgba(16, 175, 202, 0.12) !important;
    color: #0d6b9c !important;
}

/* Percentage Badges inside Table cells */
.pct-pill {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}
.pct-pill.blue {
    background: rgba(17, 91, 212, 0.12);
    color: #0d4d9c;
    border: 1px solid rgba(15, 81, 189, 0.3);
}
.pct-pill.purple {
    background: rgba(117, 17, 212, 0.12);
    color: #540d9c;
    border: 1px solid rgba(104, 15, 189, 0.3);
}
.pct-pill.green {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.3);
}

/* Live Deduction Feedback Bar */
.live-deduction-feedback-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.3);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
}
@media (max-width: 800px) {
    .live-deduction-feedback-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .live-deduction-feedback-bar {
        grid-template-columns: 1fr;
    }
}
.live-fb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-fb-item.highlight-blue { color: #0d4d9c; }
.live-fb-item.highlight-purple { color: #540d9c; }
.live-fb-item.highlight-green { color: #0f6b3e; }
.live-fb-item.highlight-gold { color: #9c740d; }

/* Monthly Business Expenses Modal Card */
.monthly-expenses-modal-card {
    max-width: 680px !important;
    width: 92% !important;
    padding: 26px !important;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-exp-tip-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(15, 107, 62, 0.08);
    border: 1px solid rgba(15, 107, 62, 0.3);
    border-radius: 10px;
    font-size: 0.8rem;
    color: #39506f;
    line-height: 1.45;
    margin-bottom: 18px;
}
.modal-exp-tip-box i {
    font-size: 1rem;
    margin-top: 2px;
}

.modal-exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 640px) {
    .modal-exp-grid {
        grid-template-columns: 1fr;
    }
}

.modal-exp-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-exp-card.full-span {
    grid-column: 1 / -1;
}

.modal-exp-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.exp-card-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: #15201a;
    display: flex;
    align-items: center;
    gap: 7px;
}
.exp-calculated-badge {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    padding: 2px 8px;
    border-radius: 4px;
}

.modal-exp-inputs-split {
    display: flex;
    gap: 10px;
}
.split-input-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.split-input-item label {
    font-size: 0.72rem;
    color: #56605a;
    font-weight: 600;
}
.split-input-item input,
.modal-exp-card input {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.16);
    border-radius: 8px;
    padding: 8px 10px;
    color: #15201a;
    font-family: inherit;
    font-size: 0.86rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.split-input-item input:focus,
.modal-exp-card input:focus {
    border-color: #0f6b3e;
    box-shadow: 0 0 0 2px rgba(15, 107, 62, 0.18);
}
.exp-field-note {
    font-size: 0.72rem;
    color: #56605a;
    line-height: 1.3;
}

.modal-exp-summary-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    text-align: center;
}
@media (max-width: 500px) {
    .modal-exp-summary-banner {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}
.exp-sum-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.exp-sum-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #56605a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.exp-sum-val {
    font-size: 1.15rem;
    font-weight: 800;
    font-family: var(--font-display, inherit);
}
.exp-sum-val.green { color: #0f6b3e; }
.exp-sum-val.gold { color: #9c740d; }
.exp-sum-val.blue { color: #0d4d9c; }

.modal-exp-reminder-opt {
    margin-bottom: 18px;
    padding: 0 4px;
}
.reminder-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #2b3630;
    cursor: pointer;
    user-select: none;
}
.reminder-checkbox-label input[type="checkbox"] {
    accent-color: #0f6b3e;
    width: 16px;
    height: 16px;
}

.modal-exp-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
@media (max-width: 500px) {
    .modal-exp-actions {
        flex-direction: column;
    }
}
.modal-exp-actions .btn-save-exp {
    flex: 2;
}
.modal-exp-actions .btn-secondary-large {
    flex: 1;
}

/* Responsive adjustments for Tax Section */
@media (max-width: 1200px) {
    .tax-quick-form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .tax-quick-form-grid .btn-add-week {
        grid-column: span 3;
        justify-content: center;
    }
}

@media (max-width: 860px) {
    .quarterly-schedule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tax-metrics-grid {
        grid-template-columns: 1fr;
    }
    .calc-tool-tabs {
        flex-direction: column;
        border-radius: 16px;
        width: 100%;
    }
    .calc-tab-btn {
        justify-content: center;
    }
    .timeframe-bar-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .tax-quick-form-grid {
        grid-template-columns: 1fr;
    }
    .tax-quick-form-grid .btn-add-week {
        grid-column: span 1;
    }
}

/* ===================================================
   VIP Community Section & 2-Tier Pricing Modern Styles
   =================================================== */

.community-section, .pricing-section {
    padding: 80px 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    scroll-margin-top: 100px;
}

#pricing {
    scroll-margin-top: 100px;
}

.community-badge {
    background: rgba(16, 175, 202, 0.12) !important;
    color: #0d709c !important;
    border: 1px solid rgba(15, 135, 189, 0.4) !important;
}

.pricing-badge {
    background: rgba(212, 140, 17, 0.12) !important;
    color: #9c740d !important;
    border: 1px solid rgba(189, 140, 15, 0.4) !important;
}

/* Community Grid */
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin: 40px 0 35px 0;
}

.community-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.community-card:hover {
    border-color: rgba(15, 163, 189, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(21, 32, 26, 0.12);
}

.community-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(16, 175, 202, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #0d709c;
    margin-bottom: 16px;
}

.pulse-green { background: rgba(15, 107, 62, 0.12); color: #0f6b3e; border: 1px solid rgba(15, 107, 62, 0.3); }
.pulse-gold { background: rgba(212, 140, 17, 0.12); color: #9c660d; border: 1px solid rgba(189, 124, 15, 0.3); }
.pulse-blue { background: rgba(17, 91, 212, 0.12); color: #0d4d9c; border: 1px solid rgba(15, 81, 189, 0.3); }
.pulse-purple { background: rgba(117, 17, 212, 0.12); color: #540d9c; border: 1px solid rgba(104, 15, 189, 0.3); }

.community-card h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    color: #15201a;
    margin-bottom: 10px;
}

.community-card p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.6;
    margin-bottom: 18px;
    flex-grow: 1;
}

.community-tag {
    align-self: flex-start;
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.12);
    color: #56605a;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
}

/* Community Banner */
.community-banner {
    background: linear-gradient(135deg, rgba(16, 175, 202, 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 135, 189, 0.35);
    border-radius: 18px;
    padding: 32px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.community-banner-content h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: #15201a;
    margin-bottom: 8px;
}

.community-banner-content p {
    color: #2b3630;
    font-size: 0.95rem;
    max-width: 650px;
}

.community-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0d709c;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0f6b3e;
    box-shadow: 0 0 10px rgba(15, 107, 62, 0.18);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.btn-community-join {
    background: linear-gradient(135deg, #0e75aa, #0c6698);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.98rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(15, 128, 186, 0.18);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-community-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 128, 186, 0.18);
}

/* ===================================================
   Single & 2-Tier Pricing Section
   =================================================== */

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 620px;
    margin: 45px auto 0 auto;
    gap: 30px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.pricing-grid.two-tier {
    grid-template-columns: 1fr 1.15fr;
    max-width: 1000px;
}

.pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.pricing-card:hover {
    border-color: rgba(21, 32, 26, 0.16);
    box-shadow: 0 15px 40px rgba(21, 32, 26, 0.14);
}

.featured-tier {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 2px solid #bd7c0f;
    box-shadow: 0 0 35px rgba(189, 124, 15, 0.18);
    transform: scale(1.02);
}

.featured-tier:hover {
    border-color: #bd8c0f;
    box-shadow: 0 0 45px rgba(189, 124, 15, 0.18);
}

.popular-ribbon {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #aa700e, #aa610e);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(189, 124, 15, 0.18);
    white-space: nowrap;
}

.pricing-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tier-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: #15201a;
}

.tier-badge {
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid rgba(21, 32, 26, 0.16);
    color: #56605a;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.gold-badge {
    background: rgba(212, 140, 17, 0.12) !important;
    border-color: rgba(189, 124, 15, 0.4) !important;
    color: #9c660d !important;
}

.price-container {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.price-container .currency {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-container .amount {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 900;
    color: #15201a;
    line-height: 1;
}

.price-container .frequency {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-left: 6px;
}

.pricing-desc {
    color: #2b3630;
    font-size: 0.94rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.pricing-divider {
    border: none;
    border-top: 1px solid rgba(21, 32, 26, 0.096);
    margin-bottom: 24px;
}

.gold-divider {
    border-top: 1px solid rgba(189, 124, 15, 0.25) !important;
}

.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 35px;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.94rem;
    color: #39506f;
    line-height: 1.5;
}

.pricing-features li i {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.pricing-features li.disabled {
    color: #56605a;
    text-decoration: line-through;
}

.highlight-feature {
    background: rgba(212, 140, 17, 0.08);
    border: 1px solid rgba(189, 124, 15, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
}

.text-gold { color: #9c660d !important; }
.text-green { color: #0f6b3e !important; }
.text-blue { color: #0d709c !important; }
.text-muted { color: #56605a !important; }

.pricing-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.btn-pricing-standard {
    background: linear-gradient(135deg, #0f6b3e, #0f6b3e);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 16px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 18px rgba(15, 107, 62, 0.18);
    transition: all 0.2s ease;
}

.btn-pricing-standard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 107, 62, 0.18);
}

.btn-pricing-vip {
    background: linear-gradient(135deg, #aa700e, #aa610e);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.12rem;
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 24px rgba(189, 124, 15, 0.18);
    transition: all 0.2s ease;
}

.btn-pricing-vip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(189, 124, 15, 0.18);
}

.guarantee-micro {
    font-size: 0.82rem;
    color: #56605a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Pricing Trust Row */
.pricing-trust-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 45px;
    padding: 22px 24px;
    background: rgba(21, 32, 26, 0.02);
    border: 1px solid rgba(21, 32, 26, 0.08);
    border-radius: 14px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #2b3630;
    font-weight: 500;
}

@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .featured-tier {
        transform: none;
    }
    .community-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-community-join {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   DIRECT ON-SITE CHECKOUT MODAL & PAYMENT STYLES (NO EXTERNAL REDIRECT)
   ========================================================================== */
.checkout-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 16px;
    animation: fadeInCheckout 0.22s ease-out;
}

@keyframes fadeInCheckout {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.checkout-modal-card {
    background: linear-gradient(155deg, #ffffff 0%, #ffffff 100%);
    border: 1px solid rgba(15, 107, 62, 0.35);
    box-shadow: 0 25px 65px rgba(21, 32, 26, 0.14), 0 0 35px rgba(15, 107, 62, 0.15);
    border-radius: 22px;
    padding: 30px 28px;
    max-width: 640px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    color: #15201a;
}

.checkout-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid rgba(21, 32, 26, 0.144);
    color: #56605a;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkout-modal-close:hover {
    background: rgba(211, 18, 18, 0.12);
    border-color: rgba(188, 16, 16, 0.5);
    color: #9c0d0d;
}

.checkout-modal-header {
    text-align: center;
    margin-bottom: 22px;
    padding-right: 24px;
}

.checkout-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.4);
    color: #0f6b3e;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.checkout-modal-header h3 {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: #15201a;
}

.checkout-modal-header p {
    font-size: 0.88rem;
    color: #56605a;
    line-height: 1.45;
}

/* Tier Selection Box */
.checkout-tier-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.checkout-tier-option {
    background: rgba(21, 32, 26, 0.03);
    border: 2px solid rgba(21, 32, 26, 0.12);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: left;
}

.checkout-tier-option:hover {
    background: rgba(21, 32, 26, 0.06);
    border-color: rgba(21, 32, 26, 0.16);
}

.checkout-tier-option.active {
    background: rgba(15, 107, 62, 0.08);
    border-color: #0f6b3e;
    box-shadow: 0 0 18px rgba(15, 107, 62, 0.18);
}

.checkout-tier-option.active.tier-vip-active {
    background: rgba(212, 140, 17, 0.09);
    border-color: #bd7c0f;
    box-shadow: 0 0 18px rgba(189, 124, 15, 0.18);
}

.checkout-tier-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #39506f;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.checkout-tier-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f6b3e;
}

.checkout-tier-option.active.tier-vip-active .checkout-tier-price {
    color: #9c740d;
}

.checkout-tier-badge {
    font-size: 0.7rem;
    color: #56605a;
    margin-top: 2px;
}

/* Payment Method Tabs */
.checkout-tabs-header {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.96);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid rgba(21, 32, 26, 0.096);
    margin-bottom: 18px;
    overflow-x: auto;
}

.checkout-tab-btn {
    flex: 1;
    min-width: 90px;
    background: none;
    border: none;
    color: #56605a;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.checkout-tab-btn:hover {
    color: #15201a;
    background: rgba(21, 32, 26, 0.04);
}

.checkout-tab-btn.active {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 107, 62, 0.18);
}

.checkout-tab-btn.tab-paddle.active {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    box-shadow: 0 4px 14px rgba(15, 107, 62, 0.18);
}

.paddle-checkout-btn {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 50%, #0f6b3e 100%) !important;
    box-shadow: 0 4px 18px rgba(15, 107, 62, 0.18);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.paddle-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(15, 107, 62, 0.18);
}

.paddle-supported-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    color: #56605a;
    font-size: 0.8rem;
}

.paddle-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(21, 32, 26, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(21, 32, 26, 0.096);
}

/* Payment Method Content Area */
.checkout-method-panel {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.payment-method-desc {
    font-size: 0.85rem;
    color: #2b3630;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-details-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(21, 32, 26, 0.045);
    border: 1px solid rgba(21, 32, 26, 0.08);
    border-radius: 10px;
    padding: 9px 12px;
    gap: 10px;
}

.payment-detail-label {
    font-size: 0.78rem;
    color: #56605a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-width: 100px;
}

.payment-detail-value {
    font-size: 0.9rem;
    color: #15201a;
    font-family: monospace;
    word-break: break-all;
    flex: 1;
    text-align: right;
}

.btn-copy-field {
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid rgba(21, 32, 26, 0.16);
    color: #39506f;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-copy-field:hover {
    background: rgba(15, 107, 62, 0.12);
    border-color: rgba(15, 107, 62, 0.5);
    color: #0f6b3e;
}

.btn-copy-field.copied {
    background: #0f6b3e !md;
    background: #0f6b3e;
    color: #ffffff;
    border-color: #0f6b3e;
}

.payment-hint-box {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(212, 140, 17, 0.08);
    border: 1px solid rgba(189, 124, 15, 0.25);
    font-size: 0.8rem;
    color: #9c7a0d;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.payment-action-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    background: linear-gradient(135deg, #0e70aa 0%, #094473 100%);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-action-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(14, 117, 179, 0.18);
}


/* Success State Screen */
.checkout-success-view {
    text-align: center;
    padding: 10px 0;
}

.success-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(15, 107, 62, 0.12);
    border: 2px solid rgba(15, 107, 62, 0.5);
    color: #0f6b3e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 16px;
}

.checkout-success-view h3 {
    font-size: 1.55rem;
    font-weight: 800;
    color: #15201a;
    margin-bottom: 8px;
}

.checkout-success-view p {
    color: #56605a;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.success-key-box {
    background: rgba(15, 107, 62, 0.1);
    border: 1px dashed rgba(15, 107, 62, 0.4);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 22px;
}

.success-key-label {
    font-size: 0.76rem;
    color: #0f6b3e;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.success-key-code {
    font-size: 1.4rem;
    font-weight: 800;
    color: #15201a;
    font-family: monospace;
    letter-spacing: 2px;
}

.downloads-header-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #39506f;
    text-align: left;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.direct-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.direct-download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(21, 32, 26, 0.04);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: #39506f;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.direct-download-item:hover {
    background: rgba(15, 107, 62, 0.12);
    border-color: rgba(15, 107, 62, 0.35);
    color: #0f6b3e;
}

.btn-open-unlocked-reader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    border-radius: 10px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(15, 107, 62, 0.18);
}

@media (max-width: 600px) {
    .checkout-tier-selector {
        grid-template-columns: 1fr;
    }
    .checkout-form-grid {
        grid-template-columns: 1fr;
    }
    .checkout-tabs-header {
        justify-content: flex-start;
    }
    .payment-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .payment-detail-value {
        text-align: left;
    }
}

/* =========================================================================
   READER APPLICATION MULTI-TAB SUITE & SIMPLIFIED HOME STYLES
   ========================================================================= */

.reader-main-content {
    padding-top: 68px; /* Fixed navbar height clearance */
    min-height: 100vh;
}

.reader-nav-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 68px; /* Sticks cleanly right beneath the fixed navbar */
    z-index: 990;
    display: flex;
    justify-content: center;
    padding: 12px 20px 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 107, 62, 0.16);
    box-shadow: 0 8px 30px rgba(21, 32, 26, 0.135);
    margin-bottom: 24px;
}

.reader-tool-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.144);
    border-radius: 9999px;
    padding: 6px;
    gap: 8px;
    box-shadow: 0 8px 30px rgba(21, 32, 26, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
}

.reader-tool-tabs::-webkit-scrollbar {
    display: none;
}

.reader-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid transparent;
    color: #56605a;
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    user-select: none;
}

.reader-tab-btn:hover {
    color: #15201a;
    background: rgba(21, 32, 26, 0.05);
}

.reader-tab-btn.active {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(16, 175, 202, 0.12) 100%);
    border-color: rgba(15, 107, 62, 0.6);
    color: #15201a;
    box-shadow: 0 4px 18px rgba(15, 107, 62, 0.18);
}

.reader-tab-btn i {
    font-size: 1rem;
    color: var(--primary-color);
}

.reader-tab-btn.active i {
    color: #0f6b3e;
}

.reader-tab-panel {
    display: none;
    animation: fadeInTab 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reader-tab-panel.active {
    display: block;
}

#reader,
#curriculum,
#toolkits,
#faq,
.reader-section,
.curriculum-section {
    scroll-margin-top: 155px;
}

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

/* Toolkits Tab Grid */
.toolkits-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.toolkit-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 18px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.toolkit-card:hover {
    border-color: rgba(15, 107, 62, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(21, 32, 26, 0.105);
}

.toolkit-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.toolkit-card h3 {
    color: #15201a;
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.toolkit-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 20px;
    flex-grow: 1;
}

.toolkit-card-actions {
    display: flex;
    gap: 10px;
}

.btn-toolkit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.4);
    border-radius: 9px;
    color: #0f6b3e;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-toolkit-action:hover {
    background: #0f6b3e;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(15, 107, 62, 0.18);
}

.btn-toolkit-action.is-locked {
    background: rgba(21, 32, 26, 0.05);
    border-color: rgba(21, 32, 26, 0.16);
    color: #56605a;
}

.btn-toolkit-action.is-locked:hover {
    background: rgba(21, 32, 26, 0.06);
    border-color: rgba(21, 32, 26, 0.16);
    color: #15201a;
    box-shadow: 0 4px 15px rgba(21, 32, 26, 0.015);
}

.btn-toolkit-action.is-vip-locked {
    background: rgba(212, 140, 17, 0.08) !important;
    border-color: rgba(189, 124, 15, 0.35) !important;
    color: #9c8a0d !important;
}

.btn-toolkit-action.is-vip-locked:hover {
    background: rgba(212, 140, 17, 0.12) !important;
    border-color: #bd8c0f !important;
    color: #15201a !important;
    box-shadow: 0 4px 15px rgba(189, 124, 15, 0.18) !important;
}

/* Simplified Home Page Components */
.home-guide-summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.28);
    border-radius: 24px;
    padding: 38px 34px;
    margin: 40px auto;
    max-width: 1100px;
    box-shadow: 0 16px 40px rgba(21, 32, 26, 0.09);
}

.home-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 28px 0;
}

.home-summary-item {
    background: rgba(21, 32, 26, 0.037);
    border: 1px solid rgba(21, 32, 26, 0.08);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.25s ease;
}

.home-summary-item:hover {
    border-color: rgba(15, 107, 62, 0.3);
    background: rgba(21, 32, 26, 0.05);
}

.home-summary-item i {
    font-size: 1.5rem;
    margin-bottom: 12px;
    display: block;
}

.home-summary-item h4 {
    color: #15201a;
    font-size: 1rem;
    margin-bottom: 6px;
}

.home-summary-item p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.home-calc-teaser-slim {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 81, 189, 0.25);
    border-radius: 18px;
    padding: 24px 30px;
    max-width: 1100px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .reader-tool-tabs {
        border-radius: 16px;
        width: 100%;
    }
    .reader-tab-btn {
        flex: 1 1 calc(50% - 10px);
        justify-content: center;
        padding: 9px 14px;
        font-size: 0.84rem;
    }
    .home-calc-teaser-slim {
        flex-direction: column;
        text-align: center;
    }
}

.btn-jump-chapter {
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    padding: 4px 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-jump-chapter:hover {
    color: #0f6b3e;
    transform: translateX(4px);
}

/* ==========================================================================
   Interactive 3D Instacart Shopper Bag & Book Opening Animation Styles
   ========================================================================== */

.shopper-bag-container {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.35);
    box-shadow: 0 25px 60px rgba(21, 32, 26, 0.14), 0 0 35px rgba(15, 107, 62, 0.15);
    border-radius: 24px;
    padding: 24px;
    max-width: 450px;
    width: 100%;
    position: relative;
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shopper-bag-container .book-showcase-badges,
.shopper-bag-container .book-rating-box,
.shopper-bag-container .book-action-buttons {
    width: 100%;
}

.bag-interactive-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.4);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f6b3e;
    margin-bottom: 12px;
    animation: hintBounce 2.5s ease-in-out infinite;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hint-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0f6b3e;
    box-shadow: 0 0 10px rgba(15, 107, 62, 0.18);
    animation: pulseGlow 1.5s infinite;
}

@keyframes hintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

/* 3D Shopper Bag Canvas */
.shopper-bag-3d {
    position: relative;
    width: 310px;
    height: 250px;
    margin: 5px auto 14px;
    perspective: 1200px;
    transform-style: preserve-3d;
    cursor: pointer;
    user-select: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shopper-bag-3d:hover {
    transform: translateY(-6px) rotateX(4deg) rotateY(-4deg) scale(1.02);
}

.shopper-bag-3d:focus-visible {
    outline: 2px solid #0f6b3e;
    outline-offset: 4px;
    border-radius: 20px;
}

/* Bag Tote Handles */
.shopper-bag-handles {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 70px;
    z-index: 10;
    pointer-events: none;
}

.bag-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 60px;
    border: 7px solid #0f6b3e;
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    box-shadow: inset 0 2px 4px rgba(21, 32, 26, 0.06), 0 4px 10px rgba(21, 32, 26, 0.14);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bag-handle.handle-front {
    border-color: #0f6b3e;
    top: 6px;
    z-index: 12;
}

.bag-handle.handle-back {
    border-color: #e2e5e1;
    top: 0;
    z-index: 8;
    filter: brightness(0.85);
}

/* Luggage / Order Tag */
.shopper-bag-tag {
    position: absolute;
    left: 65px;
    top: 38px;
    z-index: 15;
    transform-origin: top center;
    animation: tagGentleSwing 3.5s ease-in-out infinite;
    pointer-events: none;
}

.tag-cord {
    width: 2px;
    height: 20px;
    background: #aa610e;
    margin: 0 auto;
}

.tag-body {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    border: 1px solid #bd680f;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 4px 12px rgba(21, 32, 26, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;
}

.tag-pill {
    font-size: 0.52rem;
    font-weight: 800;
    color: #9c560d;
    letter-spacing: 0.5px;
}

.tag-title {
    font-size: 0.64rem;
    font-weight: 800;
    color: #15201a;
    font-family: var(--font-display);
}

.tag-sub {
    font-size: 0.5rem;
    color: #0f6b3e;
    font-weight: 700;
}

@keyframes tagGentleSwing {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(4deg); }
    70% { transform: rotate(-3deg); }
}

/* Main Shopper Bag Body */
.shopper-bag-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 195px;
    background: linear-gradient(175deg, #0f6b3e 0%, #ffffff 40%, #ffffff 100%);
    border: 2px solid rgba(15, 107, 62, 0.6);
    border-radius: 20px 20px 24px 24px;
    box-shadow: 0 16px 36px rgba(21, 32, 26, 0.14), inset 0 2px 5px rgba(21, 32, 26, 0.06), 0 0 25px rgba(15, 107, 62, 0.18);
    overflow: hidden;
    z-index: 9;
    transition: all 0.5s ease;
}

/* Top Zipper Chamber */
.bag-top-chamber {
    height: 26px;
    background: linear-gradient(90deg, #ffffff 0%, #0f6b3e 50%, #ffffff 100%);
    border-bottom: 2px dashed rgba(21, 32, 26, 0.16);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.zipper-track {
    width: 100%;
    height: 4px;
    background: #ffffff;
    border-radius: 2px;
    position: relative;
}

.zipper-teeth {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #0f6b3e 0, #0f6b3e 2px, #ffffff 2px, #ffffff 4px);
    transition: width 0.4s ease;
}

.zipper-slider {
    position: absolute;
    top: -4px;
    left: 70%;
    width: 12px;
    height: 12px;
    background: #aa700e;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(21, 32, 26, 0.14);
    transition: left 0.4s ease;
}

.zipper-pull-tab {
    position: absolute;
    top: 10px;
    left: 3px;
    width: 6px;
    height: 14px;
    background: #aa7e0e;
    border-radius: 2px;
}

.chamber-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 100%, rgba(15, 107, 62, 0.12) 0%, transparent 70%);
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.shopper-bag-3d:hover .chamber-glow {
    opacity: 0.8;
}

/* Front Shell & Pocket */
.bag-front-shell {
    padding: 14px 18px;
    position: relative;
    height: calc(100% - 26px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bag-pocket {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1.5px solid rgba(15, 107, 62, 0.5);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 1px 3px rgba(21, 32, 26, 0.045), 0 6px 16px rgba(21, 32, 26, 0.12);
    position: relative;
}

.pocket-brand-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pocket-carrot-wrap {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.4));
}

.pocket-text {
    display: flex;
    flex-direction: column;
}

.pocket-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: #15201a;
    letter-spacing: 0.5px;
}

.pocket-desc {
    font-size: 0.58rem;
    color: #0f6b3e;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.pocket-rating-pill {
    background: rgba(212, 140, 17, 0.12);
    border: 1px solid rgba(189, 124, 15, 0.4);
    color: #9c740d;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Seams */
.bag-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(21, 32, 26, 0.06);
    border-left: 1px dashed rgba(15, 107, 62, 0.3);
}

.seam-left { left: 16px; }
.seam-right { right: 16px; }

.bag-base-reinforcement {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: rgba(21, 32, 26, 0.05);
    border-top: 1px solid rgba(15, 107, 62, 0.2);
}

.bag-ambient-shadow {
    position: absolute;
    bottom: -15px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.96) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.shopper-bag-3d:hover .bag-ambient-shadow {
    transform: scale(0.9);
    opacity: 0.6;
}

/* ==========================================================================
   The 3D Book Inside Bag
   ========================================================================== */

.shopper-unfolding-book {
    position: absolute;
    left: 50%;
    top: 35px;
    width: 250px;
    height: 170px;
    transform: translateX(-50%) scale(0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 25;
    perspective: 1200px;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.book-cover-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.book-inside-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e2e5e1;
    border-radius: 6px 10px 10px 6px;
    padding: 14px 16px;
    color: #1e293b;
    box-shadow: 4px 6px 20px rgba(21, 32, 26, 0.14);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.page-corner-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent #466186 transparent transparent;
}

.inside-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inside-ch-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
}

.inside-spi-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9c590d;
}

.inside-title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 4px 0;
}

.inside-snippet {
    font-size: 0.72rem;
    color: #56605a;
    line-height: 1.4;
    margin: 0;
}

.inside-cta-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f6b3e;
}

.book-hardcover-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #0f6b3e 100%);
    border: 2px solid #0f6b3e;
    border-radius: 6px 12px 12px 6px;
    box-shadow: 6px 8px 24px rgba(21, 32, 26, 0.14), inset 0 0 12px rgba(15, 107, 62, 0.18);
    padding: 12px;
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.65s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cover-gold-border {
    border: 1px solid rgba(189, 124, 15, 0.4);
    border-radius: 6px;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cover-top-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 800;
    color: #0f6b3e;
}

.cover-carrot-emblem {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-carrot-emblem svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 3px 8px rgba(16, 185, 129, 0.4));
}

.cover-main-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #15201a;
    text-align: center;
    line-height: 1.2;
}

.cover-main-title span {
    color: #0f6b3e;
}

.cover-bottom-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: #56605a;
}

/* OPENING STATE */
.shopper-bag-3d.is-opening {
    transform: translateY(-10px) scale(1.02);
}

.shopper-bag-3d.is-opening .bag-handle.handle-front {
    transform: translateX(-50%) rotateX(60deg) translateY(12px);
}

.shopper-bag-3d.is-opening .bag-handle.handle-back {
    transform: translateX(-50%) rotateX(-60deg) translateY(-12px);
}

.shopper-bag-3d.is-opening .zipper-teeth {
    width: 0%;
}

.shopper-bag-3d.is-opening .zipper-slider {
    left: 0%;
}

.shopper-bag-3d.is-opening .chamber-glow {
    opacity: 1;
    background: radial-gradient(circle at 50% 100%, rgba(15, 107, 62, 0.8) 0%, transparent 80%);
}

.shopper-bag-3d.is-opening .shopper-unfolding-book {
    top: -65px;
    transform: translateX(-50%) scale(1.18);
    opacity: 1;
    pointer-events: auto;
    z-index: 60;
}

.shopper-bag-3d.is-opening .book-hardcover-front {
    transform: rotateY(-130deg);
}

@keyframes bounceX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.animate-bounce-x {
    animation: bounceX 1s infinite;
}

/* ==========================================================================
   100% MOBILE-FRIENDLY RESPONSIVE SYSTEM & HIGH-CONVERTING SALES COMPONENTS
   ========================================================================== */

/* Global Overflow Prevention & Smooth Touch */
html, body {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Enhanced Hero Insider Callout Card */
/* Enhanced Hero Insider Callout Card */
.hero-insider-callout {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1.5px solid rgba(15, 107, 62, 0.55);
    border-radius: 20px;
    padding: 26px 28px;
    margin: 15px 0 25px;
    box-shadow: 0 16px 40px rgba(21, 32, 26, 0.14), 0 0 30px rgba(15, 107, 62, 0.15);
    position: relative;
    overflow: hidden;
}

.hero-insider-callout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0f6b3e 0%, #aa700e 50%, #0f6b3e 100%);
}

.promise-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.hero-promise-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 140, 17, 0.12);
    border: 1px solid rgba(189, 124, 15, 0.45);
    color: #9c740d;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.promise-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.35);
    color: #0f6b3e;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.hero-quote-box {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(15, 107, 62, 0.12) 100%);
    border-left: 4px solid #0f6b3e;
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin: 10px 0 18px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f6b3e;
    line-height: 1.55;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(21, 32, 26, 0.03);
}

.hero-quote-box .quote-icon {
    color: #0f6b3e;
    font-size: 1.25rem;
    margin-right: 8px;
    opacity: 0.85;
}

.promise-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 16px 0;
}

.promise-mini-stat {
    background: rgba(21, 32, 26, 0.05);
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.p-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(21, 32, 26, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.p-stat-text {
    display: flex;
    flex-direction: column;
}

.p-stat-text strong {
    font-size: 0.9rem;
    color: #15201a;
    font-weight: 700;
}

.p-stat-text span {
    font-size: 0.78rem;
    color: #56605a;
}

.promise-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(21, 32, 26, 0.096);
}

.promise-quick-btn {
    background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promise-quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 107, 62, 0.18);
}

.hero-paddle-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.144);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.8rem;
    color: #2b3630;
    flex-wrap: wrap;
}

.hero-paddle-badge .paddle-icon-pill {
    color: #0f6b3e;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Comparison Section: Random Shopper vs. Systematic Pro */
.comparison-section {
    padding: 60px 20px;
    max-width: 1140px;
    margin: 0 auto;
}

.comparison-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.comparison-section .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.comparison-section .comparison-card {
    border-radius: 20px;
    padding: 28px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.25s ease;
}

.comparison-section .comparison-card:hover {
    transform: translateY(-3px);
}

.comparison-section .comparison-card.card-random {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1.5px solid rgba(188, 16, 16, 0.35);
    box-shadow: 0 12px 35px rgba(21, 32, 26, 0.12);
}

.comparison-section .comparison-card.card-systematic {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1.5px solid rgba(15, 107, 62, 0.65);
    box-shadow: 0 16px 45px rgba(21, 32, 26, 0.14), 0 0 35px rgba(15, 107, 62, 0.18);
}

.comparison-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.card-hourly-pill {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.card-hourly-pill.pill-danger {
    background: rgba(211, 18, 18, 0.12);
    color: #9c0d0d;
    border: 1px solid rgba(188, 16, 16, 0.4);
}

.card-hourly-pill.pill-success {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.5);
}

.comparison-section .comparison-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-negative {
    background: rgba(211, 18, 18, 0.12);
    border: 1px solid rgba(188, 16, 16, 0.4);
    color: #9c0d0d;
}

.badge-positive {
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.5);
    color: #0f6b3e;
}

.comparison-section .comparison-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: #15201a;
}

.comparison-section .comparison-card p.card-summary {
    font-size: 0.92rem;
    color: #56605a;
    line-height: 1.5;
    margin-bottom: 20px;
}

.comparison-section .comparison-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex-grow: 1;
}

.comparison-section .comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.comparison-section .comparison-list li i {
    margin-top: 3px;
    flex-shrink: 0;
}

.text-danger {
    color: #9b0d0d;
}

.comparison-section .comparison-stat-bar {
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.stat-bar-danger {
    background: rgba(211, 18, 18, 0.12);
    border: 1px solid rgba(188, 16, 16, 0.3);
}

.stat-bar-success {
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.4);
}

/* Mathematical ROI & Step Flow Section */
.roi-formula-section {
    padding: 50px 20px 60px;
    max-width: 1140px;
    margin: 0 auto;
}

.roi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.roi-step-card {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.3);
    border-radius: 16px;
    padding: 22px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(21, 32, 26, 0.105);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.roi-step-card:hover {
    transform: translateY(-4px);
    border-color: #0f6b3e;
    box-shadow: 0 14px 35px rgba(15, 107, 62, 0.18);
}

.roi-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.roi-step-card.featured-step {
    border-color: #bd7c0f;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 12px 35px rgba(189, 124, 15, 0.15);
}

.roi-step-card.annual-step {
    border-color: rgba(15, 107, 62, 0.7);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 12px 35px rgba(15, 107, 62, 0.18);
}

.roi-step-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0f6b3e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.roi-step-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: #56605a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-step .roi-step-num {
    color: #9c740d;
}

.featured-step .roi-step-tag {
    color: #9c7a0d;
}

.annual-step .roi-step-num {
    color: #0f6b3e;
}

.roi-step-card h4 {
    font-size: 1.12rem;
    font-weight: 800;
    color: #15201a;
    margin-bottom: 6px;
}

.roi-amount-highlight {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f6b3e;
    margin: 8px 0 10px;
    line-height: 1;
}

.featured-step .roi-amount-highlight {
    color: #9c740d;
}

.annual-step .roi-amount-highlight {
    color: #0f6b3e;
}

.roi-step-card p {
    font-size: 0.84rem;
    color: #56605a;
    line-height: 1.45;
    margin: 0;
}

@media (max-width: 900px) {
    .promise-highlights-grid {
        grid-template-columns: 1fr;
    }
    .comparison-section .comparison-grid {
        grid-template-columns: 1fr;
    }
    .roi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .roi-grid {
        grid-template-columns: 1fr;
    }
    .promise-header-row, .promise-footer-row {
        flex-direction: column;
        align-items: stretch;
    }
    .promise-quick-btn {
        justify-content: center;
    }
}

/* Mobile Sticky Bottom Purchase Bar */
.mobile-sticky-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sticky-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1.5px solid rgba(15, 107, 62, 0.45);
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 998;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 -10px 30px rgba(21, 32, 26, 0.14);
        transform: translateY(110%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-sticky-bar.is-visible {
        transform: translateY(0);
    }

    .mobile-sticky-info {
        display: flex;
        flex-direction: column;
    }

    .mobile-sticky-price-row {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .mobile-sticky-price {
        font-family: var(--font-display);
        font-size: 1.22rem;
        font-weight: 800;
        color: #0f6b3e;
        line-height: 1;
    }

    .mobile-sticky-tag {
        font-size: 0.65rem;
        color: #9c740d;
        font-weight: 700;
        background: rgba(212, 140, 17, 0.12);
        padding: 2px 6px;
        border-radius: 4px;
    }

    .mobile-sticky-sub {
        font-size: 0.68rem;
        color: #56605a;
        font-weight: 500;
        margin-top: 2px;
    }

    .btn-mobile-sticky-paddle {
        background: linear-gradient(135deg, #0f6b3e 0%, #0f6b3e 100%);
        color: #ffffff !important;
        font-weight: 800;
        font-size: 0.9rem;
        border: none;
        border-radius: 12px;
        padding: 11px 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(15, 107, 62, 0.18);
        font-family: inherit;
        text-decoration: none;
        white-space: nowrap;
        min-height: 44px;
    }

    /* Extra body padding to prevent footer cutoff when bar is visible */
    body {
        padding-bottom: 72px;
    }

    /* Navbar Mobile Optimization */
    .navbar {
        padding: 10px 14px;
        gap: 8px;
    }

    .navbar .logo a {
        font-size: 1.12rem;
    }

    .nav-links {
        display: flex;
        gap: 8px;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-pill-link {
        padding: 6px 10px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .nav-cta-btn {
        padding: 6px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Reader & Calculator Mobile Optimization */
    .reader-main-content,
    .calculator-main-content {
        padding-top: 56px;
    }
    .reader-nav-wrapper,
    .calc-tool-nav-wrapper {
        top: 52px;
        padding: 8px 12px 10px;
    }
    .reader-tab-btn {
        padding: 8px 15px;
        font-size: 0.82rem;
        gap: 6px;
    }
    #reader,
    #curriculum,
    #toolkits,
    #faq,
    .reader-section,
    .curriculum-section {
        scroll-margin-top: 120px;
    }

    /* Hero Section Mobile Optimization */
    .hero-section {
        padding: 24px 14px 36px;
        gap: 22px;
    }

    .hero-content h1 {
        font-size: clamp(1.65rem, 6.2vw, 2.3rem);
        line-height: 1.22;
        letter-spacing: -0.5px;
    }

    .hero-content .subtitle {
        font-size: 0.94rem;
        line-height: 1.52;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .btn-primary-large, .btn-secondary-large {
        width: 100%;
        justify-content: center;
        padding: 14px 18px;
        font-size: 0.95rem;
        min-height: 48px;
        text-align: center;
    }

    .stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: 18px;
    }

    .stat-card {
        padding: 10px 6px;
    }

    .stat-card h3 {
        font-size: 1.2rem;
    }

    .stat-card p {
        font-size: 0.68rem;
    }

    /* Comparison Grid Stack */
    .comparison-section .comparison-grid,
    .calc-comparison-card .comparison-grid,
    .calculator-section .comparison-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .comparison-section {
        padding: 40px 14px;
    }

    /* ROI Grid Mobile Stack */
    .roi-formula-section {
        padding: 36px 14px;
    }

    .roi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* Pricing Section Mobile */
    .pricing-section {
        padding: 40px 14px;
    }

    .pricing-card {
        padding: 24px 18px;
    }

    .btn-pricing-standard, .btn-pricing-vip {
        min-height: 48px;
        font-size: 0.95rem;
    }
}

/* Extra Small Screens (<= 480px, e.g. iPhone SE, mini) */
@media (max-width: 480px) {
    .shopper-bag-container {
        padding: 14px 8px;
        max-width: 100%;
        width: 100%;
        border-radius: 18px;
    }

    .shopper-bag-3d {
        width: 270px;
        height: 220px;
        margin: 0 auto 10px;
    }

    .shopper-bag-body {
        height: 175px;
    }

    .shopper-bag-handles {
        width: 120px;
        height: 60px;
    }

    .bag-handle {
        width: 105px;
        height: 52px;
    }

    .shopper-unfolding-book {
        width: 220px;
        height: 155px;
    }

    .shopper-bag-3d.is-opening .shopper-unfolding-book {
        top: -45px;
        transform: translateX(-50%) scale(1.05);
    }

    .book-action-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .btn-book-preview, .btn-book-buy {
        width: 100%;
        text-align: center;
        justify-content: center;
        min-height: 46px;
    }

    .book-showcase-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .roi-grid {
        grid-template-columns: 1fr;
    }

    .hero-quote-box {
        font-size: 0.95rem;
        padding: 12px 14px;
    }

    /* Checkout Modal Mobile Tuning */
    .checkout-modal-backdrop {
        padding: 10px 6px;
    }

    .checkout-modal-card {
        padding: 18px 12px;
        border-radius: 18px;
        max-height: 94vh;
    }

    .checkout-modal-header h3 {
        font-size: 1.2rem;
    }

    .checkout-modal-close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }

    .paddle-checkout-btn {
        min-height: 50px;
        font-size: 0.98rem;
    }
}

@media (max-width: 360px) {
    .shopper-bag-3d {
        transform: scale(0.85);
        transform-origin: center center;
    }
    .stats-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Reader Book Illustrations & Visual Figures
   ========================================================================== */
.reader-illustration {
    margin: 24px 0 28px 0;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.28);
    box-shadow: 0 16px 36px rgba(21, 32, 26, 0.14), 0 0 20px rgba(15, 107, 62, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.reader-illustration:hover {
    border-color: rgba(15, 107, 62, 0.5);
    box-shadow: 0 20px 45px rgba(21, 32, 26, 0.14), 0 0 28px rgba(15, 107, 62, 0.18);
}

.reader-img-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 440px;
    background: #ffffff;
}

.reader-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.reader-illustration:hover .reader-img-wrapper img {
    transform: scale(1.02);
}

.reader-img-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 107, 62, 0.5);
    color: #0f6b3e;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(21, 32, 26, 0.12);
}

.reader-illustration figcaption {
    padding: 16px 20px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #2b3630;
    border-top: 1px solid rgba(21, 32, 26, 0.08);
    background: rgba(255, 255, 255, 0.96);
}

.reader-illustration figcaption strong {
    color: #0f6b3e;
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

/* ==========================================================================
   Batch Anatomy Case Study (Whale vs. Garbage Comparison)
   ========================================================================== */
.reader-batch-case-study {
    margin: 24px 0 28px 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 16px 40px rgba(21, 32, 26, 0.14);
}

.batch-case-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.batch-tag {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.batch-tag.positive {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.4);
}

.batch-tag.negative {
    background: rgba(211, 18, 18, 0.12);
    color: #9c0d0d;
    border: 1px solid rgba(188, 16, 16, 0.4);
}

.batch-comparison-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .batch-comparison-columns {
        grid-template-columns: 1fr;
    }
}

.batch-col {
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.batch-col.positive-col {
    background: rgba(15, 107, 62, 0.05);
    border: 1px solid rgba(15, 107, 62, 0.2);
}

.batch-col.negative-col {
    background: rgba(211, 18, 18, 0.05);
    border: 1px solid rgba(188, 16, 16, 0.2);
}

.batch-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: #56605a;
    border-bottom: 1px solid rgba(21, 32, 26, 0.08);
    padding-bottom: 6px;
}

.batch-stat-row strong {
    color: #15201a;
}

.batch-case-footer {
    margin-top: 16px;
    font-size: 0.82rem;
    color: #56605a;
    display: flex;
    align-items: center;
    gap: 8px;
    font-style: italic;
    border-top: 1px solid rgba(21, 32, 26, 0.08);
    padding-top: 12px;
}

/* ==========================================================================
   Full-Screen Immersive Scrollytelling Experience (wearebrand.io Inspired)
   ========================================================================== */

/* Hero Scroll Down Trigger Button */
.btn-scroll-story-trigger {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.45);
    color: #15201a;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(21, 32, 26, 0.12), 0 0 15px rgba(15, 107, 62, 0.18);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    cursor: pointer;
}

.btn-scroll-story-trigger:hover {
    background: linear-gradient(135deg, rgba(15, 107, 62, 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-color: #0f6b3e;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(21, 32, 26, 0.14), 0 0 25px rgba(15, 107, 62, 0.18);
    color: #15201a;
}

/* Full-Screen Section Track */
.fs-story-section {
    position: relative;
    width: 100%;
    z-index: 10;
}

.fs-story-track {
    position: relative;
    width: 100%;
    min-height: 88vh;
    min-height: 88dvh;
}

/* Natural Flow Viewport (No scroll-jacking, no sticky lock) */
.fs-story-viewport {
    position: relative;
    width: 100%;
    min-height: 88vh;
    min-height: 88dvh;
    overflow: hidden;
    background: #ffffff;
}

/* Slides Wrapper */
.fs-slides-wrapper {
    position: relative;
    width: 100%;
    min-height: 88vh;
    min-height: 88dvh;
}

/* Individual Full-Screen Slide */
.fs-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.02);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease;
    will-change: transform, opacity;
}

.fs-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    z-index: 2;
}

/* Background Image with Cinematic Depth */
.fs-slide-bg-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.fs-slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.82) contrast(1.05);
    transform: scale(1);
    transition: transform 7s cubic-bezier(0.1, 1, 0.2, 1);
    will-change: transform;
}

.fs-slide.active .fs-slide-bg {
    transform: scale(1.06);
}

.fs-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(21, 32, 26, 0.042) 35%, rgba(255, 255, 255, 0.96) 65%, rgba(255, 255, 255, 0.96) 100%);
    z-index: 1;
}

.fs-overlay-climax {
    background: 
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 44%, rgba(21, 32, 26, 0.03) 85%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, transparent 35%, rgba(255, 255, 255, 0.96) 100%);
}

/* Slide 1 Laser Beam - Disabled for clean realistic shopper aesthetic */
.fs-laser-scan-beam {
    display: none !important;
}

@keyframes fsLaserMotionScan {
    0% { top: 15%; opacity: 0.2; }
    50% { top: 78%; opacity: 0.95; }
    100% { top: 15%; opacity: 0.2; }
}

/* Slide Content Container */
.fs-slide-content {
    position: absolute;
    z-index: 4;
    bottom: 8%;
    left: 7%;
    max-width: 740px;
    color: #15201a;
    text-align: left;
    user-select: text;
}

.fs-slide-content-climax {
    bottom: 8%;
    max-width: 530px;
}

.fs-content-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #39506f;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.144);
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(14px);
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(21, 32, 26, 0.105);
}

.fs-content-badge i {
    color: #0f6b3e;
}

.fs-badge-gold {
    color: #9c8a0d;
    border-color: rgba(189, 124, 15, 0.3);
    background: rgba(255, 255, 255, 0.96);
}

.fs-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0f6b3e;
}

.fs-badge-dot.gold {
    background: #aa700e;
}

.fs-slide-title {
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 20px 0;
    color: #15201a;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(21, 32, 26, 0.14);
}

.fs-slide-title .text-gradient {
    background: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #0f6b3e;
    filter: none;
}

.fs-slide-desc {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    color: #2b3630;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 560px;
    text-shadow: 0 2px 8px rgba(21, 32, 26, 0.14);
}

/* Telemetry Metrics Row */
.fs-telemetry-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fs-telemetry-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.108);
    border-radius: 12px;
    padding: 10px 18px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(21, 32, 26, 0.135);
    min-width: 140px;
}

.fs-tel-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #56605a;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    font-weight: 600;
}

.fs-tel-value {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    font-family: var(--font-display);
    color: #15201a;
}

.fs-tel-value.text-green { color: #0f6b3e; }
.fs-tel-value.text-gold { color: #9c740d; }
.fs-tel-value.text-blue { color: #0d709c; }

.fs-tel-sub {
    font-size: 0.74rem;
    color: #56605a;
}

.fs-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

/* ==========================================================================
   Slide 4 Conversion Climax: Tap Phone Screen Hotspot to Buy
   ========================================================================== */

.fs-phone-hotspot-anchor {
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    user-select: none;
    text-decoration: none;
}

.fs-beacon-ripple {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #0f6b3e;
    animation: fsBeaconPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.fs-beacon-ripple.delay-1 {
    animation-delay: 1.2s;
}

@keyframes fsBeaconPing {
    0% { transform: scale(0.6); opacity: 0.8; }
    80% { transform: scale(1.4); opacity: 0.2; }
    100% { transform: scale(1.7); opacity: 0; }
}

.fs-phone-cta-pill,
.fs-phone-cta-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.5);
    box-shadow: 0 10px 30px rgba(21, 32, 26, 0.14), 0 0 16px rgba(15, 107, 62, 0.18);
    border-radius: 999px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #15201a;
    font-size: 0.88rem;
    font-weight: 600;
    backdrop-filter: blur(14px);
    white-space: nowrap;
    min-width: unset;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-phone-hotspot-anchor:hover .fs-phone-cta-pill,
.fs-phone-hotspot-anchor:hover .fs-phone-cta-card {
    transform: scale(1.05);
    border-color: #0f6b3e;
    box-shadow: 0 12px 35px rgba(21, 32, 26, 0.14), 0 0 20px rgba(15, 107, 62, 0.18);
}

.fs-phone-cta-pill .fa-arrow-right,
.fs-phone-cta-card .fa-arrow-right {
    font-size: 0.80rem;
    color: #0f6b3e;
    transition: transform 0.2s ease;
}

.fs-phone-hotspot-anchor:hover .fa-arrow-right {
    transform: translateX(3px);
}

.fs-climax-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.fs-trust-micro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.8rem;
    color: #56605a;
    letter-spacing: 0.02em;
}

.fs-trust-micro i {
    color: #0f6b3e;
    font-size: 0.88rem;
}

/* ==========================================================================
   Side Telemetry Navigation HUD (wearebrand.io Style)
   ========================================================================== */

.fs-story-side-hud {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 14px 18px;
    border-radius: 20px;
    border: 1px solid rgba(21, 32, 26, 0.096);
    box-shadow: 0 8px 30px rgba(21, 32, 26, 0.14);
}

.fs-hud-step {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #56605a;
    font-weight: 600;
    transition: all 0.25s ease;
    user-select: none;
}

.fs-hud-step:hover {
    color: #15201a;
}

.fs-hud-num {
    font-size: 0.78rem;
    font-family: var(--font-display);
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(21, 32, 26, 0.04);
    border: 1px solid rgba(21, 32, 26, 0.096);
    color: #56605a;
    transition: all 0.25s ease;
}

.fs-hud-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    display: inline-block;
    transition: all 0.25s ease;
}

.fs-hud-step.active {
    color: #15201a;
}

.fs-hud-step.active .fs-hud-num {
    background: #0f6b3e;
    color: #ffffff;
    border-color: #0f6b3e;
    box-shadow: 0 2px 10px rgba(15, 107, 62, 0.18);
    font-weight: 700;
}

.fs-hud-step.active .fs-hud-label {
    opacity: 1;
    color: #15201a;
    font-weight: 600;
}

.fs-hud-step-climax.active .fs-hud-num {
    background: #aa700e;
    color: #ffffff;
    border-color: #bd7c0f;
    box-shadow: 0 2px 10px rgba(189, 124, 15, 0.18);
    font-weight: 700;
}

.fs-hud-step-climax.active .fs-hud-label {
    color: #9c740d;
    opacity: 1;
}

.fs-hud-track-line {
    width: 2px;
    height: 18px;
    background: rgba(21, 32, 26, 0.06);
    margin-right: 17px;
    position: relative;
}

.fs-hud-progress-pip {
    position: absolute;
    top: 0;
    left: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0f6b3e;
    box-shadow: 0 0 6px rgba(15, 107, 62, 0.18);
    transition: top 0.1s linear;
}

/* Bottom Scroll Cue - hidden to allow natural page scrolling without trap */
.fs-scroll-cue {
    display: none !important;
}

/* Responsive adjustments for mobile and small screens */
@media (max-width: 900px) {
    .fs-story-track,
    .fs-story-viewport,
    .fs-slides-wrapper {
        min-height: 640px;
    }
    .fs-slide-content {
        left: 5%;
        right: 5%;
        bottom: 8%;
        max-width: 90%;
    }
    .fs-slide-title {
        font-size: clamp(1.75rem, 5.5vw, 2.3rem);
        margin: 0 0 16px 0;
    }
    .fs-slide-desc {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }
    .fs-telemetry-row {
        gap: 8px;
    }
    .fs-telemetry-card {
        padding: 8px 12px;
        min-width: 110px;
    }
    .fs-tel-value {
        font-size: 1.1rem;
    }
    .fs-story-side-hud {
        position: absolute;
        top: 85px;
        right: 14px;
        transform: none;
        flex-direction: row;
        gap: 6px;
        z-index: 25;
    }
    .fs-hud-step {
        gap: 4px;
    }
    .fs-hud-label {
        display: none;
    }
    .fs-hud-track-line {
        display: none;
    }
    .fs-hud-num {
        padding: 4px 9px;
        font-size: 0.72rem;
    }
    .fs-phone-hotspot-anchor {
        top: 32%;
        width: auto;
        max-width: unset;
    }
    .fs-phone-cta-pill,
    .fs-phone-cta-card {
        min-width: unset;
        width: auto;
        padding: 6px 14px;
        font-size: 0.8rem;
    }
    .fs-scroll-cue {
        display: none !important;
    }
}

/* ==========================================================================
   CYBER-ALGORITHMIC HUD OPENING SEQUENCE & HERO STAGGER ENTRANCE
   ========================================================================== */

.algo-intro-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.algo-intro-overlay.dismissed {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(10px);
    pointer-events: none;
}

.algo-intro-overlay.hidden-instant {
    display: none !important;
}

.algo-intro-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(15, 107, 62, 0.12) 0%, rgba(255, 255, 255, 0.96) 45%, rgba(255, 255, 255, 0.96) 85%);
    pointer-events: none;
}

.algo-intro-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(15, 107, 62, 0.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(15, 107, 62, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 80%);
    pointer-events: none;
}

.algo-intro-scanner-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(15, 107, 62, 0.12) 30%, #0f6b3e 50%, rgba(15, 107, 62, 0.12) 70%, transparent 100%);
    box-shadow: 0 0 20px rgba(15, 107, 62, 0.18), 0 0 40px rgba(15, 107, 62, 0.18);
    animation: algoIntroScanSweep 2.2s infinite ease-in-out;
    pointer-events: none;
}

.algo-intro-skip-btn {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.3);
    border-radius: 20px;
    color: #56605a;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.algo-intro-skip-btn:hover {
    color: #15201a;
    border-color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    box-shadow: 0 0 15px rgba(15, 107, 62, 0.18);
}

.algo-intro-skip-btn kbd {
    font-family: inherit;
    font-size: 0.72rem;
    padding: 2px 6px;
    background: rgba(21, 32, 26, 0.06);
    border-radius: 4px;
    color: #0f6b3e;
}

.algo-intro-center {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 480px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.algo-radar-ring-wrapper {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.algo-radar-ring.ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(15, 107, 62, 0.45);
    animation: algoRadarSpin 6s linear infinite;
}

.algo-radar-ring.ring-middle {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px dotted rgba(15, 107, 62, 0.65);
    animation: algoRadarCounterSpin 4s linear infinite;
}

.algo-radar-ring.ring-inner {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    border: 1px solid rgba(15, 107, 62, 0.3);
}

.algo-radar-core {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, #0f6b3e 0%, #0f6b3e 100%);
    box-shadow: 0 0 28px rgba(15, 107, 62, 0.18), 0 0 50px rgba(15, 107, 62, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: algoCorePulse 2s infinite ease-in-out;
}

.algo-radar-icon {
    font-size: 1.25rem;
    color: #15201a;
}

.algo-radar-subicon {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.65rem;
    color: #9c8a0d;
    filter: drop-shadow(0 0 4px #f59e0b);
}

.algo-intro-brand {
    font-family: var(--font-display, 'Outfit', 'Inter', sans-serif);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    line-height: 1;
}

.algo-brand-green {
    color: #0f6b3e;
    text-shadow: 0 0 16px rgba(15, 107, 62, 0.18);
    margin-right: 2px;
}

.algo-brand-white {
    color: #15201a;
    letter-spacing: 0.06em;
}

.algo-intro-system-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #0f6b3e;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.35);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.algo-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0f6b3e;
    box-shadow: 0 0 8px rgba(15, 107, 62, 0.18);
    animation: dotPulse 1.2s infinite;
}

.algo-telemetry-console {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 8px;
    padding: 9px 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    color: #0f6b3e;
    margin-bottom: 20px;
    box-shadow: inset 0 0 15px rgba(21, 32, 26, 0.14), 0 4px 15px rgba(21, 32, 26, 0.09);
    min-width: 300px;
    max-width: 100%;
    justify-content: flex-start;
}

.algo-console-prompt {
    color: #0f6b3e;
    font-weight: 800;
    animation: algoCursorBlink 0.9s infinite;
}

.algo-console-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.algo-progress-container {
    width: 100%;
    max-width: 320px;
}

.algo-progress-bar-track {
    position: relative;
    width: 100%;
    height: 5px;
    background: rgba(21, 32, 26, 0.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(21, 32, 26, 0.14);
}

.algo-progress-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #0f6b3e, #0f6b3e, #0f6b3e, #0f6b3e);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(15, 107, 62, 0.18);
    transition: width 0.08s linear;
}

.algo-progress-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    color: #56605a;
}

.algo-metric-percent {
    font-weight: 700;
    color: #0f6b3e;
    text-shadow: 0 0 8px rgba(15, 107, 62, 0.18);
}

/* Keyframes */
@keyframes algoRadarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes algoRadarCounterSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes algoCorePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 28px rgba(15, 107, 62, 0.18), 0 0 50px rgba(15, 107, 62, 0.18);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 38px rgba(15, 107, 62, 0.18), 0 0 65px rgba(15, 107, 62, 0.18);
    }
}

@keyframes algoIntroScanSweep {
    0% { top: 5%; opacity: 0.1; }
    50% { top: 92%; opacity: 0.85; }
    100% { top: 5%; opacity: 0.1; }
}

@keyframes algoCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

@keyframes heroBtnSheen {
    0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
    40% { opacity: 0.7; }
    100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}

/* ==========================================================================
   HERO ENTRANCE STAGGER AND LIVE TELEMETRY ANIMATION
   ========================================================================== */

/* Navbar Entrance */
body.intro-active .navbar {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

body.hero-entered .navbar {
    transform: translateY(0);
    opacity: 1;
}

/* Hero Elements Initial States when intro is running */
body.intro-active .fs-slide#fsSlide1 .fs-content-badge,
body.intro-active .fs-slide#fsSlide1 .fs-slide-title,
body.intro-active .fs-slide#fsSlide1 .fs-slide-desc,
body.intro-active .fs-slide#fsSlide1 .fs-telemetry-card,
body.intro-active .fs-slide#fsSlide1 .fs-hero-actions,
body.intro-active .fs-story-side-hud,
body.intro-active .fs-scroll-cue {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

body.intro-active .fs-story-side-hud {
    transform: translateX(-30px);
}

/* Stagger entrance transitions once hero is entered */
body.hero-entered .fs-slide#fsSlide1 .fs-content-badge {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

body.hero-entered .fs-slide#fsSlide1 .fs-slide-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
}

body.hero-entered .fs-slide#fsSlide1 .fs-telemetry-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.24s;
}

body.hero-entered .fs-slide#fsSlide1 .fs-telemetry-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.34s;
}

body.hero-entered .fs-slide#fsSlide1 .fs-telemetry-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.44s;
}

body.hero-entered .fs-slide#fsSlide1 .fs-hero-actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.54s;
}

body.hero-entered .fs-story-side-hud {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

body.hero-entered .fs-scroll-cue {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

/* Specular Sheen Animation on CTA Button upon Entrance */
.fs-hero-actions .btn-primary-large {
    position: relative;
    overflow: hidden;
}

.fs-hero-actions .btn-primary-large::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(21, 32, 26, 0.06), transparent);
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
}

body.hero-entered .fs-hero-actions .btn-primary-large::after {
    animation: heroBtnSheen 1.2s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   Gig Earnings Guide Series Roadmap (Multi-App Ecosystem)
   ========================================================================== */
.ecosystem-section {
    padding: 70px 6% 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.ecosystem-header {
    text-align: center;
    margin-bottom: 45px;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.eco-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(21, 32, 26, 0.096);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.eco-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 107, 62, 0.35);
    box-shadow: 0 12px 30px rgba(21, 32, 26, 0.12);
}

.eco-card-featured {
    border: 2px solid rgba(15, 107, 62, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96));
    box-shadow: 0 8px 30px rgba(15, 107, 62, 0.15);
}

.eco-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0f6b3e, #0f6b3e, #0f6b3e);
}

.eco-card-master {
    border: 1px solid rgba(104, 15, 189, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96));
}

.eco-card-master::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #5e0eaa, #5c0eaa, #a6115b);
}

.eco-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.eco-vol-pill {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(21, 32, 26, 0.06);
    color: #56605a;
    border: 1px solid rgba(21, 32, 26, 0.12);
}

.eco-status-badge {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-live {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.4);
}

.status-next {
    background: rgba(212, 140, 17, 0.12);
    color: #9c740d;
    border: 1px solid rgba(189, 124, 15, 0.35);
}

.status-master {
    background: rgba(117, 17, 212, 0.12);
    color: #540d9c;
    border: 1px solid rgba(104, 15, 189, 0.4);
}

.eco-icon-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.eco-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.eco-icon-instacart {
    background: rgba(15, 107, 62, 0.12);
    color: #0f6b3e;
    border: 1px solid rgba(15, 107, 62, 0.35);
}

.eco-icon-doordash {
    background: rgba(211, 18, 18, 0.12);
    color: #9c0d0d;
    border: 1px solid rgba(188, 16, 16, 0.3);
}

.eco-icon-spark {
    background: rgba(17, 91, 212, 0.12);
    color: #0d4d9c;
    border: 1px solid rgba(15, 81, 189, 0.3);
}

.eco-icon-flex {
    background: rgba(212, 140, 17, 0.12);
    color: #9c740d;
    border: 1px solid rgba(189, 124, 15, 0.3);
}

.eco-icon-business {
    background: rgba(117, 17, 212, 0.12);
    color: #540d9c;
    border: 1px solid rgba(104, 15, 189, 0.4);
}

.eco-card h3 {
    font-size: 1.22rem;
    color: #15201a;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.eco-desc {
    color: #2b3630;
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 16px;
}

.eco-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.eco-bullets li {
    font-size: 0.84rem;
    color: #56605a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eco-card-action {
    padding-top: 14px;
    border-top: 1px solid rgba(21, 32, 26, 0.096);
}

/* ==========================================================================
   Interactive Free Income Audit & Custom Route Plan Section & Modal
   ========================================================================== */

.income-audit-section {
    padding: 80px 6%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.audit-container-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(15, 107, 62, 0.25);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 50px rgba(21, 32, 26, 0.14), 0 0 30px rgba(15, 107, 62, 0.08);
    position: relative;
    overflow: hidden;
}

.audit-container-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(15, 107, 62, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.audit-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 48px;
    align-items: center;
}

.audit-info-side h2 {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    margin: 14px 0 18px 0;
    color: #15201a;
}

.audit-info-side p {
    color: #2b3630;
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 24px;
}

.audit-perks-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.audit-perk-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.90rem;
    color: #39506f;
    line-height: 1.45;
}

.audit-perk-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.35);
    color: #0f6b3e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.audit-form-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(16px);
}

.audit-form-group {
    margin-bottom: 20px;
}

.audit-form-group label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: #15201a;
    margin-bottom: 8px;
}

.audit-form-group label span.req {
    color: #9c0d0d;
}

.audit-form-group label span.sub-hint {
    color: #56605a;
    font-size: 0.76rem;
    font-weight: normal;
    margin-left: 4px;
}

.audit-input,
.audit-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 32, 26, 0.16);
    border-radius: 12px;
    color: #15201a;
    font-size: 0.92rem;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

.audit-input:focus,
.audit-select:focus {
    border-color: #0f6b3e;
    box-shadow: 0 0 0 3px rgba(15, 107, 62, 0.18);
    background: rgba(255, 255, 255, 0.96);
}

.audit-select option {
    background: #ffffff;
    color: #15201a;
}

/* App Multi-Select Chips */
.audit-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.audit-chip-label {
    cursor: pointer;
    user-select: none;
}

.audit-chip-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.audit-chip-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(21, 32, 26, 0.04);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #2b3630;
    transition: all 0.2s ease;
}

.audit-chip-label:hover .audit-chip-box {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
    border-color: rgba(21, 32, 26, 0.16);
}

.audit-chip-label input:checked + .audit-chip-box {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    color: #0f6b3e;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(15, 107, 62, 0.18);
}

/* Radio Tiles for Hours & Income */
.audit-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.audit-radio-label {
    cursor: pointer;
    user-select: none;
}

.audit-radio-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.audit-radio-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 12px;
    background: rgba(21, 32, 26, 0.04);
    border: 1px solid rgba(21, 32, 26, 0.12);
    border-radius: 10px;
    font-size: 0.80rem;
    color: #2b3630;
    transition: all 0.2s ease;
}

.audit-radio-label:hover .audit-radio-box {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
}

.audit-radio-label input:checked + .audit-radio-box {
    background: rgba(15, 107, 62, 0.12);
    border-color: #0f6b3e;
    color: #0f6b3e;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 107, 62, 0.18);
}

/* Checkbox for Newsletter / Marketing */
.audit-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
    cursor: pointer;
}

.audit-consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0f6b3e;
    margin-top: 2px;
    cursor: pointer;
}

.audit-consent-text {
    font-size: 0.78rem;
    color: #56605a;
    line-height: 1.45;
}

.audit-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(180deg, #0f6b3e 0%, #0f6b3e 100%);
    color: #ffffff;
    border: 1px solid rgba(21, 32, 26, 0.16);
    border-radius: 12px;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(21, 32, 26, 0.075), 0 4px 16px rgba(15, 107, 62, 0.18);
    transition: all 0.25s ease;
    font-family: inherit;
}

.audit-submit-btn:hover {
    background: linear-gradient(180deg, #0f6b3e 0%, #0f6b3e 100%);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(21, 32, 26, 0.09), 0 6px 22px rgba(15, 107, 62, 0.18);
}

.audit-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Success Animation Card */
.audit-success-card {
    display: none;
    text-align: center;
    padding: 30px 20px;
}

.audit-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(15, 107, 62, 0.12);
    border: 2px solid #0f6b3e;
    color: #0f6b3e;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
    box-shadow: 0 0 24px rgba(15, 107, 62, 0.18);
}

.audit-estimate-badge {
    display: inline-block;
    margin: 16px 0;
    padding: 10px 20px;
    background: rgba(15, 107, 62, 0.12);
    border: 1px solid rgba(15, 107, 62, 0.35);
    border-radius: 12px;
    color: #0f6b3e;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Standalone Income Audit Modal */
.audit-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.audit-modal-backdrop.open {
    display: flex;
    opacity: 1;
}

.audit-modal-card {
    background: #ffffff;
    border: 1px solid rgba(21, 32, 26, 0.144);
    border-radius: 20px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    box-shadow: 0 25px 60px rgba(21, 32, 26, 0.14), 0 0 30px rgba(15, 107, 62, 0.12);
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.audit-modal-backdrop.open .audit-modal-card {
    transform: scale(1);
}

.audit-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(21, 32, 26, 0.06);
    border: 1px solid rgba(21, 32, 26, 0.12);
    color: #56605a;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.audit-modal-close:hover {
    background: rgba(21, 32, 26, 0.06);
    color: #15201a;
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .audit-grid-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .audit-container-card {
        padding: 28px 20px;
    }
    .audit-form-card {
        padding: 22px 16px;
    }
    .audit-modal-card {
        padding: 24px 18px;
    }
}