/* ══════════════════════════════════════════
   FLEXITI HERO
══════════════════════════════════════════ */

/*
 * .hero-flexiti — Outermost wrapper for the Flexiti page hero section.
 * Uses a CSS variable (--bg-desktop) for the background image so the
 * template can swap images without touching CSS. min-height prevents the
 * section from collapsing on short viewports. align-items: stretch forces
 * the inner wrapper to fill the full available height.
 */
.hero-flexiti {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    background-image: var(--bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0 24px 48px;
    box-sizing: border-box;
}


/*
 * .hero-flexiti__inner — Centred content container inside the hero.
 * max-width and auto margins keep content within the layout grid. The
 * generous padding gives breathing room from the viewport edges. flex +
 * align-items: flex-end + justify-content: space-between pins the heading
 * group to the bottom-left and the logo to the bottom-right.
 */
.hero-flexiti__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/*
 * .hero-flexiti__content — Flex column that stacks the heading, subheading,
 * and any other text nodes vertically with consistent spacing between them.
 * max-width caps the text block so long lines don't span the full hero width.
 */
.hero-flexiti__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 620px;
}

/*
 * .hero-flexiti__heading — Large display headline inside the hero.
 * clamp() scales the font-size fluidly between a minimum of 2.8 rem and a
 * maximum of 5.5 rem, keeping it proportional across viewport widths.
 * font-weight: 900 and tight letter-spacing give it a bold, impactful look
 * against the background image.
 */
.hero-flexiti__heading {
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 1.05;
    font-family: 'Work Sans', sans-serif;
    color: #ffffff;
    margin: 0;
}

/*
 * .hero-flexiti__heading-line1 / line2 — Individual <span> elements inside
 * the heading that force a controlled line break, giving the designer precise
 * control over where the heading wraps regardless of viewport width.
 */
.hero-flexiti__heading-line1,
.hero-flexiti__heading-line2 {
    display: block;
}

/*
 * .hero-flexiti__subheading — Secondary descriptor text below the main heading.
 * opacity: 0.92 slightly softens the white so it reads as secondary without
 * losing legibility against the hero background image.
 */
.hero-flexiti__subheading {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.3px;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/*
 * .hero-flexiti__logo — Partner/brand logo displayed in the hero, anchored
 * to the bottom-right of the inner container. flex-shrink: 0 prevents it
 * from being squeezed by the adjacent text block. max-width/max-height with
 * object-fit: contain ensure the image never distorts regardless of its
 * intrinsic dimensions.
 */
.hero-flexiti__logo {
    max-width: 160px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    align-self: flex-end;
}

/* ── Hero Mobile ── */
/*
 * @media (max-width: 767px) — Hero section adjustments for mobile viewports.
 * Swaps the background image to the mobile-optimised variable (--bg-mobile),
 * reduces padding and minimum height, and switches the inner layout from
 * side-by-side to a stacked column so content remains readable on small screens.
 */
@media (max-width: 767px) {
    .hero-flexiti {
        background-image: var(--bg-mobile);
        min-height: 520px;
        padding: 40px 24px 60px;
        align-items: center;
    }

    .hero-flexiti__inner {
        position: static;
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .hero-flexiti__heading {
        font-size: clamp(3rem, 14vw, 5rem);
        font-family: 'Work Sans', sans-serif;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -1px;
        line-height: 1.05;
    }

    .hero-flexiti__heading-line1,
    .hero-flexiti__heading-line2 {
        display: block;
    }

    .hero-flexiti__subheading {
        font-size: 1.1rem;
    }

    .hero-flexiti__logo {
        max-width: 110px;
        position: absolute;
        bottom: 24px;
        right: 24px;
    }
}


/* ══════════════════════════════════════════
   FLEXITI INTRO SECTION
══════════════════════════════════════════ */

/*
 * .flexiti-intro — Introductory content section that sits directly below the
 * hero. White background creates a clean break from the image-heavy hero.
 * Top padding provides space above the heading; bottom padding is intentionally
 * omitted (set to 0) so the following section can control its own spacing.
 */
.flexiti-intro {
    padding: 72px 24px;
    background: #ffffff;
}

/*
 * .flexiti-intro__inner — Centred content column inside the intro section.
 * max-width and auto margins align it with the rest of the page layout.
 * flex-direction: column with a consistent gap stacks the heading, subheading,
 * and CTA button with uniform vertical rhythm.
 */
.flexiti-intro__inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*
 * .flexiti-intro__heading — Section heading for the intro area.
 * Fluid font-size via clamp() keeps the heading proportional at every
 * viewport width. Tight letter-spacing and a high font-weight give it
 * visual authority as the first prominent text after the hero.
 */
.flexiti-intro__heading {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #4a4a4a;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.5px;
    text-wrap: balance;
}

/*
 * .flexiti-intro__subheading — Supporting body-level text beneath the heading.
 * The relaxed line-height (1.6) and muted grey colour mark it as descriptive
 * copy rather than a primary call to action.
 */
.flexiti-intro__subheading {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/*
 * .flexiti-intro__btn — Primary call-to-action button in the intro section.
 * align-self: flex-start prevents the button from stretching to full column
 * width on desktop. The brand pink background (#e8276b) and bold weight make
 * it the most visually prominent interactive element in the section.
 */
.flexiti-intro__btn {
    display: inline-block;
    background: #e8276b;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 4px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.18s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/*
 * .flexiti-intro__btn:hover — Darkens the CTA button background on hover to
 * give clear interactive feedback without any layout shift.
 */
.flexiti-intro__btn:hover {
    background: #c91f5a;
}

/* ── Intro Mobile ── */
/*
 * @media (max-width: 767px) — Intro section adjustments for mobile viewports.
 * Adds bottom padding that is absent on desktop, scales the heading down
 * slightly, and stretches the CTA button to full width so it remains easy
 * to tap on narrow screens.
 */
@media (max-width: 767px) {
    .flexiti-intro {
        padding: 48px 24px 40px;
    }

    .flexiti-intro__heading {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .flexiti-intro__btn {
        width: auto;
        padding: 16px 24px;
    }
}


/* ══════════════════════════════════════════
   FLEXITI PLANS SECTION
══════════════════════════════════════════ */

/*
 * .flexiti-plans — Background-image section that presents the financing plan
 * cards. The image is pinned to the top and sized to 100% width so it acts
 * as a decorative banner above the cards. Bottom padding closes out the
 * section; top padding is handled by the inner wrapper's padding-top offset.
 */
.flexiti-plans {
    background: #f5f5f5;
    padding: 72px 24px;
}

/*
 * .flexiti-plans__inner — Content column centred within the plans section.
 * padding-top: 480px pushes all content below the decorative background
 * image, effectively creating the appearance of content overlapping a banner.
 * flex-direction: column with gap stacks heading, grid, tagline, and button.
 */
.flexiti-plans__inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*
 * .flexiti-plans__heading — Section heading that introduces the plan cards.
 * Matches the typographic style of other section headings (fluid size, heavy
 * weight, tight tracking) to maintain visual consistency across the page.
 */
.flexiti-plans__heading {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #4a4a4a;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.5px;
}

/*
 * .flexiti-plans__heading-line1 / line2 — Block-level <span> elements that
 * force a controlled line break within the section heading.
 */
.flexiti-plans__heading-line1,
.flexiti-plans__heading-line2 {
    display: block;
}

/* ── Cards grid ── */
/*
 * .flexiti-plans__grid — Three-column CSS grid that lays out the plan cards
 * side by side on desktop. Equal column sizing (repeat(3, 1fr)) ensures all
 * cards are the same width. The gap provides consistent spacing between cards.
 */
.flexiti-plans__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/*
 * .flexiti-plan-card — Individual financing plan card container.
 * White background and rounded corners lift each card visually from the
 * section background. flex-direction: column with gap creates consistent
 * vertical spacing between the icon, title, subtitle, and description.
 */
.flexiti-plan-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * .flexiti-plan-card__icon — Wrapper around the plan card's icon image.
 * The extra bottom margin separates the icon from the title below it,
 * giving the icon visual prominence at the top of the card.
 */
.flexiti-plan-card__icon {
    margin-bottom: 8px;
}

/*
 * .flexiti-plan-card__icon img — The icon image itself inside each plan card.
 * Fixed width and height with object-fit: contain ensure all icons occupy
 * the same square footprint without distortion, keeping cards visually aligned.
 */
.flexiti-plan-card__icon img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/*
 * .flexiti-plan-card__title — Bold plan name displayed beneath the card icon.
 * text-align: center keeps the short title visually balanced within the card.
 */
.flexiti-plan-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #3d3d3d;
    margin: 0;
    text-align: center;
}

/*
 * .flexiti-plan-card__subtitle — Secondary label or tagline beneath the card
 * title. Lighter weight than the title but same colour and alignment, acting
 * as a brief clarification of the plan name.
 */
.flexiti-plan-card__subtitle {
    font-size: 0.9375rem;
    color: #3d3d3d;
    margin: 0;
    text-align: center;
}

/*
 * .flexiti-plan-card__desc — Descriptive paragraph at the bottom of each
 * plan card. Smaller font size and muted grey signal that this is supporting
 * detail rather than primary information. Generous line-height aids readability.
 */
.flexiti-plan-card__desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ── Tagline + button ── */
/*
 * .flexiti-plans__tagline — Short promotional text displayed below the plan
 * cards grid. The fluid font-size and relaxed line-height make it readable
 * as a brief supplementary message before the CTA button.
 */
.flexiti-plans__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/*
 * .flexiti-plans__btn — Primary CTA button in the plans section.
 * Mirrors the intro section button in style — brand pink background, bold
 * white text, and align-self: flex-start so it hugs its natural width on desktop.
 */
.flexiti-plans__btn {
    display: inline-block;
    background: #e8276b;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 4px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.18s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/*
 * .flexiti-plans__btn:hover — Darkens the plans CTA button on hover to
 * confirm interactivity with a subtle colour shift.
 */
.flexiti-plans__btn:hover {
    background: #c91f5a;
}

/* ── Plans Mobile ── */
/*
 * @media (max-width: 767px) — Plans section adjustments for mobile viewports.
 * Swaps the background to the mobile image variable, reduces the padding-top
 * offset so the mobile-format image height is respected, collapses the three-
 * column grid to a single column, and stretches the CTA button to full width.
 */
@media (max-width: 767px) {
    .flexiti-plans {
        padding: 48px 24px;
    }

    .flexiti-plans__inner {
        gap: 28px;
    }

    .flexiti-plans__heading {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .flexiti-plans__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .flexiti-plan-card {
        padding: 24px 20px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .flexiti-plans__tagline {
        font-size: 0.9375rem;
    }

    .flexiti-plans__btn {
        width: auto;
        align-self: center;
        padding: 16px 24px;
    }
}

/*
 * @media (min-width: 768px) and (max-width: 1024px) — Plans grid adjustment
 * for tablet-sized viewports. Reduces the three-column grid to two columns
 * so cards are not too narrow on mid-range screen widths.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    .flexiti-plans__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ══════════════════════════════════════════
   FLEXITI FEES SECTION
══════════════════════════════════════════ */

/*
 * .flexiti-fees — Dark-background section that explains the fees associated
 * with Flexiti financing. The deep charcoal (#363d4a) creates strong contrast
 * with white text and pink accents, visually separating it from the white
 * and image-based sections above.
 */
.flexiti-fees {
    background: #363d4a;
    padding: 72px 24px;
}

/*
 * .flexiti-fees__inner — Centred content column inside the fees section.
 * flex-direction: column with gap stacks the heading and the fee items grid
 * with consistent vertical spacing.
 */
.flexiti-fees__inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*
 * .flexiti-fees__heading — Section heading for the fees area.
 * White text against the dark background ensures high contrast. The fluid
 * font-size and tight line-height keep the heading compact above the fee grid.
 */
.flexiti-fees__heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/*
 * .flexiti-fees__grid — Two-column grid that arranges individual fee items
 * side by side. The larger column gap (60px) creates clear horizontal
 * separation between the two columns of fee information.
 */
.flexiti-fees__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
}

/*
 * .flexiti-fee-item__title — Label for each individual fee item.
 * The brand pink colour (#e8276b) draws attention to each fee name and
 * creates visual consistency with CTA buttons elsewhere on the page.
 */
.flexiti-fee-item__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #e8276b;
    margin: 0 0 14px;
    line-height: 1.3;
}

/*
 * .flexiti-fee-item__desc — Description text for each fee item.
 * Semi-transparent white (0.8 opacity) reads as secondary information
 * relative to the pink title above it. Generous line-height aids readability
 * of multi-sentence fee explanations on a dark background.
 */
.flexiti-fee-item__desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin: 0;
}

/* ── Fees Mobile ── */
/*
 * @media (max-width: 767px) — Fees section adjustments for mobile viewports.
 * Reduces vertical padding and collapses the two-column fee grid to a single
 * column so each fee item has enough horizontal space to read comfortably.
 */
@media (max-width: 767px) {
    .flexiti-fees {
        padding: 48px 24px;
    }

    .flexiti-fees__heading {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .flexiti-fees__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ══════════════════════════════════════════
   FLEXITI FAQ SECTION
══════════════════════════════════════════ */

/*
 * .flexiti-faq — Frequently asked questions section with a dark background
 * that matches the fees section, creating a unified dark visual zone at the
 * bottom of the page before the footer.
 */
.flexiti-faq {
    background: #363d4a;
    padding: 0 24px 72px;
}

/*
 * .flexiti-faq__inner — Centred content column inside the FAQ section.
 * Stacks the heading and accordion list vertically with a consistent gap.
 */
.flexiti-faq__inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*
 * .flexiti-faq__heading — Centred section heading for the FAQ area.
 * text-align: center distinguishes it from the left-aligned headings in
 * other sections, giving the FAQ its own visual identity.
 */
.flexiti-faq__heading {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

/*
 * .flexiti-faq__list — Vertical stack of accordion FAQ items.
 * The small gap between items keeps them visually grouped while still
 * providing clear separation between individual questions.
 */
.flexiti-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Accordion item ── */
/*
 * .flexiti-faq__item — Individual FAQ accordion card.
 * White background and rounded corners lift each item off the dark section
 * background. overflow: hidden clips the answer panel to the card's rounded
 * border when it slides open.
 */
.flexiti-faq__item {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
}

/*
 * .flexiti-faq__question — Clickable button row for each FAQ accordion item.
 * width: 100% and display: flex with space-between layout places the question
 * text on the left and the chevron icon on the right. background: none and
 * border: none reset default button styles so the card background shows through.
 */
.flexiti-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #2d3340;
    text-align: left;
    line-height: 1.4;
}

/*
 * .flexiti-faq__question:hover — Subtle translucent dark overlay on the
 * question row when hovered, providing interactive feedback without
 * disrupting the white card background.
 */
.flexiti-faq__question:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* ── Chevron ── */
/*
 * .flexiti-faq__chevron — Container for the CSS-drawn chevron arrow icon.
 * flex-shrink: 0 prevents it from being compressed when question text is long.
 * transition: transform animates the rotation when an item is opened or closed.
 */
.flexiti-faq__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/*
 * .flexiti-faq__chevron::before — The actual chevron arrow, drawn with CSS
 * borders instead of an image or icon font. Two borders on adjacent sides
 * (right and bottom) rotated 45 degrees create a downward-pointing chevron.
 * margin-top: -4px vertically centres the rotated shape within its container.
 */
.flexiti-faq__chevron::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    margin-top: -4px;
}

/*
 * .flexiti-faq__item.is-open .flexiti-faq__chevron — When an accordion item
 * has the .is-open class (toggled by JavaScript), the chevron container
 * rotates 180 degrees to point upward, indicating the item is expanded.
 */
.flexiti-faq__item.is-open .flexiti-faq__chevron {
    transform: rotate(180deg);
}

/*
 * .flexiti-faq__item.is-open .flexiti-faq__chevron::before — Adjusts the
 * vertical offset of the chevron pseudo-element when the accordion is open
 * to keep it visually centred after the 180-degree container rotation.
 */
.flexiti-faq__item.is-open .flexiti-faq__chevron::before {
    margin-top: 4px;
}

/* ── Answer ── */
/*
 * .flexiti-faq__answer — Panel that reveals the answer text when a FAQ item
 * is expanded. The top border visually separates the answer from the question
 * button above it within the same white card.
 */
.flexiti-faq__answer {
    border-top: 1px solid #e5e7eb;
}

/*
 * .flexiti-faq__answer-inner — Inner padding wrapper for the FAQ answer text.
 * Separate from .flexiti-faq__answer so border-top always spans the full
 * card width while the text padding is controlled independently.
 */
.flexiti-faq__answer-inner {
    padding: 18px 24px 22px;
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.7;
}

/* ── FAQ Mobile ── */
/*
 * @media (max-width: 767px) — FAQ section adjustments for mobile viewports.
 * Reduces section padding and slightly decreases the font sizes of the
 * heading and interactive elements so they fit comfortably on narrow screens.
 */
@media (max-width: 767px) {
    .flexiti-faq {
        padding: 0 24px 48px;
    }

    .flexiti-faq__heading {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }

    .flexiti-faq__question {
        padding: 18px 20px;
        font-size: 0.9375rem;
    }

    .flexiti-faq__answer-inner {
        padding: 14px 20px 18px;
    }
}


/* ══════════════════════════════════════════
   FLEXITI PAGE FOOTER SECTION
══════════════════════════════════════════ */

/*
 * .flexiti-page-footer — Dedicated footer for the Flexiti landing page,
 * distinct from the site-wide footer. The dark background continues the
 * charcoal palette of the fees and FAQ sections. A semi-transparent white
 * top border (0.08 opacity) adds a subtle visual divider without harsh contrast.
 */
.flexiti-page-footer {
    background: #363d4a;
    padding: 64px 24px;
}

/*
 * .flexiti-page-footer__inner — Centred content column inside the page footer.
 * Stacks the brand block, tagline, and disclaimer text vertically with
 * generous spacing between them.
 */
.flexiti-page-footer__inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/*
 * .flexiti-page-footer__brand — Wrapper that groups the logo and tagline
 * together as a single branded unit, with a small gap between them.
 */
.flexiti-page-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * .flexiti-page-footer__logo — Logo image in the page footer.
 * display: block removes the default inline-block gap below images.
 * max-width constrains it to a reasonable footer size without stretching.
 */
.flexiti-page-footer__logo {
    max-width: 180px;
    height: auto;
    display: block;
}

/*
 * .flexiti-page-footer__tagline — Branded tagline displayed beneath the logo.
 * Lightweight font-weight (300) and reduced opacity (0.75) intentionally
 * de-emphasise it relative to the logo, presenting it as a supporting label.
 */
.flexiti-page-footer__tagline {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    letter-spacing: 0.01em;
}

/*
 * .flexiti-page-footer__disclaimer — Legal or promotional disclaimer text
 * at the base of the footer. Very small font, heavily reduced opacity (0.45),
 * and a max-width cap ensure it reads as fine print without dominating the
 * footer's visual hierarchy.
 */
.flexiti-page-footer__disclaimer {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.75;
    margin: 0;
    max-width: 960px;
}

/* ── Footer Mobile ── */
/*
 * @media (max-width: 767px) — Page footer adjustments for mobile viewports.
 * Reduces section padding and scales down the logo and tagline so the footer
 * remains compact without feeling crowded on small screens.
 */
@media (max-width: 767px) {
    .flexiti-page-footer {
        padding: 48px 24px;
    }

    .flexiti-page-footer__logo {
        max-width: 140px;
    }

    .flexiti-page-footer__tagline {
        font-size: 1.125rem;
    }

    .flexiti-page-footer__disclaimer {
        font-size: 0.8125rem;
    }
}


/* ══════════════════════════════════════════
   THICKBOX MODAL OVERRIDES (Flexiti apply flow)
══════════════════════════════════════════ */

/* Pin the modal to the top of the viewport so the Flexiti iframe
   has maximum vertical space and doesn't clip on shorter screens. */
#TB_window {
    top: 0 !important;
}

/* The default Thickbox title bar is unnecessary — Flexiti renders
   its own header inside the iframe. */
#TB_title {
    display: none !important;
}

/* Give the iframe container the full height freed by hiding the title. */
#TB_iframeContent {
    height: 100% !important;
}