/* ============================================================
   Balance Codex — Section blocks
   ------------------------------------------------------------
   Styles for all section-level blocks (Hero, Example Pyramid,
   The Method, Author Trust, Full Reading, FAQ). Loaded after
   chrome.css in the cascade.
   
   Naming convention:
     .bct-section            base for any page section
     .bct-section--{name}    section-type modifier
     .bct-{block}__{element} block-internal elements
   
   All values from tokens. No hardcoded colors or sizes.
   ============================================================ */


/* ─── Base section ───────────────────────────────────────── */
/* Every section wraps in a div with .bct-section, has consistent  */
/* vertical padding, and uses .bct-container inside for horizontal */
/* alignment with navbar/footer.                                   */

.bct-section {
    padding-block: var(--space-9);
    border-top: var(--hairline) solid var(--line-structural);
}

/* The first section after the navbar doesn't get a divider on top
   (the navbar already has one on its bottom). */
.bct-section:first-child {
    border-top: none;
}

@media (min-width: 768px) {
    .bct-section {
        padding-block: var(--space-10);
    }
}


/* ─── Section header (used by Example Pyramid, Method, etc.) ── */

.bct-section__header {
    margin-bottom: var(--space-7);
}

.bct-section__header--two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 1024px) {
    .bct-section__header--two-column {
        grid-template-columns: 1fr 2fr;
        gap: var(--space-7);
        align-items: start;
    }
}

.bct-section__h2 {
    font-family:    var(--font-display);
    font-size:      1.875rem;          /* 30px */
    font-weight:    var(--weight-medium);
    line-height:    1.2;
    color:          var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

@media (min-width: 768px) {
    .bct-section__h2 {
        font-size: 2rem;               /* 32px */
    }
}

.bct-section__sub {
    font-family: var(--font-body);
    font-size:   var(--text-body);
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    max-width:   42em;
}


/* ─── Page-level CTA button (used in Hero and product blocks) ── */
/* Larger than navbar CTA (.bct-navbar__cta). Same family, more   */
/* padding, more presence. Square corners — design system rule.   */

.bct-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family:    var(--button-primary-font);
    font-size:      var(--button-primary-size);
    font-weight:    var(--weight-regular);
    letter-spacing: var(--button-primary-tracking);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
    border-radius: var(--radius);
    transition: filter 120ms ease, opacity 120ms ease;
    line-height: 1;
}

.bct-cta--primary {
    background: var(--button-primary-bg);
    color:      var(--button-primary-text);
}

.bct-cta--primary:hover {
    /* Darken in place (was opacity:0.85, which dimmed the white label).
       Keeps the brand blue and lifts text contrast on hover. */
    filter: brightness(0.9);
    opacity: 1;
}

.bct-cta__arrow {
    display: inline-block;
}


/* ============================================================
   HERO BLOCK
   ============================================================ */

.bct-section--hero {
    /* Per session-5 §C.2: hero takes ~60-70% of viewport on desktop,
       not 100% — the next section should peek into view at the bottom
       to signal there's more below. We use min-height instead of fixed
       height so content always fits. */
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
}

.bct-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 42rem;                  /* ~672px — comfortable reading width */
}

.bct-hero__meta {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-hero__h1 {
    font-family:    var(--font-display);
    font-size:      2.25rem;            /* 36px on small screens */
    font-weight:    var(--weight-medium);
    line-height:    1.1;
    color:          var(--text-primary);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

@media (min-width: 768px) {
    .bct-hero__h1 {
        font-size: var(--text-display);  /* 46px ≈ token Display size */
    }
}

.bct-hero__sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;             /* 17px */
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    max-width:   36em;
    margin: 0;
}

.bct-hero__cta {
    align-self: flex-start;
    margin-top: var(--space-3);
}

.bct-hero__supporting {
    font-family: var(--font-body);
    font-size:   0.9375rem;             /* 15px */
    font-style:  italic;
    color:       var(--text-secondary);
    margin: 0;
    margin-top: var(--space-2);
}


/* ============================================================
   EXAMPLE PYRAMID BLOCK
   ============================================================ */

.bct-example-pyramid {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.bct-example-pyramid__svg {
    width: 100%;
    max-width: 40rem;                   /* ~640px (v2.0.9: enlarged) */
}

.bct-example-pyramid__svg svg {
    width: 100%;
    height: auto;
}

@media (min-width: 1024px) {
    .bct-example-pyramid__svg {
        max-width: 54rem;               /* ~864px on desktop (v2.0.9: enlarged) */
    }
}


/* ─── Figure caption (mono caps small, below figure) ──────── */
/* Reusable pattern — any figure on the site can use this.    */

.bct-figure-caption {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}


/* ─── Three-axis block (INNER / MATERIAL / SPINE) ─────────── */
/* Reusable — appears on main page Example Pyramid AND inside  */
/* the calculator's Result screen AND on the Starter PDF p.1.  */

.bct-axes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: var(--divider-subtle);
}

@media (min-width: 768px) {
    .bct-axes {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-7);
    }
}

.bct-axes__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bct-axes__label {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-axes__desc {
    font-family: var(--font-body);
    font-size:   1.0625rem;             /* 17px */
    font-weight: var(--weight-regular);
    color:       var(--text-primary);
    line-height: var(--leading-body);
    margin: 0;
}


/* ============================================================
   SHARED — prose link with arrow
   ------------------------------------------------------------
   Reusable pattern: inline link "READ MORE →" rendered as
   mono caps with a hairline underline on hover. Used by
   .bct-section--the-method, .bct-section--author-trust, and
   any future block that wants the same affordance.
   ============================================================ */

.bct-prose__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: var(--hairline) solid var(--text-meta);
    padding-bottom: 2px;
    transition: opacity 120ms ease;
}

.bct-prose__link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    opacity: 1;
}

.bct-prose__link-arrow {
    display: inline-block;
}


/* ============================================================
   THE METHOD BLOCK
   ============================================================ */

.bct-prose {
    max-width: 42em;                    /* ~672px — ~70 chars per line */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bct-prose__p {
    font-family: var(--font-body);
    font-size:   1.0625rem;             /* 17px */
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-primary);
    margin: 0;
}

.bct-pull-quote {
    margin: var(--space-4) 0;
    padding-left: var(--space-5);
    border-left: var(--stroke-strong) solid var(--accent-primary);
}

.bct-pull-quote p {
    font-family:    var(--font-display);
    font-size:      1.375rem;            /* 22px */
    font-weight:    var(--weight-medium);
    font-style:     italic;
    line-height:    1.4;
    color:          var(--accent-primary);
    margin: 0;
    max-width: 30em;
}

@media (min-width: 768px) {
    .bct-pull-quote p {
        font-size: 1.5rem;               /* 24px */
    }
}

.bct-prose__link-wrap {
    margin: 0;
    margin-top: var(--space-3);
}


/* ============================================================
   AUTHOR TRUST BLOCK
   ============================================================ */

.bct-section--author-trust {
    background: var(--surface-elevated);  /* warm-cream — gives block its own zone */
}

.bct-author {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

@media (min-width: 768px) {
    .bct-author {
        /* ~30% portrait, ~65% content per session-5 §C.5, with a gap */
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
        gap: var(--space-8);
        align-items: start;
    }
}


/* ─── Portrait column ─────────────────────────────────────── */

.bct-author__portrait {
    /* Square aspect ratio frame for both real photo and placeholder.   */
    /* The container provides the box; the photo or placeholder fills.  */
    aspect-ratio: 4 / 5;
    max-width: 22rem;                    /* ~352px on desktop */
    width: 100%;
}

.bct-author__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bct-author__placeholder {
    width: 100%;
    height: 100%;
    background: var(--surface-canvas);
    border: var(--hairline) solid var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.bct-author__placeholder-text {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-secondary);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    text-align: center;
}


/* ─── Content column ──────────────────────────────────────── */

.bct-author__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 38em;
}

.bct-author__tag {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-author__name {
    font-family: var(--font-display);
    font-size:   1.5rem;                 /* 24px */
    font-weight: var(--weight-medium);
    line-height: 1.2;
    color:       var(--text-primary);
    margin: 0;
}

@media (min-width: 768px) {
    .bct-author__name {
        font-size: 1.75rem;              /* 28px */
    }
}

.bct-author__facts {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-author__bio {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-primary);
    margin: 0;
}

.bct-author__link-wrap {
    margin: 0;
    margin-top: var(--space-2);
}


/* ============================================================
   FULL READING BLOCK
   ============================================================ */

.bct-section--full-reading {
    background: var(--surface-elevated);  /* warm-cream */
}

.bct-full-reading {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

@media (min-width: 1024px) {
    .bct-full-reading {
        /* ~5/8 content, ~3/8 price card per session-5 §C.6 */
        grid-template-columns: 5fr 3fr;
        gap: var(--space-8);
        align-items: start;
    }
}


/* ─── Left column — content + inside table ──────────────── */

.bct-full-reading__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bct-full-reading__h2 {
    margin: 0;
}

.bct-full-reading__sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-primary);
    max-width:   36em;
    margin: 0;
}


/* ─── "What's inside" table ──────────────────────────────── */

.bct-inside {
    display: flex;
    flex-direction: column;
    margin: var(--space-3) 0 0 0;
    border-top: var(--hairline) solid var(--accent-primary);
}

.bct-inside__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    border-bottom: var(--hairline) solid var(--accent-primary);
    margin: 0;
}

@media (min-width: 768px) {
    .bct-inside__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-5);
        align-items: baseline;
    }
}

.bct-inside__label {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-inside__desc {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-primary);
    margin: 0;
}


/* ─── Right column — price card ──────────────────────────── */

.bct-full-reading__card {
    background: var(--surface-canvas);
    border: var(--hairline) solid var(--accent-primary);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bct-full-reading__price-label {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-full-reading__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0;
    flex-wrap: wrap;
}

.bct-full-reading__price {
    font-family: var(--font-display);
    font-size:   3rem;                  /* 48px — the price is the headline */
    font-weight: var(--weight-medium);
    line-height: 1;
    color:       var(--accent-primary);
    letter-spacing: -0.02em;
}

.bct-full-reading__price-unit {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.bct-full-reading__cta {
    width: 100%;
    justify-content: center;
}

.bct-full-reading__trust {
    font-family: var(--font-body);
    font-size:   0.875rem;              /* 14px */
    font-style:  italic;
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    margin: 0;
}

.bct-full-reading__consent {
    font-family: var(--font-body);
    font-size:   var(--text-caption);  /* 13px */
    line-height: 1.5;
    color:       var(--text-secondary);
    margin: var(--space-3) 0 0;
}

.bct-full-reading__consent a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================
   FAQ BLOCK
   ============================================================ */

.bct-faq {
    max-width: 56rem;                   /* ~896px — wider than prose, denser content */
    border-top: var(--hairline) solid var(--line-subtle);
}


/* ─── Single accordion item ──────────────────────────────── */

.bct-faq__item {
    border-bottom: var(--hairline) solid var(--line-subtle);
}

/* Remove the default browser disclosure triangle. */
.bct-faq__item summary::-webkit-details-marker { display: none; }
.bct-faq__item summary::marker { display: none; content: ""; }


/* ─── Summary / question row ─────────────────────────────── */

.bct-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    cursor: pointer;
    list-style: none;                   /* extra safety against browser markers */
    /* Subtle focus ring — base.css :focus-visible handles the rest. */
    outline-offset: 4px;
}

.bct-faq__question-text {
    font-family:    var(--font-body);
    font-size:      1.0625rem;          /* 17px */
    font-weight:    var(--weight-medium);
    line-height:    1.4;
    color:          var(--text-primary);
}


/* ─── +/- indicator ──────────────────────────────────────── */
/* Pure CSS — two hairlines forming a plus, the vertical one    */
/* disappears when the <details> is open, leaving a minus.      */

.bct-faq__indicator {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.bct-faq__indicator::before,
.bct-faq__indicator::after {
    content: "";
    position: absolute;
    background: var(--text-primary);
    transition: opacity 160ms ease;
}

/* Horizontal hairline — always visible */
.bct-faq__indicator::before {
    left: 0;
    right: 0;
    top: 50%;
    height: var(--hairline);
    transform: translateY(-50%);
}

/* Vertical hairline — visible only when closed */
.bct-faq__indicator::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--hairline);
    transform: translateX(-50%);
}

.bct-faq__item[open] .bct-faq__indicator::after {
    opacity: 0;
}


/* ─── Answer body ────────────────────────────────────────── */

.bct-faq__answer {
    padding-bottom: var(--space-5);
    max-width: 56em;
}

.bct-faq__answer p {
    font-family: var(--font-body);
    font-size:   1rem;                  /* 16px */
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    margin: 0;
}


/* ============================================================
   COMPACT CTA BLOCK
   ------------------------------------------------------------
   Quiet end-of-page CTA. Hairline above and below. Lead text
   on the left, button on the right on desktop; stacked centered
   on mobile.
   ============================================================ */

.bct-section--compact-cta {
    /* Section borders top and bottom — visually separates from
       the prose above and the footer below */
    border-top: var(--hairline) solid var(--line-structural);
    border-bottom: var(--hairline) solid var(--line-structural);
    /* Override the .bct-section default top-border because we have
       full borders here; ensure they don't double up if this section
       follows another with a bottom border */
}

.bct-compact-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .bct-compact-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        gap: var(--space-7);
    }
}

.bct-compact-cta__lead {
    font-family: var(--font-display);
    font-size:   1.375rem;              /* 22px mobile */
    font-weight: var(--weight-medium);
    line-height: 1.3;
    color:       var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
    /* Allow lead to wrap on narrow viewports without overflow */
    max-width: 28em;
}

@media (min-width: 768px) {
    .bct-compact-cta__lead {
        font-size: 1.75rem;             /* 28px */
        flex: 1 1 auto;
    }
}

@media (min-width: 1200px) {
    .bct-compact-cta__lead {
        font-size: 2rem;                /* 32px */
    }
}

.bct-compact-cta__cta {
    /* Inherits all .bct-cta--primary styles. Just prevent shrinking. */
    flex-shrink: 0;
}


/* ============================================================
   GO DEEPER BLOCK
   ------------------------------------------------------------
   Visual second-level navigation. Cream cards in adaptive grid.
   The wrapper class .bct-go-deeper--cards-N (where N is 3 or 4)
   sets explicit column counts so 3-card layouts don't leave an
   empty 4th slot.
   ============================================================ */

.bct-section--go-deeper {
    background: var(--surface-canvas);
}


/* ─── Section header (meta label + subheading) ────────────── */

.bct-go-deeper__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bct-go-deeper__meta {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-go-deeper__sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;             /* 17px */
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    margin: 0;
    max-width: 42em;
}


/* ─── Card grid — adaptive responsive ─────────────────────── */
/* Single column on mobile (always). On larger viewports, the    */
/* column count depends on card count, set via wrapper modifier. */

.bct-go-deeper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

/* 3 cards → 1 col mobile → 3 cols tablet+ */
@media (min-width: 768px) {
    .bct-go-deeper--cards-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .bct-go-deeper--cards-3 {
        gap: var(--space-6);
    }
}

/* 4 cards → 1 col mobile → 2 cols tablet → 4 cols desktop */
@media (min-width: 768px) {
    .bct-go-deeper--cards-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

@media (min-width: 1200px) {
    .bct-go-deeper--cards-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
    }
}


/* ─── Individual card ─────────────────────────────────────── */

.bct-go-deeper__card {
    background: var(--surface-elevated);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Square corners — anti-list */
}

.bct-go-deeper__card-category {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    font-weight:    var(--weight-regular);
    color:          var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    margin: 0;
}

.bct-go-deeper__card-heading {
    font-family: var(--font-display);
    font-size:   1.375rem;              /* 22px mobile/tablet */
    font-weight: var(--weight-medium);
    line-height: 1.2;
    color:       var(--text-primary);
    margin: 0;
}

@media (min-width: 1024px) {
    .bct-go-deeper__card-heading {
        font-size: 1.5rem;              /* 24px desktop */
    }
}

.bct-go-deeper__card-description {
    font-family: var(--font-body);
    font-size:   1rem;                  /* 16px */
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    margin: 0;
    /* Take available space; pushes link to bottom of card */
    flex: 1 1 auto;
}

.bct-go-deeper__card-link-wrap {
    margin: 0;
    margin-top: var(--space-2);
}


/* ============================================================
   v2.0.6 additions
   ------------------------------------------------------------
   1. Example-pyramid optional link ("See how the pyramid is built").
   2. Go-deeper two-card layout (home Block 4 — explore vs Telegram).
   3. Home-only prose centering — fixes the lopsided right-side void
      on the home's prose blocks (1.5 "What is Balance Codex?" and the
      Compatibility block). Scoped to body.home so content pages
      (/method, /about, /philosophy), whose hero and prose are
      deliberately left-aligned together, are untouched.
   ============================================================ */

/* 1 — example-pyramid link */
.bct-example-pyramid__link {
    margin-top: var(--space-7);
    text-align: center;
}

/* 2 — go-deeper: 2 cards → 1 col mobile → 2 cols tablet+ */
@media (min-width: 768px) {
    .bct-go-deeper--cards-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}
@media (min-width: 1024px) {
    .bct-go-deeper--cards-2 {
        gap: var(--space-6);
    }
}

/* 3 — home-only: center the prose column so the right side is balanced */
body.home .bct-section--the-method .bct-section__header,
body.home .bct-section--the-method .bct-prose {
    max-width: 42em;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   FULL READING VIA TELEGRAM BLOCK  (bcc/full-reading-telegram)
   ------------------------------------------------------------
   A cream card inside the content frame: pitch (left) + three
   numbered steps (right) + a muted legal-links row. Moved out of
   the calculator plugin so the marketing pitch is theme-owned,
   server-rendered HTML.
   ============================================================ */

/* Self-contained card that works as a CTA directly under the calculator —
   so it overrides the default section rhythm: no top divider, much smaller
   top spacing, and a small negative margin to pull up toward the content
   above. Bottom keeps the normal section spacing (separation from footer). */
.bct-section--frt {
    border-top: none;
    padding-block: var(--space-5) var(--space-9);   /* top 24px / bottom 64px */
    margin-top: calc(-1 * var(--space-6));           /* pull up ~32px */
}

@media (min-width: 768px) {
    .bct-section--frt {
        padding-block: var(--space-6) var(--space-10);  /* top 32px / bottom 96px */
        margin-top: calc(-1 * var(--space-8));           /* pull up ~48px */
    }
}

.bct-frt-card {
    background: var(--surface-elevated);   /* warm-cream */
    padding: var(--space-6);
}

@media (min-width: 768px) {
    .bct-frt-card { padding: var(--space-8); }
}

.bct-frt {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

@media (min-width: 1024px) {
    .bct-frt {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-items: start;
    }
}

/* ─── Left column: pitch ─────────────────────────────────── */

.bct-frt__pitch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.bct-frt__eyebrow {
    font-family:    var(--font-meta);
    font-size:      var(--text-caption);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color:          var(--text-meta);
    margin: 0;
}

.bct-frt__h2 { margin: 0; }

@media (min-width: 768px) {
    .bct-frt__h2 { font-size: 2.25rem; }   /* 36px — a touch more presence than the base section H2 */
}

.bct-frt__lead {
    font-family: var(--font-body);
    font-size:   var(--text-body);
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    max-width:   38em;
    margin: 0;
}

.bct-frt__cta { margin-top: var(--space-2); }

.bct-frt__note {
    font-family:    var(--font-meta);
    font-size:      var(--legal-link-size);   /* 11px */
    letter-spacing: var(--legal-link-tracking);
    text-transform: uppercase;
    color:          var(--text-secondary);
    margin: 0;
}

.bct-frt__consent {
    font-family: var(--font-body);
    font-size:   var(--text-caption);          /* 13px */
    line-height: 1.5;
    color:       var(--text-secondary);
    max-width:   38em;
    margin: 0;
}

.bct-frt__consent a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Right column: numbered steps ───────────────────────── */

.bct-frt__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bct-frt__step {
    display: flex;
    gap: var(--space-4);
    background: var(--surface-canvas);                  /* white card on cream */
    border: var(--hairline) solid var(--line-subtle);
    padding: var(--space-5);
}

.bct-frt__step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--accent-primary);                 /* navy chip */
    color: var(--text-on-accent);
    font-family: var(--font-meta);
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
}

.bct-frt__step-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bct-frt__step-h {
    font-family: var(--font-display);
    font-size:   1.0625rem;            /* 17px */
    font-weight: var(--weight-medium);
    line-height: 1.3;
    color:       var(--text-primary);
    margin: 0;
}

.bct-frt__step-p {
    font-family: var(--font-body);
    font-size:   var(--text-body-sm);
    line-height: var(--leading-body);
    color:       var(--text-secondary);
    margin: 0;
}