/*
 * .hero-member — Full-width hero banner for the Member Rewards page.
 * Relative positioning creates a stacking context for the layered background image,
 * overlay, and foreground content. The 82vh height with 560px minimum ensures a
 * tall, impactful banner, while flexbox centers the content layer both vertically
 * and horizontally. Padding prevents content from touching the edges.
 */
.hero-member {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 40px;
    box-sizing: border-box;
}

/*
 * .hero-member-bg — Absolutely positioned container that holds the hero background image.
 * Stretching to all four edges ensures the image fills the entire hero area behind the
 * overlay and content layers. z-index: 1 places it at the bottom of the stacking order.
 */
.hero-member-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

/*
 * .hero-member-bg img — The background image itself inside the hero bg container.
 * object-fit: cover scales the image to fill the container without distortion,
 * and object-position: center keeps the focal point of the image centred at all sizes.
 */
.hero-member-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * .hero-member-overlay — A full-bleed overlay layer sitting above the background image.
 * Positioned between the background (z-index: 1) and the content (z-index: 3), it can
 * carry a tint or gradient colour to improve text legibility; currently set to none.
 */
.hero-member-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    background: none;
}

/*
 * .hero-member-content — The foreground content wrapper inside the hero banner.
 * z-index: 3 lifts it above the background and overlay layers. max-width caps the
 * readable line length while full width with left-aligned text mirrors a typical
 * editorial hero layout.
 */
.hero-member-content {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    width: 100%;
    color: #ffffff;
    text-align: left;
}

/*
 * .hero-member-title — Large display headline inside the hero banner.
 * clamp() scales the font fluidly between 3.5rem and 7rem across viewport widths,
 * ensuring impact on large screens without overflowing on small ones. A tight
 * line-height, negative letter-spacing, uppercase transform, and a text-shadow
 * together create bold, readable display type over the background image.
 */
.hero-member-title {
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-family: 'Work Sans', sans-serif;
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 28px 0;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/*
 * .hero-member-title .line-one/.line-two — Forces each headline line onto its own line.
 * display: block overrides the default inline behaviour so the two headline phrases
 * stack vertically, enabling the staggered large-type effect common in display headlines.
 */
.hero-member-title .line-one,
.hero-member-title .line-two {
    display: block;
}

/*
 * .hero-member-title .title-word — Individual word spans within each headline line.
 * Inline on desktop so words flow naturally side-by-side; switched to block on mobile
 * so each word stacks on its own line, matching the one-word-per-line countdown style.
 */
.hero-member-title .title-word {
    display: inline;
}

/*
 * .hero-member-subtext — Supporting body copy beneath the hero headline.
 * A constrained max-width keeps the line length comfortable for reading, while
 * reduced opacity and a subtle text-shadow soften the white text against the
 * image background without hiding it.
 */
.hero-member-subtext {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    max-width: 680px;
    margin: 0 0 28px 0;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/*
 * .hero-member-title .text-yellow — Accent colour utility applied to spans inside the hero title.
 * The yellow (#F8D648) matches the brand's primary highlight colour and is used to
 * emphasise key words within the large display headline.
 */
.hero-member-title .text-yellow {
    color: #F8D648;
}

/*
 * .btn-member-hero — Primary call-to-action button in the hero banner.
 * The yellow background with blue text uses the brand's high-contrast colour pairing.
 * Generous padding, heavy font weight, and a subtle border-radius give the button a
 * solid, prominent appearance. The transition enables a smooth hover animation.
 */
.btn-member-hero {
    display: inline-block;
    background-color: #F8D648;
    color: #1C48AA;
    text-decoration: none;
    padding: 18px 50px;
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 6px;
    transition: transform 0.2s, background-color 0.2s;
}

/*
 * .btn-member-hero:hover — Hover state for the hero CTA button.
 * Darkens the yellow slightly to signal interactivity, and a small upward translateY
 * gives a subtle lift effect that reinforces the clickable affordance.
 */
.btn-member-hero:hover {
    background-color: #e6bd00;
    transform: translateY(-2px);
}

/*
 * @media (max-width: 768px) — Hero section mobile overrides for screens up to 768px wide.
 * Reduces the hero minimum height and padding to fit smaller viewports, then shrinks
 * the hero button's horizontal padding and font size to keep it from spanning the full width.
 * The subtext max-width is relaxed to fill the available column width on narrow screens.
 */
@media (max-width: 768px) {
    .hero-member {
        min-height: 50vh;
        padding: 55px 24px;
        align-items: center;
    }

    .hero-member-content {
        text-align: left;
    }

    .hero-member-title {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .hero-member-title .title-word {
        display: block;
    }

    .hero-member-subtext {
        max-width: 100%;
        font-size: 1.1rem;
    }

    .btn-member-hero {
        display: inline-block;
        max-width: 320px;
        text-align: center;
        padding: 18px 30px;
        font-size: 1.1rem;
    }
}

/*
 * .section-benefits — Full-width section that showcases the member benefits cards.
 * Relative positioning creates a stacking context for the absolute background image
 * and overlay layers. overflow: hidden clips the background image to the section bounds.
 */
.section-benefits {
    position: relative;
    padding: 80px 40px;
    overflow: hidden;
}

/*
 * .benefits-bg-wrapper — Absolutely positioned container for the benefits section background image.
 * Stretches edge-to-edge and sits at z-index: 1 behind all content. It mirrors the same
 * pattern used by the hero background wrapper to create a layered, image-backed section.
 */
.benefits-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

/*
 * .benefits-bg-wrapper img — Background image for the benefits section.
 * object-fit: cover and object-position: center ensure the image fills its container
 * while keeping the image centred regardless of the section's rendered dimensions.
 */
.benefits-bg-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * .benefits-bg-overlay — Semi-transparent white overlay over the benefits background image.
 * The high-opacity white (0.92) effectively washes the image to a near-white surface,
 * preserving a subtle texture while ensuring dark text remains fully legible above it.
 */
.benefits-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.92);
}

/*
 * .benefits-container — Centred content wrapper for the benefits section.
 * z-index: 2 lifts it above the background and overlay. max-width and auto side margins
 * constrain the layout to a comfortable reading width and centre it on wide screens.
 */
.benefits-container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/*
 * .benefits-header — Spacing wrapper for the benefits section heading and intro text.
 * The bottom margin creates visual breathing room between the header copy and the
 * card grid below it.
 */
.benefits-header {
    margin-bottom: 50px;
}

/*
 * .benefits-main-title — Primary heading of the benefits section.
 * The brand blue colour, fluid clamp sizing, and heavy uppercase weight echo the
 * hero headline style. line-height: 1 keeps multi-line headings tightly stacked.
 */
.benefits-main-title {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    line-height: 1;
}

/*
 * .benefits-intro — Introductory paragraph beneath the benefits section title.
 * Centred with auto margins and a restrained max-width, this ensures the copy
 * doesn't stretch too wide on large screens. text-wrap: balance distributes words
 * evenly across lines to avoid short orphaned last lines.
 */
.benefits-intro {
    color: #444;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    text-wrap: balance;
}

/*
 * .benefits-grid — Three-column CSS grid that lays out the benefit cards.
 * repeat(3, 1fr) distributes cards into equal columns, and the gap provides
 * consistent spacing between them. On smaller screens this collapses to a
 * single column via the media query override below.
 */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/*
 * .benefit-card — Individual benefit card within the benefits grid.
 * White background, rounded corners, and a subtle box-shadow lift each card
 * off the section background. Flexbox with column direction and centred alignment
 * stacks the icon, title, and description neatly inside.
 */
.benefit-card {
    background: #ffffff;
    padding: 36px 28px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*
 * .benefit-card-title — Heading text inside each benefit card.
 * A bold, near-black colour and slightly larger font size distinguish the title
 * from the body copy below it. line-height: 1.25 keeps two-line titles compact.
 */
.benefit-card-title {
    color: #111;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 14px 0;
    line-height: 1.25;
}

/*
 * .benefit-card-text — Body copy inside each benefit card.
 * A muted grey colour and comfortable line-height keep the supporting text readable
 * and visually secondary to the card title. margin: 0 removes any default paragraph spacing.
 */
.benefit-card-text {
    color: #555;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

/*
 * @media (max-width: 768px) — Benefits section mobile overrides for screens up to 768px wide.
 * Reduces section padding, collapses the three-column card grid to a single column,
 * and tightens the card's internal padding so it fits comfortably on narrow screens.
 */
@media (max-width: 768px) {
    .section-benefits {
        padding: 50px 20px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0;
        gap: 16px;
    }

    .benefit-card {
        padding: 28px 22px;
    }
}

/*
 * .section-faq — Full-width FAQ section with a light blue background.
 * The soft background colour (#cddff1) visually separates this section from the
 * white benefits section above. Generous padding gives the content room to breathe.
 */
.section-faq {
    background-color: #cddff1;
    padding: 80px 20px;
}

/*
 * .faq-container — Centred wrapper that constrains the FAQ content width.
 * max-width: 800px and auto side margins keep the accordion narrow and readable,
 * preventing question text from spanning the full page on wide screens.
 */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

/*
 * .faq-header — Spacing and alignment wrapper for the FAQ section title and intro text.
 * Centred text alignment and bottom margin create a clean separation between the
 * header block and the accordion list below.
 */
.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

/*
 * .faq-main-title — Primary heading of the FAQ section.
 * Near-black colour and a fluid clamp font size establish prominence without using
 * brand blue, distinguishing the FAQ from the benefits section title above it.
 */
.faq-main-title {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 15px 0;
}

/*
 * .faq-intro — Introductory paragraph beneath the FAQ heading.
 * Muted grey, a comfortable line-height, and a constrained max-width with auto margins
 * keep this copy legible and centred within the FAQ container.
 */
.faq-intro {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/*
 * .faq-intro a — Inline links within the FAQ intro paragraph.
 * Styled in a dark grey with an underline to clearly signal they are clickable,
 * while blending with the surrounding text rather than drawing too much attention.
 */
.faq-intro a {
    color: #444;
    text-decoration: underline;
}

/*
 * .faq-intro a:hover — Hover state for links inside the FAQ intro.
 * Shifts the link colour to brand blue on hover to reinforce interactivity
 * and connect the interaction to the site's primary colour.
 */
.faq-intro a:hover {
    color: #1C48AA;
}

/*
 * .faq-accordion — Outer container for the FAQ accordion list.
 * White background, rounded corners, a light border, and overflow: hidden together
 * give the accordion a card-like appearance with clean clipped edges for child items.
 */
.faq-accordion {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

/*
 * .faq-item — A single question/answer pair inside the accordion.
 * The bottom border visually separates each item from the next, creating a clear
 * row structure within the accordion container.
 */
.faq-item {
    border-bottom: 1px solid #ccc;
}

/*
 * .faq-item:last-child — Removes the bottom border from the final FAQ item.
 * Without this override the last item would show a redundant border that would
 * double-up with the outer accordion container's bottom edge.
 */
.faq-item:last-child {
    border-bottom: none;
}

/*
 * .faq-question — The clickable button that toggles an FAQ answer open or closed.
 * Full-width flexbox layout with space-between justification positions the question
 * text on the left and the expand/collapse icon on the right. Transparent background
 * and no border keep the button visually clean within the accordion rows.
 */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    padding: 22px 28px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    text-align: left;
}

/*
 * .faq-question:hover — Hover state for the FAQ question button.
 * A very light grey background on hover provides a subtle visual cue that the
 * entire row is interactive, without being distracting.
 */
.faq-question:hover {
    background-color: #f9f9f9;
}

/*
 * .faq-question-text — The text span inside the FAQ question button.
 * flex: 1 allows the question text to take up all remaining horizontal space,
 * pushing the icon to the far right regardless of text length.
 */
.faq-question-text {
    flex: 1;
}

/*
 * .faq-icon — The plus/minus toggle icon for each FAQ item.
 * A fixed 22×22 px square with relative positioning acts as the canvas for the
 * two pseudo-element lines that form the plus sign. Flexbox centres the lines
 * within the icon's bounds.
 */
.faq-icon {
    flex-shrink: 0;
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * .faq-icon::before, .faq-icon::after — The two bars that compose the plus-sign icon.
 * Both pseudo-elements are absolutely positioned, dark grey, and given a small
 * border-radius to soften their ends. Together they form a cross shape; the vertical
 * bar (::after) is animated separately to collapse when the item is active.
 */
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: #333;
    border-radius: 2px;
}

/*
 * .faq-icon::before — The horizontal bar of the plus/minus icon.
 * Its wide, short dimensions (18×2.5px) create the horizontal stroke of the cross.
 * This bar remains visible at all times as the static minus component.
 */
.faq-icon::before {
    width: 18px;
    height: 2.5px;
}

/*
 * .faq-icon::after — The vertical bar of the plus/minus icon.
 * Its tall, narrow dimensions (2.5×18px) form the vertical stroke of the cross.
 * The transition on transform and opacity drives the collapse animation when the
 * accordion item is opened.
 */
.faq-icon::after {
    width: 2.5px;
    height: 18px;
    transition: transform 0.2s, opacity 0.2s;
}

/*
 * .faq-item.active .faq-icon::after — Active state for the vertical icon bar.
 * When an FAQ item is open, the vertical bar rotates 90deg (aligning it with the
 * horizontal bar) and fades to zero opacity, effectively turning the plus into a minus
 * to signal that the item can be collapsed.
 */
.faq-item.active .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/*
 * .faq-answer — The collapsible answer panel for each FAQ item.
 * Hidden by default with display: none so answers are only visible when the parent
 * item receives the active class. A light grey background and top border distinguish
 * the answer area from the question row above it.
 */
.faq-answer {
    display: none;
    background-color: #e8e8e8;
    border-top: 1px solid #ccc;
}

/*
 * .faq-answer-inner — Inner padding wrapper for the FAQ answer text.
 * Adds comfortable padding around the answer copy and sets a readable font size
 * and line-height for the response content.
 */
.faq-answer-inner {
    padding: 18px 28px;
    color: #555;
    font-size: 1rem;
    line-height: 1.55;
}

/*
 * .faq-answer-inner p — Paragraph elements inside the FAQ answer.
 * margin: 0 removes the default browser paragraph margin so the answer padding
 * alone controls the spacing, keeping the layout consistent.
 */
.faq-answer-inner p {
    margin: 0;
}

/*
 * .faq-item.active .faq-answer — Reveals the answer panel when an FAQ item is active.
 * Overrides the default display: none with display: block to make the answer visible
 * when the corresponding question button has been toggled open.
 */
.faq-item.active .faq-answer {
    display: block;
}

/*
 * @media (max-width: 768px) — FAQ section and benefit card mobile overrides for screens up to 768px wide.
 * Reduces the FAQ section padding, switches the FAQ title to brand blue with left alignment
 * to better suit a narrow single-column layout, and tightens the question and answer inner
 * padding. Benefit card title and body text sizes are also reduced to fit smaller screens.
 */
@media (max-width: 768px) {
    .section-faq {
        padding: 50px 20px;
    }

    .faq-main-title {
        color: #1C48AA;
        text-align: center;
    }

    .faq-question {
        padding: 20px 18px;
        font-size: 1.05rem;
    }

    .faq-answer-inner {
        padding: 16px 18px;
        font-size: 0.95rem;
    }

    .benefit-card-title {
        font-size: 1.1rem;
    }

    .benefit-card-text {
        font-size: 0.9rem;
    }
}