/*
 * Design B, "Bold Brand": a stronger use of the website's colors. A full-width blue band with wave
 * lines for the heading, larger type, a step rail on the left on wide screens (across the top on
 * phones), round teal buttons and a price card with a blue top.
 */

body.theme-b {
    --r26-brand: #3a5fde;
    --r26-brand-strong: #2a49b8;
    --r26-sel: #3a5fde;
    --r26-brand-tint: #eef2fe;
    --r26-brand-tint-2: #d9e2fd;
    --r26-ring: 0 0 0 3px rgba(58, 95, 222, 0.3);
    --r26-btn-radius: 999px;
    --r26-bg: #f4f6fb;
    background: var(--r26-bg);
    font-size: 17px;
    overflow-x: hidden;
}


.theme-b .r26-main { padding-top: 0; }
.theme-b .r26-hero {
    margin: 0 calc(50% - 50vw) 28px;
    padding: 44px calc(50vw - 50% + 0px) 52px;
    color: #ffffff;
    background-color: var(--r26-blue-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='2'%3E%3Cpath d='M-60 120C180 20 300 260 520 170S860 -10 1040 120 1320 330 1500 220'/%3E%3Cpath d='M-80 420C120 300 300 520 560 420S900 250 1120 400 1380 560 1520 470'/%3E%3Cpath d='M220 640C260 480 120 380 260 260S560 200 600 60'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}
.theme-b .r26-hero > * { max-width: 1128px; margin-left: auto; margin-right: auto; }
.theme-b .r26-hero h1 { color: #ffffff; font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.08; }
.theme-b .r26-hero .r26-lead { color: #ffffff; opacity: 0.95; font-size: 1.08rem; }
.theme-b .r26-hero .r26-trust li { color: #ffffff; }
.theme-b .r26-hero .r26-trust .r26-icon { color: var(--r26-sun); }  /* 3.3:1 on the blue band */
.theme-b .r26-eyebrow { background: var(--r26-sun); color: #1a1a1a; display: inline-flex; width: auto; }
.theme-b .r26-eyebrow .r26-dot { background: #1a1a1a; }
.theme-b .r26-hero .r26-eyebrow { margin-left: 0; }

.theme-b .r26 .card, .theme-b .card { border-radius: 24px; }
.theme-b .r26-step-badge { background: var(--r26-blue-deep); color: #ffffff; border-radius: 50%; }
.theme-b .r26-step-head h2 { font-size: 1.6rem; }

.theme-b .r26 .btn, .theme-b .r26-btn, .theme-b .wave-pay-btn { min-height: 58px; padding: 16px 30px; }

/* Step rail */
.theme-b .r26-stepper li.is-current button { background: var(--r26-blue-deep); color: #ffffff; box-shadow: 0 8px 22px rgba(58, 95, 222, 0.3); }
.theme-b .r26-stepper li.is-current .r26-step-num { background: #ffffff; color: var(--r26-blue-deep); }
.theme-b .r26-stepper li.is-done .r26-step-num { background: var(--r26-accent); color: #1a1a1a; }
.theme-b .r26-stepper button { background: #ffffff; }

@media (min-width: 1100px) {
    .theme-b .r26-formcol { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
    .theme-b .r26-stepper { position: sticky; top: 144px; margin: 0; padding: 10px; border-radius: 22px; background: #ffffff; box-shadow: var(--r26-shadow); }
    .theme-b .r26-stepper ol { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .theme-b .r26-stepper button { min-height: 58px; background: transparent; }
    .theme-b .r26-stepper li.is-done button { background: transparent; }
    .theme-b .r26-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Price card with a blue top */
.theme-b .r26-sum-card { padding: 0; overflow: hidden; }
.theme-b .r26-sum-card h2 { margin: 0; padding: 18px 22px; background: var(--r26-blue-deep); color: #ffffff; font-size: 1.1rem; }
.theme-b .r26-sum-card > :not(h2) { margin-left: 22px; margin-right: 22px; }
.theme-b .r26-sum-card > :first-child + * { margin-top: 18px; }
.theme-b .r26-sum-card > :last-child { margin-bottom: 22px; }
.theme-b .r26-sum-total { background: var(--r26-blue-tint); }
.theme-b .r26-sum-total-value { color: var(--r26-blue-deep); font-size: 1.7rem; }

@media (max-width: 979px) {
    .theme-b .r26-sum-bar { background: var(--r26-blue-deep); color: #ffffff; }
    .theme-b .r26-sum-bar-label { color: #ffffff; opacity: 0.9; }
    .theme-b .r26-sum-bar-value { color: #ffffff; }
    .theme-b .r26-sum-bar-toggle { color: #ffffff; }  /* teal on this blue is under 3:1 */
    .theme-b .r26-sum-card { padding: 6px 0 18px; }
}

/* Phones: keep the blue band short so the first step shows on the first screen */
@media (max-width: 640px) {
    .theme-b .r26-hero { padding-top: 22px; padding-bottom: 26px; margin-bottom: 20px; }
    .theme-b .r26-hero h1 { font-size: 1.85rem; }
    .theme-b .r26-hero .r26-lead { font-size: 0.98rem; }
    /* Trust items stacked one per line, compact */
    .theme-b .r26-hero .r26-lead { margin-bottom: 0; }
    .theme-b .r26-hero .r26-trust { flex-direction: column; gap: 6px; margin-top: 12px !important; }
    .theme-b .r26-hero .r26-trust li { font-size: 0.86rem; line-height: 1.35; align-items: flex-start; }
    .theme-b .r26-hero .r26-trust .r26-icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
}

/* ---------- Hero behind the header (index.php: $r26HeaderMode = 'hero') ----------
   The blue hero starts at the very top of the page and runs under the header. The header floats over it,
   see-through with white links and the reversed logo; once the page scrolls (or the phone menu opens)
   it turns into the light blue bar with dark links, exactly as on the other pages. */
.theme-b .r26-hd-mode-hero { position: fixed; top: 0; left: 0; right: 0; }
.theme-b .r26-hd-mode-hero .r26-hd-nav a,
.theme-b .r26-hd-mode-hero .r26-hd-burger { transition: color 0.3s ease-in-out; }
.theme-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-nav a { color: #ffffff; }
.theme-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-burger { color: #ffffff; }
.theme-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-logo-normal { opacity: 0; }
.theme-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) .r26-hd-logo-reversed { opacity: 1; }
.theme-b .r26-hd-mode-hero:not(.is-scrolled):not(.is-open) :focus-visible { outline-color: #ffffff; }
.theme-b .r26-hd-mode-hero ~ .r26-main .r26-hero { padding-top: calc(91px + 22px); }
@media (min-width: 641px) {
    .theme-b .r26-hd-mode-hero ~ .r26-main .r26-hero { padding-top: calc(91px + 44px); }
}
@media (min-width: 920px) {
    .theme-b .r26-hd-mode-hero ~ .r26-main .r26-hero { padding-top: calc(124px + 44px); }
}

/* Pages without a blue hero (pay course fee, payment result, offer): the solid light blue bar from the start,
   and the same breathing room under it as the registration page has under its hero */
.theme-b .r26-hd-mode-solid .r26-hd { background-color: #c9ddff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); }
.theme-b .r26-hd-mode-solid ~ .r26-main { padding-top: 22px; }
@media (min-width: 920px) {
    .theme-b .r26-hd-mode-solid ~ .r26-main { padding-top: 40px; }
}

/* ---------- Hero like the chersllc.com page heroes (Cher, 2026-10-03): everything centered, large bold
   white headline, short centered lead, a few large soft wave lines behind, generous height. ---------- */
.theme-b .r26-hero { text-align: center; padding-bottom: 72px; }
.theme-b .r26-hero h1 {
    max-width: 1100px; margin-left: auto; margin-right: auto;
    font-size: clamp(2.2rem, 6.2vw, 5rem); line-height: 1.08; letter-spacing: -0.01em; font-weight: 700;
    text-wrap: balance;
}
/* Cher, 2026-10-03: the headline sits on ONE line on laptops and desktops, every word equally bold */
@media (min-width: 920px) {
    .theme-b .r26-hero h1 { max-width: none; white-space: nowrap; font-size: min(4.25rem, 5.2vw); font-weight: 800; }
    .theme-b .r26-hero h1 * { font-weight: inherit; }
}
.theme-b .r26-hero .r26-lead {
    max-width: 720px; margin: 18px auto 0; font-weight: 400; font-size: 1.12rem; line-height: 1.6; opacity: 1;
    text-wrap: balance;
}
.theme-b .r26-hd-mode-hero ~ .r26-main .r26-hero { padding-top: calc(124px + 64px); }
@media (max-width: 919px) {
    .theme-b .r26-hd-mode-hero ~ .r26-main .r26-hero { padding-top: calc(91px + 48px); }
    .theme-b .r26-hero { padding-bottom: 56px; }
}
@media (max-width: 640px) {
    .theme-b .r26-hd-mode-hero ~ .r26-main .r26-hero { padding-top: calc(91px + 36px); }
    .theme-b .r26-hero { padding-bottom: 44px; }
    .theme-b .r26-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .theme-b .r26-hero .r26-lead { font-size: 1rem; margin-top: 14px; }
}

/* Price card (Cher, 2026-10-04): the same room under the blue "Your price" band as at the sides, in every state */
.theme-b .r26-sum-card > :first-child + * { margin-top: 0; }
.theme-b .r26-sum-card > #r26SumEmpty,
.theme-b .r26-sum-card > #r26SumPrivate,
.theme-b .r26-sum-card > #r26SumFilled { margin-top: 22px; }