/* Custom Integrated Color Architecture */
:root {
    --med-forest-green: #014737;
    /* Deep solid green canvas seen in image_b5a702.jpg */
    --med-bright-green: #00aa8a;
    /* Bright dynamic accent action button background */
    --med-dark-teal: #024b43;
    /* Clinical dark text headers and background */
    --med-bright-mint: #ccfbf1;
    /* Clean soft background split */
}

/* Base Helper Bindings */
.layout-forest-bg {
    background-color: var(--med-forest-green) !important;
}

.layout-mint-bg {
    background-color: var(--med-bright-mint) !important;
}

.text-brand-mid-green {
    color: var(--med-bright-green) !important;
}

.text-brand-dark-teal {
    color: var(--med-dark-teal) !important;
}

/* ==========================================================================
   SECTION 1 & 2: HERO VIEWPORT & ASYMMETRIC CUTOUT MASKS (image_b5a702.jpg / image_b5a6be.png)
   ========================================================================== */
.individual-hero-title {
    font-size: 2.6rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.individual-hero-text {
    font-size: 1.05rem;
    line-height: 1.7;
}

.btn-med-bright-green {
    background-color: var(--med-bright-green) !important;
    border-color: var(--med-bright-green) !important;
    transition: all 0.2s ease-in-out;
}

.btn-med-bright-green:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.btn-med-dark-teal {
    background-color: var(--med-dark-teal) !important;
    border-color: var(--med-dark-teal) !important;
}

/* Top-Right Asymmetrical frame mask matching image_b5a702.jpg */
.individual-hero-mask {
    width: 100%;
    max-width: 540px;
    overflow: hidden;
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 5.5rem !important;
    border-bottom-left-radius: 4rem !important;
    border-bottom-right-radius: 2rem !important;
}

.individual-hero-img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    display: block;
}

/* Top-Left / Bottom-Left Multi-Radius profile matching image_b5a6be.png */
.clinical-section-heading {
    font-size: 1.85rem;
    line-height: 1.35;
}

.approaches-display-mask {
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    border-top-left-radius: 8rem !important;
    border-top-right-radius: 2rem !important;
    border-bottom-left-radius: 8rem !important;
    border-bottom-right-radius: 2rem !important;
}

.approaches-panel-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.clinical-specialty-bullets li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.98rem;
    color: #4b5563;
    line-height: 1.6;
}

.clinical-specialty-bullets li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #000000;
    font-weight: bold;
    font-size: 1.15rem;
    top: -1px;
}

/* ==========================================================================
   SECTION 3: LAYORED CARD OVERLAP ENGINE (image_b5a685.png)
   ========================================================================== */
.translate-booking-card {
    transform: translateY(4.5rem);
    position: relative;
    z-index: 5;
}

.booking-onboarding-card {
    box-shadow: 0 20px 25px -5px rgba(2, 75, 67, 0.08), 0 10px 10px -5px rgba(2, 75, 67, 0.04) !important;
}

.booking-card-title {
    font-size: 1.45rem;
}

.onboarding-steps-list li {
    font-size: 0.98rem;
    line-height: 1.6;
}

.italic-reminder {
    font-style: italic;
    font-size: 0.95rem;
}

.wavy-backdrop-container {
    line-height: 0;
}

/* ==========================================================================
   SECTION 4: MINIMAL CLINICAL FAQS ARCHITECTURE (image_b5a648.png)
   ========================================================================== */
.spacing-top-faq {
    padding-top: 10rem !important;
    /* Spaces card displacement overflow safely */
}

.faq-inner-bounds {
    max-width: 920px;
}

.fs-7 {
    font-size: 0.88rem;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

.faq-question {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.faq-answer {
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 860px;
}

/* ==========================================================================
   RESPONSIVE VIEWPORT BREAKPOINTS
   ========================================================================== */
@media (max-width: 991.98px) {
    .individual-hero-title {
        font-size: 1.95rem;
    }

    .clinical-section-heading {
        font-size: 1.5rem;
    }

    .individual-hero-mask,
    .approaches-display-mask {
        max-width: 100%;
        margin-top: 1.5rem;
        border-radius: 2rem !important;
        /* Responsive collapse standard normalization */
    }

    .translate-booking-card {
        transform: translateY(2.5rem);
    }

    .spacing-top-faq {
        padding-top: 5rem !important;
    }

    .faq-question {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   SHARED THERAPY COMPONENT CLASSES (Design System Compliant)
   ========================================================================== */

/* Hero badge — replaces inline style on all therapy pages */
.therapy-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-brand-green-light);
    font-size: var(--font-xs);
    letter-spacing: 0.05em;
}

/* Sub-text paragraph inside dark hero section */
.therapy-hero-subtext {
    font-size: var(--font-base);
    line-height: 1.7;
}

/* Step label inside session-structure cards */
.ct-step-label {
    font-size: var(--font-sm);
    font-weight: 600;
}

/* Step description inside session-structure cards */
.ct-step-desc {
    font-size: var(--font-xs);
    line-height: 1.5;
    color: var(--text-body-muted);
}

/* Check-circle icon color for CBT condition pills */
.cbt-check-icon {
    color: var(--color-brand-green);
}

/* Duration paragraph */
.cbt-duration-text {
    font-size: var(--font-base);
    line-height: 1.7;
}

/* Generic subtext */
.therapy-subtext {
    font-size: var(--font-base);
}