/* ---------------------------------------------------------
   VET VISIT - MASTER STYLE SHEET v7.0 (Apple-Medical)
   Features: Sticky Nav, Responsive Header, Maggie Persona, Scrub Blue
--------------------------------------------------------- */

:root {
    /* Apple Medical Colors */
    --primary-blue: #007AFF; /* Action buttons, links */
    --scrub-blue: #5A8DEE;   /* Secondary buttons, Maggie UI */
    --mag-voice: #E6F2FF; /* Maggie's Voice */
    
    --bg-gray: #F5F5F7;      /* Global background */
    --text-dark: #1D1D1F;
    --text-light: #6e6e73;   /* Darkened from #86868b: ~3.6:1 contrast on white failed WCAG AA (4.5:1) for body text. This passes at ~5:1, same visual weight. */
    --success-green: #34C759;
    --warning-red: #FF3B30;  /* Urgency 8-10, ER thresholds */
    --warning-yellow: #FFCC00;
    --card-bg: #FFFFFF;
    --bg-red: #ffebee;
    
    /* Apple Shadows */
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-float: 0 20px 60px rgba(0,0,0,0.1);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-gray);
    color: var(--text-dark);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------
   MOBILE VIEWPORT FIXES (Anti-Wiggle)
--------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

/* ---------------------------------------------------------
   SMOOTH SCROLL
--------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* Adjust the 80px to match the actual height of header */
#upload-component, 
#scanner-component,
.use-cases-section {
  scroll-margin-top: 112px; 
}

/* ==========================================================================
   GLOBAL SCROLL REVEAL UTILITIES
   ========================================================================== */
/* The Base State */
.reveal-on-scroll {
    opacity: 0;
    visibility: hidden; /* Prevents clicking links before they appear */
    transition-property: opacity, transform, visibility;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* The Triggered State */
.reveal-on-scroll.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Direction Modifiers */
.fade-up { transform: translateY(30px); }
.fade-down { transform: translateY(-30px); }
.fade-in { transform: translateY(0); } /* Just fades, no movement */

/* Staggered Delays (for sequencing) */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.60s; }

/* ---------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------- */
h1, h2, h3, h4, .dedication, .section-label, .price-tag, .score-badge {
    font-family: "Montserrat", sans-serif;
}

h1 {
    /* Scales smoothly from 2.5rem (40px) on mobile to 3.5rem (56px) on desktop */
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    letter-spacing: -0.5px;
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.15; /* Tighter line height prevents wrapping awkwardness */
    color: #000;
}

.subtitle {
    /* Scales from 1.125rem (18px) on mobile to 1.3125rem (21px) on desktop */
    font-size: clamp(1.125rem, 2vw, 1.3125rem);
    color: var(--text-light);
    margin-top: 20px;
    line-height: 1.4;
    font-weight: 400;
}

.dedication {
    /* Was --warning-red: this class is a purely decorative section eyebrow
       used on every page ("System Capabilities", "Verified Experiences", etc.)
       -- none of them are actual warnings. Alarm-red on every page header
       dilutes what red should mean (real urgency, ER thresholds). */
    color: var(--scrub-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Exception: success.php's actual error/failure state. This one legitimately
   wants alarm-red, unlike every other decorative use of .dedication. */
.error-icon .dedication {
    color: var(--warning-red);
}

/* ---------------------------------------------------------
   HEADER (Sticky Frosted Nav)
--------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.header-inner {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #a1a1a6;
    letter-spacing: -1px;
    text-decoration: none;
    transition: color 0.2s;
    text-transform: lowercase;
}

.header-logo:hover {
    color: var(--text-dark);
}

/* Nav Links & Responsiveness */
.header-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nav-link:hover {
    opacity: 1;
}

.header-btn {
    background-color: var(--primary-blue);
    color: white;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 122, 255, 0.25);
}

/* Mobile Header Adjustment */
@media (max-width: 600px) {
    .nav-link {
        display: none; /* Hide secondary links to keep UI clean */
    }
    .header-logo {
        font-size: 18px; /* Slightly smaller logo */
    }
    .header-btn {
        padding: 8px 16px; /* Slightly tighter button */
        font-size: 12px;
    }
}


/* ==========================================================================
   IMAGE LOGO STYLES
   ========================================================================== */
.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0; /* Prevents the navbar from squishing the logo */
}

.header-logo-img {
    height: 24px; /* Optimal desktop height */
    width: auto;
    display: block;
    object-fit: contain;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .header-logo-img {
        height: 24px; /* Scales down so it doesn't crash into the hamburger menu */
    }
}


/* ---------------------------------------------------------
   HEADER AUTO-HIDE LOGIC
--------------------------------------------------------- */
/* Make sure your #main-header has a transition for smooth sliding */
#main-header {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease;
}

/* The class JS will add when scrolling down */
.header-hidden {
    transform: translateY(-100%);
}

/* ---------------------------------------------------------
   FLOATING BOTTOM PILL 
--------------------------------------------------------- */
.floating-cta-wrapper {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 999;
    pointer-events: none; /* Lets clicks pass through the invisible wrapper */
    
    /* Starts hidden, fades in on scroll */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* When JS triggers it to show */
.floating-cta-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.floating-pill-btn {
    pointer-events: auto; /* Re-enables clicks for the button itself */
    background-color: var(--primary-blue);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 50px; /* Perfect pill shape */
    display: flex;
    align-items: center;
    /* box-shadow: 0 10px 25px rgba(90, 141, 238, 0.4), 0 4px 10px rgba(0,0,0,0.2); */
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-pill-btn:hover {
    background-color: #4a7bd9;
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(90, 141, 238, 0.5), 0 6px 15px rgba(0,0,0,0.3);
}

/* ---------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------- */
@keyframes breathe-blue {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.2); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 25px rgba(0, 122, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scan-down {
    0% { top: -5%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 105%; opacity: 0; }
}

/* ---------------------------------------------------------
   INDEX / SCANNER ANIMATIONS
--------------------------------------------------------- */
@keyframes image-pulse {
    0% { opacity: 1; filter: brightness(1); }
    100% { opacity: 0.7; filter: brightness(1.1); }
}

#preview-scan.pulsing {
    animation: image-pulse 1.5s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------
   LAYOUT
--------------------------------------------------------- */
.container {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    padding: clamp(1.5rem, 6vw, 3.4rem) clamp(1rem, 4vw, 1.5rem) clamp(3rem, 10vw, 6rem);
    flex: 1; 
}

.intro {
    width: 100%;
    text-align: left;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}


/* ---------------------------------------------------------
   THE MAGGIE PERSONA UI
--------------------------------------------------------- */
.maggie-note {
    background-color: rgba(90, 141, 238, 0.08);
    border-left: 5px solid var(--scrub-blue);
    padding: 20px 25px;
    border-radius: 0 16px 16px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 25px 0;
    position: relative;
}

.maggie-note::before {
    content: "Maggie's Triage Note";
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--scrub-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
}

/* ---------------------------------------------------------
   UPLOAD COMPONENT (Sky Glass Edition)
--------------------------------------------------------- */
.maggie-upload {display: inline-block;} .engine {color: var(--text-light); font-size: 10px; padding: 1rem;}

.upload-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(232, 242, 255, 0.7) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border-radius: 40px;
    padding: 5rem 2.5rem;
    cursor: pointer;
    text-align: center;
    margin-top: 50px;
    display: block; 
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-soft);
    color: var(--text-dark);

    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s ease,
                background 0.3s ease;
}

@media (max-width: 600px) {
    .upload-box {
        padding: 2rem;
    }
}

/* Remove the forced white text overrides */
.upload-box h2 {
    color: #000 !important;
}
.upload-box p {
    color: var(--text-light) !important;
}

.upload-icon-wrapper {
    color: var(--scrub-blue); /* Back to blue icon */
    margin-bottom: 25px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    justify-content: center;
}

/* Button reverts: Blue background, White text */
.upload-btn {
    background-color: var(--scrub-blue); 
    color: white; 
    padding: 16px 42px; 
    border-radius: 100px; 
    display: inline-block;  
    font-weight: 800; 
    font-size: 1rem; 
    box-shadow: 0 10px 25px rgba(90, 141, 238, 0.25); 
    transition: all 0.2s ease;
}

/* --- HOVER STATES --- */

.upload-box:hover {
    transform: translateY(-4px) scale(1.02);
    /* The glass gets slightly more solid and the sky reflection shifts */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 246, 255, 0.85) 100%);
    /* The ambient glow intensifies just a bit */
    box-shadow: 0 20px 50px rgba(90, 141, 238, 0.15); 
}

.upload-box:hover .upload-btn {
    transform: translateY(-2px);
    background-color: var(--primary-blue);
    box-shadow: 0 15px 35px rgba(0, 122, 255, 0.3);
}

.upload-box:hover .upload-icon-wrapper {
    transform: translateY(-5px) scale(1.1);
    color: var(--primary-blue);
}

/* ---------------------------------------------------------
   SCANNER UI
--------------------------------------------------------- */
.scanner-component {
    display: none; 
    background: var(--card-bg);
    border-radius: 40px;
    padding: 50px 40px;
    text-align: center;
    margin-top: 50px;
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(0,0,0,0.05);
    flex-direction: column;
    align-items: center;
    animation: fade-in-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.xray-box {
    position: relative;
    width: 300px;
    height: 375px; 
    background: #000;
    border-radius: 32px;
    overflow: hidden;
    margin-bottom: 30px;
    animation: breathe-blue 3s ease-in-out infinite;
}

#preview-scan {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.laser-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--primary-blue);
    box-shadow: 0 0 20px var(--primary-blue);
    animation: scan-down 2s ease-in-out infinite;
    z-index: 2;
    opacity: 0.8;
}

#loader-text {
    color: var(--primary-blue);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 2rem 0 1rem 0;
    line-height: 1.4;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.2s ease-in-out; /* Softens the jump when JS changes the text */
}

#loader-subtext {
    color: var(--text-light);
    font-size: 11px; /* Drastically shrunk from 16px */
    font-weight: 800; /* Extra bold so it stays legible at small sizes */
    margin: 0;
    letter-spacing: 1.5px; /* Widened out for a premium, scanner-like feel */
    text-transform: uppercase;
    opacity: 0.7; /* Softens it so it sits quietly in the background */
}

/* ---------------------------------------------------------
   REPORT UI CARDS
--------------------------------------------------------- */
.report-card, .detailed-card {
    background: white;
    border-radius: 40px;
    box-shadow: var(--shadow-float);
    overflow: hidden;
    margin-top: 30px;
    border: 1px solid rgba(0,0,0,0.05);
}

.detailed-card {
    padding: 50px 40px;
    text-align: left;
}

.report-header {
    background: #FFFFFF;
    padding: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.media-header {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
}

.media-poster {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.05);
    background: #f0f0f0;
}

.media-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px;
}

.media-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.score-badge {
    font-size: 13px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F2F2F7;
    color: var(--text-dark);
    letter-spacing: 0.5px;
}

.urgency-label-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.media-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #000;
    margin: 0 0 15px 0;
}

.media-bar-bg {
    width: 100%;
    height: 6px;
    background: #F2F2F7;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 15px;
}

.media-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.media-summary {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.5;
    font-weight: 500;
}

.gallery-container {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.gallery-container::-webkit-scrollbar { display: none; }

.gallery-thumb {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 2px solid white;
    opacity: 0.8;
    transition: opacity 0.2s;
    cursor: pointer;
}
.gallery-thumb:hover { opacity: 1; }

.section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-light);
    margin-top: 40px;
    letter-spacing: 1px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.data-text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-dark);
    margin-top: 15px;
    white-space: pre-wrap;
}

/* ---------------------------------------------------------
   PAYMENT MODAL
--------------------------------------------------------- */
#payment-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 50px;
    border-radius: 40px;
    max-width: 440px;
    width: 85%;
    text-align: center;
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(255,255,255,0.5);
}

.value-prop-list {
    text-align: left;
    background: #F2F2F7;
    padding: 25px;
    border-radius: 24px;
    margin: 30px 0;
}

.prop-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 18px;
}
.prop-item:last-child { margin-bottom: 0; }

.icon-red { color: var(--warning-red); font-size: 20px; min-width: 24px; text-align: center; }

.price-tag {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 25px;
    letter-spacing: -3px;
    color: #000;
}

.btn-pay {
    background: #000;
    color: white;
    padding: 22px;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    display: block;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.btn-pay:hover { transform: scale(1.02); }

/* ---------------------------------------------------------
   MODAL CLOSE BUTTON
--------------------------------------------------------- */
#close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #F2F2F7;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    padding: 0;
    z-index: 10; /* Ensures it sits above other text */
}

#close-modal-btn:hover {
    background: #E5E5EA;
    color: var(--text-dark);
}

#close-modal-btn svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================================
   DYNAMIC MODAL REFACTOR (Grid Overlap)
   ========================================================================== */
.modal-dynamic-wrapper {
    position: relative;
    overflow: hidden;
    /* The magic bullet: this forces the container to size to the tallest element */
    display: grid; 
}

.modal-state-panel {
    /* Stack both panels in the exact same grid coordinate */
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.state-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.state-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.scanner-xray-modal {
    margin-top: 20px;
}

.scanner-loader-modal {
    margin-top: 30px;
}

.text-scrub-blue {
    color: var(--scrub-blue);
}

.paywall-desc {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.value-prop-modal {
    background: #F9F9FB;
    border: 1px solid rgba(0,0,0,0.05);
}

.prop-icon-fixed {
    min-width: 24px;
}

.pricing-container-modal {
    margin-top: 30px;
}

.pricing-subtext {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 5px;
}

.secure-icon-sm {
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
}


/* ---------------------------------------------------------
   SUCCESS PAGE STYLES
--------------------------------------------------------- */
.oscar-container {
    width: 120px;
    height: 120px;
    background-color: #E6F2FF; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    animation: breathe-blue 3s ease-in-out infinite;
}

.oscar-icon {
    width: 70px;
    height: 70px;
    fill: var(--primary-blue); 
}

#post-load-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px;
    min-height: 400px;
    margin-top: 3.75rem;
}

#post-load-text {
    color: var(--primary-blue);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 2rem 0 1rem 0;
    line-height: 1.4;
}

#post-load-sub {
    color: var(--text-light);
    font-size: 11px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ---------------------------------------------------------
   DISCLAIMER
--------------------------------------------------------- */
.disclaimer {
    margin-top: 3.75rem;
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.6;
    background: white;
    padding: 25px;
    border-radius: 25px;
    text-align: left;
    box-shadow: var(--shadow-soft);
}

@media (max-width: 500px) {
    .media-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .media-content { align-items: center; }
    .media-meta { justify-content: center; }
}


/* ==========================================================================
   FOOTER LOGO
   ========================================================================== */
.footer-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 12px; /* Keeps it spaced nicely from the paragraph below */
}

.footer-logo-img {
    height: 34px; /* Matches the header size perfectly */
    width: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 768px) {
    .footer-logo-img {
        height: 28px; /* Scales down slightly for mobile, just like the header */
    }
}


/* ---------------------------------------------------------
   FOOTER (v6.3 - 4-Column SaaS Layout)
--------------------------------------------------------- */
.site-footer {
    max-width: 900px; 
    width: 90%;
    margin: 0 auto;
    padding: 60px 0 80px 0;
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
        gap: 30px;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Update the existing .footer-logo to act as a link and add the hover transition */
.footer-logo {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #a1a1a6; 
    letter-spacing: -1px;
    text-decoration: none; /* New */
    transition: color 0.2s ease; /* New */
    display: inline-block; /* New - ensures proper padding/margin if needed */
    text-transform: lowercase;
}

/* Match the header logo hover color (var(--text-dark)) */
.footer-logo:hover {
    color: var(--text-dark);
}

.footer-byline {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 12px;
    max-width: 250px;
}

.nav-col { gap: 15px; }

.footer-link {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.footer-link:hover { opacity: 1; }

.footer-cta {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: opacity 0.2s;
}

.footer-cta:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.legal-col { gap: 20px; }

.copyright {
    color: #a1a1a6;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
}

.stripe-badge {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.3px;
}

.amazon-disclosure {
    display: block;
    font-size: 10px;
    color: rgba(150, 150, 150, 0.6);
    margin-top: 4px;
}


/* ---------------------------------------------------------
   FOOTER SOCIAL ICONS
--------------------------------------------------------- */
.footer-socials {
    display: flex;
    gap: 16px;
    margin-top: 25px;
    align-items: center;
}

.social-icon {
    color: #a1a1a6; /* Matches the default logo and text-light vibe */
    transition: color 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Inherits the color from .social-icon */
}

.social-icon:hover {
    color: var(--text-dark);
    transform: translateY(-2px); /* Slight premium lift on hover */
}


/* ---------------------------------------------------------
   USE CASES / SOCIAL PROOF GRID
--------------------------------------------------------- */
.use-cases-section {
    margin-top: 3.75rem;
}

.use-cases-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: left;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
    color: #000;
}

.use-case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .use-case-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.use-case-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 25px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-soft);
    text-align: left;
    transition: transform 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.use-case-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
}

.use-case-card-link {
    text-decoration: none !important;
    color: inherit; 
    display: block; 
    height: 100%;
}

.use-case-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.badge-yellow { background: #FFF5CC; color: #B28F00; }
.badge-orange { background: #FFEBD6; color: #CC7A00; }
.badge-green { background: #E6F9EC; color: #1E8E3E; }

.use-case-card h4 { margin: 0 0 10px 0; font-size: 16px; font-weight: 800; color: #000; }
.use-case-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-light); padding-bottom:10px; }

.use-case-outcome {
    margin-top: auto;
    padding-top: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark);
}

/* ---------------------------------------------------------
   ABOUT PAGE / OUR STORY
--------------------------------------------------------- */
.about-text {
    font-size: 1.0625rem; /* Replaces 17px */
    color: #4A5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

.founder-note {
    background-color: #F9F9FB;
    border-left: 4px solid var(--text-dark);
    padding: 25px;
    border-radius: 0 16px 16px 0;
    margin: 40px 0;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   HOW IT WORKS PAGE
--------------------------------------------------------- */
.step-block {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.step-block:last-child { margin-bottom: 0; }

.step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: var(--primary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    font-family: "Montserrat", sans-serif;
    box-shadow: 0 10px 20px rgba(0, 122, 255, 0.25);
}

.step-content { flex: 1; padding-top: 5px; }

.step-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #000;
    letter-spacing: -0.5px;
}

.step-text { font-size: 15px; line-height: 1.6; color: var(--text-dark); }

.rules-box {
    background: #F2F2F7;
    border-radius: 24px;
    padding: 35px;
    margin-top: 40px;
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
}

.rule-item:last-child { margin-bottom: 0; }
.rule-icon { font-size: 20px; line-height: 1.2; }

/* ---------------------------------------------------------
   LEGAL PAGES (Terms & Privacy)
--------------------------------------------------------- */
.policy-block { margin-bottom: 40px; }
.policy-block:last-child { margin-bottom: 0; }

.policy-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-dark);
    margin-top: 15px;
}

.policy-text strong { color: #000; }

.highlight-box {
    background: #ffebee;
    color: #c62828;
    padding: 25px;
    border-radius: 20px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    border-left: 4px solid var(--warning-red);
}

.highlight-box-blue {
    background: #F2F2F7;
    padding: 25px;
    border-radius: 20px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
    border-left: 4px solid var(--scrub-blue);
}

/* ---------------------------------------------------------
   SUCCESS PAGE & PRINT STYLES
--------------------------------------------------------- */
.btn-secondary {
    flex: 1; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 100px;
    background-color: #F2F2F7;
    color: #1D1D1F;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:hover { 
    background-color: #E5E5EA; 
    transform: scale(1.02);
}

.resources-box {
    background: #F2F2F7;
    padding: 25px;
    border-radius: 20px;
    margin-top: 15px;
}

.resource-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
}

.resource-item:last-child { margin-bottom: 0; }
.resource-icon { font-size: 20px; line-height: 1.3; }
.resource-content { flex: 1; }

.resource-link {
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}

.resource-link:hover { text-decoration: underline; }

/* ==========================================================================
   MASTER PRINT STYLESHEET (B2B CLINICAL MEDICAL RECORD)
   ========================================================================== */
@media print {
    /* Set page size and standard margins for professional paper printing */
    @page { size: letter; margin: 0.5in; }

    /* Force browsers to print borders and background colors */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        border-radius: 0 !important; /* Kills all rounded corners instantly */
    }

    /* 1. HIDE ALL CONSUMER APP FLUFF & UI ELEMENTS */
    header, footer, #floating-cta, .dedication, h1, .subtitle, 
    .maggie-rep-handoff, .maggie-rep-funnel, .singularity-founder-block, 
    .media-bar-bg, .gallery-thumb, .print-action-container, 
    .product-pills-container, .review-scroll-link, .maggie-avatar-circle 
    {
        display: none !important;
    }

    /* 2. FORCE FULL PAGE WIDTH & CLINICAL TYPOGRAPHY */
    html, body, .container, .maggie-rep-container, #final-report {
        width: 100% !important;
        max-width: 100% !important; /* Overrides any desktop width constraints */
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        color: #000000 !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 11pt !important;
        display: block !important; 
    }

    /* 3. B2B LETTERHEAD (Fixing the black rounded cut-off) */
    .maggie-rep-doc-header {
        background: transparent !important;
        background-color: transparent !important;
        color: #000 !important;
        display: flex !important;
        flex-direction: column !important; /* Stacks text to prevent any cut-offs */
        align-items: flex-start !important;
        border-bottom: 3px solid #000 !important; /* Thick authoritative border */
        padding: 0 0 15px 0 !important;
        margin: 0 0 25px 0 !important;
        width: 100% !important;
    }

    .maggie-rep-doc-header * {
        color: #000 !important; /* Forces DOC ID and Time to be black */
    }

    .maggie-rep-doc-header::before {
        content: "VETVISIT.IO // VISUAL TRIAGE REPORT";
        font-size: 16pt !important;
        font-weight: 900 !important;
        letter-spacing: 1px !important;
        margin-bottom: 15px !important;
        text-transform: uppercase !important;
        display: block !important;
        width: 100% !important;
    }

    .doc-meta {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        font-family: monospace !important;
        font-size: 10pt !important;
    }

    .doc-certification { display: none !important; }

    /* 4. THE DASHBOARD (Full Width Clinical Block) */
    .maggie-rep-main-card {
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .maggie-rep-dashboard {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        border: 2px solid #000 !important;
        padding: 20px !important;
        margin-bottom: 25px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #FAFAFA !important;
    }

    .dash-image-col {
        width: 30% !important; 
        margin-right: 25px !important;
    }

    .dash-image {
        width: 100% !important;
        height: auto !important;
        border: 1px solid #000 !important;
    }

    .dash-score-col {
        width: 70% !important;
        text-align: left !important;
    }

    .urgency-label-wrapper { margin-bottom: 15px !important; }
    
    .score-badge {
        background: #000 !important;
        background-color: #000 !important;
        color: #FFF !important;
        padding: 8px 16px !important;
        font-size: 14pt !important;
        font-weight: 900 !important;
        border: 2px solid #000 !important;
    }

    .dash-title {
        font-size: 18pt !important;
        font-weight: 900 !important;
        margin: 10px 0 5px 0 !important;
        color: #000 !important;
    }

    /* 5. CLINICAL DATA BLOCKS (Full Width Borders) */
    .maggie-rep-voice-box, 
    .maggie-rep-action-plan, 
    .maggie-rep-vet-prep, 
    .maggie-rep-er-box {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: 2px solid #000 !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        background: transparent !important;
        page-break-inside: avoid !important;
    }

    .voice-content-col { padding: 0 !important; width: 100% !important; }

    /* Grid to Side-by-Side */
    .maggie-rep-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .rep-grid-item {
        display: block !important;
        border: 2px solid #000 !important;
        padding: 20px !important;
        background: transparent !important;
        page-break-inside: avoid !important;
    }

    .full-span { grid-column: 1 / -1 !important; }

    /* Titles */
    .plan-title, .prep-title, .er-title, .rep-label, .voice-title {
        font-size: 11pt !important;
        text-transform: uppercase !important;
        font-weight: 900 !important;
        border-bottom: 1px solid #000 !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
        color: #000 !important;
        letter-spacing: 0.5px !important;
    }

    /* Strip colored text to save ink and look professional */
    .er-title, .er-text, .primary-data { color: #000 !important; }

    .marker-pill {
        background: #EEE !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        font-size: 10pt !important;
        padding: 6px 10px !important;
        display: inline-block !important;
        margin: 2px !important;
        font-weight: bold !important;
    }

    /* 6. FORCE VET NOTE & VITALS TO PRINT AS TABLES */
    #final-report .vet-note, 
    #final-report .vitals-log {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: 2px solid #000 !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        background: transparent !important;
        page-break-inside: avoid !important;
    }
    
    .vitals-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 15px !important;
    }
    
    .vitals-table th {
        background: #EEE !important;
        background-color: #EEE !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        font-size: 9pt !important;
        border: 1px solid #000 !important;
        padding: 10px !important;
    }
    
    .vitals-table td {
        border: 1px solid #000 !important;
        padding: 15px 10px !important; /* Taller rows for handwriting */
    }
}

/* ---------------------------------------------------------
   MEET THE TEAM (CAT GRID)
--------------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 25px;
    margin-bottom: 4rem;
}

@media (min-width: 600px) {
    .team-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.cat-card {
    background: #F2F2F7;
    border-radius: 24px;
    padding: 25px 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.2s;
}

.cat-card:hover {
    transform: translateY(-3px);
    background: #FFFFFF;
    box-shadow: var(--shadow-soft);
}

.cat-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 4px solid #fff;
    box-shadow: var(--shadow-soft);
    display: block;
    background-color: #E6F2FF; 
}

.cat-name { 
    font-size: 18px; 
    font-weight: 800; 
    margin: 0 0 5px 0; 
    color: #000; 
    letter-spacing: -0.5px;
}

.cat-title { 
    font-size: 11px; 
    font-weight: 800; 
    color: var(--scrub-blue); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 12px; 
    display: block;
}

.cat-bio { 
    font-size: 13px; 
    color: var(--text-light); 
    line-height: 1.5; 
    margin: 0; 
}

/* ---------------------------------------------------------
   SAMPLE REPORT LINK
--------------------------------------------------------- */
.sample-trigger-wrapper {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.text-link-button {
    color: var(--primary-blue);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    padding: 8px 16px;
    transition: color 0.2s;
    display: inline-block;
}

.text-link-button:hover {
    color: var(--scrub-blue);
}

/* ---------------------------------------------------------
   INDEX.PHP REFACTOR (Replacing Inline CSS)
--------------------------------------------------------- */
.upload-primary-text {
    font-size: 20px;
    margin-bottom: 8px;
}

.upload-secondary-text {
    font-size: 15px;
    color: var(--scrub-blue);
    font-weight: 600;
    margin-top: 0;
}

.hidden-input {
    display: none;
}

.upload-cta-subtext {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 10px;
    font-weight: 500;
}

.warning-header-text {
    color: var(--warning-red);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 11px;
    text-transform: uppercase;
}

.modal-heading {
    margin: 15px 0;
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.pricing-container {
    margin-bottom: 25px;
}

.early-adopter-badge {
    display: inline-block;
    background-color: var(--warning-red);
    color: white;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0;
}

.price-strikethrough {
    text-decoration: line-through;
    color: #a1a1a6;
    font-size: 36px;
    font-weight: 600;
}

.secure-payment-text {
    font-size: 12px;
    color: #86868b;
    margin-top: 25px;
}

/* ---------------------------------------------------------
   SUCCESS.PHP & REPORT REFACTOR (Zero Inline CSS)
--------------------------------------------------------- */
/* Initial Hidden States (Overridden by JS later) */
#final-report, 
#error-state, 
#photo-gallery {
    display: none;
}

#media-bar-fill {
    width: 0%;
}

/* Report Layout Blocks */
.report-body-padding {
    padding: 10px 40px 30px 40px;
}

.primary-obs-text {
    font-weight: 800;
    font-size: 20px;
}

.detailed-analysis-title {
    font-size: 22px;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Dynamic Data Text Styles */
.causes-text {
    color: var(--primary-blue);
    font-weight: 600;
}

.markers-text {
    background: #f5f5f7;
    padding: 25px;
    border-radius: 20px;
}

.protocol-text {
    background: #e8f5e9;
    padding: 25px;
    border-radius: 20px;
    color: #1b5e20;
}

.label-emergency {
    color: var(--warning-red) !important;
}

.threshold-text {
    background: #ffebee;
    color: #c62828;
    padding: 25px;
    border-radius: 20px;
    font-weight: 600;
}

/* Resources & Elements */
.icon-video {
    color: var(--warning-red);
}

.bold-condition {
    font-weight: 600;
}

.resource-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin: 20px 0;
}

/* Action Container & Print Button */
.print-action-container {
    text-align: center;
    margin-top: 40px;
}

.btn-print {
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* Hidden Print Tracking Elements (Screen State) */
.vet-note {
    display: none;
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 12px;
}

.vet-note-title {
    margin: 0 0 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
}

.vet-note-text {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

.vitals-log {
    display: none;
    margin-top: 30px;
    border-top: 2px dashed #ccc;
    padding-top: 20px;
}

.vitals-title {
    margin-bottom: 10px;
}

.vitals-subtitle {
    font-size: 0.6875rem;
    color: #666;
    margin-bottom: 15px;
}

.vitals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.vitals-table th {
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.vitals-table td {
    border: 1px solid #ddd;
}

.vitals-table td.time-col {
    height: 35px;
}

/* Interrupted / Error State */
.error-state-card {
    text-align: center;
    padding: 60px 40px;
}

.error-icon {
    font-size: 50px;
    margin-bottom: 20px;
}

.error-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
}

.error-text {
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 2rem auto;
}

.btn-retry {
    background: #000;
    color: white;
    width: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.btn-retry:hover {
    background: #333;
}

.support-link-container {
    margin-top: 30px;
}

.support-link {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.support-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------
   SAMPLE.PHP SPECIFIC CLASSES (Zero Inline CSS)
--------------------------------------------------------- */
/* Override the 'display: none' from success.php for the sample page */
.sample-report-visible {
    display: block !important;
}

.sample-image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Specific bar fill for the 4/10 sample */
.sample-bar-4 {
    width: 40% !important;
    background-color: #A4C639 !important;
}

/* Sample Page CTA Funnel */
.print-teaser-box {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.print-teaser-text {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 15px;
}

.funnel-title {
    margin-bottom: 15px;
}

.funnel-btn {
    font-size: 18px;
    padding: 20px 40px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3);
}

/* ---------------------------------------------------------
   PRO FOOTER REDESIGN (Apple Medical Aesthetic)
--------------------------------------------------------- */
.site-footer-pro {
    background-color: var(--card-bg);
    padding: 60px 0 30px 0;
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-container {
    max-width: 900px; 
    width: 90%;
    margin: 0 auto;
}

/* Top Section Layout */
.footer-top {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Brand Column */
.footer-brand-col {
    max-width: 300px;
}

.footer-trust {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    margin-top: 15px;
    letter-spacing: -0.2px;
}

/* Nav Grouping */
.footer-nav-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 500px) {
    .footer-nav-group {
        flex-direction: row;
        gap: 80px;
    }
}

.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-heading {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
    margin: 0 0 5px 0;
}

/* Bottom Grounding Bar */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.maggie-credit {
    color: #a1a1a6;
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   USE CASE CARDS REFACTOR (Image Support)
--------------------------------------------------------- */
.use-case-card {
    padding: 0 !important; /* Override the old 25px padding to allow top-bleed images */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.use-case-image-wrapper {
    width: 100%;
    height: 200px;
    background-color: #F2F2F7; /* Apple's soft gray as a loading placeholder */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.use-case-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.use-case-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* --- 404 Error Page Styles --- */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Centers content vertically between header and footer */
    text-align: center;
    padding: 40px 20px;
}

.error-code {
    font-size: 120px;
    font-weight: 800;
    color: var(--primary-color, #2D3436); /* Uses your primary color or falls back to dark grey */
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.15; /* Subtle ghost-text effect */
}

.error-title {
    font-size: 32px;
    margin-bottom: 16px;
    color: #2D3436;
}

.error-text {
    font-size: 18px;
    color: #636E72;
    max-width: 480px;
    margin-bottom: 32px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .error-code { font-size: 80px; }
    .error-title { font-size: 24px; }
}



/* ---------------------------------------------------------
   HOW IT WORKS PAGE (Refactored Classes)
--------------------------------------------------------- */
.hw-maggie-note {
    margin-top: 0;
    margin-bottom: 40px;
}

.step-number-alert {
    background-color: var(--warning-red);
    box-shadow: 0 10px 20px rgba(255, 59, 48, 0.25);
}

.hw-value-props {
    margin-top: 25px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-soft);
    background: #FFFFFF;
}

.hw-props-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--text-dark);
}

/* Solid Badge Variations for List */
.badge-solid-red { background: var(--warning-red); color: white; }
.badge-solid-blue { background: var(--scrub-blue); color: white; }
.badge-solid-green { background: var(--success-green); color: white; }

/* Peace of Mind Math Box */
.pom-box {
    background: white;
    border: 2px solid var(--scrub-blue);
    margin-top: 50px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(90, 141, 238, 0.15);
}

.pom-title {
    margin-top: 0;
    color: var(--primary-blue);
    text-align: center;
    font-size: 22px;
    letter-spacing: -0.5px;
}

.pom-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.pom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pom-border {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.pom-label {
    font-weight: 600;
    color: var(--text-light);
    font-size: 16px;
}

.pom-price-strike {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-light);
    text-decoration: line-through;
}

.pom-label-bold {
    font-weight: 800;
    font-size: 18px;
    color: var(--text-dark);
}

.pom-price-green {
    font-size: 28px;
    font-weight: 900;
    color: var(--success-green);
}

.pom-footer-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 20px;
    margin-bottom: 0;
    font-weight: 500;
}

/* Spacing & CTA Adjustments */
.hw-section-label {
    margin-top: 60px;
}

.hw-rules-box {
    margin-top: 20px;
}

.hw-cta-wrapper {
    text-align: center;
    margin-top: 50px;
}

.hw-btn-large {
    font-size: 16px;
    padding: 16px 42px;
    display: inline-block;
}

/* ---------------------------------------------------------
   INSIDE THE ENGINE PAGE (The Maggie Architecture)
--------------------------------------------------------- */

/* Intro Card */
.engine-intro-card {
    background: 
        radial-gradient(circle at 105% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(139, 180, 246, 0.4) 15%, rgba(90, 141, 238, 0.1) 45%, transparent 75%),
        linear-gradient(110deg, #131620 0%, #1e2433 100%);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.3); /* The right edge catches more light from the star */
    box-shadow: var(--shadow-soft)
    color: #e4e6eb;
    border-radius: 32px;
    padding: 4rem;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: clamp(2rem, 5vw, 4rem) auto;
    
    position: relative;
    overflow: hidden; 
    justify-content: center;
    text-align: center;      

}

/* Make the bold text inside the card pop in pure white */
.engine-intro-card strong {
    color: #ffffff;
    font-weight: 600;
}

.engine-intro-icon {
    font-size: 32px;
    line-height: 1;
    background: #F2F2F7;
    padding: 15px;
    border-radius: 16px;
}

.engine-intro-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-dark);
    font-weight: 500;
    color: #e4e6eb;
}

/* ---------------------------------------------------------
   MAGGIE CINEMATIC REVEAL LOCKUP
--------------------------------------------------------- */
.cinematic-lockup {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 40px; /* Massive breathing room between logo and text */
    max-width: 700px; /* Keeps the paragraph from getting too wide to read */
    z-index: 2; /* Keeps text above the background star glare */
    text-align: left;
}

/* The Hero Logo */
.cinematic-maggie-logo {
    width: 140px;  /* Doubled the size for the big screen */
    height: 140px;
    /* Zero-gravity float */
    animation: cinematic-float 6s ease-in-out infinite;
}

/* The Movie Title Headline */
.cinematic-title {
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 6px; /* Extreme cinematic tracking */
    text-transform: uppercase;
    margin: 0 0 20px 0;
    /* Soft blue glow bleeding off the text */
    text-shadow: 0 2px 15px rgba(90, 141, 238, 0.6); 
}

/* The Descriptor Text */
.cinematic-desc {
    font-size: 20px; /* Bumped up from standard paragraph size */
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85); /* Slightly muted so it doesn't fight the title */
    margin: 0;
}

/* Glowing bold words */
.cinematic-desc strong {
    color: #FFFFFF;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Zero Gravity Animation */
@keyframes cinematic-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); } /* Gentle upward drift */
}


.cinema-resolve {
    width: 64px;
    height: auto;
    border-radius: 100%;
    margin-bottom: 1rem;
}
/* ---------------------------------------------------------
   CINEMATIC END-SCREEN CTA
--------------------------------------------------------- */
/* The outer card container */
.cinematic-cta-card {
    margin: 3.75rem auto 0rem !important;
    padding: 4rem; 
}

/* Modifier to tighten the title tracking for the CTA */
.cinematic-cta-card .cta-title {
    letter-spacing: 2px; 
    font-size: 28px;
}

/* The Benefits List Container */
.cinematic-benefits-list {
    list-style: none;
    padding: 0;
    /* This forces the list onto its own line, shrink-wraps it, and centers it */
    display: block; 
    width: fit-content; 
    margin: 30px auto 40px auto;
    text-align: left;
}

/* The Individual List Items */
.cinematic-benefits-list li {
    font-size: 18px;
    color: #e4e6eb;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The Massive CTA Button */
.cinematic-cta-btn {
    padding: 16px 40px;
    font-size: 18px;
    /* This ensures the button drops below the list and centers perfectly */
    display: block;
    width: max-content;
    margin: 40px 0 0;
}

/* ---------------------------------------------------------
   CINEMATIC LEFT-ALIGN MODIFIER
--------------------------------------------------------- */
.engine-intro-card.cinematic-align-left {
    justify-content: flex-start;
    text-align: left;
}

.engine-intro-card.cinematic-align-left .cinematic-lockup {
    align-items: flex-start;
    text-align: left;
}

/* Forces the button to align left instead of auto-centering */
.engine-intro-card.cinematic-align-left .cinematic-cta-btn {
    margin-left: 0;
    margin-right: auto;
}

/* The Tech Stack Timeline */
.tech-stack-timeline {
    position: relative;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 60px;
}

/* The Dotted Line */
.tech-stack-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 30px;
    bottom: 30px;
    width: 2px;
    border-left: 2px dashed var(--scrub-blue);
    opacity: 0.5;
}

.tech-layer-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 24px;
    padding: 35px 40px;
    box-shadow: var(--shadow-soft);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.tech-layer-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

/* The Connection Dots */
.timeline-dot {
    position: absolute;
    left: -29px;
    top: 45px;
    width: 14px;
    height: 14px;
    background-color: var(--primary-blue);
    border: 4px solid var(--bg-gray);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 2px white;
}

/* Badges & Text inside layers */
.layer-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.badge-solid-blue { background: var(--scrub-blue); color: white; }
.badge-solid-red { background: var(--warning-red); color: white; }

.layer-title {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 800;
    color: #000;
    letter-spacing: -0.5px;
}

.layer-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-light);
}

/* ROI / Reality Check Section */
.full-width-card {
    width: 100%;
    box-sizing: border-box;
}

.roi-section {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 32px;
    padding: 50px 40px;
    margin-bottom: 60px;
    box-shadow: var(--shadow-soft);
}

.roi-title {
    margin: 0 0 5px 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #000;
    
}

.roi-subtitle {
    margin: 0 0 40px 0;
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--text-light);
    
}

.roi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .roi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.roi-card {
    background: var(--bg-red);
    border-radius: 24px;
    padding: 30px;
    text-align: left;
    border: 1px solid var(--warning-red);
}

.highlight-roi {
    background: var(--mag-voice);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 15px 35px rgba(0, 122, 255, 0.15);
}

.roi-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.roi-card h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 800;
    color: #000;
}

.roi-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
}

.roi-card strong {
    color: #000;
}

.roi-resolve {
    width: 36px;
    height: 36px;
}

/* Maggie's Prep Section */
.maggie-prep-section {
    width: 100%;
    box-sizing: border-box;
}

.hw-section-label {
    margin-bottom: 15px;
}

.prep-intro {
    font-size: 16px;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.5;
    font-weight: 500;
}

.best-practices-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .best-practices-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.practice-item {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    padding: 25px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-light);
    display: flex;
    gap: 15px;
    align-items: flex-start;
    box-shadow: var(--shadow-soft);
}

.practice-icon {
    font-size: 24px;
    line-height: 1;
}

.practice-item strong {
    color: var(--text-dark);
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

/* CTA */
.hw-cta-wrapper {
    text-align: center;
    margin-top: 60px;
}

.hw-btn-large {
    font-size: 18px;
    padding: 22px 45px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3);
}

/* Mobile adjustments for the timeline */
@media (max-width: 600px) {
    .tech-stack-timeline {
        padding-left: 20px;
    }
    .tech-stack-timeline::before {
        left: 0;
    }
    .timeline-dot {
        left: -27px;
    }
    .engine-intro-card {
        flex-direction: column;
        padding: 25px;
    }
    .roi-section, .tech-layer-card {
        padding: 25px;
    }
}

/* ---------------------------------------------------------
   BUYER TRUST & COLOR INJECTIONS (How It Works)
--------------------------------------------------------- */

/* Clinical Trust Strip (Under Intro) */
.clinical-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 60px;
}

.trust-pill {
    background-color: none;
    color: var(--primary-blue);
    border: 1px solid rgba(0, 122, 255, 0.4);
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.05);
}

.trust-pill-icon {
    font-size: 16px;
}

/* Mobile Adjustments for Trust Elements */
@media (max-width: 600px) {
    .clinical-trust-strip.home-trust-strip {
        margin-top: 1rem;
    }

    .clinical-trust-strip {
        flex-direction: row; 
        flex-wrap: nowrap; /* Forces all 3 onto a single line */
        justify-content: left; /* Change to 'flex-start' if you want them hugging the left edge of the screen */
        gap: 5px; /* Ultra-tight premium spacing */
        margin-bottom: 30px; 
        
        /* Creates a smooth horizontal swipe on tiny screens instead of breaking */
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hides the ugly scrollbar but keeps the swipe functionality */
    .clinical-trust-strip::-webkit-scrollbar {
        display: none;
    }
    
    .trust-pill {
        background-color: #E6F2FF;
        border: 1px solid rgba(0, 122, 255, 0.1);
        padding: 5px 8px; 
        font-size: 0.425rem; /* Drops them to a crisp 10px */
        white-space: nowrap; /* Crucial: Stops the text from breaking into two lines inside the pill */
        width: auto; 
        letter-spacing: 0;
        flex-shrink: 0; /* Prevents the pills from squishing and distorting */
    }
    
    .trust-pill-icon {
        display: inline-flex;
        align-items: center;
    }
    
    .trust-pill-icon svg {
        width: 10px;
        height: 10px;
        margin-right: 2px;
        position: relative;
        top: -1px; /* Optically centers the tiny icon with the text */
    }
}

/* ---------------------------------------------------------
   PATIENT TESTIMONIAL CARD (Apple Medical Editorial)
--------------------------------------------------------- */
.patient-testimonial-card {
    background: #FFFFFF;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-radius: 32px;
    padding: 50px 60px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial-eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--scrub-blue);
    margin-bottom: 16px;
    font-family: "Montserrat", sans-serif;
}

/* The Editorial Watermark */
.quote-watermark {
    position: absolute;
    top: -40px;
    left: 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 300px;
    color: var(--primary-blue);
    opacity: 0.04;
    line-height: 1;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.testimonial-inner {
    display: flex;
    align-items: center;
    gap: 50px;
}

.testimonial-image-col {
    flex-shrink: 0;
    width: 192px;
    height: 240px;
}

/* The "Hero" Glow */
.avatar-glow-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.avatar-glow-wrapper::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: var(--primary-blue);
    filter: blur(25px);
    opacity: 0.35;
    z-index: -1;
}

.testimonial-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
    border: 4px solid #FFFFFF; /* Stark white border pushes it off the card */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

.testimonial-content-col {
    flex: 1;
    text-align: left;
}

.stars-container {
    display: none;
    gap: 4px;
    margin-bottom: 20px;
}

.testimonial-quote {
    font-size: 21px; /* Bigger, bolder statement */
    line-height: 1.6;
    font-weight: 500;
    color: var(--text-light);
    margin: 0 0 25px 0;
    letter-spacing: -0.5px;
}

/* The Relief Highlight */
.highlight-relief {
    font-weight: 700;
    color: #000;
    background: linear-gradient(120deg, rgba(90, 141, 238, 0.15) 0%, rgba(90, 141, 238, 0) 100%);
    padding: 2px 0;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.testimonial-author strong {
    font-weight: 800;
    font-size: 16px;
    color: #000;
    letter-spacing: -0.2px;
    color: var(--text-light);
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .patient-testimonial-card {
        padding: 40px 25px;
    }
    
    .quote-watermark {
        font-size: 200px;
        top: -20px;
        left: 10px;
    }
    
    .testimonial-inner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .testimonial-image-col {
        width: 162px;
        height: 210px;
    }

    .testimonial-content-col {
        text-align: left;
    }

    .stars-container {
        justify-content: center;
    }
    
    .testimonial-quote {
        font-size: 18px; /* Still large on mobile */
    }
    
    .testimonial-author {
        align-items: center;
    }
}

/* ---------------------------------------------------------
   HOMEPAGE SPECIFIC HELPERS (Vibe Integration)
--------------------------------------------------------- */
.home-trust-strip {
    margin-top: 35px;
    margin-bottom: 10px;
}

.home-testimonial {
    margin-top: 3.75rem;
}

/* Brings the upload icon to life */
.living-icon {
    animation: breathe-blue 3s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E6F2FF;
    padding: 20px;
    border-radius: 50%;
}

/* ---------------------------------------------------------
   OUR STORY PAGE (The Soul & Legacy)
--------------------------------------------------------- */
.story-container {
    max-width: 900px; /* Slightly narrower for a better reading experience */
}

.story-content-wrapper {
    margin-top: 40px;
}

.story-heading {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--primary-blue);
    margin-bottom: 20px;
    font-weight: 800;
}

.story-text-block {
    margin-bottom: 4rem;
}

/* Elevating the Founder Quote */
.founder-statement-block {
    background: #F5F5F7;
    border-radius: 32px;
    padding: 50px;
    text-align: center;
    margin: 60px 0;
    position: relative;
}

.statement-marks {
    font-family: Georgia, serif;
    font-size: 80px;
    color: var(--primary-blue);
    line-height: 0;
    opacity: 0.2;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.statement-text {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 30px 0;
    position: relative;
    z-index: 2;
    letter-spacing: -0.5px;
}

.statement-author {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The Maggie Tribute Hero Card */
.maggie-tribute-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #E6F2FF 100%); /* Soft, clean Apple Medical gradient */
    border: 1px solid rgba(0, 122, 255, 0.1);
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: var(--shadow-soft); /* Swapped to the softer shadow */
}

.maggie-image-col {
    width: 40%;
    align-self: stretch;
}

.maggie-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.maggie-text-col {
    width: 60%;
    padding: 50px 40px;
}

.tribute-badge {
    display: inline-block;
    background: var(--scrub-blue); /* Solid scrub blue so it pops against the soft background */
    color: white;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.tribute-title {
    margin: 0 0 20px 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--primary-blue); /* Changed from white to primary blue */
}

.tribute-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark); /* Changed to dark text for readability */
    margin-bottom: 15px;
}

.tribute-text:last-child { 
    margin-bottom: 0; 
}

.tribute-text strong { 
    color: #000; /* Crisp black for bold text */
}

/* The Promise Box */
.promise-box {
    background: #E6F2FF;
    border-top: .4rem solid var(--scrub-blue);
    border-radius: 24px;
    padding: 4rem;
    margin-top: 60px;
}

.promise-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--primary-blue);
    margin-bottom: 20px;
    font-weight: 800;
}

.promise-text {
    font-size: 1rem; 
    color: #4A5568;
    line-height: 1.6;
    margin-bottom: 15px;
}

.promise-text:last-child { margin-bottom: 0; }

/* Mobile Adjustments for Story */
@media (max-width: 768px) {
    .maggie-tribute-card {
        flex-direction: column;
    }
    
    .maggie-image-col, .maggie-text-col {
        width: 100%;
    }
    
    .maggie-hero-img {
        height: auto; 
        aspect-ratio: 1 / 1; 
    }
    
    .maggie-text-col {
        padding: 40px; /* Exactly matches the Promise Box padding */
        box-sizing: border-box; /* Stops the padding from pushing the text off-screen */
    }
    
    .statement-text {
        font-size: 20px;
    }
    
    .founder-statement-block {
        padding: 40px 25px;
    }
}


/* ---------------------------------------------------------
   FAQ KNOWLEDGE BASE (Interactive Accordions)
--------------------------------------------------------- */
.faq-container {
    max-width: 900px;
}

/* Category Filter Pills (Upgraded Apple UI) */
.faq-categories {
    display: flex;
    flex-wrap: wrap; /* Wraps to the next line instead of hiding off-screen */
    justify-content: flex-start; /* Aligns left for easy reading */
    gap: 12px;
    margin-top: 30px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .faq-categories {
        justify-content: center; /* Centers on desktop where there is room */
    }
}

.category-pill {
    background: #F2F2F7; /* Apple system gray - stops the wash out */
    border: 2px solid transparent; 
    color: var(--text-dark); /* Darker text for inactive states */
    padding: 12px 24px; /* Slightly chunkier and easier to tap */
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.category-pill:hover {
    background: #E5E5EA; /* Slightly darker gray on hover */
    transform: translateY(-1px);
}

.category-pill.active {
    background: var(--primary-blue);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
    transform: translateY(-2px);
}

/* Accordion Wrapper */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq-card.active {
    border-color: rgba(90, 141, 238, 0.3);
    box-shadow: 0 10px 30px rgba(90, 141, 238, 0.1);
}

/* The Clickable Header */
.faq-header {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #FFFFFF;
    gap: 20px;
}

.faq-question-text {
    font-size: 17px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F2F2F7;
    border-radius: 50%;
    color: var(--primary-blue);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease;
}

.faq-card.active .faq-icon {
    transform: rotate(180deg);
    background: #E6F2FF;
}

/* The Sliding Content (CSS Grid Trick) */
.faq-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-card.active .faq-content-wrapper {
    grid-template-rows: 1fr;
}

.faq-content-inner {
    overflow: hidden;
}

.faq-answer {
    padding: 0 30px 30px 30px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
}

.faq-answer strong {
    color: #000;
}

.faq-answer ul {
    margin: 15px 0 0 0;
    padding-left: 20px;
}

.faq-answer li {
    margin-bottom: 8px;
}

/* Special Support Card Styling */
.support-card {
    background: #F9F9FB;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-top: 40px;
}

.support-badge {
    font-size: 24px;
    margin-bottom: 10px;
}

.support-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #000;
}

.support-email-link {
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(0, 122, 255, 0.2);
    transition: border-color 0.2s;
}

.support-email-link:hover {
    border-color: var(--primary-blue);
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .faq-header { padding: 20px; }
    .faq-answer { padding: 0 20px 20px 20px; }
    .faq-question-text { font-size: 16px; }
}


/* ---------------------------------------------------------
   KNOWLEDGE BASE CATEGORY GRID (HubSpot Aesthetic)
--------------------------------------------------------- */
.faq-categories-grid {
    display: grid;
    /* Forces 3 cards per row on desktop, wrapping gracefully */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.kb-category {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.kb-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    border-color: rgba(90, 141, 238, 0.3);
}

.kb-category.active {
    background: #F4F9FF; /* Soft premium blue tint */
    border: 2px solid var(--primary-blue);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.15);
    /* Pulls it up slightly so the 2px border doesn't cause a layout jump */
    margin: -1px; 
}

.kb-icon {
    color: var(--primary-blue);
    margin-bottom: 12px;
    background: #F9F9FB;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.kb-category.active .kb-icon {
    background: #FFFFFF;
}

.kb-category span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.2px;
}


/* ---------------------------------------------------------
   KNOWLEDGE BASE LIVE SEARCH (Desktop Only)
--------------------------------------------------------- */
.faq-search-container {
    display: none; /* Hidden by default on mobile */
    position: relative;
    margin: 30px auto 0 auto;
}

@media (min-width: 768px) {
    .faq-search-container {
        display: block; /* Revealed on Desktop/Tablet */
    }
}

.faq-search-container .search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

#faqSearchInput {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 18px 20px 18px 55px;
    border-radius: 100px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    color: var(--text-dark);
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* The Apple Focus Glow */
#faqSearchInput:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(90, 141, 238, 0.15);
}

#faqSearchInput::placeholder {
    color: #a1a1a6;
    font-weight: 500;
}


/* Mobile: Force a 2-column grid so it looks like a clean dashboard */
@media (max-width: 600px) {
    .faq-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Make the 'All Answers' card span the full width at the top */
    .kb-category[data-filter="all"] {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 15px;
        padding: 15px;
    }
    .kb-category[data-filter="all"] .kb-icon {
        margin-bottom: 0;
        width: 36px;
        height: 36px;
    }
    .kb-category[data-filter="all"] .kb-icon svg {
        width: 18px;
        height: 18px;
    }
}


/* ---------------------------------------------------------
   V2 MAGGIE REPORT UI (Premium Sandboxed Classes)
--------------------------------------------------------- */
.maggie-rep-container {
    max-width: 900px;
}

/* Document Header */
.maggie-rep-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1D1D1F;
    color: white;
    padding: 15px 30px;
    border-radius: 20px 20px 0 0;
    margin-top: clamp(2rem, 5vw, 4rem);  
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.doc-meta {
    display: flex;
    gap: 20px;
}

.doc-id { color: var(--scrub-blue); }
.doc-time { color: #86868b; }

.doc-certification {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-green);
}

/* Main Wrapper */
.maggie-rep-main-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    border-top: none;
    border-radius: 0 0 24px 24px;
    box-shadow: var(--shadow-soft);
    padding: 50px;
    margin-bottom: 50px;
}

/* Dashboard Score Area */
.maggie-rep-dashboard {
    display: flex;
    gap: 40px;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dash-image-col {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 4px solid #F2F2F7;
}

.dash-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-score-col { flex: 1; }

.urgency-label-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.urgency-bar-fill {
    /* Forces it to start at 0 so it has room to grow */
    width: 0%; 
    /* The App-style cubic-bezier makes it start fast and smoothly decelerate */
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

.dash-title {
    margin: 0;
    /* Scales from 1.5rem (24px) on mobile to 2rem (32px) on desktop */
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 900;
    letter-spacing: -1px;
    color: #000;
}

.dash-subtitle {
    margin: 10px 0 0 0;
    /* Scales from 0.875rem (14px) on mobile to 0.9375rem (15px) on desktop */
    font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
    color: var(--text-light);
    font-weight: 600;
}

/* ---------------------------------------------------------
   MAGGIE'S DYNAMIC SOUL AVATAR (Siri / Tuxedo Edition)
--------------------------------------------------------- */
.maggie-rep-voice-box {
    background: #E6F2FF;
    border-left: 6px solid var(--primary-blue);
    padding: 30px 40px;
    border-radius: 0 20px 20px 0;
    margin: 40px 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.maggie-avatar-circle {
    width: 72px; /* Noticeably larger (up from 54px) */
    height: 72px;
    background: #0A0A0A; /* Deep Tuxedo Black */
    border-radius: 50%;
    display: flex;
    align-items: flex-end; /* Pins the avatar shoulders to the bottom */
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden; /* Keeps the avatar base perfectly round */
    
    /* The outer, soothing translucent pulse */
    animation: maggie-aura 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; 

}

/* ---------------------------------------------------------
   MAGGIE'S BIOLOGICAL ANIMATIONS (Relaxed & Soothing Edition)
--------------------------------------------------------- */
/* Heavy, deliberate panting (No longer glitching) */
.maggie-ribbons {
    transform-origin: 32px 34px;
    transform-box: fill-box; 
    /* Slowed down from 0.6s to 1.5s */
    animation: maggie-survival-breathe 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes maggie-survival-breathe {
    /* Reduced the swing and cut the rotation in half */
    0% { transform: scale(0.96) rotate(-1.5deg); } 
    100% { transform: scale(1.06) rotate(1.5deg); } 
}

/* Calm, steady resting heartbeat */
.maggie-heartbeat {
    transform-origin: 32px 34px;
    /* Slowed down to a relaxed 1.5s resting pulse */
    animation: maggie-relaxed-heart 2.6s infinite;
}

@keyframes maggie-relaxed-heart {
    0%, 50%, 100% { transform: scale(1); opacity: 0.7; }
    /* A gentle, soft double-tap pulse, no blinding flashes */
    15% { transform: scale(1.25); opacity: 1; }   
    25% { transform: scale(1); opacity: 0.7; }      
    35% { transform: scale(1.25); opacity: 1; }   
}

/* Outer glowing pulse (Soft Scrub Blue fading into nothing) */
@keyframes maggie-aura {
    0% {
        box-shadow: 0 0 0 0 rgba(90, 141, 238, 0.5), 0 5px 15px rgba(0,0,0,0.1);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(90, 141, 238, 0), 0 8px 25px rgba(0,0,0,0.2);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(90, 141, 238, 0), 0 5px 15px rgba(0,0,0,0.1);
    }
}

.maggie-soul-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Inner Siri Core breathing animation */
.siri-core {
    transform-origin: 32px 32px;
    animation: core-breathe 3s ease-in-out infinite alternate;
}

@keyframes core-breathe {
    0% { transform: scale(0.7); opacity: 0.3; }
    100% { transform: scale(1.3); opacity: 0.85; }
}

.voice-content-col {
    flex: 1;
}

.voice-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-blue);
    padding-top: 4px; /* Optically aligns the title with the top of the circular avatar */
}

.voice-text {
    margin: 0;
    font-size: 1.125rem; /* 18px equivalent */
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 500;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .maggie-rep-voice-box {
        flex-direction: column;
        gap: 15px;
        padding: 25px 20px;
    }
    .voice-title {
        padding-top: 0;
    }
}

/* Medical Data Grid */
.maggie-rep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.full-span { grid-column: 1 / -1; }

.rep-grid-item {
    background: #F9F9FB;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.03);
}

.rep-label {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.rep-data {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
}

.primary-data { color: var(--primary-blue); font-size: 20px; font-weight: 800; }

.marker-data {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.marker-pill {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Action Plan */
.maggie-rep-action-plan {
    background: #FFFFFF;
    border: 2px solid var(--success-green);
    padding: 40px;
    border-radius: 24px;
    margin-bottom: 40px;
    box-shadow: 0 15px 35px rgba(52, 199, 89, 0.1);
}

.plan-title {
    margin: 0 0 20px 0;
    /* Scales from 1.125rem (18px) to 1.375rem (22px) */
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    font-weight: 800;
    color: #1E8E3E;
}

.plan-list {
    margin: 0;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark);
}

.plan-list li { margin-bottom: 15px; }
.plan-list li:last-child { margin-bottom: 0; }

/* Vet Prep Section (New Value Add) */
.maggie-rep-vet-prep {
    background: #F2F2F7;
    padding: 40px;
    border-radius: 24px;
    margin-bottom: 40px;
}

.prep-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 800;
    color: #000;
}

.prep-desc {
    font-size: 15px;
    color: var(--text-light);
    margin: 0 0 25px 0;
}

.prep-questions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.prep-q {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.prep-q strong { color: var(--primary-blue); margin-right: 5px; }

/* ER Box */
.maggie-rep-er-box {
    background: #ffebee;
    border-left: 6px solid var(--warning-red);
    padding: 30px;
    border-radius: 0 20px 20px 0;
    margin-bottom: 50px;
}

.er-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 800;
    color: #c62828;
}

.er-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #c62828;
    font-weight: 500;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .maggie-rep-doc-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .maggie-rep-dashboard { flex-direction: column; text-align: center; }
    .urgency-label-wrapper { justify-content: center; }
    .maggie-rep-grid { grid-template-columns: 1fr; }
    .maggie-rep-main-card { padding: 30px 20px; }
    .maggie-rep-voice-box, .maggie-rep-action-plan, .maggie-rep-vet-prep, .maggie-rep-er-box { padding: 25px 20px; }
    .doc-meta { border-bottom: 1px solid var(--text-light); padding-bottom:1rem; }
}

/* ---------------------------------------------------------
   LEGAL PAGES (Privacy & Terms Helpers)
--------------------------------------------------------- */
.policy-trust-strip {
    margin-top: 30px;
    margin-bottom: 40px;
}

.first-policy-block .section-label {
    margin-top: 0;
}

/* ---------------------------------------------------------
   GLOBAL PRICING BANNER
--------------------------------------------------------- */
.pricing-banner {
    background-color: var(--scrub-blue);
    color: #FFFFFF;
    text-align: center;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.pricing-banner strong {
    font-weight: 800;
    font-size: 14px;
}

.banner-divider {
    margin: 0 8px;
    opacity: 0.5;
    font-weight: 300;
}

/* Ensure the banner looks clean on small mobile screens */
@media (max-width: 400px) {
    .pricing-banner {
        font-size: 11px;
        padding: 8px 10px;
    }
    .pricing-banner strong {
        font-size: 12px;
    }
    .banner-divider {
        margin: 0 8px;
    }
}

/* ---------------------------------------------------------
   AFFILIATE PRODUCT PILLS
--------------------------------------------------------- */
.product-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #E5E5EA;
}

.affiliate-pill {
    display: inline-flex;
    align-items: center;
    background-color: #E8F2FF; /* Light scrub blue */
    color: var(--primary-blue);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #D1E4FF;
}

.affiliate-pill:hover {
    background-color: var(--primary-blue);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2);
}

.affiliate-pill-icon {
    margin-right: 6px;
    font-size: 14px;
}

.affiliate-pill-header {
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: #86868b;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------------
   CLINIC HANDOFF & FUNNEL (Left-Aligned Refactor)
--------------------------------------------------------- */
.maggie-rep-handoff {
    background: #F9F9FB;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 30px 20px;
    border-radius: 24px;
    margin-bottom: 40px;
    text-align: left;
}

.handoff-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 800;
    color: #000;
}

.handoff-desc {
    font-size: 0.9375rem; 
    color: var(--text-light);
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.handoff-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.handoff-btn {
    flex: 0 1 auto; /* Prevents buttons from stretching awkwardly on desktop */
    padding: 14px 24px;
    font-size: 1rem;
}

/* ---------------------------------------------------------
   HIGH-CONVERTING FUNNEL CTA
--------------------------------------------------------- */
.maggie-rep-funnel {
    background: #F4F9FF; /* Soft premium blue tint */
    border: 1px solid #D1E4FF;
    padding: 40px;
    border-radius: 24px;
    text-align: left;
    margin-top: 10px;
}

.funnel-title {
    margin: 0 0 10px 0;
    /* Scales from 1.375rem (22px) to 1.625rem (26px) */
    font-size: clamp(1.375rem, 3.5vw, 1.625rem);
    font-weight: 800;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

.funnel-desc {
    font-size: 1rem;
    color: #4A5568;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.funnel-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}


.funnel-benefits li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 0.9375rem; 
    font-weight: 600;
    color: var(--text-dark);
}

.funnel-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--success-green);
    font-size: 18px;
    font-weight: 800;
}

.funnel-btn-full {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 16px 32px;
    font-size: 1.125rem;
    border-radius: 12px;
}

/* Mobile Fixes */
@media (max-width: 600px) {
    .maggie-rep-funnel { padding: 30px 20px; }
    .funnel-title { font-size: 22px; }
}


/* =========================================================
   THE INTERSTELLAR / CINEMATIC STORY ELEMENTS
========================================================= */

/* --- The Cinematic Founder Quote Block (Minimalist Edition) --- */
.singularity-founder-block {
    background-color: #000000; /* Pure cinematic black */
    border-radius: 32px;
    padding: 4rem;
    text-align: left;
    margin: clamp(2rem, 5vw, 4rem) auto;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Barely-there glass border */
    box-shadow: var(--shadow-soft);
    border-left: 0.4rem solid var(--scrub-blue);
}

.space-quote-svg {
    width: 45px;
    height: 45px;
    margin-bottom: 25px;
    opacity: 0.9;
    /* Soft scrub blue glow matching the engine */
    filter: drop-shadow(0 0 12px rgba(90, 141, 238, 0.5));
}

.singularity-quote-text {
    font-size: 28px;
    line-height: 1.5;
    color: #F5F5F7; /* Apple off-white for perfect readability */
    font-weight: 400;
    margin: 0 0 30px 0;
    letter-spacing: -0.5px;
}

.singularity-author {
    display: inline-block;
    color: #8BB4F6; /* MAGG.IE Engine Blue */
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* --- The MAGG.IE Tribute Card --- */
.maggie-tribute-card {
    margin: 60px 0;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    border-radius: 32px;
}

.maggie-tribute-img-wrapper {
    flex-shrink: 0;
    margin: 0 auto;
}

.maggie-tribute-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 60px rgba(90, 141, 238, 0.5), 0 20px 40px rgba(0,0,0,0.8);
}

.maggie-tribute-text {
    flex: 1;
    min-width: 280px;
}

.cinematic-title {
    font-size: 22px;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.cinematic-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #e4e6eb;
}

.cinematic-desc.mt-15 {
    margin-top: 15px;
}

/* --- Genesis Protocol Box --- */
.genesis-protocol-box {
    background: #1D1D1F;
    border-top: .4rem solid var(--scrub-blue);
    color: white;
    box-shadow: margin: clamp(2rem, 5vw, 4rem) auto;;
}

.genesis-title {
    color: white;
    letter-spacing: -0.5px;
}

.genesis-text {
    color: #A1A1A6;
}

.genesis-text strong {
    color: white;
}


/* =========================================================
   NATIVE IOS-STYLE MOBILE DASHBOARD (Dark Mode)
========================================================= */

/* 1. Hamburger Icon Setup */
.hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001; /* Must sit above the 999 overlay */
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 38px;
    height: 38px;
    align-items: center;
}

.burger-line {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--text-dark);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.3s ease;
}

@media (max-width: 600px) {
    .hamburger-btn { display: flex; }
    .header-nav { gap: 12px; }
}

/* Transform hamburger to an 'X' and change color to pop against dark mode */
.site-header.menu-open .burger-line { background-color: var(--text-light); }
.site-header.menu-open .top-line { transform: translateY(4px) rotate(45deg); }
.site-header.menu-open .bottom-line { transform: translateY(-4px) rotate(-45deg); }

/* 2. Full-Screen Frosted Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh; /* iOS safe-area fix */
    z-index: 999; 
    
    background-color: var(--card-bg); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-header.menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 3. Dead-Centered Wrapper */
.mobile-dashboard-wrapper {
    width: 100%;
    max-width: 360px; 
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    
    /* Slight upward slide animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.site-header.menu-open .mobile-dashboard-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Lock the header in place when open so the 'X' never slides off-screen */
.site-header.menu-open {
    transform: translateY(0) !important;
}

/* 4. System Status Pill */
.dash-system-status {
    display: none;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: #000000; 
    color: #F5F5F7; 
    padding: 16px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    margin-bottom: 20px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--success-green);
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(52, 199, 89, 0.6);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 12px rgba(52, 199, 89, 1); }
}

/* 5. Left-Aligned iOS Stack Items */
.dash-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.dash-stack-item {
    background: var(--card-bg); 
    border-radius: 16px;
    padding: 18px 24px; 
    text-decoration: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    gap: 18px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-soft);
    transition: transform 0.1s, background 0.2s;
    box-sizing: border-box;
    width: 100%;
}

.dash-stack-item:active {
    transform: scale(0.97);
    background: #var(--scrub-blue);
}

.dash-stack-item svg {
    color: var(--scrub-blue); 
}

/* 6. Centered Primary Action Button */
.dash-stack-item.primary-action {
    background: var(--scrub-blue);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 10px 25px rgba(90, 141, 238, 0.3);
    margin-top: 10px;
    justify-content: center; 
}

.dash-stack-item.primary-action svg {
    color: #FFFFFF;
}

/* 7. Bottom Footer Disclaimer */
.mobile-menu-footer {
    margin-top: 30px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menu-maggie-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--success-green); 
    font-weight: 600;
    margin-bottom: 6px;
}

.menu-footer-text {
    font-size: 12px;
    color: #86868b; 
    margin: 0;
    letter-spacing: 0.5px;
}

/* ---------------------------------------------------------
   CONTACT PAGE / IOS FORM STYLES
--------------------------------------------------------- */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    overflow: hidden;
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr 1.2fr;
    }
}

.contact-info-col {
    background: #F9F9FB;
    padding: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
    .contact-info-col {
        border-bottom: none;
        border-right: 1px solid rgba(0,0,0,0.05);
        padding: 50px;
    }
}

.contact-info-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: #000;
    letter-spacing: -0.5px;
}

.contact-info-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0 0 40px 0;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.method-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.method-icon {
    background: #E6F2FF;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
}

.method-text strong {
    color: #000;
    font-weight: 700;
}

.method-text a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.method-text span {
    color: var(--text-light);
}

/* The Form Side */
.contact-form-col {
    padding: 40px;
}

@media (min-width: 768px) {
    .contact-form-col {
        padding: 50px;
    }
}

.ios-form .form-group {
    margin-bottom: 25px;
}

.ios-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ios-form .form-control {
    width: 100%;
    box-sizing: border-box;
    background: #F2F2F7;
    border: 1px solid transparent;
    padding: 16px 20px;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px; /* Prevents iOS from auto-zooming */
    color: var(--text-dark);
    transition: all 0.2s ease;
}

/* The Apple Focus Glow */
.ios-form .form-control:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--scrub-blue);
    box-shadow: 0 0 0 4px rgba(90, 141, 238, 0.15);
}

.ios-form .form-control::placeholder {
    color: #a1a1a6;
}

/* Custom Select Dropdown */
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '▼';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-light);
    pointer-events: none;
}

.ios-form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.ios-form textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit-btn {
    width: 100%;
    display: block;
    text-align: center;
    padding: 18px;
    font-size: 16px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

.form-secure-text {
    text-align: center;
    font-size: 12px;
    color: #86868b;
    margin-top: 15px;
}

/* Split Row for First/Last Name */
.ios-form .split-row {
    display: flex;
    gap: 20px;
}

.ios-form .split-row .form-group {
    flex: 1;
    margin-bottom: 25px; 
}

/* Force them to stack vertically on small mobile screens */
@media (max-width: 500px) {
    .ios-form .split-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ---------------------------------------------------------
   IOS-STYLE SUCCESS TOAST NOTIFICATION
--------------------------------------------------------- */
.ios-success-toast {
    position: fixed;
    bottom: 40px; 
    left: 50%;
    transform: translate(-50%, 50px); /* Starts slightly lower for the slide-up effect */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 14px 24px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999; /* Keeps it above absolutely everything */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* The Apple "spring" curve */
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}

.ios-success-toast svg {
    color: var(--success-green);
    width: 20px;
    height: 20px;
}

/* The class JS will add to trigger the animation */
.ios-success-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* --- PUBLIC CASE LIBRARY SPECIFIC STYLES --- */

.seo-breadcrumbs {
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--text-light); /* Assuming you have this variable based on success.php */
}

.seo-breadcrumbs a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.seo-breadcrumbs a:hover {
    opacity: 0.8;
}

.case-dash-image {
    border-radius: 12px;
    max-width: 100%;
}

.case-score-badge {
    font-size: 16px;
    padding: 8px 16px;
}

/* Organic Traffic Conversion Box */
.seo-cta-box {
    margin-top: 30px;
    padding: 20px;
    background: #F0F4FF;
    border-radius: 12px;
    border: 1px solid #D1E0FF;
}

.seo-cta-box h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.seo-cta-box p {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--text-light);
}

.seo-cta-btn {
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
}


/* Utility Classes */
.spacing-top-md { margin-top: 30px; }
.spacing-top-lg { margin-top: 40px; }
.line-height-relaxed { line-height: 1.6; }



/* --- THE ARCHIVE INDEX GRID --- */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.archive-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.archive-card-link:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-float);
}

.archive-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.archive-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f1f3f5;
}

.archive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.archive-card-link:hover .archive-image {
    transform: scale(1.05);
}

.archive-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.archive-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.archive-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.archive-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    color: var(--text-dark);
    line-height: 1.3;
    text-transform: capitalize;
    /* NEW: Force uniform height and clean word breaks */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px; /* Keeps short titles perfectly aligned with long ones */
}

.archive-excerpt {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
    /* NEW: Clean excerpt truncating */
    /* display: -webkit-box; */
    -webkit-line-clamp: 3; /* Max 3 lines of preview text */
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: none; /* Bryan hiding excerpts until archive redesign */ 
}
.archive-read-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-blue);
}

.case-main-title {
    text-transform: capitalize;
}

/* --- UNIFIED TRIAGE URGENCY BADGES (One Class Does It All) --- */
.cases-blue, .cases-green, .cases-yellow-green, .cases-yellow, .cases-orange, .cases-red {
    display: inline-block;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 20px; /* Adjust if you want them rounder/sharper */
    color: #ffffff;
    text-align: center;
}

.cases-blue { background-color: var(--scrub-blue); }
.cases-green { background-color: #34C759; }
.cases-yellow-green { background-color: #A4C639; }
.cases-yellow { background-color: #FFCC00; }
.cases-orange { background-color: #FF9500; }
.cases-red { background-color: #FF3B30; }


/* --- ARCHIVE UPSELL FUNNEL --- */
.archive-upsell-funnel {
    margin-top: 30px;
}

.funnel-button-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.funnel-btn-half {
    flex: 1;
    min-width: 200px;
    box-sizing: border-box;
    /* NEW: Force text to dead-center both vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 20px; /* Ensures consistent height between both buttons */
}

/* ==========================================================================
   VETVISIT MAGG.IE ENGINE LOGO ANIMATIONS
   ========================================================================== */
.vv-nav-arrow {
    /* Rotates it to point top-right, and shrinks it to 75% size to create perfect floating padding */
    transform: rotate(-45deg) scale(0.75); 
}

.vv-inner-v {
    transform-origin: 256px 235px;
    animation: vv-core-levitate 4s ease-in-out infinite alternate;
}

.vv-siri-core {
    transform-origin: 256px 334px;
    animation: vv-core-breathe 3s ease-in-out infinite alternate;
}

.vv-maggie-heartbeat {
    transform-origin: 256px 334px;
    animation: vv-maggie-relaxed-heart 2.6s infinite;
}

@keyframes vv-core-levitate {
    0% { transform: translateY(0px); }
    /* Levitates the core forward along the trajectory of the arrow */
    100% { transform: translateY(-8px); } 
}

@keyframes vv-core-breathe {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.15); opacity: 0.9; }
}

@keyframes vv-maggie-relaxed-heart {
    0%, 50%, 100% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)); }
    15% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 16px rgba(255,255,255,0.9)); }   
    25% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)); }      
    35% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 16px rgba(255,255,255,0.9)); }   
}


/* ==========================================================================
   E-COMMERCE HERO LAYOUT
   ========================================================================== */
.product-listing-hero {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 60px;
}

/* Left Column: Gallery */
.product-gallery-col {
    position: sticky;
    top: 100px;
}

.gallery-main-display {
    margin-bottom: 16px;
}

.product-mockup-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: block; /* Removes weird image gap */
}

.gallery-thumbnails {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.gallery-thumb-item {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: top;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    background: #ffffff;
}

.gallery-thumb-item:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.gallery-thumb-item.active {
    border-color: var(--primary-blue);
    opacity: 1;
    box-shadow: 0 8px 20px rgba(90, 141, 238, 0.2);
}

.product-trust {
    margin-top: 20px;
}

/* ---------------------------------------------------------
   HERO SAMPLE MODULE
   Live widget preview replacing static mockup screenshots.
   Reuses the real report-card classes (score-badge, rep-label,
   marker-pill, plan-list) so this is a genuine condensed render
   of the actual report UI, not a separate mockup of it.
--------------------------------------------------------- */
.module-preview-card {
    background: #FFFFFF;
    border-radius: 28px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-float);
    padding: 32px;
}

.module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.module-eyebrow {
    margin-bottom: 0;
}

.module-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--success-green);
    white-space: nowrap;
}

.module-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-green);
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.6);
    animation: module-pulse 2s infinite ease-in-out;
}

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

/* Plain show/hide, not the grid-overlap crossfade used by the payment modal.
   That technique sizes its shared container to the TALLEST of all stacked
   panels (even hidden ones), which is wrong here since Overview / Markers /
   Home Care are very different lengths -- it produced a giant box with the
   shorter panels floating in empty space. Each tab should size to its own
   content only, like swapping a photo. */
.module-state-panel {
    display: none;
}

.module-state-panel.module-panel-active {
    display: block;
}

.module-panel-title {
    margin-top: 12px;
}

.module-marker-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.module-plan-title {
    margin-bottom: 16px;
}

.module-plan-list {
    font-size: 14px;
    line-height: 1.6;
}

.module-panel-thumb {
    width: 100%;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

.module-panel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.module-caption {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 16px;
}

.module-trust-line {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.8;
}

.module-tabs {
    /* Wraps to as many lines as needed instead of scrolling/cutting off,
       so all 6 tabs stay visible on any screen size. */
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 18px;
    justify-content: center;
    margin-top: 18px;
}

.module-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 18px 0 0 0;
}

.module-tab {
    /* min-height/min-width 44px meets Apple/Google's touch-target guideline.
       align-items: flex-end keeps the text (and its underline) sitting at the
       bottom of that box, so the extra tap area is invisible padding above/
       around the label rather than pushing the underline away from the text. */
    font-family: inherit;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-light);
    padding: 4px 10px;
    box-sizing: border-box;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.module-tab:hover {
    color: var(--primary-blue);
}

.module-tab.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

/* Mobile hardening for the sample module widget. At true phone widths the
   card's inner content area is only ~280-300px -- the header row (eyebrow +
   live badge) was right at the edge of overflowing/wrapping ugly, and the
   32px card padding + 150px thumbnail ate too much vertical space. */
@media (max-width: 600px) {
    .module-preview-card {
        padding: 20px;
        border-radius: 20px;
    }

    .module-header {
        flex-wrap: wrap;
        row-gap: 6px;
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .module-panel-thumb {
        height: 120px;
        margin-bottom: 14px;
    }

    .urgency-label-wrapper {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .module-panel-title {
        margin-top: 8px;
    }

    .module-tabs {
        row-gap: 4px;
        column-gap: 12px;
        margin-top: 16px;
    }

    .module-tab {
        font-size: 12px;
    }
}

/* Right Column: Typography & Buy Box */
.product-kicker {
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-title {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.product-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.review-rating-text {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 14px;
}

.review-count-text {
    color: var(--text-light);
    font-size: 14px;
}

.product-price-block {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.price-currency {
    font-size: 24px;
    font-weight: 600;
    vertical-align: top;
}

.price-amount {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

.price-disclaimer {
    color: var(--text-light);
    font-size: 14px;
    margin-top: 4px;
}

/* ==========================================================================
   PRODUCT BULLETS ALIGNMENT
   ========================================================================== */
.product-bullets {
    margin-bottom: 30px;
}

.bullets-title {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.bullets-list {
    list-style: none; /* Strips out the default browser bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bullet-item {
    display: flex;
    align-items: flex-start; /* Aligns the checkmark to the top line of the text */
    gap: 10px;
}

.bullet-icon {
    flex-shrink: 0; /* Prevents the checkmark from shrinking if the text gets long */
    margin-top: 1px; /* Optically centers the checkmark with the text baseline */
}

.bullet-text {
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.5;
}

/* The Scanner / Buy Box modifications */
.buy-box-styling {
    margin: 0;
    padding: 30px 20px;
    background: #ffffff;
    border: 2px solid var(--primary-blue);
    box-shadow: 0 10px 30px rgba(90, 141, 238, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.buy-box-styling:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(90, 141, 238, 0.25);
}

.buy-box-btn {
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
}

.small-upload-logo {
    margin-bottom: 15px;
}

.small-upload-logo .maggie-avatar-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.buy-box-secondary {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .product-listing-hero {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .product-gallery-col {
        position: relative;
        top: 0;
        order: 2; /* Forces the images to render SECOND (on the bottom) */
    }
    .product-details-col {
        order: 1; /* Forces the text, stars, and Buy Box to render FIRST (on top) */
    }
    .product-title {
        font-size: 28px;
    }
}


/* ==========================================================================
   PRODUCT REVIEWS ALIGNMENT
   ========================================================================== */
.product-reviews-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.product-stars-group {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 18px; /* Locks the container height to the star height */
}

.review-star {
    width: 18px;
    height: 18px;
    color: #FFA41C; /* Hardcoded Amazon Gold */
}

.review-rating-text {
    color: #007AFF; /* Hardcoded Primary Blue */
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    display: block;
    margin-top: 2px; /* Optical adjustment to center with stars */
    text-decoration: underline;
}

.review-count-text {
    color: #718096; /* Hardcoded Slate Gray */
    font-size: 14px;
    line-height: 1;
    display: block;
    margin-top: 2px; /* Optical adjustment to center with stars */
}

/* ==========================================================================
   MINIMAL BUY BOX (BUTTON & LINK ONLY)
   ========================================================================== */
.minimal-buy-box {
    margin-top: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    text-align: center;
}

/* Adds a slightly larger, softer shadow to the button on hover for that e-commerce feel */
.minimal-buy-box:hover .buy-box-btn {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(90, 141, 238, 0.35);
}

.centered-sample-link {
    text-align: center;
    display: block;
    margin-top: 0;
}


/* ==========================================================================
   BUY BOX SCANNER LAYOUT
   ========================================================================== */
.scanner-buy-box {
    display: none; /* Hidden by default until the JS triggers it */
    padding: 20px 0;
}

.scanner-xray-centered {
    margin: 0 auto;
}

.scanner-loader-title {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

.scanner-loader-subtitle {
    text-align: center;
    color: var(--text-light);
    margin-top: 5px;
}

/* ==========================================================================
   REVIEW LINKING & SCROLLING
   ========================================================================== */
.review-scroll-link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.review-scroll-link:hover {
    opacity: 0.8; /* Subtle visual feedback that it's clickable */
}

.all-reviews-action {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05); /* Separates it cleanly from Teddy */
}

.subtle-review-link {
    font-size: 14px;
    color: var(--text-light);
}

.subtle-review-link:hover {
    color: var(--primary-blue);
}


/* ==========================================================================
   HOMEPAGE FAQ WRAPPER
   ========================================================================== */
.home-faq-wrapper {
    margin: 3.75rem auto 0rem !important;
}