:root {
    color-scheme: dark;
    --bg: #090812;
    --surface: #12101f;
    --surface-strong: #19162a;
    --ink: #f7f1df;
    --muted: #b8b0ca;
    --line: rgba(231, 214, 173, 0.18);
    --accent: #d8b45f;
    --accent-dark: #f0d98b;
    --danger: #ff8b8b;
}

* {
    box-sizing: border-box;
}

html {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 18% 8%, rgba(216, 180, 95, 0.14), transparent 28%), radial-gradient(circle at 82% 12%, rgba(99, 102, 241, 0.16), transparent 28%), linear-gradient(180deg, #090812 0%, #11101c 48%, #070710 100%);
    color: var(--ink);
}

body {
    margin: 0;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(216,180,95,0.75) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(159,147,255,0.55) 0 1px, transparent 1.7px);
    background-size: 83px 83px, 137px 137px, 211px 211px;
    background-position: 0 0, 37px 71px, 91px 29px;
    opacity: 0.38;
    animation: astral-drift 80s linear infinite;
}

@keyframes astral-drift {
    from { background-position: 0 0, 37px 71px, 91px 29px; }
    to { background-position: 260px 420px, -180px 300px, 340px -240px; }
}

.site-header,
.site-footer,
.tool-hero,
.tool-grid,
.content-band {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.brand,
.site-header a,
.secondary-action {
    color: var(--ink);
    text-decoration: none;
}

.brand {
    font-weight: 800;
    font-size: 1.1rem;
}

.site-header nav a {
    color: var(--muted);
    font-size: 0.95rem;
}

.tool-hero {
    padding: 56px 0 28px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 16px;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0;
}

h2 {
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.lede {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
    padding: 8px 0 36px;
}

.tool-panel {
    background: linear-gradient(180deg, var(--surface-strong), var(--surface));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 750;
}

.form-row {
    display: flex;
    gap: 10px;
}

input,
button {
    min-height: 44px;
    border-radius: 6px;
    font: inherit;
}

input {
    width: 100%;
    border: 1px solid var(--line);
    padding: 0 12px;
    background: #0e0c18; color: var(--ink);
}

button,
.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    padding: 0 16px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.secondary-action {
    margin-top: 10px;
}

.hint,
.status,
.site-footer,
.result-degree {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.form-error {
    color: var(--danger);
    font-weight: 700;
}

.result-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.result-facts div {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
}

dt {
    color: var(--muted);
    font-size: 0.78rem;
}

dd {
    margin: 2px 0 0;
    font-weight: 800;
}

.content-band {
    padding: 24px 0 56px;
    border-top: 1px solid var(--line);
}

.content-band p {
    max-width: 760px;
    color: var(--muted);
    line-height: 1.65;
}

.site-footer {
    padding: 24px 0 34px;
    border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
    .tool-grid,
    .result-facts {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }

    button,
    .secondary-action {
        width: 100%;
    }
}

.form-stack {
    display: grid;
    gap: 16px;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-stack button {
    width: fit-content;
}

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

    .form-stack button {
        width: 100%;
    }
}

.data-section {
    padding-top: 32px;
    padding-bottom: 32px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

th,
td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

tr:last-child td {
    border-bottom: 0;
}

.angle-facts {
    max-width: 720px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.section-heading p {
    max-width: 420px;
    margin-bottom: 0;
}

.chart-section {
    padding-bottom: 36px;
}

.chart-wheel-wrap {
    display: grid;
    place-items: center;
    overflow-x: auto;
    padding: 12px 0;
}

.chart-wheel {
    width: min(100%, 620px);
    height: auto;
    aspect-ratio: 1;
    color: var(--ink);
}

.wheel-ring {
    fill: #fffdfa;
    stroke: var(--line);
    stroke-width: 1.4;
}

.wheel-ring--outer {
    fill: #fbfaf7;
    stroke: #b7aa96;
    stroke-width: 2;
}

.wheel-ring--houses,
.wheel-ring--aspects {
    fill: transparent;
}

.wheel-sign,
.house-label,
.planet-label {
    dominant-baseline: middle;
    text-anchor: middle;
    letter-spacing: 0;
}

.wheel-sign {
    fill: #27445c;
    font-size: 22px;
}

.house-line {
    stroke: #9b8d79;
    stroke-width: 1;
    opacity: 0.82;
}

.house-line--angle {
    stroke: #0b4f4a;
    stroke-width: 2.2;
}

.house-label {
    fill: #5f646b;
    font-size: 11px;
    font-weight: 800;
}

.aspect-line {
    stroke-width: 1.2;
    opacity: 0.48;
}

.aspect-line--conjunction,
.aspect-line--trine,
.aspect-line--sextile {
    stroke: #0f766e;
}

.aspect-line--square,
.aspect-line--opposition {
    stroke: #a52828;
}

.planet-marker {
    stroke: #c9c0b2;
    stroke-width: 0.8;
    opacity: 0.55;
}

.planet-dot {
    fill: #171717;
    stroke: #fffdfa;
    stroke-width: 1.5;
}

.planet-label {
    fill: #171717;
    font-size: 19px;
    font-weight: 850;
}

@media (max-width: 760px) {
    .section-heading {
        display: block;
    }

    .chart-wheel-wrap {
        padding: 4px 0;
    }

    .wheel-sign {
        font-size: 20px;
    }

    .planet-label {
        font-size: 17px;
    }
}

.form-success {
    color: #0f766e;
    font-weight: 800;
}

.account-facts {
    grid-template-columns: 1fr;
}

.tool-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tool-link-grid a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    padding: 10px;
}

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

.save-chart-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.save-chart-form button {
    width: fit-content;
}

@media (max-width: 760px) {
    .save-chart-form button {
        width: 100%;
    }
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.secondary-action--light {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

@media (max-width: 760px) {
    .action-row {
        display: grid;
    }
}

.table-action {
    color: var(--accent-dark);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.synastry-form-band {
    padding-top: 8px;
}

.synastry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.profile-fieldset {
    display: grid;
    gap: 14px;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.profile-fieldset legend {
    padding: 0 6px;
    font-weight: 850;
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.score-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
}

.score-card dd {
    font-size: 1.35rem;
}

.score-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8e2d7;
}

.score-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

@media (max-width: 1080px) {
    .synastry-grid,
    .score-grid {
        grid-template-columns: 1fr;
    }
}

.breadcrumb {
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: #9b9285;
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumb span {
    color: var(--ink);
    font-weight: 750;
}

.tool-link-grid--featured {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1080px) {
    .tool-link-grid--featured {
        grid-template-columns: 1fr;
    }
}

.dominant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dominant-panel h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.dominant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 12px;
}

.dominant-row .score-bar {
    grid-column: 1 / -1;
}

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

.angular-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.angular-row:last-child {
    border-bottom: 0;
}

.angular-row small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.interpretation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.interpretation-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.interpretation-card p {
    margin-bottom: 10px;
}

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

.manual-coordinates {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--surface-muted);
}

.manual-coordinates summary {
    cursor: pointer;
    font-weight: 700;
}

.manual-coordinates .field-grid,
.manual-coordinates > div {
    margin-top: 0.85rem;
}

.chart-wheel-panel {
    min-height: 2.75rem;
    max-width: 620px;
    width: min(100%, 620px);
    margin: 0.75rem auto 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    text-align: center;
}

.planet-label,
.planet-dot,
.aspect-line {
    transition: opacity 160ms ease, stroke-width 160ms ease, transform 160ms ease;
}

.planet-label:hover,
.planet-label:focus,
.planet-label.is-active,
.planet-dot:hover,
.planet-dot:focus,
.planet-dot.is-active {
    fill: #0b4f4a;
    outline: none;
}

.aspect-line:hover,
.aspect-line:focus,
.aspect-line.is-active {
    opacity: 0.95;
    stroke-width: 3;
    outline: none;
}


.report-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.report-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 8px;
}

.report-section {
    break-inside: avoid;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.report-reading-stack {
    display: grid;
    gap: 14px;
}

.report-reading h3 {
    margin-top: 0;
}

.report-limit {
    padding-bottom: 24px;
}


.report-cover {
    padding-top: 8px;
}

.report-toc-list {
    display: grid;
    gap: 8px;
    max-width: 720px;
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.6;
}

.report-callout {
    max-width: 860px;
    margin: 0 0 18px;
    border-left: 4px solid var(--accent);
    background: #0e0c18; color: var(--ink);
    padding: 14px 16px;
}

.report-callout p {
    margin: 0;
}

.report-subsection {
    margin-top: 16px;
}

.report-angle-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-reading p:last-child,
.report-summary-grid p:last-child,
.report-limit p:last-child {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .report-hero,
    .report-actions {
        display: block;
    }

    .report-summary-grid,
    .report-angle-facts {
        grid-template-columns: 1fr;
    }
}

@media print {
    :root {
        --bg: #ffffff;
        --surface: #ffffff;
        --ink: #111111;
        --muted: #333333;
        --line: #cfcfcf;
        --accent: #111111;
        --accent-dark: #111111;
    }

    html,
    body {
        background: #ffffff;
    }

    .site-header,
    .site-footer,
    .no-print,
    .chart-wheel-panel {
        display: none !important;
    }

    .tool-hero,
    .tool-grid,
    .content-band {
        width: 100%;
        margin: 0;
    }

    .tool-hero {
        padding: 0 0 18px;
    }

    h1 {
        font-size: 32px;
        line-height: 1.1;
    }

    h2 {
        font-size: 20px;
    }

    .content-band {
        padding: 18px 0;
        border-top: 1px solid #cfcfcf;
    }

    .report-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-section:nth-of-type(4),
    .report-section:nth-of-type(6) {
        break-before: page;
        page-break-before: always;
    }

    .report-summary-grid,
    .dominant-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .report-angle-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-reading-stack {
        gap: 10px;
    }

    .report-callout {
        border-left-color: #111111;
        background: #ffffff;
    }

    .tool-panel {
        box-shadow: none;
        border-color: #cfcfcf;
    }

    a {
        color: #111111;
        text-decoration: none;
    }

    table {
        font-size: 12px;
    }

    .report-toc-list {
        color: #111111;
    }

    @page {
        margin: 16mm 14mm;
    }
}


/* ASTROLOGIX_REVOLUTION_DESIGN */
:root {
    color-scheme: light;
    --bg: #f5efe3;
    --bg-2: #e7f2ed;
    --surface: rgba(255, 252, 244, 0.94);
    --surface-strong: #fffaf0;
    --surface-muted: #f0eadf;
    --ink: #11120f;
    --muted: #58605d;
    --line: #1b1d18;
    --line-soft: rgba(17, 18, 15, 0.16);
    --border: var(--line-soft);
    --accent: #006f62;
    --accent-dark: #003f39;
    --solar: #d98a21;
    --coral: #d94c3d;
    --violet: #6d5bd0;
    --danger: #b42331;
    --shadow-hard: 8px 8px 0 #11120f;
    --shadow-soft: 0 22px 60px rgba(17, 18, 15, 0.11);
}

html {
    min-height: 100%;
    background:
        linear-gradient(90deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        linear-gradient(135deg, #fff7e8 0%, #edf6f2 42%, #f8eee9 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 16%, rgba(217,138,33,0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 24%, rgba(0,111,98,0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 72%, rgba(217,76,61,0.12) 0 1px, transparent 2px);
    background-size: 120px 120px, 164px 164px, 140px 140px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 64%, rgba(17,18,15,0.08) 64% 64.25%, transparent 64.25%),
        linear-gradient(25deg, transparent 0 72%, rgba(0,111,98,0.10) 72% 72.35%, transparent 72.35%);
    opacity: 0.9;
}

.site-header,
.site-footer,
.tool-hero,
.tool-grid,
.content-band,
.breadcrumb {
    width: min(1180px, calc(100% - 36px));
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 250, 240, 0.88);
    box-shadow: 5px 5px 0 rgba(17,18,15,0.96);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 1.08rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand::before {
    content: "✦";
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--ink);
    color: #fffaf0;
    font-size: 0.9rem;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.site-header nav a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 10px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 760;
    text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    border-color: var(--line);
    background: #fffaf0;
    outline: none;
}

.breadcrumb {
    margin-top: 22px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255,250,240,0.72);
}

.tool-hero {
    display: grid;
    min-height: 280px;
    align-items: end;
    padding: 72px 0 34px;
}

.tool-hero > div {
    position: relative;
}

.tool-hero > div::before {
    content: "";
    position: absolute;
    top: -28px;
    left: -18px;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(17,18,15,0.32);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(17,18,15,0.34) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(17,18,15,0.34) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    opacity: 0.44;
}

h1 {
    max-width: 920px;
    font-size: clamp(2.45rem, 7.2vw, 6.8rem);
    line-height: 0.9;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

h3 {
    letter-spacing: 0;
}

.lede {
    max-width: 860px;
    color: #343936;
    font-size: clamp(1.02rem, 1.45vw, 1.28rem);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-dark);
    font-size: 0.72rem;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

.tool-grid {
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 26px;
    padding-bottom: 44px;
}

.tool-panel,
.score-card,
.table-wrap,
.profile-fieldset,
.chart-wheel-panel,
.tool-link-grid a,
.result-facts div {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.tool-panel,
.table-wrap,
.profile-fieldset,
.score-card,
.tool-link-grid a {
    position: relative;
}

.tool-panel::after,
.score-card::after,
.tool-link-grid a::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-top: 2px solid rgba(17,18,15,0.28);
    border-right: 2px solid rgba(17,18,15,0.28);
    pointer-events: none;
}

.result-panel,
form.tool-panel {
    box-shadow: var(--shadow-hard);
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    background: #fffef9;
    color: var(--ink);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(217,138,33,0.28);
    outline-offset: 1px;
}

button,
.secondary-action {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--ink);
    box-shadow: 4px 4px 0 var(--solar);
    color: #fffaf0;
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--solar);
    outline: none;
}

.secondary-action--light {
    background: var(--surface-strong);
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(0,111,98,0.26);
}

.content-band {
    margin-top: 14px;
    border-top: 2px solid var(--line);
}

.content-band > h2,
.section-heading h2 {
    max-width: 780px;
    text-transform: none;
}

.table-wrap {
    border-width: 1px;
    box-shadow: 6px 6px 0 rgba(17,18,15,0.12);
}

th {
    color: var(--ink);
    background: #eee6d8;
    font-weight: 850;
}

td,
th {
    border-color: rgba(17,18,15,0.16);
}

.chart-wheel-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(17,18,15,0.045) 1px, transparent 1px),
        rgba(255,250,240,0.82);
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: var(--shadow-hard);
}

.chart-wheel {
    filter: drop-shadow(0 18px 18px rgba(17,18,15,0.16));
}

.wheel-ring {
    fill: rgba(255,250,240,0.78);
    stroke: rgba(17,18,15,0.52);
}

.wheel-ring--outer {
    fill: rgba(231,242,237,0.56);
    stroke: var(--line);
}

.wheel-sign {
    fill: var(--violet);
    font-weight: 850;
}

.house-line--angle,
.aspect-line--conjunction,
.aspect-line--trine,
.aspect-line--sextile {
    stroke: var(--accent);
}

.aspect-line--square,
.aspect-line--opposition {
    stroke: var(--coral);
}

.planet-dot {
    fill: var(--ink);
    stroke: var(--solar);
}

.planet-label {
    fill: var(--ink);
}

.score-bar {
    height: 10px;
    border: 1px solid rgba(17,18,15,0.12);
    background: #dfd7c8;
}

.score-bar span {
    background: linear-gradient(90deg, var(--accent), var(--solar));
}

.interpretation-card,
.report-reading {
    border-left: 5px solid var(--accent);
}

.form-success {
    color: var(--accent-dark);
}

.form-error {
    border-left: 4px solid var(--danger);
    padding-left: 10px;
}

.site-footer {
    margin-top: 44px;
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    padding: 20px;
    background: rgba(255,250,240,0.72);
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer a {
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1080px) {
    .site-header {
        position: static;
        display: grid;
        gap: 12px;
    }

    .site-header nav {
        justify-content: flex-start;
    }

    .tool-grid,
    .score-grid,
    .synastry-grid,
    .dominant-grid,
    .interpretation-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: clamp(2.35rem, 14vw, 4.6rem);
    }
}

@media (max-width: 560px) {
    .site-header,
    .site-footer,
    .tool-hero,
    .tool-grid,
    .content-band,
    .breadcrumb {
        width: min(100% - 22px, 1180px);
    }

    .tool-hero {
        min-height: 220px;
        padding-top: 46px;
    }

    .tool-panel,
    .score-card {
        padding: 16px;
    }

    .result-panel,
    form.tool-panel,
    .chart-wheel-wrap {
        box-shadow: 4px 4px 0 rgba(17,18,15,0.92);
    }
}

@media print {
    html,
    body {
        background: #ffffff !important;
    }

    body::before,
    .tool-hero > div::before,
    .tool-panel::after,
    .score-card::after,
    .tool-link-grid a::after {
        display: none !important;
    }

    .site-header,
    .site-footer,
    .no-print,
    .chart-wheel-panel {
        display: none !important;
    }

    .tool-panel,
    .score-card,
    .table-wrap,
    .chart-wheel-wrap,
    .result-panel,
    form.tool-panel {
        box-shadow: none !important;
    }

    button,
    .secondary-action {
        box-shadow: none !important;
    }
}


/* ASTROLOGIX_HOME_EXPERIENCE */
.home-hero,
.home-flow,
.home-split,
.home-proof {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 32px;
    align-items: center;
    min-height: clamp(560px, 76vh, 760px);
    padding: 48px 0 28px;
}

.home-hero__copy h1 {
    max-width: 820px;
    margin-bottom: 18px;
    font-size: clamp(3.7rem, 11vw, 8.8rem);
    line-height: 0.86;
    text-transform: uppercase;
}

.home-claim {
    max-width: 720px;
    color: var(--ink);
    font-size: clamp(1.12rem, 2vw, 1.55rem);
    line-height: 1.48;
    font-weight: 760;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.home-console {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px),
        #fffdfa;
    background-size: 26px 26px;
    box-shadow: 12px 12px 0 #f3c15f;
}

.home-console__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 0 16px;
    border-bottom: 2px solid var(--ink);
    background: #ffffff;
    font-size: 0.84rem;
    font-weight: 850;
    text-transform: uppercase;
}

.home-console__top strong {
    color: #0b6f68;
}

.home-orbit {
    position: relative;
    width: min(78vw, 330px);
    aspect-ratio: 1;
    margin: 42px auto 30px;
}

.home-orbit__ring,
.home-orbit__axis,
.home-orbit__node {
    position: absolute;
}

.home-orbit__ring {
    inset: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.home-orbit__ring--inner {
    inset: 21%;
    border-color: #0f766e;
}

.home-orbit__axis {
    inset: 50% -12% auto -12%;
    height: 2px;
    background: #171717;
    transform: rotate(-18deg);
}

.home-orbit__node {
    display: grid;
    place-items: center;
    width: 54px;
    aspect-ratio: 1;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: 5px 5px 0 #ef6f61;
}

.home-orbit__node--sun { top: 3%; left: 42%; }
.home-orbit__node--moon { right: 0; top: 48%; box-shadow: 5px 5px 0 #6b5cff; }
.home-orbit__node--asc { left: 0; top: 48%; box-shadow: 5px 5px 0 #0f766e; }
.home-orbit__node--mc { bottom: 1%; left: 43%; box-shadow: 5px 5px 0 #f3c15f; }

.home-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 2px solid var(--ink);
}

.home-signal-grid div {
    min-height: 76px;
    padding: 14px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 255, 255, 0.74);
}

.home-signal-grid div:nth-child(even) {
    border-right: 0;
}

.home-signal-grid dt {
    color: #5f646b;
    font-weight: 850;
    text-transform: uppercase;
}

.home-signal-grid dd {
    color: var(--ink);
    font-size: 1.05rem;
}

.home-flow {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, 1fr);
    gap: 12px;
    padding: 0 0 56px;
}

.home-command {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 12px;
    min-height: 210px;
    padding: 18px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 7px 7px 0 rgba(23, 23, 23, 0.14);
}

.home-command--primary {
    background: #0f766e;
    color: #ffffff;
    box-shadow: 7px 7px 0 #171717;
}

.home-command span {
    width: fit-content;
    border-bottom: 2px solid currentColor;
    font-size: 0.86rem;
    font-weight: 900;
}

.home-command strong {
    font-size: clamp(1.12rem, 2vw, 1.55rem);
    line-height: 1.05;
}

.home-command em {
    align-self: end;
    color: inherit;
    font-style: normal;
    line-height: 1.45;
    opacity: 0.82;
}

.home-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 28px;
    align-items: start;
}

.home-split h2,
.home-proof h2 {
    max-width: 680px;
    font-size: clamp(1.9rem, 4vw, 3.5rem);
    line-height: 0.98;
}

.home-link-stack {
    display: grid;
    gap: 10px;
}

.home-link-stack a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 0 16px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 860;
    text-decoration: none;
}

.home-link-stack a::after {
    content: '>';
    font-weight: 900;
}

.home-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-proof article {
    border-top: 3px solid var(--ink);
    padding-top: 18px;
}

@media (max-width: 920px) {
    .home-hero,
    .home-flow,
    .home-split,
    .home-proof {
        grid-template-columns: 1fr;
    }

    .home-hero {
        min-height: auto;
        padding-top: 34px;
    }

    .home-console {
        min-height: 410px;
        box-shadow: 8px 8px 0 #f3c15f;
    }

    .home-flow {
        padding-bottom: 34px;
    }

    .home-command {
        min-height: 150px;
    }
}

@media (max-width: 620px) {
    .home-hero__copy h1 {
        font-size: clamp(3rem, 18vw, 5.2rem);
    }

    .home-actions,
    .home-actions .secondary-action {
        width: 100%;
    }

    .home-orbit {
        width: min(76vw, 270px);
    }

    .home-orbit__node {
        width: 46px;
    }

    .home-signal-grid {
        grid-template-columns: 1fr;
    }

    .home-signal-grid div,
    .home-signal-grid div:nth-child(even) {
        border-right: 0;
    }
}


/* ASTROLOGIX_DARK_MOTION */
:root {
    color-scheme: dark;
    --bg: #090b10;
    --bg-2: #0e2522;
    --surface: rgba(18, 21, 28, 0.94);
    --surface-strong: #151923;
    --surface-muted: #1b202b;
    --ink: #f6f0df;
    --muted: #b9c0bd;
    --line: #f6f0df;
    --line-soft: rgba(246, 240, 223, 0.18);
    --border: var(--line-soft);
    --accent: #34d3bd;
    --accent-dark: #89fff0;
    --solar: #f3b34d;
    --coral: #ff7767;
    --violet: #9d8cff;
    --danger: #ff6f7d;
    --shadow-hard: 8px 8px 0 rgba(52, 211, 189, 0.74);
    --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.42);
}

@keyframes astro-drift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 68px 34px, -34px 68px, 0 0; }
}

@keyframes astro-starfield {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 120px 120px, -164px 164px, 140px -140px; }
}

@keyframes astro-scan {
    0%, 100% { transform: translateY(-18%); opacity: 0.2; }
    50% { transform: translateY(18%); opacity: 0.45; }
}

@keyframes astro-spin {
    to { transform: rotate(360deg); }
}

@keyframes astro-counter-spin {
    to { transform: rotate(-360deg); }
}

@keyframes astro-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes astro-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 189, 0.0), 5px 5px 0 currentColor; }
    50% { box-shadow: 0 0 28px 5px rgba(52, 211, 189, 0.32), 5px 5px 0 currentColor; }
}

html {
    background:
        linear-gradient(90deg, rgba(246,240,223,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246,240,223,0.045) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(52,211,189,0.18), transparent 30%),
        radial-gradient(circle at 78% 6%, rgba(157,140,255,0.15), transparent 26%),
        linear-gradient(135deg, #090b10 0%, #0d141b 48%, #120f1d 100%);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    animation: astro-drift 24s linear infinite;
}

body {
    background:
        radial-gradient(circle at 12% 16%, rgba(243,179,77,0.30) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 24%, rgba(52,211,189,0.34) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 72%, rgba(255,119,103,0.24) 0 1px, transparent 2px);
    background-size: 120px 120px, 164px 164px, 140px 140px;
    animation: astro-starfield 38s linear infinite;
}

body::before {
    background:
        linear-gradient(115deg, transparent 0 64%, rgba(52,211,189,0.24) 64% 64.25%, transparent 64.25%),
        linear-gradient(25deg, transparent 0 72%, rgba(243,179,77,0.16) 72% 72.35%, transparent 72.35%),
        radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(246,240,223,0.06) 38.15%, transparent 38.45%);
}

.site-header,
.site-footer,
.breadcrumb {
    background: rgba(12, 15, 22, 0.82);
    border-color: rgba(246, 240, 223, 0.44);
    box-shadow: 5px 5px 0 rgba(52, 211, 189, 0.65);
}

.site-header {
    backdrop-filter: blur(18px) saturate(1.25);
}

.brand::before {
    background: var(--accent);
    color: #07100f;
    animation: astro-spin 18s linear infinite;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.tool-link-grid a:hover,
.home-link-stack a:hover,
.home-command:hover {
    background: rgba(52, 211, 189, 0.12);
    color: var(--ink);
}

.tool-panel,
.score-card,
.table-wrap,
.profile-fieldset,
.chart-wheel-panel,
.tool-link-grid a,
.result-facts div,
.home-command,
.home-link-stack a,
.home-console {
    background: linear-gradient(145deg, rgba(20, 24, 34, 0.96), rgba(10, 13, 20, 0.96));
    border-color: rgba(246, 240, 223, 0.52);
    color: var(--ink);
}

.tool-panel,
.score-card,
.home-command,
.home-link-stack a {
    transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.home-command:hover,
.home-link-stack a:hover {
    border-color: var(--accent);
    box-shadow: 10px 10px 0 rgba(52, 211, 189, 0.42), 0 24px 70px rgba(0, 0, 0, 0.36);
}

.tool-panel::after,
.score-card::after,
.tool-link-grid a::after {
    border-color: rgba(52, 211, 189, 0.46);
}

.lede,
.content-band p,
.hint,
.status,
.site-footer,
.result-degree,
.home-command em {
    color: var(--muted);
}

input,
select,
textarea,
.wheel-ring,
.wheel-ring--outer {
    background: #0d1118;
    color: var(--ink);
}

input,
select,
textarea {
    border-color: rgba(246, 240, 223, 0.36);
}

input:focus,
select:focus,
textarea:focus {
    outline-color: rgba(52, 211, 189, 0.34);
}

button,
.secondary-action {
    background: var(--accent);
    color: #05100e;
    box-shadow: 4px 4px 0 var(--solar);
}

.secondary-action--light {
    background: rgba(246, 240, 223, 0.08);
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(157, 140, 255, 0.72);
}

th {
    background: rgba(246, 240, 223, 0.08);
    color: var(--ink);
}

td,
th {
    border-color: rgba(246, 240, 223, 0.16);
}

.chart-wheel-wrap,
.home-console {
    background:
        linear-gradient(90deg, rgba(246,240,223,0.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246,240,223,0.055) 1px, transparent 1px),
        linear-gradient(145deg, rgba(18, 22, 31, 0.94), rgba(7, 10, 16, 0.98));
    background-size: 28px 28px, 28px 28px, auto;
}

.home-console::after {
    content: "";
    position: absolute;
    inset: -40% 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(52, 211, 189, 0.10), transparent);
    animation: astro-scan 7s ease-in-out infinite;
}

.home-console__top {
    position: relative;
    z-index: 1;
    background: rgba(7, 10, 16, 0.9);
    border-color: rgba(246, 240, 223, 0.52);
}

.home-orbit {
    animation: astro-float 5.5s ease-in-out infinite;
}

.home-orbit__ring--outer {
    animation: astro-spin 28s linear infinite;
}

.home-orbit__ring--inner {
    animation: astro-counter-spin 20s linear infinite;
}

.home-orbit__ring {
    border-color: rgba(246, 240, 223, 0.64);
}

.home-orbit__ring--outer::before,
.home-orbit__ring--inner::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 20px rgba(52, 211, 189, 0.82);
}

.home-orbit__axis {
    background: rgba(246, 240, 223, 0.68);
}

.home-orbit__node {
    background: #101620;
    color: var(--ink);
    border-color: rgba(246, 240, 223, 0.74);
    animation: astro-pulse 4.6s ease-in-out infinite;
}

.home-orbit__node--sun { color: var(--solar); animation-delay: 0s; }
.home-orbit__node--moon { color: var(--violet); animation-delay: 0.8s; }
.home-orbit__node--asc { color: var(--accent); animation-delay: 1.4s; }
.home-orbit__node--mc { color: var(--coral); animation-delay: 2.1s; }

.home-signal-grid div {
    background: rgba(246, 240, 223, 0.055);
    border-color: rgba(246, 240, 223, 0.36);
}

.home-command--primary {
    background: linear-gradient(145deg, rgba(52, 211, 189, 0.96), rgba(10, 99, 89, 0.96));
    color: #061210;
}

.home-command--primary em {
    color: rgba(6, 18, 16, 0.74);
}

.table-action,
.breadcrumb a,
.site-footer a {
    color: var(--accent-dark);
}

.wheel-ring {
    fill: rgba(14, 18, 26, 0.82);
    stroke: rgba(246, 240, 223, 0.35);
}

.wheel-ring--outer {
    fill: rgba(52, 211, 189, 0.08);
    stroke: rgba(246, 240, 223, 0.62);
}

.planet-dot {
    fill: var(--accent);
    stroke: #07100f;
}

.planet-label,
.house-label,
.home-signal-grid dd,
dd {
    color: var(--ink);
    fill: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}


/* ASTROLOGIX_DEEP_STARFIELD */
@keyframes astro-parallax-near {
    0% { background-position: 0 0, 32px 18px, 0 0; }
    100% { background-position: 180px -96px, -84px 120px, 0 0; }
}

@keyframes astro-parallax-far {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: -90px 64px, 54px -130px, 0 0; }
}

@keyframes astro-constellation-drift {
    0% { transform: translate3d(-1.5vw, -1vh, 0) rotate(-1deg); opacity: 0.42; }
    50% { transform: translate3d(1vw, 1.6vh, 0) rotate(1.2deg); opacity: 0.68; }
    100% { transform: translate3d(-1.5vw, -1vh, 0) rotate(-1deg); opacity: 0.42; }
}

@keyframes astro-twinkle-a {
    0%, 100% { opacity: 0.18; filter: drop-shadow(0 0 0 rgba(52,211,189,0)); }
    37% { opacity: 0.82; filter: drop-shadow(0 0 5px rgba(52,211,189,0.75)); }
    63% { opacity: 0.32; }
}

@keyframes astro-twinkle-b {
    0%, 100% { opacity: 0.12; filter: drop-shadow(0 0 0 rgba(243,179,77,0)); }
    22% { opacity: 0.48; }
    74% { opacity: 0.9; filter: drop-shadow(0 0 6px rgba(243,179,77,0.68)); }
}

html {
    background:
        radial-gradient(circle at 8% 18%, rgba(246,240,223,0.95) 0 1px, transparent 1.7px),
        radial-gradient(circle at 24% 72%, rgba(52,211,189,0.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 82% 26%, rgba(157,140,255,0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 68% 86%, rgba(243,179,77,0.68) 0 1px, transparent 2px),
        linear-gradient(90deg, rgba(246,240,223,0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246,240,223,0.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(52,211,189,0.18), transparent 30%),
        radial-gradient(circle at 78% 6%, rgba(157,140,255,0.15), transparent 26%),
        linear-gradient(135deg, #080a0f 0%, #0c141d 48%, #120d1e 100%);
    background-size:
        191px 157px,
        263px 211px,
        337px 281px,
        421px 347px,
        34px 34px,
        34px 34px,
        auto,
        auto,
        auto;
    animation: astro-parallax-far 95s linear infinite;
}

body {
    background:
        radial-gradient(circle at 14% 22%, rgba(246,240,223,0.95) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 36% 18%, rgba(52,211,189,0.75) 0 0.9px, transparent 1.7px),
        radial-gradient(circle at 64% 42%, rgba(255,119,103,0.72) 0 0.8px, transparent 1.6px),
        radial-gradient(circle at 76% 78%, rgba(243,179,77,0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 46% 88%, rgba(157,140,255,0.72) 0 0.9px, transparent 1.7px),
        linear-gradient(120deg, transparent 0 18%, rgba(52,211,189,0.035) 18.12% 18.28%, transparent 18.42% 100%),
        linear-gradient(34deg, transparent 0 63%, rgba(246,240,223,0.035) 63.08% 63.18%, transparent 63.32% 100%);
    background-size:
        143px 181px,
        229px 173px,
        311px 257px,
        419px 331px,
        547px 389px,
        620px 620px,
        760px 760px;
    animation: astro-parallax-near 58s linear infinite;
}

body::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(52,211,189,0.95) 0 1.5px, transparent 2.8px),
        radial-gradient(circle at 22% 28%, rgba(246,240,223,0.55) 0 1px, transparent 2px),
        linear-gradient(27deg, transparent 0 28.8%, rgba(52,211,189,0.24) 28.92% 29.02%, transparent 29.14%),
        radial-gradient(circle at 66% 18%, rgba(243,179,77,0.9) 0 1.2px, transparent 2.4px),
        radial-gradient(circle at 70% 23%, rgba(246,240,223,0.50) 0 0.9px, transparent 2px),
        linear-gradient(148deg, transparent 0 55.3%, rgba(243,179,77,0.18) 55.42% 55.52%, transparent 55.66%),
        radial-gradient(circle at 78% 70%, rgba(157,140,255,0.88) 0 1.3px, transparent 2.5px),
        radial-gradient(circle at 74% 75%, rgba(246,240,223,0.50) 0 0.9px, transparent 1.9px),
        linear-gradient(84deg, transparent 0 76.4%, rgba(157,140,255,0.18) 76.54% 76.64%, transparent 76.78%);
    animation: astro-constellation-drift 27s ease-in-out infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 11% 62%, rgba(52,211,189,0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 33%, rgba(243,179,77,0.92) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 14%, rgba(246,240,223,0.82) 0 1px, transparent 2px),
        radial-gradient(circle at 89% 38%, rgba(157,140,255,0.92) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 88%, rgba(255,119,103,0.88) 0 1px, transparent 2px),
        radial-gradient(circle at 39% 78%, rgba(246,240,223,0.72) 0 1px, transparent 2px);
    background-size: 100% 100%;
    animation: astro-twinkle-a 5.7s ease-in-out infinite alternate, astro-twinkle-b 8.9s ease-in-out infinite;
}

.home-console,
.chart-wheel-wrap {
    isolation: isolate;
}

.home-console::before,
.chart-wheel-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 13% 24%, rgba(246,240,223,0.6) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 18%, rgba(52,211,189,0.65) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 76%, rgba(243,179,77,0.55) 0 1px, transparent 2px);
    animation: astro-parallax-far 44s linear infinite reverse;
}


/* ASTROLOGIX_TYPE_SCALE_FIX */
h1 {
    font-size: clamp(2.15rem, 5.6vw, 5.35rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.28rem, 1.65vw, 1.75rem);
    line-height: 1.14;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.tool-hero {
    min-height: 240px;
    padding-top: 58px;
}

.home-hero__copy h1 {
    font-size: clamp(3rem, 8.4vw, 6.9rem);
    line-height: 0.9;
    max-width: 780px;
}

.home-claim {
    font-size: clamp(1.02rem, 1.45vw, 1.32rem);
    line-height: 1.52;
}

.home-command strong {
    font-size: clamp(1.03rem, 1.45vw, 1.28rem);
    line-height: 1.13;
}

.home-split h2,
.home-proof h2 {
    font-size: clamp(1.45rem, 2.7vw, 2.65rem);
    line-height: 1.04;
}

.tool-panel h2,
.score-card h2,
.report-reading h3,
.interpretation-card h3 {
    line-height: 1.18;
}

.section-heading {
    align-items: flex-start;
}

@media (max-width: 1080px) {
    h1 {
        font-size: clamp(2rem, 10.5vw, 3.9rem);
        line-height: 1.02;
    }

    .home-hero__copy h1 {
        font-size: clamp(2.85rem, 15vw, 4.9rem);
        line-height: 0.94;
    }

    .home-split h2,
    .home-proof h2 {
        font-size: clamp(1.35rem, 7vw, 2.15rem);
        line-height: 1.08;
    }
}

@media (max-width: 560px) {
    h1,
    .home-hero__copy h1 {
        font-size: clamp(2.35rem, 13vw, 3.55rem);
        line-height: 1;
    }

    h2,
    .home-split h2,
    .home-proof h2 {
        font-size: clamp(1.22rem, 6vw, 1.75rem);
        line-height: 1.12;
    }

    .tool-hero {
        min-height: 190px;
        padding-top: 36px;
    }

    .home-command {
        min-height: 132px;
    }
}


/* ASTROLOGIX_H1_FINAL_SCALE */
h1 {
    font-size: clamp(1.95rem, 4.8vw, 4.55rem);
    line-height: 1.02;
}

.home-hero__copy h1 {
    font-size: clamp(2.55rem, 7vw, 5.55rem);
    line-height: 0.96;
}

@media (max-width: 1080px) {
    h1 {
        font-size: clamp(1.85rem, 8.8vw, 3.25rem);
        line-height: 1.04;
    }

    .home-hero__copy h1 {
        font-size: clamp(2.35rem, 12vw, 4.05rem);
        line-height: 1;
    }
}

@media (max-width: 560px) {
    h1,
    .home-hero__copy h1 {
        font-size: clamp(2rem, 10.5vw, 3rem);
        line-height: 1.04;
    }
}


/* ASTROLOGIX_INTERNAL_PAGES_POLISH */
main {
    overflow-x: clip;
}

.site-header {
    align-items: flex-start;
    gap: 16px;
}

.site-header nav {
    max-width: 920px;
}

.tool-hero {
    min-height: 220px;
    padding-bottom: 26px;
}

.tool-hero .lede {
    max-width: 780px;
}

.tool-grid,
.synastry-grid,
.field-grid,
.score-grid,
.dominant-grid,
.interpretation-grid,
.report-summary-grid,
.report-angle-facts {
    min-width: 0;
}

.tool-panel,
.profile-fieldset,
.score-card,
.interpretation-card,
.report-reading,
.result-facts div {
    min-width: 0;
}

.tool-panel > *:last-child,
.profile-fieldset > *:last-child,
.content-band > *:last-child {
    margin-bottom: 0;
}

.form-stack {
    gap: 18px;
}

label,
.profile-fieldset legend {
    color: var(--ink);
}

.profile-fieldset legend {
    max-width: 100%;
    border: 1px solid rgba(246, 240, 223, 0.28);
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(52, 211, 189, 0.12);
    line-height: 1.1;
}

input,
select,
textarea {
    min-width: 0;
    min-height: 48px;
    color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
    color: rgba(246, 240, 223, 0.48);
}

button,
.secondary-action {
    max-width: 100%;
    text-align: center;
    line-height: 1.15;
}

.form-stack button {
    width: fit-content;
    min-width: min(100%, 210px);
}

.manual-coordinates {
    border-color: rgba(246, 240, 223, 0.28);
    background: rgba(246, 240, 223, 0.055);
}

.manual-coordinates summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--accent-dark);
}

.manual-coordinates summary::after {
    content: '+';
    display: grid;
    width: 24px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 900;
}

.manual-coordinates[open] summary::after {
    content: '-';
}

.result-panel {
    align-self: stretch;
}

.content-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.content-list li {
    position: relative;
    padding: 10px 12px 10px 34px;
    border: 1px solid rgba(246, 240, 223, 0.18);
    border-radius: 8px;
    background: rgba(246, 240, 223, 0.045);
    line-height: 1.45;
}

.content-list li::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 14px;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(52, 211, 189, 0.72);
}

.table-wrap {
    max-width: 100%;
    scrollbar-color: var(--accent) rgba(246, 240, 223, 0.08);
}

table {
    min-width: min(680px, 100vw);
}

.chart-wheel-wrap {
    max-width: 100%;
}

.chart-wheel {
    max-width: min(100%, 560px);
}

.chart-wheel-panel {
    max-width: min(100%, 560px);
}

.breadcrumb {
    overflow: hidden;
}

.breadcrumb ol {
    min-width: 0;
}

.breadcrumb li {
    min-width: 0;
}

.breadcrumb a,
.breadcrumb span {
    overflow-wrap: anywhere;
}

.report-actions,
.action-row {
    align-items: stretch;
}

.action-row .secondary-action,
.report-actions .secondary-action {
    margin-top: 0;
}

@media (max-width: 980px) {
    .site-header {
        position: static;
    }

    .site-header nav {
        justify-content: flex-start;
        max-width: none;
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }

    .synastry-form-band .tool-panel {
        padding: 16px;
    }
}

@media (max-width: 760px) {
    .site-header nav a {
        min-height: 32px;
        padding-inline: 9px;
        font-size: 0.82rem;
    }

    .breadcrumb {
        border-radius: 8px;
    }

    .breadcrumb ol {
        display: grid;
        gap: 5px;
    }

    .breadcrumb li:not(:last-child)::after {
        content: none;
    }

    .tool-hero {
        min-height: auto;
        padding-top: 32px;
        padding-bottom: 18px;
    }

    .form-stack button,
    .secondary-action,
    button {
        width: 100%;
    }

    .profile-fieldset {
        padding: 14px;
    }

    .field-grid {
        gap: 14px;
    }

    .content-list li {
        padding-right: 10px;
    }
}

@media (max-width: 460px) {
    .site-header,
    .site-footer,
    .tool-hero,
    .tool-grid,
    .content-band,
    .breadcrumb,
    .home-hero,
    .home-flow,
    .home-split,
    .home-proof {
        width: min(100% - 18px, 1180px);
    }

    .tool-panel,
    .profile-fieldset,
    .score-card {
        padding: 14px;
    }

    .site-header nav {
        gap: 4px;
    }

    .site-header nav a {
        font-size: 0.78rem;
    }
}


/* ASTROLOGIX_NO_HOVER_SHIFT */
button,
.secondary-action,
.tool-panel,
.score-card,
.home-command,
.home-link-stack a,
.tool-link-grid a,
.profile-fieldset,
.table-wrap,
.result-facts div,
.chart-wheel-wrap,
.home-console {
    transition-property: box-shadow, border-color, background-color, color, opacity;
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible,
.tool-panel:hover,
.score-card:hover,
.home-command:hover,
.home-link-stack a:hover,
.tool-link-grid a:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.home-console:hover {
    transform: none !important;
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.home-console:hover {
    border-color: rgba(246, 240, 223, 0.52);
    box-shadow: var(--shadow-soft);
}

form.tool-panel:hover,
.result-panel:hover {
    box-shadow: var(--shadow-hard);
}

.home-command:hover,
.home-link-stack a:hover,
.tool-link-grid a:hover {
    border-color: var(--accent);
    box-shadow: 7px 7px 0 rgba(52, 211, 189, 0.34);
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 4px 4px 0 var(--solar);
}

.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    box-shadow: 4px 4px 0 rgba(157, 140, 255, 0.72);
}


.tool-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tool-category-grid--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool-category,
.tool-feature-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px;
    box-shadow: 3px 3px 0 rgba(17,18,15,0.92);
}

.tool-category h3,
.tool-feature-card strong {
    display: block;
    margin: 0 0 8px;
    font-size: 1.04rem;
    line-height: 1.2;
}

.tool-category p,
.tool-feature-card small {
    display: block;
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.55;
}

.tool-category .tool-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-category .tool-link-grid a {
    min-height: 44px;
    justify-content: flex-start;
    font-size: 0.9rem;
    text-align: left;
}

.tool-feature-card {
    color: var(--ink);
    text-decoration: none;
}

.tool-feature-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .tool-category-grid,
    .tool-category-grid--featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .tool-category .tool-link-grid {
        grid-template-columns: 1fr;
    }
}

.tool-category-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-category-grid--compact .tool-feature-card {
    min-height: 132px;
}

@media (max-width: 1080px) {
    .tool-category-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .tool-category-grid--compact {
        grid-template-columns: 1fr;
    }
}

.seo-depth-section .section-heading {
    align-items: end;
}

.related-tool-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.faq-card h3 {
    margin-bottom: 8px;
}

.faq-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.65;
}

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

/* ASTROLOGIX_MYSTIC_POLISH */
:root {
    --mystic-ink: #100f1b;
    --mystic-night: #171528;
    --mystic-indigo: #2f2a62;
    --mystic-violet: #6b5bd6;
    --mystic-gold: #c8953d;
    --mystic-rose: #b75f68;
    --mystic-teal: #0b746c;
    --mystic-line: rgba(31, 27, 56, 0.22);
    --mystic-glow: 0 20px 70px rgba(47, 42, 98, 0.16);
    --mystic-card: rgba(255, 252, 243, 0.9);
}

html {
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at 18% 12%, rgba(200, 149, 61, 0.20) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(107, 91, 214, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 78%, rgba(11, 116, 108, 0.16) 0 1px, transparent 2px),
        linear-gradient(135deg, #fff8e9 0%, #eef7f4 40%, #f4edf5 100%);
    background-size: 116px 116px, 174px 174px, 142px 142px, auto;
}

body {
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 20%, rgba(200, 149, 61, 0.22) 0 1px, transparent 1.5px),
        radial-gradient(circle at 56% 68%, rgba(107, 91, 214, 0.18) 0 1px, transparent 1.5px),
        linear-gradient(180deg, rgba(255, 252, 243, 0.45), rgba(243, 238, 230, 0.2));
    background-size: 88px 88px, 132px 132px, 160px 160px, auto;
}

body::before {
    background:
        linear-gradient(115deg, transparent 0 63%, rgba(47, 42, 98, 0.12) 63% 63.18%, transparent 63.18%),
        linear-gradient(24deg, transparent 0 74%, rgba(200, 149, 61, 0.14) 74% 74.18%, transparent 74.18%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5), transparent 42%);
    opacity: 0.95;
}

body::after {
    content: "";
    position: fixed;
    inset: -18% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 28%, rgba(107, 91, 214, 0.13), transparent 18%),
        radial-gradient(circle at 84% 14%, rgba(200, 149, 61, 0.16), transparent 16%),
        radial-gradient(circle at 78% 78%, rgba(11, 116, 108, 0.12), transparent 18%);
    filter: blur(4px);
    animation: astral-drift 28s ease-in-out infinite alternate;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    width: min(1180px, calc(100% - 32px));
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(31, 27, 56, 0.18);
    border-radius: 8px;
    background: rgba(255, 252, 243, 0.82);
    box-shadow: 0 18px 48px rgba(31, 27, 56, 0.12);
    backdrop-filter: blur(18px);
}

.brand {
    position: relative;
    color: var(--mystic-ink);
    letter-spacing: 0;
}

.brand::before {
    content: "☉";
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border: 1px solid rgba(200, 149, 61, 0.75);
    border-radius: 50%;
    color: var(--mystic-gold);
    font-size: 0.9rem;
    box-shadow: 0 0 22px rgba(200, 149, 61, 0.28);
    vertical-align: middle;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: flex-end;
}

.site-header nav a {
    position: relative;
    padding: 6px 0;
    color: rgba(16, 15, 27, 0.72);
    transition: color 180ms ease, text-shadow 180ms ease;
}

.site-header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mystic-gold), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 180ms ease, transform 180ms ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    color: var(--mystic-ink);
    text-shadow: 0 0 18px rgba(200, 149, 61, 0.34);
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.tool-hero {
    position: relative;
    width: min(1180px, calc(100% - 32px));
    margin-top: 28px;
    margin-bottom: 22px;
    padding: clamp(52px, 8vw, 92px) clamp(18px, 4vw, 42px) clamp(34px, 5vw, 58px);
    border: 1px solid rgba(31, 27, 56, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 252, 243, 0.92), rgba(247, 239, 226, 0.74)),
        radial-gradient(circle at 76% 20%, rgba(107, 91, 214, 0.26), transparent 32%),
        radial-gradient(circle at 18% 72%, rgba(200, 149, 61, 0.24), transparent 30%);
    box-shadow: var(--mystic-glow), 9px 9px 0 rgba(16, 15, 27, 0.9);
}

.tool-hero::before {
    content: "✦";
    position: absolute;
    right: clamp(18px, 5vw, 62px);
    top: clamp(16px, 4vw, 46px);
    color: rgba(200, 149, 61, 0.72);
    font-size: clamp(2.4rem, 8vw, 7rem);
    line-height: 1;
    text-shadow: 0 0 34px rgba(200, 149, 61, 0.4);
    animation: star-pulse 4.8s ease-in-out infinite;
}

.tool-hero::after {
    content: "";
    position: absolute;
    right: -84px;
    bottom: -84px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(47, 42, 98, 0.2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 28px rgba(255, 252, 243, 0.26), inset 0 0 0 29px rgba(200, 149, 61, 0.18);
    opacity: 0.9;
    animation: slow-orbit 22s linear infinite;
}

.tool-hero > div,
.tool-hero .lede,
.tool-hero h1 {
    position: relative;
    z-index: 1;
}

h1 {
    max-width: 880px;
    line-height: 0.96;
    color: var(--mystic-ink);
    text-wrap: balance;
}

h2,
.interpretation-card h3,
.tool-category h3,
.tool-feature-card strong {
    color: var(--mystic-ink);
    text-wrap: balance;
}

.lede {
    max-width: 820px;
    color: rgba(16, 15, 27, 0.7);
}

.eyebrow {
    color: var(--mystic-teal);
}

.tool-grid,
.content-band {
    width: min(1180px, calc(100% - 32px));
}

.tool-grid {
    gap: 28px;
    padding-bottom: 56px;
}

.content-band {
    padding-top: 46px;
    padding-bottom: 74px;
    border-top-color: rgba(31, 27, 56, 0.13);
}

.data-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

.tool-panel,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.tool-category,
.tool-feature-card,
.chart-wheel-panel,
.manual-coordinates {
    position: relative;
    border-color: rgba(31, 27, 56, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 252, 243, 0.94), rgba(250, 245, 235, 0.88));
    box-shadow: 0 18px 44px rgba(31, 27, 56, 0.1), 4px 4px 0 rgba(16, 15, 27, 0.86);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease;
}

.tool-panel::before,
.tool-category::before,
.tool-feature-card::before,
.score-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(200, 149, 61, 0.16), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(107, 91, 214, 0.16), transparent 24%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.tool-category:hover,
.tool-feature-card:hover {
    border-color: rgba(200, 149, 61, 0.54);
    box-shadow: 0 24px 60px rgba(31, 27, 56, 0.16), 6px 6px 0 rgba(16, 15, 27, 0.92);
}

.tool-panel:hover::before,
.tool-category:hover::before,
.tool-feature-card:hover::before,
.score-card:hover::before {
    opacity: 1;
}

.interpretation-grid,
.tool-category-grid,
.dominant-grid,
.score-grid,
.faq-grid {
    gap: 22px;
}

.tool-link-grid {
    gap: 14px;
}

.tool-link-grid a,
.secondary-action,
button,
.tool-feature-card {
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background 200ms ease, color 200ms ease;
}

.tool-link-grid a {
    position: relative;
    overflow: hidden;
    border-color: rgba(31, 27, 56, 0.17);
    background: rgba(255, 252, 243, 0.9);
}

.tool-link-grid a::before {
    content: "";
    position: absolute;
    inset: auto 12px 8px 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 149, 61, 0.9), transparent);
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 200ms ease, transform 200ms ease;
}

.tool-link-grid a:hover,
.tool-link-grid a:focus-visible {
    color: var(--mystic-ink);
    border-color: rgba(107, 91, 214, 0.48);
    background: rgba(255, 252, 243, 0.98);
    box-shadow: 0 14px 34px rgba(47, 42, 98, 0.13), 5px 5px 0 rgba(200, 149, 61, 0.4);
}

.tool-link-grid a:hover::before,
.tool-link-grid a:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

button,
.secondary-action {
    background: linear-gradient(135deg, var(--mystic-teal), #155b83);
    box-shadow: 4px 4px 0 rgba(16, 15, 27, 0.9);
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 0 16px 34px rgba(11, 116, 108, 0.2), 6px 6px 0 var(--mystic-gold);
}

.secondary-action--light {
    background: rgba(255, 252, 243, 0.9);
    color: var(--mystic-ink);
}

input {
    background: rgba(255, 252, 243, 0.9);
    border-color: rgba(31, 27, 56, 0.2);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

input:focus {
    outline: none;
    border-color: rgba(107, 91, 214, 0.64);
    background: #fffdf7;
    box-shadow: 0 0 0 4px rgba(107, 91, 214, 0.12), 0 0 28px rgba(200, 149, 61, 0.13);
}

.breadcrumb {
    margin-top: 26px;
}

.breadcrumb li:not(:last-child)::after {
    content: "✧";
    color: rgba(200, 149, 61, 0.78);
}

.chart-wheel {
    filter: drop-shadow(0 18px 38px rgba(47, 42, 98, 0.15));
}

.wheel-ring--outer {
    fill: rgba(255, 252, 243, 0.9);
    stroke: rgba(200, 149, 61, 0.78);
}

.wheel-sign,
.planet-label {
    filter: drop-shadow(0 0 8px rgba(200, 149, 61, 0.22));
}

.site-footer {
    margin-top: 24px;
    padding-top: 34px;
    padding-bottom: 48px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.site-footer a {
    color: var(--mystic-teal);
    font-weight: 800;
    text-decoration: none;
}

@keyframes astral-drift {
    0% { transform: translate3d(-1.5%, -1%, 0) rotate(0deg); }
    100% { transform: translate3d(1.5%, 1%, 0) rotate(1.5deg); }
}

@keyframes star-pulse {
    0%, 100% { opacity: 0.72; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

@keyframes slow-orbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 980px) {
    .site-header {
        align-items: flex-start;
        gap: 14px;
    }

    .site-header nav {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .site-header {
        display: grid;
        position: relative;
        margin-top: 0;
        border-radius: 0 0 8px 8px;
    }

    .tool-hero {
        margin-top: 18px;
        padding: 42px 18px 34px;
        box-shadow: var(--mystic-glow), 5px 5px 0 rgba(16, 15, 27, 0.9);
    }

    .tool-hero::before {
        font-size: 3.2rem;
        opacity: 0.28;
    }

    .tool-hero::after {
        width: 180px;
        height: 180px;
    }

    .content-band {
        padding-top: 38px;
        padding-bottom: 56px;
    }
}

/* ASTROLOGIX_DARK_MYSTIC_THEME */
:root {
    color-scheme: dark;
    --bg: #090812;
    --bg-2: #111827;
    --surface: rgba(18, 17, 32, 0.9);
    --surface-strong: #171529;
    --surface-muted: #211f34;
    --ink: #f7f1df;
    --muted: #c7bdad;
    --line: #efe1b7;
    --line-soft: rgba(239, 225, 183, 0.18);
    --border: var(--line-soft);
    --accent: #49c6b6;
    --accent-dark: #9ee8dc;
    --solar: #e5b35b;
    --coral: #e66f68;
    --violet: #9d8cff;
    --danger: #ff8b8b;
    --shadow-hard: 6px 6px 0 rgba(239, 225, 183, 0.18);
    --shadow-soft: 0 22px 70px rgba(0, 0, 0, 0.38);
    --mystic-ink: #fff6dd;
    --mystic-night: #090812;
    --mystic-indigo: #17152c;
    --mystic-violet: #a99bff;
    --mystic-gold: #e5b35b;
    --mystic-rose: #f08a92;
    --mystic-teal: #65d9ca;
    --mystic-line: rgba(239, 225, 183, 0.2);
    --mystic-glow: 0 24px 90px rgba(157, 140, 255, 0.18);
    --mystic-card: rgba(18, 17, 32, 0.9);
}

html {
    background:
        radial-gradient(circle at 16% 12%, rgba(229, 179, 91, 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 18%, rgba(157, 140, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 82%, rgba(73, 198, 182, 0.14) 0 1px, transparent 2px),
        linear-gradient(135deg, #07060d 0%, #111024 44%, #0b1820 100%);
    background-size: 120px 120px, 178px 178px, 148px 148px, auto;
    color: var(--ink);
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 18%, rgba(229, 179, 91, 0.13), transparent 22%),
        radial-gradient(circle at 84% 12%, rgba(157, 140, 255, 0.16), transparent 24%),
        radial-gradient(circle at 72% 78%, rgba(73, 198, 182, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.96), rgba(12, 13, 28, 0.98));
}

body::before {
    background:
        linear-gradient(115deg, transparent 0 63%, rgba(229, 179, 91, 0.14) 63% 63.18%, transparent 63.18%),
        linear-gradient(24deg, transparent 0 74%, rgba(157, 140, 255, 0.16) 74% 74.18%, transparent 74.18%),
        radial-gradient(circle at 50% 0%, rgba(157, 140, 255, 0.14), transparent 44%);
    opacity: 0.86;
}

body::after {
    background:
        radial-gradient(circle at 18% 28%, rgba(157, 140, 255, 0.16), transparent 18%),
        radial-gradient(circle at 84% 14%, rgba(229, 179, 91, 0.16), transparent 16%),
        radial-gradient(circle at 78% 78%, rgba(73, 198, 182, 0.13), transparent 18%);
    filter: blur(6px);
}

.site-header {
    border-color: rgba(239, 225, 183, 0.18);
    background: rgba(13, 12, 25, 0.78);
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.48);
}

.brand,
.site-header a,
.secondary-action,
.breadcrumb span,
h1,
h2,
.interpretation-card h3,
.tool-category h3,
.tool-feature-card strong,
dd,
.chart-wheel-panel {
    color: var(--ink);
}

.site-header nav a,
.breadcrumb,
.breadcrumb a,
.lede,
.content-band p,
.hint,
.status,
.site-footer,
.result-degree,
dt,
.tool-category p,
.tool-feature-card small,
.faq-card p,
.angular-row small,
.report-toc-list {
    color: var(--muted);
}

.tool-hero {
    border-color: rgba(239, 225, 183, 0.18);
    background:
        linear-gradient(135deg, rgba(18, 17, 32, 0.94), rgba(10, 18, 26, 0.82)),
        radial-gradient(circle at 76% 20%, rgba(157, 140, 255, 0.22), transparent 32%),
        radial-gradient(circle at 18% 72%, rgba(229, 179, 91, 0.18), transparent 30%);
    box-shadow: var(--mystic-glow), 8px 8px 0 rgba(229, 179, 91, 0.22);
}

.tool-hero::after {
    border-color: rgba(229, 179, 91, 0.22);
    box-shadow: inset 0 0 0 28px rgba(157, 140, 255, 0.08), inset 0 0 0 29px rgba(229, 179, 91, 0.24);
}

.tool-panel,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.tool-category,
.tool-feature-card,
.chart-wheel-panel,
.manual-coordinates {
    border-color: rgba(239, 225, 183, 0.16);
    background:
        linear-gradient(180deg, rgba(23, 21, 41, 0.94), rgba(15, 18, 31, 0.9));
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.34), 4px 4px 0 rgba(229, 179, 91, 0.16);
}

.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.result-facts div:hover,
.chart-wheel-wrap:hover,
.tool-category:hover,
.tool-feature-card:hover {
    border-color: rgba(229, 179, 91, 0.56);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42), 6px 6px 0 rgba(229, 179, 91, 0.28);
}

input,
textarea,
select {
    background: rgba(8, 9, 18, 0.78);
    border-color: rgba(239, 225, 183, 0.2);
    color: var(--ink);
}

input::placeholder,
textarea::placeholder {
    color: rgba(199, 189, 173, 0.66);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(157, 140, 255, 0.72);
    background: rgba(12, 13, 27, 0.96);
    box-shadow: 0 0 0 4px rgba(157, 140, 255, 0.16), 0 0 32px rgba(229, 179, 91, 0.12);
}

.tool-link-grid a,
.secondary-action--light,
.table-wrap,
.report-callout,
.score-bar {
    background: rgba(18, 17, 32, 0.88);
    color: var(--ink);
    border-color: rgba(239, 225, 183, 0.16);
}

.tool-link-grid a:hover,
.tool-link-grid a:focus-visible,
.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    border-color: rgba(229, 179, 91, 0.54);
    background: rgba(27, 24, 45, 0.98);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 5px 5px 0 rgba(229, 179, 91, 0.28);
}

button,
.secondary-action {
    background: linear-gradient(135deg, #167c73, #4b3fb5);
    color: #fff8e6;
    box-shadow: 4px 4px 0 rgba(229, 179, 91, 0.28);
}

button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 0 18px 42px rgba(73, 198, 182, 0.18), 6px 6px 0 rgba(229, 179, 91, 0.44);
}

th,
td,
.angular-row,
.save-chart-form,
.content-band,
.site-footer,
.breadcrumb li:not(:last-child)::after {
    border-color: rgba(239, 225, 183, 0.15);
}

.wheel-ring {
    fill: rgba(18, 17, 32, 0.88);
    stroke: rgba(239, 225, 183, 0.22);
}

.wheel-ring--outer {
    fill: rgba(11, 10, 21, 0.95);
    stroke: rgba(229, 179, 91, 0.7);
}

.wheel-sign,
.house-label,
.planet-label,
.planet-dot {
    fill: var(--ink);
}

.planet-dot {
    stroke: #090812;
}

.planet-marker {
    stroke: rgba(239, 225, 183, 0.35);
}

.house-line {
    stroke: rgba(239, 225, 183, 0.36);
}

.house-line--angle {
    stroke: var(--mystic-teal);
}

.site-footer a,
.table-action,
.tool-feature-card span,
.eyebrow {
    color: var(--mystic-teal);
}

.form-success {
    color: var(--mystic-teal);
}

.form-error {
    color: var(--danger);
}

@media print {
    :root {
        color-scheme: light;
        --bg: #ffffff;
        --surface: #ffffff;
        --ink: #111111;
        --muted: #333333;
        --line: #cfcfcf;
        --accent: #111111;
        --accent-dark: #111111;
    }
}

/* ASTROLOGIX_DARK_ASTRAL_MOTION */
html {
    background:
        radial-gradient(circle at 9% 16%, rgba(229, 179, 91, 0.92) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 68%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 12%, rgba(157, 140, 255, 0.78) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 42%, rgba(101, 217, 202, 0.64) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 86%, rgba(255, 246, 221, 0.54) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 24%, rgba(229, 179, 91, 0.18), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(157, 140, 255, 0.18), transparent 22%),
        linear-gradient(135deg, #06050c 0%, #100d22 45%, #071820 100%);
    background-size: 132px 132px, 190px 190px, 156px 156px, 214px 214px, 172px 172px, auto, auto, auto;
    animation: astral-sky-drift 46s linear infinite;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(229, 179, 91, 0.12), transparent 24%),
        radial-gradient(circle at 80% 10%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 72% 84%, rgba(101, 217, 202, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.96), rgba(12, 13, 28, 0.99));
}

body::before {
    background:
        linear-gradient(118deg, transparent 0 58%, rgba(229, 179, 91, 0.22) 58% 58.08%, transparent 58.08%),
        linear-gradient(31deg, transparent 0 68%, rgba(157, 140, 255, 0.2) 68% 68.08%, transparent 68.08%),
        linear-gradient(151deg, transparent 0 74%, rgba(101, 217, 202, 0.16) 74% 74.08%, transparent 74.08%),
        radial-gradient(circle at 28% 32%, transparent 0 86px, rgba(229, 179, 91, 0.18) 87px 88px, transparent 89px),
        radial-gradient(circle at 76% 20%, transparent 0 122px, rgba(157, 140, 255, 0.16) 123px 124px, transparent 125px),
        radial-gradient(circle at 62% 78%, transparent 0 94px, rgba(101, 217, 202, 0.12) 95px 96px, transparent 97px);
    opacity: 0.88;
    transform-origin: 50% 50%;
    animation: astral-axis-drift 38s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 13% 24%, rgba(229, 179, 91, 0.88) 0 2px, transparent 3px),
        radial-gradient(circle at 31% 18%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 46% 64%, rgba(157, 140, 255, 0.82) 0 2px, transparent 3px),
        radial-gradient(circle at 69% 34%, rgba(101, 217, 202, 0.74) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 72%, rgba(229, 179, 91, 0.68) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 78%, rgba(157, 140, 255, 0.12), transparent 16%),
        radial-gradient(circle at 86% 18%, rgba(229, 179, 91, 0.13), transparent 16%),
        radial-gradient(circle at 76% 82%, rgba(101, 217, 202, 0.11), transparent 18%);
    background-size: 260px 260px, 310px 310px, 360px 360px, 290px 290px, 420px 420px, auto, auto, auto;
    filter: blur(0.2px);
    opacity: 0.82;
    animation: astral-points-drift 32s ease-in-out infinite alternate, astral-twinkle 5.5s ease-in-out infinite;
}

.site-header,
.tool-hero,
.breadcrumb,
.tool-grid,
.content-band,
.data-section,
.tool-panel,
.tool-category,
.tool-feature-card,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.chart-wheel-panel,
.faq-card {
    animation: astral-reveal 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.site-header {
    animation-delay: 40ms;
}

.tool-hero {
    animation-delay: 90ms;
}

.breadcrumb,
.tool-grid,
.content-band,
.data-section {
    animation-delay: 150ms;
}

.tool-panel:nth-child(2n),
.tool-category:nth-child(2n),
.tool-feature-card:nth-child(2n),
.score-card:nth-child(2n),
.faq-card:nth-child(2n) {
    animation-delay: 210ms;
}

.tool-panel:nth-child(3n),
.tool-category:nth-child(3n),
.tool-feature-card:nth-child(3n),
.score-card:nth-child(3n),
.faq-card:nth-child(3n) {
    animation-delay: 290ms;
}

.tool-hero::before {
    content: "✦";
    color: rgba(229, 179, 91, 0.82);
    text-shadow: 0 0 22px rgba(229, 179, 91, 0.58), 0 0 52px rgba(157, 140, 255, 0.32);
    animation: astral-star-breathe 4.8s ease-in-out infinite;
}

.tool-hero::after {
    animation: slow-orbit 24s linear infinite;
}

.tool-panel,
.tool-category,
.tool-feature-card,
.score-card,
.profile-fieldset,
.table-wrap,
.result-facts div,
.chart-wheel-panel {
    backdrop-filter: blur(16px);
}

@keyframes astral-sky-drift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center, center, center; }
    100% { background-position: 132px 132px, -190px 190px, 156px -156px, -214px -214px, 172px 86px, center, center, center; }
}

@keyframes astral-axis-drift {
    0% { transform: translate3d(-1.2%, -0.8%, 0) rotate(-0.6deg) scale(1.01); }
    100% { transform: translate3d(1.2%, 0.8%, 0) rotate(0.8deg) scale(1.04); }
}

@keyframes astral-points-drift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { transform: translate3d(1.8%, -1.2%, 0) rotate(1.2deg); }
}

@keyframes astral-twinkle {
    0%, 100% { opacity: 0.62; }
    45% { opacity: 0.9; }
    70% { opacity: 0.74; }
}

@keyframes astral-reveal {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes astral-star-breathe {
    0%, 100% { opacity: 0.58; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body::before,
    body::after,
    .site-header,
    .tool-hero,
    .breadcrumb,
    .tool-grid,
    .content-band,
    .data-section,
    .tool-panel,
    .tool-category,
    .tool-feature-card,
    .score-card,
    .profile-fieldset,
    .table-wrap,
    .result-facts div,
    .chart-wheel-panel,
    .faq-card,
    .tool-hero::before,
    .tool-hero::after {
        animation: none !important;
    }
}

/* ASTROLOGIX_NO_HOVER_LIFT_AND_BODY_ASTRALS */
*:hover,
*:focus-visible {
    transform: none !important;
}

body {
    background:
        radial-gradient(circle at 8% 18%, rgba(229, 179, 91, 0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 76%, rgba(255, 246, 221, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 28%, rgba(157, 140, 255, 0.78) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 82%, rgba(101, 217, 202, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 22%, rgba(229, 179, 91, 0.76) 0 1px, transparent 2px),
        radial-gradient(circle at 14% 34%, rgba(229, 179, 91, 0.16), transparent 18%),
        radial-gradient(circle at 82% 16%, rgba(157, 140, 255, 0.18), transparent 24%),
        radial-gradient(circle at 74% 86%, rgba(101, 217, 202, 0.13), transparent 26%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.97), rgba(10, 12, 26, 0.99));
    background-size: 180px 180px, 260px 260px, 220px 220px, 310px 310px, 370px 370px, auto, auto, auto, auto;
    animation: astral-body-starfield 54s linear infinite;
}

body::before {
    background:
        radial-gradient(circle at 22% 28%, transparent 0 74px, rgba(229, 179, 91, 0.2) 75px 76px, transparent 77px),
        radial-gradient(circle at 78% 22%, transparent 0 116px, rgba(157, 140, 255, 0.18) 117px 118px, transparent 119px),
        radial-gradient(circle at 58% 76%, transparent 0 88px, rgba(101, 217, 202, 0.14) 89px 90px, transparent 91px),
        linear-gradient(118deg, transparent 0 58%, rgba(229, 179, 91, 0.2) 58% 58.08%, transparent 58.08%),
        linear-gradient(31deg, transparent 0 68%, rgba(157, 140, 255, 0.19) 68% 68.08%, transparent 68.08%),
        linear-gradient(151deg, transparent 0 74%, rgba(101, 217, 202, 0.14) 74% 74.08%, transparent 74.08%);
    animation: astral-body-axes 42s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 14% 24%, rgba(229, 179, 91, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 32% 18%, rgba(255, 246, 221, 0.76) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 62%, rgba(157, 140, 255, 0.86) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 34%, rgba(101, 217, 202, 0.78) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 74%, rgba(229, 179, 91, 0.74) 0 2px, transparent 3px),
        radial-gradient(circle at 10% 72%, rgba(229, 179, 91, 0.18) 0 0.7rem, rgba(229, 179, 91, 0.06) 0.75rem 1.4rem, transparent 1.45rem),
        radial-gradient(circle at 84% 28%, rgba(157, 140, 255, 0.2) 0 0.95rem, rgba(157, 140, 255, 0.07) 1rem 1.9rem, transparent 1.95rem),
        radial-gradient(circle at 68% 86%, rgba(101, 217, 202, 0.16) 0 0.8rem, rgba(101, 217, 202, 0.05) 0.85rem 1.6rem, transparent 1.65rem);
    background-size: 240px 240px, 318px 318px, 380px 380px, 292px 292px, 440px 440px, auto, auto, auto;
    animation: astral-body-points 34s ease-in-out infinite alternate, astral-body-twinkle 4.8s ease-in-out infinite;
}

@keyframes astral-body-starfield {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center, center, center, center; }
    100% { background-position: 180px 180px, -260px 260px, 220px -220px, -310px -310px, 370px 185px, center, center, center, center; }
}

@keyframes astral-body-axes {
    0% { transform: rotate(-0.8deg) scale(1.02); opacity: 0.72; }
    100% { transform: rotate(0.9deg) scale(1.05); opacity: 0.92; }
}

@keyframes astral-body-points {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1.4deg); }
}

@keyframes astral-body-twinkle {
    0%, 100% { opacity: 0.6; }
    45% { opacity: 0.9; }
    68% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
    body,
    body::before,
    body::after {
        animation: none !important;
    }
}

/* ASTROLOGIX_VARIED_NON_REPEATING_SKY */
html,
body,
body::before,
body::after {
    background-repeat: no-repeat !important;
}

html {
    background:
        radial-gradient(circle at 7% 13%, rgba(229, 179, 91, 0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 17% 41%, rgba(255, 246, 221, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle at 29% 22%, rgba(157, 140, 255, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 43% 71%, rgba(101, 217, 202, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 31%, rgba(255, 246, 221, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 58%, rgba(229, 179, 91, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 19%, rgba(157, 140, 255, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 84%, rgba(101, 217, 202, 0.54) 0 1px, transparent 2px),
        radial-gradient(circle at 13% 78%, rgba(229, 179, 91, 0.13), transparent 18%),
        radial-gradient(circle at 47% 18%, rgba(157, 140, 255, 0.12), transparent 20%),
        radial-gradient(circle at 82% 34%, rgba(101, 217, 202, 0.1), transparent 18%),
        linear-gradient(135deg, #06050c 0%, #100d22 45%, #071820 100%);
    background-size: auto !important;
    animation: astral-deep-sky-shift 58s ease-in-out infinite alternate;
}

body {
    background:
        radial-gradient(circle at 6% 64%, rgba(255, 246, 221, 0.44) 0 1px, transparent 2px),
        radial-gradient(circle at 21% 17%, rgba(229, 179, 91, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 36% 86%, rgba(157, 140, 255, 0.52) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 49%, rgba(101, 217, 202, 0.46) 0 1px, transparent 2px),
        radial-gradient(circle at 69% 11%, rgba(255, 246, 221, 0.56) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 73%, rgba(229, 179, 91, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 94% 52%, rgba(157, 140, 255, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 31%, rgba(229, 179, 91, 0.12), transparent 21%),
        radial-gradient(circle at 72% 20%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 76% 88%, rgba(101, 217, 202, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.97), rgba(10, 12, 26, 0.99));
    background-size: auto !important;
    animation: astral-nebula-breathe 44s ease-in-out infinite alternate;
}

body::before {
    background:
        radial-gradient(circle at 19% 26%, transparent 0 67px, rgba(229, 179, 91, 0.18) 68px 69px, transparent 70px),
        radial-gradient(circle at 72% 18%, transparent 0 143px, rgba(157, 140, 255, 0.16) 144px 145px, transparent 146px),
        radial-gradient(circle at 54% 79%, transparent 0 91px, rgba(101, 217, 202, 0.13) 92px 93px, transparent 94px),
        radial-gradient(circle at 91% 66%, transparent 0 58px, rgba(229, 179, 91, 0.12) 59px 60px, transparent 61px),
        linear-gradient(113deg, transparent 0 57%, rgba(229, 179, 91, 0.17) 57% 57.06%, transparent 57.06%),
        linear-gradient(28deg, transparent 0 66%, rgba(157, 140, 255, 0.16) 66% 66.06%, transparent 66.06%),
        linear-gradient(154deg, transparent 0 75%, rgba(101, 217, 202, 0.12) 75% 75.06%, transparent 75.06%);
    background-size: auto !important;
    animation: astral-irregular-axes 48s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 11% 19%, rgba(229, 179, 91, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 16% 83%, rgba(255, 246, 221, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 56%, rgba(157, 140, 255, 0.76) 0 1.5px, transparent 3px),
        radial-gradient(circle at 39% 13%, rgba(101, 217, 202, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 92%, rgba(229, 179, 91, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 57% 38%, rgba(255, 246, 221, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 68% 69%, rgba(157, 140, 255, 0.82) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 25%, rgba(101, 217, 202, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 89% 47%, rgba(229, 179, 91, 0.72) 0 1.5px, transparent 3px),
        radial-gradient(circle at 95% 88%, rgba(255, 246, 221, 0.52) 0 1px, transparent 2px),
        radial-gradient(circle at 9% 71%, rgba(229, 179, 91, 0.18) 0 0.7rem, rgba(229, 179, 91, 0.05) 0.75rem 1.45rem, transparent 1.5rem),
        radial-gradient(circle at 86% 29%, rgba(157, 140, 255, 0.19) 0 0.95rem, rgba(157, 140, 255, 0.06) 1rem 1.95rem, transparent 2rem),
        radial-gradient(circle at 64% 84%, rgba(101, 217, 202, 0.15) 0 0.8rem, rgba(101, 217, 202, 0.05) 0.85rem 1.55rem, transparent 1.6rem);
    background-size: auto !important;
    animation: astral-irregular-stars 37s ease-in-out infinite alternate, astral-irregular-twinkle 5.2s ease-in-out infinite;
}

@keyframes astral-deep-sky-shift {
    0% { background-position: 0 0; }
    100% { background-position: 1.4vw -1.1vh; }
}

@keyframes astral-nebula-breathe {
    0% { background-position: 0 0; }
    100% { background-position: -1vw 1.6vh; }
}

@keyframes astral-irregular-axes {
    0% { transform: rotate(-0.55deg) scale(1.01); opacity: 0.72; }
    100% { transform: rotate(0.75deg) scale(1.045); opacity: 0.9; }
}

@keyframes astral-irregular-stars {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0.9deg) scale(1.02); }
}

@keyframes astral-irregular-twinkle {
    0%, 100% { opacity: 0.56; }
    38% { opacity: 0.88; }
    64% { opacity: 0.7; }
}

/* ASTROLOGIX_DENSE_STARFIELD */
html {
    background:
        radial-gradient(circle at 3% 9%, rgba(255, 246, 221, 0.78) 0 1px, transparent 1.7px),
        radial-gradient(circle at 6% 31%, rgba(229, 179, 91, 0.82) 0 1px, transparent 1.8px),
        radial-gradient(circle at 9% 67%, rgba(157, 140, 255, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 13% 18%, rgba(101, 217, 202, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 16% 52%, rgba(255, 246, 221, 0.62) 0 1px, transparent 1.7px),
        radial-gradient(circle at 20% 84%, rgba(229, 179, 91, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 24% 12%, rgba(157, 140, 255, 0.76) 0 1px, transparent 1.8px),
        radial-gradient(circle at 28% 43%, rgba(255, 246, 221, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 31% 73%, rgba(101, 217, 202, 0.62) 0 1px, transparent 1.8px),
        radial-gradient(circle at 35% 27%, rgba(229, 179, 91, 0.72) 0 1px, transparent 1.8px),
        radial-gradient(circle at 39% 91%, rgba(255, 246, 221, 0.54) 0 1px, transparent 1.7px),
        radial-gradient(circle at 43% 8%, rgba(157, 140, 255, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 47% 62%, rgba(229, 179, 91, 0.62) 0 1px, transparent 1.8px),
        radial-gradient(circle at 51% 34%, rgba(101, 217, 202, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 55% 79%, rgba(255, 246, 221, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 59% 16%, rgba(229, 179, 91, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 63% 49%, rgba(157, 140, 255, 0.74) 0 1px, transparent 1.8px),
        radial-gradient(circle at 67% 88%, rgba(101, 217, 202, 0.54) 0 1px, transparent 1.7px),
        radial-gradient(circle at 71% 24%, rgba(255, 246, 221, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle at 75% 56%, rgba(229, 179, 91, 0.78) 0 1px, transparent 1.8px),
        radial-gradient(circle at 79% 6%, rgba(157, 140, 255, 0.6) 0 1px, transparent 1.7px),
        radial-gradient(circle at 83% 39%, rgba(255, 246, 221, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 87% 74%, rgba(101, 217, 202, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 21%, rgba(229, 179, 91, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 95% 63%, rgba(157, 140, 255, 0.68) 0 1px, transparent 1.8px),
        radial-gradient(circle at 97% 91%, rgba(255, 246, 221, 0.52) 0 1px, transparent 1.7px),
        radial-gradient(circle at 18% 31%, rgba(229, 179, 91, 0.12), transparent 21%),
        radial-gradient(circle at 72% 20%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 76% 88%, rgba(101, 217, 202, 0.12), transparent 24%),
        linear-gradient(135deg, #06050c 0%, #100d22 45%, #071820 100%);
    background-size: auto !important;
    animation: astral-dense-sky 62s ease-in-out infinite alternate;
}

body {
    background:
        radial-gradient(circle at 2% 46%, rgba(255, 246, 221, 0.46) 0 1px, transparent 1.8px),
        radial-gradient(circle at 5% 88%, rgba(157, 140, 255, 0.52) 0 1px, transparent 1.8px),
        radial-gradient(circle at 11% 11%, rgba(229, 179, 91, 0.68) 0 1px, transparent 1.8px),
        radial-gradient(circle at 14% 72%, rgba(101, 217, 202, 0.48) 0 1px, transparent 1.7px),
        radial-gradient(circle at 19% 39%, rgba(255, 246, 221, 0.58) 0 1px, transparent 1.7px),
        radial-gradient(circle at 23% 94%, rgba(229, 179, 91, 0.52) 0 1px, transparent 1.8px),
        radial-gradient(circle at 27% 63%, rgba(157, 140, 255, 0.58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 33% 17%, rgba(101, 217, 202, 0.5) 0 1px, transparent 1.7px),
        radial-gradient(circle at 37% 51%, rgba(229, 179, 91, 0.64) 0 1px, transparent 1.8px),
        radial-gradient(circle at 42% 81%, rgba(255, 246, 221, 0.5) 0 1px, transparent 1.7px),
        radial-gradient(circle at 46% 23%, rgba(157, 140, 255, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 53% 58%, rgba(101, 217, 202, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 58% 93%, rgba(229, 179, 91, 0.48) 0 1px, transparent 1.8px),
        radial-gradient(circle at 62% 29%, rgba(255, 246, 221, 0.62) 0 1px, transparent 1.7px),
        radial-gradient(circle at 69% 66%, rgba(157, 140, 255, 0.6) 0 1px, transparent 1.8px),
        radial-gradient(circle at 73% 8%, rgba(101, 217, 202, 0.5) 0 1px, transparent 1.7px),
        radial-gradient(circle at 78% 47%, rgba(229, 179, 91, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 82% 82%, rgba(255, 246, 221, 0.56) 0 1px, transparent 1.7px),
        radial-gradient(circle at 88% 14%, rgba(157, 140, 255, 0.68) 0 1px, transparent 1.8px),
        radial-gradient(circle at 92% 57%, rgba(101, 217, 202, 0.52) 0 1px, transparent 1.7px),
        radial-gradient(circle at 96% 33%, rgba(229, 179, 91, 0.58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 18% 31%, rgba(229, 179, 91, 0.12), transparent 21%),
        radial-gradient(circle at 72% 20%, rgba(157, 140, 255, 0.16), transparent 27%),
        radial-gradient(circle at 76% 88%, rgba(101, 217, 202, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(9, 8, 18, 0.97), rgba(10, 12, 26, 0.99));
    background-size: auto !important;
    animation: astral-dense-nebula 48s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 4% 18%, rgba(229, 179, 91, 0.9) 0 1.5px, transparent 3px),
        radial-gradient(circle at 8% 58%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 12% 91%, rgba(157, 140, 255, 0.7) 0 1.5px, transparent 3px),
        radial-gradient(circle at 18% 26%, rgba(101, 217, 202, 0.66) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 67%, rgba(229, 179, 91, 0.74) 0 1.5px, transparent 3px),
        radial-gradient(circle at 29% 8%, rgba(255, 246, 221, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 34% 45%, rgba(157, 140, 255, 0.82) 0 1.5px, transparent 3px),
        radial-gradient(circle at 41% 87%, rgba(101, 217, 202, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 49% 19%, rgba(229, 179, 91, 0.68) 0 1.5px, transparent 3px),
        radial-gradient(circle at 56% 53%, rgba(255, 246, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 13%, rgba(157, 140, 255, 0.76) 0 1.5px, transparent 3px),
        radial-gradient(circle at 68% 79%, rgba(101, 217, 202, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 36%, rgba(229, 179, 91, 0.86) 0 1.5px, transparent 3px),
        radial-gradient(circle at 81% 94%, rgba(255, 246, 221, 0.56) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 61%, rgba(157, 140, 255, 0.78) 0 1.5px, transparent 3px),
        radial-gradient(circle at 93% 24%, rgba(101, 217, 202, 0.64) 0 1px, transparent 2px),
        radial-gradient(circle at 97% 77%, rgba(229, 179, 91, 0.72) 0 1.5px, transparent 3px),
        radial-gradient(circle at 9% 71%, rgba(229, 179, 91, 0.18) 0 0.7rem, rgba(229, 179, 91, 0.05) 0.75rem 1.45rem, transparent 1.5rem),
        radial-gradient(circle at 86% 29%, rgba(157, 140, 255, 0.19) 0 0.95rem, rgba(157, 140, 255, 0.06) 1rem 1.95rem, transparent 2rem),
        radial-gradient(circle at 64% 84%, rgba(101, 217, 202, 0.15) 0 0.8rem, rgba(101, 217, 202, 0.05) 0.85rem 1.55rem, transparent 1.6rem);
    background-size: auto !important;
    animation: astral-dense-star-glide 36s ease-in-out infinite alternate, astral-dense-twinkle 4.6s ease-in-out infinite;
}

@keyframes astral-dense-sky {
    0% { background-position: 0 0; }
    100% { background-position: 1.2vw -1.4vh; }
}

@keyframes astral-dense-nebula {
    0% { background-position: 0 0; }
    100% { background-position: -0.9vw 1.3vh; }
}

@keyframes astral-dense-star-glide {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0.7deg) scale(1.015); }
}

@keyframes astral-dense-twinkle {
    0%, 100% { opacity: 0.64; }
    30% { opacity: 0.92; }
    57% { opacity: 0.74; }
    78% { opacity: 0.86; }
}

/* ASTROLOGIX_EDITORIAL_DEPTH */
.editorial-depth-panel .section-heading {
    margin-bottom: 22px;
}

.editorial-depth-panel__lead {
    margin: 0 0 22px;
}

.editorial-depth-panel__lead h3 {
    margin-bottom: 8px;
}

.editorial-depth-panel__lead p {
    max-width: 920px;
    color: var(--muted);
    line-height: 1.72;
}

.editorial-depth-panel .related-tool-strip {
    margin-top: 24px;
}

/* ASTROLOGIX_INLINE_GLOSSARY_LINKS */
.inline-glossary-link {
    color: var(--mystic-gold);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(229, 179, 91, 0.42);
    text-underline-offset: 0.18em;
}

.inline-glossary-link:hover,
.inline-glossary-link:focus-visible {
    color: var(--mystic-teal);
    text-decoration-color: rgba(101, 217, 202, 0.6);
}


.primary-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.primary-nav > a,
.nav-group > summary {
    color: var(--muted);
    font-size: 0.95rem;
    text-decoration: none;
}

.nav-group {
    position: relative;
}

.nav-group > summary {
    list-style: none;
    cursor: pointer;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-group > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    rotate: 45deg;
    margin-top: -4px;
}

.nav-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    min-width: 250px;
    display: grid;
    gap: 4px;
    padding: 14px;
    background: linear-gradient(180deg, var(--surface-strong), var(--surface));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(20, 16, 10, 0.18);
}

.nav-panel--wide {
    width: min(720px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.nav-panel h2 {
    margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.nav-panel section,
.nav-panel a {
    display: grid;
    gap: 4px;
}

.nav-panel a {
    min-height: 32px;
    align-items: center;
    color: var(--ink);
    border-radius: 6px;
    padding: 5px 7px;
    text-decoration: none;
    font-size: 0.92rem;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-dark);
}

.editorial-hero .action-row,
.product-hero .action-row {
    margin-top: 18px;
}

.editorial-grid .result-facts--single {
    grid-template-columns: 1fr;
}

.editorial-section p {
    font-size: 1.02rem;
}

@media (max-width: 980px) {
    .site-header {
        align-items: flex-start;
        gap: 14px;
        flex-direction: column;
    }

    .primary-nav {
        justify-content: flex-start;
        width: 100%;
    }

    .nav-group {
        position: static;
    }

    .nav-panel,
    .nav-panel--wide {
        position: static;
        width: 100%;
        min-width: 100%;
        grid-template-columns: 1fr;
        margin: 4px 0 10px;
    }
}


.editorial-menu-map .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
}

.editorial-category-grid--dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-feature-card small {
    color: var(--muted);
    line-height: 1.5;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
}

.brand::before {
    content: "☉";
    margin-right: 8px;
    color: var(--accent);
}

@media (max-width: 1080px) {
    .editorial-menu-map .section-heading,
    .editorial-category-grid--dense {
        grid-template-columns: 1fr;
    }
}


/* Primary navigation: compact desktop bar + burger drawer on mobile */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 64px;
    padding: 10px clamp(16px, 3vw, 42px);
    border-bottom: 1px solid rgba(216, 180, 95, 0.14);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(18px);
}

.brand {
    flex: 0 0 auto;
    color: var(--ink);
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.primary-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

#primary-nav-list,
.primary-nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__link,
.primary-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 6px;
    padding: 0 10px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible {
    background: rgba(216, 180, 95, 0.1);
    color: var(--ink);
    outline: 0;
}

.primary-nav__cta {
    border: 1px solid rgba(216, 180, 95, 0.32);
    background: rgba(216, 180, 95, 0.16);
    color: var(--accent-dark);
}

.primary-nav__cta:hover,
.primary-nav__cta:focus-visible {
    background: rgba(216, 180, 95, 0.24);
    color: var(--ink);
    outline: 0;
}

.primary-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 42px;
    height: 38px;
    border: 1px solid rgba(216, 180, 95, 0.28);
    border-radius: 6px;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    cursor: pointer;
}

.primary-nav__toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

@media (max-width: 1120px) {
    .site-header {
        gap: 14px;
        padding-inline: clamp(14px, 2vw, 28px);
    }

    .primary-nav__link,
    .primary-nav__cta {
        padding-inline: 7px;
        font-size: 0.78rem;
    }
}

@media (max-width: 1080px) {
    .site-header {
        min-height: 60px;
        padding-block: 9px;
    }

    .primary-nav__toggle {
        display: inline-flex;
    }

    #primary-nav-list,
    .primary-nav__list {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        z-index: 100;
        display: none;
        width: min(320px, calc(100vw - 28px));
        max-height: calc(100vh - 86px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 8px;
        border: 1px solid rgba(216, 180, 95, 0.2);
        border-radius: 8px;
        background: rgba(18, 16, 31, 0.98);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
        list-style: none;
    }

    .primary-nav.primary-nav--open #primary-nav-list,
    .primary-nav.primary-nav--open .primary-nav__list {
        display: flex;
    }

    .primary-nav__item {
        display: block;
        width: 100%;
    }

    .primary-nav__link,
    .primary-nav__cta {
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 0 11px;
        font-size: 0.94rem;
    }
}

@media (max-width: 420px) {
    .brand {
        font-size: 0.96rem;
    }

    #primary-nav-list,
    .primary-nav__list {
        right: -4px;
        width: min(300px, calc(100vw - 24px));
    }
}


/* =====================================================================
   HEADER NAV — SOURCE UNIQUE DE VÉRITÉ
   Ce bloc, placé en dernier, l'emporte sur toutes les règles
   .site-header / .primary-nav plus haut dans le fichier.
   Pour modifier le menu : éditer ICI, ne rien rajouter ailleurs.
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 30px);
    min-height: 64px;
    margin: 0;
    padding: 8px clamp(16px, 3vw, 42px);
    border-bottom: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
    background: color-mix(in srgb, var(--bg, #090812) 90%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.site-header .brand {
    flex: 0 0 auto;
    color: var(--ink, #f7f1df);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .brand::before {
    content: "☉";
    margin-right: 8px;
    color: var(--accent, #49c6b6);
}

/* Burger : masqué sur desktop */
.site-header .nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 44px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.24));
    border-radius: 9px;
    background: color-mix(in srgb, var(--ink, #f7f1df) 5%, transparent);
    color: var(--ink, #f7f1df);
    cursor: pointer;
}
.site-header .nav-burger__line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

/* Barre de navigation */
.site-header .primary-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.site-header .nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-header .nav-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Neutralise l'underline ::after parasite hérité de vieilles règles .site-header nav a */
.site-header .nav-link::after,
.site-header .nav-cta::after,
.site-header .nav-panel a::after {
    content: none;
}

/* Éléments cliquables du 1er niveau */
.site-header .nav-link,
.site-header .nav-trigger,
.site-header .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: var(--muted, #c7bdad);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-trigger:hover,
.site-header .nav-trigger:focus-visible {
    background: color-mix(in srgb, var(--accent, #49c6b6) 15%, transparent);
    color: var(--ink, #f7f1df);
    outline: 0;
}

/* Groupe déroulant (details/summary) */
.site-header .nav-group {
    position: relative;
}
.site-header .nav-trigger {
    list-style: none;
}
.site-header .nav-trigger::-webkit-details-marker {
    display: none;
}
.site-header .nav-trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease, margin-top .18s ease;
}
.site-header .nav-group[open] > .nav-trigger {
    background: color-mix(in srgb, var(--accent, #49c6b6) 15%, transparent);
    color: var(--ink, #f7f1df);
}
.site-header .nav-group[open] > .nav-trigger::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/* Bouton d'appel à l'action */
.site-header .nav-cta {
    margin-left: 6px;
    color: var(--bg, #090812);
    background: var(--accent, #49c6b6);
    font-weight: 800;
}
.site-header .nav-cta:hover,
.site-header .nav-cta:focus-visible {
    background: var(--accent-dark, #9ee8dc);
    color: var(--bg, #090812);
    outline: 0;
}

/* Panneau déroulant (desktop) — ancré à gauche du déclencheur */
.site-header .nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    z-index: 120;
    display: flex;
    gap: 26px;
    max-width: min(760px, calc(100vw - 32px));
    padding: 18px 20px;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
    border-radius: 12px;
    background: var(--surface-strong, #171529);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}
.site-header .nav-col {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 178px;
}
.site-header .nav-panel h2 {
    margin: 0 0 6px;
    color: var(--accent-dark, #9ee8dc);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.site-header .nav-panel a {
    display: block;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--ink, #f7f1df);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .nav-panel a:hover,
.site-header .nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--accent, #49c6b6) 16%, transparent);
    color: var(--ink, #f7f1df);
    outline: 0;
}

/* ------------------------- MOBILE : drawer ------------------------- */
@media (max-width: 1023px) {
    .site-header {
        flex-wrap: wrap;
    }
    .site-header .nav-burger {
        display: inline-flex;
    }
    .site-header .primary-nav {
        position: static;
    }
    .site-header .nav-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding: 10px clamp(16px, 3vw, 42px) 20px;
        border-bottom: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
        background: var(--bg, #090812);
        box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
    }
    .site-header .primary-nav.primary-nav--open .nav-menu {
        display: flex;
    }
    .site-header .nav-item,
    .site-header .nav-group {
        width: 100%;
    }
    .site-header .nav-link,
    .site-header .nav-trigger,
    .site-header .nav-cta {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
    }
    .site-header .nav-trigger {
        justify-content: space-between;
    }
    .site-header .nav-cta {
        margin-left: 0;
        margin-top: 6px;
        justify-content: center;
    }
    .site-header .nav-panel {
        position: static;
        display: block;
        max-width: none;
        margin: 2px 0 8px;
        padding: 6px 8px 8px;
        border: 0;
        border-radius: 8px;
        background: color-mix(in srgb, var(--surface-strong, #171529) 55%, transparent);
        box-shadow: none;
    }
    .site-header .nav-col {
        min-width: 0;
        margin-bottom: 10px;
    }
}


/* =====================================================================
   FOND ÉTOILÉ ANIMÉ — couche fixe derrière tout le contenu (aucun JS)
   3 nappes d'étoiles qui scintillent à des rythmes différents + une
   étoile filante. Respecte prefers-reduced-motion.
   ===================================================================== */
.starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}

/* Nappe 1 : petites étoiles denses */
.starfield::before,
.starfield::after {
    content: "";
    position: absolute;
    inset: -20%;
    background-repeat: repeat;
    will-change: opacity, transform;
}

.starfield::before {
    background-image:
        radial-gradient(1px 1px at 25px 20px, #ffffff, transparent),
        radial-gradient(1px 1px at 80px 60px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 150px 35px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 210px 90px, #ffffff, transparent),
        radial-gradient(1px 1px at 45px 130px, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 120px 170px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 190px 205px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 30px 220px, #ffffff, transparent),
        radial-gradient(1px 1px at 232px 150px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 100px 100px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 250px 250px;
    animation: starfield-twinkle-a 4.2s ease-in-out infinite;
}

/* Nappe 2 : étoiles moyennes teintées (teal/or) avec léger halo, dérive lente */
.starfield::after {
    background-image:
        radial-gradient(1.6px 1.6px at 60px 40px, rgba(158, 232, 220, 0.95), transparent),
        radial-gradient(1.4px 1.4px at 180px 110px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.6px 1.6px at 300px 70px, rgba(229, 179, 91, 0.85), transparent),
        radial-gradient(1.4px 1.4px at 90px 210px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.8px 1.8px at 260px 260px, rgba(158, 232, 220, 0.8), transparent),
        radial-gradient(1.4px 1.4px at 350px 180px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.6px 1.6px at 150px 320px, rgba(229, 179, 91, 0.7), transparent),
        radial-gradient(1.4px 1.4px at 40px 300px, rgba(255, 255, 255, 0.75), transparent);
    background-size: 400px 400px;
    animation:
        starfield-twinkle-b 6.4s ease-in-out infinite,
        starfield-drift 90s linear infinite;
}

/* Étoile filante occasionnelle */
.starfield__shooting {
    position: absolute;
    top: 12%;
    left: -10%;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(158, 232, 220, 0.8));
    opacity: 0;
    transform: rotate(14deg);
    animation: starfield-shoot 9s ease-in infinite;
}

@keyframes starfield-twinkle-a {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
@keyframes starfield-twinkle-b {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
@keyframes starfield-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-60px, -40px, 0); }
}
@keyframes starfield-shoot {
    0%      { opacity: 0; transform: translate3d(0, 0, 0) rotate(14deg); }
    3%      { opacity: 1; }
    12%     { opacity: 1; }
    18%     { opacity: 0; transform: translate3d(60vw, 15vw, 0) rotate(14deg); }
    100%    { opacity: 0; transform: translate3d(60vw, 15vw, 0) rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
    .starfield::before,
    .starfield::after,
    .starfield__shooting {
        animation: none;
    }
    .starfield__shooting { opacity: 0; }
}


/* Fond étoilé : garantir que body est un contexte d'empilement pour que les
   couches z-index:-1 (halos + starfield) passent au-dessus du fond du body. */
body {
    position: relative;
    z-index: 0;
}
/* Contraste un peu plus marqué des petites étoiles */
@keyframes starfield-twinkle-a {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}


/* Abonnement : badge d'état + formulaire en ligne dans une action-row */
.inline-form {
    display: inline-flex;
    margin: 0;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.badge--active {
    color: var(--bg, #090812);
    background: var(--accent, #49c6b6);
}
.badge--active::before {
    content: "✓";
}


/* =====================================================================
   PIED DE PAGE — SOURCE UNIQUE DE VÉRITÉ
   Placé en dernier : l'emporte sur les anciennes règles .site-footer.
   ===================================================================== */
.site-footer {
    margin-top: 72px;
    padding: 48px clamp(16px, 3vw, 42px) 28px;
    border-top: 1px solid var(--line-soft, rgba(231, 214, 173, 0.18));
    background: color-mix(in srgb, var(--surface-strong, #171529) 55%, transparent);
    color: var(--muted, #c7bdad);
    font-size: 0.92rem;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
    gap: clamp(28px, 5vw, 72px);
    max-width: 1180px;
    margin: 0 auto;
}

.site-footer__brand {
    display: grid;
    align-content: start;
    gap: 12px;
}
.site-footer__logo {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ink, #f7f1df);
    text-decoration: none;
}
.site-footer__logo::before {
    content: "☉";
    margin-right: 8px;
    color: var(--accent, #49c6b6);
}
.site-footer__tagline {
    margin: 0;
    max-width: 34ch;
    line-height: 1.55;
    color: var(--muted, #c7bdad);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 24px 28px;
}
.site-footer__col h2 {
    margin: 0 0 12px;
    color: var(--accent-dark, #9ee8dc);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.site-footer__col ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__col a {
    color: var(--muted, #c7bdad);
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
    color: var(--ink, #f7f1df);
    outline: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 28px;
    max-width: 1180px;
    margin: 36px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft, rgba(231, 214, 173, 0.14));
}
.site-footer__disclaimer {
    margin: 0;
    max-width: 68ch;
    font-size: 0.82rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--muted, #c7bdad) 85%, transparent);
}
.site-footer__legal {
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--muted, #c7bdad);
}
.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 0.82rem;
    order: 3;
    flex-basis: 100%;
}
.site-footer__legal-links a {
    color: color-mix(in srgb, var(--muted, #c7bdad) 88%, transparent);
    text-decoration: none;
}
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
    color: var(--accent, #e7d6ad);
    text-decoration: underline;
}

@media (max-width: 860px) {
    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* Autocomplétion du lieu de naissance */
.city-field {
    position: relative;
}
.city-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.2));
    border-radius: 10px;
    background: var(--surface-strong, #171529);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.city-suggestions[hidden] {
    display: none;
}
.city-suggestions__item {
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--ink, #f7f1df);
    font-size: 0.92rem;
    cursor: pointer;
}
.city-suggestions__item:hover,
.city-suggestions__item.is-active {
    background: color-mix(in srgb, var(--accent, #49c6b6) 16%, transparent);
}

/* ---- Pages « ciel » fraîches (éphémérides, semaine, calendrier, rétrogrades, horoscope) ---- */
.sky-updated {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.35rem;
}
.sky-note {
    opacity: 0.75;
    font-style: italic;
}
.sky-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.75rem;
}
.sky-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.sky-table th,
.sky-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #f7f1df) 14%, transparent);
    white-space: nowrap;
}
.sky-table th {
    font-weight: 600;
    opacity: 0.85;
}
.sky-table tbody tr:hover {
    background: color-mix(in srgb, var(--ink, #f7f1df) 5%, transparent);
}
.site-footer__signs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    max-width: 1180px;
    margin: 1.25rem auto 0;
    font-size: 0.9rem;
    opacity: 0.85;
}
.site-footer__signs span {
    opacity: 0.7;
}

/* ---- Guides : sommaire ancré + FAQ ---- */
.editorial-toc {
    margin: 1.5rem auto;
    max-width: 68rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--ink, #f7f1df) 14%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ink, #f7f1df) 4%, transparent);
}
.editorial-toc ol {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    columns: 2;
    column-gap: 2rem;
    font-size: 0.95rem;
}
@media (max-width: 640px) {
    .editorial-toc ol { columns: 1; }
}
.editorial-toc li { margin: 0.2rem 0; break-inside: avoid; }
.editorial-faq__item {
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #f7f1df) 12%, transparent);
    padding: 0.65rem 0;
}
.editorial-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    list-style-position: inside;
}
.editorial-faq__item p {
    margin: 0.6rem 0 0.2rem;
    opacity: 0.9;
}


/* Liste d'attente horoscope (teaser) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.waitlist-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}
.waitlist-form input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.28));
    border-radius: 9px;
    background: color-mix(in srgb, var(--ink, #f7f1df) 5%, transparent);
    color: var(--ink, #f7f1df);
    font-size: 0.95rem;
}
.waitlist-form input[type="email"]::placeholder {
    color: color-mix(in srgb, var(--muted, #c7bdad) 80%, transparent);
}
.waitlist-form button {
    flex: 0 0 auto;
}


/* Détail d'interprétation : forces / points de vigilance / nuance */
.interpretation-facets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.interpretation-facet h4 {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.interpretation-facet--strength h4 { color: var(--accent-dark, #9ee8dc); }
.interpretation-facet--challenge h4 { color: var(--solar, #e5b35b); }
.interpretation-facet ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
}
.interpretation-facet li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted, #c7bdad);
}
.interpretation-nuance {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft, rgba(231, 214, 173, 0.16));
    font-size: 0.85rem;
    font-style: italic;
    color: color-mix(in srgb, var(--muted, #c7bdad) 85%, transparent);
}

/* Mini-strip « ciel du jour » (index outils) */
.sky-strip {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 0.86rem;
}
.sky-strip > span {
    padding: 3px 10px;
    border: 1px solid var(--line-soft, rgba(231, 214, 173, 0.16));
    border-radius: 999px;
    color: var(--muted, #c7bdad);
    white-space: nowrap;
}
.sky-strip > span:first-child {
    border: 0;
    padding-left: 0;
    color: var(--ink, #f5f0e6);
}

/* Lien d'évitement (accessibilité clavier — WCAG 2.4.1) */
.skip-link {
    position: absolute;
    left: 8px;
    top: -64px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--surface-strong, #171529);
    color: var(--ink, #f7f1df);
    border: 1px solid var(--accent, #49c6b6);
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

/* Focus clavier visible et distinct du survol (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #49c6b6);
    outline-offset: 2px;
}

/* Header : barre pleine largeur (fond/bordure), contenu centré dans un conteneur */
.site-header {
    justify-content: center;
    padding-inline: 0;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 30px);
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding: 0 clamp(16px, 3vw, 42px);
    position: relative;
}
@media (max-width: 1023px) {
    .site-header__inner { flex-wrap: wrap; }
}

/* ============================================================
   REFONTE 2026-07 — moins brutaliste, plus de confiance
   (bloc final : gagne la cascade sur l'empilement précédent)
   Objectifs : ombres douces au lieu des décalés durs,
   prose = texte et non plus cartes, contenu plus large.
   ============================================================ */

/* --- 1. Largeur : le contenu respire davantage --- */
.site-header,
.site-footer,
.tool-hero,
.tool-grid,
.content-band {
    width: min(1280px, calc(100% - 40px));
}
.site-header__inner { max-width: 1280px; }
.content-band > h2,
.section-heading h2 { max-width: none; }
.content-band p,
.tool-hero .lede { max-width: 74ch; }

/* --- 2. Adoucir les ombres dures décalées (signature brutaliste) ---
   On remplace tous les `Npx Npx 0` par une profondeur douce et diffuse. */
.tool-panel,
.score-card,
.profile-fieldset,
.table-wrap,
.tool-category,
.tool-feature-card,
.chart-wheel-panel,
.manual-coordinates,
.result-panel,
.faq-card,
.tool-hero,
.home-console,
.home-command,
.tool-link-grid a,
.secondary-action--light {
    box-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.85);
}
.tool-panel:hover,
.score-card:hover,
.profile-fieldset:hover,
.table-wrap:hover,
.tool-category:hover,
.tool-feature-card:hover,
.result-panel:hover,
.tool-link-grid a:hover,
.tool-link-grid a:focus-visible,
.secondary-action--light:hover,
.secondary-action--light:focus-visible {
    box-shadow: 0 28px 62px -32px rgba(0, 0, 0, 0.92);
    border-color: rgba(229, 179, 91, 0.42);
}
.tool-hero {
    box-shadow: var(--mystic-glow), 0 26px 60px -34px rgba(0, 0, 0, 0.8);
}
button,
.secondary-action {
    box-shadow: 0 10px 26px -14px rgba(11, 116, 108, 0.6);
}
button:hover,
.secondary-action:hover,
button:focus-visible,
.secondary-action:focus-visible {
    box-shadow: 0 16px 32px -14px rgba(11, 116, 108, 0.7);
}

/* --- 3. Prose = texte, pas carte ---
   Une carte n'est justifiée que si elle contient un lien ou une donnée
   résumée (<dl>). Les blocs d'interprétation qui ne sont que du texte
   (titre + paragraphes) perdent la boîte : fine règle supérieure + titre
   solaire, pour une lecture éditoriale plutôt qu'une grille de blocs.
   `:has()` distingue précisément prose vs carte à lien/donnée. */
.interpretation-card:not(:has(a)):not(:has(dl)) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.interpretation-card:not(:has(a)):not(:has(dl))::before { display: none; }
.interpretation-card:not(:has(a)):not(:has(dl)):hover {
    border-color: transparent;
    box-shadow: none;
}
.interpretation-card:not(:has(a)):not(:has(dl)) h3 {
    color: var(--solar);
    letter-spacing: 0.01em;
}
/* La séparation se fait par l'espace, pas par des traits */
.interpretation-grid {
    gap: clamp(26px, 3vw, 44px) clamp(32px, 4vw, 56px);
}

/* --- 5. Plus d'air entre les sections, moins de barres de séparation --- */
.content-band,
.data-section,
.tool-grid,
.seo-depth-section,
.home-flow,
.home-split,
.home-proof,
.editorial-depth-panel,
.tool-seo-panel {
    border-top: 0;
}
main > .content-band,
main > .data-section,
main > .tool-grid,
main > .seo-depth-section,
main > .home-flow,
main > .home-split,
main > .home-proof,
main > .editorial-depth-panel,
main > .tool-seo-panel,
main > section + section {
    margin-top: clamp(64px, 7vw, 108px);
}
/* on retire le padding-haut qui doublait l'espace sous l'ancienne barre */
.content-band { padding-top: 0; }
.data-section { padding-top: 0; }

/* --- 6. Interdit : carte dans une carte ---
   Une .content-list a déjà chaque <li> stylé en carte. Toute carte qui
   l'enveloppe crée un doublon de carte : on neutralise la boîte externe
   (le titre/eyebrow subsistent, la liste porte la structure). */
.tool-panel:has(.content-list),
.interpretation-card:has(.content-list),
.result-panel:has(.content-list),
.score-card:has(.content-list) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.tool-panel:has(.content-list)::before,
.interpretation-card:has(.content-list)::before,
.result-panel:has(.content-list)::before,
.score-card:has(.content-list)::before { display: none; }
.tool-panel:has(.content-list):hover,
.interpretation-card:has(.content-list):hover,
.result-panel:has(.content-list):hover,
.score-card:has(.content-list):hover {
    border-color: transparent;
    box-shadow: none;
}

/* --- 4. Données résumées : liste claire plutôt que grille de boîtes --- */
.result-facts div {
    box-shadow: none;
    background: rgba(239, 225, 183, 0.03);
    border-color: rgba(239, 225, 183, 0.14);
}
.result-facts div:hover {
    box-shadow: none;
    border-color: rgba(229, 179, 91, 0.4);
}

/* =====================================================================
   REFONTE HEADER + FOOTER 2026-07 — double étage, duo teal + or solaire
   Bloc final : l'emporte sur les blocs .site-header / .site-footer
   précédents. Barres pleine largeur, contenu centré à 1280px.
   ===================================================================== */

/* Barres pleine largeur (corrige la contrainte 1280 héritée de la refonte
   contenu : le fond/bordure doivent couvrir toute la largeur). */
.site-header,
.site-footer {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* -------------------- HEADER : conteneur à deux étages -------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    background: color-mix(in srgb, var(--bg, #090812) 86%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Étage 1 — bandeau utilitaire : ciel en direct + accès compte */
.site-header__utility {
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft, rgba(239, 225, 183, 0.18)) 55%, transparent);
    background: color-mix(in srgb, var(--surface-strong, #171529) 32%, transparent);
}
.site-header__utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 24px;
    max-width: 1280px;
    margin-inline: auto;
    padding: 5px clamp(16px, 3vw, 42px);
    font-size: 0.78rem;
    line-height: 1.2;
}
.sky-ticker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted, #c7bdad);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.sky-ticker:hover,
.sky-ticker:focus-visible { color: var(--ink, #f7f1df); outline: 0; }
.sky-ticker__glyph { color: var(--solar, #e5b35b); font-size: 0.98rem; line-height: 1; }
.sky-ticker__label { color: color-mix(in srgb, var(--ink, #f7f1df) 82%, transparent); }
.sky-ticker__retro { color: var(--solar, #e5b35b); font-weight: 800; }
.sky-ticker__phase { color: color-mix(in srgb, var(--muted, #c7bdad) 88%, transparent); font-weight: 500; }
.sky-ticker__date { color: color-mix(in srgb, var(--muted, #c7bdad) 70%, transparent); }
.site-header__utility-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
}
.site-header__utility-links a {
    color: var(--muted, #c7bdad);
    font-weight: 600;
    text-decoration: none;
}
.site-header__utility-links a:hover,
.site-header__utility-links a:focus-visible {
    color: var(--accent-dark, #9ee8dc);
    outline: 0;
}
.site-header__utility-links a.site-header__utility-cta { color: var(--solar, #e5b35b); }

/* Étage 2 — barre principale : marque + navigation */
.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 34px);
    max-width: 1280px;
    margin-inline: auto;
    min-height: 60px;
    padding: 8px clamp(16px, 3vw, 42px);
}
.site-header .brand::before { color: var(--solar, #e5b35b); }

/* Compte hors du menu principal en desktop (il vit dans le bandeau) ;
   présent dans le drawer en mobile où le bandeau est masqué. */
@media (min-width: 1024px) {
    .site-header .nav-item--account { display: none; }
}
@media (max-width: 1023px) {
    .site-header__utility { display: none; }
    .site-header__inner { flex-wrap: wrap; }
}

/* -------------------- FOOTER : cosmique restructuré -------------------- */
.site-footer {
    position: relative;
    margin-top: clamp(72px, 9vw, 120px);
    padding: 54px clamp(16px, 3vw, 42px) 30px;
    border-top: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    background: color-mix(in srgb, var(--surface-strong, #171529) 50%, transparent);
    color: var(--muted, #c7bdad);
}
/* Ornement : fine ligne dorée centrée, comme un horizon */
.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 62%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--solar, #e5b35b), transparent);
    opacity: 0.7;
}
.site-footer__top { max-width: 1280px; }
.site-footer__bottom { max-width: 1280px; }

/* Strip zodiaque des 12 signes */
.site-footer__signs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 1280px;
    margin: 30px auto 0;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--line-soft, rgba(239, 225, 183, 0.18)) 55%, transparent);
    opacity: 1;
    font-size: 0.9rem;
}
.site-footer__signs span { opacity: 1; }
.site-footer__signs-label {
    color: var(--solar, #e5b35b);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.site-footer__zodiac {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.site-footer__zodiac a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 999px;
    color: var(--muted, #c7bdad);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.site-footer__zodiac a:hover,
.site-footer__zodiac a:focus-visible {
    border-color: color-mix(in srgb, var(--solar, #e5b35b) 58%, transparent);
    background: color-mix(in srgb, var(--solar, #e5b35b) 10%, transparent);
    color: var(--ink, #f7f1df);
    outline: 0;
}
.site-footer__zodiac-glyph { color: var(--solar, #e5b35b); font-size: 1rem; line-height: 1; }

/* =====================================================================
   MEGA-MENU 2026-07 — panneaux « larges » sur 2 lignes, redesign
   Le panneau Astrologie (5 rubriques) débordait en une seule rangée.
   On passe en flex-wrap borné à ~3 colonnes : 5 rubriques → 3 + 2.
   Bloc final : l'emporte sur .site-header .nav-panel (4605).
   ===================================================================== */
.site-header .nav-panel {
    padding: 20px 22px;
    border-color: color-mix(in srgb, var(--line-soft, rgba(239, 225, 183, 0.18)) 90%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--solar, #e5b35b) 6%, transparent), transparent 42%),
        var(--surface-strong, #171529);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .62);
}
/* Fin liseré doré en haut du panneau (rappel du duo teal + or) */
.site-header .nav-panel {
    position: absolute;
}
.site-header .nav-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--solar, #e5b35b) 70%, transparent), transparent);
}

/* Panneau ancré sous la marque (bord gauche du conteneur), pas sous le
   déclencheur : évite le décalage vers la droite quand la nav est à droite. */
.site-header__inner { position: relative; }
.site-header .nav-group { position: static; }
.site-header .nav-panel {
    left: clamp(16px, 3vw, 42px);
    right: auto;
}

/* Panneaux larges : grille de 3 colonnes exactement (Astrologie → 3 + 2) */
.site-header .nav-panel--wide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 30px;
    max-width: min(720px, calc(100vw - 32px));
}
.site-header .nav-panel--wide .nav-col {
    min-width: 0;
}

/* Rubriques : titre teal souligné d'un court trait doré */
.site-header .nav-panel h2 {
    position: relative;
    margin: 0 0 8px;
    padding-bottom: 7px;
    color: var(--accent-dark, #9ee8dc);
}
.site-header .nav-panel h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--solar, #e5b35b);
    opacity: .8;
}
.site-header .nav-panel a {
    padding: 6px 8px;
    font-size: .9rem;
    color: color-mix(in srgb, var(--ink, #f7f1df) 88%, transparent);
}
.site-header .nav-panel a:hover,
.site-header .nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--accent, #49c6b6) 14%, transparent);
    color: var(--ink, #f7f1df);
}

/* En mobile, le panneau reste empilé pleine largeur (pas de grille bornée) */
@media (max-width: 1023px) {
    .site-header .nav-panel--wide {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 6px;
    }
    .site-header .nav-panel::before { display: none; }
}

/* =====================================================================
   PAGES ÉDITORIALES — flux d'article resserré (2026-07)
   Les pages tarot/guides empilent beaucoup de sections de prose ; le grand
   interligne inter-sections (réservé à l'accueil) y crée trop de vide entre
   blocs rédactionnels. On resserre le rythme, scopé à .editorial-section.
   ===================================================================== */
main > .editorial-section {
    margin-top: clamp(22px, 2.6vw, 38px);
}
/* Grilles de blocs de prose (« Erreurs fréquentes », interprétations) :
   séparation plus discrète entre les blocs. */
.editorial-section .interpretation-grid,
.interpretation-grid {
    gap: clamp(18px, 2.2vw, 30px);
}
/* Titre solaire des points de vigilance (désormais uniques par carte) */
.interpretation-card:not(:has(a)):not(:has(dl)) h3 {
    margin-bottom: 6px;
}

/* =====================================================================
   ÉDITORIAL — réponse directe (GEO) + tirage d'exemple (2026-07)
   ===================================================================== */
/* Réponse directe citable, en tête de page, accent solaire */
.editorial-answer {
    margin-top: clamp(18px, 2.4vw, 30px);
    padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.6vw, 28px);
    border: 1px solid color-mix(in srgb, var(--solar, #e5b35b) 34%, transparent);
    border-left: 3px solid var(--solar, #e5b35b);
    border-radius: 12px;
    background: color-mix(in srgb, var(--solar, #e5b35b) 8%, transparent);
}
.editorial-answer .eyebrow { color: var(--solar, #e5b35b); }
.editorial-answer__text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink, #f7f1df);
}

/* Tirage d'exemple : positions -> cartes, lisible d'un coup d'œil */
.tarot-draw {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 16px 0 18px;
    padding: 0;
}
.tarot-draw > div {
    display: grid;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 45%, transparent);
}
.tarot-draw dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted, #c7bdad) 90%, transparent);
}
.tarot-draw dd {
    margin: 0;
    font-weight: 700;
    color: var(--solar, #e5b35b);
}

/* =====================================================================
   NUMÉROLOGIE — calcul déroulé + tuiles de nombres (2026-07)
   Variation de présentation : pas de tableau, un calcul en étapes et
   une base de connaissances en tuiles.
   ===================================================================== */
/* Exemple de calcul : réduction pas à pas */
.calc-steps {
    margin: 16px 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: calc;
    display: grid;
    gap: 8px;
    max-width: 560px;
}
.calc-steps li {
    counter-increment: calc;
    position: relative;
    padding: 10px 14px 10px 44px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-left: 3px solid color-mix(in srgb, var(--accent, #49c6b6) 55%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 45%, transparent);
    font-variant-numeric: tabular-nums;
}
.calc-steps li::before {
    content: counter(calc);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #49c6b6) 22%, transparent);
    color: var(--accent-dark, #9ee8dc);
    font-size: 0.75rem;
    font-weight: 800;
}
.calc-result {
    margin: 6px 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--solar, #e5b35b);
}

/* Base des nombres : tuiles (pas un tableau) */
.number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.number-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: baseline;
    padding: 14px 16px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 42%, transparent);
}
.number-tile__n {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--solar, #e5b35b);
    font-variant-numeric: tabular-nums;
}
.number-tile__key {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-dark, #9ee8dc);
}
.number-tile p {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted, #c7bdad);
}

/* =====================================================================
   RUNES — lecture par position + base groupée par ættir (2026-07)
   Troisième variation de présentation (ni tableau, ni tuiles/calcul).
   ===================================================================== */
/* Exemple : lecture par position, le glyphe runique en vedette */
.rune-spread {
    display: grid;
    gap: 12px;
    margin: 16px 0 12px;
    max-width: 620px;
}
.rune-spread__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 45%, transparent);
}
.rune-spread__glyph {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--solar, #e5b35b);
}
.rune-spread__pos {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-dark, #9ee8dc);
}
.rune-spread__name { color: var(--ink, #f7f1df); }
.rune-spread__body p {
    margin: 3px 0 0;
    font-size: 0.9rem;
    color: var(--muted, #c7bdad);
}

/* Base des 24 runes, groupée par famille (ætt) */
.rune-aett {
    margin: 24px 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-dark, #9ee8dc);
}
.rune-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.rune-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft, rgba(239, 225, 183, 0.18));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #171529) 40%, transparent);
}
.rune-list__glyph {
    align-self: start;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--solar, #e5b35b);
}
.rune-list__name { color: var(--ink, #f7f1df); }
.rune-list__key {
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent, #49c6b6) 85%, transparent);
}
.rune-list__body p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted, #c7bdad);
}