/* ============================================
   YEV - home page styles (externalized v6.01)
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
        html { height: 100%; overflow-x: hidden; scroll-behavior: smooth; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--paper);
            color: var(--ink);
            margin: 0;
            min-height: 100vh;
            line-height: 1.6;
        }

        /* ========== HERO ========== */
        .hero {
            background: linear-gradient(135deg, var(--yev-navy) 0%, var(--yev-sky) 100%);
            color: white;
            padding: clamp(32px, 5vh, 80px) 24px clamp(40px, 6vh, 100px);
            text-align: center;
            min-height: calc(100svh - 70px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        @media (max-width: 1024px) {
            .hero {
                min-height: auto;
                align-items: stretch;
                padding: clamp(28px, 6vw, 48px) 20px clamp(36px, 8vw, 56px);
            }
            .hero-content { max-width: 100%; }
        }
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 30%, rgba(254,212,42,0.08) 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, rgba(74,144,226,0.15) 0%, transparent 50%);
            pointer-events: none;
        }
        .hero-content {
            max-width: 880px;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--hero-gap);
        }
        .hero-logo {
            max-width: clamp(130px, 19vh, 190px);
            margin: 1vh 0;
            height: auto;
            border: 3px solid var(--yev-gold-deep);
			border-radius: 22px;
            padding: 4px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.25);
            background: white;
            display: block;
        }
        .eyebrow {
            font-size: var(--fs-hero-eyebrow);
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--yev-gold);
        }
		@media (max-width: 1024px) {
            .eyebrow {
                font-size: clamp(12px, 3.4vw, 16px);
                letter-spacing: 1.5px;
                max-width: 100%;
            }
            .eyebrow::before, .eyebrow::after { margin: 0 8px; }
            .eyebrow::after { margin-right: 6.5px; }
        }
        .eyebrow::before, .eyebrow::after { content: '★'; margin: 0 10px; opacity: 0.9; }
        /* v6.09: letter-spacing adds trailing space after the final star, which
           text-align:center does not account for, pulling the eyebrow off true
           center. Trim the right star's right margin by the letter-spacing amount
           to cancel it. Base letter-spacing is 3px. */
        .eyebrow::after { margin-right: 7px; }
        .hero h1 {
            font-size: var(--fs-hero-h1);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.5px;
            text-shadow: 0 3px 18px rgba(0,0,0,0.3);
        }
        .hero h1 em {
            font-style: normal;
            color: var(--yev-gold);
            position: relative;
        }
        .hero-tagline {
            font-size: var(--fs-hero-tagline);
            font-weight: 600;
            opacity: 0.96;
            max-width: 720px;
            line-height: 1.6;
            text-wrap: balance;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
            margin-top: 8px;
        }
        .cta-sub {
            font-size: var(--fs-hero-sub);
            opacity: 0.85;
            font-style: italic;
            margin-top: -4px;
        }
		.cta-sub-break { display: inline; }
        @media (max-width: 1024px) {
            .cta-sub-break { display: block; }
            .cta-sub {
                font-size: clamp(13px, 4.0vw, 16px);
                padding: 0 12px;
                width: 100%;
            }
        }

        /* ========== SECTION SHELL ========== */
        section { padding: var(--space-section) 24px; }
        .container { max-width: var(--content-max); margin: 0 auto; }
        .section-eyebrow {
            font-size: var(--fs-eyebrow);
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--yev-royal) !important;
            margin-bottom: 12px;
            text-align: center;
        }
        .section-title {
            font-size: var(--fs-h2);
            font-weight: 800;
            text-align: center;
            color: var(--yev-navy);
            line-height: 1.2;
            margin-bottom: 18px;
            letter-spacing: -0.3px;
        }
        .section-lede {
            font-size: var(--fs-lede);
            text-align: center;
            max-width: 720px;
            margin: 0 auto 56px;
            color: #444;
            line-height: 1.65;
        }

		/* ========== PAIN SECTION ========== */
		.pain-card {
			background: white;
			padding: 28px 24px;
			border-radius: 18px;
			border: 1px solid rgba(33,37,107,0.08);
			border-left: 3px solid var(--yev-gold-deep);
			box-shadow: 0 4px 18px rgba(33,37,107,0.06);
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			gap: 14px;
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}
		.pain-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 28px rgba(33,37,107,0.12);
		}
		.pain-icon {
			flex-shrink: 0;
			color: var(--yev-navy);
			margin-top: 2px;
		}
		.pain-card-text {
			display: flex;
			flex-direction: column;
			gap: 6px;
		}
		.pain-card h3 {
			font-size: 1.0625rem;
			color: var(--yev-navy);
			margin: 0;
			font-weight: 700;
			line-height: 1.3;
		}
		.pain-card p {
			font-size: 0.875rem;
			color: #555;
			line-height: 1.6;
			margin: 0;
		}

		/* ========== PATHWAYS ========== */
		.pathways-section {
			background: var(--paper);
		}
		.pathways-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 28px;
			margin-top: 40px;
			align-items: start;
		}
		@media (max-width: 820px) {
			.pathways-grid { grid-template-columns: 1fr; }
		}
		.pathway {
			background: white;
			border-radius: 22px;
			padding: 40px 36px;
			border: 1px solid rgba(33,37,107,0.1);
			box-shadow: 0 10px 30px rgba(33,37,107,0.08);
			display: flex;
			flex-direction: column;
			gap: 18px;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			position: relative;
			overflow: hidden;
		}
		.pathway:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(33,37,107,0.15); }
		.pathway::before {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0;
			height: 5px;
			background: linear-gradient(90deg, var(--yev-gold) 0%, var(--yev-gold-deep) 100%);
		}
		.pathway.secondary::before { background: linear-gradient(90deg, var(--yev-sky) 0%, var(--yev-navy) 100%); }
		.pathway-header {
			display: flex;
			align-items: center;
			gap: 10px;
			color: var(--yev-royal);
		}
		.pathway-header .pathway-for {
			margin: 0;
			font-size: 0.8125rem;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: var(--yev-royal);
			font-weight: 700;
		}
		.pathway h3 {
			font-size: 1.5rem;
			color: var(--yev-navy);
			font-weight: 800;
			letter-spacing: -0.3px;
		}
		.pathway p { color: #444; font-size: 1rem; line-height: 1.65; }
		.pathway-includes {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.pathway-includes li {
			padding: 6px 0 6px 26px;
			position: relative;
			color: #333;
			font-size: 0.9375rem;
		}
		.pathway-includes li::before {
			content: '✓';
			position: absolute;
			left: 0;
			color: var(--yev-royal);
			font-weight: 800;
		}
		.pathway-price {
			margin-top: auto;
			padding-top: 16px;
			border-top: 1px dashed rgba(33,37,107,0.15);
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 16px;
			flex-wrap: wrap;
		}
		.pathway-price .price {
			font-size: 1.375rem;
			font-weight: 800;
			color: var(--yev-navy);
		}
		.pathway-price .price small {
			font-size: 0.8125rem;
			font-weight: 500;
			color: var(--muted);
			display: block;
			margin-top: 2px;
		}
		.pathway-cta {
			display: inline-block;
			padding: 12px 24px;
			background: var(--yev-navy);
			color: white;
			text-decoration: none;
			border-radius: 50px;
			font-size: 0.875rem;
			font-weight: 700;
			transition: all 0.3s ease;
			white-space: nowrap;
		}
		.pathway-cta:hover { background: var(--yev-royal); transform: translateY(-2px); }
		.pathway.secondary .pathway-cta { background: var(--yev-sky); color: var(--yev-navy); }
		.pathway.secondary .pathway-cta:hover { background: var(--yev-navy); color: white; }
		.secondary-pathways {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 28px;
			margin-top: 28px;
		}
		@media (max-width: 820px) {
			.secondary-pathways { grid-template-columns: 1fr; }
		}
		.secondary-pathways .pathway { padding: 30px 28px; }
		.secondary-pathways .pathway h3 { font-size: 1.25rem; }
		.pathways-section .price-footnote {
			text-align: center;
			font-size: 0.75rem;
			color: var(--muted);
			font-style: italic;
			margin-top: 32px;
			padding: 0 16px;
			line-height: 1.5;
		}
		.pathways-section .price-footnote::before { content: "* "; color: var(--yev-gold-deep); font-weight: 700; }

        /* ========== PROOF STRIP ========== */
        .proof-strip {
            background: linear-gradient(135deg, var(--yev-royal) 0%, var(--yev-navy) 100%);
            color: white;
            padding: 50px 0;
            overflow: hidden;
            position: relative;
        }
        .proof-marquee {
            display: flex;
            gap: 60px;
            width: max-content;
            animation: proofScroll 62s linear infinite;
            will-change: transform;
            pointer-events: none;
            user-select: none;
        }
        @keyframes proofScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .proof-marquee { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 24px; }
        }
        .proof-stat {
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: center;
            min-width: 200px;
            flex-shrink: 0;
        }
        .proof-num {
            font-size: clamp(28px, 3.6vw, 38px);
            font-weight: 800;
            color: var(--yev-gold);
            letter-spacing: -0.5px;
            line-height: 1.1;
        }
        .proof-label {
            font-size: 0.8125rem;
            opacity: 0.85;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 600;
            line-height: 1.3;
        }

        /* ========== TESTIMONIALS ========== */
        .testimonials-section {
            background: linear-gradient(180deg, #f5efe1 0%, #fdfbf5 100%);
        }
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 24px;
            margin-top: 40px;
        }
        .testimonial {
            background: white;
            padding: 30px 28px;
            border-radius: 18px;
            border: 1px solid rgba(33,37,107,0.08);
            box-shadow: 0 6px 20px rgba(33,37,107,0.06);
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .testimonial-stars { color: var(--yev-gold-deep); font-size: 1rem; letter-spacing: 2px; }
        .testimonial-quote {
            font-size: 1rem;
            color: #333;
            line-height: 1.65;
            font-style: italic;
        }
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: auto;
        }
        .testimonial-author img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--yev-gold-deep);
        }
        .testimonial-initials {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--yev-navy) 0%, var(--yev-sky) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1rem;
            flex-shrink: 0;
            border: 2px solid var(--yev-gold-deep);
        }
        .testimonial-author strong { color: var(--yev-navy); font-size: 0.9375rem; display: block; }
        .testimonial-author span { color: #666; font-size: 0.8125rem; }

        /* ========== ABOUT TEASER ========== */
        .about-teaser {
            background: var(--paper);
            padding-bottom: 120px;
        }
        .about-grid {
            display: grid;
            grid-template-columns: 0.72fr 1fr;
            grid-template-areas:
                "img eyebrow"
                "img text";
            grid-template-rows: auto auto;
            column-gap: 56px;
            row-gap: 8px;
            align-items: center;
            max-width: 1040px;
            margin: 0 auto;
        }
        .about-eyebrow { grid-area: eyebrow; align-self: end; margin: 0; }
        .about-image-wrap { grid-area: img; align-self: center; }
        .about-text { grid-area: text; align-self: start; }
        @media (max-width: 820px) {
            .about-grid {
                grid-template-columns: 1fr;
                grid-template-areas: "eyebrow" "img" "text";
                text-align: center;
                row-gap: 0;
            }
            .about-eyebrow {
                align-self: center;
                font-size: 0.8125rem;
                margin-bottom: 18px;
            }
            .about-grid .about-image-wrap { margin-bottom: 28px; }
        }
        .about-image-wrap {
            position: relative;
        }
        .about-image-wrap::before {
            content: '';
            position: absolute;
            inset: 14px -14px -14px 14px;
            background: linear-gradient(135deg, var(--yev-gold) 0%, var(--yev-gold-deep) 100%);
            border-radius: 22px;
            z-index: 0;
        }
        .about-image-wrap img {
            width: 100%;
            border-radius: 22px;
            position: relative;
            z-index: 1;
            box-shadow: 0 16px 40px rgba(33,37,107,0.18);
        }
        .about-text h2 {
            font-size: clamp(26px, 3.6vw, 30px);
            color: var(--yev-navy);
            font-weight: 800;
            margin-bottom: 16px;
            line-height: 1.2;
        }
        .about-text p {
            color: #444;
            font-size: 1.0625rem;
            line-height: 1.7;
            margin-bottom: 14px;
        }
        .about-text .btn-primary { margin-top: 16px; }

        /* ========== FINAL CTA ========== */
        .final-cta {
            background: linear-gradient(135deg, var(--yev-navy) 0%, var(--yev-sky) 100%);
            color: white;
            text-align: center;
            padding: 60px 24px 40px 24px;
            position: relative;
            overflow: hidden;
        }
        .final-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(254,212,42,0.1) 0%, transparent 60%);
        }
        .final-cta-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
        .final-cta h2 {
            font-size: clamp(28px, 4.4vw, 42px);
            font-weight: 800;
            margin-bottom: 18px;
            line-height: 1.2;
        }
        .final-cta p {
            font-size: var(--fs-lede);
            opacity: 0.94;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        /* ========== UTILITY ========== */
        .lang-en, .lang-fr { opacity: 0.6; }
        .lang-en.active, .lang-fr.active { opacity: 1; font-weight: 700; }
        /* ===== Common monitor-width breakpoint tuning ===== */
        /* Short laptops (e.g. 1366x768): cap hero type harder on limited height */
        @media (min-width: 601px) and (max-height: 800px) {
            .hero { min-height: calc(100svh - 70px); }
            .hero-logo { max-width: clamp(110px, 20vh, 160px); }
        }
        /* Standard laptop width */
        @media (min-width: 1280px) and (max-width: 1536px) {
            .hero-content { max-width: 820px; }
        }
        /* Large desktop / FHD */
        @media (min-width: 1537px) and (max-width: 2200px) {
            .hero-content { max-width: 880px; }
        }
        /* 4K and above: content stays capped, hero centered comfortably */
        @media (min-width: 2201px) {
            .hero-content { max-width: 960px; }
        }


/* ============================================
   v6.01 home overrides: hero unification, mobile
   full-viewport fill, button + eyebrow standardization
   ============================================ */
.hero { background: var(--yev-hero-gradient); min-height: calc(100svh - var(--nav-h, 64px)); }
.hero::before {
    background: radial-gradient(circle at 30% 30%, rgba(254,212,42,0.10) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(74,144,226,0.15) 0%, transparent 50%);
}
.final-cta { background: var(--yev-hero-gradient); }

/* Headline: single line on desktop, stacked on mobile */
.hero h1 span { display: inline; }
@media (max-width: 1024px) {
    .hero h1 { font-size: clamp(30px, 8.5vw, 42px); line-height: 1.05; }
    .hero h1 span { display: block; }
}

@media (max-width: 1024px) {
    .hero { min-height: calc(100dvh - var(--nav-h, 64px)); align-items: center; padding: clamp(18px,4vh,36px) 18px clamp(22px,6vh,44px); }
    .hero-content {
        max-width: 100%; width: 100%;
        justify-content: center; gap: clamp(12px, 2vh, 32px);
    }
    /* v6.08: keep the two CTAs side by side down to 360 so the hero content
       stays short enough to fit one viewport (stacking added height and pushed
       content past the fold on the P30). They shrink to fit. */
    .hero-actions { flex-wrap: nowrap; gap: 10px; width: 100%; }
    .hero-actions .btn-primary,
    .hero-actions .btn-ghost {
        flex: 0 1 auto; min-width: 0;
        padding: 11px 14px; font-size: clamp(13px, 3.6vw, 15px);
    }
}
/* v6.08: on the narrowest phones, trim the headline a touch so the triplet
   stays three lines (not four), keeping the hero within one viewport. */
@media (max-width: 400px) {
    .hero h1 { font-size: clamp(26px, 7.6vw, 32px); }
    /* v6.09: Mat confirmed 0.90rem lets the tagline drop from 4 lines to 3 and
       fit the P30 cleanly. Scoped under 400px so the Pixel 8 (412px) keeps the
       larger 1.05rem floor and is not shrunk. */
    .hero-tagline { font-size: 0.9rem; }
}

/* Pathway card CTAs -> light-section ghost (retire sky/cyan) */
.pathway-cta { background: #fff; color: var(--yev-navy); border: 2px solid var(--yev-navy); padding: 13px 22px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.pathway-cta:hover { background: var(--yev-navy); color: #fff; transform: translateY(-2px); }
.pathway.secondary .pathway-cta { background: #fff; color: var(--yev-navy); border: 2px solid var(--yev-navy); }
.pathway.secondary .pathway-cta:hover { background: var(--yev-navy); color: #fff; }

/* Softer profile frame: gold easing into gold-deep lower down */
.about-image-wrap::before { background: linear-gradient(160deg, var(--yev-gold) 0%, var(--yev-gold) 38%, var(--yev-gold-deep) 100%); }

/* Eyebrows gold site-wide */
.section-eyebrow { color: var(--yev-royal); }

@media (min-width: 821px) {
    .about-eyebrow { text-align: left; }
}