/* =====================================================
   Gradient Labs — "Noir Editorial" variant override sheet
   Dark quiet-luxury aesthetic per July 2026 best practices:
   - warm charcoal surfaces (never pure black), off-white ink
   - serif display headlines on dark (editorial luxury signal)
   - desaturated brand accents (~70% sat), used sparingly
   - hairline borders + soft shadows instead of neon glows
   - subtle film grain for tactility
   Load AFTER style.css / mobile.css.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    /* softened brand tokens (~85% sat) — premium but alive; auto-remaps every var() in the base sheet */
    --brand-blue: #7D9BFF;
    --brand-purple: #9D6BFA;
    --brand-magenta: #D24BE8;
    --brand-magenta-light: #E07BF2;
    --brand-gradient: linear-gradient(135deg, #7D9BFF 0%, #9D6BFA 55%, #D24BE8 100%);
    --brand-gradient-h: linear-gradient(90deg, #7D9BFF 0%, #9D6BFA 55%, #D24BE8 100%);
    --brand-gradient-hover: linear-gradient(135deg, #93ACFF 0%, #AF85FF 55%, #DC6BF0 100%);

    /* noir surfaces & ink */
    --noir-0: #111113;      /* page */
    --noir-1: #16161A;      /* alternate section */
    --noir-2: #1A1A1F;      /* card */
    --noir-3: #202026;      /* raised card / tile */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --ink-hi: #EDEBE6;      /* warm off-white, never pure white */
    --ink-lo: #A9A9B2;
    --ink-faint: #7C7C86;
}

/* ---------- Global surfaces ---------- */
/* grain lives in the page canvas itself, behind everything: components stay crisp */
html, body {
    background-color: var(--noir-0) !important;
    color: var(--ink-lo) !important;
}

body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}

/* sections go transparent so the grained canvas shows through */
section,
.vsl-hero-section,
.experience-section,
.pain-point-section,
.results-proof-section,
.skills-section,
.testimonials-section,
.who-for-section,
.faq-section,
.features-section,
.cta-section,
.hero-photo-section,
.pricing-section {
    background: transparent !important;
}

/* alternate bands separated by hairlines (translucent so grain persists) */
.pain-point-section,
.testimonials-section,
.faq-section,
.results-proof-section {
    background: rgba(255, 255, 255, 0.018) !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* kill decorative radial glows */
section::before,
section::after,
.results-proof-section::before,
.skills-section::before,
.experience-section::before,
.testimonials-section::before {
    background: none !important;
}

/* ...but keep one quiet ambient wash behind the hero (transparent, grain shows through) */
.vsl-hero-section {
    position: relative;
    background:
        radial-gradient(ellipse 80% 55% at 50% -12%, rgba(157, 107, 250, 0.16) 0%, rgba(125, 155, 255, 0.05) 45%, transparent 70%) !important;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.faq-question,
.stat-label,
.offering-content h3,
.offering-content h4,
.assessment-subtitle {
    color: var(--ink-hi) !important;
}

.vsl-headline,
.section-header h2,
.skills-headline,
.hero-title {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--ink-hi) !important;
}

.vsl-headline { line-height: 1.18 !important; }

/* the one gradient-text accent: italic serif highlight */
.vsl-headline .highlight {
    font-style: italic;
    background: var(--brand-gradient-h) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    border: none !important;
}
.vsl-headline .highlight::after { display: none !important; }

/* thin gradient rule under hero headline */
.vsl-headline::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    border-radius: 1px;
    background: var(--brand-gradient-h);
    margin: 26px auto 0;
    opacity: 0.9;
}

p, li,
.vsl-subtext,
.section-header p,
.section-subheader,
.hero-kicker,
.cta-subtext,
.faq-answer,
.faq-answer p,
.assessment-note,
.attribution-role,
.divider-text {
    color: var(--ink-lo) !important;
}

.assessment-subtitle { font-weight: 500 !important; }

/* ---------- Buttons: inverted off-white primary ---------- */
.btn-primary,
.btn-vsl,
.btn-large,
.inline-cta .btn-primary,
.btn-join,
.btn-assessment,
.pricing-card .btn-primary {
    background: #FFFFFF !important;
    color: #131316 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 32px rgba(0, 0, 0, 0.5), 0 6px 30px rgba(157, 107, 250, 0.28), 0 2px 16px rgba(210, 75, 232, 0.18) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.btn-primary:hover,
.btn-vsl:hover,
.inline-cta .btn-primary:hover,
.btn-join:hover,
.btn-assessment:hover {
    background: #FFFFFF !important;
    color: #0E0E10 !important;
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 44px rgba(0, 0, 0, 0.6), 0 10px 40px rgba(157, 107, 250, 0.4), 0 4px 22px rgba(210, 75, 232, 0.26) !important;
}

.btn-secondary,
.btn-tell-more,
.btn-tertiary {
    background: transparent !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ink-hi) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-tell-more:hover,
.btn-tertiary:hover {
    border-color: var(--ink-hi) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--ink-hi) !important;
}

/* ---------- Cards: charcoal + hairline, no glow ---------- */
.pricing-card,
.offering-card,
.faq-item,
.feature-item,
.detail-card,
.evolution-card,
.flow-item,
.result-card,
.stat-card,
.testimonial-card,
.testimonial-video-card,
.skill-card,
.skill-box,
.step-card,
.result-proof-card,
.session-card,
.stage-card,
.criteria-item,
.who-for-card,
.ready-card,
.not-ready-card,
.partnership-includes,
.includes-box,
.modal-content,
.stage-content {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 16px 40px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
}

.pricing-card:hover,
.offering-card:hover,
.feature-item:hover,
.evolution-card:hover,
.skill-box:hover {
    border-color: var(--line-strong) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 22px 50px rgba(0, 0, 0, 0.45) !important;
    transform: translateY(-2px);
}

.skill-box h3 { color: var(--ink-hi) !important; }
.skill-box p { color: var(--ink-lo) !important; }

/* featured card: 1px gradient frame — the signature branded moment */
.pricing-card.featured,
.offering-card.coaching.hero {
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--noir-3), var(--noir-3)) padding-box,
        var(--brand-gradient) border-box !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 10px 44px rgba(157, 107, 250, 0.14) !important;
}
.offering-card.coaching.hero:hover {
    background:
        linear-gradient(var(--noir-3), var(--noir-3)) padding-box,
        var(--brand-gradient-hover) border-box !important;
}
.offering-card.coaching { border-color: var(--line-strong) !important; background: var(--noir-2) !important; }
.offering-card.coaching:hover { border-color: var(--line-strong) !important; background: var(--noir-2) !important; }

/* quote panels: charcoal with muted gradient left edge */
.testimonial-quote-panel {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
    border-left: 2px solid var(--brand-magenta) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}
.testimonial-quote-panel p,
.testimonial-quote-panel .testimonial-quote { color: var(--ink-lo) !important; }
.testimonial-quote-panel h3,
.quote-profile h3 { color: var(--ink-hi) !important; }
.testimonial-quote-panel .testimonial-role { color: var(--ink-faint) !important; }

/* ---------- Badges & labels ---------- */
.badge-primary {
    background: transparent !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ink-lo) !important;
    letter-spacing: 0.1em !important;
}

.stage-label {
    background: var(--brand-gradient-h) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    border: none !important;
    letter-spacing: 0.12em !important;
}

.badge-success,
.pricing-badge {
    background: var(--ink-hi) !important;
    color: #131316 !important;
    border: none !important;
    letter-spacing: 0.08em !important;
}

/* guarantee: muted sage on dark */
.pricing-guarantee,
.guarantee-banner {
    background: rgba(52, 199, 123, 0.06) !important;
    border: 1px solid rgba(52, 199, 123, 0.22) !important;
}
.guarantee-title { color: #7ED9A7 !important; }
.guarantee-subtext { color: #9BB8A8 !important; }

/* ---------- Icon tiles: charcoal, off-white glyphs ---------- */
.feature-icon-wrapper,
.evolution-icon,
.flow-icon,
.skill-icon,
.step-icon,
.result-icon,
.criteria-icon,
.coaching-icon,
.enterprise-icon {
    background: var(--noir-3) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-hi) !important;
    box-shadow: none !important;
}
.feature-icon-wrapper i,
.evolution-icon i,
.flow-icon i,
.skill-icon i,
.coaching-icon, .enterprise-icon { color: var(--ink-hi) !important; }

.pricing-icon { background: transparent !important; }

/* muted gradient micro-accents */
.stat-number,
.result-metric,
.metric-after,
.pricing-impact {
    background: var(--brand-gradient-h) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.faq-icon,
.criteria-check,
.check-icon,
.included-item i { color: var(--brand-magenta) !important; }

/* ---------- Journey ---------- */
.journey-progress-line { background: var(--line) !important; }
.journey-progress-active { background: var(--brand-gradient-h) !important; }
.stage-header h3 { color: var(--ink-hi) !important; }
.stage-duration { color: var(--ink-faint) !important; }
.detail-card, .flow-item {
    background: var(--noir-3) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.detail-card:hover, .flow-item:hover { background: #24242B !important; }
.detail-card span, .flow-text span { color: var(--ink-lo) !important; }
.flow-text strong { color: var(--ink-hi) !important; }
.marker-core {
    background: var(--noir-3) !important;
    border: 1px solid var(--line-strong) !important;
}
.marker-core i { color: var(--ink-lo) !important; }
.journey-stage.active .marker-core {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}
.journey-stage.active .marker-core i { color: #131316 !important; }
.marker-ring { border-color: var(--line) !important; }
.journey-stage.active .marker-ring { border-color: rgba(199, 123, 217, 0.35) !important; }

.evolution-card h4, .evolution-card h3 { color: var(--ink-hi) !important; }
.evolution-card p { color: var(--ink-lo) !important; }
.evolution-icon { background: var(--noir-3) !important; }
.evolution-icon i { color: var(--ink-hi) !important; }

/* ---------- Pricing ---------- */
.whats-included-box {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
}
.whats-included-box h3 { color: var(--ink-hi) !important; }
.included-item span { color: var(--ink-lo) !important; }

.pricing-sessions-large { color: var(--ink-hi) !important; }
.pricing-sessions-label, .pricing-timeline { color: var(--ink-lo) !important; }
.pricing-header h3 { color: var(--ink-hi) !important; }
.pricing-amount, .pricing-amount-badge, .price-amount, .offering-price {
    color: var(--ink-hi) !important;
    background: none !important;
    border-color: var(--line-strong) !important;
}
.pricing-amount .amount, .pricing-amount .currency { color: var(--ink-hi) !important; }
.pricing-divider { background: var(--line) !important; }

.outcome-card { background: var(--noir-2) !important; border: 1px solid var(--line) !important; }
.outcome-card.featured { border-color: var(--ink-hi) !important; }
.outcome-number { color: var(--ink-hi) !important; }
.outcome-text, .outcome-note { color: var(--ink-lo) !important; }

/* custom-page pricing & results */
.pricing-features .feature-item span { color: var(--ink-lo) !important; }
.pricing-summary p, .pricing-description { color: var(--ink-lo) !important; }
.plan-badge { color: var(--ink-faint) !important; }
.company-type { color: var(--ink-hi) !important; }
.result-description { color: var(--ink-lo) !important; }
.result-header h3 { color: var(--ink-hi) !important; }
.results-guarantee {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
}
.results-guarantee p { color: var(--ink-lo) !important; }
.results-guarantee strong { color: var(--ink-hi) !important; }
.pricing-features .feature-item i {
    background: var(--brand-gradient) !important;
    color: #131316 !important;
}

/* result-proof internals */
.result-proof-context, .result-proof-quote,
.result-proof-attribution .attribution-role, .metric-before { color: var(--ink-lo) !important; }
.result-proof-attribution .attribution-name { color: var(--ink-hi) !important; }

/* ---------- Who-for columns ---------- */
.who-for-column {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
}
.who-for-column.ready { border-color: var(--line-strong) !important; }
.who-for-column h3 { color: var(--ink-hi) !important; }
.who-for-column li { color: var(--ink-lo) !important; }

.divider-text {
    background: transparent !important;
    color: var(--ink-faint) !important;
}

/* ---------- FAQ: minimal hairline list, no stacked boxes ---------- */
.faq-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.faq-item:hover { background: rgba(255, 255, 255, 0.02) !important; }
.faq-question {
    color: var(--ink-hi) !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
}

/* ---------- Media chrome ---------- */
/* frame styling lives on the rounded player ONLY — a border on the square
   outer container pokes past the rounded corners */
.vsl-video-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.video-player {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
}

/* CTAs paint above any sibling shadows */
.vsl-cta,
.inline-cta,
.pricing-cta-section {
    position: relative;
    z-index: 5;
}
/* click-to-play overlay stays translucent so the Cloudflare poster shows through */
.video-thumbnail {
    background: rgba(0, 0, 0, 0.25) !important;
    border: none !important;
    box-shadow: none !important;
}
.play-button {
    background: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.play-button i { color: #131316 !important; }

/* ---------- Footer & sticky bar ---------- */
.footer {
    background: transparent !important;
    border-top: 1px solid var(--line) !important;
}
.sticky-cta-bar {
    background: rgba(17, 17, 19, 0.92) !important;
    border-top: 1px solid var(--line) !important;
}
.sticky-cta-bar a {
    background: #FFFFFF !important;
    color: #131316 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(157, 107, 250, 0.25) !important;
}
.sticky-cta-bar .sticky-cta-main { color: #131316 !important; }
.sticky-cta-bar .sticky-cta-sub { color: #4A4A52 !important; }

/* ---------- Misc ---------- */
/* stats float free — no card chrome around the numbers */
.top-stat-item,
.journey-stage {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* transparent cutout photo: no shadow halo; bottom dissolves so the crop reads intentional */
.hero-photo,
.hero-photo:hover {
    box-shadow: none !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 98%);
}

/* note banners: quiet charcoal instead of purple tint */
.assessment-note {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
}
.assessment-note p, .assessment-note strong { color: var(--ink-lo) !important; }

/* divider: floating eyebrow text, no line and no boxed background */
.pricing-divider { background: transparent !important; }
.pricing-divider::before { display: none !important; }

.divider-line, .section-divider { background: var(--line) !important; }
.carousel-control {
    background: var(--noir-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-hi) !important;
}
.feature-number {
    background: var(--noir-3) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--ink-hi) !important;
}

::selection { background: rgba(199, 123, 217, 0.28); }