/* ════════════════════════════════════════════════════════════════
   BAZI COMPATIBILITY CALCULATOR
   /bazi/compatibility/calculator
   ════════════════════════════════════════════════════════════════ */


/* ── Hero ── */
.bc-hero {
    padding: 2rem 1.5rem 1.5rem;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

.bc-hero-inner {
    max-width: 760px;
}

.bc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    font-size: 0.84rem;
    color: #888;
}

.bc-breadcrumb a {
    color: #888;
    text-decoration: none;
    transition: color 0.18s ease;
}

.bc-breadcrumb a:hover {
    color: #E8C547;
}

.bc-hero-title {
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #f0e6d3;
    letter-spacing: -0.01em;
}

.bc-hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #aaa;
    margin: 0;
    max-width: 680px;
}


/* ── Two-chart form section ── */
.bc-form-section {
    max-width: 1200px;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
}

.bc-form-intro {
    max-width: 760px;
    margin: 0 auto 1.6rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #b8b0a3;
    text-align: center;
}

@media (max-width: 600px) {
    .bc-form-intro {
        font-size: 0.92rem;
        text-align: left;
        margin-bottom: 1.25rem;
    }
}

.bc-forms-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin-bottom: 1.6rem;
}

@media (max-width: 760px) {
    .bc-forms-wrap {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.bc-form-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.5rem;
    position: relative;
    transition: border-color 0.2s ease;
}

.bc-form-card:hover {
    border-color: rgba(232, 197, 71, 0.2);
}

.bc-form-card-header {
    margin-bottom: 1.1rem;
}

.bc-form-card-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.15rem;
}

.bc-form-card-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0;
}

.bc-form-card--a .bc-form-card-title {
    color: #E8C547;
}

.bc-form-card--b .bc-form-card-title {
    color: #42A5F5;
}

.bc-form-prefill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.25);
    color: #E8C547;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: background 0.18s ease;
    font-family: inherit;
}

.bc-form-prefill:hover {
    background: rgba(232, 197, 71, 0.15);
}

.bc-form-prefill--applied {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

.bc-form-prefill-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.bc-form-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.bc-field {
    display: flex;
    flex-direction: column;
}

.bc-field label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 0.3rem;
    letter-spacing: 0.02em;
}

.bc-field select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8e0d4;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.bc-field select:hover {
    border-color: rgba(232, 197, 71, 0.3);
}

.bc-field select:focus {
    outline: none;
    border-color: #E8C547;
    background: rgba(0, 0, 0, 0.5);
}

/* Full-width field for the optional Name input - spans both columns */
.bc-field--full {
    grid-column: 1 / -1;
}

.bc-name-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8e0d4;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease;
    width: 100%;
    box-sizing: border-box;
}

.bc-name-input::placeholder {
    color: #666;
    font-style: italic;
}

.bc-name-input:hover {
    border-color: rgba(232, 197, 71, 0.3);
}

.bc-name-input:focus {
    outline: none;
    border-color: #E8C547;
    background: rgba(0, 0, 0, 0.5);
}

.bc-field-error {
    border-color: #FF6B35 !important;
    animation: bc-shake 0.4s ease;
}

@keyframes bc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}


/* ── Calculate row ── */
.bc-calculate-row {
    text-align: center;
}

.bc-calc-btn {
    background: linear-gradient(135deg, #E8C547 0%, #d4a936 100%);
    color: #1a1a1a;
    border: none;
    padding: 0.95rem 2.2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 16px rgba(232, 197, 71, 0.2);
}

.bc-calc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 197, 71, 0.3);
}

.bc-calc-btn:active {
    transform: translateY(0);
}

.bc-form-note {
    font-size: 0.82rem;
    color: #888;
    margin: 0.85rem 0 0;
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   RESULTS
   ══════════════════════════════════════════════════════════════ */

.bc-results {
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}


/* ── Headline summary ── */
.bc-headline {
    background: radial-gradient(ellipse at top, rgba(232, 197, 71, 0.06) 0%, rgba(15, 15, 20, 0.5) 60%, rgba(10, 10, 10, 0.5) 100%);
    border: 1px solid rgba(232, 197, 71, 0.2);
    border-radius: 16px;
    padding: 2rem 2rem 1.85rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.bc-headline-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #E8C547;
    margin-bottom: 0.7rem;
}

/* Headline-top: aligns the eyebrow text with the Share button */
.bc-headline-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.bc-headline-top .bc-headline-eyebrow {
    margin-bottom: 0;
}

/* Share button - small, unobtrusive but available */
.bc-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.25);
    color: #E8C547;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, transform 0.15s ease;
}

.bc-share-btn:hover {
    background: rgba(232, 197, 71, 0.15);
    transform: translateY(-1px);
}

.bc-share-btn-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.bc-share-btn--copied {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.35);
    color: #7CD37F;
}

.bc-headline-verdict {
    font-size: 2rem;
    font-weight: 700;
    color: #f5e9c8;
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.bc-headline-summary {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #d8cfc0;
    margin: 0 0 1.5rem;
    max-width: 760px;
}

.bc-headline-score {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    align-items: center;
}

@media (max-width: 600px) {
    .bc-headline-score {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.bc-score-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 3px solid #E8C547;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bc-score-circle--high { border-color: #4CAF50; }
.bc-score-circle--mid  { border-color: #E8C547; }
.bc-score-circle--low  { border-color: #FF6B35; }

.bc-score-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #f5e9c8;
    line-height: 1;
}

.bc-score-circle--high .bc-score-number { color: #4CAF50; }
.bc-score-circle--mid  .bc-score-number { color: #E8C547; }
.bc-score-circle--low  .bc-score-number { color: #FF6B35; }

.bc-score-label {
    font-size: 0.7rem;
    color: #999;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.bc-score-bars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bc-score-bar-row {
    display: grid;
    grid-template-columns: 130px 1fr 56px;
    gap: 0.85rem;
    align-items: center;
    /* position: relative needed so the absolutely-positioned tooltip
       anchors to this row. */
    position: relative;
}

/* Labelwrap holds the label text + the info "?" button side by side */
.bc-score-bar-labelwrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bc-score-bar-label {
    font-size: 0.82rem;
    color: #ccc;
    font-weight: 500;
}

/* Small "?" button - gold tinted, kept visible on touch devices where
   it serves as the tap target. On hover-capable devices the entire row
   triggers, but the button stays as a visual affordance. */
.bc-score-bar-info {
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.25);
    color: #E8C547;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.bc-score-bar-info:hover {
    background: rgba(232, 197, 71, 0.18);
    transform: scale(1.08);
}

.bc-score-bar-track {
    background: rgba(255, 255, 255, 0.06);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.bc-score-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.bc-score-bar-value {
    font-size: 0.82rem;
    color: #888;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Real floating tooltip. Anchored to the bar row (which is position: relative)
   but absolutely positioned so it overlays adjacent content rather than
   displacing it. Has a small triangular arrow pointing up at the bar.
   Z-index high so it renders above the score circle and other bars.

   Positioning: top is at 100% of the row (zero gap) PLUS a ::before bridge
   that extends back UP to fill the visual 8px breathing room. This makes
   the entire region from bar row to tooltip content one continuous hover
   zone - the cursor can move from bar to tooltip without losing :hover. */
.bc-score-bar-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 540px;
    margin-top: 8px;
    background: #1f1e1a;
    border: 1px solid rgba(232, 197, 71, 0.35);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #d8cfc0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Transparent bridge filling the gap between bar row and tooltip box.
   Makes the cursor's transit zone part of the tooltip hover area. */
.bc-score-bar-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 12px;
    /* invisible but interactive */
    background: transparent;
}

/* The visible arrow - drawn as a triangle via borders on the tooltip's
   ::after pseudo-element. Positioned at the top edge of the tooltip box. */
.bc-score-bar-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 80px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1f1e1a;
    /* Stack the arrow above the bridge so it's clickable too */
    margin-bottom: -1px;
    z-index: 1;
}

/* Shown state - either click-locked (--open) or hover-active (--hover-active).
   Both make the tooltip visible and interactive. */
.bc-score-bar-tooltip--open,
.bc-score-bar-tooltip--hover-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Pure CSS hover fallback: if JS hasn't kicked in yet, plain :hover still
   shows the tooltip. JS layered on top adds the linger behavior. */
@media (hover: hover) and (pointer: fine) {
    .bc-score-bar-row:hover .bc-score-bar-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    .bc-score-bar-info {
        opacity: 0.5;
        transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    }
    .bc-score-bar-row:hover .bc-score-bar-info {
        opacity: 1;
    }
}

/* Inline links in tooltip prose - gold tinted, underlined on hover only
   so the text reads as prose first and as a link only when the user moves
   to engage with it. */
.bc-tip-link {
    color: #E8C547;
    text-decoration: none;
    border-bottom: 1px dotted rgba(232, 197, 71, 0.4);
    transition: border-bottom-color 0.15s ease, color 0.15s ease;
}

.bc-tip-link:hover {
    color: #F2D562;
    border-bottom: 1px solid #E8C547;
}

/* Score band descriptor - paragraph sitting below the score bars,
   gives the user context for what their tier of score actually means. */
.bc-score-band-desc {
    margin: 1.5rem 0 0;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #b8b0a3;
}

/* Framing note - smaller, italic, sits between the score bars and the
   band descriptor. Frames the score as descriptive rather than predictive. */
.bc-score-framing {
    margin: 1.5rem 0 0;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #948b7e;
    font-style: italic;
    padding: 0 0.25rem;
    max-width: 720px;
}
.bc-score-framing + .bc-score-band-desc {
    margin-top: 1rem;
}

/* Synthesis paragraph - the "why this score" headline interpretation,
   calls out the 1-2 biggest drivers. */
.bc-score-synthesis {
    margin: 0.85rem 0 0;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(232, 197, 71, 0.06) 0%, rgba(232, 197, 71, 0.02) 100%);
    border: 1px solid rgba(232, 197, 71, 0.2);
    border-radius: 8px;
}

.bc-score-synthesis p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: #d8cfc0;
}


/* ── Side-by-side wheels ── */
.bc-wheels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.25rem;
}

@media (max-width: 760px) {
    .bc-wheels {
        grid-template-columns: 1fr;
    }
}

.bc-wheel-col {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.25rem;
}

.bc-wheel-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bc-wheel-person {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #888;
}

.bc-wheel-col--a .bc-wheel-person { color: #E8C547; }
.bc-wheel-col--b .bc-wheel-person { color: #42A5F5; }

.bc-wheel-archetype {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f0e6d3;
}

.bc-wheel-dm {
    font-size: 0.82rem;
    color: #999;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}


/* ── Mini-chart (placeholder for session 1, replaced by full wheel in session 2) ── */
.bc-mini-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.bc-mini-pillar {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.85rem 0.5rem;
    text-align: center;
}

.bc-mini-pillar--empty {
    opacity: 0.4;
}

.bc-mini-pillar-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.55rem;
}

.bc-mini-pillar-stem {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.15rem;
}

.bc-mini-pillar-branch {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.45rem;
    opacity: 0.85;
}

.bc-mini-pillar-animal {
    font-size: 0.72rem;
    color: #ccc;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.bc-mini-pillar-element {
    font-size: 0.62rem;
    color: #888;
    letter-spacing: 0.02em;
}


/* ── Sections (common) ── */
.bc-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.65rem 1.75rem;
    margin-bottom: 1.85rem;
}

.bc-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0 0 0.55rem;
    letter-spacing: -0.005em;
}

.bc-section-intro {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #aaa;
    margin: 0 0 1.5rem;
    max-width: 720px;
}


/* ── Day Master interaction display ── */
.bc-dm-pair {
    display: grid;
    grid-template-columns: 1fr 1.8fr 1fr;
    gap: 1.2rem;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .bc-dm-pair {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.bc-dm-side {
    text-align: center;
}

.bc-dm-char {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.bc-dm-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e8e0d4;
    margin-bottom: 0.15rem;
}

.bc-dm-polarity {
    font-size: 0.72rem;
    color: #888;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bc-dm-relation {
    text-align: center;
}

.bc-dm-relation-arrow {
    font-size: 1.4rem;
    color: #666;
    margin-bottom: 0.45rem;
}

.bc-dm-relation-tone {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.01em;
}

.bc-dm-relation-tone--generative {
    background: rgba(76, 175, 80, 0.12);
    color: #7CD37F;
}

.bc-dm-relation-tone--parallel {
    background: rgba(232, 197, 71, 0.12);
    color: #E8C547;
}

.bc-dm-relation-tone--controlling {
    background: rgba(255, 138, 76, 0.12);
    color: #FF8A4C;
}

.bc-dm-relation-tone--neutral {
    background: rgba(255, 255, 255, 0.06);
    color: #ccc;
}

.bc-dm-blurb {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #d8cfc0;
    margin: 0 0 1rem;
    max-width: 760px;
}

.bc-dm-blurb:last-child {
    margin-bottom: 0;
}


/* ── Stem Combination section ──
   Visually parallels the Day Master Dynamic block (two stem characters
   flanking a center symbol). Adds a "transforms toward" pill that
   communicates the classical transformation element without claiming
   the transformation is active (since real transformation requires
   chart-wide support). */
.bc-stem-combo-visual {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 1.2rem;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .bc-stem-combo-visual {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

.bc-stem-combo-side {
    text-align: center;
}

.bc-stem-combo-char {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 2.7rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.bc-stem-combo-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e8e0d4;
    margin-bottom: 0.2rem;
}

.bc-stem-combo-person {
    font-size: 0.78rem;
    color: #999;
    letter-spacing: 0.04em;
}

.bc-stem-combo-link {
    text-align: center;
}

.bc-stem-combo-symbol {
    font-size: 1.6rem;
    color: #c9a978;
    margin-bottom: 0.4rem;
    line-height: 1;
}

.bc-stem-combo-label {
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bc-stem-combo-transforms {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(201, 169, 120, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 1.25rem;
}

.bc-stem-combo-transforms-label {
    font-size: 0.72rem;
    color: #999;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bc-stem-combo-transforms-element {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bc-stem-combo-headline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #e8e0d4;
    margin: 0 0 0.85rem;
    letter-spacing: 0.01em;
}

.bc-stem-combo-blurb {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #d8cfc0;
    margin: 0 0 1rem;
    max-width: 760px;
}

.bc-stem-combo-blurb:last-child {
    margin-bottom: 0;
}


/* ── Cross-pillar interactions grid ── */
.bc-interactions-grid {
    display: grid;
    /* min(330px, 100%) prevents horizontal overflow on phones narrower
       than 330px (e.g. iPhone SE at 320px). A flat 330px minimum would
       force a track wider than the viewport and push the card off-screen. */
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 0.95rem;
}

.bc-interactions-empty {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1.25rem;
    color: #aaa;
    font-size: 0.92rem;
    line-height: 1.65;
}

.bc-interaction-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.95rem 1.05rem;
    transition: border-color 0.18s ease;
}

.bc-interaction-card:hover {
    border-color: rgba(232, 197, 71, 0.18);
}

.bc-interaction-card--positive {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.01) 100%);
    border-color: rgba(76, 175, 80, 0.15);
}

.bc-interaction-card--negative {
    background: linear-gradient(135deg, rgba(255, 138, 76, 0.05) 0%, rgba(255, 138, 76, 0.01) 100%);
    border-color: rgba(255, 138, 76, 0.15);
}

.bc-interaction-icon {
    font-size: 1.1rem;
    line-height: 1.2;
}

.bc-interaction-body {
    min-width: 0;
}

.bc-interaction-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.bc-interaction-pillars {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e8e0d4;
    letter-spacing: 0.02em;
}

.bc-interaction-type {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
}

.bc-interaction-card--positive .bc-interaction-type {
    color: #4CAF50;
}

.bc-interaction-card--negative .bc-interaction-type {
    color: #FF8A4C;
}

.bc-interaction-animals {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    font-size: 0.86rem;
    color: #ccc;
    font-weight: 500;
}

.bc-interaction-vs {
    color: #666;
    font-size: 0.78rem;
}

.bc-interaction-desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #aaa;
    margin: 0;
}

.bc-interactions-overflow {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    font-size: 0.86rem;
    padding: 0.85rem;
    font-style: italic;
}


/* ── Element exchange ── */
.bc-elements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 600px) {
    .bc-elements-grid {
        grid-template-columns: 1fr;
    }
}

.bc-element-col {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
}

.bc-element-col-header {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #E8C547;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bc-element-lead {
    font-size: 0.86rem;
    line-height: 1.55;
    color: #aaa;
    margin: 0 0 0.85rem;
}

.bc-element-empty {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #888;
    font-style: italic;
    margin: 0;
}

.bc-element-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bc-element-pill {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 18px;
    border: 1px solid var(--bc-el-color);
}

.bc-element-pill-name {
    font-weight: 700;
    color: var(--bc-el-color);
    font-size: 0.84rem;
}

.bc-element-pill-pct {
    font-size: 0.74rem;
    color: #999;
    font-variant-numeric: tabular-nums;
}


/* ── Guidance ── */
.bc-guidance p {
    font-size: 0.94rem;
    line-height: 1.7;
    color: #d8cfc0;
    margin: 0 0 0.95rem;
    max-width: 780px;
}

.bc-guidance p:last-child {
    margin-bottom: 0;
}


/* ── CTA row at the end ── */
.bc-cta-row {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin: 2rem 0 0;
    flex-wrap: wrap;
}

.bc-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.bc-cta--primary {
    background: rgba(232, 197, 71, 0.1);
    border-color: rgba(232, 197, 71, 0.3);
    color: #E8C547;
}

.bc-cta--primary:hover {
    background: rgba(232, 197, 71, 0.18);
    border-color: rgba(232, 197, 71, 0.5);
}

.bc-cta--secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ccc;
}

.bc-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f0e6d3;
}


/* ════════════════════════════════════════════════════════════════
   SEO SUBSTRATE - sections below the calculator
   ════════════════════════════════════════════════════════════════ */

.bc-seo-section {
    padding: 3rem 1.5rem 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bc-seo-section:first-of-type {
    margin-top: 1rem;
}

.bc-seo-inner {
    max-width: 980px;
    margin: 0 auto;
}

.bc-seo-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0 0 0.85rem;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.bc-seo-intro {
    font-size: 1rem;
    line-height: 1.7;
    color: #b8b0a3;
    margin: 0 0 1.75rem;
    max-width: 720px;
}

.bc-seo-body {
    font-size: 0.96rem;
    line-height: 1.7;
    color: #c4bcae;
    margin: 0 0 1.1rem;
    max-width: 720px;
}

.bc-seo-body--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 1.5rem;
}

.bc-seo-body:last-child {
    margin-bottom: 0;
}

.bc-seo-section a {
    color: #E8C547;
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 197, 71, 0.3);
    transition: border-color 0.18s ease;
}

.bc-seo-section a:hover {
    border-bottom-color: #E8C547;
}

.bc-seo-subhead {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 2rem 0 0.85rem;
    letter-spacing: -0.005em;
}


/* ── Framework section (four layers) ── */
.bc-seo-layers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
    margin-top: 1.5rem;
}

@media (max-width: 720px) {
    .bc-seo-layers {
        grid-template-columns: 1fr;
    }
}

.bc-seo-layer {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.35rem 1.4rem;
    position: relative;
}

.bc-seo-layer-num {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(232, 197, 71, 0.1);
    border: 1px solid rgba(232, 197, 71, 0.3);
    color: #E8C547;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc-seo-layer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0 0 0.15rem;
    padding-right: 2.2rem;
}

.bc-seo-layer-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8C547;
    margin: 0 0 0.85rem;
}

.bc-seo-layer-body {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #b8b0a3;
    margin: 0;
}


/* ── How-to section ── */
.bc-seo-howto-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.bc-seo-howto-item {
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(232, 197, 71, 0.35);
    border-radius: 4px;
    padding: 1rem 1.25rem;
}

.bc-seo-howto-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0 0 0.5rem;
}

.bc-seo-howto-body {
    font-size: 0.94rem;
    line-height: 1.65;
    color: #b8b0a3;
    margin: 0;
}


/* ── Patterns section ── */
.bc-seo-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 0.85rem;
    margin: 1rem 0 1.5rem;
}

.bc-seo-pattern-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bc-seo-pattern-card:hover {
    background: rgba(232, 197, 71, 0.04);
    border-color: rgba(232, 197, 71, 0.3);
    border-bottom-color: rgba(232, 197, 71, 0.3);
    transform: translateY(-1px);
}

.bc-seo-pattern-card--productive {
    border-left: 3px solid rgba(76, 175, 80, 0.4);
}

.bc-seo-pattern-card--clash {
    border-left: 3px solid rgba(255, 138, 76, 0.4);
}

.bc-seo-pattern-card--special {
    border-left: 3px solid rgba(232, 197, 71, 0.5);
}

.bc-seo-pattern-emoji {
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
}

.bc-seo-pattern-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: #f0e6d3;
}

.bc-seo-pattern-tag {
    font-size: 0.78rem;
    color: #999;
}


/* Link list for "Specific Scenarios" */
.bc-seo-link-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.bc-seo-link-item {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.bc-seo-link-item:hover {
    background: rgba(232, 197, 71, 0.04);
    border-color: rgba(232, 197, 71, 0.3);
    border-bottom-color: rgba(232, 197, 71, 0.3);
}

.bc-seo-link-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #f0e6d3;
}

.bc-seo-link-desc {
    font-size: 0.85rem;
    color: #999;
}


/* ── Limits section (Can / Cannot) ── */
.bc-seo-limits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (max-width: 720px) {
    .bc-seo-limits-grid {
        grid-template-columns: 1fr;
    }
}

.bc-seo-limit-card {
    background: rgba(255, 255, 255, 0.025);
    border-radius: 12px;
    padding: 1.5rem;
}

.bc-seo-limit-card--can {
    border: 1px solid rgba(76, 175, 80, 0.25);
    background: rgba(76, 175, 80, 0.04);
}

.bc-seo-limit-card--cannot {
    border: 1px solid rgba(255, 138, 76, 0.25);
    background: rgba(255, 138, 76, 0.04);
}

.bc-seo-limit-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0 0 0.7rem;
}

.bc-seo-limit-card--can .bc-seo-limit-title {
    color: #7CD37F;
}

.bc-seo-limit-card--cannot .bc-seo-limit-title {
    color: #FF8A4C;
}

.bc-seo-limit-body {
    font-size: 0.94rem;
    line-height: 1.65;
    color: #c4bcae;
    margin: 0;
}


/* ── FAQ section ── */
.bc-seo-faq-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0 1.25rem;
    margin-bottom: 0.7rem;
    transition: border-color 0.18s ease;
}

.bc-seo-faq-item:hover {
    border-color: rgba(232, 197, 71, 0.15);
}

.bc-seo-faq-item[open] {
    border-color: rgba(232, 197, 71, 0.25);
}

.bc-seo-faq-q {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #e8e0d4;
    padding: 1rem 0;
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

.bc-seo-faq-q::-webkit-details-marker {
    display: none;
}

.bc-seo-faq-q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    color: #E8C547;
    transition: transform 0.18s ease;
}

.bc-seo-faq-item[open] .bc-seo-faq-q::after {
    transform: translateY(-50%) rotate(45deg);
}

.bc-seo-faq-a {
    font-size: 0.94rem;
    line-height: 1.7;
    color: #b8b0a3;
    margin: 0 0 1.1rem;
    padding-top: 0.3rem;
}


/* ── Learn More section (footer of SEO substrate) ── */
.bc-seo-learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.bc-seo-learn-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.bc-seo-learn-card:hover {
    background: rgba(232, 197, 71, 0.04);
    border-color: rgba(232, 197, 71, 0.3);
    border-bottom-color: rgba(232, 197, 71, 0.3);
    transform: translateY(-1px);
}

.bc-seo-learn-icon {
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
}

.bc-seo-learn-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #f0e6d3;
}

.bc-seo-learn-desc {
    font-size: 0.83rem;
    line-height: 1.5;
    color: #999;
}


/* ════════════════════════════════════════════════════════════════
   SPOUSE PALACE SECTION
   New section between Day Master Dynamic and Cross-Chart Interactions.
   Shows what each chart was seeking in a partner vs. who the partner
   actually is, with an alignment classification.
   ════════════════════════════════════════════════════════════════ */

.bc-sp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0 0;
}

@media (max-width: 760px) {
    .bc-sp-grid {
        grid-template-columns: 1fr;
    }
}

.bc-sp-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bc-sp-header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bc-sp-person {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8C547;
}

.bc-sp-animal {
    font-size: 1.05rem;
    color: #f0e6d3;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.bc-sp-animal-emoji {
    font-size: 1.25rem;
}

.bc-sp-animal-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: #948b7e;
}

/* Each block within a card is one "field" - seeking, or actual partner */
.bc-sp-block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.bc-sp-block-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #948b7e;
}

.bc-sp-block-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
}

.bc-sp-block-tag--seeking {
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.25);
    color: #E8C547;
}

.bc-sp-block-tag--actual {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.25);
    color: #7CD37F;
}

.bc-sp-block-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #b8b0a3;
    margin: 0;
}

.bc-sp-block-meta {
    font-size: 0.78rem;
    color: #6e655a;
    margin: 0;
    font-style: italic;
}

.bc-ten-god-label {
    color: #c4bcae;
    font-weight: 500;
    font-style: normal;
}

/* Alignment footer - the verdict on whether the chart found what it was looking for. */
.bc-sp-alignment {
    margin-top: 0.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    text-align: center;
}

.bc-sp-alignment-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bc-sp-alignment--match {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.bc-sp-alignment--match .bc-sp-alignment-label { color: #7CD37F; }

.bc-sp-alignment--related {
    background: rgba(232, 197, 71, 0.05);
    border: 1px solid rgba(232, 197, 71, 0.25);
}
.bc-sp-alignment--related .bc-sp-alignment-label { color: #E8C547; }

.bc-sp-alignment--mismatch {
    background: rgba(255, 138, 76, 0.05);
    border: 1px solid rgba(255, 138, 76, 0.22);
}
.bc-sp-alignment--mismatch .bc-sp-alignment-label { color: #FF8A4C; }

/* Empty state - shown when a chart has no birth time (no Spouse Palace check possible). */
.bc-sp-empty {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.bc-sp-empty-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #948b7e;
    margin: 0.5rem 0 0;
}

/* Synthesis paragraph below the two columns - reads both alignments together. */
.bc-sp-synthesis {
    margin: 1.5rem 0 0;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(232, 197, 71, 0.04) 0%, rgba(232, 197, 71, 0.01) 100%);
    border: 1px solid rgba(232, 197, 71, 0.15);
    border-radius: 8px;
}

.bc-sp-synthesis p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #c4bcae;
}


/* ════════════════════════════════════════════════════════════════
   ROMANTIC VOCABULARY SECTION
   Wealth/Officer god presence per chart + cross-chart resonance.
   Mirrors the Spouse Palace section visually but uses its own color
   accents (Wealth = soft green tone, Officer = soft blue tone, Both =
   gold, Neither = muted gray).
   ════════════════════════════════════════════════════════════════ */

.bc-rom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0 0;
}

@media (max-width: 760px) {
    .bc-rom-grid {
        grid-template-columns: 1fr;
    }
}

.bc-rom-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.bc-rom-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bc-rom-person {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8C547;
}

/* Profile tag - colored by which family dominates the chart. */
.bc-rom-profile-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
}

.bc-rom-profile-tag--wealth {
    background: rgba(124, 211, 127, 0.08);
    border: 1px solid rgba(124, 211, 127, 0.28);
    color: #7CD37F;
}

.bc-rom-profile-tag--officer {
    background: rgba(66, 165, 245, 0.08);
    border: 1px solid rgba(66, 165, 245, 0.28);
    color: #6CB7F5;
}

.bc-rom-profile-tag--both {
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.28);
    color: #E8C547;
}

.bc-rom-profile-tag--neither {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #b8b0a3;
}

/* Wealth/Officer presence row - label on left, strength badge + score on right. */
.bc-rom-family-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bc-rom-family-row:last-of-type {
    border-bottom: none;
}

.bc-rom-family-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #c4bcae;
    letter-spacing: 0.02em;
}

.bc-rom-family-detail {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.bc-rom-strength {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

.bc-rom-strength--strong {
    background: rgba(232, 197, 71, 0.12);
    color: #E8C547;
}

.bc-rom-strength--present {
    background: rgba(124, 211, 127, 0.1);
    color: #7CD37F;
}

.bc-rom-strength--dormant {
    background: rgba(255, 255, 255, 0.05);
    color: #6e655a;
}

.bc-rom-family-score {
    font-size: 0.82rem;
    color: #948b7e;
    font-variant-numeric: tabular-nums;
    min-width: 1.8em;
    text-align: right;
}

.bc-rom-profile-blurb {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #b8b0a3;
    margin: 0.2rem 0 0;
}

/* Resonance footer - whether the actual partner speaks this chart's language. */
.bc-rom-resonance {
    margin-top: 0.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    text-align: center;
}

.bc-rom-resonance-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bc-rom-resonance--on-vocabulary {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.bc-rom-resonance--on-vocabulary .bc-rom-resonance-label { color: #7CD37F; }

.bc-rom-resonance--related {
    background: rgba(232, 197, 71, 0.05);
    border: 1px solid rgba(232, 197, 71, 0.25);
}
.bc-rom-resonance--related .bc-rom-resonance-label { color: #E8C547; }

.bc-rom-resonance--off-vocabulary {
    background: rgba(255, 138, 76, 0.05);
    border: 1px solid rgba(255, 138, 76, 0.22);
}
.bc-rom-resonance--off-vocabulary .bc-rom-resonance-label { color: #FF8A4C; }

/* Synthesis paragraph below the two columns - cross-chart resonance reading. */
.bc-rom-synthesis {
    margin: 1.5rem 0 0;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(124, 211, 127, 0.04) 0%, rgba(66, 165, 245, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.bc-rom-synthesis p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #c4bcae;
}


/* ════════════════════════════════════════════════════════════════
   LIVED DOMAINS SECTION
   Four domain cards (In Love, Communication, Conflict, Long-term)
   each synthesizing the chart math into lived-experience language.
   Each card has its own subtle accent color via CSS variable.
   ════════════════════════════════════════════════════════════════ */

.bc-domains-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0 0;
}

@media (max-width: 760px) {
    .bc-domains-grid {
        grid-template-columns: 1fr;
    }
}

.bc-domain-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--bc-domain-accent, rgba(232, 197, 71, 0.35));
    border-radius: 10px;
    padding: 1.2rem 1.35rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.bc-domain-card:hover {
    background: rgba(255, 255, 255, 0.035);
}

.bc-domain-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bc-domain-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.bc-domain-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f0e6d3;
    margin: 0;
    letter-spacing: -0.005em;
}

.bc-domain-body p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #b8b0a3;
    margin: 0 0 0.85rem;
}

.bc-domain-body p:last-child {
    margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE QA HARDENING (added May 2026)
   Consolidated fixes from a mobile pass. Targets the narrowest common
   phones (320-380px) where fixed-width grids and tight columns can
   overflow or crowd. Kept in one block so the mobile contract is
   readable in one place rather than scattered through the file.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* The score-bar row's label column is a fixed 130px; on a ~272px
       content area (iPhone SE) that leaves too little for the bar.
       Shrink the label and value columns so the bar keeps usable width. */
    .bc-score-bar-row {
        grid-template-columns: 96px 1fr 40px;
        gap: 0.5rem;
    }
    .bc-score-bar-label {
        font-size: 0.74rem;
    }
    .bc-score-bar-value {
        font-size: 0.74rem;
    }

    /* The tooltip arrow is positioned at a fixed left:80px which, after
       the label column shrinks, can sit past the "?" button. Pull it
       left to stay under the label/info region. */
    .bc-score-bar-tooltip::after {
        left: 60px;
    }

    /* Four-pillar mini-chart: keep all four across (correct BaZi layout)
       but tighten gap and padding so the columns don't crowd their text. */
    .bc-mini-chart {
        gap: 0.35rem;
    }
    .bc-mini-pillar {
        padding: 0.65rem 0.3rem;
    }
    .bc-mini-pillar-animal {
        font-size: 0.66rem;
    }
    .bc-mini-pillar-element {
        font-size: 0.62rem;
    }

    /* Hero title can be large; scale it down so it doesn't wrap awkwardly
       or push the subtitle below the fold on small screens. */
    .bc-hero-title {
        font-size: 1.7rem;
        line-height: 1.2;
    }

    /* Section horizontal padding eats width on phones. Trim it so content
       gets more room without touching the edges. */
    .bc-section,
    .bc-headline,
    .bc-wheels {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Score circle is 110px; center it and give it breathing room when
       the score block stacks vertically. */
    .bc-headline-score {
        justify-items: center;
        text-align: center;
    }
    .bc-score-bars {
        width: 100%;
    }
}

/* Touch devices of any width: the cross-chart interaction cards and
   romantic/spouse cards have :hover border states that never fire on
   touch. Give them their resting border so they don't look "off" while
   waiting for a hover that never comes. (Cosmetic, applies where the
   primary input is touch.) */
@media (hover: none) {
    .bc-interaction-card:hover,
    .bc-seo-layer:hover {
        border-color: rgba(255, 255, 255, 0.06);
    }
}

/* Guard against any single long token (a pasted name, a long word in a
   reading) forcing horizontal scroll on the whole page. */
@media (max-width: 600px) {
    .bc-dm-blurb,
    .bc-stem-combo-blurb,
    .bc-rom-profile-blurb,
    .bc-sp-block-text,
    .bc-domain-body,
    .bc-score-band-desc,
    .bc-score-framing {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ════════════════════════════════════════════════════════════════
   VISUAL ELEVATION PASS — JUNE 2026
   Brings the BaZi compatibility calculator in line with the
   editorial typography established on /zodiac/{animal} and the
   compatibility pair pages. The biggest funnel source into this
   page is the animal pages, which now use Cormorant Garamond
   display serif; this page should not feel plainer than the pages
   that send traffic to it.

   This is a styling-only layer. It does NOT touch any markup the
   bazi-engine.js populates - only the typography and visual weight
   of the static chrome (hero, form intro, section titles) and the
   score reveal containers.

   Cormorant Garamond chosen because:
     - It already appears on this page (.bc-stem-combo-headline)
     - It matches the animal pages (primary funnel source)
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
    --bc-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --bc-accent: #E8C547;
}


/* ── HERO ELEVATION ──
   The hero was a plain 2.1rem bold sans title. Now a confident
   two-tone display serif headline that matches the animal/compat
   page treatment. Adds an eyebrow above the title for rhythm. */

.bc-hero {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* New eyebrow element (added via markup) */
.bc-hero-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bc-accent);
    opacity: 0.85;
    margin-bottom: 1.2rem;
}

.bc-hero-title {
    font-family: var(--bc-display);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: rgba(245, 233, 200, 0.96);
    margin: 0 0 1rem;
}

/* Two-tone treatment: "BaZi Compatibility" lead + "Calculator" accent */
.bc-hero-title .bc-hero-title-accent {
    font-style: italic;
    color: var(--bc-accent);
    font-weight: 600;
}

.bc-hero-subtitle {
    font-family: var(--bc-display);
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.5;
    color: rgba(232, 224, 212, 0.72);
    max-width: 640px;
}


/* ── FORM INTRO BRIDGE ──
   The emotional bridge between "I want to test my relationship"
   (the energy that funnels users here) and the two empty form
   cards. Slightly larger, warmer, less utilitarian. */

.bc-form-intro {
    font-family: var(--bc-display);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.55;
    color: rgba(232, 224, 212, 0.78);
    max-width: 720px;
}


/* ── SECTION TITLES ──
   The eight result sections (Day Master Dynamic, Spouse Palace,
   Romantic Vocabulary, etc.) get the display serif so they read
   as editorial chapter heads, not utilitarian labels. */

.bc-section-title {
    font-family: var(--bc-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: rgba(245, 233, 200, 0.95);
}

.bc-section-intro {
    font-size: 1.04rem;
    line-height: 1.7;
    color: rgba(216, 207, 192, 0.82);
    max-width: 68ch;
}


/* ── SCORE REVEAL ──
   The payoff moment. The verdict headline gets the display serif
   at larger size; the score number gets display weight. This is
   the single most important moment on the page - the thing the
   user came for. */

.bc-headline-verdict {
    font-family: var(--bc-display);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: rgba(245, 233, 200, 0.97);
}

.bc-headline-summary {
    font-family: var(--bc-display);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.55;
    color: rgba(216, 207, 192, 0.88);
}

/* Score number gets the display serif - it's the hero number */
.bc-score-number {
    font-family: var(--bc-display);
    font-size: 2.8rem;
    font-weight: 700;
}

/* Slightly larger, more presence on the score circle */
.bc-score-circle {
    width: 124px;
    height: 124px;
}


/* ── STEM COMBO HEADLINE (already Cormorant, just harmonize size) ── */
.bc-stem-combo-headline {
    font-size: 1.75rem;
}


/* ── TABULAR FIGURES for the score and any numeric output ── */
.bc-score-number,
.bc-score-bars,
.bc-dim-score {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
}


/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .bc-hero-subtitle {
        font-size: 1.2rem;
    }
    .bc-form-intro {
        font-size: 1.08rem;
    }
    .bc-section-title {
        font-size: 1.7rem;
    }
}

@media (max-width: 600px) {
    .bc-hero {
        padding-top: 2rem;
    }
    .bc-hero-subtitle {
        font-size: 1.1rem;
    }
    .bc-section-title {
        font-size: 1.5rem;
    }
    .bc-headline-summary {
        font-size: 1.15rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   SCORE REVEAL ANIMATION SUPPORT
   Styles for the ring overlay drawn by bazi-compat-animations.js.
   The ring is a conic-gradient arc that sweeps to the score value.
   The existing border on .bc-score-circle becomes the track; this
   ring sits just inside it as the animated colored arc.
   ════════════════════════════════════════════════════════════════ */

/* The score circle becomes the positioning context for the ring */
.bc-score-circle {
    position: relative;
}

/* The ring overlay: a conic-gradient arc masked into a thin ring
   shape via a radial mask. Sits behind the number/label content. */
.bc-score-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    z-index: 0;
    /* Mask the conic gradient into a ring (only the outer band shows) */
    -webkit-mask: radial-gradient(circle, transparent 0, transparent 56%, #000 57%, #000 100%);
    mask: radial-gradient(circle, transparent 0, transparent 56%, #000 57%, #000 100%);
    /* background is set inline by the animation script */
    pointer-events: none;
}

/* Keep the number and label above the ring */
.bc-score-number,
.bc-score-label {
    position: relative;
    z-index: 1;
}

/* When the ring is present, soften the static border so the animated
   ring is the visual focus (the border becomes a faint track). */
.bc-score-circle:has(.bc-score-ring) {
    border-color: rgba(255, 255, 255, 0.08);
}

/* The score number gets a subtle scale-in pulse when it lands.
   Triggered by the .bc-score-landed class the script could add;
   kept CSS-only-safe by using an animation that runs once. */
@media (prefers-reduced-motion: no-preference) {
    .bc-score-ring {
        will-change: background;
    }
}


/* ════════════════════════════════════════════════════════════════
   POST-RESULTS NEXT-STEP BLOCK
   Lateral moves at peak engagement, after the reading payoff.
   Two cards (Western Synastry + single-chart BaZi) plus the
   recalculate button. Not a funnel-out - these go deeper/sideways.
   ════════════════════════════════════════════════════════════════ */

.bc-nextsteps {
    max-width: 1200px;
    margin: 3.5rem auto 0;
    padding: 0 1.5rem;
}

.bc-nextsteps-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bc-accent, #E8C547);
    opacity: 0.85;
    margin-bottom: 1.2rem;
    text-align: center;
}

.bc-nextsteps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.bc-nextstep-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem 1.75rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.bc-nextstep-card:hover {
    border-color: rgba(232, 197, 71, 0.4);
    background: rgba(232, 197, 71, 0.04);
    transform: translateY(-2px);
}

.bc-nextstep-card-title {
    font-family: var(--bc-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(245, 233, 200, 0.96);
    line-height: 1.15;
}

.bc-nextstep-card-desc {
    font-size: 0.96rem;
    line-height: 1.6;
    color: rgba(216, 207, 192, 0.78);
}

.bc-nextstep-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bc-accent, #E8C547);
    letter-spacing: 0.01em;
}

.bc-nextstep-card-action::after {
    content: '→';
    font-size: 1rem;
    transition: transform 0.18s ease;
}

.bc-nextstep-card:hover .bc-nextstep-card-action::after {
    transform: translateX(4px);
}

.bc-nextsteps-recalc {
    display: flex;
    justify-content: center;
}

@media (max-width: 700px) {
    .bc-nextsteps-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .bc-nextstep-card {
        padding: 1.4rem 1.4rem;
    }
    .bc-nextstep-card-title {
        font-size: 1.3rem;
    }
}