/* ===========================================
   PRESALES PAGE STYLES
   Page-specific overrides for index.html/presales.html
   Dependencies: components.css
   =========================================== */

/* ===========================================
   HERO SECTION - FIXED
   Centered content, no illustration, next section peek
   =========================================== */

.hero {
    min-height: calc(100vh - 80px);
    /* Allows next section headline to peek */
    min-height: calc(100svh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    background: linear-gradient(180deg,
            var(--bone-base) 0%,
            #F8F5F0 60%,
            #F5F0EA 100%);
    position: relative;
}

/* ===========================================
   HERO CONTENT - Centered
   =========================================== */

.hero__content {
    max-width: 800px;
}

.hero__title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0;
    color: var(--ink);
}

.hero__title--light {
    font-weight: 400;
    font-style: normal;
}

.hero__title em {
    font-style: italic;
}

.hero__divider {
    width: 60px;
    height: 1px;
    background: var(--travertine);
    margin: var(--space-xl) auto;
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--ink-soft);
    max-width: 50ch;
    margin: 0 auto;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .hero__subtitle {
        font-size: var(--text-xl);
    }
}

/* ===========================================
   SCROLL INDICATOR - Absolute Bottom
   =========================================== */

.hero__scroll {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.hero__scroll-icon {
    width: 20px;
    height: 20px;
    animation: heroChevronBounce 2s infinite;
}

@keyframes heroChevronBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ===========================================
   NEXT SECTION PEEK - Pulls up for reveal
   =========================================== */

.section--reveal {
    /* Slight negative margin to pull section into hero space for peek effect */
    margin-top: 0;
    padding-top: var(--space-3xl);
}

.section--reveal h2 {
    /* Ensure headline is immediately visible when it peeks */
    margin-top: 0;
}

/* ===================
   LEGACY HERO SECTION (presales-hero)
   =================== */

.presales-hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-5xl) var(--space-lg);
    background: linear-gradient(180deg,
            var(--bone-base) 0%,
            #F8F5F0 60%,
            #F5F0EA 100%);
    position: relative;
}



/* ==============================================
   1. HERO EMERGENCY SHRINK (The "Whisper" Fix)
   ============================================== */
/* Using 'body' to boost specificity over base styles */
body .presales-hero .hero-headline {
    /* FORCE scale down from massive to authoritative */
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;

    /* FORCE max-width to prevent "wide shouting" */
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Visual correction: Pull it up */
    margin-top: 0 !important;
    padding-top: 2vh !important;
}

.presales-hero .subheadline {
    max-width: 600px;
    color: var(--ink-soft);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
    margin-left: auto;
    margin-right: auto;
}

/* Architectural detail line */
.presales-hero .subheadline::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: var(--travertine);
    margin: var(--space-xl) auto 0;
}

/* ===================
   SCROLL INDICATOR
   =================== */

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ink-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: auto;
    padding-bottom: var(--space-xl);
    cursor: pointer;
    transition: var(--transition-hover);
    gap: var(--space-md);
}

.scroll-indicator:hover {
    color: var(--ink-soft);
}

.scroll-indicator span {
    opacity: 0.7;
}

.scroll-indicator svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}

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

/* Legacy fade-in support */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* New settle-in scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children - creates rhythm without feeling slow */
.stagger>*:nth-child(1) {
    transition-delay: 0ms;
}

.stagger>*:nth-child(2) {
    transition-delay: 80ms;
}

.stagger>*:nth-child(3) {
    transition-delay: 160ms;
}

.stagger>*:nth-child(4) {
    transition-delay: 240ms;
}

.stagger>*:nth-child(5) {
    transition-delay: 320ms;
}

.stagger>*:nth-child(6) {
    transition-delay: 400ms;
}

.stagger>*:nth-child(7) {
    transition-delay: 480ms;
}

.stagger>*:nth-child(8) {
    transition-delay: 560ms;
}

/* ===================
   LABEL COMPARISON
   =================== */

.label-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .label-comparison {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

.label-panel {
    background-color: var(--bone-surface);
    border: 1px solid var(--travertine);
    padding: var(--space-lg);
    border-radius: var(--radius-sm);
}

.label-panel__title {
    font-size: var(--text-base);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-bottom: var(--space-md);
}

/* Supplement Facts for Presales */
.label-panel .supplement-facts {
    border: 1px solid var(--stone-warm);
    padding: var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: transparent;
}

.label-panel .supplement-facts__header {
    font-weight: 700;
    border-bottom: 8px solid var(--ink);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    background: transparent;
    color: var(--ink);
    font-size: var(--text-base);
    text-align: left;
    text-transform: none;
}

.label-panel .supplement-facts__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--travertine);
}

.label-panel .supplement-facts__row:last-child {
    border-bottom: none;
}

/* Hidden label effect */
.label-panel--hidden .supplement-facts__name,
.label-panel--hidden .supplement-facts__amount {
    filter: blur(4px);
    user-select: none;
}

.label-panel--hidden .supplement-facts__row--visible .supplement-facts__name,
.label-panel--hidden .supplement-facts__row--visible .supplement-facts__amount {
    filter: none;
}

.label-panel--hidden .supplement-facts__amount {
    color: var(--ink-muted);
}

.label-caption {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    font-style: italic;
}

.label-panel--clear .label-caption {
    color: var(--accent-sage);
    font-style: normal;
    font-weight: 500;
}

/* ===================
   DOSE COMPARISON
   =================== */

.dose-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.dose-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dose-bar__label {
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.dose-bar__track {
    height: 24px;
    background-color: var(--bone-surface);
    border: 1px solid var(--travertine);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.dose-bar__fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--bone-base);
}

.dose-bar__fill--clinical {
    width: 100%;
    background-color: var(--accent-sage);
}

.dose-bar__fill--typical {
    width: 15%;
    background-color: var(--stone-warm);
    color: var(--ink);
}

/* ===================
   STANDARD LIST
   =================== */

.standard-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) auto;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.standard-list li {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--travertine);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    color: var(--ink-soft);
    width: 100%;
    max-width: 500px;
    text-align: left;
}

.standard-list li:last-child {
    border-bottom: none;
}

.standard-list li::before {
    content: '✓';
    color: var(--accent-sage);
    font-weight: 700;
    flex-shrink: 0;
}

/* ===================
   CLOSING LINE
   =================== */

.closing-line {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-2xl), 3vw, 2.25rem);
    color: var(--ink);
    margin-top: 0;
    margin-bottom: var(--space-md);
    display: inline-block;
    text-align: center;
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(180deg, transparent 60%, rgba(196, 164, 132, 0.15) 60%);
}

/* ===================
   EDITORIAL HERO - MULTI-LINE HEADLINE
   Breaking the uniform pattern with dramatic type hierarchy
   =================== */

.hero-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 900px;
    margin-bottom: var(--space-lg);
}

.hero-headline__line {
    display: block;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hero-headline__line--lg {
    font-size: 1.25em;
    /* Specific scaling relative to parent to prevent massive override */
    font-weight: 700;
}

.hero-headline__line--md {
    font-size: 1em;
    font-weight: 500;
    color: var(--ink-soft);
}

.hero-headline__line--sm {
    font-size: 0.85em;
    font-weight: 600;
    font-style: italic;
    font-family: var(--font-serif);
}

/* Architectural horizontal rule */
.hero-rule {
    width: 120px;
    height: 1px;
    background-color: var(--travertine);
    margin: var(--space-xl) auto var(--space-lg);
}

/* ===================
   MASSIVE STATISTIC CALLOUT
   The editorial moment - stops you in your tracks
   =================== */

/* ==============================================
   2. STATISTIC ANCHOR (The "70%" Block)
   ============================================== */
body .stat-callout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: var(--space-xl) 0 !important;
    background: linear-gradient(180deg,
            var(--bone-surface) 0%,
            var(--bone-base) 100%);
    margin: var(--space-xl) 0 !important;
}

body .stat-callout__number {
    font-size: clamp(6rem, 12vw, 10rem) !important;
    line-height: 1 !important;
    color: var(--accent-clay) !important;
    font-family: var(--font-serif) !important;
    margin-bottom: 0 !important;
}

body .stat-callout__label {
    margin-top: var(--space-md) !important;
    max-width: 400px !important;
    font-family: var(--font-body) !important;
    text-align: center !important;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
}



/* ===================
   ASYMMETRIC LAYOUTS
   Intentional left-alignment breaking the centered monotony
   =================== */

.container--asymmetric {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-lg);
}

@media (min-width: 768px) {
    .container--asymmetric {
        margin-left: 10%;
        margin-right: auto;
        max-width: 600px;
    }
}

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

.section-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-muted);
    margin-bottom: var(--space-md);
}

.lead-statement {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: var(--space-md);
}

.closing-thought {
    font-style: italic;
    color: var(--ink-soft);
}

/* ==============================================
   4. LOOPHOLE TEXT FIX (Axis Repair)
   ============================================== */
/* The text above the 70% is currently left-aligned. Fix it. */
body .section--loophole .text-content,
body .section--loophole .loophole-header,
body .section--loophole p {
    text-align: center !important;
    margin-inline: auto !important;
    max-width: 500px !important;
    float: none !important;
    /* Safety */
}

/* ===================
   VARIED SPACING - RHYTHM THROUGH CONTRAST
   =================== */

.section--tight {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.section--spacious {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
}

/* ===================
   URGENT CTA SECTION
   Tighter, more urgent final call
   =================== */

.section--urgent {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
}

.section--urgent h2 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

/* ==============================================
   3. CHECKLIST AXIS (Center Block / Left Text)
   ============================================== */
/* Force the container to center its children */
body .section--urgent .container {
    text-align: center !important;
}

/* Force the list to behave like an inline-block (centered) 
   but keep text left-aligned */
body .section--urgent .standard-list {
    display: inline-block !important;
    text-align: left !important;
    width: fit-content !important;
    margin-top: var(--space-lg) !important;
    padding-left: 0 !important;
    /* Remove drift */

    /* Ensure other styles are preserved but overridden */
    margin-bottom: var(--space-xl) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}



.section--urgent .standard-list li {
    max-width: none;
    font-size: var(--text-base);
    padding: var(--space-sm) 0;
    border-bottom: none;
}

.cta-tight {
    text-align: center;
    padding: var(--space-lg) var(--space-lg) 0;
    border-top: 1px solid var(--travertine);
    margin-top: var(--space-lg);
}