/* ============================================================================
 * THE BRAG — weight management programme pages.
 *
 * This is a port of the source project's landing page (cecemuhiu/The-Brag,
 * frontend/src/components/landing/*). The composition is theirs, section for
 * section: the numbered section tags, the masked hero with its rotating dashed
 * ring and floating proof card, the scrolling trust marquee, the dark statement
 * rotator, the accent-capped care cards, the zero-padded journey spine, the dark
 * "not for" panel, the dashed "coming soon" cards, the tabbed FAQ accordion.
 *
 * The palette and the type are THEIRS, at the brand owner's request: gold #EDC51A
 * on charcoal #414042 in Montserrat, exactly as the source project defines them in
 * tailwind.config.js and index.css. This page is a BRAG page hosted by MYDAWA
 * rather than a MYDAWA page about BRAG, so it keeps BRAG's identity — which is
 * also why the wordmark in the nav no longer looks like the odd one out.
 *
 * The one MYDAWA thing on the page is the "Powered by" lockup in the nav.
 *
 * Montserrat is a variable family with a true italic, so font-weight works
 * normally and the italics the design leans on are real cuts rather than
 * synthesised obliques. It is loaded from Google Fonts, already allowed by the
 * style-src and font-src rules in Program.cs.
 *
 * Everything is scoped under .brag so nothing here reaches the rest of the site.
 * ========================================================================== */

.brag {
    --b-accent: #EDC51A;
    --b-accent-dark: #d9b418;

    --b-ink: #414042;
    --b-ink-deep: #2E2D2F;
    --b-ink-75: rgba(65, 64, 66, .75);
    --b-ink-70: rgba(65, 64, 66, .70);
    --b-ink-65: rgba(65, 64, 66, .65);
    --b-ink-60: rgba(65, 64, 66, .60);
    --b-ink-55: rgba(65, 64, 66, .55);
    --b-ink-50: rgba(65, 64, 66, .50);
    --b-ink-25: rgba(65, 64, 66, .25);
    --b-ink-20: rgba(65, 64, 66, .20);

    --b-cream: #FAF8F5;
    --b-sand: #F5F2EB;
    --b-line: #E8E4DC;

    /* One family, four weights — the four variables are kept so the rules below
       did not all have to change, but they now differ only by weight. */
    --b-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --b-font-med: var(--b-font);
    --b-font-semi: var(--b-font);
    --b-font-bold: var(--b-font);

    /* Their shadows are long, soft and heavily negative-spread, which is most of
       why their cards sit on the page rather than float above it. */
    --b-shadow-card: 0 24px 50px -38px rgba(46, 45, 47, .40);
    --b-shadow-lift: 0 28px 60px -40px rgba(46, 45, 47, .45);
    --b-shadow-img: 0 40px 80px -40px rgba(46, 45, 47, .45);

    font-family: var(--b-font);
    color: var(--b-ink);
    background: var(--b-cream);
}

.brag *,
.brag *::before,
.brag *::after { box-sizing: border-box; }

.brag :focus-visible {
    outline: 2px solid var(--b-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Bands and containers ────────────────────────────────────────────────── */
.brag-sec { padding: 56px 0; background: var(--b-cream); }
@media (min-width: 640px) { .brag-sec { padding: 80px 0; } }

.brag-sec--sand  { background: var(--b-sand); }
.brag-sec--white { background: #fff; }
.brag-sec--ink   { background: var(--b-ink); color: #fff; }
.brag-sec--tight { padding: 48px 0; }
@media (min-width: 640px) { .brag-sec--tight { padding: 64px 0; } }

/* Hairline-bounded bands, setting the marquee and the white bands apart from the
   cream either side of them. */
.brag-sec--ruled   { border-top: 1px solid var(--b-line); border-bottom: 1px solid var(--b-line); }
.brag-sec--ruled-b { border-bottom: 1px solid var(--b-line); }

/* Matches .mydawa-container, which is what every other page on the site uses: no
   width cap, and the same 15 / 50 / 80px gutters. The source project centres on a
   1280px column, which left this page visibly inset from the rest of the site on a
   wide screen. Line length is not at risk — the text blocks below cap their own
   measure with brag-max-sm/md/lg, so only the grids get wider. */
.brag-wrap { margin: 0 auto; padding: 0 15px; }
@media (min-width: 1200px) { .brag-wrap { padding: 0 50px; } }
@media (min-width: 1800px) { .brag-wrap { padding: 0 80px; } }

/* The reading-width variants keep their caps and stay centred — a questionnaire or
   an FAQ column should not stretch to 1800px just because the page can. */
.brag-wrap--narrow { max-width: 768px; }
.brag-wrap--mid    { max-width: 896px; }

/* Breadcrumbs, directly under the site header and above the section nav. */
.brag-crumbs { padding-top: 18px; padding-bottom: 18px; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.brag .brag-h1 {
    font-family: var(--b-font); font-weight: 600;
    font-size: 44px;
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 0;
    color: var(--b-ink);
}
@media (min-width: 640px) { .brag .brag-h1 { font-size: 58px; } }
@media (min-width: 1024px) { .brag .brag-h1 { font-size: 72px; } }

.brag .brag-h2 {
    font-family: var(--b-font); font-weight: 600;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.022em;
    margin: 0;
    color: var(--b-ink);
}
@media (min-width: 640px) { .brag .brag-h2 { font-size: 46px; } }

/* The final call to action runs a size larger than the rest, as theirs does. */
.brag .brag-h2--xl { font-size: 42px; line-height: 1.03; }
@media (min-width: 640px) { .brag .brag-h2--xl { font-size: 58px; } }
@media (min-width: 1024px) { .brag .brag-h2--xl { font-size: 68px; } }

.brag .brag-h3 { font-family: var(--b-font); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0; }

.brag .brag-lead { font-size: 16px; line-height: 1.65; color: var(--b-ink-75); margin: 0; }
@media (min-width: 640px) { .brag .brag-lead { font-size: 18px; } }

.brag .brag-text { font-size: 14px; line-height: 1.65; color: var(--b-ink-65); margin: 0; }
.brag .brag-note { font-size: 12px; line-height: 1.6; color: var(--b-ink-50); margin: 0; }

.brag-sec--ink .brag-h1,
.brag-sec--ink .brag-h2,
.brag-sec--ink .brag-h3 { color: #fff; }
.brag-sec--ink .brag-lead { color: rgba(255, 255, 255, .70); }
.brag-sec--ink .brag-note { color: rgba(255, 255, 255, .50); }

.brag .brag-i { font-style: italic; }

.brag-max-sm { max-width: 36rem; }
.brag-max-md { max-width: 42rem; }
.brag-max-lg { max-width: 48rem; }

/* Scoped under .brag so these beat the text styles.

   .brag .brag-lead, .brag .brag-text and .brag .brag-note all set margin: 0 at
   two-class specificity, which a bare .brag-mt-5 loses to. So every
   "<p class="brag-lead brag-mt-5">" on these pages has been rendering with no
   space above it at all — the spacing was written, and silently discarded.
   That is why the specialist section reads as one unbroken block. */
.brag .brag-mt-2  { margin-top: 8px; }
.brag .brag-mt-3  { margin-top: 12px; }
.brag .brag-mt-4  { margin-top: 16px; }
.brag .brag-mt-5  { margin-top: 20px; }
.brag .brag-mt-6  { margin-top: 24px; }
.brag .brag-mt-7  { margin-top: 28px; }
.brag .brag-mt-8  { margin-top: 32px; }
.brag .brag-mt-10 { margin-top: 40px; }
.brag .brag-mt-12 { margin-top: 48px; }
.brag .brag-mt-14 { margin-top: 56px; }

/* Kept for anything outside a .brag root — the homepage teaser, for one. */
.brag-mt-4  { margin-top: 16px; }
.brag-mt-5  { margin-top: 20px; }
.brag-mt-6  { margin-top: 24px; }
.brag-mt-7  { margin-top: 28px; }
.brag-mt-8  { margin-top: 32px; }
.brag-mt-10 { margin-top: 40px; }
.brag-mt-12 { margin-top: 48px; }
.brag-mt-14 { margin-top: 56px; }
.brag-center { text-align: center; }

/* ── Section tag: "01 —— LABEL" ──────────────────────────────────────────── */
.brag-tag { display: flex; align-items: center; gap: 12px; }
.brag-tag-n { font-family: var(--b-font); font-weight: 600; font-size: 14px; font-style: italic; color: var(--b-ink); }
.brag-tag-line { height: 1px; width: 40px; background: var(--b-accent); flex: none; }
.brag-tag-label {
    font-family: var(--b-font); font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--b-ink-55);
}
.brag-sec--ink .brag-tag-n { color: var(--b-accent); }
.brag-sec--ink .brag-tag-label { color: rgba(255, 255, 255, .60); }

/* Standalone eyebrow, where the source uses a bare uppercase label. */
.brag-eyebrow {
    display: block;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--b-ink-55);
}

/* ── Accent rule under a headline ────────────────────────────────────────── */
.brag-rule {
    display: block;
    height: 3px;
    width: 96px;
    background: var(--b-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1) .3s;
}
.brag-rule--center { margin-left: auto; margin-right: auto; }
.brag-reveal.is-in .brag-rule { transform: scaleX(1); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.brag .brag-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    cursor: pointer;
    background: var(--b-accent);
    color: var(--b-ink);
    box-shadow: 0 14px 34px -14px rgba(237, 197, 26, .8);
    transition: transform .3s, box-shadow .3s, background-color .3s, border-color .3s;
}
.brag .brag-cta:hover {
    color: var(--b-ink);
    background: var(--b-accent-dark);
    box-shadow: 0 18px 40px -14px rgba(237, 197, 26, .9);
    transform: translateY(-2px);
}
.brag .brag-cta:active { transform: translateY(0); }

/* The prescription hand-off is a secondary action, so it is outlined and fills
   with the accent on hover rather than carrying it from the start. */
.brag .brag-cta--outline {
    background: transparent;
    color: var(--b-ink);
    border: 2px solid var(--b-ink);
    box-shadow: none;
}
.brag .brag-cta--outline:hover {
    background: var(--b-accent);
    border-color: var(--b-accent);
    color: var(--b-ink);
    box-shadow: none;
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
/* Hidden only once something is in place to show it again.

   This hid every section outright and relied on the script removing
   .brag-no-js to keep them visible — the opposite of what its comment claimed,
   because that class comes off at the top of the script while the observer
   that adds .is-in is wired sixty lines later. Anything throwing in between
   left the whole page at opacity 0: a blank screen that reads as a page still
   loading, served by a server that returned the content in full.

   The script opts in now, immediately before wiring the observer, so a failure
   before that point leaves the page visible and readable. */
.brag-animate .brag-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1);
}
.brag-animate .brag-reveal.is-in { opacity: 1; transform: none; }

/* Without script, or where motion is unwelcome, everything is simply present. */
.brag-no-js .brag-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .brag-reveal { opacity: 1; transform: none; transition: none; }
    .brag-rule { transform: scaleX(1); transition: none; }
    .brag-marquee-track { animation: none; }
    .brag-ring { animation: none; }
}

/* ── Grids ───────────────────────────────────────────────────────────────── */
.brag-grid { display: grid; gap: 40px; align-items: center; }
.brag-grid--start { align-items: start; }
@media (min-width: 1024px) {
    .brag-grid--2   { grid-template-columns: 1fr 1fr; gap: 56px; }
    .brag-grid--7-5 { grid-template-columns: 7fr 5fr; gap: 56px; }
    .brag-grid--5-7 { grid-template-columns: 5fr 7fr; gap: 56px; }
    .brag-grid--4-8 { grid-template-columns: 4fr 8fr; gap: 48px; }
}

.brag-cards { display: grid; gap: 20px; }
@media (min-width: 640px) {
    .brag-cards--2 { grid-template-columns: repeat(2, 1fr); }
    .brag-cards--3 { grid-template-columns: repeat(3, 1fr); }
    .brag-cards--4 { grid-template-columns: repeat(2, 1fr); }
    .brag-cards--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .brag-cards--4   { grid-template-columns: repeat(4, 1fr); }
    .brag-cards--5   { grid-template-columns: repeat(5, 1fr); }
    .brag-cards--3lg { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ── Framed images ───────────────────────────────────────────────────────── */
/* The offset accent outline sitting 12px outside the photo is the source's
   signature image treatment; it repeats on the hero, plan, team and note. */
.brag-frame { position: relative; }
.brag-frame::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(237, 197, 26, .4);
    border-radius: 38px;
    pointer-events: none;
}
.brag-frame img {
    display: block;
    width: 100%;
    border-radius: 32px;
    object-fit: cover;
    box-shadow: var(--b-shadow-img);
}
.brag-frame--4x5 img { aspect-ratio: 4 / 5; }
.brag-frame--4x3 img { aspect-ratio: 4 / 3; }
.brag-frame--wide img { aspect-ratio: 1829 / 576; }

/* Tilted portrait, used for the statement and pre-launch photos. */
.brag-tilt { position: relative; max-width: 24rem; margin: 0 auto; transform: rotate(2deg); }
.brag-tilt::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(237, 197, 26, .4);
    border-radius: 29px;
    transform: rotate(-3deg);
    pointer-events: none;
}
.brag-tilt img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 26px; object-fit: cover; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.brag-hero { position: relative; overflow: hidden; padding: 40px 0; }
@media (min-width: 640px) { .brag-hero { padding: 56px 0 64px; } }

/* Soft accent glow, top right, behind everything. */
.brag-hero-glow {
    position: absolute;
    top: -96px;
    right: -10%;
    width: 34rem;
    height: 34rem;
    border-radius: 999px;
    background: rgba(237, 197, 26, .15);
    filter: blur(64px);
    pointer-events: none;
}

.brag-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .brag-hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Each headline line rises out of its own clipped box on load. */
.brag-mask { display: block; overflow: hidden; padding-bottom: 4px; margin-bottom: -4px; }
.brag-mask > span {
    display: block;
    transform: translateY(112%);
    animation: brag-rise 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.brag-mask--2 > span { animation-delay: .15s; }
@keyframes brag-rise { to { transform: translateY(0); } }

/* The second line is italic, with the accent underline drawn under it. */
.brag-underline { position: relative; display: inline-block; font-style: italic; }
.brag-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.04em;
    width: 100%;
    height: .09em;
    background: var(--b-accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: brag-underline .9s cubic-bezier(.22, 1, .36, 1) .9s forwards;
}
@keyframes brag-underline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .brag-mask > span { transform: none; animation: none; }
    .brag-underline::after { transform: scaleX(1); animation: none; }
}

.brag-hero-media { position: relative; max-width: 28rem; margin: 0 auto; }
@media (min-width: 1024px) { .brag-hero-media { margin-right: 0; } }

/* Slowly rotating dashed ring outside the frame. */
.brag-ring {
    position: absolute;
    inset: -24px;
    border: 1px dashed rgba(237, 197, 26, .5);
    border-radius: 999px;
    animation: brag-spin 42s linear infinite;
    pointer-events: none;
}
@keyframes brag-spin { to { transform: rotate(360deg); } }

/* Proof card, overlapping the photo's bottom-left corner on desktop. */
.brag-proof {
    position: absolute;
    bottom: -24px;
    left: -40px;
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    padding: 16px 20px;
    box-shadow: 0 24px 50px -30px rgba(46, 45, 47, .5);
    display: none;
}
@media (min-width: 1024px) { .brag-proof { display: block; } }
.brag-proof-t { display: flex; align-items: center; gap: 8px; font-family: var(--b-font); font-weight: 600; font-size: 14px; margin: 0; }
.brag-proof-d { margin: 4px 0 0; font-size: 12px; color: var(--b-ink-55); }

/* On small screens the same reassurance becomes a pill above the photo. */
.brag-proof-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 28rem;
    margin: 0 auto 20px;
    border: 1px solid var(--b-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    padding: 12px 20px;
    font-family: var(--b-font); font-weight: 600;
    font-size: 12px;
    box-shadow: 0 18px 40px -30px rgba(46, 45, 47, .5);
}
@media (min-width: 1024px) { .brag-proof-chip { display: none; } }

.brag-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--b-accent); flex: none; }

/* ── Trust marquee ───────────────────────────────────────────────────────── */
.brag-marquee { padding: 16px 0; overflow: hidden; }
.brag-marquee-mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.brag-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
    animation: brag-marquee 48s linear infinite;
}
@keyframes brag-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brag-marquee-item { display: flex; align-items: center; gap: 40px; }
.brag-marquee-item > span:first-child { white-space: nowrap; font-size: 20px; font-style: italic; color: var(--b-ink-65); }
@media (min-width: 768px) { .brag-marquee-item > span:first-child { font-size: 24px; } }
.brag-marquee-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--b-accent); flex: none; }

/* ── Generic card ────────────────────────────────────────────────────────── */
.brag-card {
    position: relative;
    height: 100%;
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: #fff;
    padding: 24px;
    box-shadow: var(--b-shadow-card);
}
.brag-card--lg { border-radius: 24px; padding: 28px; }
.brag-card--plain { box-shadow: none; background: rgba(255, 255, 255, .6); }
.brag-card--hover { transition: transform .3s, border-color .3s; }
.brag-card--hover:hover { transform: translateY(-6px); border-color: rgba(237, 197, 26, .6); }

/* The short accent cap on the care and screening cards. */
.brag-card--capped { padding-top: 32px; }
.brag-card--capped::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--b-accent);
}

.brag-card-key {
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--b-ink);
}
.brag-card-key--muted { color: var(--b-ink-60); }
.brag-card-q { margin: 8px 0 0; font-size: 18px; font-style: italic; color: var(--b-ink-70); }

/* ── Icon chips ──────────────────────────────────────────────────────────── */
.brag-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--b-sand);
    color: var(--b-ink);
    transition: background-color .3s, color .3s;
}
.brag-ico svg { width: 20px; height: 20px; }
.brag-ico--lg { width: 48px; height: 48px; border-radius: 16px; background: var(--b-accent); color: var(--b-ink); }
.brag-ico--round { width: 44px; height: 44px; border-radius: 999px; background: var(--b-accent); color: var(--b-ink); }
.brag-ico--sm { width: 32px; height: 32px; border-radius: 10px; }
.brag-ico--sm svg { width: 16px; height: 16px; }
.brag-card--hover:hover .brag-ico--swap { background: var(--b-accent); color: var(--b-ink); }

/* Small filled ticks and crosses in lists. */
.brag-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--b-accent);
    color: var(--b-ink);
}
.brag-mark svg { width: 12px; height: 12px; }
.brag-mark--lg { width: 24px; height: 24px; }
.brag-mark--lg svg { width: 14px; height: 14px; }

/* ── Pills ───────────────────────────────────────────────────────────────── */
.brag-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.brag-pills--center { justify-content: center; }
.brag-pill {
    border: 1px solid var(--b-line);
    border-radius: 999px;
    background: #fff;
    padding: 8px 16px;
    font-family: var(--b-font); font-weight: 500;
    font-size: 14px;
    color: var(--b-ink-75);
}
.brag-pill--cream { background: var(--b-cream); }
.brag-pill--sand { border-color: transparent; background: var(--b-sand); font-size: 12px; color: var(--b-ink-70); padding: 4px 12px; }
.brag-pill--soon {
    border-color: var(--b-ink-25);
    background: transparent;
    font-family: var(--b-font); font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--b-ink-60);
    padding: 4px 12px;
}

/* The coverage note under the cost headline. */
.brag-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(46, 45, 47, .15);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    padding: 8px 16px;
    font-family: var(--b-font); font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--b-ink-70);
}

/* ── Plan: stacked 01/02/03 layers on an accent spine ───────────────────── */
.brag-layers { position: relative; max-width: 36rem; }
.brag-layers::before {
    content: "";
    position: absolute;
    left: 16.8px;
    top: 12px;
    height: calc(100% - 24px);
    width: 1px;
    background: rgba(237, 197, 26, .5);
}
.brag-layer {
    position: relative;
    display: flex;
    gap: 16px;
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: #fff;
    padding: 20px 20px 20px 16px;
    box-shadow: 0 18px 40px -30px rgba(46, 45, 47, .35);
}
.brag-layer + .brag-layer { margin-top: 16px; }
.brag-layer-n {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--b-accent);
    color: var(--b-ink);
    font-family: var(--b-font); font-weight: 600;
    font-size: 14px;
}
.brag-layer-t { font-family: var(--b-font); font-weight: 600; font-size: 16px; margin: 0; }

/* ── Statement rotator (dark) ────────────────────────────────────────────── */
.brag-rotator { min-height: 9rem; }
@media (min-width: 640px) { .brag-rotator { min-height: 11rem; } }

.brag-statement {
    display: none;
    font-family: var(--b-font); font-weight: 500;
    font-size: 32px;
    font-style: italic;
    line-height: 1.15;
    color: var(--b-accent);
    margin: 0;
}
@media (min-width: 640px) { .brag-statement { font-size: 44px; } }
@media (min-width: 1024px) { .brag-statement { font-size: 56px; } }
.brag-statement.is-active { display: block; animation: brag-statement-in .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes brag-statement-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.brag-dots { display: flex; gap: 8px; }
.brag-dots button {
    height: 6px;
    width: 12px;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
    transition: width .3s, background-color .3s;
}
.brag-dots button:hover { background: rgba(255, 255, 255, .5); }
.brag-dots button[aria-selected="true"] { width: 32px; background: var(--b-accent); }

/* ── Care ecosystem ──────────────────────────────────────────────────────── */
/* Three support photos, each nudged out of line, above the cards. */
.brag-care-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 640px) { .brag-care-shots { gap: 20px; } }
.brag-care-shots img {
    display: block;
    width: 100%;
    height: 128px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 20px 40px -28px rgba(46, 45, 47, .5);
}
@media (min-width: 640px) { .brag-care-shots img { height: 176px; } }
@media (min-width: 1024px) { .brag-care-shots img { height: 224px; } }
.brag-care-shots img:nth-child(1) { transform: rotate(-1deg); }
.brag-care-shots img:nth-child(2) { transform: translateY(12px); }
.brag-care-shots img:nth-child(3) { transform: rotate(1deg); }

/* The hairline the three cards hang from. */
.brag-care-row { position: relative; }
.brag-care-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    height: 1px;
    background: rgba(237, 197, 26, .5);
    display: none;
}
@media (min-width: 1024px) { .brag-care-row::before { display: block; } }

.brag-pillar { display: flex; gap: 16px; }
.brag-pillar + .brag-pillar { margin-top: 24px; }
.brag-pillar-t { font-family: var(--b-font); font-weight: 600; font-size: 16px; margin: 0; }

/* ── Journey ─────────────────────────────────────────────────────────────── */
.brag-journey { position: relative; max-width: 48rem; }
.brag-journey::before {
    content: "";
    position: absolute;
    left: 18.4px;
    top: 8px;
    height: calc(100% - 16px);
    width: 1px;
    background: rgba(237, 197, 26, .6);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.brag-journey.is-in::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .brag-journey::before { transform: scaleY(1); transition: none; } }

.brag-journey ol { list-style: none; margin: 0; padding: 0; }
.brag-step { position: relative; display: flex; gap: 20px; padding-left: 4px; }
.brag-step + .brag-step { margin-top: 36px; }

/* Outlined, cream-filled, zero-padded — not a filled dot. */
.brag-step-n {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--b-accent);
    border-radius: 999px;
    background: var(--b-cream);
    font-family: var(--b-font); font-weight: 600;
    font-size: 14px;
    color: var(--b-ink);
}
.brag-step-t { font-family: var(--b-font); font-weight: 600; font-size: 20px; margin: 0; }
.brag-step-d { margin: 6px 0 0; max-width: 36rem; font-size: 15px; line-height: 1.65; color: var(--b-ink-70); }

/* ── Cost ────────────────────────────────────────────────────────────────── */
.brag-price { font-family: var(--b-font); font-weight: 600; font-size: 44px; letter-spacing: -.025em; margin: 16px 0 0; }
.brag-includes { list-style: none; margin: 0; padding: 0; }
.brag-includes li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--b-ink-75); }
.brag-includes li + li { margin-top: 12px; }

/* Where-to-screen chooser. The pressed state is a filled, ink-bordered tile. */
/* Fits the number of options rather than assuming three. The location picker
   has three; the add-on choices have two, and in a fixed three-column grid they
   were squeezed into a third of the width each, wrapping "I'm comfortable
   injecting myself" over four lines. */
.brag-where { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .brag-where { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.brag-where button {
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .3s, background-color .3s, transform .3s;
}
.brag-where button:hover { transform: translateY(-2px); border-color: rgba(237, 197, 26, .6); }
.brag-where button[aria-pressed="true"] { border-color: var(--b-ink); background: var(--b-sand); }
.brag-where button[aria-pressed="true"] .brag-ico { background: var(--b-accent); color: var(--b-ink); }
.brag-where-t { font-family: var(--b-font); font-weight: 600; font-size: 14px; line-height: 1.3; margin: 10px 0 0; }
.brag-where-d { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--b-ink-60); }

/* Consultation tiers, each with its price as a trailing badge. */
.brag-tier {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: #fff;
    padding: 20px;
}
.brag-tier + .brag-tier { margin-top: 16px; }
.brag-tier-t { font-family: var(--b-font); font-weight: 600; font-size: 16px; margin: 0; }
.brag-tier-price {
    flex: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--b-accent);
    color: var(--b-ink);
}
.brag-tier-price--paid { background: var(--b-ink); color: #fff; }

.brag-divider-top { margin-top: 24px; border-top: 1px solid var(--b-line); padding-top: 20px; }

/* ── Not-for panel (dark, inset) ─────────────────────────────────────────── */
.brag-panel {
    overflow: hidden;
    border: 1px solid rgba(46, 45, 47, .1);
    border-radius: 32px;
    background: var(--b-ink-deep);
    color: #fff;
    padding: 32px;
    box-shadow: 0 40px 90px -50px rgba(46, 45, 47, .7);
}
@media (min-width: 640px) { .brag-panel { padding: 48px; } }
@media (min-width: 1024px) { .brag-panel { padding: 56px; } }
.brag-panel .brag-h2 { color: #fff; }
.brag-panel .brag-lead { color: rgba(255, 255, 255, .70); }

.brag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(237, 197, 26, .4);
    border-radius: 999px;
    background: rgba(237, 197, 26, .1);
    padding: 6px 16px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--b-accent);
}
.brag-badge svg { width: 14px; height: 14px; }

.brag-exclusions { list-style: none; margin: 0; padding: 0; }
.brag-exclusions li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}
.brag-exclusions li + li { margin-top: 12px; }
.brag-panel-foot {
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

/* ── After payment ───────────────────────────────────────────────────────── */
.brag-ghost-n { font-family: var(--b-font); font-weight: 600; font-size: 30px; font-style: italic; color: var(--b-ink-25); margin: 0; }

/* ── Experience (not yet live) ───────────────────────────────────────────── */
/* Dashed and unfilled, so it reads as planned rather than available. */
.brag-card--dashed {
    display: flex;
    flex-direction: column;
    border: 2px dashed var(--b-ink-20);
    border-radius: 16px;
    background: rgba(255, 255, 255, .5);
    box-shadow: none;
    padding: 24px;
}

/* ── My Brag (pre-launch) ────────────────────────────────────────────────── */
.brag-prelaunch {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--b-line);
    border-radius: 32px;
    background: #fff;
    padding: 32px;
    box-shadow: 0 36px 80px -50px rgba(46, 45, 47, .45);
}
@media (min-width: 640px) { .brag-prelaunch { padding: 48px; } }
.brag-prelaunch-glow {
    position: absolute;
    top: -64px;
    right: -64px;
    width: 13rem;
    height: 13rem;
    border-radius: 999px;
    background: rgba(237, 197, 26, .15);
    filter: blur(48px);
    pointer-events: none;
}
.brag-prelaunch-aside { border: 1px solid var(--b-line); border-radius: 24px; background: var(--b-sand); padding: 24px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.brag-faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.brag-faq-tabs button {
    border: 1px solid var(--b-line);
    border-radius: 999px;
    background: #fff;
    padding: 8px 16px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--b-ink-60);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.brag-faq-tabs button:hover { border-color: var(--b-accent); }
.brag-faq-tabs button[aria-selected="true"] { background: var(--b-ink); border-color: var(--b-ink); color: #fff; }

.brag-faq-group + .brag-faq-group { margin-top: 40px; }
.brag-faq-group[hidden] { display: none; }
.brag-faq-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--b-ink-50);
}
.brag-faq-cat::before { content: ""; height: 1px; width: 32px; background: var(--b-accent); flex: none; }

.brag-faq-item { border-bottom: 1px solid var(--b-line); }
.brag-faq-item summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 18px 40px 18px 0;
    font-family: var(--b-font); font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--b-ink);
}
.brag-faq-item summary::-webkit-details-marker { display: none; }
.brag-faq-item summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid var(--b-ink-55);
    border-bottom: 2px solid var(--b-ink-55);
    transform: rotate(45deg);
    transition: transform .2s;
}
.brag-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.brag-faq-a { padding: 0 40px 20px 0; }
.brag-faq-a p { margin: 0 0 12px; font-size: 15px; line-height: 1.68; color: var(--b-ink-70); }
.brag-faq-a p:last-child { margin-bottom: 0; }

/* ── Final call to action ────────────────────────────────────────────────── */
.brag-final { position: relative; overflow: hidden; }
.brag-final-glow {
    position: absolute;
    bottom: -160px;
    left: 50%;
    width: 30rem;
    height: 30rem;
    margin-left: -15rem;
    border-radius: 999px;
    background: rgba(237, 197, 26, .1);
    filter: blur(64px);
    pointer-events: none;
}

/* ── Sticky call to action ───────────────────────────────────────────────── */
/* A pill in the corner, not a bar across the page. */
.brag-sticky {
    position: fixed;
    z-index: 40;
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateY(90px);
    opacity: 0;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s;
    pointer-events: none;
}

/* On its own line in the corner, as before — but stopping short of the site's
   WhatsApp button, which is fixed at right:20px, 56px wide, at z-index 9990. The
   92px clears it: the button's own 20px offset, its 56px, and 16px between them.
   Below 640px the pill spans the width instead, and the WhatsApp button has
   already lifted to bottom:84px, so the two never meet. */
@media (min-width: 640px) {
    .brag-sticky { left: auto; right: 92px; bottom: 24px; }
}

.brag-sticky.is-visible { transform: none; opacity: 1; pointer-events: auto; }

.brag .brag-sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: 999px;
    background: var(--b-ink);
    padding: 16px 24px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 18px 40px -16px rgba(46, 45, 47, .7);
    transition: transform .3s;
}
@media (min-width: 640px) { .brag .brag-sticky-btn { width: auto; } }
.brag .brag-sticky-btn:hover { transform: translateY(-2px); color: #fff; }
.brag-sticky-btn .brag-dot { width: 6px; height: 6px; transition: transform .3s; }
.brag-sticky-btn:hover .brag-dot { transform: scale(1.5); }
.brag-sticky-btn svg { width: 16px; height: 16px; color: var(--b-accent); transition: transform .3s; }
.brag-sticky-btn:hover svg { transform: translateX(4px); }

/* ── Programme cards (Weight Management section page) ───────────────────── */
.brag-programmes { display: grid; gap: 20px; }
@media (min-width: 768px) { .brag-programmes { grid-template-columns: repeat(2, 1fr); } }

.brag-programme {
    display: block;
    border: 1px solid var(--b-line);
    border-radius: 24px;
    background: #fff;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--b-shadow-card);
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.brag-programme:hover {
    transform: translateY(-6px);
    border-color: rgba(237, 197, 26, .6);
    box-shadow: var(--b-shadow-lift);
    color: inherit;
}
.brag-programme-t { font-family: var(--b-font); font-weight: 600; font-size: 22px; margin: 10px 0; }
.brag-programme-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--b-accent);
}

/* ── Share row ───────────────────────────────────────────────────────────── */
/* Plain circles that take each platform's own colour only on hover, so the row
   reads as one set rather than as five logos competing for attention. */
.brag-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

.brag .brag-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--b-line);
    border-radius: 999px;
    background: #fff;
    color: var(--b-ink);
    cursor: pointer;
    transition: transform .3s, background-color .3s, color .3s, border-color .3s;
}
.brag .brag-share-btn:hover { transform: translateY(-2px); }
.brag .brag-share-btn svg { width: 20px; height: 20px; }
.brag .brag-share-btn--x svg { width: 16px; height: 16px; }

.brag .brag-share-btn--whatsapp:hover { background: #25D366; border-color: #25D366; color: #fff; }
.brag .brag-share-btn--x:hover        { background: var(--b-ink); border-color: var(--b-ink); color: #fff; }
.brag .brag-share-btn--fb:hover       { background: #1877F2; border-color: #1877F2; color: #fff; }
.brag .brag-share-btn--tg:hover       { background: #229ED9; border-color: #229ED9; color: #fff; }
.brag .brag-share-btn--mail:hover,
.brag .brag-share-btn--copy:hover     { background: var(--b-accent); border-color: var(--b-accent); color: var(--b-ink); }

/* Held for a couple of seconds after a successful copy. */
.brag .brag-share-btn.is-copied { background: var(--b-accent); border-color: var(--b-accent); color: var(--b-ink); }

/* ============================================================================
 * THE BRAG — the journey pages: eligibility, checkout, confirmation, the member
 * guide and the support directory.
 *
 * Same tokens and same design language as the landing page above. These pages are
 * narrower and quieter on purpose: someone part-way through a clinical
 * questionnaire, or reading a decline, does not need a hero.
 * ========================================================================== */

/* ── Flow shell ──────────────────────────────────────────────────────────── */
.brag-flow { min-height: 100vh; background: var(--b-cream); }

.brag-flow-head { border-bottom: 1px solid var(--b-line); background: #fff; }
.brag-flow-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
}
.brag .brag-flow-brand { text-decoration: none; }
.brag .brag-flow-brand .brag-eyebrow { color: var(--b-ink); }

.brag .brag-flow-exit {
    font-family: var(--b-font); font-weight: 500;
    font-size: 14px;
    color: var(--b-ink-60);
    text-decoration: none;
}
.brag .brag-flow-exit:hover { color: var(--b-ink); }

.brag-flow-secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--b-font); font-weight: 600;
    font-size: 12px;
    color: var(--b-ink-60);
}
.brag-flow-secure svg { width: 16px; height: 16px; }

.brag-flow-main { max-width: 36rem; padding-top: 32px; padding-bottom: 96px; }
@media (min-width: 640px) { .brag-flow-main { padding-top: 48px; } }

.brag-flow-card { background: #fff; }

/* ── Progress ────────────────────────────────────────────────────────────── */
.brag-progress { margin-bottom: 24px; }
.brag-progress[hidden] { display: none; }
.brag-progress-track { height: 6px; width: 100%; overflow: hidden; border-radius: 999px; background: var(--b-line); }
.brag-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--b-accent);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.brag-progress-label {
    margin: 10px 0 0;
    font-family: var(--b-font); font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--b-ink-70);
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
/* Every step is in the HTML and hidden, so the questions survive a script
   failure and the clinical wording stays in one reviewable file. */
.brag-step-panel { display: none; }
.brag-step-panel.is-active { display: block; animation: brag-step-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes brag-step-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* Without script every panel would stack, so only the first is shown. */
.brag-no-js .brag-step-panel { display: none; }
.brag-no-js .brag-step-panel[data-step="intro"] { display: block; }

@media (prefers-reduced-motion: reduce) {
    .brag-step-panel.is-active { animation: none; }
}

/* A question is a heading, but it reads as a sentence rather than a title. */
.brag .brag-h3--q {
    font-family: var(--b-font); font-weight: 600;
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--b-ink);
}
@media (min-width: 640px) { .brag .brag-h3--q { font-size: 28px; } }

.brag-intro-note {
    margin: 0;
    border-radius: 16px;
    background: var(--b-sand);
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--b-ink-75);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.brag .brag-input {
    width: 100%;
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: var(--b-cream);
    padding: 15px 20px;
    font-family: var(--b-font);
    font-size: 17px;
    color: var(--b-ink);
    transition: border-color .2s, box-shadow .2s;
}
.brag .brag-input::placeholder { color: var(--b-ink-25); }
.brag .brag-input:focus {
    outline: none;
    border-color: var(--b-accent);
    box-shadow: 0 0 0 3px rgba(237, 197, 26, .25);
}
.brag textarea.brag-input { resize: vertical; min-height: 96px; line-height: 1.6; }
.brag select.brag-input { appearance: none; background-image: none; }

.brag-field-label { display: block; font-family: var(--b-font); font-weight: 500; font-size: 14px; color: var(--b-ink-70); }

.brag-measure { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* BMI, shown back as soon as both numbers are in. */
.brag-bmi {
    margin: 0;
    border-radius: 16px;
    background: var(--b-sand);
    padding: 14px 18px;
    font-size: 14px;
    color: var(--b-ink-75);
}
.brag-bmi[hidden] { display: none; }
.brag-bmi-value { font-family: var(--b-font); font-weight: 600; font-size: 19px; color: var(--b-ink); }
.brag-bmi-note { display: block; margin-top: 2px; font-size: 12px; color: var(--b-ink-55); }

/* ── Options ─────────────────────────────────────────────────────────────── */
.brag-options { display: grid; gap: 12px; }

.brag .brag-option {
    display: block;
    width: 100%;
    border: 1px solid var(--b-line);
    border-radius: 16px;
    background: #fff;
    padding: 16px 20px;
    text-align: left;
    font-family: var(--b-font); font-weight: 500;
    font-size: 16px;
    color: var(--b-ink);
    cursor: pointer;
    transition: border-color .2s, background-color .2s, transform .2s;
}
.brag .brag-option:hover { transform: translateY(-2px); border-color: var(--b-accent); }
.brag .brag-option[aria-pressed="true"] { border-color: var(--b-ink); background: var(--b-sand); }

.brag .brag-option--check { display: flex; align-items: center; gap: 12px; }

.brag-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border: 1px solid var(--b-line);
    border-radius: 7px;
    background: #fff;
    color: transparent;
    transition: background-color .2s, border-color .2s, color .2s;
}
.brag-checkbox svg { width: 14px; height: 14px; }
.brag-option[aria-pressed="true"] .brag-checkbox {
    border-color: var(--b-accent);
    background: var(--b-accent);
    color: var(--b-ink);
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
.brag-ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.brag-ticklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--b-ink-75); }

.brag-mark--xs { width: 17px; height: 17px; margin-top: 2px; }
.brag-mark--xs svg { width: 10px; height: 10px; }

.brag-consent { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.brag-consent li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.65; color: var(--b-ink-75); }
.brag-consent .brag-dot { margin-top: 7px; }

.brag-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .brag-consent-actions { grid-template-columns: 1fr; } }

/* ── Warning ─────────────────────────────────────────────────────────────── */
/* Left-barred rather than boxed in red: it is an instruction to seek care, not
   a validation failure. */
.brag-warning {
    display: flex;
    gap: 14px;
    border-left: 4px solid var(--b-accent);
    border-radius: 0 16px 16px 0;
    background: var(--b-sand);
    padding: 16px 18px;
}
.brag-warning p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--b-ink-75); }
.brag-warning-ico { flex: none; color: var(--b-ink); }
.brag-warning-ico svg { width: 20px; height: 20px; }

/* ── Buttons, extra variants ─────────────────────────────────────────────── */
.brag .brag-cta--block { width: 100%; }

.brag .brag-cta--dark { background: var(--b-ink); color: #fff; box-shadow: none; }
.brag .brag-cta--dark:hover { background: var(--b-ink-deep); color: #fff; box-shadow: none; }
.brag .brag-cta--dark svg { color: var(--b-accent); }

.brag .brag-cta--ghost {
    background: transparent;
    color: var(--b-ink);
    border: 1px solid var(--b-ink-25);
    box-shadow: none;
}
.brag .brag-cta--ghost:hover { background: transparent; border-color: var(--b-ink); color: var(--b-ink); box-shadow: none; }
.brag .brag-cta--ghost svg { color: var(--b-accent); }

.brag .brag-cta svg { width: 16px; height: 16px; }

.brag .brag-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--b-font); font-weight: 500;
    font-size: 14px;
    color: var(--b-ink-55);
    cursor: pointer;
}
.brag .brag-back:hover { color: var(--b-ink); }
.brag .brag-back svg { width: 16px; height: 16px; }
.brag .brag-back[hidden] { display: none; }

/* ── Errors ──────────────────────────────────────────────────────────────── */
/* The one place red is used. Everything else that says no is clinical, and
   dressing a clinical answer as an error would be the wrong tone. */
.brag-error {
    margin: 0;
    border-radius: 12px;
    background: #fdf2f2;
    padding: 12px 16px;
    font-family: var(--b-font); font-weight: 500;
    font-size: 14px;
    color: #9b1c1c;
}
.brag-error[hidden] { display: none; }

/* ── Outcomes ────────────────────────────────────────────────────────────── */
.brag-ico--xl { width: 56px; height: 56px; }
.brag-ico--xl svg { width: 28px; height: 28px; }

.brag-pop { animation: brag-pop .5s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
@keyframes brag-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .brag-pop { animation: none; } }

/* Whether a decline is about timing or permanent, said plainly — come back
   later and never should not look the same to someone reading bad news. */
.brag-permanence {
    display: inline-flex;
    border-radius: 999px;
    background: var(--b-ink);
    padding: 7px 16px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fff;
}
.brag-permanence--temporary { background: var(--b-accent); color: var(--b-ink); }

.brag-reason {
    margin: 0;
    border-radius: 16px;
    background: var(--b-sand);
    padding: 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--b-ink-75);
}
.brag-reason[hidden] { display: none; }

/* You have not been charged deserves to be read, so it is the one green note. */
.brag-affirm {
    margin: 0;
    border: 1px solid rgba(237, 197, 26, .35);
    border-radius: 16px;
    background: rgba(237, 197, 26, .08);
    padding: 16px;
    font-family: var(--b-font); font-weight: 500;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--b-ink);
}

/* ── Checkout ────────────────────────────────────────────────────────────── */
/* One column, always. The payment step used to sit in a second column beside
   the booking, which put the Pay button level with the middle of the page and
   read as two separate things to do. It is one page now: what you are paying
   for, the choices, then how to pay, then Pay. */
.brag-checkout { display: grid; gap: 24px; }

.brag-line-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.brag-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 16px; background: var(--b-sand); padding: 6px; }
.brag .brag-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    padding: 12px 16px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 14px;
    color: var(--b-ink-60);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.brag .brag-tabs button svg { width: 16px; height: 16px; }
.brag .brag-tabs button:hover { color: var(--b-ink); }
.brag .brag-tabs button[aria-selected="true"] { background: var(--b-ink); color: #fff; }

.brag-pay-waiting { border-radius: 16px; background: var(--b-sand); padding: 24px; text-align: center; }
.brag-pay-waiting[hidden] { display: none; }

.brag-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(46, 45, 47, .15);
    border-top-color: var(--b-accent);
    border-radius: 999px;
    animation: brag-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .brag-spinner { animation-duration: 2.4s; } }

/* ── Confirmation ────────────────────────────────────────────────────────── */
.brag-receipt {
    margin: 0;
    border-radius: 16px;
    background: var(--b-sand);
    padding: 24px;
    text-align: left;
    display: grid;
    gap: 12px;
}
.brag-receipt > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-size: 14px; }
.brag-receipt dt { margin: 0; color: var(--b-ink-55); }
.brag-receipt dd { margin: 0; text-align: right; font-family: var(--b-font); font-weight: 600; color: var(--b-ink); }

.brag-handoff {
    display: flex;
    gap: 14px;
    text-align: left;
    border: 1px solid rgba(237, 197, 26, .4);
    border-radius: 16px;
    background: rgba(237, 197, 26, .08);
    padding: 20px;
}

.brag-numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.brag-numbered li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.65; color: var(--b-ink-75); }
.brag-numbered-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--b-accent);
    font-family: var(--b-font); font-weight: 600;
    font-size: 12px;
    color: var(--b-ink);
}

.brag .brag-underlink {
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--b-ink-60);
    text-decoration: underline;
    text-decoration-color: var(--b-accent);
    text-underline-offset: 4px;
}
.brag .brag-underlink:hover { color: var(--b-ink); }

/* ── Support directory ───────────────────────────────────────────────────── */
.brag-badge--light {
    border-color: rgba(237, 197, 26, .45);
    background: rgba(237, 197, 26, .1);
    color: var(--b-ink);
}

.brag-providers { display: grid; gap: 24px; }
@media (min-width: 640px) { .brag-providers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .brag-providers { grid-template-columns: repeat(3, 1fr); } }

.brag-provider { display: flex; flex-direction: column; }
.brag-provider[hidden] { display: none; }

.brag-provider-head { display: flex; align-items: center; gap: 16px; }
.brag-provider-id { min-width: 0; }

.brag-avatar { flex: none; width: 56px; height: 56px; border-radius: 999px; object-fit: cover; }
.brag-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(237, 197, 26, .22);
    font-family: var(--b-font); font-weight: 600;
    font-size: 18px;
    color: var(--b-ink);
}

.brag-provider-loc { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--b-ink-60); }
.brag-provider-loc svg { width: 16px; height: 16px; color: var(--b-accent); flex: none; }

.brag-rates {
    margin: 0;
    border-radius: 12px;
    background: var(--b-cream);
    padding: 10px 16px;
    font-family: var(--b-font); font-weight: 600;
    font-size: 14px;
    color: var(--b-ink);
}

.brag-provider-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--b-line);
}

.brag .brag-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--b-ink-20);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--b-font); font-weight: 700;
    font-size: 12px;
    color: var(--b-ink);
    text-decoration: none;
    transition: border-color .2s, transform .2s, background-color .2s, color .2s;
}
.brag .brag-contact svg { width: 14px; height: 14px; }
.brag .brag-contact:hover { transform: translateY(-2px); border-color: var(--b-ink); color: var(--b-ink); }

.brag .brag-contact--whatsapp { border-color: transparent; background: #25D366; color: #fff; }
.brag .brag-contact--whatsapp:hover { background: #1fb855; border-color: transparent; color: #fff; }

.brag-empty { border: 2px dashed var(--b-ink-20); border-radius: 32px; background: #fff; padding: 48px 24px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.brag-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.brag-modal[hidden] { display: none; }

.brag-modal-backdrop { position: absolute; inset: 0; background: rgba(46, 45, 47, .55); backdrop-filter: blur(2px); }

.brag-modal-panel {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 24px;
    background: #fff;
    padding: 28px;
    box-shadow: 0 40px 90px -40px rgba(46, 45, 47, .6);
}

.brag .brag-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: var(--b-sand);
    color: var(--b-ink);
    cursor: pointer;
}
.brag .brag-modal-close svg { width: 18px; height: 18px; }
.brag .brag-modal-close:hover { background: var(--b-line); }

.brag-form { display: grid; gap: 12px; }
.brag-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .brag-form-row { grid-template-columns: 1fr; } }

.brag-file {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed var(--b-line);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--b-ink-60);
}
.brag-file input[type="file"] { font-size: 12px; min-width: 0; }
.brag-file-state { margin-left: auto; font-family: var(--b-font); font-weight: 600; font-size: 12px; color: var(--b-accent-dark); }

/* Shared by the step reveal on these pages. */
.brag-mt-2 { margin-top: 8px; }

/* ── In-page navigation ──────────────────────────────────────────────────── */
/* Ported from the source's Header.jsx, minus its logo and "powered by MYDAWA"
   lockup — this page sits inside mydawa.com, which already has a header.
Lives under that header rather than replacing it, so the offset is measured at
   runtime into --b-header-h: the site header is position:fixed and changes height
   when it gains .sticky, so a hardcoded number would be wrong half the time. */
.brag {
    --b-header-h: 0px;
    --b-nav-h: 60px;
}

.brag-nav {
    position: sticky;
    top: var(--b-header-h);
    z-index: 20;
    background: rgba(251, 250, 253, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--b-line);
}

.brag-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* On a phone the links scroll sideways rather than collapsing into a second
   hamburger — there is already one in the site header above. */
.brag-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
    mask-image: linear-gradient(to right, #000 92%, transparent);
}
.brag-nav-links::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
    .brag-nav-links {
        gap: 8px;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.brag .brag-nav-link {
    position: relative;
    flex: none;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: var(--b-font); font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    color: var(--b-ink-70);
    text-decoration: none;
    transition: color .2s, background-color .2s;
}
.brag .brag-nav-link:hover { color: var(--b-ink); background: var(--b-sand); }

/* Which section you are actually in. The source has no active state; a nav over a
   page this long is more use with one. */
.brag .brag-nav-link.is-current { color: var(--b-ink); font-family: var(--b-font); font-weight: 600; }
.brag .brag-nav-link.is-current::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--b-accent);
}

.brag .brag-nav-cta { flex: none; }

.brag .brag-cta--sm {
    padding: 11px 20px;
    font-size: 11.5px;
    letter-spacing: .1em;
    box-shadow: 0 10px 26px -12px rgba(237, 197, 26, .9);
}

/* The call to action is the one thing that may not scroll out of reach, so on a
   narrow screen it stays and the links scroll under it. */
@media (max-width: 560px) {
    .brag .brag-nav-cta { padding: 10px 14px; font-size: 10.5px; }
}

/* Anchored sections stop below both headers instead of under them. */
.brag [id] { scroll-margin-top: calc(var(--b-header-h) + var(--b-nav-h) + 16px); }

/* The landing page's sticky corner pill and this bar would otherwise both be
   offering the same action at the same moment. */
.brag-nav ~ * .brag-sticky { z-index: 19; }

/* What actually makes the bar above stay put.

   position:sticky was already declared on .brag-nav and did nothing, because body
   carries overflow-x:hidden site-wide. A box that clips on one axis becomes its own
   scroll container on the other, and a sticky descendant then pins to that box rather
   than to the viewport — so it scrolled away with the page.

   clip clips exactly the same way but creates no scroll container, which is the whole
   difference. The cart and checkout pages already do this; scoped with :has so no other
   page's horizontal clipping changes. */
html:has(.brag), body:has(.brag) { overflow-x: clip !important; overflow-y: visible !important; }

/* ── The programme's mark ────────────────────────────────────────────────── */
/* Left in THE BRAG's own gold rather than recoloured to our green.
 *
 * A logo is an identity, not a theme colour: host sites do not normally repaint
 * the marks of the brands they carry, and a recoloured mark would no longer match
 * the programme's own site, its print or its social. So the gold stays.
 *
 * It does mean the one gold thing on the page is the mark, which is a brand
 * question rather than a CSS one — if THE BRAG's identity is gold, the page
 * palette is worth revisiting rather than the logo. Raised with the team.
 */
.brag .brag-nav-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding-right: 16px;
    margin-right: 4px;
    border-right: 1px solid var(--b-line);
    text-decoration: none;
}
.brag .brag-nav-brand img {
    display: block;
    width: auto;
    height: 34px;
}
@media (min-width: 900px) {
    .brag .brag-nav-brand img { height: 48px; }
}

/* On a phone the links already scroll sideways; the mark would push the call to
   action off the row entirely, and the page title carries the name anyway. */
@media (max-width: 599px) {
    .brag .brag-nav-brand { display: none; }
}

/* The flow pages carry the same mark where they previously had the name set as
   type, so the questionnaire and the checkout look like the same programme. */
.brag .brag-flow-brand img {
    display: block;
    width: auto;
    height: 30px;
}
@media (min-width: 640px) {
    .brag .brag-flow-brand img { height: 36px; }
}

/* ── Nav proportions and the MYDAWA endorsement ──────────────────────────── */
/* Sized to the source's own header rather than the compact bar this started as:
   the mark reads as a brand there, not as an icon. */
.brag-nav-inner {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
}
@media (min-width: 900px) {
    .brag-nav-inner { gap: 18px; padding-top: 18px; padding-bottom: 18px; }
}

.brag .brag-nav-brand {
    padding-right: 18px;
    margin-right: 0;
}

/* The call to action takes the leftover room, which pushes the endorsement to the
   right edge and keeps the links tight against the mark — the arrangement in the
   source's header. */
.brag .brag-nav-cta { margin-right: auto; }

.brag-endorse {
    display: none;
    align-items: center;
    gap: 12px;
    flex: none;
    padding-left: 18px;
    border-left: 1px solid var(--b-line);
}
@media (min-width: 1100px) { .brag-endorse { display: flex; } }

.brag-endorse-label {
    font-family: var(--b-font); font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    white-space: nowrap;
    color: var(--b-ink-50);
}

.brag-endorse img {
    display: block;
    width: auto;
    height: 34px;
}

/* The links scroll under a mark that now takes real width, so on anything narrow
   the mark goes and the links get the room back. */
@media (max-width: 699px) {
    .brag .brag-nav-brand { display: none; }
}
@media (min-width: 700px) and (max-width: 899px) {
    .brag .brag-nav-brand { padding-right: 12px; }
}

/* ── What the doctor will look at ─────────────────────────────────────────
   Shown on the concern outcome, which is a pass with reading attached rather
   than a rejection. Styled as notes, not warnings: no red, no alert icons.
   Under the relaxed rules these are the things the screening exists to answer,
   and a patient who has just been told they can book should not be met by a
   list that looks like a diagnosis. */
.brag-concerns {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    display: grid;
    gap: 12px;
}

.brag-concern {
    position: relative;
    border-left: 3px solid var(--b-accent);
    border-radius: 0 10px 10px 0;
    background: var(--b-sand);
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--b-ink-75);
}

@media (min-width: 992px) {
    .brag-concern {
        font-size: 15.5px;
        padding: 16px 20px;
    }
}

/* ── Screening history ────────────────────────────────────────────────────
   What a returning customer has already done. Rows rather than cards: this is
   a record to scan, not a set of things to choose between, and the newest is
   the one they came for. */
.brag-history {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.brag-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--b-line);
    border-radius: 12px;
    background: var(--b-sand);
    padding: 16px 18px;
    text-align: left;
}

.brag-history-date {
    margin: 0;
    font-family: var(--b-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--b-ink);
}

.brag-history-outcome {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--b-ink-70);
}

.brag-history-row .brag-note {
    margin-top: 4px;
}

/* The booking link only appears on screenings that passed, so it should not
   stretch to the full width the block CTA uses elsewhere. */
.brag-history-row .brag-cta--sm {
    flex: none;
}

@media (max-width: 575.98px) {
    .brag-history-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Each history row opens, and may also offer booking. Stacked on a phone so
   neither action is a thumb-width target next to the other. */
.brag-history-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.brag-history-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--b-font);
    font-weight: 700;
    font-size: 14px;
    color: var(--b-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.brag-history-open svg { width: 14px; height: 14px; }

/* ── A past screening, in full ────────────────────────────────────────────
   Question above answer rather than side by side: the questions are long, and
   a two-column layout would set a clinical question in a narrow gutter. */
.brag-qa {
    margin: 0;
    display: grid;
    gap: 18px;
}

.brag-qa-row {
    border-left: 3px solid var(--b-line);
    padding-left: 16px;
}

.brag-qa-row dt {
    font-size: 15px;
    line-height: 1.5;
    color: var(--b-ink-70);
}

.brag-qa-row dd {
    margin: 6px 0 0;
    font-family: var(--b-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--b-ink);
}

/* ── Reduce what you pay ──────────────────────────────────────────────────
   One row per kind of credit, in the basket checkout's shape: a checkbox, the
   name, and what is available underneath. Rows rather than tiles because
   these are not alternatives — a customer may take both. */
.brag-credit {
    display: grid;
    gap: 10px;
}

.brag-credit-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--b-line);
    border-radius: 14px;
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .25s, background-color .25s;
}

.brag-credit-row:hover {
    border-color: rgba(237, 197, 26, .6);
}

.brag-credit-row:has(input:checked) {
    border-color: var(--b-ink);
    background: var(--b-sand);
}

.brag-credit-row input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--b-ink);
}

.brag-credit-text {
    display: grid;
    gap: 2px;
}

.brag-credit-title {
    font-family: var(--b-font);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--b-ink);
}

.brag-credit-sub {
    font-size: 13px;
    line-height: 1.45;
    color: var(--b-ink-60);
}

/* "KES 7,000" is one thing to read, so it stays on one line rather than
   breaking after the currency. */
.brag-price {
    white-space: nowrap;
}

/* Option tiles wide enough for their own labels. At 190px "At a MYDAWA
   pharmacy" and "I'd like a nurse to help (+KES 500)" broke over two lines;
   220px fits three across the 58rem column and still drops to one per row on
   a phone. */
@media (min-width: 640px) {
    .brag-where { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* The pay button stands on its own now rather than inside a payment card —
   the page is one run of sections and this is what ends it. */
.brag-pay {
    margin-top: 8px;
}

/* The basket warning's two actions. The panel itself is the shared .brag-modal,
   so only the button row needs saying.

   No colour on the panel and no error red anywhere: nothing has gone wrong and
   nothing has been lost yet — this is a choice being offered, and red would read
   as a failure the customer has to fix. */
.brag-cart-warn-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Both actions go full width on a phone, so neither is the one hit by accident —
   one of them empties a basket. */
@media (max-width: 560px) {
    .brag-cart-warn-acts > * { flex: 1 1 100%; text-align: center; }
}

/* Checkout's option tiles size to their own labels.

   A grid of equal columns decides the width first and makes the words fit
   afterwards, which is how "At a MYDAWA pharmacy" and "Add a specialist
   consultation (+KES 5,000)" ended up broken over two lines — raising the
   minimum only moved the width at which it happened. Flex sizes each tile to
   its content instead, so the label sets the width and wraps to the next row
   when the row is full rather than mid-phrase.

   Desktop only. On a phone the tiles are one per row and a long label has
   nowhere to go but onto a second line. */
@media (min-width: 640px) {
    #bragWhere,
    #bragInjection,
    #bragSpecialist {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    #bragWhere > button,
    #bragInjection > button,
    #bragSpecialist > button {
        flex: 1 1 auto;
    }

    #bragWhere .brag-where-t,
    #bragInjection .brag-where-t,
    #bragSpecialist .brag-where-t {
        white-space: nowrap;
    }
}

/* ── How much credit to spend ─────────────────────────────────────────────
   "Use all" or a custom amount, the same two choices the basket's checkout
   offers. Folded away until the kind of credit is actually ticked — an
   unticked row is a question the customer has not reached yet. */
.brag-credit-opt {
    border: 1px solid var(--b-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .25s, background-color .25s;
}

.brag-credit-opt:hover { border-color: rgba(237, 197, 26, .6); }
.brag-credit-opt.is-open { border-color: var(--b-ink); background: var(--b-sand); }

/* The row inside an option carries its own border no longer — the wrapper has it. */
.brag-credit-opt .brag-credit-row {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.brag-credit-body {
    display: none;
    padding: 0 16px 14px 46px;
}

.brag-credit-opt.is-open .brag-credit-body { display: block; }

.brag-credit-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--b-ink);
    cursor: pointer;
}

.brag-credit-choice input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    accent-color: var(--b-ink);
}

/* The amount field appears with the custom choice, not before it. */
.brag-credit-amount { display: none; align-items: center; gap: 8px; margin-top: 8px; }
.brag-credit-opt.is-custom .brag-credit-amount { display: flex; }

.brag-credit-amount input {
    width: 130px;
    border: 1px solid var(--b-line);
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--b-ink);
}

.brag-credit-amount input:focus { outline: none; border-color: var(--b-ink); }
.brag-credit-amount span { font-size: 13px; color: var(--b-ink-60); }

.brag-credit-error { margin: 6px 0 0; font-size: 12.5px; color: #c0392b; }
.brag-credit-error[hidden] { display: none; }

/* ── Switch banner ────────────────────────────────────────────────────────
   The one panel on the page that is light.

   It reused .brag-panel, which is the dark statement panel, and that put a
   reassuring aside in the same voice as the page's assertions. The source
   gives it a sand-to-gold gradient, a gold edge, a blurred gold glow behind
   the top-right corner and the CTA beside the words instead of beneath them. */
.brag-switch {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(237, 197, 26, .3);
    border-radius: 32px;
    background: linear-gradient(135deg, var(--b-sand) 0%, var(--b-cream) 55%, rgba(237, 197, 26, .15) 100%);
    padding: 32px;
    box-shadow: 0 30px 70px -52px rgba(46, 45, 47, .55);
}

@media (min-width: 640px) { .brag-switch { padding: 40px; } }

/* Sits behind the content and takes no clicks. */
.brag-switch-glow {
    position: absolute;
    top: -80px;
    right: -64px;
    width: 224px;
    height: 224px;
    border-radius: 50%;
    background: rgba(237, 197, 26, .2);
    filter: blur(48px);
    pointer-events: none;
}

.brag-switch-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .brag-switch-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
}

.brag-switch-text { max-width: 42rem; }

/* The CTA keeps its own width rather than stretching across the panel. */
.brag-switch-cta { flex: none; }

/* A white pill on a light panel, where .brag-eyebrow is drawn for a dark one. */
.brag-switch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--b-ink-20);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    padding: 6px 14px;
    font-family: var(--b-font-bold);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--b-ink-70);
}

/* The tracking belongs on the text, not the pill. Letter-spacing adds its gap
   after the last character as well, so spacing the whole pill padded the right
   side by an extra .16em and left the words sitting visibly off-centre inside
   it. The negative margin takes that trailing gap back. */
.brag-switch-eyebrow > span {
    letter-spacing: .16em;
    margin-right: -.16em;
}

.brag-switch-eyebrow svg {
    flex: none;
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

/* ── Lab-test step ────────────────────────────────────────────────────────
   The one question that explains itself before it asks. It only appears for
   someone switching from an injection they are already on, so the note says
   why they are being asked something the other steps did not ask. */
.brag-step-note {
    border-radius: 16px;
    background: var(--b-sand);
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--b-ink-75);
}

/* An option with its own reassurance underneath. Every answer here is a fine
   answer, and saying so on the button is what stops it reading as a test. */
.brag-option--stacked {
    display: block;
    text-align: left;
}

.brag-option-t {
    display: block;
    font-weight: 600;
}

.brag-option-d {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--b-ink-55);
}

.brag-option[aria-pressed="true"] .brag-option-d { color: var(--b-ink-65); }

/* ── Share your brag ──────────────────────────────────────────────────────
   The opener is a link, not a button: it sits under a CTA and must not
   compete with it. */
.brag-storylink {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--b-ink-60);
    text-decoration: underline;
    text-decoration-color: var(--b-accent);
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color .25s;
}

.brag-storylink:hover { color: var(--b-ink); }

.brag-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.brag-modal[hidden] { display: none; }

.brag-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(46, 45, 47, .6);
    backdrop-filter: blur(3px);
}

.brag-modal-panel {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--b-line);
    border-radius: 28px;
    background: var(--b-cream);
    padding: 28px;
    box-shadow: 0 40px 90px -40px rgba(46, 45, 47, .6);
}

@media (min-width: 640px) { .brag-modal-panel { padding: 36px; } }

.brag-modal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--b-line);
    border-radius: 50%;
    background: #fff;
    color: var(--b-ink-60);
    cursor: pointer;
}

.brag-modal-x svg { width: 16px; height: 16px; }
.brag-modal-x:hover { color: var(--b-ink); border-color: var(--b-ink-25); }

.brag-field { display: block; margin-top: 14px; }

.brag-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b-ink-75);
}

.brag-field input,
.brag-field textarea {
    width: 100%;
    border: 1px solid var(--b-line);
    border-radius: 12px;
    background: #fff;
    padding: 11px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--b-ink);
    resize: vertical;
}

.brag-field input:focus,
.brag-field textarea:focus { outline: none; border-color: var(--b-accent); }

.brag-field-note { display: block; margin-top: 6px; font-size: 12px; color: var(--b-ink-55); }

.brag-field-row { display: grid; gap: 12px; }
@media (min-width: 420px) { .brag-field-row { grid-template-columns: 1fr 1fr; } }

/* ── The specialist's qualifications ──────────────────────────────────────
   A real list, with a marker. Each line is a credential, and without one
   they read as a run of short sentences that happen to be stacked.

   The marker is a small gold disc rather than a tick: a tick means "included"
   elsewhere on this page, and these are not things the customer gets. */
.brag-creds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.brag-creds li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--b-ink-75);
}

.brag-creds li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b-accent);
}

/* ── One question, one screen ─────────────────────────────────────────────
   The screening is a sequence of single questions, and a question the reader
   has to scroll to finish reads as longer than it is — on a form about their
   weight and their health, where the whole design is meant to feel brief.

   Two things made the steps tall: the long multi-selects (nine options on the
   conditions question, stacked one per row) and chrome sized for a marketing
   page rather than a form. Both are addressed here; the shape and the
   typography are unchanged on a tall screen. */

/* The two multi-selects run in two columns where there is room. Nine stacked
   options is roughly 580px of nothing but choices. */
@media (min-width: 560px) {
    .brag-options--multi { grid-template-columns: 1fr 1fr; }
}

/* Below that the screen is too narrow for two columns, so the options tighten
   instead. */
@media (max-width: 559px) {
    .brag-options--multi { gap: 8px; }
    .brag-options--multi .brag-option { padding: 11px 14px; font-size: 14.5px; }
}

/* Short viewports — a laptop at 1366x768, or any browser with a toolbar and a
   bookmarks bar — take the chrome down rather than the content. The question
   and its options keep their hierarchy; the air around them gives way first. */
@media (max-height: 860px) {
    .brag-flow-main { padding-top: 20px; padding-bottom: 32px; }
    .brag-flow-head-inner { padding-top: 12px; padding-bottom: 12px; }

    .brag .brag-h3--q { font-size: 21px; }
    .brag-flow-card { padding: 20px; }

    .brag-options { gap: 9px; }
    .brag .brag-option { padding: 12px 16px; font-size: 15px; }

    /* The utilities, scaled down together so the rhythm survives. */
    .brag .brag-mt-4 { margin-top: 12px; }
    .brag .brag-mt-5 { margin-top: 14px; }
    .brag .brag-mt-6 { margin-top: 16px; }
    .brag .brag-mt-7 { margin-top: 18px; }
    .brag .brag-mt-8 { margin-top: 20px; }
}

/* Shorter still: the supporting prose goes, because a question the reader
   cannot see all of is worse than one without its footnote. */
@media (max-height: 700px) {
    .brag-flow-main { padding-top: 12px; padding-bottom: 20px; }
    .brag .brag-h3--q { font-size: 19px; }
    .brag-flow-card { padding: 16px; }

    .brag-options { gap: 7px; }
    .brag .brag-option { padding: 10px 14px; font-size: 14.5px; }

    .brag .brag-mt-6 { margin-top: 12px; }
    .brag .brag-mt-7 { margin-top: 14px; }
    .brag .brag-mt-8 { margin-top: 16px; }
}

/* The two ways off the confirmation. Side by side where there is room, stacked
   on a phone — and centred, because the card they sit under is. */
.brag-exits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.brag-exits .brag-cta { flex: 0 1 auto; }

@media (max-width: 479px) {
    .brag-exits { flex-direction: column; }
    .brag-exits .brag-cta { width: 100%; }
}