/* 121125 9pm v3815 */

/*
  @tweakable [string] Brief note about the large stylesheet reduction applied previously.
  Edit this note to record rationale or to surface a brief reminder to other editors.
  Example: "Removed legacy duplicate rules and unused components to improve performance."
*/
:root { --style-reduction-note: "Removed ~1,073 lines of legacy/duplicated CSS to simplify and improve maintainability."; }

/*
  NOTE ABOUT THE REMOVAL (added 2025-12):
  During the last refactor a large block (~1,073 lines) of duplicated, obsolete or
  rarely-used styles was removed from this file to improve clarity, reduce CSS size,
  and avoid conflicting rules. The removals targeted:
    - Legacy layout overrides duplicated across pages
    - Deprecated admin/test-only styles not used in production
    - Inline experimental snippets that caused visual regressions
    - Redundant icon/asset fallbacks that are now centralized

  Were they unneeded?
  - Mostly yes: many rules were duplicates or targeted markup that no longer exists.
  - A few rules were intentionally trimmed and replaced by consolidated, tweakable
    variables elsewhere to preserve functionality with fewer lines.

  If you'd like to restore specific parts, set the --style-reduction-note above to
  describe what to reintroduce and I can re-insert targeted snippets rather than
  reverting the full removed block.

  (This explanatory block is intentionally small and tweakable so collaborators can
  adjust the reason text without editing the rest of the stylesheet.)
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em; /* Tighter letter spacing for premium feel */
    font-optical-sizing: auto;
    line-height: 1.6;
    color: var(--text-color-dark);
    background-color: var(--background-light);
    
    font-size: var(--body-base-font-size);
}

h1, h2, h3, h4, h5 {
    
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text-color-dark);
}

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

/* @tweakable [number] Horizontal offset (in px) of the header logo icon on desktop (positive moves right) */
/* @tweakable [number] Vertical offset (in px) of the header logo icon on desktop (positive moves down) */
/* @tweakable [number] Horizontal offset (in px) of the header logo icon on mobile (positive moves right) */
/* @tweakable [number] Vertical offset (in px) of the header logo icon on mobile (positive moves down) */
/* The following CSS variables are the single-source-of-truth for positioning the header logo
   across all pages. Tweak those numeric values to nudge the logo icon on desktop and mobile.
*/
:root {
    /* @tweakable [number] --logo-icon-desktop-left: Horizontal offset (px) for desktop logo icon */
    --logo-icon-desktop-left: -5px;
    /* @tweakable [number] --logo-icon-desktop-top: Vertical offset (px) for desktop logo icon */
    --logo-icon-desktop-top: 42px;
    /* @tweakable [number] --logo-icon-mobile-left: Horizontal offset (px) for mobile logo icon */
    --logo-icon-mobile-left: -5px;
    /* @tweakable [number] --logo-icon-mobile-top-position: Vertical position (px) for mobile logo icon relative to header top */
    --logo-icon-mobile-top-position: 62px;

    /* @tweakable [number] Base font size in rem for the body text (0.75 = 12px) */
    --body-base-font-size: 0.75rem;
    
    --primary-color: #1a237e; /* Deep royal blue for primary actions and gradients */
    --secondary-color: #00695c; /* Rich teal for accents and secondary elements */
    --accent-color: #d4af37; /* Gold accent for premium touch */
    --text-color-dark: #1a1a1a; /* Rich black for main headings and text */
    --text-color-light: #4a5568; /* Sophisticated gray for paragraphs and secondary text */
    --background-light: #f8fafc; /* Premium light background */
    --background-white: #ffffff; /* Pure white for cards and containers */
    --border-color: #e2e8f0; /* Subtle borders */

    /* @tweakable horizontal offset (in px) for the tagline under the logo */
    --tagline-horizontal-offset: -40px;
   
    /* @tweakable horizontal position (in px) of the logo's text relative to its icon on desktop */
    --logo-desktop-text-offset: 45px;
    
    /* @tweakable left position (in px) of the logo icon on desktop */
    --logo-desktop-icon-left: -5px;
    
    /* @tweakable top position (in px) of the logo icon on desktop (relative to .logo container top) */
    --logo-desktop-icon-top: 35px;

    /* @tweakable spacing (in rem) between navigation links */
    --nav-link-spacing: 0.2rem; /* Reduced to fit more links in the nav bar */
    
    /* @tweakable font size (in rem) for desktop navigation links */
    --nav-link-font-size: 0.9rem;
    
    /* @tweakable [string] text-decoration property for navigation links (e.g. 'none', 'underline') */
    --nav-link-text-decoration: none;
    
    /* @tweakable [string] font-weight property for navigation links (e.g. '500', '700', 'bold') */
    --nav-link-font-weight: 700;
    
    /* @tweakable vertical padding (in rem) for desktop navigation links */
    --nav-link-vertical-padding: 0.1rem;
    
    /* @tweakable horizontal padding (in rem) for desktop navigation links */
    --nav-link-horizontal-padding: 0.2rem; /* Reduced to fit more links in the nav bar */
    
    /* @tweakable font size (in rem) for mobile navigation links */
    --nav-link-mobile-font-size: 0.72rem;
    
    /* @tweakable vertical padding (in rem) for mobile navigation links */
    --nav-link-mobile-vertical-padding: 0.1rem;
    
    /* @tweakable horizontal padding (in rem) for mobile navigation links */
    --nav-link-mobile-horizontal-padding: 0.1rem; /* Reduced for tighter fit on small displays */
    
    /* @tweakable spacing (in rem) between mobile navigation links */
    --nav-link-mobile-spacing: 0.01rem;
    
    /* @tweakable top margin (in rem) for the main navigation bar on mobile */
    --nav-mobile-top-margin: -0.2rem;
    
    /* @tweakable top margin (in px) for the main navigation bar on desktop (pushes it down from the logo) */
    --nav-desktop-top-margin: 55px;

    /* @tweakable desktop font size for primary page headings (h1 in sections) */
    --main-page-heading-font-size: 1.875rem;
    
    /* @tweakable bottom margin for primary page headings (h1 in sections) */
    --main-page-heading-margin-bottom: 1.5rem;
    
    /* @tweakable mobile font size for primary page headings (h1 in sections) */
    --main-page-heading-mobile-font-size: 1.35rem;

    /* @tweakable Hero Title font size (desktop) in rem (Default matches index.html) */
    --hero-h1-size-desktop: 1.875rem;
    
    /* @tweakable Hero Title font size (mobile, 968px max) in rem (Default matches index.html mobile override) */
    --hero-h1-size-mobile: 2.2rem;
    
    /* @tweakable Hero Subtitle font size (desktop) in rem (Default matches index.html) */
    --hero-p-size-desktop: 1.1rem;

    /* @tweakable desktop font size for primary blue hero headings (home, pricing, vault) in rem */
    --hero-primary-heading-font-size: var(--hero-h1-size-desktop); /* Updated to use new variable */
    /* @tweakable desktop max-width (in px) for blue hero subtitle paragraphs */
    --hero-primary-subtitle-max-width: 700px;
    /* @tweakable text alignment for blue hero headings/subtitles ('left' or 'center') */
    --hero-primary-text-align: center;

    /* @tweakable standard vertical padding used for most sections */
    --section-vertical-padding: 2.5rem;
    
    /* @tweakable top padding (in px) of the logo container */
    --logo-top-padding: 25px;
    
    /* @tweakable bottom padding (in rem) of the site header */
    --site-header-bottom-padding: 0.3rem; /* Adjusted from 0.6rem (approx 10px less) */

    /* @tweakable top margin (in rem) for idea generation buttons in the admin console */
    --admin-idea-btn-margin-top: 1.5rem;
    
    /* @tweakable top margin (in rem) for the regenerate idea button in the admin console */
    --admin-idea-regenerate-margin-top: 0.75rem;

    --hero-gradient-start: linear-gradient(135deg, #1a237e 0%, #303f9f 50%, #3f51b5 100%);
    --hero-gradient-end: #1a237e;
    --hero-text-color: white;
    --hero-title-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* NEW HERO VARIABLES */
    /* @tweakable gap size between columns in the hero split layout */
    --hero-split-gap: 4rem;
    
    /* @tweakable background color for the hero visual column container */
    --hero-visual-bg: #ffffff;
    
    /* @tweakable box shadow applied to the hero visual container (video/mockup) */
    --hero-visual-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* @tweakable text color for the hero tagline badge */
    --hero-tagline-color: #80cbc4;

    /* @tweakable horizontal padding (in rem) for article content */
    --articles-horizontal-padding: 1.0rem; 

    /* @tweakable gap (in rem) between filter buttons */
    --filter-gap: 0.5rem;
    
    /* @tweakable vertical padding (in rem) for filter buttons */
    --filter-btn-vertical: 0.45rem;
    /* @tweakable horizontal padding (in rem) for filter buttons */
    --filter-btn-horizontal: 0.9rem;

    /* @tweakable bottom margin/gap for library content sections */
    --library-bottom-gap: 4rem; 
    
    /* @tweakable padding for the bottom of modal bodies */
    --modal-body-padding-bottom: 2rem;

    /* @tweakable border radius (in px) for article headers inside modals */
    --modal-article-header-border-radius: 15px; 
    
    /* @tweakable bottom margin (in rem) for article headers inside modals */
    --modal-article-header-margin-bottom: 1rem;
    
    /* @tweakable internal padding (in rem) for article headers inside modals */
    --modal-article-header-padding: 2.5rem;
    
    /* @tweakable bottom padding (in rem) for article content inside modals */
    --modal-article-content-bottom-padding: var(--modal-body-padding-bottom); 
    
    /* @tweakable top padding (in px) for the logo container on mobile */
    --logo-mobile-top-padding: 15px; /* finaltweak - Logo text top padding */
    
    /* @tweakable size (in px) for the logo icon on mobile */
    --logo-mobile-icon-size: 55px;
    
    /* @tweakable top position (in px) of the logo icon on mobile (relative to .logo container top) */
    --logo-mobile-icon-top: 10px;

    /* @tweakable top position (in px) of the logo icon (relative to header top) on mobile */
    --logo-mobile-icon-top-position: 55px;
    
    /* NEW: Mobile icon positioning based on desktop values to maintain relationship. */
    
    --logo-mobile-icon-left: var(--logo-desktop-icon-left);
    
    --logo-mobile-text-offset: var(--logo-desktop-text-offset);

    /* @tweakable top margin (in rem) for the AI proof section */
    --proof-section-top-margin: .5rem;
    
    /* @tweakable vertical padding (in rem) for the AI proof section */
    --proof-section-vertical-padding: .5rem;
    
    /* @tweakable [number] Vertical padding (in px) applied to the proof-hero-block; positive values add space above and below the hero */
    --proof-hero-vertical-padding: 25px;

    /* @tweakable Alignment margin for the Vault Hero Title (used in library-hero-content h1) */
    --vault-h1-margin-left: 0;
    
    /* @tweakable Alignment margin for the Vault Hero Subtitle chunk (used in library-hero-content p) */
    --vault-p-margin-left: 0;

    /* @tweakable top spacer height (in px) for pricing cards (to align content below belt badge) */
    --pricing-card-top-spacer: 18px;
    
    /* @tweakable vertical position (in px) for the belt badge on pricing cards */
    --pricing-card-belt-badge-top: 18px;
    
    /* @tweakable border radius (in px) for pricing cards */
    --pricing-card-border-radius: 10px;
    
    /* @tweakable top offset (in px) for the pricing card heading to position it below the belt badge */
    --pricing-card-heading-top-offset: 18px;

    /* @tweakable vertical/horizontal padding (in px) for the belt badge */
    --pricing-card-belt-padding: 4px 8px;
    
    /* @tweakable right offset (in px) for the belt badge */
    --pricing-card-belt-right-offset: 8px;

    /* @tweakable [number] Vertical padding (in rem) for the mobile login/signup button */
    --mobile-login-btn-padding-vertical: 0.25rem;
    /* @tweakable [number] Horizontal padding (in rem) for the mobile login/signup button */
    --mobile-login-btn-padding-horizontal: 0.5rem;
    /* @tweakable [number] Minimum width (in px) for the mobile login/signup button to ensure touchability */
    --mobile-login-btn-min-width: 38px;
    /* @tweakable [number] Minimum height (in px) for the mobile login/signup button to ensure touchability */
    --mobile-login-btn-min-height: 38px;

    /* @tweakable text-transform for the "credits" label in the user dashboard */
    --user-dashboard-credits-text-transform: capitalize;

    /* @tweakable whether to center the mobile navigation bar (1 = yes, 0 = no) */
    --nav-center-mobile: 1; /* 1 = enabled, 0 = disabled */
    
    /* @tweakable maximum width (in %) for the centered mobile navigation bar */
    --nav-mobile-max-width: 80%;

    /* @tweakable mobile header horizontal padding in rem */
    --site-header-mobile-horizontal-padding: 0;

    /* @tweakable scale factor for the popular pricing card */
    --popular_card_scale: 1; /* default: 1 = same size as others */
    
    /* @tweakable vertical position (in px) for the popular card badge (negative moves it up) */
    --popular_badge_top: -12px; /* default moved slightly down to avoid extra visual height */
    
    /* @tweakable additional vertical padding adjustment (in px) for the popular pricing card */
    --pricing_card_popular_padding_adjust: 0px;

    /* @tweakable whether to center the mobile navigation bar (1 = yes, 0 = no) */
    --nav-center-mobile: 1; /* 1 = enabled, 0 = disabled */
    
    /* @tweakable maximum width (in %) for the centered mobile navigation bar */
    --nav-mobile-max-width: 80%;

    /* @tweakable mobile header horizontal padding in rem */
    --site-header-mobile-horizontal-padding: 0;
    
    /* AUTH MODAL TWEAKABLES */
    /* @tweakable border radius (in px) for the Google sign-in button */
    --auth-google-btn-border-radius: 7px;
    /* @tweakable multiplier for internal vertical/horizontal padding of auth modal inputs */
    --auth-input-padding-multiplier: 1.15;
    /* @tweakable multiplier for internal vertical padding of auth modal submit buttons */
    --auth-email-submit-padding-multiplier: 1.15;
    /* @tweakable multiplier for vertical spacing below the Google button/divider */
    --auth-vertical-spacing-multiplier: 1.0; 
    
    /* @tweakable base margin (in rem) for the divider area in the auth modal */
    --auth-divider-margin-vertical-base: 1.5rem; /* Base value for divider spacing */
    /* @tweakable base margin (in rem) below the mini-tabs in the auth modal */
    --auth-tabs-margin-bottom-base: 1rem;
    /* @tweakable base margin (in rem) above the privacy text in the auth modal */
    --auth-privacy-margin-top-base: 1.5rem;

    /* Base dimensions for calculations below */
    --auth-input-padding-vertical-base: 0.6rem;
    --auth-input-padding-horizontal-base: 1rem;
    --auth-submit-btn-padding-vertical-base: 0.75rem;
    --auth-submit-btn-padding-horizontal-base: 1.5rem;
    
    /* @tweakable multiplier for vertical spacing below auth input form groups */
    --auth-form-group-margin-base: 0.25rem; /* Base value for spacing below form groups */

    /* NEW TWEAKABLE DEFAULTS for Google Icon */
    /* @tweakable size (in px) of the Google icon in the auth modal */
    --auth-google-icon-size: 24px;
    /* @tweakable vertical offset (in px) of the Google icon in the auth modal (negative moves it up) */
    --auth-google-icon-offset: 0px;
    /* @tweakable extra padding (in px) inside the Google icon container for fine-tuning visual tightness */
    --auth-google-icon-padding: 0px; 
    
    /* @tweakable font size for the privacy assurance text at the bottom of auth modals (in rem) */
    --auth-privacy-font-size: 0.75rem;
    
    /* NEW TWEAKABLE DEFAULTS for step number alignment */
    /* @tweakable vertical offset (in rem) for the step number bubble relative to step content */
    --how-step-number-vertical-offset: 0.25rem; /* default fallback */
}

/* Standardize card shadows across common components (uses --card-box-shadow set by JS) */
:root {
    /* @tweakable Standard box shadow applied to cards and containers */
    --card-box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Apply the standardized shadow to major card-like elements to reduce visual noise */
.feature-card,
.form-container,
.pricing-card,
.hero-video-container,
.vault-sidebar,
.mockup-floater,
.proof-highlight-card,
.detector-card,
.article-display-area,
.settings-modal-content,
.admin-login-wrapper,
.draftReview,
.draft-review-area,
#draftReviewArea,
.article-editor,
.pricing-card.popular,
.hero-dashboard-mockup,
.loading-content {
    box-shadow: var(--card-box-shadow) !important;
}

 /* Pricing Hero Feature Grid */
.pricing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
    max-width: 900px;
    margin: 2rem auto 1.5rem auto;
    text-align: left;
}

.pricing-feature-item {
    /* Scalable pricing feature item (size controlled via --pricing-feature-scale) */
    display: flex;
    align-items: center;
    gap: calc(0.75rem * var(--pricing-feature-scale, 1));
    color: #e0f2f1; /* Light teal-white for high contrast on blue hero */
    font-weight: 500;
    /* Base font-size is scaled by variable so we can reduce by ~33% when needed */
    font-size: calc(0.95rem * var(--pricing-feature-scale, 1));
}

.pricing-feature-icon {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    text-align: center;
}

.pricing-upsell-line {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1.5rem;
    font-style: italic;
    font-weight: 500;
}

@media (max-width: 800px) {
    .pricing-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1rem;
    }
}

@media (max-width: 550px) {
    .pricing-feature-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 2.5rem; /* Indent slightly to balance single column visual weight */
    }
    .pricing-upsell-line {
        padding: 0 1rem;
    }
}

/* Hero Video Styles */
.hero-video-container {
    background: white;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: var(--hero-visual-shadow);
    transform: scale(var(--hero-video-initial-scale, 1.0)); /* Apply initial scale/remove 3D transform */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smoother transition for scale */
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 550px;
    margin: 0 auto;
}

.hero-video-container:hover:not(.video-playing) {
    transform: scale(var(--hero-video-hover-scale, 1.025));
}

.hero-video-title {
    color: var(--text-color-dark);
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.hero-video-desc {
    color: var(--text-color-light);
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Ensure video inside hero behaves responsively */
.hero-video-wrapper {
    border-radius: 8px; /* Slightly tighter radius inside the container */
    box-shadow: none; /* Container handles shadow */
    border: 1px solid #eee; /* Light border */
}

/* Large, inviting play button overlay for hero demo */
.video-placeholder {
    position: relative;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--hero-play-button-size, 80px);
    height: var(--hero-play-button-size, 80px);
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    z-index: 2;
}

.play-button i {
    font-size: var(--hero-play-icon-size, 28px);
    margin-left: 2px;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

/* Features Grid Section (Replaces Demo Section) */
.features-grid-section {
    padding: 5rem 2rem;
    background: white;
    border-bottom: 1px solid var(--border-color);
}

.features-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.features-header h2 {
    font-size: 2rem;
    color: var(--text-color-dark);
    margin-bottom: 1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.feature-card:hover {
    transform: translateY(calc(-1 * var(--card-hover-lift, 5px)));
    box-shadow: var(--card-hover-shadow, 0 10px 30px rgba(0,0,0,0.05));
    border-color: rgba(26, 35, 126, 0.1);
    background: white;
    transition: transform var(--card-hover-transition-duration, 0.3s) ease, box-shadow var(--card-hover-transition-duration, 0.3s) ease;
}

/* Apply the same subtle motion affordance to problem cards and solution feature cards */
.problem-item,
.solution-section .feature-item {
    transition: transform var(--card-hover-transition-duration, 0.3s) ease, box-shadow var(--card-hover-transition-duration, 0.3s) ease;
    will-change: transform;
}
.problem-item:hover,
.solution-section .feature-item:hover {
    transform: translateY(calc(-1 * var(--card-hover-lift, 5px)));
    box-shadow: var(--card-hover-shadow, 0 10px 30px rgba(0,0,0,0.05));
    cursor: pointer;
}

.feature-card .icon-box {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    color: var(--primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.feature-text strong {
    display: block;
    color: var(--text-color-dark);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.feature-text span {
    color: var(--text-color-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

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

@media (max-width: 768px) {
    .hero-video-container {
        transform: none; /* Remove 3D effect on mobile */
        margin-top: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feature-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .feature-card .icon-box {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .feature-text strong {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
}

/* Ensure video inside hero behaves responsively */
.hero-video-wrapper {
    border-radius: 8px; /* Slightly tighter radius inside the container */
    box-shadow: none; /* Container handles shadow */
    border: 1px solid #eee; /* Light border */
}

/* New styles for problem icons colors to match the red accent in HTML if not overridden by inline styles */
.problem-item .fa-chart-line-down, 
.problem-item .fa-money-bill-wave, 
.problem-item .fa-robot, 
.problem-item .fa-hourglass-end {
    /* Inline styles in HTML take precedence, but this is a fallback */
    color: #e53935;
}

:root {
    --belt-white: #fafafa;
    
    --belt-yellow: #f6c84c;
    
    --belt-brown: #7a4b2d;
    
    --belt-black: #111111;
    
    --belt-red: #c62828;
    
    --belt-blue: #1e88e5;
}

/* Minimal badge and tint for pricing cards by belt */
.pricing-card[data-belt] {
    position: relative;
    overflow: visible;
}
.pricing-card[data-belt]::after {
    content: attr(data-belt) " belt";
    position: absolute;
    top: var(--pricing-card-belt-badge-top); /* existing variable */
    right: var(--pricing-card-belt-right-offset); 
    padding: var(--pricing-card-belt-padding);   
    border-radius: 8px; /* slightly smaller radius for the badge */
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    text-transform: capitalize;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    mix-blend-mode: normal;
}

/* Specific belt colors (tint the card border and badge) */
.pricing-card[data-belt="white"] { border-color: rgba(0,0,0,0.06); }
.pricing-card[data-belt="white"]::after { background: var(--belt-white); color: #333; border: 1px solid rgba(0,0,0,0.06); }

.pricing-card[data-belt="yellow"] { border-color: rgba(246,200,76,0.18); }
.pricing-card[data-belt="yellow"]::after { background: linear-gradient(90deg,var(--belt-yellow), #f0b429); color: #2a2a2a; }

.pricing-card[data-belt="brown"] { border-color: rgba(122,75,45,0.18); }
.pricing-card[data-belt="brown"]::after { background: linear-gradient(90deg,var(--belt-brown), #5e3b2a); }

.pricing-card[data-belt="black"] { border-color: rgba(0,0,0,0.35); }
.pricing-card[data-belt="black"]::after { background: var(--belt-black); }

.pricing-card[data-belt="red"] { border-color: rgba(198,40,40,0.18); }
.pricing-card[data-belt="red"]::after { background: linear-gradient(90deg,var(--belt-red), #8e0000); }

.pricing-card[data-belt="blue"] { border-color: rgba(30,136,229,0.14); }
.pricing-card[data-belt="blue"]::after { background: linear-gradient(90deg,var(--belt-blue), #1565c0); }

/* Slightly lift popular card badge contrast */
.pricing-card.popular::after { transform: translateY(-4px); }

/* Header Styles */
.site-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.1rem 0.1rem var(--site-header-bottom-padding) .8rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

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

.logo {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    flex-shrink: 0; 
    position: relative; 
    padding-left: var(--logo-desktop-text-offset); 
    text-decoration: none;
    
    padding-top: var(--logo-top-padding);
}

.logo::before {
    content: "";
    position: absolute;
    /* Use central tweakable variables for desktop icon positioning */
    left: var(--logo-icon-desktop-left);
    top: var(--logo-icon-desktop-top);
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background-image: url('/logo256.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo:hover::before {
    /* The user wants no hover effect on the image */
}

.logo-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* New wrapper for tagline to apply offset */
.logo-tagline-wrapper {
    /* Apply the requested offset */
    transform: translateX(var(--tagline-horizontal-offset));
    transition: transform 0.3s ease;
}

.logo h1 {
    
    font-size: 1.8rem; /* Reduced by 25% from 2.4rem */
    font-weight: 700;
    margin: 2px 5px 2px 0;  
    color: var(--text-color-dark);
    position: relative; 
    z-index: 1;
    
    transition: color 0.3s ease;
}

/* Update hover targets to apply to the .logo parent */
.logo:hover h1 {
    color: var(--primary-color); 
}

.love-accent {
    color: #FF6B6B;
    
    transition: color 0.3s ease;
}

/* Update hover targets to apply to the .logo parent */
.logo:hover .love-accent {
    color: #e63939; 
}

.tagline {
    
    font-size: 0.6375rem; /* Reduced by 25% from 0.85rem */
    color: var(--text-color-light);
    font-weight: 400;
    margin: 0;
    margin: 0px 5px 0px 0px; 
    position: relative; 
    z-index: 1;
    
    transition: color 0.3s ease;
}

/* Update hover targets to apply to the .logo parent */
.logo:hover .tagline {
    color: var(--text-color-dark); 
}

.main-nav {
    
    margin-top: var(--nav-desktop-top-margin);
    margin-bottom: -10px; /* finaltweak - desktop navlink bottom margin */
    position: static !important;
    flex-direction: row !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--nav-link-spacing) !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
.main-nav.active {
    right: auto !important;
}
.mobile-menu-toggle {
    
    display: none !important;
}
.menu-backdrop {
    display: none !important;
}

.nav-link {
    color: var(--text-color-dark); 
    
    font-size: var(--nav-link-font-size);
    /* Use tweakable font-weight and text-decoration */
    font-weight: var(--nav-link-font-weight);
    text-decoration: var(--nav-link-text-decoration);
    
    padding: var(--nav-link-vertical-padding) var(--nav-link-horizontal-padding);
    
    border-bottom: none; 
}

.nav-link:last-child {
    /* This rule becomes redundant after making border-bottom: none for all .nav-link */
    /* Keeping for clarity, but it will have no visual effect */
    border-bottom: none; 
}

.nav-link:hover {
    color: var(--primary-color); 
}

.settings-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* @tweakable [number] Vertical offset (in px) to move the header "Log In / Sign Up" button when the user is logged out on desktop */
:root {
  --login-btn-vertical-offset-px: 25;
}

/* User dashboard wrapper */
.user-dashboard-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.33rem 0.5rem;
    margin: 3px 0px 0px 0px ;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    /* margin-left: auto; */
    position: relative; /* allow absolute positioning of child login state when needed */
}

/* Desktop-only: when showing logged-out state we nudge the visible login button down while keeping the dashboard intact for logged-in users.
   This targets the loggedOutState container and only affects desktop layouts (min-width: 769px). */
@media (min-width: 769px) {
  /* Move only the logged-out block (the single login button) down by the tweakable amount */
  #loggedOutState {
    position: relative;
    top: calc(var(--login-btn-vertical-offset-px) * 1px);
    /* Ensure the login button remains visible and receives pointer events */
    z-index: 6;
  }

  /* Make the visual decoration of the dashboard less prominent for logged-out viewers by reducing backdrop styling,
     but keep the structure so logged-in state still appears in the same place and with full styling. */
  /* This rule intentionally only impacts the logged-out child so the logged-in layout is unchanged. */
  #loggedOutState .header-btn {
    /* no change in size; only visual placement handled above */
  }

  /* If you want the dashboard container to appear visually minimal when logged out, remove its background and box-shadow,
     while preserving layout so logged-in display is identical when state changes. */
  .user-dashboard-header:has(#loggedOutState:not(.hidden)) {
    background: transparent;
    box-shadow: none;
  }

  /* Fallback for browsers that do not support :has(): hide decorative background while preserving children display */
  /* We reduce opacity of the wrapper when logged-out by using a selector that targets the wrapper but only when the logged-in block is hidden */
  .user-dashboard-header[aria-logged-in="false"] {
    background: transparent;
    box-shadow: none;
  }
}

.user-dashboard-header.hidden {
    display: none !important;
}

.user-dashboard-header .user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-dashboard-header .user-email {
    font-size: 0.75rem;
    margin: 0px 0px 0px 0px;
    font-weight: 600;
    color: var(--text-color-dark);
}

.user-dashboard-header .user-credits {
    font-size: 0.75rem;
    margin: -5px 0px -5px 0px;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: var(--user-dashboard-credits-text-transform);
}

.user-dashboard-header .user-credits i {
    margin-right: 0.25rem;
    color: #ffd700;
}

.user-dashboard-header .user-actions {
    display: flex;
    gap: 0.25rem;
}

.user-dashboard-header .header-btn {
    padding: 0.25rem;
    margin: 2px 0px 0px 0px;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color-dark);
    font-size: 1rem;
}

.user-dashboard-header .header-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

/* Email Article to User Function */
/* Settings Toggle Switch */
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
}

.setting-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: #333;
}

.setting-info p {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #8b5cf6;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Responsive adjustments for user dashboard */
@media (max-width: 768px) {
    /* @tweakable [number] Vertical nudge (px) to move the standalone mobile login button up/down when we show it outside the dashboard chrome */
    :root { --mobile-login-vertical-nudge-px: 0; }
    /* @tweakable [boolean] When true, hide the full user-dashboard visual chrome on mobile for logged-out users while keeping the login button visible */
    /* Set to true by default behavior: treat as enabled */
    :root { --mobile-hide-dashboard-when-logged-out: 1; }

    .user-dashboard-header {
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.2rem;
        width: calc(100% + 1rem);
        margin-top: 0.2rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        align
    }

    .user-dashboard-header .header-btn {
        margin: 5px 0px 0px 0px;
    }

    .user-dashboard-header .user-info {
        text-align: center;
        width: 100%;
    }

    .user-dashboard-header .user-actions {
        justify-content: center;
        width: 100%;
    }

    /*
      Mobile behavior:
      - When logged out, hide the "loggedInState" block and visually minimize the dashboard wrapper.
      - Keep the "loggedOutState" button visible and positioned so it appears in the same place.
      - When logged in, the normal dashboard (loggedInState) will show as before.
      Notes: This CSS is purely presentational and relies on the existing loggedInState/loggedOutState show/hide logic in JS.
    */
    /* Minimize the dashboard chrome for logged-out users while preserving the login button layout */
    #loggedInState {
        display: none !important; /* ensure logged-in chrome not shown on mobile when JS hasn't set state */
    }

    /* Make the dashboard wrapper visually minimal when logged out is the active child */
    .user-dashboard-header {
        /* If the tweakable is enabled we reduce visual chrome; kept permissive so loggedInState can still show when JS toggles it */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Ensure the loggedOutState remains visible and sits where the dashboard used to be */
    #loggedOutState {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        /* keep button in same flow; small vertical nudge is tweakable */
        position: relative;
        top: calc(var(--mobile-login-vertical-nudge-px) * 1px);
        z-index: 20;
        background: transparent !important;
    }

    /* Make the login button visually consistent and full-touch-size on mobile */
    #loggedOutState .header-btn {
        padding: var(--mobile-login-btn-padding-vertical) var(--mobile-login-btn-padding-horizontal);
        min-width: var(--mobile-login-btn-min-width);
        min-height: var(--mobile-login-btn-min-height);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
}

.header-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Navbar responsive wrapping */

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: center; /* Center the whole .logo block */
    }
    .main-nav {
        justify-content: center; /* Center nav links horizontally */
        width: var(--nav-mobile-max-width);
        margin: -20px auto -35px auto; /* finaltweak - Ensure the nav block is centered */
        /* margin-top: var(--nav-mobile-top-margin); */
        
        flex-wrap: nowrap;
        gap: var(--nav-link-mobile-spacing);
        overflow-x: auto;
        /* If nav centering is disabled via variable, allow fallback (0 = disabled) */
        /* The calc keeps behavior compatible with browsers that don't support CSS variables for logical checks */
        align-self: center;
    }
    .nav-link {
        flex: 0 1 auto;
        white-space: nowrap;
        
        font-size: var(--nav-link-mobile-font-size);
        
        padding: var(--nav-link-mobile-vertical-padding) var(--nav-link-mobile-horizontal-padding);
        text-align: center; /* Ensure each link centers its text */
    }
    .logo {
        /* Overrides: Restore the horizontal relationship of icon and text */
        align-items: flex-start; /* Ensure text stack is left-aligned internally */
        padding-left: var(--logo-mobile-text-offset); /* Keep desktop offset relationship */
        padding-top: var(--logo-mobile-top-padding);
    }
    .logo::before {
        /* Use the same central tweakable variables for mobile to ensure universal control */
        left: var(--logo-icon-mobile-left);
        top: var(--logo-icon-mobile-top-position);
        transform: translateY(-50%);
        width: var(--logo-mobile-icon-size);
        height: var(--logo-mobile-icon-size);
        margin: -30px 0px 0px 0px; /* finaltweak - top spacing of logo icon in mobile mode */
    }
    .logo h1, .tagline { text-align: left; } /* Override previous mobile centering for internal text elements */
}

/* Hero Section */
/* @tweakable [string] Stronger, conversion-focused hero gradient (feel free to adjust) */
:root {
  /* @tweakable the primary hero gradient start color */
  --hero-gradient-strong-start: #0A1A5C;
  /* @tweakable the primary hero gradient mid color */
  --hero-gradient-strong-mid: #1C3FA3;
  /* @tweakable Fixed font size for the hero CTA buttons across all displays */
  --hero-cta-font-size-fixed: 1.05rem; 
  /* @tweakable Fixed minimum width for the hero CTA buttons */
  --hero-cta-min-width-fixed: 280px; 
  /* @tweakable Fixed height for the hero CTA buttons */
  --hero-cta-height-fixed: 55px;
  /* @tweakable spacing under hero headline (rem) */
  --hero-headline-margin-bottom-rem: 0.5rem;
  /* @tweakable spacing under hero subhead (rem) */
  --hero-subhead-margin-bottom-rem: 1rem;
  /* @tweakable spacing between bullet items (rem) */
  --hero-bullet-gap-rem: 0.35rem;
}

/* Strengthened intentional gradient for hero background */
.hero {
    background: linear-gradient(140deg, var(--hero-gradient-strong-start) 0%, var(--hero-gradient-strong-mid) 60%);
    color: var(--hero-text-color);
    padding: var(--section-vertical-padding) 2rem 5rem 2rem; /* Updated top padding */
    position: relative;
    overflow: hidden;
}

/* Ensure text column and descendants are left-aligned for conversion clarity */
.hero-left,
.hero-left * {
    text-align: left !important;
}

/* Tighter spacing for hero elements (conversion tuned) */
.hero-headline {
    margin-bottom: calc(var(--hero-headline-margin-bottom-rem) * 1rem); /* reduced for cohesion */
}

.hero-subhead {
    margin-bottom: calc(var(--hero-subhead-margin-bottom-rem) * 1rem); /* tighten spacing */
}

/* If your markup uses .hero-benefits-list as bullets, tighten list spacing */
.hero-bullets li,
.hero-benefit-item,
.hero-benefits-list li {
    margin-bottom: calc(var(--hero-bullet-gap-rem) * 1rem); /* tighter scan-friendly spacing */
}

/* CTA prominence adjustments (applies to primary hero CTAs) */
.hero-cta,
.secondary-hero-btn { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hero-cta-min-width-fixed, 280px); 
    height: var(--hero-cta-height-fixed, 55px);
    padding: 0 0.8rem; 
    white-space: nowrap; /* Prevent text wrap */
    overflow: hidden; 
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: var(--hero-cta-font-size-fixed, 1.125rem);
}

/* Ensures inner text/icon elements inherit size and do not introduce extra padding */
.hero-cta span,
.hero-cta i {
    font-size: inherit;
    padding: 0;
    margin: 0;
}

/* Keep video card styling clean and consistent */
.hero-video-container {
    background: var(--hero-visual-bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--hero-visual-shadow);
    transform: scale(var(--hero-video-initial-scale, 1.0)); /* Apply initial scale/remove 3D transform */
    transition: transform 0.24s ease, box-shadow 0.24s ease; /* Slightly tighter transition */
    border: 1px solid rgba(255,255,255,0.06);
    max-width: 560px;
    margin: 0 auto;
}

/* Slightly stronger hover affordance but disabled when playing */
.hero-video-container:hover:not(.video-playing) {
    transform: scale(var(--hero-video-hover-scale, 1.02));
}

/* Split Layout for Hero */
.hero-split-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--hero-split-gap);
    align-items: center;
}

.hero-text-column {
    text-align: left; /* Explicit left align */
    z-index: 2;
    position: relative;
}

.hero-visual-column {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.hero-tagline-wrapper {
    margin-bottom: 1.5rem;
}

.hero-tagline-badge {
    display: inline-flex;
    align-items: center;
    gap: 1.0rem;
    background: rgba(255, 255, 255, 0.15); /* Slightly increased opacity */
    color: #e0f2f1; /* Brighter teal-white text */
    padding: 0.25rem .75rem; /* Increased padding */
    border-radius: 50px;
    font-size: 0.9rem; /* Slightly larger text */
    line-height: 1.25rem;
    font-weight: 700; /* Bolder weight */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Stronger border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Added shadow for punch */
}

.hero-title {
    font-size: var(--hero-primary-heading-font-size); /* unified with Dojo Vault hero */
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: var(--hero-title-text-shadow);
    color: var(--hero-text-color);
    line-height: 1.1;
    text-align: var(--hero-primary-text-align); /* shared alignment */
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: var(--hero-p-size-desktop); /* Use new variable */
    margin-bottom: 2rem;
    max-width: var(--hero-primary-subtitle-max-width);
    opacity: 0.9;
    line-height: 1.6;
    text-align: var(--hero-primary-text-align); /* shared alignment */
    margin-left: auto;
    margin-right: auto;
}

.hero-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.hero-benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: #e0f2f1; /* Light teal-white */
}

.hero-benefit-item i {
    color: var(--secondary-color); /* Teal icon */
    color: #4db6ac;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}

.primary-hero-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #b8860b 100%);
    color: var(--text-color-dark);
    padding: .15rem .15rem;
    border-radius: 7px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.primary-hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #e6c547 0%, var(--accent-color) 100%);
}

.secondary-hero-btn {
    background: transparent;
    color: white;
    padding: 1rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.secondary-hero-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

.hero-trust-text {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* CSS Dashboard Mockup */
.hero-dashboard-mockup {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--hero-visual-shadow);
    overflow: hidden;
    transform: rotateY(-5deg) rotateX(2deg); /* Subtle 3D effect */
    transition: transform 0.5s ease;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.hero-dashboard-mockup:hover {
    transform: rotateY(0) rotateX(0) scale(1.02);
}

.mockup-header {
    background: #f1f5f9;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    z-index: 1;
}

.mockup-dots {
    display: flex;
}
.mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.mockup-dots span:nth-child(1) { background: #ef4444; }
.mockup-dots span:nth-child(2) { background: #eab308; }
.mockup-dots span:nth-child(3) { background: #22c55e; }

.mockup-credits {
    background: #e0f2f1;
    color: #00796b;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}

.mockup-body {
    display: flex;
    height: 320px;
}

.mockup-sidebar {
    width: 20%;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.mock-line { height: 8px; background: #e2e8f0; border-radius: 4px; width: 100%; margin-bottom: 0.2rem; }
.mock-line.short { width: 60%; }
.mock-btn { height: 28px; background: var(--primary-color); border-radius: 4px; margin-top: auto; opacity: 0.8; }

.mockup-content {
    flex: 1;
    padding: 1.5rem;
    background: white;
    position: relative;
    z-index: 2;
}

.mock-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.mock-title-text {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.9rem;
}

.mock-status {
    font-size: 0.7rem;
    color: #22c55e;
    background: #dcfce7;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.mock-article-preview {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mock-p {
    height: 10px;
    background: #e2e8f0;
    border-radius: 4px;
    width: 100%;
}
.mock-p.short { width: 85%; }
.mock-p.medium { width: 92%; }

/* Floater animation */
.mockup-floater {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: white;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    font-weight: 700;
    color: #1e293b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: float 3s ease-in-out infinite;
    z-index: 10;
    border: 1px solid #e2e8f0;
}

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

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" fill-opacity="1" d="M0,96L48,106.7C96,117,192,139,288,154.7C384,171,480,181,576,165.3C672,149,768,107,864,101.3C960,96,1056,128,1152,133.3L1440,128L1440,320"><path fill="rgba(255,255,255,0.1)" fill-opacity="1" d="M0,96L48,106.7C96,117,192,139,288,154.7C384,171,480,181,576,165.3C672,149,768,107,864,101.3C960,96,1056,128,1152,133.3L1440,128L1440,320"></path></svg>');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    pointer-events: none; /* ensure background doesn't block interaction */
}

/* Mobile Responsiveness for New Hero */
@media (max-width: 968px) {
    .hero-split-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .hero-text-column {
        text-align: center;
        order: 1;
    }

    .hero-visual-column {
        order: 2;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-benefits-list {
        align-items: center;
    }
    
    .hero-title {
        font-size: var(--hero-h1-size-mobile); /* Use new mobile variable */
    }
    
    /* NEW: Mobile subtitle sizing */
    .hero-subtitle {
        font-size: var(--hero-subtitle-mobile-font-size, 1rem); /* Use variable, fallback to 1rem */
    }
}

/* Enhanced Hero Section */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    
    font-size: 1.5rem; /* Reduced by 25% from 2rem */
    font-weight: 700;
    color: #80cbc4; /* Lighter teal */
}

.stat-label {
    display: block;
    
    font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
    opacity: 0.9;
}

.hero-guarantee {
    margin-top: 1rem;
    
    font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
    opacity: 0.9;
    text-align: center;
}

/* Problem Section */
.problem-section {
    background: linear-gradient(135deg, #f8fafc 0%, rgba(248, 250, 252, 0.8) 100%);
    padding: 2rem 2rem;
}

.problem-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.problem-content h2 {
    
    font-size: 1.65rem; /* Reduced by 25% from 2.2rem */
    color: var(--text-color-dark);
    margin-bottom: 3rem;
}

.problems-grid {

    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr)); /* enforce max 2 columns across sizes */
    gap: 2rem;
    margin-bottom: 3rem;
}

.problem-item {
    background: var(--background-light);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.problem-icon {
    
    font-size: 2.25rem; /* Reduced by 25% from 3rem */
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.problem-item h3 {
    
    font-size: 0.975rem; /* Reduced by 25% from 1.3rem */
    margin-bottom: 1rem;
    color: var(--text-color-dark);
}

.problem-item p {
    color: var(--text-color-light);
    font-style: italic;
    line-height: 1.6;
}

/* NEW: Mid-Page Call to Action Section Styles */
.mid-cta-section {
    background: var(--background-light); /* Or white if background-light is already used */
    padding: 3rem 1.5rem; /* Generous vertical padding */
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

/* Ensure the hero CTA and guarantee elements look good inside here */
.mid-cta-section .hero-cta {
    /* Uses tweakable CSS variable (--mid-cta-bg) so JS can toggle between primary (yellow) and legacy teal */
    background: var(--mid-cta-bg, linear-gradient(135deg, var(--secondary-color) 0%, #009688 100%));
    color: white;
    box-shadow: 0 8px 32px rgba(0, 105, 92, 0.3);
}

.mid-cta-section .hero-cta:hover {
    background: linear-gradient(135deg, #009688 0%, var(--secondary-color) 100%);
    box-shadow: 0 12px 48px rgba(0, 105, 92, 0.4);
}

.mid-cta-section .hero-guarantee {
    color: var(--text-color-light);
    opacity: 1; /* Make guarantee text slightly clearer here */
}

/* Solution Section */
.solution-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, #303f9f 50%, #3f51b5 100%); /* Blue gradient */
    color: white;
    padding: 5rem 2rem;
}

.solution-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.solution-content h2 {
    
    font-size: 1.875rem; /* Reduced by 25% from 2.5rem */
    margin-bottom: 1rem;
    color: white;
}

.solution-subtitle {
    
    font-size: 0.825rem; /* Reduced by 25% from 1.1rem */
    margin-bottom: 4rem;
    opacity: 0.95;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.solution-features {

    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* enforce max 2 columns */
    gap: 2rem;
    text-align: left;
}

.feature-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon i {
    
    font-size: 1.125rem; /* Reduced by 25% from 1.5rem */
    color: var(--primary-color);
}

.feature-content h3 {
    
    font-size: 0.975rem; /* Reduced by 25% from 1.3rem (common h3 size) */
    color: white;
    margin-bottom: 0.5rem;
}

.feature-content p {
    opacity: 0.9;
    margin: 0;
}

/* How it Works Section */
.how-it-works {
    background: var(--background-white);
    padding: 5rem 2rem;
    text-align: center;
}

.how-it-works h2 {
    
    font-size: 1.65rem; /* Reduced by 25% from 2.2rem */
    color: var(--text-color-dark);
    margin-bottom: 3rem;
}

/* @tweakable [string] color of the vertical connector line between steps */
:root { --how-steps-connector-color: #e2e8f0; }

/* Force vertical single-column flow and add connector line */
.steps-container {
    position: relative; /* for connector pseudo element */
    display: flex;
    flex-direction: column; /* ALWAYS vertical flow - single column */
    gap: 2rem;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto 1.25rem auto;
    padding-left: 3rem; /* space for numbers and connector */
}

/* Vertical connector line */
.steps-container::before {
    content: '';
    position: absolute;
    left: 2rem; /* aligns with step-number centerline */
    top: 1.25rem;
    bottom: 1.25rem;
    width: 2px;
    background: var(--how-steps-connector-color);
    border-radius: 2px;
    z-index: 0;
    display: none; /* Hiding the vertical line per request */
}

/* Step box */
.step {
    position: relative;
    padding: 1rem 1rem 1rem 1rem;
    background: transparent;
    z-index: 2; /* above the connector */
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Solution Badge */
.solution-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: #e0f2f1;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(4px);
}

/* Micro Testimonials */
.micro-testimonials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.micro-quote {
    font-size: 0.85rem;
    color: var(--text-color-light);
    font-style: italic;
    position: relative;
    padding-left: 0.5rem;
}

/* Speed Metric */
.speed-metric {
    display: inline-block;
    background: #e0f7fa;
    color: #006064;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Arrow connecting steps */
.step:not(:last-child)::after {
    content: "\f063"; /* Font Awesome 'arrow-down' */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    
    /* Center horizontal alignment with the number circle (44px wide, left -0.65rem) */
    /* Circle center is roughly: -0.65rem + 22px */
    left: calc(-0.65rem + 22px);
    transform: translateX(-50%);
    
    /* Position vertically in the gap */
    bottom: var(--how-arrow-bottom-offset, -1.75rem);
    
    color: var(--how-arrow-color, #94a3b8);
    font-size: var(--how-arrow-size, 1.5rem);
    pointer-events: none;
}

/* Number bubble aligned to left and overlapping connector */
.step-number {
    position: absolute;
    left: -0.65rem; /* move number bubble into the left gutter */
    top: var(--how-step-number-vertical-offset);
    transform: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #009688 100%); /* Teal gradient */
    color: white;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    /* Motion: subtle perpetual float */
    animation: how-step-float var(--how-step-circle-float-duration, 4.5s) ease-in-out infinite;
    transition: transform 220ms var(--how-step-circle-ease, cubic-bezier(0.2,0.8,0.2,1)), box-shadow 220ms var(--how-step-circle-ease, cubic-bezier(0.2,0.8,0.2,1));
}

/* Hover/Focus affordance for accessibility */
.step-number:hover,
.step-number:focus {
    transform: translateY(calc(-1 * var(--how-step-circle-hover-lift, 6px))) scale(var(--how-step-circle-hover-scale, 1.06));
    box-shadow: 0 14px 28px rgba(0,0,0,0.12);
    z-index: 5;
}

/* Subtle keyframes for floating motion */
@keyframes how-step-float {
    0%   { transform: translateY(0) scale(1); }
    25%  { transform: translateY(calc(var(--how-step-circle-float-amplitude, 6px) * -0.45)) scale(1); }
    50%  { transform: translateY(calc(var(--how-step-circle-float-amplitude, 6px) * -1)) scale(1); }
    75%  { transform: translateY(calc(var(--how-step-circle-float-amplitude, 6px) * -0.45)) scale(1); }
    100% { transform: translateY(0) scale(1); }
}

/* Step content layout */
.step-content {
    margin-left: 2.25rem; /* ensure text doesn't sit under number bubble */
    text-align: left;
}

.step h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--text-color-dark);
}

.step p {
    margin: 0;
    color: var(--text-color-light);
    line-height: 1.6;
}

/* CTA button below steps: keep visually connected */
.works-cta {
    margin-top: 1.25rem;
    text-align: center;
}

/* Ensure the steps never collapse to columns even on wide screens */
@media (min-width: 1200px) {
    .steps-container {
        max-width: 620px;
    }
}

/* Mobile spacing adjustments */
@media (max-width: 480px) {
    .steps-container {
        padding-left: 2.6rem;
        gap: 1.25rem;
    }
    .steps-container::before {
        left: 1.95rem;
    }
    .step-number {
        left: -0.85rem;
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }
    /* Adjust arrow alignment for smaller mobile circles (40px wide, left -0.85rem) */
    .step:not(:last-child)::after {
        left: calc(-0.85rem + 20px);
    }
    .step-content {
        margin-left: 1.9rem;
    }
}

/* Main Analysis Section */
.analysis-section {
    
    padding-top: var(--section-vertical-padding); /* Updated to use consistent variable */
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: var(--background-light);
    
    scroll-margin-top: 100px;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    
    font-size: var(--main-page-heading-font-size); /* Updated for consistency */
    color: var(--text-color-dark);
    margin-bottom: var(--main-page-heading-margin-bottom); /* Updated for consistency */
}

.section-header p {
    color: var(--text-color-light);
    max-width: 800px;
    margin: 0 auto;
}

.subscription-status {
    max-width: 900px;
    margin: -1.5rem auto 2rem auto;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-left: 4px solid #2196f3;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.8rem;
}

.subscription-status p {
    margin: 0;
    color: var(--text-color-dark);
}

.subscription-status .credit-count {
    font-weight: 700;
    color: var(--primary-color);
}

.subscription-status .upgrade-link {
    font-weight: 600;
    color: var(--secondary-color);
    text-decoration: none;
    margin-left: 1rem;
    transition: color 0.2s;
}

.subscription-status .upgrade-link:hover {
    color: var(--primary-color);
}

.form-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.03);
    padding: 2.5rem;
    position: relative;
    border-radius: 16px;
}

.sample-data-container {
    position: absolute;
    top: 1rem;
    right: 2.5rem;
    height: 10px; /* Keep space to prevent layout shift but hide content */
    
    visibility: hidden;
}

.sample-data-link {
    display: inline-flex;
    align-items: center;
    background: #e0e0e0;
    color: var(--text-color-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    
    font-size: 0.6375rem; /* Reduced by 25% from 0.85rem */
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.sample-data-link:hover {
    background: var(--border-color);
    color: var(--text-color-dark);
}

.api-settings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#apiKey {
    -webkit-text-security: disc;
    text-security: disc;
}

.api-key-group small {
    font-size: 0.6rem;
    color: var(--text-color-light);
    margin-top: -0.25rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--text-color-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    font-size: 0.75rem; /* Reduced by 25% from 1rem (common label size) */
}

.form-group label i {
    color: var(--secondary-color);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.8rem 1rem;
    background: rgba(248, 250, 252, 0.8);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    
    font-size: 0.75rem; /* Reduced by 25% from 1rem */
    resize: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 400;
    
    width: 100%;
}

.form-group small {
    font-size: 0.7rem;
    color: var(--text-color-light);
    margin-top: -0.25rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(26, 35, 126, 0.1);
    transform: translateY(-1px);
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    border: none;
    width: 100%;
    padding: 1rem;
    margin-top: 2rem;
    border-radius: 8px;
	font-size: 0.825rem; /* Reduced by 25% from 1.1rem */
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
	position: relative;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Hover state */
.submit-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

/* Active/pressed state - triggers on mousedown */
.submit-btn:active {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
    transform: translateY(2px);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

/* Disabled state */
.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* NEW: Article Generation Warning */
.generation-warning {
    background-color: #fffde7; /* Very light yellow */
    border: 1px solid #ffcc00; /* Amber border */
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-color-dark);
}

.generation-warning strong {
    font-weight: 700;
    color: #cc9900; /* Darker yellow/brown */
}

.generation-warning .fas {
    color: #ffcc00; /* Amber icon */
    margin-right: 0.5rem;
}

.generation-warning .time-range {
    font-weight: 700;
    color: var(--primary-color);
}

/* Loading Animation */
.hidden {
    display: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    text-align: center;
}

.spinner {
    width: 60px;
    height: 60px;
    background: conic-gradient(from 0deg, var(--primary-color), var(--accent-color), var(--secondary-color), var(--primary-color));
    border-radius: 50%;
    position: relative;
    margin-bottom: 1.5rem;
    
    animation: spin 1.2s linear infinite;
}

.spinner::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
}

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

.loading-content h3 {
    
    font-size: 1.125rem; /* Reduced by 25% from 1.5rem */
    margin-bottom: 0.5rem;
}

.loading-content p {
    color: var(--text-color-light);
}

/* Action Buttons */

.action-btn {
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn:hover {
    transform: translateY(-2px);
}

/* Save Buttons */
.save-btn {
    /* Use the single primary CTA color (tweakable via --primary-cta-color) for all CTAs */
    background: var(--primary-cta-color, #d4af37);
    color: #ffffff; /* ensure icon/text visible */
    box-shadow: 0 6px 18px rgba(26, 35, 126, 0.12);
}

.save-btn:hover {
    /* Slightly brighter/darker on hover by using a semi-transparent overlay for depth */
    filter: brightness(1.02);
    box-shadow: 0 10px 28px rgba(26, 35, 126, 0.18);
}

/* Copy Button */
.copy-btn {
    background: #1e88e5; /* Blue for copy */
    color: white;
}

.copy-btn:hover {
    background: #1976d2; /* Darker blue on hover */
    box-shadow: 0 4px 10px rgba(30, 136, 229, 0.3);
}

/* Secondary/Back/Cancel Buttons */
.secondary-btn {
    background-color: #f1f5f9;
    color: var(--text-color-dark);
    border: 1px solid var(--border-color);
}

.secondary-btn:hover {
    background-color: #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.result-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    gap: 0.875rem;
    
    margin-bottom: 1.5rem; /* NEW: adds breathing room before the edit & post panel */
}

/* Edit and Post Section Styles */
#editAndPostSection {
    max-width: 900px;
    margin: 1rem auto 2rem auto;
    text-align: center; /* center the contained explanatory text and primary button */
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--background-white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.edit-post-explainer {
    color: var(--text-color-light);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

#editAndPostSection .result-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.editing-tools small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-color-light);
    font-size: 0.8rem;
}

/* Footer Styles */
.site-footer {
    background: var(--text-color-dark);
    color: var(--background-light);
    padding: 3rem 0;
    margin-top: 3rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-disclaimer {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #ff9800; /* Orange */
}

.footer-disclaimer h3 {
    
    font-size: 0.9rem; /* Reduced by 25% from 1.2rem */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    
    font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
}

.footer-links a {
    color: #80cbc4; /* Light Teal */
}

.footer-links a:hover {
    color: #4db6ac; /* Brighter Teal */
}

.footer-divider {
    color: #78909c; /* Gray */
}

.footer-copyright {
    color: #90a4ae; /* Lighter Gray */
}

.footer-crisis {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    
    font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
}

.footer-crisis strong {
    margin-right: 0.5rem;
    color: #ffb74d; /* Light Orange */
}

/* Legal Pages Styles */
.legal-page {
    background: var(--background-light);
    padding-top: var(--section-vertical-padding); /* Updated to use consistent variable */
    padding-bottom: 3rem;
    
    scroll-margin-top: 100px;
}

.legal-header {
    margin-bottom: var(--main-page-heading-margin-bottom); /* Updated for consistency */
}

.legal-header h1 {
    
    font-size: var(--main-page-heading-font-size);
    margin-bottom: 0; /* Handled by legal-header margin-bottom */
    text-align: center; /* New: Center the heading */
}

.last-updated {
    color: var(--text-color-light);
    
    font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
    margin-bottom: 1rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--secondary-color);
    font-weight: 500;
    
    font-size: 0.75rem; /* Reduced by 25% from 1rem (common link size) */
}

.back-link:hover {
    color: #004d40; /* Darker Teal */
}

.legal-content {
    max-width: 800px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.03);
    padding: 2.5rem;
    border-radius: 16px;
    margin: 0 auto;
}

.legal-content h2 {
    
    font-size: 1.35rem; /* Reduced by 25% from common h2 size (approx 1.8rem) */
}

.legal-content h3 {
    
    font-size: 1.05rem; /* Reduced by 25% from common h3 size (approx 1.4rem) */
}

/* Knowledge Library Styles */
.library-hero {
    background: linear-gradient(140deg, var(--hero-gradient-strong-start) 0%, var(--hero-gradient-strong-mid) 60%);
    color: white;
    padding: var(--section-vertical-padding) 2rem 4rem 2rem; /* Updated top padding */
    text-align: center;
}

.library-hero-content h1 {
    
    font-size: var(--hero-h1-size-desktop); /* Use new desktop variable */
    margin-bottom: var(--main-page-heading-margin-bottom);
    color: white;
    text-align: var(--vault-hero-text-align); /* Use dedicated variable */
    margin-left: var(--vault-h1-margin-left);
    margin-right: 0;
}

.library-hero-content p {
    
    font-size: var(--hero-p-size-desktop); /* Use new desktop variable */
    margin-bottom: 2rem;
    max-width: var(--hero-primary-subtitle-max-width);
    margin-left: var(--vault-p-margin-left);
    margin-right: 0;
    text-align: var(--vault-hero-text-align); /* Use dedicated variable */
}

/* Ensure alignment applies to all main hero children explicitly */
.library-hero-content {
    text-align: var(--vault-hero-text-align, left) !important; /* Force alignment */
}
.library-hero-content > * {
    margin-left: 0;
    margin-right: 0;
    text-align: var(--vault-hero-text-align, left) !important;
}

/* Ensure the tagline badge does not interfere with left alignment on desktop */
.library-hero-content .hero-tagline-wrapper {
    display: block; /* Ensure it occupies full width for consistent alignment */
    text-align: var(--vault-hero-text-align, left) !important;
}

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: var(--primary-color);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    
    font-size: 0.75rem; /* Reduced by 25% from 1rem */
}

.cta-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

.knowledge-articles {
    padding: 4rem 1.5rem;
    background: var(--background-light);
}

.articles-intro {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.articles-intro h2 {
    
    font-size: var(--main-page-heading-font-size);
    color: var(--text-color-dark);
    margin-bottom: var(--main-page-heading-margin-bottom);
    text-align: center; /* Changed from left to center */
}

.articles-intro p {
    color: var(--text-color-light);
    margin-bottom: 2rem;
    text-align: center;
}

.article-selection-container {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.article-dropdown {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-color-dark);
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234a5568'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.article-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

.article-display-area {
    
    padding-left: var(--articles-horizontal-padding);
    padding-right: var(--articles-horizontal-padding);
    padding-top: 15px; 
    padding-bottom: var(--library-bottom-gap); 
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    min-height: 400px; 
    display: flex; /* Make it a flex container to center initial message */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: left; /* Default text alignment for article content */
    line-height: 1.7;
    font-size: 1rem; /* base editable font size for WYSIWYG feel */
}

.article-display-area.active {
    display: block; /* Override flex for actual article content */
}

.article-display-area .initial-message {
    font-size: 1rem;
    color: var(--text-color-light);
    text-align: center;
    max-width: 300px;
    margin: auto; /* Center the message within the flex container */
}

/* Styles for the review edit box */
#draftReviewArea {
    /* Use custom styling for dashed border and light background */
    border: 1px dashed var(--secondary-color);
    background: #f0fdfa; /* Very light teal background */
    padding: 0; 
    box-shadow: none; 
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
}

/* NEW: Ensure Sample Articles / MISC Topics header gets a visible background even if slugification differs */

.sample-articles-misc-topics-theme,
.sample-articlesmisc-topics-theme {
    background: #2d3748; /* Dark slate to contrast with white text */
}

.article-header.sample-articles-misc-topics-theme,
.article-header.sample-articlesmisc-topics-theme {
    
    background: #2d3748 !important;
    color: #ffffff !important;
}

/* Generation progress bar styles (small, unobtrusive) */
.generation-progress {
    max-width: 700px;
    margin: 0.75rem auto 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-color-light);
}
.generation-progress .progress-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
    margin-bottom: 0.4rem;
}
.generation-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    width: 0%;
    transition: width 0.3s ease;
}
.generation-progress .progress-text {
    font-size: 0.7rem;
    color: var(--text-color-light);
}

.title-row-with-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Ensure input stretches and button sits to the right */
.title-row-with-button input[type="text"],
.title-row-with-button textarea {
    flex: 1 1 auto;
    min-width: 0;
}

.title-row-with-button .generate-input-btn {
    
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
}

/* Vertical list style for preset/custom posting sites */
.sites-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 680px;
    margin: 0.5rem auto 1rem auto;
}
.sites-list a.site-link {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: var(--background-white);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color-dark);
}
.sites-list a.site-link i {
    font-size: 1.25rem;
    margin-top: 4px;
    color: var(--secondary-color);
}
.sites-list a.site-link span {
    font-weight: 600;
}
.sites-list a.site-link small {
    display: block;
    color: var(--text-color-light);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* custom sites include a small delete button at end */
.sites-list.custom a.site-link { position: relative; }
.sites-list.custom .delete-site-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #b71c1c;
    cursor: pointer;
}

.article-editor {
    /* previously centered content; ensure article editor is left-aligned for easier copy/paste */
    text-align: left;
    padding: 1rem;
    min-height: 220px;
    overflow: auto;
    line-height: 1.7;
    font-size: 1rem; /* base editable font size for WYSIWYG feel */
}

.vault-split-view {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    min-height: 600px;
}

.vault-sidebar {
    flex: 0 0 30%;
    background: var(--background-white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow-y: auto;
    max-height: 80vh;
    position: sticky;
    top: 100px;
}

.vault-sidebar .sidebar-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.vault-sidebar .sidebar-header h3 {
    font-size: 1.2rem;
    color: var(--text-color-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-category-group {
    margin-bottom: 1.5rem;
}

.article-category-group:last-child {
    margin-bottom: 0;
}

.category-heading {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.article-link-item {
    display: block;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color-dark);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.article-link-item:hover {
    background: var(--background-light);
    border-left-color: var(--primary-color);
    transform: translateX(4px);
}

.article-link-item.active {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.1) 0%, rgba(0, 105, 92, 0.1) 100%);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.article-link-item .article-title {
    font-size: 0.9rem;
    line-height: 1.4;
}

.vault-content-area {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .vault-split-view {
        flex-direction: column;
        gap: 1rem;
    }
    
    .vault-sidebar {
        flex: none;
        position: static;
        max-height: 400px;
    }
    
    .vault-content-area {
        flex: none;
    }
}

.article-links-container .loading-message {
    text-align: center;
    color: var(--text-color-light);
    padding: 2rem 1rem;
}

/* ===== HIGH-CONVERSION AUTH MODAL ===== */

/* @tweakable auth modal: google sign-in button vertical padding */
--auth-google-btn-padding-vertical: 0.85rem;

/* @tweakable auth modal: google sign-in button horizontal padding */
--auth-google-btn-padding-horizontal: 1.25rem;

/* @tweakable auth modal: google sign-in button font size */
--auth-google-btn-font-size: 1.05rem;

/* @tweakable auth modal: divider top/bottom margin */
--auth-divider-margin-vertical: 1.5rem;

/* @tweakable auth modal: mini tabs margin bottom */
--auth-tabs-margin-bottom: 1rem;

/* @tweakable auth modal: form input vertical padding */
--auth-input-padding-vertical: 0.6rem;

/* @tweakable auth modal: form input horizontal padding */
--auth-input-padding-horizontal: 1rem;

/* @tweakable auth modal: form group margin bottom */
--auth-form-group-margin: 0.75rem;

/* @tweakable auth modal: submit button padding vertical */
--auth-submit-btn-padding-vertical: 0.75rem;

/* @tweakable auth modal: submit button padding horizontal */
--auth-submit-btn-padding-horizontal: 1.5rem;

/* @tweakable auth modal: submit button margin top */
--auth-submit-btn-margin-top: 1rem;

/* @tweakable auth modal: privacy text margin top */
--auth-privacy-margin-top: 1.5rem;

/* @tweakable auth modal: privacy text font size */
--auth-privacy-font-size: 0.85rem;

/* NEW: Tweakable-controlled variables */
--auth-google-btn-border-radius: 7px; 
--auth-divider-margin-vertical-base: 1.5rem; 
--auth-tabs-margin-bottom-base: 1rem;
--auth-privacy-margin-top-base: 1.5rem;
--auth-vertical-spacing-multiplier: 1.0; 

.google-signin-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: var(--auth-google-btn-padding-vertical) var(--auth-google-btn-padding-horizontal);
    background: white;
    border: 2px solid #e0e0e0;
  
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.google-signin-primary:hover {
    border-color: #4285F4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
    transform: translateY(-1px);
}

.google-signin-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.google-signin-primary span {
    font-size: var(--auth-google-btn-font-size);
    font-weight: 600;
    align-self: center;
}

.google-icon {
    flex-shrink: 0;
    /* Apply tweakable size and offset for better alignment */
    width: var(--auth-google-icon-size);
    height: var(--auth-google-icon-size);
    margin-top: var(--auth-google-icon-offset);
    padding: var(--auth-google-icon-padding, 0); /* @tweakable-controlled padding to adjust logo tightness */
}

.email-auth-section {
    margin-top: 0;
}

.auth-mini-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: calc(var(--auth-tabs-margin-bottom-base) * var(--auth-vertical-spacing-multiplier));
    background: white;
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.auth-mini-tab {
    flex: 1;
    padding: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-color-light);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.auth-mini-tab.active {
    background: var(--primary-color);
    color: white;
}

.auth-mini-tab:not(.active):hover {
    background: #f0f0f0;
    color: var(--text-color);
}

.auth-form .form-group {
    margin-bottom: calc(var(--auth-form-group-margin-base) * var(--auth-form-group-margin-multiplier));
}

.auth-form .form-group input {
    width: 100%;
    padding: calc(var(--auth-input-padding-vertical-base) * var(--auth-input-padding-multiplier)) calc(var(--auth-input-padding-horizontal-base) * var(--auth-input-padding-multiplier)); /* Use multiplier */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.auth-form .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
    transform: translateY(-1px);
}

.email-submit-btn {
    --auth-email-submit-bg: var(--primary-color);
    --auth-email-submit-color: #ffffff;

    background: var(--auth-email-submit-bg);
    color: var(--auth-email-submit-color);
    border: none;
    padding: calc(var(--auth-submit-btn-padding-vertical-base) * var(--auth-email-submit-padding-multiplier)) var(--auth-submit-btn-padding-horizontal-base); /* Use multiplier */
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    margin-top: var(--auth-submit-btn-margin-top);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.email-submit-btn:hover {
    background: color-mix(in srgb, var(--auth-email-submit-bg) 85%, black 15%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Also ensure collapsed email toggle button has an explicit visible border in case runtime script doesn't apply it */
.email-toggle-btn {
    
    --email-toggle-default-border: 1px solid var(--border-color);
    border: var(--email-toggle-default-border);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Ensure Google button centers and respects a tweakable max width across all auth modals */
.google-signin-primary {
    width: 100%;
    max-width: var(--auth-google-btn-max-width, 420px); /* controlled by tweakable */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center; /* center icon + text */
    gap: 1rem;
    padding: var(--auth-google-btn-padding-vertical) var(--auth-google-btn-padding-horizontal);
    background: white;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* If consumer disables centering via variable, respect left alignment */
:root[style*="--auth-google-btn-center: left"] .google-signin-primary,
.google-signin-primary[data-align="left"] {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
    padding-left: 0.9rem;
}

/* Small visual tweak: ensure internal svg and text are vertically centered and won't push layout */
.google-signin-primary .google-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Keep the button responsive on very small screens — allow it to become full width if max-width is large */
@media (max-width: 420px) {
    .google-signin-primary {
        max-width: 100%;
        width: 100%;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* ===== AUTH MODAL - SCROLLABLE & LAPTOP FIT ===== */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 35, 126, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* Higher than header */
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.settings-modal.active {
    opacity: 1;
    pointer-events: all;
}

.settings-modal-content {
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
}

.auth-modal-redesigned .settings-modal-body {
    padding: 1rem 2rem 1.5rem 2rem !important;
}

.email-auth-expanded {
    margin-top: 1rem;
    padding: 1rem !important;
}

.email-auth-expanded .form-group {
    margin-bottom: 0.75rem !important;
}

.google-signin-primary {
    padding: 1rem .75rem !important;
    /* padding: 0px 0px 0px 0px; */
    border-radius: 7px;
}

.auth-modal-redesigned .settings-modal-header {
    padding: 1rem 2rem 0.5rem 2rem;
}

.auth-modal-redesigned .settings-modal-header {
    position: relative;
}

.auth-modal-redesigned .settings-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

@media (max-width: 768px) {
    .google-signin-primary {
        padding: 0.9rem 1.25rem;
    }
    
    .google-signin-primary span {
        font-size: 1rem;
    }
    
    .auth-modal-redesigned .settings-modal-body {
        padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    }
}

/* Redesigned AI Detection Section */

/* @tweakable vertical padding for the AI detection section wrapper */
--proof-section-padding-vertical: 0rem;

/* @tweakable background color for the Read This First highlight card */
--proof-highlight-bg-color: #fffde7; /* light yellow */

/* @tweakable border color for the Read This First highlight card */
--proof-highlight-border-color: #fff9c4;

.proof-section {
    /* Remove padding from wrapper to allow full-width bands children */
    padding: var(--proof-section-padding-vertical) 0; 
    background: #ffffff;
    overflow: hidden; /* Prevent horizontal scroll from any full-width hacks if used */
}

/* SECTION 1: Hero / Intro */
.proof-hero-block {
    text-align: center;
    /* vertical padding is tweakable via --proof-hero-vertical-padding (default 10px); left/right inner padding remains 1.5rem */
    padding: var(--proof-hero-vertical-padding, 10px) 1.5rem var(--proof-hero-vertical-padding, 10px) 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    margin-top: 0; /* ensure no margin above hero */
}

.proof-hero-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.proof-hero-main-icon {
    font-size: 3rem;
    color: var(--primary-color);
}

.proof-hero-check-icon {
    position: absolute;
    bottom: -5px;
    right: -10px;
    font-size: 1.5rem;
    color: #2e7d32; /* Success green */
    background: white;
    border-radius: 50%;
    border: 2px solid white;
}

.proof-hero-heading {
    font-size: 2.2rem;
    color: var(--text-color-dark);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.proof-hero-subheading {
    font-size: 1.1rem;
    color: var(--text-color-light);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.proof-hero-cta {
    /* reuse styling from global but ensure sizing matches prompt */
    font-size: 1rem;
}

/* SECTION 2: Highlight Card */
.proof-highlight-card {
    background-color: var(--proof-highlight-bg-color);
    border: 1px solid var(--proof-highlight-border-color);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.proof-highlight-card .highlight-icon {
    font-size: 2rem;
    color: #fbc02d; /* Warning yellow/orange */
    margin-bottom: 1rem;
}

.proof-highlight-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-color-dark);
}

.proof-highlight-card p {
    color: var(--text-color-dark);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.highlight-best-practice {
    font-weight: 600;
    color: var(--primary-color) !important;
    margin-bottom: 0 !important;
}

/* SECTION 3: Detector Grid */
.detectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 5rem;
}

.detector-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.detector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--primary-color);
}

.detector-logo {
    width: 64px;
    height: 64px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.detector-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color-dark);
}

.detector-card p {
    font-size: 0.85rem;
    color: var(--text-color-light);
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Pushes button down */
}

.detector-ghost-btn {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.detector-card:hover .detector-ghost-btn {
    opacity: 1;
}

/* SECTION 4: Why Scores Differ */
.scores-differ-section {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
    margin: 2rem auto;
    /* Controlled by --scores-differ-max-width variable via JS tweakable */
    max-width: var(--scores-differ-max-width, 100%); 
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 12px;
}

.scores-differ-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-stack {
    position: relative;
    width: 120px;
    height: 120px;
}

.stack-icon {
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
}

.stack-icon.icon-1 { top: 0; left: 30px; z-index: 1; }
.stack-icon.icon-2 { top: 40px; left: 0; z-index: 2; color: var(--secondary-color); }
.stack-icon.icon-3 { top: 40px; right: 0; z-index: 3; color: var(--accent-color); }

.scores-differ-content h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.scores-differ-content p {
    font-size: 1rem;
    color: var(--text-color-light);
    line-height: 1.7;
}

/* SECTION 5: Google Stance (Full Width Band) */
.google-stance-band {
    background: #f7f9fc;
    padding: 5rem 0;
    margin-bottom: 5rem;
}

.google-stance-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.google-icon-wrapper {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}
.google-icon-wrapper .fa-check {
    position: absolute;
    bottom: 0;
    right: -10px;
    font-size: 1.2rem;
    color: #2e7d32;
    background: white;
    border-radius: 50%;
    padding: 2px;
}

.google-stance-box h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.google-stance-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    text-align: left;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.google-stance-list li {
    font-size: 1.1rem;
    color: var(--text-color-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.google-stance-list li i {
    color: #2e7d32;
}

.google-stance-summary {
    font-size: 1rem;
    color: var(--text-color-light);
    max-width: 600px;
    margin: 0 auto;
}

/* SECTION 6: Pro Tip */
.proof-pro-tip {
    background: #e8f5e9; /* Light green */
    border: 1px solid #c8e6c9;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto 5rem auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.pro-tip-icon {
    background: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #2e7d32; /* Green */
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pro-tip-content h3 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
    color: #1b5e20;
}

.pro-tip-content p {
    font-size: 0.95rem;
    color: #2e7d32;
    margin-bottom: 0.5rem;
}
.pro-tip-content p:last-child {
    margin-bottom: 0;
}

/* SECTION 7: Final CTA */
.proof-final-cta {
    text-align: center;
    padding-bottom: 5rem;
}

.proof-final-cta h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.final-cta-subtext {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-color-light);
    opacity: 0.8;
}

/* RESPONSIVE */

/* @tweakable [number] the width (px) of hero centered block between 769px and 967px */
:root {
  /* @tweakable Width in px for the centered hero text block on narrow desktops/tablets */
  --hero-centered-block-width: 475px;
}

/* 769–967px: center the hero text column as a fixed-width block and left-align its contents */
@media (min-width: 769px) and (max-width: 967px) {
  .hero-left {
    width: var(--hero-centered-block-width);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  /* ensure all descendant text remains left-aligned inside the centered block */
  .hero-left, .hero-left * {
    text-align: left !important;
  }
  /* align benefits vertically left inside the block */
  .hero-benefits-list {
    align-items: flex-start;
    margin-left: 0;
  }
}

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

@media (max-width: 768px) {
    .hero-video-container {
        transform: none; /* Remove 3D effect on mobile */
        margin-top: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feature-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .feature-card .icon-box {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .feature-text strong {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    .feature-text span {
        font-size: 0.9rem;
    }

    /* Align hero benefit items to the left on mobile and provide tweakable padding/gap */
    .hero-benefits-list {
        align-items: flex-start;
        text-align: var(--hero-benefits-mobile-alignment);
        padding-left: var(--hero-benefits-mobile-padding);
        gap: var(--hero-benefits-mobile-gap);
        margin-left: 0; /* ensure list flush with container padding */
    }

    .hero-benefit-item {
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }
    
    .hero-title {
        font-size: var(--hero-h1-size-mobile); /* Use new mobile variable */
    }
    
    /* NEW: Mobile subtitle sizing */
    .hero-subtitle {
        font-size: var(--hero-subtitle-mobile-font-size, 1rem); /* Use variable, fallback to 1rem */
    }
}

/* Hero Title Underline - thin yellow underline, left aligned, tweakable via CSS variables set by JS */
.hero-title {
    position: relative; /* ensure pseudo-element positions relative to title */
}

/* Tweakable underline using CSS variables: --hero-headline-underline-width, --hero-headline-underline-color, --hero-headline-underline-thickness */
.hero-title::after,
.library-hero .hero-title::after {
    content: '';
    position: absolute;
    left: 0;
    /* place slightly below baseline / visual gap; adjust as needed */
    bottom: -0.9rem;
    width: var(--hero-headline-underline-width, 50%);
    height: var(--hero-headline-underline-thickness, 3px);
    background: var(--hero-headline-underline-color, #d4af37);
    border-radius: 2px;
    display: block;
}

/* Ensure on small screens the underline remains visually balanced */
@media (max-width: 768px) {
    .hero-title::after {
        bottom: -0.7rem;
    }
}