/* ── Start Free offer band ────────────────────────────────────────────────
   A conversion band that states the free offer plainly (free minutes + free
   level report) and sends the visitor to registration.

   Light, two-column treatment: copy left, product shot right on an organic
   blob. It sits between the (light) ecosystem section and the (dark) AI
   platform section, so it carries hairline rules and a warm off-white ground
   to read as its own band rather than bleeding into the section above.

   Palette is scoped to the custom properties below — change them here to
   re-tint the whole band without touching any rule. They inherit from the
   site-wide theme in main.css so this band stays in step with the rest of the
   page rather than carrying its own colours. */

.free-offer-section {
    --fo-accent: var(--secondary-color, #e13732);
    --fo-ink: var(--primary-color, #0e415b);
    --fo-wash: var(--primary-light, #e8f3f7);
    --fo-accent-wash: rgba(225, 55, 50, 0.10);
    --fo-accent-line: rgba(225, 55, 50, 0.28);

    background: #faf9f7;
    border-top: 1px solid rgba(14, 65, 91, 0.08);
    border-bottom: 1px solid rgba(14, 65, 91, 0.08);
    padding: 92px 24px;
    position: relative;
    overflow: hidden;
}

/* Soft glow, echoing the connect/dr-meddy sections' depth */
.free-offer-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -220px;
    right: -120px;
    background: radial-gradient(circle, rgba(14, 65, 91, 0.09), transparent 70%);
    pointer-events: none;
}

/* Copy stacks in column one; the visual spans both rows in column two. The
   source order (head, visual, body) is also the mobile order, so the small
   screen layout needs no reordering — just a single-column area list. */
.free-offer-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "head visual"
        "body visual";
    align-content: center;
    column-gap: 64px;
    text-align: left;
    color: var(--text-dark, #1a1a1a);
}

.free-offer-head {
    grid-area: head;
    align-self: end;
}

.free-offer-body {
    grid-area: body;
    align-self: start;
}

.free-offer-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fo-accent);
    background: #ffffff;
    border: 1px solid var(--fo-accent-line);
    box-shadow: 0 1px 3px rgba(14, 65, 91, 0.06);
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 24px;
}

.free-offer-title {
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--text-dark, #1a1a1a);
}

/* Brand lockup in the headline: set in caps like the logo, with MED in the
   brand red and TALKS in the primary navy — the rest of the headline stays
   black so the name is the only coloured thing in it. Uppercasing is done in
   CSS rather than in the markup so the DOM text stays "MedTalks" — screen
   readers then say the name instead of spelling it out, and translation keeps
   a normal-cased word. */
.free-offer-brand {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.free-offer-brand-med {
    color: var(--fo-accent);
}

.free-offer-brand-talks {
    color: var(--fo-ink);
}

.free-offer-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4a6573;
    margin: 0 0 32px;
    max-width: 38ch;
}

/* Product shot is a transparent cutout on an organic blob. The blob is a
   separate element behind it — deliberately no border-radius or box-shadow on
   the image itself: both follow the element's rectangular box rather than the
   alpha channel, so they would draw a visible panel around the cutout. */
/* Anchored to the bottom: the cutout's arms are flush with the image's bottom
   edge, so the negative margin cancels the band's bottom padding and lets them
   rise straight out of the section's lower border. */
.free-offer-visual {
    grid-area: visual;
    align-self: end;
    margin-bottom: -92px;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Organic blob behind the cutout, bleeding past the image on all sides. Now
   that the visual is bottom-anchored, the lower bleed falls outside the band
   and overflow:hidden trims it flush with the bottom border — intended, so the
   blob reads as running off the edge rather than floating above it. */
.free-offer-visual::before {
    content: "";
    position: absolute;
    inset: -6% -8% -10%;
    background: var(--fo-wash);
    border-radius: 46% 54% 52% 48% / 48% 44% 56% 52%;
    z-index: 0;
}

.free-offer-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    /* placeholders.css sets a global `img { background-color: #e9ecef }` as a
       broken-image fallback; that grey shows through this cutout's alpha. */
    background: transparent;
}

.free-offer-benefits {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.free-offer-benefits li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #2c4a58;
}

.free-offer-benefits strong {
    color: var(--fo-accent);
    font-weight: 700;
}

.free-offer-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fo-accent-wash);
    color: var(--fo-accent);
    font-size: 1.15rem;
}

.free-offer-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.free-offer-trust {
    font-size: 0.85rem;
    color: #4a6573;
    margin: 0;
}

/* RTL (Arabic) — grid areas mirror automatically under dir=rtl, so only the
   text and flex-start alignments need flipping. */
.free-offer-section[dir="rtl"] .free-offer-inner {
    text-align: right;
}

.free-offer-section[dir="rtl"] .free-offer-actions {
    align-items: flex-end;
}

/* Single column: head, visual, body — the original stacked reading order */
@media (max-width: 900px) {
    .free-offer-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "visual"
            "body";
        row-gap: 36px;
        text-align: center;
        justify-items: center;
    }

    .free-offer-head,
    .free-offer-body {
        align-self: auto;
    }

    /* Stacked, the visual sits above the benefits — drop the bottom bleed so it
       cannot overlap them. */
    .free-offer-visual {
        align-self: auto;
        margin-bottom: 0;
    }

    .free-offer-sub {
        margin-bottom: 0;
        max-width: 46ch;
    }

    .free-offer-benefits {
        text-align: left;
    }

    .free-offer-actions {
        align-items: center;
    }

    .free-offer-section[dir="rtl"] .free-offer-inner {
        text-align: center;
    }

    .free-offer-section[dir="rtl"] .free-offer-actions {
        align-items: center;
    }

    .free-offer-section[dir="rtl"] .free-offer-benefits {
        text-align: right;
    }
}

@media (max-width: 600px) {
    .free-offer-section { padding: 64px 20px; }
    .free-offer-image { max-width: 300px; }
    .free-offer-benefits li { font-size: 1rem; gap: 12px; }
    .free-offer-icon { width: 40px; height: 40px; font-size: 1rem; }
}