/* ==========================================================================
   Bob's Binder — marketing site styles

   Intentionally NEUTRAL for now. Final colors, type, and illustration style
   are deferred until commissioned artwork sets the direction. Everything that
   carries brand color is expressed through the CSS custom properties below, so
   re-theming later is a single-file change. Layout, spacing, and accessibility
   are real and meant to last.
   ========================================================================== */

:root {
    /* Brand color — temporary; matches the Vue app's primary so crossing into
       /my doesn't jolt. Swap these three when the palette is chosen. */
    --bb-primary: #1565c0;
    --bb-primary-dark: #0f4c8a;
    --bb-on-primary: #ffffff;

    /* Neutrals (all meet 4.5:1 on their intended backgrounds). */
    --bb-ink: #1f2933;
    --bb-muted: #4a5568;
    --bb-bg: #ffffff;
    --bb-tint: #f4f7fb;
    --bb-quiet: #eef3f8;
    --bb-border: #d3dae3;

    /* Type — generous for a 50–70 audience. */
    --bb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bb-serif: Georgia, "Times New Roman", serif;
    --bb-text: 1.125rem;   /* 18px body */

    /* Rhythm. */
    --bb-radius: 12px;
    --bb-section-y: 4.5rem;
    --bb-maxline: 68ch;
}

html { font-size: 16px; }

body {
    font-family: var(--bb-font);
    font-size: var(--bb-text);
    line-height: 1.65;
    color: var(--bb-ink);
    background: var(--bb-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; color: var(--bb-ink); }

a { color: var(--bb-primary-dark); }
a:hover { color: var(--bb-primary); }

/* Visible focus for keyboard users everywhere. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--bb-primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Buttons — built on Bootstrap, repainted with our tokens. Min 44px targets.
   -------------------------------------------------------------------------- */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--bb-radius);
}
.btn-lg { font-size: 1.125rem; padding: 0.75rem 1.75rem; }

.btn-primary,
.btn-primary:focus {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary);
}
.btn-primary:hover {
    background-color: var(--bb-primary-dark);
    border-color: var(--bb-primary-dark);
    color: var(--bb-on-primary);
}

.btn-outline-primary {
    color: var(--bb-primary-dark);
    border-color: var(--bb-primary);
    border-width: 2px;
}
.btn-outline-primary:hover {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--bb-bg);
    border-bottom: 1px solid var(--bb-border);
    box-shadow: 0 1px 4px rgba(31, 41, 51, 0.06);
}
.site-header .navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.site-header__brand {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--bb-primary-dark);
}
.site-header__brand:hover { color: var(--bb-primary); }

.site-nav { gap: 0.25rem; }
.site-nav__link {
    color: var(--bb-ink);
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
}
.site-nav__link:hover { color: var(--bb-primary-dark); background: var(--bb-tint); }
.site-nav__link.is-active { color: var(--bb-primary-dark); background: var(--bb-quiet); }

.site-header__cta { display: flex; gap: 0.6rem; }
.navbar-toggler { border: 1px solid var(--bb-border); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, var(--bb-primary) 0%, var(--bb-primary-dark) 100%);
    color: var(--bb-on-primary);
    padding: var(--bb-section-y) 0 0;   /* no bottom padding: Bob meets the seam */
    overflow: hidden;
    position: relative;
}
/* Columns share full height so the copy can center while Bob bottom-anchors. */
.hero .row { align-items: stretch; }
.hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: var(--bb-section-y);   /* copy keeps its breathing room */
}
.hero__tagline {
    color: var(--bb-on-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}
.hero__subtitle {
    font-size: 1.3rem;
    line-height: 1.55;
    max-width: 34ch;
    margin-bottom: 1.75rem;
    opacity: 0.96;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Bob rises out of the blue: bottom-aligned and flush with the color change,
   filling his column and grounded with a soft shadow so he reads as standing
   on the seam rather than floating. */
.hero__art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
}
.hero__art .art-figure { margin: 0; width: 100%; }
.hero__art .art-figure__img {
    margin-inline: auto;
    filter: drop-shadow(0 16px 26px rgba(8, 24, 45, 0.45));
}
@media (max-width: 991.98px) {
    /* Stacked: keep Bob centered and a bit smaller so he doesn't dominate. */
    .hero__art { justify-content: center; }
    .hero__art .art-figure { max-width: 420px; margin-inline: auto; }
}
/* A single, gentle entrance for Bob on page load. */
@media (prefers-reduced-motion: no-preference) {
    .hero__art .art-figure {
        animation: bb-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }
    @keyframes bb-rise {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--bb-section-y) 0; }
.section--tinted { background: var(--bb-tint); }
.section--quiet { background: var(--bb-quiet); }

.section__title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.section__lead {
    font-size: 1.25rem;
    color: var(--bb-muted);
    max-width: var(--bb-maxline);
    margin-inline: auto;
}
.section__body { font-size: var(--bb-text); max-width: var(--bb-maxline); }
.section__body--accent { font-size: 1.25rem; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Page head (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
    background: var(--bb-tint);
    padding: calc(var(--bb-section-y) * 0.85) 0;
    border-bottom: 1px solid var(--bb-border);
}
.page-head__title { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.75rem; }
.page-head__intro {
    font-size: 1.25rem;
    color: var(--bb-muted);
    max-width: var(--bb-maxline);
    margin-inline: auto;
}
.page-head__intro p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Value pillars
   -------------------------------------------------------------------------- */
.pillar-card {
    background: var(--bb-bg);
    border-radius: var(--bb-radius);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 16px rgba(31, 41, 51, 0.08);
    text-align: center;
}
.pillar-card__icon { width: 128px; margin: 0 auto 1rem; }
/* Pillar icons sit flat on the white card — no frame or shadow. The default
   --light frame would round + shadow the icon's white canvas into a redundant
   white chip on the (also white) card; dropping it lets the canvas melt into
   the card so only the line art shows. Selector includes --light to outrank
   the frame rule (equal class count, later in source) on specificity. */
.pillar-card__icon .art-figure { width: 100%; margin: 0; }
.pillar-card__icon .art-figure--light .art-figure__img {
    margin-inline: auto;
    border-radius: 0;
    box-shadow: none;
}
.pillar-card__title { font-size: 1.3rem; margin: 0 0 0.5rem; }
.pillar-card__body { color: var(--bb-muted); margin-bottom: 0; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Doctrine steps (How it works)
   -------------------------------------------------------------------------- */
.doctrine { list-style: none; padding: 0; margin: 0; display: grid; gap: 3.5rem; }
.doctrine__step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.doctrine__step--reverse .doctrine__art { order: 2; }
/* Each step photo fills its half of the row so the two columns balance at full
   width. Left-aligning a 1×-capped image stranded the photo — and its overlaid
   credit — in dead space to its right. Overriding the inline cap makes the
   figure equal the image, so the credit anchors to the image's own edge. */
.doctrine__art .art-figure { width: 100%; margin: 0; }
.doctrine__art .art-figure__img {
    max-width: none !important;   /* override the inline 1× display cap */
    width: 100%;
}
.doctrine__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--bb-primary);
    color: var(--bb-on-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.doctrine__name { font-size: 1.6rem; margin-bottom: 0.75rem; }
.doctrine__body { font-size: 1.125rem; color: var(--bb-muted); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Steps teaser (home)
   -------------------------------------------------------------------------- */
.steps-teaser__item {
    background: var(--bb-bg);
    border-radius: var(--bb-radius);
    padding: 1.25rem 0.75rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(31, 41, 51, 0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.steps-teaser__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--bb-primary);
    color: var(--bb-on-primary);
    font-weight: 700;
}
.steps-teaser__name { font-weight: 700; font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.tier {
    position: relative;
    background: var(--bb-bg);
    border-radius: var(--bb-radius);
    border: 1px solid var(--bb-border);
    box-shadow: 0 4px 16px rgba(31, 41, 51, 0.08);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
}
/* The highlighted plan (the active preview tier, or the entry tier once
   billing is live) gets a primary border and a stronger lift. */
.tier--highlight {
    border-color: var(--bb-primary);
    border-width: 2px;
    box-shadow: 0 10px 30px rgba(31, 41, 51, 0.14);
}
/* Tiers that aren't separately purchasable yet recede into the page. */
.tier--later, .tier--coming-soon { background: var(--bb-tint); }
.tier__ribbon {
    position: absolute;
    top: 1rem; right: 1rem;
    background: var(--bb-muted);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}
/* The preview tier's ribbon is a positive highlight, not a "not yet" note. */
.tier--preview .tier__ribbon { background: var(--bb-primary); }
.tier__name { font-size: 1.5rem; margin-bottom: 0.25rem; }
.tier__price { font-size: 1.75rem; font-weight: 800; color: var(--bb-primary-dark); margin-bottom: 0.25rem; }
.tier--later .tier__price, .tier--coming-soon .tier__price { font-size: 1.25rem; color: var(--bb-muted); }
.tier__tagline { color: var(--bb-muted); margin-bottom: 1.25rem; }

.tier__features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.tier__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--bb-border);
}
.tier__feature:first-child { border-top: 0; }
.tier__icon {
    flex: none;
    width: 1.6rem; height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
}
.tier__feature--yes .tier__icon { background: #d6ecdd; color: #1c6b38; }
.tier__feature--no .tier__icon { background: #f0e2e2; color: #8a3a3a; }
.tier__feature--limit .tier__icon { background: #f2ecd6; color: #7a611c; }
.tier__feature--no .tier__feature-text { color: var(--bb-muted); }
.tier__cta { width: 100%; }
.tier__cta--soon {
    text-align: center;
    font-weight: 700;
    color: var(--bb-muted);
    margin: 0;
    padding: 0.6rem 0;
}
.pricing-note { margin-top: 2.5rem; color: var(--bb-muted); }

/* Limited-time preview notice, shown above the tiers while preview is active. */
.preview-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bb-tint);
    border: 1px solid var(--bb-primary);
    border-left-width: 6px;
    border-radius: var(--bb-radius);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2rem;
}
.preview-banner__badge {
    flex: none;
    background: var(--bb-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
.preview-banner__text { margin: 0; color: var(--bb-ink); }

/* --------------------------------------------------------------------------
   FAQ — native <details> disclosures
   -------------------------------------------------------------------------- */
.faq__item {
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(31, 41, 51, 0.05);
}
.faq__question {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    min-height: 44px;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__marker {
    flex: none;
    width: 1.5rem; height: 1.5rem;
    position: relative;
}
.faq__marker::before,
.faq__marker::after {
    content: "";
    position: absolute;
    background: var(--bb-primary-dark);
    border-radius: 2px;
}
.faq__marker::before { top: 50%; left: 0; right: 0; height: 3px; transform: translateY(-50%); }
.faq__marker::after { left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); transition: opacity 0.2s; }
.faq__item[open] .faq__marker::after { opacity: 0; }
.faq__answer { padding: 0 1.4rem 1.3rem; color: var(--bb-muted); }
.faq__answer p { margin: 0; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Scripture
   -------------------------------------------------------------------------- */
.scripture {
    margin: 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--bb-primary);
    background: var(--bb-bg);
    border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
    box-shadow: 0 2px 12px rgba(31, 41, 51, 0.06);
    text-align: center;
}
.scripture__text {
    font-family: var(--bb-serif);
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--bb-ink);
    margin: 0 0 0.75rem;
}
.scripture__ref { font-weight: 700; color: var(--bb-muted); font-style: normal; }

/* --------------------------------------------------------------------------
   Artwork placeholders — true-to-size "blueprint" spec boxes.
   Each box is aspect-ratio-locked to its slot, so the layout shows the real
   footprint of the illustration and the size to deliver it at.
   -------------------------------------------------------------------------- */
.art-slot {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: var(--bb-muted);
    background-color: #f6f9fc;
    /* faint graph-paper grid so it reads as a measured placeholder */
    background-image:
        linear-gradient(rgba(21, 101, 192, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 101, 192, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px dashed #9fb3c8;
    border-radius: 6px;
    overflow: hidden;
}
.art-slot__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    max-width: 92%;
}
.art-slot__badge {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--bb-primary-dark);
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}
.art-slot__title { font-weight: 700; font-size: 1rem; color: var(--bb-ink); line-height: 1.3; }
.art-slot__scene { font-size: 0.9rem; font-style: italic; line-height: 1.45; }
.art-slot__spec {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--bb-primary-dark);
    background: var(--bb-bg);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
}

/* Corner crop marks */
.art-slot__corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--bb-primary); }
.art-slot__corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.art-slot__corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.art-slot__corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.art-slot__corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Edge dimension labels */
.art-slot__dim {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bb-ink);
    background: var(--bb-bg);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--bb-border);
}
.art-slot__dim--w { top: 6px; left: 50%; transform: translateX(-50%); }
.art-slot__dim--h { top: 50%; left: 6px; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }

/* Dark theme — for the hero, which sits on a blue panel */
.art-slot--dark {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.6);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    color: #eef3f8;
}
.art-slot--dark .art-slot__title { color: #fff; }
.art-slot--dark .art-slot__badge,
.art-slot--dark .art-slot__spec,
.art-slot--dark .art-slot__dim {
    background: rgba(15, 35, 60, 0.55);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.art-slot--dark .art-slot__corner { border-color: rgba(255, 255, 255, 0.9); }

/* Compact — small icons (pillar cards): drop edge labels and the scene line */
.art-slot--compact { padding: 0.6rem; }
.art-slot--compact .art-slot__scene,
.art-slot--compact .art-slot__dim { display: none; }
.art-slot--compact .art-slot__caption { gap: 0.25rem; }
.art-slot--compact .art-slot__title { font-size: 0.8rem; }
.art-slot--compact .art-slot__spec { font-size: 0.66rem; }
.art-slot--compact .art-slot__badge { font-size: 0.6rem; padding: 0.1rem 0.5rem; }

/* Finished artwork (replaces the placeholder once a file exists for the slot) */
.art-figure { margin: 0; }
.art-figure__img { display: block; width: 100%; height: auto; }
/* Light contexts get a seated, rounded frame; the dark hero panel keeps the
   image flush so a transparent PNG of Bob blends into the navy behind it. */
.art-figure--light .art-figure__img {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 42, 74, 0.12);
}

/* "Photo" frame — a warm matted print, set on the page rather than into it.
   Used for Meet Bob. A whisper of a tilt makes it feel placed by hand; it
   straightens and lifts on hover. The frame hugs the image (width: fit-content)
   and re-centers in its column. */
.art-figure--photo {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 14px 14px 20px;          /* deeper bottom edge, like a real print */
    background: #fffdf7;              /* warm paper white */
    border: 1px solid rgba(31, 41, 51, 0.06);
    border-radius: 3px;
    box-shadow:
        0 1px 1px rgba(31, 41, 51, 0.05),
        0 14px 30px -10px rgba(31, 41, 51, 0.28);
    transform: rotate(-1.5deg);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease;
}
.art-figure--photo .art-figure__img {
    border-radius: 1px;
    box-shadow: none;
}
/* On hover the print tips through level to the mirror angle (-1.5° → +1.5°),
   passing through 0° mid-transition — a little playful sway — and lifts. */
.art-figure--photo:hover,
.art-figure--photo:focus-within {
    transform: rotate(1.5deg) translateY(-4px);
    box-shadow:
        0 1px 1px rgba(31, 41, 51, 0.05),
        0 22px 44px -12px rgba(31, 41, 51, 0.34);
}

/* Photo credit — a small, unobtrusive attribution tucked into the lower-right
   corner of a sourced photo (e.g. the Unsplash photos on How it works). Dimmed
   by default so it never competes with the image; brightens on hover/focus. */
.art-figure--credited { position: relative; }
.art-credit {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    max-width: calc(100% - 1rem);          /* never wider than the photo */
    padding: 0.2rem 0.55rem;
    border-radius: 7px;
    background: rgba(15, 23, 35, 0.5);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.68rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);  /* legible over busy/light areas */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0.62;
    transition: opacity 0.25s ease, background-color 0.25s ease;
}
.art-figure--credited:hover .art-credit,
.art-figure--credited:focus-within .art-credit {
    opacity: 1;
    background: rgba(15, 23, 35, 0.68);
}
.art-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.art-credit a:hover,
.art-credit a:focus { color: #fff; }

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(135deg, var(--bb-primary) 0%, var(--bb-primary-dark) 100%);
    color: var(--bb-on-primary);
    padding: var(--bb-section-y) 0;
}
.cta-band__title { color: var(--bb-on-primary); font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 0.75rem; }
.cta-band__body {
    font-size: 1.2rem;
    max-width: 52ch;
    margin: 0 auto 1.75rem;
    opacity: 0.96;
}
.cta-band .btn-primary {
    background: var(--bb-on-primary);
    border-color: var(--bb-on-primary);
    color: var(--bb-primary-dark);
}
.cta-band .btn-primary:hover { background: #eef3f8; border-color: #eef3f8; color: var(--bb-primary-dark); }

/* --------------------------------------------------------------------------
   Prose (privacy / about markdown bodies)
   -------------------------------------------------------------------------- */
.prose { font-size: var(--bb-text); }
.prose h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose p { margin-bottom: 1.25rem; }
.prose ul { margin-bottom: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose .scripture { margin: 2.5rem 0; }
.prose .art-slot { margin: 2rem 0; }
/* A finished banner image inside article prose (e.g. the privacy-shield on the
   Privacy & Security page) is capped at its 1× width and would otherwise sit
   left-aligned in the column. Center it and give it banner-like spacing. */
.prose .art-figure { margin: 2rem 0; }
.prose .art-figure__img { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--bb-ink);
    color: #e6eaef;
    padding: var(--bb-section-y) 0 2rem;
}
.site-footer__brand { color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 0.75rem; }
.site-footer__blurb { color: #c2cad4; max-width: 40ch; }
.site-footer__tagline { font-weight: 700; color: #fff; margin-top: 0.5rem; }
.site-footer__heading { color: #fff; font-size: 1.1rem; margin-bottom: 0.75rem; }
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: 0.5rem; }
.site-footer__list a { color: #c2cad4; text-decoration: none; }
.site-footer__list a:hover { color: #fff; text-decoration: underline; }
.site-footer__rule { border-color: rgba(255, 255, 255, 0.18); margin: 2.5rem 0 1.5rem; }
.site-footer__legal { color: #aab3bf; font-size: 0.95rem; margin: 0; }
.site-footer__aside { color: #c2cad4; margin-left: 0.75rem; text-decoration: underline; }
.site-footer__aside:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .site-header__cta { margin-top: 0.75rem; }
    .hero__subtitle { max-width: none; }
}

@media (max-width: 767.98px) {
    :root { --bb-section-y: 3rem; }
    .doctrine__step { grid-template-columns: 1fr; gap: 1.25rem; }
    .doctrine__step--reverse .doctrine__art { order: 0; }
    .steps-teaser__name { font-size: 1rem; }
    /* The edge rulers crowd narrow boxes; the spec line covers it. */
    .art-slot__dim { display: none; }
}