/* ============================================================================
   OFFER PAGE STYLES — Nightingale Int.
   Custom CSS for sections that can't be expressed in Tailwind alone.
   Processed by PostCSS + autoprefixer + cssnano → built/offer-page.css
   ============================================================================ */

/* ── Bento Grid: radial gradient fade on screenshot ──────────────────────── */

.op-bento-screenshot {
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}

/* ── Sticky Methodology Cards ────────────────────────────────────────────── */

/* Desktop: sticky stacking behavior */
@media (min-width: 768px) {
    .op-approach-header {
        position: sticky;
        top: calc(15vh);
        z-index: 0;
    }
    .op-sticky-card {
        position: sticky;
    }
    .op-sticky-card.is-visible {
        will-change: transform;
    }
}

/* Mobile: clean vertical step list */
@media (max-width: 767px) {
    .op-approach-header {
        position: static;
    }
    .op-approach-cards {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 0 !important;
    }
    .op-sticky-card {
        position: static !important;
        top: auto !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 1.5rem 1rem !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .op-sticky-card:last-child {
        border-bottom: 1px solid #e2e8f0 !important;
    }
    /* Hide images on mobile — text-only for clean flow */
    .op-sticky-card .flex-shrink-0.w-full {
        display: none;
    }
    /* Step title + description sizing */
    .op-sticky-card h3 {
        font-size: 1.25rem !important;
    }
    .op-sticky-card p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }
    /* Fade-in on scroll for each step */
    .op-sticky-card.op-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .op-sticky-card.op-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    /* Step number circle smaller */
    .op-sticky-card .w-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.75rem !important;
    }
}

/* ── Persona Card Transitions ────────────────────────────────────────────── */

.op-persona-container {
    position: relative;
    transition: height 0.35s ease;
}

.op-persona-card {
    will-change: opacity, transform;
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.op-persona-card.is-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* ── Hero PDF link hover ────────────────────────────────────────────────── */
.op-hero-pdf-link:hover { color: rgba(0,0,0,0.8) !important; }

/* ── Intersection Observer Reveal ────────────────────────────────────────── */

.op-reveal {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.op-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Staggered delays for bento cards */
.op-reveal-delay-1 { transition-delay: 0.1s; }
.op-reveal-delay-2 { transition-delay: 0.2s; }
.op-reveal-delay-3 { transition-delay: 0.3s; }

/* ── Domain Icon Grid Items ──────────────────────────────────────────────── */

.op-domain-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s ease;
}

.op-domain-icon--dashed {
    border-style: dashed;
    border-color: #cbd5e1;
}

.op-domain-icon:hover {
    border-color: #94a3b8;
}

/* ── Persona CTA Button ──────────────────────────────────────────────────── */

.op-persona-cta svg {
    transition: transform 0.3s ease;
}

.op-persona-cta:hover svg {
    transform: translateX(3px);
}

/* ── Card Slide — Stacking Carousel ──────────────────────────────────────── */

.op-card-slide-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.op-card-slide-item {
    position: absolute;
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e5e5e5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    transform-origin: top center;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 640px) {
    .op-card-slide-item { padding: 1.5rem; }
}
@media (min-width: 768px) {
    .op-card-slide-item { padding: 2rem; }
}

/* Whitepaper background: responsive min-height */
@media (min-width: 768px) {
    .op-whitepaper-bg {
        min-height: 500px !important;
    }
}

/* Background image wrapper for the download sections */
.op-download-bg {
    border-radius: 1rem;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
    border: 8px solid #e5e5e5;
    overflow: hidden;
}

/* ── Mobile Optimizations ────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Persona section: centered mobile layout */
    .op-persona-container {
        min-height: auto !important;
    }
    .op-persona-card .flex-col {
        gap: 1.25rem !important;
        align-items: center !important;
        text-align: center;
    }
    .op-persona-card img {
        width: 8rem !important;
        border-radius: 50% !important;
    }
    .op-persona-card .flex-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .op-persona-card h3 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    .op-persona-card p.text-slate-600 {
        font-size: 0.9375rem !important;
        margin-bottom: 1.25rem !important;
    }
    /* Toggle buttons: compact on mobile */
    [data-persona-toggle] {
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
    }

    /* Lead form: full-width mobile layout */
    .op-lead-form-card {
        padding: 1.5rem !important;
        max-width: none;
    }
    .op-lead-form-card h3 {
        font-size: 1.25rem !important;
    }
    .op-lead-form-card label {
        font-size: 0.8125rem !important;
    }
    .op-lead-form-card input,
    .op-lead-form-card select {
        font-size: 1rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    .op-lead-form-card .text-base {
        font-size: 0.8125rem !important;
    }
}
/*# sourceMappingURL=offer-page.css.map */