/* THE BRAG teaser — homepage.
   ────────────────────────────────────────────────────────────────────────
   Matched to the shopping-list and vitamin-quiz cards it sits above: same
   container, same rounded card, same badge / title / sub / button order, so
   the three read as a row of "MYDAWA helps you with X" pitches rather than
   three different designs.

   It borrows THE BRAG's own colours — ink, sand, the yellow accent — but
   not its typeface. Montserrat is loaded by the BRAG pages themselves and
   pulling a web font onto the homepage for one card would cost a request
   and a layout shift on the page we most want fast.

   The values are literals rather than var(--b-*): those tokens live in
   _brag.css, which this page does not load. */

.brag-teaser-section {
    padding: 8px 0 0;
}

.brag-teaser-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    border: 1px solid #E8E4DC;
    border-radius: 20px;
    background: linear-gradient(135deg, #F5F2EB 0%, #FFFDF6 55%, #FDF6DA 100%);
    padding: 28px 32px;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.brag-teaser-card:hover,
.brag-teaser-card:focus-visible {
    border-color: rgba(237, 197, 26, .75);
    box-shadow: 0 10px 28px rgba(65, 64, 66, .10);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

/* The whole card is the link, so the focus ring belongs to the card. */
.brag-teaser-card:focus-visible {
    outline: 2px solid #414042;
    outline-offset: 3px;
}

.brag-teaser-content {
    flex: 1 1 auto;
    min-width: 0;
}

.brag-teaser-badge {
    display: inline-block;
    border-radius: 999px;
    background: #EDC51A;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #414042;
}

.brag-teaser-title {
    margin: 12px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #414042;
}

.brag-teaser-sub {
    margin: 8px 0 0;
    max-width: 52ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6B6A6C;
}

.brag-teaser-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.brag-teaser-points li {
    border: 1px solid #E8E4DC;
    border-radius: 999px;
    background: #fff;
    padding: 6px 12px;
    font-size: 13px;
    color: #414042;
}

/* Styled as a button, but it is a span: the card itself is the anchor, and a
   link inside a link is not valid markup. */
.brag-teaser-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    border-radius: 999px;
    background: #414042;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.brag-teaser-card:hover .brag-teaser-cta {
    background: #EDC51A;
    color: #414042;
}

.brag-teaser-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #8A8789;
}

.brag-teaser-visual {
    flex: 0 0 auto;
    width: 180px;
    text-align: center;
}

.brag-teaser-visual img {
    width: 100%;
    height: auto;
    max-width: 180px;
}

/* The wordmark is decoration beside the words, and it goes first when space
   runs short. It gives up its column early — each step now carries a sentence,
   and three columns of those need the width more than the logo does. */
@media (max-width: 1080px) {
    .brag-teaser-card {
        gap: 20px;
        padding: 24px 20px;
    }

    .brag-teaser-visual {
        display: none;
    }

    .brag-teaser-title {
        font-size: 21px;
    }
}

/* The first steps of the journey.

   A row of four on a wide card, a stacked list below that. Each carries its
   own rule above it rather than a line drawn between them, so a step that
   wraps to the next row does not leave a connector hanging in the gap.

   Numbered because the order is the point: the free check comes first and
   nothing is paid for until step 2. */
.brag-teaser-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .brag-teaser-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

.brag-teaser-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "num title"
        "num detail";
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
    border-top: 2px solid #EDC51A;
    padding-top: 10px;
}

/* A filled disc rather than a bare digit: the steps now carry a sentence
   each, and a lone "1" beside a paragraph reads as part of the text. */
.brag-teaser-step-n {
    grid-area: num;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #EDC51A;
    font-size: 12px;
    font-weight: 700;
    color: #414042;
}

.brag-teaser-step-t {
    grid-area: title;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #414042;
}

.brag-teaser-step-d {
    grid-area: detail;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6B6A6C;
}

/* Stacked, the steps read as a list and the yellow rule on each one becomes a
   stack of stripes — a hairline separator is enough there. */
@media (max-width: 719px) {
    .brag-teaser-steps li {
        border-top: 1px solid #E8E4DC;
        padding-top: 8px;
    }
}