/**
 * Reef Health — Shared content sections (2026 content handoff)
 *
 * Styles for the narrative sections introduced by the September 2026 content
 * handoff: the four differentiators, the in-line before/after comparison
 * tables, the two-audience pillar split, long-form prose bands, the numbered
 * step rows and the per-page closing CTA bands.
 *
 * Deliberately reuses the existing site design language — Poppins headings,
 * Inter body copy, #ee2966 pink, 1280px containers, 80px section rhythm,
 * 16/24px card radii — so these sections read as part of the same site.
 *
 * Every class defined here is namespaced (reef-cs-*, reef-pillar-*,
 * reef-callout-*, reef-compare-*, reef-split-*, reef-prose*, reef-closing-cta*,
 * reef-about-*, reef-validation-*, reef-comp-*) EXCEPT for a short, clearly
 * marked "targeted overrides" run at the end of the file. Those deliberately
 * restyle classes owned by reef-theme.css and internal-pages-styles.css where
 * the new content needed a behaviour the base rule did not provide. Each one
 * names the file and rule it overrides. If you are editing one of those base
 * rules and it is not taking effect, look there.
 *
 * @package Reef_Benefits
 */

/* ===================================
   SHARED PRIMITIVES
   =================================== */
.reef-cs-section {
    padding: 80px 20px;
    background-color: #ffffff;
}

.reef-cs-section--tinted {
    background-color: #f9fafb;
}

.reef-cs-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.reef-cs-inner--narrow {
    max-width: 960px;
}

.reef-cs-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #111827;
    margin: 0 0 20px 0;
}

.reef-cs-heading .reef-accent {
    color: #ee2966;
}

.reef-cs-intro {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0 0 40px 0;
    max-width: 780px;
}

.reef-cs-intro p {
    margin: 0 0 16px 0;
}

.reef-cs-intro p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .reef-cs-heading { font-size: 40px; }
}

@media (min-width: 1024px) {
    .reef-cs-heading { font-size: 46px; }
}

/* ===================================
   FOUR DIFFERENTIATORS (PILLARS)
   =================================== */
/* Stripped to type. The previous treatment — white box, 1px border, 4px pink
   left bar, 16px radius, hover lift — was template furniture that read as
   generated rather than as this brand. A numeral gutter, a hairline between
   items and whitespace now do the separating. */
.reef-pillars {
    display: flex;
    flex-direction: column;
}

.reef-pillar-card {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    column-gap: 14px;
    row-gap: 10px;
    align-items: baseline;
    padding: 28px 0;
    border-top: 1px solid #e5e7eb;
}

/* The first item sits flush under the intro, and the item after a divider is
   already separated by it — neither wants a second rule. */
.reef-pillars > .reef-pillar-card:first-child {
    border-top: 0;
    padding-top: 0;
}

.reef-pillar-divider + .reef-pillar-card {
    border-top: 0;
}

/* Oversized, muted, and set in the same neutral as the hairlines between
   items, so the figures read as part of the rule system rather than as a
   coloured label. Three deliberate choices:
     - letter-spacing: 0 — tracking is for uppercase text; on figures it
       makes "01" read as a label, which is what the old 14px pink version
       did wrong.
     - tabular-nums — 01 and 04 then occupy identical width, so the gutter
       does not jitter down the list.
     - the card's align-items: baseline does the optical alignment, seating
       the figure and the title on a shared baseline rather than aligning
       their boxes. No magic offsets to re-tune when type sizes change.
   Marked aria-hidden in the markup: sequence is already carried by document
   order, so the figure is decorative and its low contrast is not load-bearing. */
.reef-pillar-num {
    grid-column: 1;
    grid-row: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: #e5e7eb;
    -webkit-user-select: none;
    user-select: none;
}

.reef-pillar-title {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #111827;
    margin: 0;
}

.reef-pillar-body {
    grid-column: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

@media (min-width: 768px) {
    .reef-pillar-card {
        grid-template-columns: 5rem 1fr;
        column-gap: 18px;
        padding: 34px 0;
    }
    .reef-pillar-num { font-size: 3.5rem; }
    .reef-pillar-title { font-size: 24px; }
}

/* "And as a result…" divider between pillar 03 and pillar 04 */
.reef-pillar-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 18px;
    color: #ee2966;
    margin: 8px 0;
}

.reef-pillar-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e5e7eb;
}

/* Competitor comparison stat that closes the pillar section */
.reef-pillar-stat {
    margin-top: 40px;
    background: linear-gradient(135deg, #ee2966 0%, #d91456 100%);
    border-radius: 24px;
    padding: 32px 24px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}

.reef-pillar-stat strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

@media (min-width: 768px) {
    .reef-pillar-stat { padding: 40px; font-size: 19px; }
}

/* ===================================
   CALLOUT — the "before/after a real visit" explainer
   Destyled alongside the pillars. A white shadowed card nested inside a
   pillar card was furniture inside furniture; it now reads as an indented
   worked example hanging off pillar 03. Sits in the pillar grid's content
   column so it lines up with the title and body above it.
   =================================== */
.reef-callout-card {
    grid-column: 2;
    background: none;
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: none;
    padding: 18px 0 0;
    margin-top: 6px;
}

.reef-callout-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: #111827;
    margin: 0 0 16px 0;
}

.reef-callout-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
}

/* Before and After sit opposed, each under its own rule. The rule carries the
   tone instead of a filled panel: this section just lost its boxes, and giving
   them back here would undo that. */
.reef-callout-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 2px solid #e5e7eb;
}

.reef-callout-row--before { border-top-color: #d1d5db; }
.reef-callout-row--after  { border-top-color: #ee2966; }

.reef-callout-row dt {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0;
}

.reef-callout-row--after dt,
.reef-callout-row--result dt {
    color: #ee2966;
}

.reef-callout-row dd {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* The money is the argument. Muted on the billed figure, brand on the cash
   price, so the pair reads as a loss and a recovery before a word is read. */
.reef-callout-figure {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #9ca3af;
    margin-top: 6px;
}

.reef-callout-row--after .reef-callout-figure {
    color: #ee2966;
}

.reef-callout-note {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
    margin-bottom: 12px;
}

.reef-callout-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
}

/* The result is the payoff: full width beneath the pair, set a step larger. */
.reef-callout-row--result .reef-callout-text {
    font-size: 17px;
    color: #111827;
}

@media (min-width: 768px) {
    .reef-callout-title { font-size: 18px; }

    .reef-callout-rows {
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        row-gap: 26px;
    }

    .reef-callout-row--result {
        grid-column: 1 / -1;
    }

    .reef-callout-figure { font-size: 2.75rem; }
}

/* ===================================
   BEFORE / AFTER COMPARISON TABLE
   (the Sarah story, rendered in-line)
   =================================== */
.reef-compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    /* Without this, grid stretches both columns to the taller one's height:
       one ~70-word paragraph on the left was inflating to match four steps on
       the right, which is where the empty space came from. */
    align-items: start;
}

/* Same rule-over-label language as the before/after diptych above, so the two
   comparisons on this page read as one system rather than two treatments. */
.reef-compare-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 2px solid #e5e7eb;
}

.reef-compare-col--before { border-top-color: #d1d5db; }
.reef-compare-col--after  { border-top-color: #ee2966; }

.reef-compare-col-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #111827;
    margin: 0;
}

/* The old way is the foil, so it sits back a step from the Reef column. */
.reef-compare-col p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

.reef-compare-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Each step demonstrates one of the four pillars, which the section has always
   claimed but never showed. Numbering them in the pillars' own ghost-numeral
   treatment makes the mapping visible and gives the column its anchor. Pale
   pink rather than the pillars' neutral, because this sits on the tinted
   background where #e5e7eb all but disappears. */
.reef-compare-steps li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 12px;
    align-items: baseline;
}

.reef-compare-step-num {
    grid-column: 1;
    grid-row: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: #f3d3de;
    -webkit-user-select: none;
    user-select: none;
}

.reef-compare-step-text {
    grid-column: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    margin: 0;
}

/* Marked up as <em>, but it names a pillar rather than emphasising anything —
   so no italic, and sentence case rather than another tracked uppercase label. */
.reef-compare-tag {
    grid-column: 2;
    display: block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    color: #ee2966;
}

@media (min-width: 900px) {
    /* Widths follow the content: one paragraph against four steps. */
    .reef-compare-grid {
        grid-template-columns: 2fr 3fr;
        column-gap: 48px;
    }
}

/* ===================================
   TWO-AUDIENCE PILLAR SPLIT
   (For the company / For your staff)
   =================================== */
.reef-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.reef-split-col {
    border-radius: 24px;
    padding: 28px 24px;
}

.reef-split-col--company {
    background-color: #111827;
    color: #ffffff;
}

.reef-split-col--staff {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.06);
}

.reef-split-col-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 22px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.reef-split-col--staff .reef-split-col-title {
    color: #111827;
    border-bottom-color: #e5e7eb;
}

.reef-split-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reef-split-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.reef-split-chip {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    background-color: #ee2966;
    color: #ffffff;
}

.reef-split-col--staff .reef-split-chip {
    background-color: rgba(238, 41, 102, 0.12);
    color: #ee2966;
}

.reef-split-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
}

.reef-split-col--staff .reef-split-text {
    color: #4b5563;
}

.reef-split-text strong {
    font-weight: 600;
    color: #ffffff;
}

.reef-split-col--staff .reef-split-text strong {
    color: #111827;
}

.reef-split-support {
    margin: 32px auto 0;
    max-width: 880px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #4b5563;
}

.reef-split-support strong {
    color: #111827;
    font-weight: 600;
}

@media (min-width: 900px) {
    .reef-split-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .reef-split-col { padding: 40px 36px; }
    .reef-split-col-title { font-size: 22px; }
}

/* ===================================
   LONG-FORM PROSE BAND
   (problem / assurance sections)
   =================================== */
.reef-prose {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.75;
    color: #4b5563;
    max-width: 820px;
}

.reef-prose p {
    margin: 0 0 20px 0;
}

/* Opening hook above the body copy — larger and darker than the paragraphs
   that follow. */
.reef-prose-lead {
    font-size: 19px;
    line-height: 1.6;
    font-weight: 500;
    color: #111827;
}

@media (min-width: 768px) {
    .reef-prose-lead { font-size: 21px; }
}

.reef-prose p:last-child {
    margin-bottom: 0;
}

.reef-prose em {
    font-style: italic;
}

/* ===================================
   NUMBERED STEPS (how it works)
   =================================== */
/* Same treatment as .reef-pillar-num, tuned for the step cards. These sit on
   pink and charcoal cards whose body text is white, so the ghost is white at
   low alpha rather than the light neutral. Stacked above the title instead of
   in a gutter: the cards sit three-across and cannot spare the width. */
.reef-step-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 6px;
    -webkit-user-select: none;
    user-select: none;
}

/* ===================================
   CLOSING CTA BAND (per page)
   =================================== */
.reef-closing-cta {
    padding: 72px 20px;
    /* Starts and ends on #ee2966 so the band meets the pink footer below it
       without a seam, while still carrying the brand gradient's depth. */
    background: linear-gradient(180deg, #ee2966 0%, #d91456 55%, #ee2966 100%);
}

.reef-closing-cta-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.reef-closing-cta-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
}

.reef-closing-cta-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 640px;
}

.reef-closing-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 16px 36px;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #ee2966;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reef-closing-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    color: #d91456;
}

/* Matches the focus treatment the site-wide footer CTA carries. The ring is
   white here because the button sits on the pink band. */
.reef-closing-cta-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* The hero's secondary CTA is a text link, so it gets the brand ring. */
.reef-hero-btn-secondary:focus-visible {
    outline: 2px solid #ee2966;
    outline-offset: 3px;
    border-bottom-color: #ee2966;
}

@media (min-width: 768px) {
    .reef-closing-cta { padding: 88px 20px; }
    .reef-closing-cta-title { font-size: 40px; }
}

/* ===================================
   ABOUT PAGE
   =================================== */
.reef-about-hero {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    padding: 88px 20px 96px;
    position: relative;
    overflow: hidden;
}

.reef-about-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.reef-about-hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 24px 0;
}

.reef-about-hero-title .reef-accent {
    color: #ee2966;
}

.reef-about-hero-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 760px;
}

@media (min-width: 768px) {
    .reef-about-hero { padding: 120px 20px 128px; }
    .reef-about-hero-title { font-size: 48px; }
    .reef-about-hero-sub { font-size: 20px; }
}

@media (min-width: 1024px) {
    .reef-about-hero-title { font-size: 56px; }
}

/* Who we are / Why now — image + prose split */
.reef-about-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.reef-about-split-media img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

/* Grid children need min-width:0 or a long unbroken word forces overflow. */
.reef-about-split-body {
    min-width: 0;
}

@media (min-width: 900px) {
    .reef-about-split { grid-template-columns: 1fr 1fr; gap: 56px; }
    .reef-about-split--reverse .reef-about-split-media { order: 2; }
}

/* ===================================
   BROKERS — validation + compensation
   =================================== */
.reef-validation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}

.reef-validation-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
}

.reef-validation-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    color: #ee2966;
    margin-bottom: 10px;
}

.reef-validation-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
}

@media (min-width: 768px) {
    .reef-validation-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .reef-validation-num { font-size: 40px; }
}

/* Broker compensation callout */
.reef-comp-card {
    margin-top: 8px;
    background-color: #111827;
    border-radius: 28px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.reef-comp-figure {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    color: #ee2966;
}

.reef-comp-figure-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
}

.reef-comp-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 620px;
}

@media (min-width: 768px) {
    .reef-comp-card { padding: 48px 40px; }
    .reef-comp-figure { font-size: 84px; }
}

/* ===========================================================================
   TARGETED OVERRIDES
   Everything below restyles classes owned by reef-theme.css or
   internal-pages-styles.css, rather than defining new ones. Each block says
   which rule it overrides and why.
   =========================================================================== */

/* ===================================
   HOMEPAGE HERO — dual CTA row
   The base theme sets flex-direction/align-items on .reef-hero-new-ctas but
   never turns it into a flex container, so the row needs display + gap now
   that the hero carries a secondary CTA alongside the primary button.
   =================================== */
.reef-hero-new-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}

@media (min-width: 768px) {
    .reef-hero-new-ctas { gap: 20px 32px; }
}

/* ===================================
   BUSINESSES — multi-paragraph prose in the problem and assurance sections
   Both .problem-text-regular and .solution-text-regular ship margin:0, which
   collides now that each section carries more than one paragraph of handoff
   copy — without this the paragraphs run together with no gap.
   =================================== */
.solution-text .solution-text-regular + .solution-text-regular,
.problem-text .problem-text-regular + .problem-text-regular {
    margin-top: 16px;
}

/* ===================================
   PRICING — featured ("Most chosen") tier
   Keeps the existing white-card view and adds a pink outline plus a badge on
   the tier the content handoff flags as most chosen.
   =================================== */
.pricing-plan-card {
    position: relative;
}

.pricing-plan-card--featured {
    border: 2px solid #ee2966;
    box-shadow: 0 10px 30px rgba(238, 41, 102, 0.14);
}

.pricing-plan-card--featured:hover {
    box-shadow: 0 16px 38px rgba(238, 41, 102, 0.22);
}

.plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 20px;
    border-radius: 9999px;
    background-color: #ee2966;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(238, 41, 102, 0.28);
}

/* ===================================
   FOOTER — spacing without the CTA band
   The sitewide CTA band carries the footer's top spacing (margin 24/24/32 plus
   a 240px min-height). Pages that ship their own closing CTA suppress it, so
   the footer needs that spacing back or the link row collides with the pink
   panel's rounded top edge.
   =================================== */
.reef-footer--no-cta {
    padding-top: 48px;
    /* The 24px top radius exists to meet the white page. Directly beneath the
       closing CTA band it would cut two white notches out of a continuous
       pink block instead, so square it off here. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 1024px) {
    .reef-footer--no-cta {
        padding-top: 56px;
    }
}

/* ===================================
   FOUR-CARD GRIDS
   The problem and flip-the-model grids now carry the four points the content
   handoff enumerates. Their desktop rule is repeat(3, 1fr), which would leave
   a single orphaned card on a second row, so four cards get a 2x2 instead.
   =================================== */
@media (min-width: 1024px) {
    .problem-cards-section .problem-cards-grid,
    .flip-model-section .flip-model-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===================================
   HOMEPAGE HERO — video embed
   Used by the hero's TODO markup once the YouTube link lands, so the iframe
   drops straight into the slot the hero image occupies today.
   =================================== */
/* Its own band beneath the hero rather than a box inside the hero's content
   column: the embed gets the full container to itself, and the hero keeps a
   single focal point. Tinted because the hero and the stats band either side
   of it are both white. */
.reef-video-section {
    background-color: #f9fafb;
    padding: 56px 16px;
}

.reef-video-inner {
    max-width: 860px;
    margin: 0 auto;
}

/* Centred: the band is a single centred object, so ranging the type left
   against it would leave the heading floating off one edge. */
.reef-video-head {
    text-align: center;
    margin-bottom: 32px;
}

.reef-video-head .reef-cs-heading {
    margin-bottom: 0;
}


.reef-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: #111827;
}

.reef-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 768px) {
    .reef-video-section { padding: 72px 20px; }
}