.cielo-home:not(.cosmic-tour-open):not(.cosmic-mobile-open) { overflow-x: clip; overflow-y: visible; }
.zodiac-journey { --zodiac-accent: #38bdf8; --zodiac-active: #f472b6; --zodiac-gutter: clamp(16px, 4vw, 72px); --zodiac-visible-cards: 5; position: relative; left: 50%; width: 100vw; width: 100dvw; margin-inline-start: -50vw; margin-inline-start: -50dvw; scroll-margin-top: var(--zodiac-top, 100px); border-block: 1px solid #23304a; background: radial-gradient(ellipse at 50% 30%, #152239 0%, #0b1220 55%, #090f1c 100%); }
.zodiac-pin { position: relative; box-sizing: border-box; width: 100%; max-width: none; padding: 20px var(--zodiac-gutter); margin-inline: auto; }
.zodiac-journey.is-pinned .zodiac-pin { position: sticky; top: var(--zodiac-top, 90px); }
.zodiac-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.zodiac-heading h2 { margin-top: 6px; font-size: clamp(1.98rem, 3.52vw, 3.3rem); line-height: 1.1; }
.zodiac-heading h2 em { color: #7dd3fc; }
.zodiac-heading .cielo-eyebrow { font-size: 0.9625rem; }
.zodiac-skip { flex-shrink: 0; padding: 12px 0; color: var(--zodiac-accent) !important; font-size: 0.9625rem; }
.zodiac-stage { width: auto; overflow: hidden; margin-inline: calc(-1 * var(--zodiac-gutter)); padding: 18px clamp(4px, 1vw, 14px) 8px; outline-offset: -4px; touch-action: pan-y pinch-zoom; }
.zodiac-stage[hidden], .zodiac-controls[hidden] { display: none; }
.zodiac-rail { display: flex; width: 100%; will-change: transform; }
.zodiac-sign { flex: 0 0 calc(100% / var(--zodiac-visible-cards)); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; padding: 14px 0; background: transparent; color: #a8b5ca; cursor: pointer; opacity: var(--sign-opacity, .4); transform: scale(var(--sign-scale, .7)); transform-origin:center; }
.zodiac-sign-mark { display: grid; place-items: center; width: clamp(52px, 10vw, 112px); aspect-ratio: 1; border: 1px solid #65738e; border-radius: 50%; background: #0c1628; }
.zodiac-sign-icon { display: block; width: clamp(36px, 6vw, 72px); height: clamp(36px, 6vw, 72px); object-fit: contain; filter: brightness(0) saturate(100%) invert(72%) sepia(67%) saturate(2024%) hue-rotate(165deg) brightness(101%) contrast(95%); }
.zodiac-sign { color: var(--zodiac-accent); opacity: max(.65, var(--sign-opacity, .65)); }
.zodiac-sign-mark { border-color: #38bdf866; }
.zodiac-sign-mark .cielo-icon { --cielo-icon-size: clamp(36px, 6vw, 72px); --cielo-icon-color: var(--zodiac-accent); }
.zodiac-sign-fallback { display: none; color: currentColor; font-size: clamp(30px, 5vw, 58px); line-height: 1; }
.zodiac-sign-mark.uses-fallback .zodiac-sign-fallback { display: block; }
.zodiac-sign[data-zodiac-centered="true"] { color: var(--zodiac-active); }
.zodiac-sign[data-zodiac-centered="true"] .zodiac-sign-mark { border-color: var(--zodiac-active); box-shadow: 0 0 40px #f472b647, inset 0 0 26px #f472b624; }
.zodiac-sign[data-zodiac-centered="true"] .zodiac-sign-icon { filter: brightness(0) saturate(100%) invert(62%) sepia(55%) saturate(1590%) hue-rotate(295deg) brightness(103%) contrast(91%); }
.zodiac-sign-name { font-size: 1.1rem; }
.zodiac-controls { display: flex; align-items: center; justify-content: center; gap: 24px; }
.zodiac-controls button { width: 44px; height: 44px; border: 1px solid #59677e; border-radius: 50%; background: #111c32; color: var(--zodiac-accent); font-size: 1.4rem; cursor: pointer; }
.zodiac-controls button:disabled { opacity: .3; cursor: default; }
.zodiac-controls p { text-align: center; color: #e2e8f0; font-size: 0.9625rem; line-height: 1.5; }
.zodiac-controls small { display: block; color: #a8b5ca; font-size: 0.9625rem; }
.zodiac-progress { max-width: 260px; height: 2px; background: #334155; margin: 14px auto 20px; }
.zodiac-progress span { display: block; height: 100%; background: var(--zodiac-accent); transform: scaleX(var(--zodiac-progress, .083333)); transform-origin: left; }
.zodiac-profile { max-width: 880px; margin: 20px auto; }
.zodiac-journey.is-ready .zodiac-profiles { display: grid; }
.zodiac-journey.is-ready .zodiac-profile { grid-area: 1 / 1; width: 100%; margin-block: 0; visibility: hidden; pointer-events: none; }
.zodiac-journey.is-ready .zodiac-profile.is-active { visibility: visible; pointer-events: auto; }
.zodiac-profile h3 { text-align: center; color: var(--zodiac-accent) !important; font-size: 2.31rem; line-height: 1.1; }
.zodiac-traits { text-align: center; margin: 8px 0 14px; color: #e0f2fe; font-size: 1.155rem; font-weight: 600; letter-spacing: .02em; }
.zodiac-facts { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 12px; padding: 12px 16px; border-block: 1px solid #334155; }
.zodiac-facts dt { color: #9bacc5; font-size: 0.9625rem; margin-bottom: 4px; }
.zodiac-facts dd { margin: 0; color: #f8fafc; font-size: 1.1rem; }
.zodiac-description { margin-top: 14px; padding: 12px 18px; border-left: 3px solid var(--zodiac-accent); border-radius: 0 12px 12px 0; background: linear-gradient(110deg, #38bdf81c, #38bdf805); color: #e2e8f0; font-size: 1.1rem; line-height: 1.6; }
.zodiac-hook { display: block; margin-bottom: 3px; color: #7dd3fc; font-family: 'Cielo Cormorant', Georgia, serif; font-size: 2.035rem; line-height: 1.15; font-weight: 600; }
.zodiac-nuances { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; }
.zodiac-nuances p { color: #cbd5e1; font-size: 1.03125rem; line-height: 1.5; }
.zodiac-nuances strong { display: block; color: #7dd3fc; font-size: 0.9625rem; margin-bottom: 3px; }
.zodiac-disclaimer { max-width: 880px; margin: 16px auto 0; color: #9bacc5; font-size: 0.9625rem; line-height: 1.5; }
.zodiac-pin > :not(.zodiac-funnel) { transition: opacity .18s ease, visibility .18s ease; }
.zodiac-funnel { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; box-sizing: border-box; padding: clamp(18px, 3vw, 38px) var(--zodiac-gutter); overflow: auto; background: radial-gradient(circle at 50% 12%, #3b173a 0%, #121a31 42%, #090f1c 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility .24s ease; }
.zodiac-journey.is-funnel .zodiac-pin > :not(.zodiac-funnel) { opacity: 0; visibility: hidden; pointer-events: none; }
.zodiac-journey.is-funnel .zodiac-funnel { opacity: 1; visibility: visible; pointer-events: auto; }
.zodiac-funnel-inner { width: min(920px, 100%); text-align: center; }
.zodiac-funnel .cielo-eyebrow { margin-bottom: 8px; color: #f9a8d4; }
.zodiac-funnel h3 { margin: 0; color: #fff; font-family: 'Cielo Cormorant', Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; font-weight: 500; }
.zodiac-funnel-lead { max-width: 680px; margin: 12px auto 18px; color: #d6deec; font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.5; }
.zodiac-funnel-signs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.zodiac-funnel-signs button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #f472b64d; border-radius: 999px; background: #111a2dcc; color: #e6edf8; font: inherit; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.zodiac-funnel-signs button img { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; filter: brightness(0) saturate(100%) invert(62%) sepia(55%) saturate(1590%) hue-rotate(295deg) brightness(103%) contrast(91%); }
.zodiac-funnel-signs button:hover { border-color: #f472b6; transform: translateY(-1px); }
.zodiac-funnel-signs button[aria-pressed="true"] { border-color: #f472b6; background: #f472b626; color: #fff; box-shadow: 0 0 24px #f472b62e; }
.zodiac-funnel-message { min-height: 24px; margin: 13px 0 8px; color: #f9a8d4; font-size: .95rem; }
.zodiac-funnel-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; }
.zodiac-funnel .cielo-button-primary { min-height: 48px; border-color: #f472b6 !important; background: #f472b6 !important; color: #090f1c !important; }
.zodiac-funnel-unknown { color: #7dd3fc; text-underline-offset: 5px; }
.zodiac-funnel-back { min-height: 44px; border: 0; background: transparent; color: #a8b5ca; font: inherit; cursor: pointer; }
.zodiac-journey:not(.is-ready) .zodiac-funnel { display: none; }
.zodiac-journey :focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }
@media (max-width: 600px) { .zodiac-pin { padding-block: 20px; } .zodiac-heading { display: block; } .zodiac-skip { display: inline-block; } .zodiac-stage { padding-block: 14px 6px; } .zodiac-sign-name { font-size: 0.825rem; } .zodiac-facts { gap: 8px; padding-inline: 0; } .zodiac-facts dd { font-size: 0.9625rem; } .zodiac-nuances { gap: 16px; } .zodiac-profile h3 { font-size: 1.98rem; } .zodiac-funnel { place-items: start center; padding: 12px 16px 72px; } .zodiac-funnel h3 { font-size: 2.35rem; } .zodiac-funnel-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .zodiac-funnel-signs button { min-height: 44px; font-size: .78rem; } .zodiac-funnel-signs button img { width: 22px; height: 22px; } .zodiac-funnel-lead { margin-block: 8px 10px; } .zodiac-funnel-message { margin-block: 8px 4px; } .zodiac-funnel-actions { gap: 6px 12px; } .zodiac-funnel .cielo-button-primary { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .zodiac-rail { will-change: auto; } }
@media (min-width: 1100px) { .zodiac-journey { --zodiac-visible-cards: 7; } }
@media (min-width: 601px) and (max-width: 900px) {
    .zodiac-funnel { place-items: start center; padding: 12px 20px; }
    .zodiac-funnel h3 { font-size: 2.15rem; }
    .zodiac-funnel .cielo-eyebrow { margin-bottom: 4px; font-size: .72rem; }
    .zodiac-funnel-lead { margin-block: 6px 10px; font-size: .85rem; }
    .zodiac-funnel-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .zodiac-funnel-signs button { min-height: 44px; padding-inline: 8px; font-size: .82rem; }
    .zodiac-funnel-signs button img { width: 22px; height: 22px; }
    .zodiac-funnel-message { margin-block: 8px 4px; font-size: .82rem; }
    .zodiac-funnel-actions { gap: 5px 12px; }
    .zodiac-funnel .cielo-button-primary { min-height: 44px; padding: 10px 16px; font-size: .72rem; }
    .zodiac-funnel-unknown, .zodiac-funnel-back { font-size: .82rem; }
}
/* Keep the complete reading visible on laptops with the larger type. */
@media (min-width: 1100px) and (min-height: 800px) {
    .zodiac-pin { padding-block: 12px; }
    html.cosmic-ui .zodiac-heading .cielo-eyebrow { margin-bottom: 12px; }
    .zodiac-stage { padding-block: 12px 6px; }
    .zodiac-progress { margin-block: 10px 14px; }
    .zodiac-facts { padding-block: 10px; }
    .zodiac-description { margin-top: 10px; }
    .zodiac-disclaimer { margin-top: 10px; }
}

/* Compact desktop rail for narrow browser panes (for example split-screen).
   It keeps the complete reading below the navbar so the vertical wheel can
   remain on the sticky Aries–Pisces route instead of falling back to manual. */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 760px) {
    .zodiac-pin { padding-block: 8px; }
    .zodiac-heading h2 { font-size: 2.15rem; }
    html.cosmic-ui .zodiac-heading .cielo-eyebrow { margin-bottom: 5px; }
    .zodiac-stage { padding-block: 4px 2px; }
    .zodiac-sign { gap: 4px; padding-block: 5px; }
    .zodiac-sign-mark { width: 54px; }
    .zodiac-sign-icon { width: 40px; height: 40px; }
    .zodiac-sign-name { font-size: .9rem; }
    .zodiac-controls { gap: 12px; }
    .zodiac-controls p { line-height: 1.2; }
    .zodiac-progress { margin-block: 5px 7px; }
    .zodiac-profile { margin-block: 4px; }
    .zodiac-profile h3 { font-size: 1.75rem; }
    .zodiac-traits { margin: 3px 0 6px; font-size: 1rem; }
    .zodiac-facts { gap: 8px; padding: 6px 8px; }
    .zodiac-facts dt { margin-bottom: 1px; font-size: .85rem; }
    .zodiac-facts dd { font-size: .95rem; }
    .zodiac-description { margin-top: 6px; padding: 7px 11px; font-size: .92rem; line-height: 1.3; }
    .zodiac-hook { margin-bottom: 1px; font-size: 1.45rem; }
    .zodiac-nuances { gap: 10px; margin-top: 5px; }
    .zodiac-nuances p { font-size: .86rem; line-height: 1.25; }
    .zodiac-nuances strong { margin-bottom: 1px; font-size: .82rem; }
    .zodiac-disclaimer { margin-top: 5px; font-size: .8rem; line-height: 1.25; }
}