/* ============================================================================
   /assets/css/ovulation-calculator.css
   ----------------------------------------------------------------------------
   ZC brand chrome for /ovulation-calculator. Class prefix .zc-ovc__*

   Layout / type tokens mirror blessings-from-patients and emotional-support
   (tri-gradient body, amber-pill eyebrow, amber-gradient title span, dashed
   amber callouts) so the page sits inside the same family as the rest of
   the site. Tool-specific UI (date input, stepper buttons, results card,
   calendar grid) is layered on top with the same colour palette.
   ============================================================================ */

/* §A  Page reset — kill the inherited content-wrap padding */
body .content-wrap.my-wrap-no-padding { padding: 0 !important; }
body .content-wrap.my-wrap-no-padding > div + div,
body .content-wrap.my-wrap-no-padding section { margin: 0; }


/* ============================================================================
   §1   HERO
   ============================================================================ */
.zc-ovc__hero {
    position: relative;
    padding: clamp(28px, 3.4vw, 48px) var(--zc-pad-x) clamp(16px, 1.8vw, 24px);
    background:
        radial-gradient(ellipse at 12% 0%,  rgba(207, 138, 63, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 88% 100%, rgba(46, 75, 113, 0.05) 0%, transparent 55%),
        linear-gradient(180deg, var(--zc-pearl, #fbf7ee) 0%, var(--zc-off-white) 100%);
}
.zc-ovc__hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a25), transparent);
}
.zc-ovc__hero-inner { width: 100%; }
@media (max-width: 991px) {
    .zc-ovc__hero { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}

/* — Breadcrumb pill — */
.zc-ovc__crumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.zc-ovc__crumb-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--zc-warm-dk);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--zc-linen);
    transition: all 0.3s var(--zc-ease);
}
.zc-ovc__crumb-link:hover {
    color: var(--zc-amber-dk);
    background: var(--zc-amber-a08);
    border-color: var(--zc-amber-a25);
    transform: translateY(-1px);
}
.zc-ovc__crumb-link i { font-size: 11px; }
.zc-ovc__crumb-sep { color: var(--zc-amber-a35); font-size: 10px; }
.zc-ovc__crumb-current {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    color: var(--zc-white);
    box-shadow: 0 4px 12px var(--zc-amber-a35);
}
.zc-ovc__crumb-current i { font-size: 11px; }

/* — Heading block — */
.zc-ovc__head { margin: 0; padding: 0; }
.zc-ovc__head-top {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 14px;
}
.zc-ovc__head-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber-a12, rgba(207,138,63,0.12)) 0%, var(--zc-amber-a08) 100%);
    border: 1px solid var(--zc-amber-a18, rgba(207,138,63,0.18));
    box-shadow: 0 2px 8px rgba(207, 138, 63, 0.08);
    font-family: var(--zc-f-heading);
    font-size: clamp(9.5px, 0.7vw + 4px, 11px);
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-ovc__head-eyebrow-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 8px var(--zc-amber-a45);
    flex-shrink: 0;
}
.zc-ovc__head-status {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--zc-warm-dk);
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(18, 12, 4, 0.06);
    white-space: nowrap;
}
.zc-ovc__head-status b { color: var(--zc-charcoal); font-weight: 700; }
.zc-ovc__head-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--zc-success, #1A9E5C);
    box-shadow: 0 0 8px rgba(26, 158, 92, 0.55);
    animation: zc-ovc-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes zc-ovc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.3); }
}
.zc-ovc__head-title {
    font-family: var(--zc-f-display);
    font-size: clamp(28px, 2vw + 16px, 44px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.7px;
    color: var(--zc-charcoal);
    margin: 0 0 10px;
}
.zc-ovc__head-title span {
    font-weight: 500;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__head-sub {
    font-family: var(--zc-f-body);
    font-size: clamp(13.5px, 0.4vw + 9px, 15.5px);
    line-height: 1.65;
    color: var(--zc-warm-dk);
    margin: 0;
    max-width: 720px;
    letter-spacing: 0.05px;
}


/* ============================================================================
   §2   CALCULATOR — form + results panel
   ============================================================================ */
.zc-ovc__calc {
    padding: clamp(20px, 2.4vw, 32px) var(--zc-pad-x) clamp(36px, 4vw, 64px);
    background: var(--zc-off-white);
}
@media (max-width: 991px) {
    .zc-ovc__calc { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-ovc__calc-grid {
    display: grid;
    /* Right column is wider — it carries the full dashboard (stats row +
       calendar + pie + bar) while the left column only holds the form. */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr);
    gap: clamp(16px, 1.6vw, 28px);
    align-items: stretch;
}
@media (min-width: 881px) {
    /* The whole calculator becomes a viewport-fit dashboard: form + results
       sit side-by-side and together fill ~70vh, so the user sees their
       inputs and the results without scrolling. Inner panels become flex
       columns and can scroll internally if their content overflows. */
    .zc-ovc__calc-grid {
        min-height: clamp(560px, 70vh, 780px);
    }
    .zc-ovc__form,
    .zc-ovc__results,
    .zc-ovc__dash-right {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: clamp(560px, 70vh, 780px);
        overflow: hidden;     /* outer card never scrolls; inner panels do */
    }
}
@media (max-width: 880px) {
    .zc-ovc__calc-grid { grid-template-columns: 1fr; }
}

/* — Form panel — */
.zc-ovc__form {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 14px;
    padding: clamp(14px, 1.5vw, 20px);
    box-shadow: 0 14px 36px -20px rgba(46, 75, 113, 0.14);
    position: relative;
}
.zc-ovc__form::before {
    content: "";
    position: absolute; top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a25) 18%, var(--zc-amber-dk) 50%, var(--zc-amber-a25) 82%, transparent);
}
.zc-ovc__form-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
/* Body fills the remaining height and arranges fields in a flex column so
   the calendar can grow into any spare space. No internal scroll — the
   form is sized to fit inside the 70vh shell without overflowing. */
.zc-ovc__form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zc-ovc__form-step {
    display: inline-grid; place-items: center;
    min-width: 38px;
    height: 24px;
    border-radius: 999px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    color: var(--zc-amber-dk);
    font-family: var(--zc-f-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 0 9px;
}
.zc-ovc__form-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.5vw + 11px, 18px);
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
}
.zc-ovc__field { margin-bottom: 0; min-width: 0; }
/* The LMP field (first child) grows to absorb spare vertical space so the
   mini-calendar can stretch; the cycle-length field stays at its natural
   compact height. */
.zc-ovc__field:first-of-type {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.zc-ovc__field label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--zc-charcoal);
    flex-shrink: 0;
}
.zc-ovc__field label small {
    font-weight: 500;
    color: var(--zc-warm-mid);
    margin-left: 4px;
    letter-spacing: 0;
}
.zc-ovc__field-req { color: var(--zc-amber-dk); }

/* — PICKED-DATE PILL — shows the LMP after the user clicks a calendar day. */
.zc-ovc__picked {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--zc-white);
    border: 1px dashed var(--zc-amber-a35);
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    color: var(--zc-warm-mid);
    margin-bottom: 7px;
    transition: all 0.25s var(--zc-ease);
    flex-shrink: 0;
    align-self: flex-start;
}
.zc-ovc__picked i { color: var(--zc-amber-dk); font-size: 12px; }
.zc-ovc__picked.is-set {
    background: linear-gradient(135deg, var(--zc-amber-a12, rgba(207,138,63,0.12)) 0%, var(--zc-amber-a08) 100%);
    border: 1px solid var(--zc-amber-a35);
    color: var(--zc-charcoal);
    font-family: var(--zc-f-display);
    font-weight: 500;
}

/* — MINI CALENDAR — custom inline picker. Compact build so the form
   panel sits inside its 70vh shell without scrolling. The card itself
   becomes a flex column so the day grid can absorb spare height. */
.zc-ovc__minical {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 10px;
    padding: 7px 9px;
    box-shadow: 0 6px 18px -14px rgba(46, 75, 113, 0.18);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.zc-ovc__minical-head {
    display: grid; grid-template-columns: 24px 1fr 24px;
    align-items: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.zc-ovc__minical-nav {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    cursor: pointer;
    transition: all 0.2s var(--zc-ease);
    font-size: 10px;
}
.zc-ovc__minical-nav:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
}
.zc-ovc__minical-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.zc-ovc__minical-label {
    text-align: center;
    font-family: var(--zc-f-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
}
.zc-ovc__minical-dow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.zc-ovc__minical-dow span {
    text-align: center;
    padding: 1px 0;
    font-family: var(--zc-f-heading);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-ovc__minical-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Six rows of days share the remaining height equally. */
    grid-auto-rows: minmax(0, 1fr);
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
}
.zc-ovc__minical-pad { min-height: 0; }
.zc-ovc__minical-day {
    min-height: 0;
    display: grid; place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    font-family: var(--zc-f-body);
    font-size: 10.5px;
    color: var(--zc-charcoal);
    cursor: pointer;
    transition: all 0.18s var(--zc-ease);
}
.zc-ovc__minical-day:hover:not(:disabled):not(.is-picked) {
    background: var(--zc-amber-a08);
    border-color: var(--zc-amber-a35);
    color: var(--zc-amber-dk);
}
.zc-ovc__minical-day.is-today {
    border-color: var(--zc-amber-a45);
    color: var(--zc-amber-dk);
    font-weight: 600;
}
.zc-ovc__minical-day.is-picked {
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    border-color: transparent;
    color: var(--zc-white);
    font-weight: 700;
    box-shadow: 0 6px 14px -4px var(--zc-amber-a45);
    transform: scale(1.04);
}
.zc-ovc__minical-day:disabled {
    color: var(--zc-stone, #b5ada1);
    cursor: not-allowed;
    opacity: 0.45;
}

/* — RADIO CHIPS — cycle length picker, no input box. 7-column grid on
   desktop so all seven options live on one tight row. */
.zc-ovc__radios {
    border: none;
    /* Top padding leaves room for the "Short/Average/Long" tags that float
       above the chips. */
    margin: 8px 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
@media (max-width: 540px) {
    .zc-ovc__radios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.zc-ovc__radio {
    position: relative;
    cursor: pointer;
}
.zc-ovc__radio input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.zc-ovc__radio-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 7px 3px 6px;
    border-radius: 8px;
    background: var(--zc-white);
    border: 1.5px solid var(--zc-linen);
    line-height: 1;
    text-align: center;
    transition: all 0.22s var(--zc-ease-spring);
    position: relative;
    /* overflow visible so the floating tag pill above the chip is not
       clipped at the rounded edge. */
    overflow: visible;
}
.zc-ovc__radio-num {
    font-family: var(--zc-f-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.4px;
    transition: color 0.2s var(--zc-ease);
}
.zc-ovc__radio-unit {
    margin-top: 2px;
    font-family: var(--zc-f-heading);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-ovc__radio-tag {
    /* Sit ABOVE the chip so it never overlays the number/unit text. */
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    font-family: var(--zc-f-heading);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a35);
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px -2px rgba(207, 138, 63, 0.18);
    z-index: 2;
}
.zc-ovc__radio:hover .zc-ovc__radio-card {
    border-color: var(--zc-amber-a35);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(207, 138, 63, 0.25);
}
.zc-ovc__radio input:checked + .zc-ovc__radio-card {
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    border-color: transparent;
    box-shadow: 0 12px 22px -8px var(--zc-amber-a45);
    transform: translateY(-2px);
}
.zc-ovc__radio input:checked + .zc-ovc__radio-card .zc-ovc__radio-num,
.zc-ovc__radio input:checked + .zc-ovc__radio-card .zc-ovc__radio-unit {
    color: var(--zc-white);
}
.zc-ovc__radio input:checked + .zc-ovc__radio-card .zc-ovc__radio-tag {
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    border-color: var(--zc-amber-dk);
    color: var(--zc-white);
    box-shadow: 0 3px 8px -2px var(--zc-amber-a45);
}
.zc-ovc__radio input:focus-visible + .zc-ovc__radio-card {
    outline: 2px solid var(--zc-amber-dk);
    outline-offset: 2px;
}
.zc-ovc__field-hint {
    display: block;
    margin-top: 4px;
    font-family: var(--zc-f-body);
    font-size: 10.5px;
    color: var(--zc-warm-mid);
    letter-spacing: 0.05px;
}
.zc-ovc__field-error {
    display: block;
    margin-top: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(217, 70, 70, 0.06);
    border: 1px solid rgba(217, 70, 70, 0.22);
    font-family: var(--zc-f-body);
    font-size: 10.5px;
    color: #b73a3a;
}

.zc-ovc__actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 10px;
    flex-shrink: 0;
}
.zc-ovc__submit {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    color: var(--zc-white);
    border: none;
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 24px -10px var(--zc-amber-a45);
    transition: transform 0.25s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease);
}
.zc-ovc__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -10px var(--zc-amber-a45);
}
.zc-ovc__submit i { font-size: 13px; }
.zc-ovc__reset {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    font-family: var(--zc-f-heading);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s var(--zc-ease);
}
.zc-ovc__reset:hover {
    border-color: var(--zc-amber-a35);
    color: var(--zc-amber-dk);
}
.zc-ovc__form-foot {
    display: flex; align-items: center; gap: 7px;
    margin: 8px 0 0;
    padding: 6px 10px;
    background: var(--zc-amber-a08);
    border: 1px dashed var(--zc-amber-a25);
    border-radius: 7px;
    font-family: var(--zc-f-body);
    font-size: 10.5px;
    color: var(--zc-warm-dk);
    line-height: 1.4;
    flex-shrink: 0;
}
.zc-ovc__form-foot i { color: var(--zc-amber-dk); font-size: 12px; flex-shrink: 0; }


/* — Results panel — */
.zc-ovc__results {
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 14px;
    padding: clamp(18px, 2vw, 26px);
    box-shadow: 0 20px 50px -22px rgba(207, 138, 63, 0.20);
    position: relative;
}
.zc-ovc__results::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    border-radius: 14px 14px 0 0;
}

/* On desktop the panel uses the 70vh shell — wrap any overflow inside
   the empty / active blocks instead of the outer card. */
@media (min-width: 881px) {
    .zc-ovc__empty,
    .zc-ovc__active {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        margin-right: -4px;
        scrollbar-width: thin;
        scrollbar-color: var(--zc-amber-a45) transparent;
    }
    .zc-ovc__empty::-webkit-scrollbar,
    .zc-ovc__active::-webkit-scrollbar { width: 6px; }
    .zc-ovc__empty::-webkit-scrollbar-thumb,
    .zc-ovc__active::-webkit-scrollbar-thumb { background: var(--zc-amber-a45); border-radius: 999px; }
}

/* Empty state */
.zc-ovc__empty { text-align: left; }
.zc-ovc__empty-mark {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--zc-amber-a08), rgba(255,255,255,0.2));
    border: 1px dashed var(--zc-amber-a35);
    color: var(--zc-amber-dk);
    font-size: 20px;
    margin-bottom: 12px;
}
.zc-ovc__empty h3 {
    margin: 0 0 6px;
    font-family: var(--zc-f-display);
    font-size: clamp(17px, 0.7vw + 12px, 20px);
    font-weight: 500;
    color: var(--zc-charcoal);
}
.zc-ovc__empty p {
    margin: 0 0 14px;
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--zc-warm-dk);
}
.zc-ovc__empty-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 7px;
}
.zc-ovc__empty-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    font-family: var(--zc-f-body);
    font-size: 12px;
    color: var(--zc-warm-dk);
}
.zc-ovc__empty-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.zc-ovc__empty-dot--fertile      { background: var(--zc-amber-a35); border: 1px solid var(--zc-amber-dk); }
.zc-ovc__empty-dot--ovulation    { background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__empty-dot--next-period  { background: var(--zc-white); border: 2px dashed var(--zc-amber-dk); }
.zc-ovc__empty-dot--test         { background: #2e6b56; }
.zc-ovc__empty-dot--due          { background: var(--zc-deep); }

/* Active state */
.zc-ovc__active-head { margin-bottom: 18px; }
.zc-ovc__active-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 6px;
    opacity: 0.85;
}
.zc-ovc__active-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 1vw + 14px, 26px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--zc-charcoal);
}
.zc-ovc__active-title span {
    font-weight: 500;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.zc-ovc__stats {
    list-style: none; margin: 0 0 14px; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 540px) {
    .zc-ovc__stats { grid-template-columns: repeat(2, 1fr); }
    .zc-ovc__stat--fertile { grid-column: 1 / -1; }
}
.zc-ovc__stat {
    position: relative;
    padding: 10px 12px 10px 18px;
    border-radius: 9px;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    overflow: hidden;
}
.zc-ovc__stat::before {
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--zc-amber-a45);
}
.zc-ovc__stat--fertile {
    background: linear-gradient(135deg, var(--zc-amber-a12, rgba(207,138,63,0.12)), rgba(255,255,255,0.4));
    border-color: var(--zc-amber-a25);
}
.zc-ovc__stat--fertile::before    { background: linear-gradient(180deg, var(--zc-amber-lt), var(--zc-amber-dk)); }
.zc-ovc__stat--ovulation::before  { background: linear-gradient(180deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__stat--period::before     { background: var(--zc-amber-dk); }
.zc-ovc__stat--test::before       { background: #2e6b56; }
.zc-ovc__stat--due::before        { background: var(--zc-deep); }
.zc-ovc__stat-tag {
    display: block;
    font-family: var(--zc-f-heading);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 4px;
}
.zc-ovc__stat-value {
    display: block;
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.6vw + 11px, 18px);
    font-weight: 500;
    color: var(--zc-charcoal);
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.zc-ovc__stat-meta {
    display: block;
    margin-top: 4px;
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    color: var(--zc-warm-mid);
}

.zc-ovc__active-cta {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding-top: 16px;
    border-top: 1px dashed var(--zc-amber-a25);
}
.zc-ovc__cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    color: var(--zc-white);
    text-decoration: none;
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 8px 18px -6px var(--zc-amber-a45);
    transition: transform 0.25s var(--zc-ease-spring);
}
.zc-ovc__cta-btn:hover { transform: translateY(-2px); color: var(--zc-white); }
.zc-ovc__cta-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-warm-dk);
    text-decoration: none;
    border-bottom: 1px dashed var(--zc-amber-a35);
    padding-bottom: 2px;
    transition: color 0.25s var(--zc-ease);
}
.zc-ovc__cta-link:hover { color: var(--zc-amber-dk); }


/* ============================================================================
   §2b  MERGED DASHBOARD RIGHT COLUMN — replaces the old empty/active results
        panel. Holds 5 stat pills across the top and a 2-col viz row
        (full-cycle calendar + pie + cycle bar) beneath. Everything is
        visible at once inside the 70vh shell defined further up.
   ============================================================================ */
.zc-ovc__dash-right {
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 14px;
    padding: clamp(14px, 1.6vw, 20px);
    box-shadow: 0 20px 50px -22px rgba(207, 138, 63, 0.20);
    position: relative;
    gap: clamp(10px, 1.1vw, 14px);
}
.zc-ovc__dash-right::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    border-radius: 14px 14px 0 0;
}

/* — Stat pills row — five compact tag+value chips. Wraps to 3+2 on
     mid widths and a 2-col grid on phone-sized screens. */
/* Five equal columns — no side stripe, no gradient panels. Each card is
   a clean white tile with a small colored dot in the corner as the only
   chromatic cue, so the row reads as a calm, premium summary. */
.zc-ovc__stats-row {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 1100px) {
    .zc-ovc__stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .zc-ovc__stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zc-ovc__stat-pill {
    position: relative;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    box-shadow: 0 6px 16px -12px rgba(46, 75, 113, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: transform 0.25s var(--zc-ease), box-shadow 0.25s var(--zc-ease);
}
.zc-ovc__stat-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(46, 75, 113, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* Single tonal accent — a small dot in the corner. No left stripe. */
.zc-ovc__stat-pill::after {
    content: "";
    position: absolute;
    top: 10px; right: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--zc-amber-a45);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.zc-ovc__stat-pill--fertile::after   { background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__stat-pill--ovulation::after { background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk)); }
.zc-ovc__stat-pill--period::after    { background: #d94646; }
.zc-ovc__stat-pill--test::after      { background: #2e6b56; }
.zc-ovc__stat-pill--due::after       { background: var(--zc-deep); }

.zc-ovc__stat-pill-tag {
    display: block;
    font-family: var(--zc-f-heading);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    /* Reserve room on the right so the corner dot never crashes into the
       last letter of long tag labels. */
    padding-right: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-ovc__stat-pill-val {
    display: block;
    font-family: var(--zc-f-display);
    font-size: clamp(11px, 0.34vw + 8.5px, 12.5px);
    font-weight: 500;
    color: var(--zc-charcoal);
    line-height: 1.3;
    letter-spacing: -0.15px;
    white-space: normal;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* — Viz row — calendar on left, pie+bar stacked on right.
     Fills the remaining height of the 70vh dash-right shell. */
.zc-ovc__dash-viz {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(10px, 1.1vw, 14px);
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 980px) {
    .zc-ovc__dash-viz { grid-template-columns: 1fr; }
}

/* Inside the merged dashboard the calendar + pie + bar cards need to be
   compact — override the standalone-section sizing they had in §3. */
.zc-ovc__dash-viz .zc-ovc__cal-card,
.zc-ovc__dash-viz .zc-ovc__viz-aside {
    height: 100%;
    min-height: 0;
}
.zc-ovc__dash-viz .zc-ovc__cal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(10px, 1.1vw, 13px);
}
.zc-ovc__dash-viz .zc-ovc__cal-card-head {
    margin-bottom: 6px;
    grid-template-columns: 26px 1fr 26px;
}
.zc-ovc__dash-viz .zc-ovc__cal-card-title { font-size: 12.5px; }
.zc-ovc__dash-viz .zc-ovc__cal-nav { width: 24px; height: 24px; font-size: 10px; }
.zc-ovc__dash-viz .zc-ovc__cal-legend {
    gap: 4px 8px;
    margin-bottom: 6px;
    font-size: 8.5px;
    letter-spacing: 0.2px;
}
.zc-ovc__dash-viz .zc-ovc__legend-sw { width: 7px; height: 7px; border-radius: 2px; }
.zc-ovc__dash-viz .zc-ovc__cal-grid { gap: 2px; }
.zc-ovc__dash-viz .zc-ovc__cal-day {
    font-size: 10.5px;
    min-height: 0;
    border-radius: 5px;
    /* Let the row template shrink each cell to the remaining height. */
}
.zc-ovc__dash-viz .zc-ovc__cal-day--ovulation { transform: scale(1.02); }
.zc-ovc__dash-viz .zc-ovc__cal-dow {
    font-size: 7.5px;
    letter-spacing: 1px;
    padding: 0;
}

.zc-ovc__dash-viz .zc-ovc__viz-aside {
    display: flex; flex-direction: column;
    gap: clamp(10px, 1.1vw, 14px);
}
.zc-ovc__dash-viz .zc-ovc__pie-card,
.zc-ovc__dash-viz .zc-ovc__bar-card {
    padding: clamp(11px, 1.2vw, 15px);
    flex: 1 1 0;
    min-height: 0;
}
.zc-ovc__dash-viz .zc-ovc__pie-head,
.zc-ovc__dash-viz .zc-ovc__bar-head { margin-bottom: 8px; }
.zc-ovc__dash-viz .zc-ovc__pie-title,
.zc-ovc__dash-viz .zc-ovc__bar-title { font-size: 13.5px; }
.zc-ovc__dash-viz .zc-ovc__pie-svg { max-width: 130px; }
.zc-ovc__dash-viz .zc-ovc__pie-wrap { gap: 10px; }
.zc-ovc__dash-viz .zc-ovc__pie-legend { gap: 5px; }
.zc-ovc__dash-viz .zc-ovc__pie-legend li {
    padding: 5px 8px;
    font-size: 11px;
}
.zc-ovc__dash-viz .zc-ovc__pie-label { font-size: 10.5px; }
.zc-ovc__dash-viz .zc-ovc__pie-days  { font-size: 9.5px; }

/* On mobile the right column should not be height-capped — let it grow. */
@media (max-width: 880px) {
    .zc-ovc__dash-right {
        max-height: none;
        height: auto;
    }
    .zc-ovc__dash-viz .zc-ovc__cal-day { min-height: 34px; font-size: 13px; }
}


/* ============================================================================
   §3   THE SCIENCE — fresh editorial.
        Five blocks: chapter strip, 2-col display+lead header, 4-phase
        editorial table with colored vertical hairlines, centered pull
        quote, and a 2-col signs section. Everything aligns to a baseline.
   ============================================================================ */
.zc-ovc__info {
    padding: clamp(64px, 7vw, 128px) var(--zc-pad-x);
    background: var(--zc-off-white);
    border-top: 1px solid var(--zc-linen);
    border-bottom: 1px solid var(--zc-linen);
    position: relative;
}
@media (max-width: 991px) {
    .zc-ovc__info { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-ovc__info-inner {
    /* No max-width: outer wrappers use --zc-pad-x for breathing room only. */
}

/* — Chapter strip (top): § 03 — line — section label — */
.zc-ovc__info-chapter {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: clamp(28px, 3vw, 48px);
}
.zc-ovc__info-chapter-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--zc-amber-dk);
    white-space: nowrap;
}
.zc-ovc__info-chapter-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a35), transparent 70%);
    min-width: 40px;
    max-width: 360px;
}
.zc-ovc__info-chapter-label {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    white-space: nowrap;
}

/* — Head: 2-col grid (giant title left, lead column right) — */
.zc-ovc__info-head {
    margin-bottom: clamp(48px, 5vw, 80px);
}
.zc-ovc__info-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 88px);
    row-gap: 32px;
    align-items: start;
}
@media (max-width: 880px) {
    .zc-ovc__info-head-grid { grid-template-columns: 1fr; }
}
.zc-ovc__info-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(34px, 3vw + 16px, 64px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -1.4px;
    color: var(--zc-charcoal);
}
.zc-ovc__info-title span {
    font-weight: 500;
    font-style: normal;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__info-lead-col {
    padding-top: clamp(6px, 0.6vw, 14px);
    border-top: 1px solid var(--zc-linen);
}
.zc-ovc__info-lead {
    margin: 0 0 14px;
    font-family: var(--zc-f-body);
    font-size: clamp(15px, 0.32vw + 13px, 17px);
    line-height: 1.75;
    color: var(--zc-charcoal);
    letter-spacing: 0.05px;
}
.zc-ovc__info-lead--sub {
    color: var(--zc-warm-dk);
    margin-bottom: 28px;
}

/* — Quick facts — three oversized stats stacked under the lead column */
.zc-ovc__info-quickfacts {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 22px;
    border-top: 1px dashed var(--zc-amber-a35);
}
.zc-ovc__info-quickfacts li {
    display: flex; flex-direction: column; gap: 4px;
}
.zc-ovc__info-qf-num {
    font-family: var(--zc-f-display);
    font-size: clamp(28px, 1.4vw + 18px, 38px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--zc-charcoal);
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 60%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__info-qf-num small {
    font-size: 0.45em;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 1px;
    opacity: 0.85;
}
.zc-ovc__info-qf-lbl {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}

/* — Section divider rule — */
.zc-ovc__info-rule {
    border: 0; padding: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a35) 20%, var(--zc-amber-dk) 50%, var(--zc-amber-a35) 80%, transparent);
    margin: clamp(48px, 5vw, 80px) 0;
}

/* — Four-phase EDITORIAL TABLE —
     A vertical stack of hairline-divided rows. Each row is a grid that
     reads left to right: number | colored hairline | name | days | body. */
.zc-ovc__info-phases-head {
    margin-bottom: clamp(28px, 3vw, 44px);
    max-width: 720px;
}
.zc-ovc__info-phases-eyebrow {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 10px;
}
.zc-ovc__info-phases-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 1.4vw + 14px, 32px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--zc-charcoal);
}
.zc-ovc__info-phase-table {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--zc-linen);
}
.zc-ovc__info-phase-row {
    display: grid;
    grid-template-columns: 56px 4px 1fr 96px minmax(0, 2.2fr);
    column-gap: clamp(16px, 2vw, 32px);
    align-items: center;
    padding: clamp(24px, 2.4vw, 36px) 0;
    border-bottom: 1px solid var(--zc-linen);
    transition: background 0.3s var(--zc-ease);
}
@media (max-width: 880px) {
    .zc-ovc__info-phase-row {
        grid-template-columns: 56px 4px 1fr;
        row-gap: 4px;
        column-gap: 16px;
    }
    .zc-ovc__info-phase-days {
        grid-column: 3;
    }
    .zc-ovc__info-phase-body {
        grid-column: 3;
    }
}
@media (max-width: 540px) {
    .zc-ovc__info-phase-row {
        grid-template-columns: 40px 3px 1fr;
        column-gap: 12px;
    }
}
.zc-ovc__info-phase-row:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent);
}
.zc-ovc__info-phase-num {
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 1.4vw + 16px, 38px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--zc-warm-mid);
    opacity: 0.7;
}
.zc-ovc__info-phase-rail {
    align-self: stretch;
    width: 3px;
    border-radius: 2px;
    /* Color set per row below */
}
.zc-ovc__info-phase-name {
    font-family: var(--zc-f-display);
    font-size: clamp(19px, 0.6vw + 14px, 24px);
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--zc-charcoal);
    line-height: 1.2;
}
.zc-ovc__info-phase-days {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    white-space: nowrap;
    text-align: left;
}
.zc-ovc__info-phase-body {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: clamp(13.5px, 0.22vw + 12.5px, 15px);
    line-height: 1.7;
    color: var(--zc-warm-dk);
}

/* Phase colors — mirror the pie chart slices. */
.zc-ovc__info-phase-row--menstrual  .zc-ovc__info-phase-rail { background: linear-gradient(180deg, #d94646, rgba(217, 70, 70, 0.5)); }
.zc-ovc__info-phase-row--follicular .zc-ovc__info-phase-rail { background: linear-gradient(180deg, #e9c79a, rgba(233, 199, 154, 0.5)); }
.zc-ovc__info-phase-row--fertile    .zc-ovc__info-phase-rail { background: linear-gradient(180deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__info-phase-row--luteal     .zc-ovc__info-phase-rail { background: linear-gradient(180deg, #2e6b56, rgba(46, 107, 86, 0.5)); }

/* — Pull quote — centered, with hairlines flanking the cite. */
.zc-ovc__info-quote {
    margin: 0;
    max-width: 820px;
    margin-left: auto; margin-right: auto;
    text-align: center;
    padding: 0 clamp(0px, 2vw, 24px);
}
.zc-ovc__info-quote-text {
    margin: 0 0 24px;
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 1.4vw + 14px, 34px);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: var(--zc-charcoal);
    font-style: normal;
    position: relative;
}
.zc-ovc__info-quote-text::before,
.zc-ovc__info-quote-text::after {
    font-family: var(--zc-f-display);
    color: var(--zc-amber-dk);
    opacity: 0.4;
    font-weight: 400;
}
.zc-ovc__info-quote-text::before { content: "\201C"; margin-right: 4px; }
.zc-ovc__info-quote-text::after  { content: "\201D"; margin-left: 4px; }
.zc-ovc__info-quote-cite {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
}
.zc-ovc__info-quote-line {
    flex: 0 0 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk));
}
.zc-ovc__info-quote-line + .zc-ovc__info-quote-line,
.zc-ovc__info-quote-cite > .zc-ovc__info-quote-line:last-child {
    background: linear-gradient(90deg, var(--zc-amber-dk), transparent);
}
.zc-ovc__info-quote-name {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}

/* (Signs of ovulation now lives in §4 / .zc-ovc__track) */

/* — Legacy info styles below are unused (kept block intentionally empty
     during the rewrite; HTML no longer references these classes). — */
.__zc-ovc-info-legacy-unused { display: none; }
/* DEAD-CSS-START
.zc-ovc__info-defs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: clamp(36px, 4vw, 56px);
    position: relative;
}
@media (min-width: 761px) {
    .zc-ovc__info-defs::before {
        content: "";
        position: absolute;
        top: 8px; bottom: 8px;
        left: 50%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--zc-amber-a35) 20%, var(--zc-amber-dk) 50%, var(--zc-amber-a35) 80%, transparent);
        transform: translateX(-50%);
    }
}
@media (max-width: 760px) {
    .zc-ovc__info-defs { grid-template-columns: 1fr; }
}
.zc-ovc__info-def {
    position: relative;
    padding: 0;
    background: transparent;
}
.zc-ovc__info-def-q {
    display: inline-block;
    font-family: var(--zc-f-display);
    font-size: clamp(40px, 3.4vw + 18px, 64px);
    font-weight: 300;
    line-height: 0.9;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 12px;
    letter-spacing: -1.5px;
}
.zc-ovc__info-def-title {
    margin: 0 0 14px;
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 0.9vw + 14px, 26px);
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.zc-ovc__info-def-body {
    margin: 0 0 14px;
    font-family: var(--zc-f-body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--zc-warm-dk);
    letter-spacing: 0.05px;
}
.zc-ovc__info-def-body b {
    color: var(--zc-charcoal);
    font-weight: 600;
    background: linear-gradient(180deg, transparent 68%, var(--zc-amber-a25) 68%, var(--zc-amber-a25) 90%, transparent 90%);
    padding: 0 2px;
}
.zc-ovc__info-def-meta {
    margin: 0;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    opacity: 0.85;
}


/* — Four-phase TIMELINE — one continuous ribbon + a row of labels below.
     No per-phase cards. Each ribbon segment carries the same color the
     phase uses everywhere else on the page. */
.zc-ovc__info-phases-head { margin-bottom: 22px; max-width: 720px; }
.zc-ovc__info-phases-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 8px;
    opacity: 0.85;
}
.zc-ovc__info-phases-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 1.1vw + 14px, 28px);
    font-weight: 400;
    color: var(--zc-charcoal);
    letter-spacing: -0.4px;
}

.zc-ovc__info-rail {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin: 28px 0 0;
    box-shadow: 0 6px 18px -12px rgba(46, 75, 113, 0.18);
}
.zc-ovc__info-rail-seg {
    display: block;
    height: 100%;
    flex-basis: 0;
    position: relative;
}
.zc-ovc__info-rail-seg + .zc-ovc__info-rail-seg::before {
    /* Soft join between segments so the color shift reads as a gradient. */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -1px;
    width: 2px;
    background: rgba(255, 255, 255, 0.55);
}
.zc-ovc__info-rail-seg--menstrual  { background: linear-gradient(90deg, #d94646, rgba(217, 70, 70, 0.78)); }
.zc-ovc__info-rail-seg--follicular { background: linear-gradient(90deg, rgba(233, 199, 154, 0.85), #e9c79a); }
.zc-ovc__info-rail-seg--fertile    { background: linear-gradient(90deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__info-rail-seg--luteal     { background: linear-gradient(90deg, rgba(46, 107, 86, 0.85), #2e6b56); }

.zc-ovc__info-rail-labels {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex;
    gap: clamp(10px, 1.2vw, 22px);
}
@media (max-width: 960px) {
    .zc-ovc__info-rail-labels { flex-wrap: wrap; }
    .zc-ovc__info-rail-labels .zc-ovc__info-rail-label { flex: 1 1 calc(50% - 14px) !important; }
}
@media (max-width: 540px) {
    .zc-ovc__info-rail-labels .zc-ovc__info-rail-label { flex: 1 1 100% !important; }
}
.zc-ovc__info-rail-label {
    position: relative;
    padding-top: 14px;
    flex-basis: 0;
    min-width: 0;
}
.zc-ovc__info-rail-label::before {
    /* Connector tick: a short vertical line + a small dot that visually
       anchors the label to its ribbon segment above. */
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 1px;
    height: 14px;
    background: currentColor;
    opacity: 0.45;
}
.zc-ovc__info-rail-label::after {
    content: "";
    position: absolute;
    top: -14px;
    left: -3.5px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px var(--zc-off-white);
}
.zc-ovc__info-rail-label--menstrual  { color: #d94646; }
.zc-ovc__info-rail-label--follicular { color: #b59060; }
.zc-ovc__info-rail-label--fertile    { color: var(--zc-amber-dk); }
.zc-ovc__info-rail-label--luteal     { color: #2e6b56; }
.zc-ovc__info-rail-num {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 4px;
    opacity: 0.75;
}
.zc-ovc__info-rail-label h4 {
    margin: 0 0 4px;
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.5vw + 11px, 18px);
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.25px;
    line-height: 1.2;
}
.zc-ovc__info-rail-days {
    display: block;
    margin-bottom: 8px;
    font-family: var(--zc-f-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-ovc__info-rail-label p {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--zc-warm-dk);
    /* Don't inherit the colored "current color" of the label — body text
       stays in the neutral warm-dk so the connector dot is the only color. */
}


/* — Signs + pull-quote — editorial two-column pair. Signs is a hairline
     numbered list (no item cards). The pull quote is a flat block with
     oversized opening mark, italic-free serif quote, and a hairline cite. */
.zc-ovc__info-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 56px);
    align-items: start;
}
@media (max-width: 900px) { .zc-ovc__info-pair { grid-template-columns: 1fr; } }

.zc-ovc__info-signs-head { margin-bottom: 18px; max-width: 720px; }
.zc-ovc__info-signs-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 8px;
    opacity: 0.85;
}
.zc-ovc__info-signs-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 1.1vw + 14px, 28px);
    font-weight: 400;
    color: var(--zc-charcoal);
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.zc-ovc__info-signs-list {
    list-style: none; margin: 0; padding: 0;
    /* No per-item cards — just hairlines between rows. */
    border-top: 1px solid var(--zc-linen);
}
.zc-ovc__info-signs-list li {
    display: grid;
    grid-template-columns: 44px 1fr 38px;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    padding: 16px 4px;
    border-bottom: 1px solid var(--zc-linen);
    transition: background 0.25s var(--zc-ease);
}
.zc-ovc__info-signs-list li:hover { background: rgba(255, 255, 255, 0.55); }
.zc-ovc__info-sign-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--zc-amber-dk);
    opacity: 0.7;
}
.zc-ovc__info-sign-body { min-width: 0; }
.zc-ovc__info-sign-body h4 {
    margin: 0 0 4px;
    font-family: var(--zc-f-display);
    font-size: clamp(14.5px, 0.4vw + 11px, 17px);
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
    line-height: 1.25;
}
.zc-ovc__info-sign-body p {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--zc-warm-dk);
}
.zc-ovc__info-sign-ic {
    justify-self: end;
    font-size: 22px;
    color: var(--zc-amber-dk);
    opacity: 0.55;
    transition: opacity 0.25s var(--zc-ease);
}
.zc-ovc__info-signs-list li:hover .zc-ovc__info-sign-ic { opacity: 1; }

/* Pull quote — premium, no box, oversized opening mark. */
.zc-ovc__info-pull {
    position: relative;
    padding: 12px 0 0;
    align-self: stretch;
}
.zc-ovc__info-pull-mark {
    display: block;
    font-family: var(--zc-f-display);
    font-size: clamp(80px, 6vw + 30px, 140px);
    line-height: 0.6;
    color: var(--zc-amber-dk);
    opacity: 0.18;
    margin-bottom: -28px;
    user-select: none;
}
.zc-ovc__info-pull-quote {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 0.9vw + 14px, 26px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    /* No italics anywhere on the brand. */
    font-style: normal;
}
.zc-ovc__info-pull-cite {
    display: flex; align-items: center; gap: 12px;
    margin-top: 22px;
}
.zc-ovc__info-pull-line {
    flex: 0 0 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-dk), transparent);
}
.zc-ovc__info-pull-name {
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}


/* — Quiet closing note — no panel, just a hairline + icon + prose. */
.zc-ovc__info-note {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 14px;
    align-items: start;
    padding-top: 20px;
}
.zc-ovc__info-note-rule {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a35) 20%, var(--zc-amber-dk) 50%, var(--zc-amber-a35) 80%, transparent);
}
.zc-ovc__info-note i {
    color: var(--zc-amber-dk);
    font-size: 18px;
    margin-top: 2px;
}
.zc-ovc__info-note p {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--zc-warm-dk);
    max-width: 720px;
}
DEAD-CSS-END */


/* ============================================================================
   §3z  DASHBOARD VIZ (legacy) — full-cycle calendar + phase donut + cycle bar
        Kept for tooling/compat; HTML no longer renders this section directly.
   ============================================================================ */
.zc-ovc__viz {
    padding: clamp(32px, 3.4vw, 56px) var(--zc-pad-x);
    background:
        radial-gradient(ellipse at 88% 0%, rgba(207, 138, 63, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 8% 100%, rgba(46, 75, 113, 0.04) 0%, transparent 55%),
        var(--zc-off-white);
    border-top: 1px solid var(--zc-linen);
    border-bottom: 1px solid var(--zc-linen);
}
@media (max-width: 991px) {
    .zc-ovc__viz { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-ovc__viz-head { margin: 0 0 22px; max-width: 760px; }
.zc-ovc__viz-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 8px;
}
.zc-ovc__viz-title {
    margin: 0 0 10px;
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 1.4vw + 14px, 30px);
    font-weight: 400;
    color: var(--zc-charcoal);
    letter-spacing: -0.5px;
}
.zc-ovc__viz-title span {
    font-weight: 500;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__viz-sub {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--zc-warm-dk);
}
.zc-ovc__viz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
    align-items: stretch;
}
@media (min-width: 981px) {
    /* Viz dashboard also fits inside ~70vh. Calendar on the left fills its
       column; the right column (pie + bar) stacks two cards that share the
       column equally with internal scroll if anything overflows. */
    .zc-ovc__viz-grid {
        min-height: clamp(560px, 70vh, 780px);
    }
    .zc-ovc__cal-card,
    .zc-ovc__viz-aside {
        height: 100%;
        max-height: clamp(560px, 70vh, 780px);
    }
    .zc-ovc__cal-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}
@media (max-width: 980px) { .zc-ovc__viz-grid { grid-template-columns: 1fr; } }
.zc-ovc__viz-aside {
    display: flex; flex-direction: column;
    gap: clamp(14px, 1.6vw, 18px);
}


/* — Full-cycle CALENDAR card — */
.zc-ovc__cal-card {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 14px;
    padding: clamp(16px, 1.8vw, 22px);
    box-shadow: 0 16px 38px -22px rgba(46, 75, 113, 0.16);
}
.zc-ovc__cal-card-head {
    display: grid; grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.zc-ovc__cal-nav {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    cursor: pointer;
    transition: all 0.22s var(--zc-ease);
    font-size: 14px;
}
.zc-ovc__cal-nav:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translateY(-1px);
}
.zc-ovc__cal-card-title {
    text-align: center;
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(16px, 0.7vw + 12px, 19px);
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--zc-charcoal);
}
.zc-ovc__cal-legend {
    display: flex; flex-wrap: wrap; gap: 10px 14px;
    margin: 0 0 14px;
    font-family: var(--zc-f-heading);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--zc-warm-dk);
    letter-spacing: 0.3px;
}
.zc-ovc__cal-legend > span {
    display: inline-flex; align-items: center; gap: 6px;
}
.zc-ovc__legend-sw {
    width: 12px; height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}
/* Legend swatches use the SAME shades that appear on the day cells below
   so a swatch and a cell read as the same color. */
.zc-ovc__legend-sw--period    { background: rgba(217, 70, 70, 0.28); border: 1px solid rgba(217, 70, 70, 0.55); }
.zc-ovc__legend-sw--fertile   { background: var(--zc-amber-a25); border: 1px solid var(--zc-amber-a35); }
.zc-ovc__legend-sw--ovulation { background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__legend-sw--next      { background: var(--zc-white); border: 2px dashed var(--zc-amber-dk); }

.zc-ovc__cal-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Reserve one row for weekday headers + up to 6 weeks of days.
       grid-auto-rows lets the cells fill the card's remaining height
       so the calendar always uses every available pixel. */
    grid-auto-rows: minmax(0, 1fr);
    gap: 5px;
    min-height: 0;
}
.zc-ovc__cal-dow {
    display: grid; place-items: center;
    padding: 0;
    font-family: var(--zc-f-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-ovc__cal-day {
    position: relative;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--zc-off-white);
    border: 1px solid transparent;
    font-family: var(--zc-f-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--zc-charcoal);
    overflow: visible;
    transition: transform 0.2s var(--zc-ease);
    min-height: 36px;
}
.zc-ovc__cal-day--pad {
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.zc-ovc__cal-day-num { line-height: 1; }

/* Day-state visuals — period uses a brighter red so it reads as the same
   color the pie chart's menstrual slice paints. */
.zc-ovc__cal-day--period {
    background: rgba(217, 70, 70, 0.22);
    border-color: rgba(217, 70, 70, 0.50);
    color: #8a2c2c;
    font-weight: 600;
}
.zc-ovc__cal-day--fertile {
    background: var(--zc-amber-a18, rgba(207, 138, 63, 0.18));
    border-color: var(--zc-amber-a35);
    color: var(--zc-amber-dk);
}
.zc-ovc__cal-day--ovulation {
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    border-color: transparent;
    color: var(--zc-white);
    box-shadow: 0 10px 22px -8px var(--zc-amber-a45);
    transform: scale(1.04);
    z-index: 1;
}
.zc-ovc__cal-day--ovulation::after {
    content: "";
    position: absolute; inset: -3px;
    border-radius: 10px;
    border: 2px solid var(--zc-amber-lt);
    pointer-events: none;
}
.zc-ovc__cal-day--next {
    background: var(--zc-white);
    border: 2px dashed var(--zc-amber-dk);
    color: var(--zc-amber-dk);
    font-weight: 700;
}
.zc-ovc__cal-day--today { box-shadow: inset 0 0 0 2px var(--zc-deep); }


/* — PIE DONUT card — */
.zc-ovc__pie-card {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 14px;
    padding: clamp(14px, 1.6vw, 20px);
    box-shadow: 0 16px 38px -22px rgba(46, 75, 113, 0.16);
    /* Inside the 70vh viz-aside column, both cards grow to fill height */
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.zc-ovc__pie-head { margin-bottom: 14px; }
.zc-ovc__pie-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 4px;
    opacity: 0.85;
}
.zc-ovc__pie-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-ovc__pie-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 480px) { .zc-ovc__pie-wrap { grid-template-columns: 1fr; } }

.zc-ovc__pie-svg {
    width: 100%;
    max-width: 170px;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    transform: rotate(0deg);
    justify-self: center;
}
.zc-ovc__pie-track {
    fill: transparent;
    stroke: var(--zc-off-white);
    stroke-width: 4;
}
.zc-ovc__pie-seg {
    fill: transparent;
    stroke-width: 4;
    stroke-linecap: butt;
    /* Default: empty so they fill IN on submit. */
    stroke-dasharray: 0 100;
    stroke-dashoffset: 25;
    transition: stroke-dasharray 0.9s var(--zc-ease-spring, cubic-bezier(.34, 1.56, .64, 1)),
                stroke-dashoffset 0.9s var(--zc-ease, cubic-bezier(.4, 0, .2, 1));
}
/* Colors mirror the calendar phase markers so the same shade always means
   the same thing across the dashboard:
     Menstrual  = red   → calendar "Period" cells
     Fertile    = amber → calendar "Fertile" cells
     Follicular = warm cream  → no calendar equivalent, kept neutral
     Luteal     = sage green → no calendar equivalent, kept neutral and
                              matches the green of the "Test from" stat. */
.zc-ovc__pie-seg--menstrual  { stroke: #d94646; }
.zc-ovc__pie-seg--follicular { stroke: #e9c79a; }
.zc-ovc__pie-seg--fertile    { stroke: var(--zc-amber-dk); }
.zc-ovc__pie-seg--luteal     { stroke: #2e6b56; }

.zc-ovc__pie-centre-num {
    text-anchor: middle;
    font-family: var(--zc-f-display);
    font-size: 7px;
    font-weight: 500;
    fill: var(--zc-charcoal);
}
.zc-ovc__pie-centre-lbl {
    text-anchor: middle;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 2.4px;
    font-weight: 700;
    letter-spacing: 0.2px;
    fill: var(--zc-warm-mid);
    text-transform: uppercase;
}

.zc-ovc__pie-legend {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.zc-ovc__pie-legend li {
    display: grid; grid-template-columns: 12px 1fr auto;
    align-items: center; gap: 10px;
    padding: 7px 10px;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    border-radius: 8px;
    font-family: var(--zc-f-body);
    font-size: 12.5px;
}
.zc-ovc__pie-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.zc-ovc__pie-dot--menstrual  { background: #d94646; }
.zc-ovc__pie-dot--follicular { background: #e9c79a; }
.zc-ovc__pie-dot--fertile    { background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk)); }
.zc-ovc__pie-dot--luteal     { background: #2e6b56; }
.zc-ovc__pie-label {
    font-family: var(--zc-f-heading);
    font-weight: 600;
    color: var(--zc-charcoal);
    font-size: 11.5px;
    letter-spacing: 0.2px;
}
.zc-ovc__pie-days {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--zc-amber-dk);
    opacity: 0.85;
}


/* — CYCLE PROGRESS BAR card — */
.zc-ovc__bar-card {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 14px;
    padding: clamp(14px, 1.6vw, 20px);
    box-shadow: 0 16px 38px -22px rgba(46, 75, 113, 0.16);
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.zc-ovc__bar-head { margin-bottom: 20px; flex-shrink: 0; }
.zc-ovc__bar-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 4px;
    opacity: 0.85;
}
.zc-ovc__bar-title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}

.zc-ovc__bar-track {
    position: relative;
    height: 14px;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    border-radius: 999px;
    /* Extra bottom margin reserves room for the "Today" badge that sits
       below the track (so it never overlaps the cards above). */
    margin: 0 4px 38px;
    overflow: visible;
}
.zc-ovc__bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(217, 70, 70, 0.30), var(--zc-amber-a45), var(--zc-amber-dk));
    transition: width 1s var(--zc-ease, cubic-bezier(.4, 0, .2, 1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.zc-ovc__bar-mark {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--zc-white);
    border: 2px solid var(--zc-amber-dk);
    transform: translate(-50%, -50%);
    z-index: 2;
}
.zc-ovc__bar-mark--period {
    background: #d94646;
    border-color: #b73a3a;
}
.zc-ovc__bar-mark--fert-s,
.zc-ovc__bar-mark--fert-e {
    background: var(--zc-amber-a45);
    border-color: var(--zc-amber-dk);
    width: 10px; height: 10px;
}
.zc-ovc__bar-mark--ovul {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    width: 18px; height: 18px;
    box-shadow: 0 0 0 4px rgba(207, 138, 63, 0.20), 0 6px 14px -4px var(--zc-amber-a45);
    z-index: 3;
}
.zc-ovc__bar-mark--next {
    background: var(--zc-white);
    border-color: var(--zc-amber-dk);
    border-style: dashed;
    border-width: 2px;
}

.zc-ovc__bar-today {
    /* Anchored BELOW the bar so it never collides with the cards above
       (the pie + legend live there). The pulse dot is the connector and
       the label rides under it as a small navy pill. */
    position: absolute;
    top: 100%;
    margin-top: 6px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none;
}
.zc-ovc__bar-today-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--zc-deep);
    box-shadow: 0 0 0 3px rgba(46, 75, 113, 0.20);
    animation: zc-ovc-today-pulse 1.8s ease-in-out infinite;
    /* Short vertical tick that points UP from the pulse dot to the bar
       track, replacing the old downward drop that overlapped marks. */
}
.zc-ovc__bar-today-pulse::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: var(--zc-deep);
    opacity: 0.45;
}
@keyframes zc-ovc-today-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(46, 75, 113, 0.22); }
    50%      { box-shadow: 0 0 0 6px rgba(46, 75, 113, 0.08); }
}
.zc-ovc__bar-today-label {
    margin-top: 3px;
    font-family: var(--zc-f-heading);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-deep);
    background: var(--zc-white);
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(46, 75, 113, 0.25);
    white-space: nowrap;
}
/* Suppress the legacy drop-line (it used to point downward into other
   marks). We swapped the connector to ::before, so ::after is unused. */
.zc-ovc__bar-today-pulse::after { content: none; }

.zc-ovc__bar-axis {
    display: flex; justify-content: space-between;
    font-family: var(--zc-f-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-ovc__bar-axis > span:nth-child(2) { color: var(--zc-amber-dk); }


/* ============================================================================
   §4   HOW TO TRACK — combined math + body as an INFOGRAPHIC.
        Each item is a square tile with a numeric badge, an icon in an
        amber halo, and a serif title. On hover the description fades in
        below the title and the tile lifts. Two lanes — math (3) + body (5).
   ============================================================================ */
.zc-ovc__track {
    padding: clamp(64px, 6.4vw, 120px) var(--zc-pad-x);
    background: var(--zc-white);
}
@media (max-width: 991px) {
    .zc-ovc__track { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}

/* — Chapter strip (top) — */
.zc-ovc__track-chapter {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: clamp(28px, 3vw, 48px);
}
.zc-ovc__track-chapter-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--zc-amber-dk);
    white-space: nowrap;
}
.zc-ovc__track-chapter-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a35), transparent 70%);
    min-width: 40px;
}
.zc-ovc__track-chapter-label {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    white-space: nowrap;
}

/* — Centered editorial head — */
.zc-ovc__track-head {
    text-align: center;
    margin-bottom: clamp(40px, 4.5vw, 72px);
}
.zc-ovc__track-title {
    margin: 0 auto 18px;
    font-family: var(--zc-f-display);
    font-size: clamp(30px, 2.6vw + 14px, 52px);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -1.1px;
    color: var(--zc-charcoal);
}
.zc-ovc__track-title span {
    font-weight: 500;
    font-style: normal;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__track-sub {
    margin: 0 auto;
    font-family: var(--zc-f-body);
    font-size: clamp(14.5px, 0.3vw + 12.5px, 16.5px);
    line-height: 1.7;
    color: var(--zc-warm-dk);
}
/* — Lane (math, body) — head row + tile grid stack — */
.zc-ovc__track-lane {
    margin-top: clamp(36px, 3.6vw, 56px);
}
.zc-ovc__track-lane-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px;
}
.zc-ovc__track-lane-mark {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 60%, var(--zc-amber-lt) 100%);
    color: var(--zc-white);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    box-shadow: 0 8px 18px -8px var(--zc-amber-a45);
}
.zc-ovc__track-lane-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-dk), var(--zc-amber-a35) 30%, transparent 80%);
    min-width: 40px;
}
.zc-ovc__track-lane-eyebrow {
    font-family: var(--zc-f-display);
    font-size: clamp(20px, 0.8vw + 14px, 26px);
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--zc-charcoal);
    white-space: nowrap;
}
.zc-ovc__track-lane-count {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    padding: 4px 10px;
    border: 1px solid var(--zc-linen);
    border-radius: 999px;
    white-space: nowrap;
}

/* — Tile GRID (3-up for math, 5-up for body) — */
.zc-ovc__track-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    gap: clamp(12px, 1.4vw, 22px);
}
.zc-ovc__track-grid--math { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zc-ovc__track-grid--body { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .zc-ovc__track-grid--body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .zc-ovc__track-grid--math,
    .zc-ovc__track-grid--body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .zc-ovc__track-grid--math,
    .zc-ovc__track-grid--body { grid-template-columns: 1fr; }
}

/* — TILE — infographic card. Everything visible by default; hover layers
     in a warm amber wash, fills the icon halo, animates the watermark
     numeral, and deepens the shadow. — */
.zc-ovc__track-tile {
    position: relative;
    padding: 22px 20px 24px;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: clamp(220px, 18vw, 270px);
    box-shadow: 0 8px 20px -16px rgba(46, 75, 113, 0.18);
    transition: transform 0.35s var(--zc-ease-spring),
                box-shadow 0.35s var(--zc-ease),
                border-color 0.3s var(--zc-ease);
}

/* Soft amber wash that grows in on hover, painted behind the content. */
.zc-ovc__track-tile::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(207, 138, 63, 0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(46, 75, 113, 0.04), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s var(--zc-ease);
    z-index: -1;
}

/* Watermark number painted in the corner. */
.zc-ovc__track-tile-num {
    position: absolute;
    top: 12px; right: 16px;
    font-family: var(--zc-f-display);
    font-size: clamp(40px, 2.4vw + 18px, 60px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--zc-amber-dk);
    opacity: 0.12;
    pointer-events: none;
    transition: opacity 0.35s var(--zc-ease), transform 0.5s var(--zc-ease-spring);
    z-index: 0;
}

/* Icon halo — circle with the bootstrap icon centred. */
.zc-ovc__track-tile-ic {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), transparent 65%),
        linear-gradient(135deg, var(--zc-amber-a08), var(--zc-amber-a25));
    border: 1px solid var(--zc-amber-a35);
    color: var(--zc-amber-dk);
    font-size: 22px;
    margin-bottom: 16px;
    transition: transform 0.5s var(--zc-ease-spring),
                background 0.4s var(--zc-ease),
                box-shadow 0.4s var(--zc-ease),
                border-color 0.4s var(--zc-ease),
                color 0.4s var(--zc-ease);
    z-index: 1;
}

.zc-ovc__track-tile-title {
    margin: 0 0 10px;
    font-family: var(--zc-f-display);
    font-size: clamp(15.5px, 0.4vw + 12px, 18px);
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    line-height: 1.25;
    z-index: 1;
}

.zc-ovc__track-tile-body {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: clamp(12.5px, 0.18vw + 11.5px, 13.5px);
    line-height: 1.6;
    color: var(--zc-warm-dk);
    z-index: 1;
}

/* The hint chip is no longer needed (everything is visible). */
.zc-ovc__track-tile-hint { display: none; }

/* HOVER — lift, deeper shadow, amber wash, halo fills with gold, watermark
   numeral animates with a small rotation and brightness shift. */
.zc-ovc__track-tile:hover {
    border-color: var(--zc-amber-a35);
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -22px rgba(46, 75, 113, 0.22),
                0 14px 28px -16px rgba(207, 138, 63, 0.35);
}
.zc-ovc__track-tile:hover::before { opacity: 1; }
.zc-ovc__track-tile:hover .zc-ovc__track-tile-num {
    opacity: 0.20;
    transform: rotate(-4deg) scale(1.05);
}
.zc-ovc__track-tile:hover .zc-ovc__track-tile-ic {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 14px 28px -8px var(--zc-amber-a45);
}


/* ============================================================================
   §5   FAQ — centered single column. Big serif title with a gold-foil
        underline; each question is a generous hairline row beneath.
   ============================================================================ */
.zc-ovc__faq {
    padding: clamp(64px, 6.4vw, 120px) var(--zc-pad-x);
    background: var(--zc-off-white);
}
@media (max-width: 991px) {
    .zc-ovc__faq { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-ovc__faq-inner {
    max-width: 920px;
    margin: 0 auto;
}
.zc-ovc__faq-head {
    text-align: center;
    margin: 0 0 clamp(36px, 4vw, 56px);
}
.zc-ovc__faq-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 14px;
}
.zc-ovc__faq-title {
    margin: 0 0 22px;
    font-family: var(--zc-f-display);
    font-size: clamp(34px, 2.6vw + 16px, 56px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1px;
    color: var(--zc-charcoal);
}
.zc-ovc__faq-title span {
    font-weight: 500;
    font-style: normal;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__faq-head-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk), transparent);
}

.zc-ovc__faq-list {
    border-top: 1px solid var(--zc-linen);
}
.zc-ovc__faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--zc-linen);
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.zc-ovc__faq-item[open]::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 48px; height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-dk), transparent);
}
.zc-ovc__faq-q {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 36px;
    align-items: center;
    column-gap: clamp(14px, 1.8vw, 24px);
    padding: clamp(22px, 1.8vw, 28px) 4px;
}
@media (max-width: 600px) {
    .zc-ovc__faq-q { grid-template-columns: 40px minmax(0, 1fr) 30px; }
}
.zc-ovc__faq-q::-webkit-details-marker { display: none; }
.zc-ovc__faq-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--zc-amber-dk);
    opacity: 0.5;
    transition: opacity 0.3s var(--zc-ease);
}
.zc-ovc__faq-q-text {
    font-family: var(--zc-f-display);
    font-size: clamp(17px, 0.55vw + 12px, 22px);
    font-weight: 500;
    color: var(--zc-charcoal);
    line-height: 1.3;
    letter-spacing: -0.3px;
    transition: color 0.3s var(--zc-ease);
}
.zc-ovc__faq-q:hover .zc-ovc__faq-q-text { color: var(--zc-amber-dk); }
.zc-ovc__faq-q:hover .zc-ovc__faq-num     { opacity: 1; }
.zc-ovc__faq-item[open] .zc-ovc__faq-q-text { color: var(--zc-amber-dk); }
.zc-ovc__faq-item[open] .zc-ovc__faq-num    { opacity: 1; }
.zc-ovc__faq-toggle {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    color: var(--zc-amber-dk);
    font-size: 12px;
    transition: transform 0.4s var(--zc-ease-spring),
                background 0.3s var(--zc-ease),
                border-color 0.3s var(--zc-ease),
                color 0.3s var(--zc-ease);
}
.zc-ovc__faq-q:hover .zc-ovc__faq-toggle {
    border-color: var(--zc-amber-a35);
    background: var(--zc-amber-a08);
}
.zc-ovc__faq-item[open] .zc-ovc__faq-toggle {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: rotate(90deg);
}
.zc-ovc__faq-a {
    padding: 0 4px clamp(22px, 2vw, 32px) clamp(54px, 6vw, 80px);
    font-family: var(--zc-f-body);
    font-size: clamp(14px, 0.25vw + 12.5px, 15.5px);
    line-height: 1.75;
    color: var(--zc-warm-dk);
    max-width: 760px;
}
@media (max-width: 600px) {
    .zc-ovc__faq-a { padding-left: 4px; }
}
.zc-ovc__faq-a p { margin: 0; }


/* ============================================================================
   §6   CLOSING CTA — quiet luxury. Centered. Dark navy. Gold-foil rules
        top and bottom, a section mark, a small eyebrow, a single headline,
        a single paragraph, two pill actions, one inline trust line.
   ============================================================================ */
.zc-ovc__cta {
    position: relative;
    padding: clamp(72px, 7vw, 128px) var(--zc-pad-x);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(207, 138, 63, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(207, 138, 63, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}
.zc-ovc__cta-foil {
    position: absolute; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk) 22%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 78%, transparent);
}
.zc-ovc__cta-foil--top { top: 0; }
.zc-ovc__cta-foil--bot { bottom: 0; }
@media (max-width: 991px) {
    .zc-ovc__cta { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-ovc__cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.zc-ovc__cta-section {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: var(--zc-amber-lt);
    opacity: 0.5;
    margin-bottom: 24px;
}
.zc-ovc__cta-eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-amber-lt);
    margin-bottom: 22px;
    padding: 0 14px;
    position: relative;
}
.zc-ovc__cta-eyebrow::before,
.zc-ovc__cta-eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 28px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207, 138, 63, 0.55));
}
.zc-ovc__cta-eyebrow::before { right: 100%; transform: scaleX(-1); }
.zc-ovc__cta-eyebrow::after  { left: 100%; }
.zc-ovc__cta-title {
    margin: 0 0 22px;
    font-family: var(--zc-f-display);
    font-size: clamp(34px, 2.8vw + 16px, 60px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1.1px;
    color: var(--zc-white);
}
.zc-ovc__cta-title span {
    font-weight: 500;
    font-style: normal;
    background: linear-gradient(135deg, var(--zc-amber-lt) 0%, var(--zc-amber) 50%, var(--zc-amber-dk) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-ovc__cta-sub {
    margin: 0 auto 32px;
    font-family: var(--zc-f-body);
    font-size: clamp(15px, 0.32vw + 13px, 17px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 560px;
}
.zc-ovc__cta-row {
    display: inline-flex; flex-wrap: wrap; gap: 14px;
    justify-content: center;
    margin-bottom: 26px;
}
.zc-ovc__cta-primary {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 15px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    color: var(--zc-white) !important;
    text-decoration: none;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 18px 36px -10px var(--zc-amber-a45);
    transition: transform 0.25s var(--zc-ease-spring),
                box-shadow 0.3s var(--zc-ease);
}
.zc-ovc__cta-primary-arrow { transition: transform 0.3s var(--zc-ease-spring); }
.zc-ovc__cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 44px -10px var(--zc-amber-a45);
}
.zc-ovc__cta-primary:hover .zc-ovc__cta-primary-arrow {
    transform: translateX(4px);
}
.zc-ovc__cta-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.25s var(--zc-ease);
}
.zc-ovc__cta-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(207, 138, 63, 0.55);
    color: var(--zc-amber-lt);
    transform: translateY(-2px);
}
.zc-ovc__cta-trust {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.zc-ovc__cta-trust-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--zc-amber-lt);
    box-shadow: 0 0 0 3px rgba(207, 138, 63, 0.20);
}


/* ============================================================================
   §7   DISCLAIMER — quietly inset note. Centered, narrow, gold-foil rule
        above the prose so it reads as a sign-off, not a banner.
   ============================================================================ */
.zc-ovc__disclaimer {
    padding: clamp(36px, 3.6vw, 56px) var(--zc-pad-x);
    background: var(--zc-white);
}
@media (max-width: 991px) {
    .zc-ovc__disclaimer { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-ovc__disclaimer-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.zc-ovc__disclaimer-label {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 16px;
}
.zc-ovc__disclaimer-label i { font-size: 11px; }
.zc-ovc__disclaimer-rule {
    display: block;
    width: 48px; height: 1px;
    margin: 0 auto 14px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk), transparent);
}
.zc-ovc__disclaimer p {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--zc-warm-mid);
}